refactor: 게더링 좋아요 수정

prgrms-web-devcourse-final-project · Dec 9, 2024 · 78aa4a9 · 78aa4a9
1 parent e7bdf7e
commit 78aa4a9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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} />