From e9bf111777f4117e90ee9c427005d21856c7c2e8 Mon Sep 17 00:00:00 2001
From: sooyeoniya <tndus1306403@naver.com>
Date: Fri, 23 Aug 2024 11:27:29 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=91=EB=8B=B5=20=EC=99=84=EC=A0=84?=
 =?UTF-8?q?=ED=9E=88=20=EB=B0=98=ED=99=98=20=EC=8B=9C=20=EC=9A=94=EC=B2=AD?=
 =?UTF-8?q?=20=EB=B3=B4=EB=82=BC=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D?=
 =?UTF-8?q?=20isLoading=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RushGame/RushGameComponents/RushCardCurrentRatio.tsx    | 4 ++--
 .../src/features/RushGame/RushGameSections/SelectedCard.tsx | 2 +-
 client/src/hooks/RushGame/useFetchRushBalance.ts            | 3 ++-
 .../hooks/RushGame/useFetchRushUserParticipationStatus.ts   | 2 +-
 client/src/hooks/useFetch.ts                                | 6 +++++-
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx b/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx
index 2f0e09fc..8e0516ec 100644
--- a/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx
+++ b/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx
@@ -57,7 +57,7 @@ function getMessage(leftRatio: number, rightRatio: number, userSelectedOption: C
 export default function RushCardCurrentRatio() {
     const { userSelectedOption, cardOptions } = useRushGameStateContext();
     const { toggleContents } = useToggleContents();
-    const fetchRushBalance = useFetchRushBalance();
+    const { fetchRushBalance, isLoadingRushBalance } = useFetchRushBalance();
     const [throttle, setThrottle] = useState<boolean>(false);
 
     const leftOptionRatio = getOptionRatio({
@@ -81,7 +81,7 @@ export default function RushCardCurrentRatio() {
     });
 
     const reloadThrottleButton = () => {
-        if (!throttle) {
+        if (!throttle && !isLoadingRushBalance) {
             fetchRushBalance();
             setThrottle(true);
             setTimeout(() => {
diff --git a/client/src/features/RushGame/RushGameSections/SelectedCard.tsx b/client/src/features/RushGame/RushGameSections/SelectedCard.tsx
index 29029066..bf9668d3 100644
--- a/client/src/features/RushGame/RushGameSections/SelectedCard.tsx
+++ b/client/src/features/RushGame/RushGameSections/SelectedCard.tsx
@@ -54,7 +54,7 @@ function SelectedCardCurrentRatio({ onClick }: SelectedCardDetailsProps) {
 
 export default function SelectedCard() {
     const { toggleContents, toggle } = useToggleContents({ useDuration: false });
-    const fetchRushBalance = useFetchRushBalance();
+    const { fetchRushBalance } = useFetchRushBalance();
 
     const selectedCardToggle = () => {
         toggle();
diff --git a/client/src/hooks/RushGame/useFetchRushBalance.ts b/client/src/hooks/RushGame/useFetchRushBalance.ts
index 4a0573be..0c67b1e3 100644
--- a/client/src/hooks/RushGame/useFetchRushBalance.ts
+++ b/client/src/hooks/RushGame/useFetchRushBalance.ts
@@ -15,6 +15,7 @@ export default function useFetchRushBalance() {
     const {
         data: rushBalanceData,
         isSuccess: isSuccessRushBalance,
+        isLoading: isLoadingRushBalance,
         fetchData: getRushBalance,
     } = useFetch<GetRushBalanceResponse, string>((token) => RushAPI.getRushBalance(token));
 
@@ -50,5 +51,5 @@ export default function useFetchRushBalance() {
         }
     }, [isSuccessRushBalance, rushBalanceData]);
 
-    return fetchRushBalance;
+    return { fetchRushBalance, isSuccessRushBalance, isLoadingRushBalance };
 }
diff --git a/client/src/hooks/RushGame/useFetchRushUserParticipationStatus.ts b/client/src/hooks/RushGame/useFetchRushUserParticipationStatus.ts
index 642d4518..118c1e31 100644
--- a/client/src/hooks/RushGame/useFetchRushUserParticipationStatus.ts
+++ b/client/src/hooks/RushGame/useFetchRushUserParticipationStatus.ts
@@ -9,7 +9,7 @@ import { RUSH_ACTION } from "@/types/rushGame.ts";
 
 export function useFetchRushUserParticipationStatus() {
     const dispatch = useRushGameDispatchContext();
-    const fetchRushBalance = useFetchRushBalance();
+    const { fetchRushBalance } = useFetchRushBalance();
 
     const { data: userParticipatedStatus, fetchData: getRushUserParticipationStatus } = useFetch<
         GetRushUserParticipationStatusResponse,
diff --git a/client/src/hooks/useFetch.ts b/client/src/hooks/useFetch.ts
index 60f9498c..76849e7f 100644
--- a/client/src/hooks/useFetch.ts
+++ b/client/src/hooks/useFetch.ts
@@ -5,12 +5,14 @@ export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>,
     const [data, setData] = useState<T | null>(null);
     const [isSuccess, setIsSuccess] = useState<boolean>(false);
     const [isError, setIsError] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
     const { showBoundary } = useErrorBoundary();
 
     const fetchData = async (params?: P) => {
         setIsError(false);
         setIsSuccess(false);
+        setIsLoading(true);
 
         try {
             const data = await fetch(params as P);
@@ -22,8 +24,10 @@ export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>,
             if (showError) {
                 showBoundary(error);
             }
+        } finally {
+            setIsLoading(false);
         }
     };
 
-    return { data, isSuccess, isError, fetchData };
+    return { data, isSuccess, isError, isLoading, fetchData };
 }