From 89083c755e9a22ac1af25080480561f04a6ef3ec Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Mon, 18 Nov 2024 20:39:48 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20API=EC=97=90?=
 =?UTF-8?q?=20=EC=93=B0=EB=A1=9C=ED=8B=80=EB=A7=81=20=EC=A0=81=EC=9A=A9=20?=
 =?UTF-8?q?#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SelectButton/SelectButton.hook.ts      |  9 +++++++--
 .../GamePage/components/SelectButton/SelectButton.tsx | 11 ++++-------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
index cb53e714..23585792 100644
--- 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
index 7c12282c..4f3716cb 100644
--- 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>