refactor: 투표 API에 쓰로틀링 적용 #401

woowacourse-teams · Nov 18, 2024 · 89083c7 · 89083c7
1 parent e5ca4bb
commit 89083c7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
@@ -3,11 +3,12 @@ import { useParams } from 'react-router-dom';
 
 import { voteBalanceContent } from '@/apis/balanceContent';
 import useGetUserInfo from '@/hooks/useGetUserInfo';
+import useThrottle from '@/hooks/useThrottle';
 
 interface UseSelectCompleteMutationProps {
   selectedId: number;
-  contentId?: number;
   completeSelection: () => void;
+  contentId?: number;
 }
 
 const useCompleteSelectionMutation = ({
@@ -20,7 +21,7 @@ const useCompleteSelectionMutation = ({
     member: { memberId },
   } = useGetUserInfo();
 
-  return useMutation({
+  const completeSelectionMutation = useMutation({
     mutationFn: async () => {
       if (typeof contentId === 'undefined') {
         throw new Error('contentId 가 존재하지 않습니다.');
@@ -36,6 +37,10 @@ const useCompleteSelectionMutation = ({
       completeSelection();
     },
   });
+
+  const throttledVote = useThrottle(completeSelectionMutation.mutate);
+
+  return { ...completeSelectionMutation, vote: throttledVote };
 };
 
 export default useCompleteSelectionMutation;
diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
@@ -10,21 +10,18 @@ interface SelectButtonProps {
 }
 
 const SelectButton = ({ contentId, selectedId, completeSelection }: SelectButtonProps) => {
-  const {
-    data,
-    isPending,
-    mutate: vote,
-  } = useCompleteSelectionMutation({
+  const { isSuccess, isPending, vote } = useCompleteSelectionMutation({
     selectedId,
     contentId,
     completeSelection,
   });
+
   return (
     <div css={bottomButtonLayout}>
       <Button
         bottom
-        disabled={data || !selectedId || isPending}
-        text={data || isPending ? '선택 완료' : '선택'}
+        disabled={!selectedId || isSuccess || isPending}
+        text={isSuccess || isPending ? '선택 완료' : '선택'}
         onClick={vote}
       />
     </div>