Merge pull request #86 from SOPT-all/feat/product-like/#85

[feat/#85] 작품 좋아요 낙관적 업데이트 적용

Author: jstar000

src/apis/mutations/use-product-like.mutation.ts

@@ -3,10 +3,12 @@
 import { API_ENDPOINTS } from "@/apis/constants/api-endpoints";
 import { HTTPMethod, request } from "@/apis/request";
 import type {
+  ProductInfoResponse,
   ProductLikeRequest,
   ProductLikeResponse,
 } from "@/apis/types/product";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { productQueryKeys } from "@/apis/constants/query-key";
 
 export const postProductLike = ({ productId, userId }: ProductLikeRequest) => {
   return request<ProductLikeResponse>({
@@ -19,7 +21,52 @@ export const postProductLike = ({ productId, userId }: ProductLikeRequest) => {
 };
 
 export const useProductLikeMutation = () => {
+  const queryClient = useQueryClient();
+
   return useMutation({
     mutationFn: postProductLike,
+    onMutate: async ({ productId }) => {
+      // 진행 중인 쿼리 취소
+      await queryClient.cancelQueries({
+        queryKey: productQueryKeys.detail(productId),
+      });
+
+      // 이전 데이터 백업
+      const prevData = queryClient.getQueryData<ProductInfoResponse>(
+        productQueryKeys.detail(productId)
+      );
+
+      // setQueryData로 캐시 직접 조작
+      queryClient.setQueryData<ProductInfoResponse>(
+        productQueryKeys.detail(productId), // 어떤 캐시에 접근할지 지정
+        (
+          old // 캐시된 데이터를 받아서
+        ) =>
+          old // 데이터가 존재하면
+            ? {
+                ...old, // 나머지 데이터는 그대로 유지
+                isLiked: !old.isLiked, // isLiked 필드를 현재와 반대로 토글하고
+                likeCount: old.likeCount + (old.isLiked ? -1 : 1), // likeCount를 1+/-
+              }
+            : old // 캐시된 데이터가 없다면 그대로 둠
+      );
+
+      return { prevData };
+    },
+    onError: (_, { productId }, context) => {
+      // 실패 시 onMutate에서 백업해둔 이전 데이터로 캐시 원상복구
+      if (context?.prevData) {
+        queryClient.setQueryData(
+          productQueryKeys.detail(productId),
+          context.prevData
+        );
+      }
+    },
+    onSuccess: (_, { productId }) => {
+      // 새로운 데이터로 갱신
+      queryClient.invalidateQueries({
+        queryKey: productQueryKeys.detail(productId),
+      });
+    },
   });
 };

src/shared/components/footer/footer.tsx

@@ -1,48 +1,51 @@
+import { Suspense } from "react";
 import { LikeButton } from "@/shared/components/like-button/like-button";
 import * as styles from "./footer.css";
-import { useState } from "react";
 import SmallButton from "@/shared/components/button/small-button/small-button";
 import { SMALL_BUTTON_VARIANTS } from "@/shared/constants/button";
 import BottomSheet from "@/shared/components/bottom-sheet/bottom-sheet";
 import useBottomSheet from "@/shared/components/bottom-sheet/hooks/use-bottom-sheet";
 import FooterDetail from "@/shared/components/footer-detail/footer-detail";
 import Purchase from "@/pages/purchase/purchase";
 import { useProductLikeMutation } from "@/apis/mutations/use-product-like.mutation";
+import { useProductInfo } from "@/apis/queries/use-product-info.query";
 
-const Footer = () => {
-  const [isProductLiked, setIsProductLiked] = useState(false);
-  const { isOpen, open, close } = useBottomSheet();
+const ProductLikeButton = () => {
+  const productId = 1;
+  const userId = 1;
+
+  const { data: productInfo } = useProductInfo({ productId, userId });
   const { mutate: likeProduct } = useProductLikeMutation();
-  const [likeCount, setLikeCount] = useState(0);
 
-  // TODO: 페이지 내 훅으로 이동
   const handleProductLike = () => {
-    likeProduct(
-      { productId: 1, userId: 1 },
-      {
-        onSuccess: (data) => {
-          setIsProductLiked((prev) => !prev);
-          setLikeCount(data.likeCount);
-        },
-        onError: (error) => {
-          console.error("좋아요 실패:", error);
-        },
-      }
-    );
+    likeProduct({ productId, userId });
   };
 
+  return (
+    <LikeButton
+      variant="bottom-sheets"
+      liked={productInfo.isLiked}
+      count={productInfo.likeCount}
+      onClick={handleProductLike}
+    />
+  );
+};
+
+const Footer = () => {
+  const { isOpen, open, close } = useBottomSheet();
+
   return (
     <footer className={styles.layout}>
       <div className={styles.wrapper}>
         <FooterDetail />
 
         <div className={styles.container}>
-          <LikeButton
-            variant="bottom-sheets"
-            liked={isProductLiked}
-            count={likeCount}
-            onClick={handleProductLike}
-          />
+          <Suspense
+            fallback={
+              <LikeButton variant="bottom-sheets" liked={false} count={0} />
+            }>
+            <ProductLikeButton />
+          </Suspense>
 
           <div className={styles.buttonContainer}>
             <SmallButton

vite.config.ts

@@ -5,8 +5,6 @@ import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import svgr from "vite-plugin-svgr";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
-import { playwright } from "@vitest/browser-playwright";
 
 const dirname =
   typeof __dirname !== "undefined"
@@ -37,30 +35,4 @@ export default defineConfig({
       "@apis": path.resolve(dirname, "./src/apis"),
     },
   },
-  test: {
-    projects: [
-      {
-        extends: true,
-        plugins: [
-          storybookTest({
-            configDir: path.join(dirname, ".storybook"),
-          }),
-        ],
-        test: {
-          name: "storybook",
-          browser: {
-            enabled: true,
-            headless: true,
-            provider: playwright({}),
-            instances: [
-              {
-                browser: "chromium",
-              },
-            ],
-          },
-          setupFiles: [".storybook/vitest.setup.ts"],
-        },
-      },
-    ],
-  },
 });