diff --git a/src/Component/Game/GameTradeSwipe.tsx b/src/Component/Game/GameTradeSwipe.tsx index c0b5b12..16269cc 100644 --- a/src/Component/Game/GameTradeSwipe.tsx +++ b/src/Component/Game/GameTradeSwipe.tsx @@ -175,12 +175,31 @@ const GameTradeSwipe = ({ 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]); diff --git a/src/Component/Game/StocksTableStyle.css b/src/Component/Game/StocksTableStyle.css index 6dc3d17..7a90fc2 100644 --- a/src/Component/Game/StocksTableStyle.css +++ b/src/Component/Game/StocksTableStyle.css @@ -2,7 +2,7 @@ width: 85%; height: 400px; border-radius: 20px; - box-shadow: 0px 0px 17px rgb(213, 213, 213); + box-shadow: 0px 0px 10px rgb(213, 213, 213); padding: 20px 20px; display: flex; align-items: center; diff --git a/src/Component/Game/TradeChoice.tsx b/src/Component/Game/TradeChoice.tsx index 0873682..c0b36b3 100644 --- a/src/Component/Game/TradeChoice.tsx +++ b/src/Component/Game/TradeChoice.tsx @@ -65,6 +65,11 @@ const TradeChoice = ({ } }; + const handleMaxPurchaseQuantityClick = () => { + handleMaxPurchaseQuantity(); + setIsSelected(true); // 수량 선택 상태 유지 + }; + return ( {/* 종목 부분 */} @@ -163,7 +168,7 @@ const TradeChoice = ({ > 최대로 구매하기 @@ -242,6 +247,7 @@ const CurrentPrice = styled.div<{ isSelected: boolean }>` const CurrentQuantity = styled.div<{ isSelected: boolean }>` font-size: 13px; color: ${(props) => (props.isSelected ? "#615EFC" : "#656565")}; + margin-right: 10px; `; const MaxPurchaseBtn = styled.button<{ isSelected: boolean }>`