Merge pull request #231 from 100-hours-a-week/feature/elle

Feature/elle
100-hours-a-week · Sep 30, 2024 · 9bef331 · 9bef331
2 parents b5d13f2 + aeeb5c2
commit 9bef331
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 26 deletions.
diff --git a/src/Game/Shop/shop.tsx b/src/Game/Shop/shop.tsx
@@ -28,8 +28,7 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
   const [hint, setHint] = useState<string | null>(null);
   const [purchaseComplete, setPurchaseComplete] = useState<PurchaseHints>({});
 
-  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<ShopProps> = ({ 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<ShopProps> = ({ 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<ShopProps> = ({ 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<ShopProps> = ({ selectedStock, budget, setBudget }) => {
             >
               {selectedTab && (
                 <>
+                  {/* 종목이 선택되지 않았거나, 해당 종목 및 레벨에서 구매가 완료되지 않은 경우 */}
                   {selectedStock === null ||
-                  !purchaseComplete[selectedStock]?.[selectedTab.level] ? (
+                  // (!purchaseComplete[selectedStock]?.[selectedTab.level] &&
+                  !hint ? (
                     <div
                       style={{
                         display: "flex",
@@ -314,7 +339,7 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
               )}
             </motion.div>
           </AnimatePresence>
-          <ModalOpen
+          {/* <ModalOpen
             title="정보거래소"
             isOpen={isOpen}
             showCancelButton={true}
@@ -339,7 +364,7 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
               </p>
               <p> 괜찮으십니까? </p>
             </div>
-          </ModalOpen>
+          </ModalOpen> */}
         </S.Main>
       </S.Window>
     </>

diff --git 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
@@ -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<string, { purchased: boolean; hintData: string | null }>
   >;
   setPurchaseHints: (stockId: number, level: string, hintData: string) => void;
+  resetPurchaseHints: () => void; // 상태 초기화 함수 정의
 }
 
-export const useHintStore = create<HintState>((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<HintState>()(
+  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<PurchaseState>((set) => ({
   purchaseComplete: {},