fix: 응답 완전히 반환 시 요청 보낼 수 있도록 isLoading 추가

softeerbootcamp4th · Aug 23, 2024 · e9bf111 · e9bf111
1 parent ddccd18
commit e9bf111
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 };
 }