fix: 다른 사용자 프로필 페이지에서 좋아요 토글 시, count가 변경되도록 수정

oduck-team · Mar 12, 2024 · 5843696 · 5843696
1 parent d2f5bca
commit 5843696
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/src/features/reviews/components/ReviewCard/ActionBar.tsx b/src/features/reviews/components/ReviewCard/ActionBar.tsx
@@ -14,6 +14,7 @@ import ReviewMoreButton from "./ReviewMoreButton";
 
 export interface ActionBarProps {
   isMine: boolean;
+  memberId?: number;
   isLike?: boolean;
   likeCount: number;
   createdAt?: string;
@@ -29,6 +30,7 @@ const DEBOUNCE_DELAY = 200;
 
 export default function ActionBar({
   isMine,
+  memberId,
   isLike,
   likeCount,
   createdAt,
@@ -44,7 +46,12 @@ export default function ActionBar({
   const [isLoginModalVisible, setIsLoginModalVisible] = useState(false);
   const data = useGetIsLike(reviewId);
   const userLike = data ? data.isLike : isLike;
-  const likeMutation = useToggleLike(reviewId, animeId, userLike ?? false);
+  const likeMutation = useToggleLike(
+    reviewId,
+    animeId,
+    userLike ?? false,
+    memberId,
+  );
   const { user } = useAuth();
 
   const handleClickLike = useDebounce(() => {

diff --git a/src/features/reviews/hook/useToggleLike.ts b/src/features/reviews/hook/useToggleLike.ts
@@ -17,6 +17,7 @@ export default function useToggleLike(
   reviewId: number,
   animeId: number,
   isLike: boolean,
+  memberId?: number, // 다른 사용자 프로필의 memberId
 ) {
   const queryClient = useQueryClient();
   const { reviewApi } = useApi();
@@ -29,7 +30,11 @@ export default function useToggleLike(
     onMutate: async () => {
       // optimistic update를 overwrite하지 않도록 refetch를 cancel
       await queryClient.cancelQueries(["review", animeId, user?.memberId]);
-      await queryClient.cancelQueries(["profile", user?.memberId, "review"]);
+      await queryClient.cancelQueries([
+        "profile",
+        memberId || user?.memberId,
+        "review",
+      ]);
       await queryClient.cancelQueries(["reviewLike", reviewId, user?.memberId]);
       await queryClient.cancelQueries(["MostRecentReviewList"]);
 
@@ -44,7 +49,7 @@ export default function useToggleLike(
         queryClient,
         reviewId,
         isLike,
-        ["profile", user?.memberId, "review"], // 회원 리뷰 목록
+        ["profile", memberId || user?.memberId, "review"], // 회원 리뷰 목록
       );
       const prevRecentReviewList = optimisticUpdateReviews(
         queryClient,
@@ -79,7 +84,7 @@ export default function useToggleLike(
         refetchType: "none", // 사용자의 요청 전까지는 refetch가 일어나지 않도록 합니다.
       });
       queryClient.invalidateQueries({
-        queryKey: ["profile", user?.memberId, "review"],
+        queryKey: ["profile", memberId || user?.memberId, "review"],
         refetchType: "none",
       });
       queryClient.invalidateQueries({
@@ -109,7 +114,7 @@ export default function useToggleLike(
       );
       rollBack(
         queryClient,
-        ["profile", user?.memberId, "review"],
+        ["profile", memberId || user?.memberId, "review"],
         context.prevUserReviewList,
       );
       rollBack(

diff --git a/src/features/users/routes/Profile/TabMenu/ReviewList.tsx b/src/features/users/routes/Profile/TabMenu/ReviewList.tsx
@@ -6,12 +6,14 @@ import EmptyList from "./EmptyList";
 
 interface ReviewListProps {
   isMine: boolean;
+  memberId: number;
   list: ReviewListResponse[];
   isLoading: boolean;
 }
 
 export default function ReviewList({
   isMine,
+  memberId,
   list,
   isLoading,
 }: ReviewListProps) {
@@ -54,6 +56,7 @@ export default function ReviewList({
             createdAt={review.createdAt}
             isTimeAgo={false}
             isMine={isMine}
+            memberId={memberId}
             likeCount={review.likeCount}
             reviewId={review.reviewId}
             animeId={review.animeId}

diff --git a/src/features/users/routes/Profile/TabMenu/index.tsx b/src/features/users/routes/Profile/TabMenu/index.tsx
@@ -62,6 +62,7 @@ export default function TabMenu({ isMine, memberId }: TabMenuProps) {
         {selectedMenu === "한줄리뷰" && (
           <ReviewList
             isMine={isMine}
+            memberId={memberId}
             list={reviews?.pages ?? []}
             isLoading={isLoadingReview}
           />