팔로잉,팔로워-팔로우/언팔로우-버튼-분기

client/src/components/post/PostCard.tsx

@@ -66,7 +66,7 @@ const PostCard = ({
   );
 
   return (
-    <Card sx={{ display: "flex", gap: 2, p: 2 }}>
+    <Card sx={{ display: "flex", gap: 2, py:2 }} elevation={0}>
       <Link href={USER_PAGE(createdBy)}>
         <UserAvatar
           src={profileImgUrls[0]?.attachUrl}

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>

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}>

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}
           />

client/src/types/user/followingUserInterface.ts

@@ -5,6 +5,7 @@ interface FollowingUserInterface {
   id: string;
   userNo: number;
   introduction: string;
+  isFollowedByMe:boolean;
   createdBy: number;
   profileImgUrls: AttachInterface[];
 }