fix: ProjectCard 컴포넌트 onClick 핸들러 props 추가

SystemConsultantGroup · Sep 24, 2024 · ab98593 · ab98593
1 parent 47fba3f
commit ab98593
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/components/common/ProjectCard/ProjectCard.tsx b/src/components/common/ProjectCard/ProjectCard.tsx
@@ -21,9 +21,17 @@ export interface ProjectCardProps {
   data: ProjectCardDataType;
   width?: string;
   height?: string;
+  onClickLike?: () => void;
+  onClickBookmark?: () => void;
 }
 
-export function ProjectCard({ data, width, height }: ProjectCardProps) {
+export function ProjectCard({
+  data,
+  width,
+  height,
+  onClickLike,
+  onClickBookmark,
+}: ProjectCardProps) {
   const ParticipantsString = data.participants.join(", ");
   return (
     <Card className={classes.card} w={width} h={height}>
@@ -55,7 +63,14 @@ export function ProjectCard({ data, width, height }: ProjectCardProps) {
       </CardSection>
       <CardSection pl={24} pr={24} pb={16} pt={8}>
         <Stack gap={8}>
-          <div className={classes.title}>{data.title}</div>
+          <Link
+            href={{
+              pathname: `/${data.id}`,
+            }}
+            style={{ textDecorationLine: "none" }}
+          >
+            <div className={classes.title}>{data.title}</div>
+          </Link>
           <div className={classes["participants-container"]}>{ParticipantsString}</div>
           <Divider c={"var(--color-outline)"} />
         </Stack>
@@ -70,7 +85,12 @@ export function ProjectCard({ data, width, height }: ProjectCardProps) {
           </Group>
         </Stack>
       </CardSection>
-      <ProjectCardLikeSection likes={data.likes} isMarked={data.isMarked} />
+      <ProjectCardLikeSection
+        likes={data.likes}
+        isMarked={data.isMarked}
+        onClickLike={onClickLike}
+        onClickBookmark={onClickBookmark}
+      />
     </Card>
   );
 }
diff --git a/src/components/common/ProjectCard/ProjectCardLikeSection.tsx b/src/components/common/ProjectCard/ProjectCardLikeSection.tsx
@@ -1,23 +1,32 @@
+"use client";
+
 import { CardSection, Group, UnstyledButton } from "@mantine/core";
 import { IconBookmark, IconBookmarkFilled, IconThumbUp } from "@tabler/icons-react";
 import classes from "./ProjectCard.module.css";
 
 export interface ProjectCardLikeSectionProps {
   likes: number;
   isMarked: boolean;
+  onClickLike?: () => void;
+  onClickBookmark?: () => void;
 }
 
-export function ProjectCardLikeSection({ likes, isMarked }: ProjectCardLikeSectionProps) {
+export function ProjectCardLikeSection({
+  likes,
+  isMarked,
+  onClickLike,
+  onClickBookmark,
+}: ProjectCardLikeSectionProps) {
   return (
     <CardSection className={classes["like-section"]}>
       <Group align="center" justify="space-between" w={500} p={16}>
-        <UnstyledButton>
+        <UnstyledButton onClick={onClickLike}>
           <Group gap={0}>
             <IconThumbUp color="var(--color-primary)" />
             <div className={classes["likes-wrapper"]}>{likes}</div>
           </Group>
         </UnstyledButton>
-        <UnstyledButton>
+        <UnstyledButton onClick={onClickBookmark}>
           {isMarked ? (
             <IconBookmarkFilled color="var(--color-primary)" />
           ) : (