Refactor : isFollowedByMe 추가에 따른 버튼 분기

potenday-project · Dec 15, 2023 · bb113ad · bb113ad
1 parent df6222d
commit bb113ad
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/client/src/components/user/followList/FollowUserCard.tsx b/client/src/components/user/followList/FollowUserCard.tsx
@@ -4,13 +4,15 @@ import UserAvatar from "@/components/user/info/UserAvatar";
 import { useRouter } from "next/navigation";
 import { USER_PAGE } from "@/const/clientPath";
 import useUnFollowMutation from "@/queries/user/useUnFollowMutation";
+import useFollowMutation from "@/queries/user/useFollowMutation";
 
 type Props = {
   imageUrl?: string;
   nickName: string;
   userId: string;
   content: string;
   userPk: number;
+  isFollowedByMe?: boolean;
 };
 
 const FollowUserCard = ({
@@ -19,10 +21,11 @@ const FollowUserCard = ({
   nickName,
   userId,
   content,
+  isFollowedByMe,
 }: Props) => {
   const router = useRouter();
   const { mutate: unfollowHandler } = useUnFollowMutation();
-
+  const { mutate: followHandler } = useFollowMutation();
   return (
     <Stack direction="row" gap={1} py={1}>
       <UserAvatar
@@ -45,12 +48,22 @@ const FollowUserCard = ({
               @{userId}
             </Typography>
           </Stack>
-          <Button
-            variant="outlined"
-            onClick={() => unfollowHandler(String(userPk))}
-          >
-            언팔로우
-          </Button>
+
+          {isFollowedByMe ? (
+            <Button
+              variant="outlined"
+              onClick={() => unfollowHandler(String(userPk))}
+            >
+              언팔로우
+            </Button>
+          ) : (
+            <Button
+              variant="contained"
+              onClick={() => followHandler(String(userPk))}
+            >
+              팔로우
+            </Button>
+          )}
         </Stack>
         <Typography>{content}</Typography>
       </Stack>

diff --git a/client/src/components/user/followList/FollowerList.tsx b/client/src/components/user/followList/FollowerList.tsx
@@ -19,15 +19,18 @@ const FollowerList = () => {
   return (
     <>
       {data.pages.map((page) =>
-        page.content.map(({ nickname, id, introduction, userNo }) => (
-          <FollowUserCard
-            key={id}
-            nickName={nickname}
-            userId={id}
-            userPk={userNo}
-            content={introduction}
-          />
-        ))
+        page.content.map(
+          ({ nickname, id, introduction, userNo, isFollowedByMe }) => (
+            <FollowUserCard
+              key={id}
+              nickName={nickname}
+              userId={id}
+              userPk={userNo}
+              isFollowedByMe={isFollowedByMe}
+              content={introduction}
+            />
+          )
+        )
       )}
       {isFetchingNextPage ? (
         <ComponentRepeater count={5}>

diff --git a/client/src/components/user/followList/FollowingList.tsx b/client/src/components/user/followList/FollowingList.tsx
@@ -19,12 +19,13 @@ const FollowingList = () => {
   return (
     <>
       {data.pages.map((page) =>
-        page.content.map(({ nickname, id, introduction, profileImgUrls, userNo }) => (
+        page.content.map(({ nickname, id, introduction, profileImgUrls, userNo,isFollowedByMe }) => (
           <FollowUserCard
             key={id}
             nickName={nickname}
             userId={id}
             userPk={userNo}
+            isFollowedByMe={isFollowedByMe}
             imageUrl={profileImgUrls[0]?.attachUrl}
             content={introduction}
           />

diff --git a/client/src/types/user/followingUserInterface.ts b/client/src/types/user/followingUserInterface.ts
@@ -5,6 +5,7 @@ interface FollowingUserInterface {
   id: string;
   userNo: number;
   introduction: string;
+  isFollowedByMe:boolean;
   createdBy: number;
   profileImgUrls: AttachInterface[];
 }