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

Fix : 이슈 수정
100-hours-a-week · Sep 25, 2024 · f932e0e · f932e0e
2 parents 6be670c + 24d430e
commit f932e0e
Show file tree

Hide file tree

Showing 6 changed files with 115,540 additions and 249 deletions.
diff --git a/src/Component/Game/Animation - 1726124464283.json b/src/Component/Game/Animation - 1726124464283.json
diff --git a/src/Component/Game/GameMoney.tsx b/src/Component/Game/GameMoney.tsx
@@ -138,7 +138,7 @@ const GameMoneyBalance = styled.div`
 
 const BalanceDetailButton = styled.div`
     position: absolute;
-    top: 185px;
+    top: 118px;
     right: 20px;
 `;
 

diff --git a/src/Component/Game/GameTradeSwipe.tsx b/src/Component/Game/GameTradeSwipe.tsx
@@ -71,6 +71,7 @@ const GameTradeSwipe = ({
             quantity,
             acting,
         };
+
         try {
             const res = await axios.post(
                 `${process.env.REACT_APP_API_URL}/v1/game/stock`,
@@ -82,6 +83,8 @@ const GameTradeSwipe = ({
                 swal({ title: "거래 성공", icon: "success" });
                 setShow(false);
                 setIsModalOpen(false);
+                setSelectedStock(stockOptions[0]);
+                setQuantity(1);
                 onClose();
             }
         } catch (error: any) {
@@ -93,7 +96,8 @@ const GameTradeSwipe = ({
                 icon: "error",
             }).then(() => {
                 setShow(false);
-                onClose();
+                setIsModalOpen(false);
+                // onClose();
             });
         }
     };
@@ -132,7 +136,13 @@ const GameTradeSwipe = ({
             <SwipeModal isOpen={show}>
                 <SwipeContainer>
                     <div style={{ display: "flex", justifyContent: "center" }}>
-                        <CloseButton onClick={onClose}></CloseButton>
+                        <CloseButton
+                            onClick={() => {
+                                setSelectedStock(stockOptions[0]);
+                                setQuantity(1);
+                                onClose();
+                            }}
+                        ></CloseButton>
                     </div>
                     <Title>주식 거래하기</Title>
                     <TradeChoice
@@ -163,11 +173,13 @@ const GameTradeSwipe = ({
                     <TradeButtonGroup>
                         <TradeButton
                             onClick={() => openTradeConfirmModal("SELL")}
+                            disabled={quantity === 0} // 수량이 0이거나 빈 값일 때 비활성화
                         >
                             팔기
                         </TradeButton>
                         <TradeButton
                             onClick={() => openTradeConfirmModal("BUY")}
+                            disabled={quantity === 0} // 수량이 0이거나 빈 값일 때 비활성화
                         >
                             사기
                         </TradeButton>
@@ -241,7 +253,10 @@ const TradeButton = styled.button`
     width: 100px;
     height: 40px;
     border-radius: 15px;
