[Feat] 선착순 예외 처리 및 UX 개선

client/src/components/Suspense/index.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+
+interface SuspenseProps extends PropsWithChildren {
+    isLoading?: boolean;
+}
+
+export default function Suspense({ children, isLoading = false }: SuspenseProps) {
+    return <>{isLoading ? <></> : children}</>;
+}

client/src/contexts/rushGameContext.tsx

@@ -1,226 +1,71 @@
-import { ReactNode, createContext, useCallback, useEffect, useState } from "react";
-import { useCookies } from "react-cookie";
-import { useLoaderData } from "react-router-dom";
-import { RushAPI } from "@/apis/rushAPI.ts";
-import { CARD_COLOR, CARD_OPTION, CARD_PHASE } from "@/constants/Rush/rushCard";
-import { COOKIE_KEY } from "@/constants/cookie.ts";
-import useCountdown from "@/hooks/useCountdown.ts";
-import useFetch from "@/hooks/useFetch.ts";
+import { ReactNode, createContext, useReducer } from "react";
+import { CARD_COLOR, CARD_OPTION } from "@/constants/Rush/rushCard";
 import {
-    GetRushBalanceResponse,
-    GetRushUserParticipationStatusResponse,
-    GetTotalRushEventsResponse,
-} from "@/types/rushApi.ts";
-import { CardOption, CardOptionState, GamePhase, RushGameContextType } from "@/types/rushGame";
-import { getMsTime } from "@/utils/getMsTime.ts";
-
-export const RushGameContext = createContext<RushGameContextType | undefined>(undefined);
-
-export const RushGameProvider = ({ children }: { children: ReactNode }) => {
-    // const navigate  = useNavigate();
-    const [cookies] = useCookies([COOKIE_KEY.ACCESS_TOKEN]);
-    const rushData = useLoaderData() as GetTotalRushEventsResponse;
-    const [initialPreCountdown, setInitialPreCountdown] = useState<number | null>(null);
-    const [initialRunCountdown, setInitialRunCountdown] = useState<number | null>(null);
-
-    const [gameState, setGameState] = useState<RushGameContextType["gameState"]>({
-        phase: CARD_PHASE.NOT_STARTED,
-        userParticipatedStatus: false,
-        userSelectedOption: CARD_OPTION.LEFT_OPTIONS,
-        cardOptions: {
-            [CARD_OPTION.LEFT_OPTIONS]: {
-                mainText: "",
-                subText: "",
-                resultMainText: "",
-                resultSubText: "",
-                color: CARD_COLOR.GREEN,
-                selectionCount: 0,
-            },
-            [CARD_OPTION.RIGHT_OPTIONS]: {
-                mainText: "",
-                subText: "",
-                resultMainText: "",
-                resultSubText: "",
-                color: CARD_COLOR.BLUE,
-                selectionCount: 0,
-            },
-        },
-    });
-
-    const setGamePhase = useCallback((phase: GamePhase) => {
-        setGameState((prevState) => ({ ...prevState, phase }));
-    }, []);
-
-    const setUserParticipationStatus = useCallback((status: boolean) => {
-        setGameState((prevState) => ({ ...prevState, userParticipatedStatus: status }));
-    }, []);
-
-    const setUserSelectedOption = useCallback((option: CardOption) => {
-        setGameState((prevState) => ({ ...prevState, userSelectedOption: option }));
-    }, []);
-
-    const updateCardOptions = useCallback(
-        (option: CardOption, updates: Partial<CardOptionState>) => {
-            setGameState((prevState) => ({
-                ...prevState,
-                cardOptions: {
-                    ...prevState.cardOptions,
-                    [option]: { ...prevState.cardOptions[option], ...updates },
-                },
-            }));
+    RUSH_ACTION,
+    RushGameAction,
+    RushGameDispatchType,
+    RushGameStateType,
+} from "@/types/rushGame";
+
+export const RushGameStateContext = createContext<RushGameStateType | undefined>(undefined);
+export const RushGameDispatchContext = createContext<RushGameDispatchType | undefined>(undefined);
+
+const initialGameState: RushGameStateType = {
+    phase: null,
+    userParticipatedStatus: false,
+    userSelectedOption: CARD_OPTION.LEFT_OPTIONS,
+    cardOptions: {
+        [CARD_OPTION.LEFT_OPTIONS]: {
+            mainText: "",
+            subText: "",
+            resultMainText: "",
+            resultSubText: "",
+            color: CARD_COLOR.GREEN,
+            selectionCount: 0,
         },
-        []
-    );
-
-    const {
-        data: userParticipatedStatus,
-        isSuccess: isSuccessUserParticipationStatus,
-        fetchData: getRushUserParticipationStatus,
-    } = useFetch<GetRushUserParticipationStatusResponse, string>((token) =>
-        RushAPI.getRushUserParticipationStatus(token)
-    );
-
-    const updateUserStatusAndSelectedOption = useCallback(
-        async (token: string, selectedOption: CardOption) => {
-            await getRushUserParticipationStatus(token);
-            setUserSelectedOption(selectedOption);
+        [CARD_OPTION.RIGHT_OPTIONS]: {
+            mainText: "",
+            subText: "",
+            resultMainText: "",
+            resultSubText: "",
+            color: CARD_COLOR.BLUE,
+            selectionCount: 0,
         },
-        []
-    );
-
-    useEffect(() => {
-        if (isSuccessUserParticipationStatus && userParticipatedStatus) {
-            setUserParticipationStatus(userParticipatedStatus);
-        }
-    }, [isSuccessUserParticipationStatus, userParticipatedStatus]);
+    },
+};
 
-    const getSelectedCardInfo = useCallback(
-        (option: CardOption) => {
-            const cardInfo = gameState.cardOptions[option];
+const rushGameReducer = (state: RushGameStateType, action: RushGameAction): RushGameStateType => {
+    switch (action.type) {
+        case RUSH_ACTION.SET_PHASE:
+            return { ...state, phase: action.payload };
+        case RUSH_ACTION.SET_USER_PARTICIPATION:
+            return { ...state, userParticipatedStatus: action.payload };
+        case RUSH_ACTION.SET_USER_OPTION:
+            return { ...state, userSelectedOption: action.payload };
+        case RUSH_ACTION.SET_CARD_OPTIONS:
             return {
-                mainText: cardInfo.mainText,
-                subText: cardInfo.subText,
-                resultMainText: cardInfo.resultMainText,
-                resultSubText: cardInfo.resultSubText,
-                color: cardInfo.color,
-                selectionCount: cardInfo.selectionCount,
+                ...state,
+                cardOptions: {
+                    ...state.cardOptions,
+                    [action.payload.option]: {
+                        ...state.cardOptions[action.payload.option],
+                        ...action.payload.updates,
+                    },
+                },
             };
-        },
-        [gameState.userSelectedOption, gameState.cardOptions]
-    );
-
-    const {
-        data: rushBalanceData,
-        isSuccess: isSuccessRushBalance,
-        fetchData: getRushBalance,
-    } = useFetch<GetRushBalanceResponse, string>((token) => RushAPI.getRushBalance(token));
-
-    const fetchRushBalance = useCallback(async (): Promise<void> => {
-        await getRushBalance(cookies[COOKIE_KEY.ACCESS_TOKEN]);
-    }, [cookies, getRushBalance]);
-
-    useEffect(() => {
-        if (isSuccessRushBalance && rushBalanceData) {
-            const { leftOption, rightOption } = rushBalanceData;
-
-            updateCardOptions(CARD_OPTION.LEFT_OPTIONS, {
-                selectionCount: leftOption,
-            });
-            updateCardOptions(CARD_OPTION.RIGHT_OPTIONS, {
-                selectionCount: rightOption,
-            });
-        }
-    }, [isSuccessRushBalance, rushBalanceData]);
-
-    const getOptionRatio = useCallback(
-        (option: CardOption): number => {
-            const total =
-                gameState.cardOptions[CARD_OPTION.LEFT_OPTIONS].selectionCount +
-                gameState.cardOptions[CARD_OPTION.RIGHT_OPTIONS].selectionCount;
-            if (total === 0) return 0;
-            const ratio = (gameState.cardOptions[option].selectionCount / total) * 100;
-            return Math.round(ratio * 100) / 100;
-        },
-        [gameState.cardOptions]
-    );
-
-    useEffect(() => {
-        const currentEvent = rushData.events.find(
-            (event) => event.rushEventId === rushData.todayEventId
-        );
-        if (currentEvent) {
-            const serverTime = getMsTime(rushData.serverTime);
-            const startTime = getMsTime(currentEvent.startDateTime);
-            const endTime = getMsTime(currentEvent.endDateTime);
-
-            if (
-                gameState.phase === CARD_PHASE.NOT_STARTED &&
-                rushData.serverTime &&
-                currentEvent?.startDateTime
-            ) {
-                const preCountdown = Math.max(0, Math.floor((startTime - serverTime) / 1000));
-                setInitialPreCountdown(preCountdown);
-            } else if (
-                gameState.phase === CARD_PHASE.IN_PROGRESS &&
-                rushData.serverTime &&
-                currentEvent?.endDateTime
-            ) {
-                const runCountdown = Math.max(0, Math.floor((endTime - serverTime) / 1000));
-                setInitialRunCountdown(runCountdown);
-            }
-        }
-    }, [rushData, gameState.phase]);
-
-    const preCountdown = useCountdown(initialPreCountdown || 1);
-    const runCountdown = useCountdown(initialRunCountdown || 1);
-
-    // TEST COUNTDOWN CODE
-    // const preCountdown = useCountdown(5);
-    // const runCountdown = useCountdown(20);
-
-    useEffect(() => {
-        if (preCountdown <= 0 && gameState.phase === CARD_PHASE.NOT_STARTED) {
-            setGamePhase(CARD_PHASE.IN_PROGRESS);
-        } else if (runCountdown <= 0 && gameState.phase === CARD_PHASE.IN_PROGRESS) {
-            setGamePhase(CARD_PHASE.COMPLETED);
-        }
-    }, [preCountdown, runCountdown]);
+        default:
+            return state;
+    }
+};
 
-    // useEffect(() => {
-    //     const currentEvent = rushData.events.find(
-    //         (event) => event.rushEventId === rushData.todayEventId
-    //     );
-    //
-    //     if (currentEvent && gameState.phase === CARD_PHASE.COMPLETED) {
-    //         const serverTime = getMsTime(rushData.serverTime);
-    //         const endTime = getMsTime(currentEvent.endDateTime);
-    //
-    //         if (!gameState.userParticipatedStatus) {
-    //             if (serverTime > endTime) {
-    //                 navigate("/rush");
-    //                 // TODO: 이벤트 참여기간 아닌 분기 처리(이벤트 종료 후 그 당일 12시 직전까지)
-    //             }
-    //         } else {
-    //             // TODO: 참여한 사람일 경우 당일 12시 직전까지 계속 "COMPLETED" 상태 유지
-    //             // TODO: 12시 지나면 다시 "NOT_STARTED" 상태로 변경
-    //         }
-    //     }
-    // }, [gameState.phase, gameState.userParticipatedStatus, rushData, navigate]);
+export const RushGameProvider = ({ children }: { children: ReactNode }) => {
+    const [gameState, dispatch] = useReducer(rushGameReducer, initialGameState);
 
     return (
-        <RushGameContext.Provider
-            value={{
-                gameState,
-                preCountdown,
-                runCountdown,
-                updateCardOptions,
-                updateUserStatusAndSelectedOption,
-                getSelectedCardInfo,
-                getOptionRatio,
-                fetchRushBalance,
-            }}
-        >
-            {children}
-        </RushGameContext.Provider>
+        <RushGameDispatchContext.Provider value={dispatch}>
+            <RushGameStateContext.Provider value={gameState}>
+                {children}
+            </RushGameStateContext.Provider>
+        </RushGameDispatchContext.Provider>
     );
 };

client/src/features/CasperCustom/CasperCard/MyCasperCardBack.tsx

@@ -1,5 +1,5 @@
 import { CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper";
-import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
+import useCasperCustomStateContext from "@/hooks/Contexts/useCasperCustomStateContext.ts";
 import { CasperCardBackUI } from "./CasperCardBackUI";
 
 interface MyCasperCardBackProps {

client/src/features/CasperCustom/CasperCard/MyCasperCardFront.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback } from "react";
 import { CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper";
-import useCasperCustomDispatchContext from "@/hooks/useCasperCustomDispatchContext";
-import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
+import useCasperCustomDispatchContext from "@/hooks/Contexts/useCasperCustomDispatchContext.ts";
+import useCasperCustomStateContext from "@/hooks/Contexts/useCasperCustomStateContext.ts";
 import { CASPER_ACTION } from "@/types/casperCustom";
 import { CasperCardFrontUI } from "./CasperCardFrontUI";
 

client/src/features/CasperCustom/CasperCustomPanel/CasperCustomPanel.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from "react";
 import { cva } from "class-variance-authority";
 import { CASPER_OPTION, CUSTOM_OPTION, OPTION_TYPE } from "@/constants/CasperCustom/casper";
-import useCasperCustomDispatchContext from "@/hooks/useCasperCustomDispatchContext";
-import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
+import useCasperCustomDispatchContext from "@/hooks/Contexts/useCasperCustomDispatchContext.ts";
+import useCasperCustomStateContext from "@/hooks/Contexts/useCasperCustomStateContext.ts";
 import { CASPER_ACTION } from "@/types/casperCustom";
 import { CustomOptionImageItem } from "./CustomOptionImageItem";
 import { EyesPanel as EyesPanelComponent } from "./EyesPanel";

client/src/features/CasperCustom/CasperCustomPanel/EyesPanel.tsx

@@ -6,8 +6,8 @@ import {
     OPTION_TYPE,
     POSITION_OPTION,
 } from "@/constants/CasperCustom/casper";
-import useCasperCustomDispatchContext from "@/hooks/useCasperCustomDispatchContext";
-import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
+import useCasperCustomDispatchContext from "@/hooks/Contexts/useCasperCustomDispatchContext.ts";
+import useCasperCustomStateContext from "@/hooks/Contexts/useCasperCustomStateContext.ts";
 import { CASPER_ACTION } from "@/types/casperCustom";
 import { CasperCustomPanelLayout } from "./CasperCustomPanelLayout";
 import { EyesOptionImageItem } from "./EyesOptionImageItem";

client/src/features/CasperCustom/CustomProcess/CasperCustomFinish.tsx

@@ -10,8 +10,8 @@ import { DISSOLVE } from "@/constants/animation";
 import { SCROLL_MOTION } from "@/constants/animation";
 import { COOKIE_KEY } from "@/constants/cookie";
 import { MyCasperCardFront } from "@/features/CasperCustom/CasperCard/MyCasperCardFront";
-import useCasperCustomDispatchContext from "@/hooks/useCasperCustomDispatchContext";
-import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
+import useCasperCustomDispatchContext from "@/hooks/Contexts/useCasperCustomDispatchContext.ts";
+import useCasperCustomStateContext from "@/hooks/Contexts/useCasperCustomStateContext.ts";
 import useFetch from "@/hooks/useFetch";
 import useToast from "@/hooks/useToast";
 import { CASPER_ACTION } from "@/types/casperCustom";

client/src/features/CasperCustom/CustomProcess/CasperCustomFinishing.tsx

@@ -4,7 +4,7 @@ import { CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper";
 import { DISSOLVE } from "@/constants/animation";
 import { SCROLL_MOTION } from "@/constants/animation";
 import { CasperFlipCard } from "@/features/CasperCustom/CasperCard/CasperFlipCard";
-import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
+import useCasperCustomStateContext from "@/hooks/Contexts/useCasperCustomStateContext.ts";
 import useToast from "@/hooks/useToast";
 import type { CasperCardType } from "@/types/casper";
 

client/src/features/CasperCustom/CustomProcess/CasperCustomForm.tsx

@@ -9,8 +9,8 @@ import { DISSOLVE } from "@/constants/animation";
 import { SCROLL_MOTION } from "@/constants/animation";
 import { COOKIE_KEY } from "@/constants/cookie";
 import { MyCasperCardFront } from "@/features/CasperCustom/CasperCard/MyCasperCardFront";
-import useCasperCustomDispatchContext from "@/hooks/useCasperCustomDispatchContext";
-import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
+import useCasperCustomDispatchContext from "@/hooks/Contexts/useCasperCustomDispatchContext.ts";
+import useCasperCustomStateContext from "@/hooks/Contexts/useCasperCustomStateContext.ts";
 import useFetch from "@/hooks/useFetch";
 import { CASPER_ACTION } from "@/types/casperCustom";
 import { CasperInformationType, PostCasperResponse } from "@/types/lotteryApi";

client/src/features/CasperCustom/CustomProcess/CasperCustomProcess.tsx

@@ -6,7 +6,7 @@ import { CUSTOM_OPTION_ARRAY } from "@/constants/CasperCustom/customStep";
 import { DISSOLVE } from "@/constants/animation";
 import { SCROLL_MOTION } from "@/constants/animation";
 import { MyCasperCardFront } from "@/features/CasperCustom/CasperCard/MyCasperCardFront";
-import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
+import useCasperCustomStateContext from "@/hooks/Contexts/useCasperCustomStateContext.ts";
 import { getCasperOptionDescription } from "@/utils/CasperCustom/getCasperOptionDescription";
 
 interface CasperCustomProcessProps {