Feat: 팔로우 커스텀 훅 초안 작성

Author: gibeom0218

src/components/UserProfile/UserProfileHeader/index.tsx

@@ -5,6 +5,8 @@ import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { Button } from '@/components/common/Button/Button';
 import { useUserProfileQuery } from '@/hooks/apis/Auth/useUserProfileQuery';
+// import { useAssignFollowMutation } from '@/hooks/apis/Follow/useAssignFollowMutation';
+// import { useDeleteFollowMutation } from '@/hooks/apis/Follow/useDeleteFollowMutation';
 
 interface UserProfileHeader {
   userId: string;
@@ -14,11 +16,22 @@ export const UserProfileHeader = ({ userId }: UserProfileHeader) => {
   const router = useRouter();
 
   const { name, profilePic, isFollow } = useUserProfileQuery(Number(userId));
+  // const { mutate: assignFollow, isPending } = useAssignFollowMutation();
+  // const { mutate: deleteFollow } = useDeleteFollowMutation();
 
   const handleBack = () => {
     router.back();
   };
 
+  const handleClickFollow = () => {
+    if (isFollow) {
+      console.log('dddd');
+    } else {
+      //assignFollow(Number(userId));
+      //deleteFollow(Number(userId));
+    }
+  };
+
   return (
     <>
       <IoMdClose className="size-24 cursor-pointer" onClick={handleBack} />
@@ -36,7 +49,12 @@ export const UserProfileHeader = ({ userId }: UserProfileHeader) => {
           ) : null}
           <span className="text-base-medium">{name}</span>
         </div>
-        <Button size="small" primary={isFollow ? false : true}>
+        <Button
+          size="small"
+          primary={isFollow ? false : true}
+          onClick={handleClickFollow}
+          // pending={isPending}
+        >
           {isFollow ? '팔로우' : '팔로잉'}
         </Button>
       </div>

src/hooks/apis/Follow/useAssignFollowMutation.ts

@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { POST } from '@/apis/services/httpMethod';
+import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
+import { AssignFollowResponse } from '@/types/response';
+import { notify } from '@/store/useToastStore';
+import { QUERY_KEYS } from '@/constants/QueryKeys';
+
+interface FollowId {
+  userId: number;
+}
+
+export const useAssignFollowMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: number) =>
+      POST<AssignFollowResponse, FollowId>(
+        API_ENDPOINTS.FOLLOW.ASSIGN_FOLLOW(userId),
+      ),
+    onSuccess: (data) => {
+      notify('success', '팔로우 등록', 3000);
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.USER_PROFILE, data.data.followId],
+      });
+    },
+    onError: (error) => {
+      console.error(error.message);
+      notify('error', '팔로우 등록 실패', 3000);
+    },
+  });
+};

src/hooks/apis/Follow/useDeleteFollowMutation.ts

@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { POST } from '@/apis/services/httpMethod';
+import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
+import { DeleteFollowResponse } from '@/types/response';
+import { notify } from '@/store/useToastStore';
+import { QUERY_KEYS } from '@/constants/QueryKeys';
+
+interface FollowId {
+  userId: number;
+}
+
+export const useDeleteFollowMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: number) =>
+      POST<DeleteFollowResponse, FollowId>(
+        API_ENDPOINTS.FOLLOW.DELETE_FOLLOW(userId),
+      ),
+    onSuccess: (data) => {
+      notify('success', '팔로우 취소', 3000);
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.USER_PROFILE, data.data.followerId],
+      });
+    },
+    onError: (error) => {
+      console.error(error.message);
+      notify('error', '팔로우 취소 실패', 3000);
+    },
+  });
+};