From fea7476af019f5135241a7c01a5369e0badca76f Mon Sep 17 00:00:00 2001
From: sooyeoniya <tndus1306403@naver.com>
Date: Fri, 23 Aug 2024 10:50:33 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20?=
 =?UTF-8?q?=EB=94=9C=EB=A0=88=EC=9D=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RushGameComponents/RushCardCurrentRatio.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx b/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx
index d6d8dd83..2f0e09fc 100644
--- a/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx
+++ b/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { cva } from "class-variance-authority";
 import Tooltip from "@/components/Tooltip";
 import { CARD_OPTION } from "@/constants/Rush/rushCard.ts";
@@ -57,6 +58,7 @@ export default function RushCardCurrentRatio() {
     const { userSelectedOption, cardOptions } = useRushGameStateContext();
     const { toggleContents } = useToggleContents();
     const fetchRushBalance = useFetchRushBalance();
+    const [throttle, setThrottle] = useState<boolean>(false);
 
     const leftOptionRatio = getOptionRatio({
         cardOptions: cardOptions,
@@ -78,6 +80,16 @@ export default function RushCardCurrentRatio() {
         option: CARD_OPTION.RIGHT_OPTIONS,
     });
 
+    const reloadThrottleButton = () => {
+        if (!throttle) {
+            fetchRushBalance();
+            setThrottle(true);
+            setTimeout(() => {
+                setThrottle(false);
+            }, 500);
+        }
+    };
+
     return (
         <div className="relative flex flex-col gap-16 w-[834px] h-[400px] bg-n-neutral-50 rounded-800 pt-12 pb-[94px] px-[57px] justify-between break-keep">
             <span className="flex flex-col justify-center items-center text-center gap-3">
@@ -108,7 +120,10 @@ export default function RushCardCurrentRatio() {
                 <div className={tooltipVariants({ visible: toggleContents })}>
                     <Tooltip content={TOOLTIP_CONTENT()} tooltipPosition="left" />
                 </div>
-                <button onClick={fetchRushBalance}>
+                <button
+                    onClick={reloadThrottleButton}
+                    className={`${throttle && "opacity-50 cursor-default"}`}
+                >
                     <Reload />
                 </button>
             </div>