From 584369681a2d78f193a0f0c584fb731598938fa1 Mon Sep 17 00:00:00 2001
From: presentKey <kim.hyeonjae4@gmail.com>
Date: Tue, 12 Mar 2024 23:38:19 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=8B=A4=EB=A5=B8=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=EC=9E=90=20=ED=94=84=EB=A1=9C=ED=95=84=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=97=90=EC=84=9C=20=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=ED=86=A0=EA=B8=80=20=EC=8B=9C,=20count=EA=B0=80=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reviews/components/ReviewCard/ActionBar.tsx     |  9 ++++++++-
 src/features/reviews/hook/useToggleLike.ts          | 13 +++++++++----
 .../users/routes/Profile/TabMenu/ReviewList.tsx     |  3 +++
 src/features/users/routes/Profile/TabMenu/index.tsx |  1 +
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/features/reviews/components/ReviewCard/ActionBar.tsx b/src/features/reviews/components/ReviewCard/ActionBar.tsx
index 3fd164dc..214d67e0 100644
--- 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
index 9b989faf..ce9b6c78 100644
--- 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
index 211f2e02..ac8ff978 100644
--- 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
index c83318da..854bc8aa 100644
--- 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}
           />