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

Fix : 뒤로가기/새로고침 시 현재 페이지에 머물도록 수정
100-hours-a-week · Oct 3, 2024 · d9d4b3c · d9d4b3c
2 parents 5654bd3 + 1fdf327
commit d9d4b3c
Show file tree

Hide file tree

Showing 14 changed files with 410 additions and 353 deletions.
diff --git a/src/Component/Dropdown/gameDropdown.tsx b/src/Component/Dropdown/gameDropdown.tsx
@@ -1,7 +1,7 @@
 import { Variants, motion } from "framer-motion";
 import { useState } from "react";
 import { Colors } from "../../Styles/Colors";
-import { Stock, useStock } from "../../store/stockContext";
+import { StocksStore, useStock } from "../../store/stockContext";
 import styled from "styled-components";
 import {
   itemVariants,
@@ -17,10 +17,19 @@ export interface StockItemProps {
   onSelectStock: (stockId: number) => void;
 }
 
+interface Stock {
+  stockId: number;
+  name: string;
+  current: number;
+  prev: number;
+  change: number;
+  changeRate: number;
+}
+
 const StockItem: React.FC<StockItemProps> = ({ onSelectStock }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedStock, setSelectedStock] = useState<string | null>(null);
-  const { stockData } = useStock();
+  const { stockData, setStockData } = StocksStore();
   const { purchaseHints, setPurchaseHints } = useHintStore();
 
   const toggleDropdown = () => {

diff --git a/src/Component/Game/GameTradeSwipe.tsx b/src/Component/Game/GameTradeSwipe.tsx
@@ -4,7 +4,7 @@ import TradeConfirmModal from "./TradeConfirmModal";
 import axios from "axios";
 import swal from "sweetalert";
 import { usePortfolioStore } from "../../store/usePortfolioStore";
-import { useStock } from "../../store/stockContext";
+import { StocksStore, useStock } from "../../store/stockContext";
 import { formatPrice } from "../../util/gameUtil";
 import styled from "styled-components";
 import { useSwipeStore } from "../../store/useSwipeStore";
@@ -22,7 +22,7 @@ const GameTradeSwipe = ({
   year,
   budget,
 }: GameTradeSwipeProps) => {
-  const { stockData } = useStock();
+  const { stockData } = StocksStore();
   const [selectedStock, setSelectedStock] = useState<{
     stockId: number;
     name: string;
@@ -135,34 +135,14 @@ const GameTradeSwipe = ({
   const handleQuantityInputChange = (value: number) => {
     setQuantity(value);
   };
-
   // 최대구매수량 계산 함수
   const handleMaxPurchaseQuantity = () => {
     if (currentPrice && budget) {
       const maxQuantity = Math.floor(budget / currentPrice);
       setQuantity(maxQuantity > 0 ? maxQuantity : 0);
     }
   };
-
-  // useEffect(() => {
-  //     if (stockData) {
-  //         const options = stockData.map((stock) => ({
-  //             stockId: stock.stockId,
-  //             name: stock.name,
-  //         }));
-  //         setStockOptions(options);
-  //         if (!selectedStock && options.length > 0) {
-  //             setSelectedStock(options[0]);
-  //             setCurrentPrice(stockData[0].current);
-  //         }
-  //     }
-  //     if (selectedStock && stockData) {
-  //         const selectedStockData = stockData.find(
-  //             (stock) => stock.stockId === selectedStock.stockId
-  //         );
-  //         setCurrentPrice(selectedStockData?.current || null);
-  //     }
-  // }, [stockData, selectedStock]);
+
   useEffect(() => {
     if (stockData && stockData.length > 0) {
       const options = stockData.map((stock) => ({
@@ -171,38 +151,19 @@ const GameTradeSwipe = ({
       }));
       setStockOptions(options);
 
-            // selectedStock이 없으면 첫 번째 종목을 선택
-            if (!selectedStock && options.length > 0) {
-                setSelectedStock(options[0]);
-                setCurrentPrice(stockData[0].current || 0); // 초기값을 0으로 설정
-
-                // 첫번째 종목이 보유 주식에 있으면 수량 설정
-                const holdingStock = holdingList.find(
-                    (holding) => holding.stockId === options[0].stockId
-                );
-                if (holdingStock) {
-                    setQuantity(holdingStock.quantity);
-                } else {
-                    setQuantity(0);
-                }
-            } else if (selectedStock) {
-                // 선택한 종목에 맞는 가격을 설정
-                const selectedStockData = stockData.find(
-                    (stock) => stock.stockId === selectedStock.stockId
-                );
-                setCurrentPrice(selectedStockData?.current || 0); // undefined 방지
-                // 선택된 종목이 보유 주식에 있으면 수량 설정
-                const holdingStock = holdingList.find(
-                    (holding) => holding.stockId === selectedStock.stockId
-                );
-                if (holdingStock) {
-                    setQuantity(holdingStock.quantity); // 보유한 수량으로 설정
-                } else {
-                    setQuantity(0); // 보유하지 않은 경우 0으로 설정
-                }
-            }
-        }
-    }, [stockData, selectedStock]);
+      // selectedStock이 없으면 첫 번째 종목을 선택
+      if (!selectedStock && options.length > 0) {
+        setSelectedStock(options[0]);
+        setCurrentPrice(stockData[0].current || 0); // 초기값을 0으로 설정
+      } else if (selectedStock) {
+        // 선택한 종목에 맞는 가격을 설정
+        const selectedStockData = stockData.find(
+          (stock) => stock.stockId === selectedStock.stockId
+        );
+        setCurrentPrice(selectedStockData?.current || 0); // undefined 방지
+      }
+    }
+  }, [stockData, selectedStock]);
 
   return (
     <div className="GameTradeSwipe">
@@ -298,13 +259,6 @@ const SwipeContainer = styled.div`
     scrollbar-width: none;
 `;
 
-// const Title = styled.span`
-//     font-size: 25px;
-//     font-weight: 700;
-//     color: #615efc;
-//     margin-top: 30px;
-// `;
-
 const TradeButtonGroup = styled.div`
   display: flex;
   justify-content: center;

diff --git a/src/Component/GoogleLogin/callback.tsx b/src/Component/GoogleLogin/callback.tsx
@@ -1,12 +1,13 @@
 import axios from "axios";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../contexts/authContext";
+import { useAuthStore } from "../../contexts/authContext";
 
 const CallBackPage = () => {
   const [loading, setLoading] = useState(true);
   const navigate = useNavigate();
-  const { login } = useAuth();
+  // const { login } = useAuth();
+  const { login } = useAuthStore();
   const hasFetchedRef = useRef(false);
 
   const handleHome = () => {

diff --git a/src/Component/Layout/Layout.tsx b/src/Component/Layout/Layout.tsx
@@ -2,7 +2,6 @@ import { useLocation } from "react-router-dom";
 import Header from "./Header/Header";
 import NavBar from "./NavBar/NavBar";
 import styled from "styled-components";
-import { useAuth } from "../../contexts/authContext";
 import BentoBar from "../../Game/Main/BentoBar/bentoBar";
 
 const Main = styled.main`