-    background: radial-gradient(circle, #4834d4 0%, #686de0 100%);
+    background: ${({ disabled }) =>
+        disabled
+            ? "radial-gradient(circle, #cccccc 0%, #e0e0e0 100%)"
+            : "radial-gradient(circle, #4834d4 0%, #686de0 100%)"};
     color: #fff;
     border: none;
     font-size: 14px;

diff --git a/src/Component/Game/TradeChoice.tsx b/src/Component/Game/TradeChoice.tsx
@@ -48,9 +48,15 @@ const TradeChoice = ({
 
     // input의 값이 직접 입력되면 호출되는 함수
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newValue = parseInt(e.target.value, 10);
-        if (!isNaN(newValue) && onQuantityChange && newValue > 0) {
-            onQuantityChange(newValue);
+        const newValue = e.target.value;
+
+        if (newValue === "") {
+            onQuantityChange?.(0);
+        } else {
+            const parsedValue = parseInt(newValue, 10);
+            if (!isNaN(parsedValue) && parsedValue >= 0) {
+                onQuantityChange?.(parsedValue);
+            }
         }
     };
 
@@ -131,7 +137,7 @@ const TradeChoiceContainer = styled.div`
 
 const Title = styled.h2<{ isSelected: boolean }>`
     font-size: 15px;
-    color: ${(props) => (props.isSelected ? "#615EFC" : "#d3d3d3")};
+    color: ${(props) => (props.isSelected ? "#615EFC" : "#656565")};
     margin-left: -200px;
     margin-bottom: 8px;
 `;
@@ -154,14 +160,14 @@ const ChoiceButton = styled.div<{ isSelected: boolean }>`
     width: 30px;
     height: 30px;
     border-radius: 50px;
-    border: 2px solid ${(props) => (props.isSelected ? "#615EFC" : "#a8a8a8")};
+    border: 2.5px solid ${(props) => (props.isSelected ? "#615EFC" : "#656565")};
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     font-size: 15px;
     font-weight: 700;
-    color: ${(props) => (props.isSelected ? "#615EFC" : "#a8a8a8")};
+    color: ${(props) => (props.isSelected ? "#615EFC" : "#656565")};
 `;
 
 // 수량을 입력받는 인풋 필드
@@ -170,20 +176,20 @@ const QuantityInput = styled.input<{ isSelected: boolean }>`
     text-align: center;
     border: none;
     font-size: 16px;
-    color: ${(props) => (props.isSelected ? "#615EFC" : "#a8a8a8")};
+    color: ${(props) => (props.isSelected ? "#615EFC" : "#656565")};
     background-color: transparent;
     outline: none;
 `;
 
 const SelectedOption = styled.h3<{ isSelected: boolean }>`
     width: 80px;
-    color: ${(props) => (props.isSelected ? "#615EFC" : "#a8a8a8")};
+    color: ${(props) => (props.isSelected ? "#615EFC" : "#656565")};
 `;
 
 const CurrentPrice = styled.div<{ isSelected: boolean }>`
     margin-top: -25px;
     font-size: 13px;
-    color: ${(props) => (props.isSelected ? "#615EFC" : "#a8a8a8")};
+    color: ${(props) => (props.isSelected ? "#615EFC" : "#656565")};
 `;
 
 export default TradeChoice;
diff --git a/src/Component/Game/gameViewTab.tsx b/src/Component/Game/gameViewTab.tsx
@@ -5,56 +5,59 @@ import GameCurrentResult from "./gameCurrentResult";
 import { useState } from "react";
 
 const TabContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  margin-top: 2rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    margin-top: 2rem;
 `;
 const TabStyle = styled.div<{ $isActive: boolean }>`
-  width: 100px;
-  font-family: "SCDream7";
-  text-align: center;
-  padding-bottom: 0.2rem;
-  border-bottom: 3px solid ${Colors.main};
-  border-bottom: ${(props) =>
-    props.$isActive ? `3px solid ${Colors.main}` : "none"};
-  color: ${(props) => (props.$isActive ? Colors.main : "black")};
-  cursor: pointer;
+    width: 100px;
+    font-family: "SCDream7";
+    text-align: center;
+    padding-bottom: 0.2rem;
+    border-bottom: 3px solid ${Colors.main};
+    border-bottom: ${(props) =>
+        props.$isActive ? `3px solid ${Colors.main}` : "none"};
+    color: ${(props) => (props.$isActive ? Colors.main : "black")};
+    cursor: pointer;
 `;
 
 const GameViewTab = ({ holdingList }: any) => {
-  const [tabView, setTabView] = useState("보유주식");
+    const [tabView, setTabView] = useState("보유주식");
 
-  const clickHoldings = () => {
-    setTabView("보유주식");
-  };
+    const clickHoldings = () => {
+        setTabView("보유주식");
+    };
 
-  const clickCurrentResult = () => {
-    setTabView("실시간 랭킹");
-  };
+    const clickCurrentResult = () => {
+        setTabView("실시간 랭킹");
+    };
 
-  return (
-    <div>
-      <TabContainer>
-        <TabStyle onClick={clickHoldings} $isActive={tabView === "보유주식"}>
-          보유주식
-        </TabStyle>
-        <TabStyle
-          onClick={clickCurrentResult}
-          $isActive={tabView === "실시간 랭킹"}
-        >
-          실시간 랭킹
-        </TabStyle>
-      </TabContainer>
+    return (
+        <div>
+            <TabContainer>
+                <TabStyle
+                    onClick={clickHoldings}
+                    $isActive={tabView === "보유주식"}
+                >
+                    보유주식
+                </TabStyle>
+                <TabStyle
+                    onClick={clickCurrentResult}
+                    $isActive={tabView === "실시간 랭킹"}
+                >
+                    실시간 랭킹
+                </TabStyle>
+            </TabContainer>
 
-      {tabView === "보유주식" ? (
-        <GameHoldingsView holdingList={holdingList} />
-      ) : (
-        // 실시간 랭킹
-        <GameCurrentResult />
-      )}
-    </div>
-  );
+            {tabView === "보유주식" ? (
+                <GameHoldingsView holdingList={holdingList} />
+            ) : (
+                // 실시간 랭킹
+                <GameCurrentResult />
+            )}
+        </div>
+    );
 };
 
 export default GameViewTab;