Merge pull request #200 from 100-hours-a-week/feature/veronica

Feat : 거래 스와이프 ux개선
100-hours-a-week · Sep 17, 2024 · 1268c59 · 1268c59
2 parents 4eab131 + c90471f
commit 1268c59
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 19 deletions.
diff --git a/src/Component/Game/GameMoney.tsx b/src/Component/Game/GameMoney.tsx
@@ -4,11 +4,17 @@ import { GameMoneyProps, holding } from "../../constants/interface";
 import { useState, useEffect } from "react";
 import axios from "axios";
 
-const GameMoney = () => {
+const GameMoney = ({
+    setBudget,
+    budget,
+}: {
+    setBudget: (budget: number) => void;
+    budget: number;
+}) => {
     const header = ["종목명", "평균단가", "주식수", " 현재금액", "수익률"];
 
     const [nickname, setNickname] = useState(""); // 닉네임
-    const [budget, setBudget] = useState(0); // 거래 가능 금액
+    // const [budget, setBudget] = useState(0); // 거래 가능 금액
     const [total, setTotal] = useState(0); // 총 평가금액
     const [changeFromLast, setChangeFromLast] = useState(0); // 작년 대비 금액
     const [changeFromStart, setChangeFromStart] = useState(0); // 전체 대비 금액
@@ -43,7 +49,7 @@ const GameMoney = () => {
             .catch((e) => {
                 //console.log(e);
             });
-    }, []);
+    }, [setBudget]);
 
     const handleShowTable = () => {
         setShowTable((prev) => !prev);

diff --git a/src/Component/Game/GameTradeSwipe.tsx b/src/Component/Game/GameTradeSwipe.tsx
@@ -9,9 +9,15 @@ interface GameTradeSwipeProps {
     onClose: () => void;
     isVisible: boolean;
     year: string;
+    budget: number;
 }
 
-const GameTradeSwipe = ({ onClose, isVisible, year }: GameTradeSwipeProps) => {
+const GameTradeSwipe = ({
+    onClose,
+    isVisible,
+    year,
+    budget,
+}: GameTradeSwipeProps) => {
     const [show, setShow] = useState(isVisible);
     const [selectedStock, setSelectedStock] = useState<{
         stockId: number;
@@ -21,8 +27,9 @@ const GameTradeSwipe = ({ onClose, isVisible, year }: GameTradeSwipeProps) => {
     const [acting, setActing] = useState<"BUY" | "SELL">(); // 거래 액션 상태
     const [isModalOpen, setIsModalOpen] = useState(false); // 모달 상태
     const [stockOptions, setStockOptions] = useState<
-        { stockId: number; name: string }[]
-    >([]); // 종목 리스트 상태
+        { stockId: number; name: string; current: number }[]
+    >([]); // 종목 리스트 상태\
+    const [currentPrice, setCurrentPrice] = useState<number | null>(null);
 
     useEffect(() => {
         setShow(isVisible);
@@ -60,6 +67,16 @@ const GameTradeSwipe = ({ onClose, isVisible, year }: GameTradeSwipeProps) => {
         return selectedStock ? selectedStock.stockId : 0;
     };
 
+    // 선택된 종목의 가격 가지고 오기
+    const updateCurrentPrice = () => {
+        if (selectedStock) {
+            const selected = stockOptions.find(
+                (stock) => stock.name === selectedStock.name
+            );
+            setCurrentPrice(selected?.current || null);
+        }
+    };
+
     // 모달에서 확인 버튼 클릭 시 거래 처리
     const handleTradeConfirm = () => {
         const handleTrade = async () => {
@@ -149,14 +166,16 @@ const GameTradeSwipe = ({ onClose, isVisible, year }: GameTradeSwipeProps) => {
 
     // 로컬스토리지에서 종목 갖고오기
     useEffect(() => {
-        const stock2014 = localStorage.getItem("stock2014");
         const stockListData = localStorage.getItem("stockListData");
 
-        if (stock2014) {
-            const parsedStock2014 = JSON.parse(stock2014);
-            setStockOptions(parsedStock2014);
-            if (!selectedStock) {
-                setSelectedStock(parsedStock2014[0]); // 첫 번째 종목을 기본값으로 설정
+        if (year === "2014") {
+            const stock2014 = localStorage.getItem("stock2014");
+            if (stock2014) {
+                const parsedStock2014 = JSON.parse(stock2014);
+                setStockOptions(parsedStock2014);
+                if (!selectedStock) {
+                    setSelectedStock(parsedStock2014[0]); // 첫 번째 종목을 기본값으로 설정
+                }
             }
         } else if (stockListData) {
             const parsedStockListData = JSON.parse(stockListData);
@@ -167,7 +186,12 @@ const GameTradeSwipe = ({ onClose, isVisible, year }: GameTradeSwipeProps) => {
         } else {
             console.log("로컬 스토리지에서 주식 데이터를 찾을 수 없습니다.");
         }
-    }, []);
+    }, [year]);
+
+    // 선택된 종목이 변경될 때마다 가격을 업데이트
+    useEffect(() => {
+        updateCurrentPrice();
+    }, [selectedStock]);
 
     return (
         <div className="GameTradeSwipe">
@@ -180,6 +204,14 @@ const GameTradeSwipe = ({ onClose, isVisible, year }: GameTradeSwipeProps) => {
                         <button onClick={handleClose}></button>
                     </div>
                     <span>주식 거래하기</span>
+                    <div>가진 돈 : {budget}</div>
+                    <div>
+                        구매하면 남는 돈 :
+                        {currentPrice && quantity
+                            ? budget - currentPrice * quantity
+                            : 0}
+                    </div>
+
                     <TradeChoice
                         title="종목"
                         choiceLeft="←"
@@ -188,6 +220,14 @@ const GameTradeSwipe = ({ onClose, isVisible, year }: GameTradeSwipeProps) => {
                         onLeftClick={() => handleStockChange("left")}
                         onRightClick={() => handleStockChange("right")}
                     />
+                    <div>
+                        현재 가격:{" "}
+                        {currentPrice !== null
+                            ? `${currentPrice}원`
+                            : "가격 정보 없음"}
+                    </div>
+                    <div>선택 수량 : {quantity}</div>
+
                     <TradeChoice
                         title="수량"
                         choiceLeft="-"

diff --git a/src/Pages/game/playPage.tsx b/src/Pages/game/playPage.tsx
@@ -29,6 +29,7 @@ const PlayPage = () => {
         null
     );
     const [isHappyNewYearModal, setIsHappyNewYearModal] = useState(false);
+    const [budget, setBudget] = useState(0); // 사용가능한 돈
 
     // 거래하기 모달 핸들러
     const openTradeModal = () => {
@@ -62,6 +63,7 @@ const PlayPage = () => {
             if (response.status === 200) {
                 const updatedStockList = response.data.stockList;
                 console.log(updatedStockList);
+                console.log(response);
 
                 // 중간 결과를 로컬 스토리지에 저장
                 localStorage.setItem(
@@ -97,19 +99,19 @@ const PlayPage = () => {
             const stock2014 = localStorage.getItem("stock2014");
             if (stock2014) {
                 setStockListData(JSON.parse(stock2014));
+            } else {
+                setIsHappyNewYearModal(true);
+                setTimeout(() => {
+                    setIsHappyNewYearModal(false);
+                }, 4000);
             }
-
-            setIsHappyNewYearModal(true);
-            setTimeout(() => {
-                setIsHappyNewYearModal(false);
-            }, 4000);
         }
     }, []);
 
     return (
         <Container>
             <GameHeader text={year || "Default"} />
-            <GameMoney />
+            <GameMoney setBudget={setBudget} budget={budget} />
             <StocksTable stocks={stockListData || []} />
             <GameButtons
                 openTradeModal={openTradeModal}
@@ -119,6 +121,7 @@ const PlayPage = () => {
                 isVisible={isTradeModalVisible}
                 onClose={closeTradeModal}
                 year={yearValue.toString()}
+                budget={budget}
             />
             <PassConfirmModal
                 isOpen={isPassModalVisible}