diff --git a/src/Game/Shop/shop.tsx b/src/Game/Shop/shop.tsx index b34236f..4ae2e52 100644 --- a/src/Game/Shop/shop.tsx +++ b/src/Game/Shop/shop.tsx @@ -28,8 +28,7 @@ const Shop: React.FC = ({ selectedStock, budget, setBudget }) => { const [hint, setHint] = useState(null); const [purchaseComplete, setPurchaseComplete] = useState({}); - const purchaseHints = useHintStore((state) => state.purchaseHints); // 단계별 구매 상태 - const setPurchaseHints = useHintStore((state) => state.setPurchaseHints); + const { purchaseHints, setPurchaseHints } = useHintStore(); const location = useLocation(); const year = location.pathname.split("/")[3]; @@ -53,12 +52,14 @@ const Shop: React.FC = ({ selectedStock, budget, setBudget }) => { }; const handleGame = () => { - setIsOpen(true); + // setIsOpen(true); + navigate(`/game/play/${year}`); }; useEffect(() => { + // 선택한 종목과 선택한 레벨에 맞는 힌트 데이터 불러오기 if ( - selectedStock !== null && + selectedStock && purchaseHints[selectedStock] && purchaseHints[selectedStock][selectedTab.level] ) { @@ -67,13 +68,31 @@ const Shop: React.FC = ({ selectedStock, budget, setBudget }) => { const savedHint = purchaseHints[selectedStock][selectedTab.level]?.hintData; + // console.log( + // "Saved Hint for Stock", + // selectedStock, + // "Level", + // selectedTab.level, + // ":", + // savedHint + // ); + + // 해당 종목과 레벨에 맞는 힌트만 표시 + // if (purchaseComplete[selectedStock]?.[selectedTab.level]) { if (savedHint) { setHint(savedHint); // 힌트 데이터를 설정 } else { - setHint("힌트 데이터를 찾을 수 없습니다."); // 힌트 데이터가 없을 경우 처리 + setHint(null); // 힌트 데이터가 없을 경우 처리 } + } else { + setHint(null); // 힌트 데이터가 없을 경우 처리 } - }, [purchaseHints, selectedStock, selectedTab.level]); + // } + }, [purchaseHints, selectedStock, selectedTab.level, purchaseComplete]); + + // useEffect(() => { + // console.log("current hint state: ", hint); + // }, [hint]); //구매 요청 처리 const onSubmitHandler = async (data: Ingredient) => { @@ -114,16 +133,20 @@ const Shop: React.FC = ({ selectedStock, budget, setBudget }) => { setBudget( budget - parseInt(selectedTab.price.replace(/[^\d]/g, ""), 10) ); - useHintStore - .getState() - .setPurchaseHints(selectedStock, selectedTab.level, hintData); + + // 사용자가 선택한 종목과 레벨만 구매 완료로 업데이트 setPurchaseComplete((prev) => ({ ...prev, [selectedStock]: { ...prev[selectedStock], - [selectedTab.level]: true, + [selectedTab.level]: true, // 구매 완료 상태 설정 }, })); + + // 상태 저장 + useHintStore + .getState() + .setPurchaseHints(selectedStock, selectedTab.level, hintData); } } catch (error) { if (axios.isAxiosError(error)) { @@ -176,8 +199,10 @@ const Shop: React.FC = ({ selectedStock, budget, setBudget }) => { > {selectedTab && ( <> + {/* 종목이 선택되지 않았거나, 해당 종목 및 레벨에서 구매가 완료되지 않은 경우 */} {selectedStock === null || - !purchaseComplete[selectedStock]?.[selectedTab.level] ? ( + // (!purchaseComplete[selectedStock]?.[selectedTab.level] && + !hint ? (
= ({ selectedStock, budget, setBudget }) => { )} - = ({ selectedStock, budget, setBudget }) => {

괜찮으십니까?

- + */} diff --git a/src/Pages/game/playPage.tsx b/src/Pages/game/playPage.tsx index c904916..73beac1 100644 --- a/src/Pages/game/playPage.tsx +++ b/src/Pages/game/playPage.tsx @@ -17,6 +17,7 @@ import ProgressBar from "../../Game/Loading/progressBar"; import { GoAlert } from "react-icons/go"; import { Colors } from "../../Styles/Colors"; import Button from "../../Component/Button/button"; +import { useHintStore } from "../../store/hintStore"; const Container = styled.div` display: flex; @@ -110,6 +111,10 @@ const PlayPage = () => { ((parseInt(nextYear, 10) - startYear) / (lastYear - startYear)) * 100 ); + // 로컬 스토리지에서 삭제 + localStorage.removeItem("hint-storage"); + // 주스탠드 스토어 상태 초기화 + useHintStore.getState().resetPurchaseHints(); } } } catch (error) { diff --git a/src/store/hintStore.tsx b/src/store/hintStore.tsx index 6d0e706..a7eaf78 100644 --- a/src/store/hintStore.tsx +++ b/src/store/hintStore.tsx @@ -1,4 +1,5 @@ import { create } from "zustand"; +import { persist } from "zustand/middleware"; interface PurchaseState { purchaseComplete: { [stockId: number]: { [level: string]: boolean } }; @@ -11,21 +12,32 @@ interface HintState { Record >; setPurchaseHints: (stockId: number, level: string, hintData: string) => void; + resetPurchaseHints: () => void; // 상태 초기화 함수 정의 } -export const useHintStore = create((set) => ({ - purchaseHints: {}, - setPurchaseHints: (stockId: number, level: string, hintData: string) => - set((state) => ({ - purchaseHints: { - ...state.purchaseHints, - [stockId]: { - ...state.purchaseHints[stockId], - [level]: { purchased: true, hintData }, - }, - }, - })), -})); +export const useHintStore = create()( + persist( + (set) => ({ + purchaseHints: {}, + setPurchaseHints: (stockId: number, level: string, hintData: string) => + set((state) => ({ + purchaseHints: { + ...state.purchaseHints, + [stockId]: { + ...state.purchaseHints[stockId], + [level]: { purchased: true, hintData }, + }, + }, + })), + // 상태 초기화 함수 추가 + resetPurchaseHints: () => set({ purchaseHints: {} }), + }), + { + name: "hint-storage", + getStorage: () => localStorage, + } + ) +); export const usePurchaseStore = create((set) => ({ purchaseComplete: {},