Feat: 팔로우 등록/취소 낙관적업데이트 적용

Author: gibeom0218

src/components/UserProfile/UserProfileContent/index.tsx

@@ -11,31 +11,33 @@ interface UserProfileContent {
 export const UserProfileContent = ({ userId }: UserProfileContent) => {
   const { completeResponses, isLoading } = useUserProfileQuery(Number(userId));
 
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Spinner className="size-28" />
+      </div>
+    );
+  }
+
   return (
     <div className="mt-8 grid grid-cols-3 gap-8">
-      {isLoading ? (
-        <div className="col-span-3 flex items-center justify-center">
-          <Spinner />
-        </div>
-      ) : (
-        completeResponses.map((complete) =>
-          complete.completePic ? (
-            <Image
-              key={complete.completeId}
-              width={48}
-              height={48}
-              className="flex h-109 w-full rounded-4"
-              priority
-              src={complete.completePic}
-              alt="인증한 이미지"
-            />
-          ) : (
-            <div
-              key={complete.completeId}
-              className="flex h-109 w-full rounded-4 bg-gray-200"
-            />
-          ),
-        )
+      {completeResponses.map((complete) =>
+        complete.completePic ? (
+          <Image
+            key={complete.completeId}
+            width={48}
+            height={48}
+            className="flex h-109 w-full rounded-4"
+            priority
+            src={complete.completePic}
+            alt="인증한 이미지"
+          />
+        ) : (
+          <div
+            key={complete.completeId}
+            className="flex h-109 w-full rounded-4 bg-gray-200"
+          />
+        ),
       )}
     </div>
   );

src/components/UserProfile/UserProfileHeader/index.tsx

@@ -5,8 +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';
+import { useAssignFollowMutation } from '@/hooks/apis/Follow/useAssignFollowMutation';
+import { useDeleteFollowMutation } from '@/hooks/apis/Follow/useDeleteFollowMutation';
 
 interface UserProfileHeader {
   userId: string;
@@ -16,19 +16,18 @@ 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 { mutate: assignFollow } = useAssignFollowMutation();
+  const { mutate: deleteFollow } = useDeleteFollowMutation();
 
   const handleBack = () => {
     router.back();
   };
 
   const handleClickFollow = () => {
     if (isFollow) {
-      console.log('dddd');
+      deleteFollow(Number(userId));
     } else {
-      //assignFollow(Number(userId));
-      //deleteFollow(Number(userId));
+      assignFollow(Number(userId));
     }
   };
 
@@ -53,9 +52,8 @@ export const UserProfileHeader = ({ userId }: UserProfileHeader) => {
           size="small"
           primary={isFollow ? false : true}
           onClick={handleClickFollow}
-          // pending={isPending}
         >
-          {isFollow ? '팔로우' : '팔로잉'}
+          {isFollow === true ? '팔로잉' : '팔로우'}
         </Button>
       </div>
     </>

src/hooks/apis/Follow/useAssignFollowMutation.ts

@@ -1,7 +1,7 @@
 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 { AssignFollowResponse, UserProfileResponse } from '@/types/response';
 import { notify } from '@/store/useToastStore';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 
@@ -17,13 +17,40 @@ export const useAssignFollowMutation = () => {
       POST<AssignFollowResponse, FollowId>(
         API_ENDPOINTS.FOLLOW.ASSIGN_FOLLOW(userId),
       ),
-    onSuccess: (data) => {
-      notify('success', '팔로우 등록', 3000);
+    onMutate: async (userId) => {
+      const previousData = queryClient.getQueriesData<UserProfileResponse>({
+        queryKey: [QUERY_KEYS.USER_PROFILE, userId],
+      });
+
+      await queryClient.cancelQueries({
+        queryKey: [QUERY_KEYS.USER_PROFILE, userId],
+      });
+
+      queryClient.setQueryData(
+        [QUERY_KEYS.USER_PROFILE, userId],
+        (oldData: UserProfileResponse) => ({
+          ...oldData,
+          data: {
+            ...oldData.data,
+            isFollow: true,
+          },
+        }),
+      );
+      return { previousData };
+    },
+    onSettled: (userId) => {
       queryClient.invalidateQueries({
-        queryKey: [QUERY_KEYS.USER_PROFILE, data.data.followId],
+        queryKey: [QUERY_KEYS.USER_PROFILE, userId],
       });
     },
-    onError: (error) => {
+    onSuccess: () => {
+      notify('success', '팔로우 등록', 3000);
+    },
+    onError: (error, userId, context) => {
+      queryClient.setQueryData(
+        [QUERY_KEYS.USER_PROFILE, userId],
+        context?.previousData,
+      );
       console.error(error.message);
       notify('error', '팔로우 등록 실패', 3000);
     },

src/hooks/apis/Follow/useDeleteFollowMutation.ts

@@ -1,7 +1,7 @@
 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 { DeleteFollowResponse, UserProfileResponse } from '@/types/response';
 import { notify } from '@/store/useToastStore';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 
@@ -17,13 +17,41 @@ export const useDeleteFollowMutation = () => {
       POST<DeleteFollowResponse, FollowId>(
         API_ENDPOINTS.FOLLOW.DELETE_FOLLOW(userId),
       ),
-    onSuccess: (data) => {
-      notify('success', '팔로우 취소', 3000);
+    onMutate: async (userId) => {
+      const previousData = queryClient.getQueriesData<UserProfileResponse>({
+        queryKey: [QUERY_KEYS.USER_PROFILE, userId],
+      });
+
+      await queryClient.cancelQueries({
+        queryKey: [QUERY_KEYS.USER_PROFILE, userId],
+      });
+
+      queryClient.setQueryData(
+        [QUERY_KEYS.USER_PROFILE, userId],
+        (oldData: UserProfileResponse) => ({
+          ...oldData,
+          data: {
+            ...oldData.data,
+            isFollow: false,
+          },
+        }),
+      );
+      return { previousData };
+    },
+
+    onSettled: (userId) => {
       queryClient.invalidateQueries({
-        queryKey: [QUERY_KEYS.USER_PROFILE, data.data.followerId],
+        queryKey: [QUERY_KEYS.USER_PROFILE, userId],
       });
     },
-    onError: (error) => {
+    onSuccess: () => {
+      notify('success', '팔로우 취소', 3000);
+    },
+    onError: (error, userId, context) => {
+      queryClient.setQueryData(
+        [QUERY_KEYS.USER_PROFILE, userId],
+        context?.previousData,
+      );
       console.error(error.message);
       notify('error', '팔로우 취소 실패', 3000);
     },