From 78aa4a90bd206fd62fffbbc8c86d079633ae7cef Mon Sep 17 00:00:00 2001
From: joarthvr <ioi456859@gmail.com>
Date: Mon, 9 Dec 2024 23:14:35 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EA=B2=8C=EB=8D=94=EB=A7=81=20?=
 =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gathering/lib/hooks/useGatheringLike.ts       | 15 +++++++++++++++
 src/features/gathering/model/dto/request.dto.ts   |  1 +
 .../GatheringDetailPage/GatheringDetailPage.tsx   |  6 +++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/features/gathering/lib/hooks/useGatheringLike.ts b/src/features/gathering/lib/hooks/useGatheringLike.ts
index a205afd..49e4668 100644
--- a/src/features/gathering/lib/hooks/useGatheringLike.ts
+++ b/src/features/gathering/lib/hooks/useGatheringLike.ts
@@ -20,15 +20,28 @@ export const useGatheringLike = ({ gatheringId, onSuccess, onError }: UseGatheri
     mutationFn: () => gatheringApi.toggleLike(gatheringId),
 
     onMutate: async () => {
+      // 진행 중인 쿼리 취소
       await queryClient.cancelQueries({
         queryKey: ['/gatheringDetail', gatheringId],
       });
 
+      
       const previousDetail = queryClient.getQueryData<GatheringDetailResponse>([
         '/gatheringDetail',
         gatheringId,
       ]);
 
+      
+      if (previousDetail?.data) {
+        queryClient.setQueryData<GatheringDetailResponse>(['/gatheringDetail', gatheringId], {
+          ...previousDetail,
+          data: {
+            ...previousDetail.data,
+            isLiked: !previousDetail.data.isLiked,
+          },
+        });
+      }
+
       return { previousDetail };
     },
 
@@ -48,6 +61,7 @@ export const useGatheringLike = ({ gatheringId, onSuccess, onError }: UseGatheri
           data: {
             ...currentDetail.data,
             likeCounts: newLikeCounts,
+            isLiked: !!response.data,
           },
         });
       }
@@ -56,6 +70,7 @@ export const useGatheringLike = ({ gatheringId, onSuccess, onError }: UseGatheri
     },
 
     onError: (error, _, context) => {
+    
       if (context?.previousDetail) {
         queryClient.setQueryData(['/gatheringDetail', gatheringId], context.previousDetail);
       }
diff --git a/src/features/gathering/model/dto/request.dto.ts b/src/features/gathering/model/dto/request.dto.ts
index d2f3890..4f6dd09 100644
--- a/src/features/gathering/model/dto/request.dto.ts
+++ b/src/features/gathering/model/dto/request.dto.ts
@@ -56,6 +56,7 @@ export interface GatheringDetailContent {
   title: string;
   content: string;
   likeCounts: number;
+  isLiked: boolean;
   status: '모집중' | '모집완료' | '기간만료';
 }
 
diff --git a/src/pages/GatheringDetailPage/GatheringDetailPage.tsx b/src/pages/GatheringDetailPage/GatheringDetailPage.tsx
index 3a042a9..0b3e26a 100644
--- a/src/pages/GatheringDetailPage/GatheringDetailPage.tsx
+++ b/src/pages/GatheringDetailPage/GatheringDetailPage.tsx
@@ -72,7 +72,11 @@ export const GatheringDetailPage = () => {
       </section>
       <div className={styles.footer}>
         <div className={styles.stats}>
-          <LikeBtn disabled={isPending} onLikeClick={toggleLike} />
+          <LikeBtn
+            disabled={isPending}
+            isLiked={gatheringDetail.isLiked}
+            onLikeClick={toggleLike}
+          />
         </div>
         <GatheringDetailUserInfo username={gatheringDetail.username} />
         <GatheringDetailBtnCon gatheringId={gatheringId} userId={gatheringDetail.userId} />