[FE] feat: 리뷰 좋아요 디바운스 적용

frontend/.eslintrc.js

@@ -89,6 +89,7 @@ module.exports = {
     ],
     'import/no-unresolved': 'off',
     '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/ban-types': 'off',
   },
   settings: {
     'import/resolver': {

frontend/src/components/Review/ReviewItem/ReviewItem.tsx

@@ -3,8 +3,9 @@ import { useState } from 'react';
 import styled from 'styled-components';
 
 import { SvgIcon, TagList } from '@/components/Common';
-import { useReviewFavorite } from '@/hooks/review';
-import type { Review, ReviewFavoriteRequestBody } from '@/types/review';
+import { useReviewFavoriteMutation } from '@/hooks/queries/review';
+import useDebounce from '@/hooks/useDebounce';
+import type { Review } from '@/types/review';
 import { getRelativeDate } from '@/utils/relativeDate';
 
 interface ReviewItemProps {
@@ -15,24 +16,31 @@ interface ReviewItemProps {
 const srcPath = process.env.NODE_ENV === 'development' ? '' : '/images/';
 
 const ReviewItem = ({ productId, review }: ReviewItemProps) => {
-  const { id, userName, profileImage, image, rating, tags, content, createdAt, rebuy, favoriteCount, favorite } = review;
+  const { id, userName, profileImage, image, rating, tags, content, createdAt, rebuy, favoriteCount, favorite } =
+    review;
   const [isFavorite, setIsFavorite] = useState(favorite);
   const [currentFavoriteCount, setCurrentFavoriteCount] = useState(favoriteCount);
-  const { request } = useReviewFavorite<ReviewFavoriteRequestBody>(productId, id);
+  const { mutate } = useReviewFavoriteMutation(productId, id);
 
   const theme = useTheme();
 
   const handleToggleFavorite = async () => {
-    try {
-      await request({ favorite: !isFavorite });
-
-      setIsFavorite((prev) => !prev);
-      setCurrentFavoriteCount((prev) => (isFavorite ? prev - 1 : prev + 1));
-    } catch (error) {
-      alert('리뷰 좋아요를 실패했습니다 🥲');
-    }
+    mutate(
+      { favorite: !isFavorite },
+      {
+        onSuccess: () => {
+          setIsFavorite((prev) => !prev);
+          setCurrentFavoriteCount((prev) => (isFavorite ? prev - 1 : prev + 1));
+        },
+        onError: () => {
+          alert('리뷰 좋아요를 다시 시도해주세요.');
+        },
+      }
+    );
   };
 
+  const [debouncedToggleFavorite] = useDebounce(handleToggleFavorite, 200);
+
   return (
     <ReviewItemContainer>
       <ReviewerWrapper>
@@ -68,7 +76,7 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
       <FavoriteButton
         type="button"
         variant="transparent"
-        onClick={handleToggleFavorite}
+        onClick={debouncedToggleFavorite}
         aria-label={`좋아요 ${favoriteCount}개`}
       >
         <SvgIcon variant={isFavorite ? 'favoriteFilled' : 'favorite'} color={isFavorite ? 'red' : theme.colors.gray4} />

frontend/src/hooks/queries/review/index.ts

@@ -0,0 +1 @@
+export { default as useReviewFavoriteMutation } from './useReviewFavoriteMutation';

frontend/src/hooks/queries/review/useReviewFavoriteMutation.ts

@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { productApi } from '@/apis';
+import type { ReviewFavoriteRequestBody } from '@/types/review';
+
+const headers = { 'Content-Type': 'application/json' };
+
+const patchReviewFavorite = (productId: number, reviewId: number, body: ReviewFavoriteRequestBody) => {
+  return productApi.patch({ params: `/${productId}/reviews/${reviewId}`, credentials: true }, headers, body);
+};
+
+const useReviewFavoriteMutation = (productId: number, reviewId: number) => {
+  return useMutation({
+    mutationFn: (body: ReviewFavoriteRequestBody) => patchReviewFavorite(productId, reviewId, body),
+  });
+};
+
+export default useReviewFavoriteMutation;

frontend/src/hooks/useDebounce.ts

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+const useDebounce = (fn: Function, ms = 0) => {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef(fn);
+
+  const debounce = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      callbackRef.current();
+    }, ms);
+  }, [ms]);
+
+  const clear = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    callbackRef.current = fn;
+  }, [fn]);
+
+  useEffect(() => {
+    return clear;
+  }, []);
+
+  return [debounce, clear];
+};
+
+export default useDebounce;