[Feat] 주식주문 관련 조건부 렌더링 적용

- 주식주문 관련 매수/매도 여부에 따른 조건부 렌더링 일부 구현
- 전역 상태관리도구 (redux-toolkit) 활용하여 상태관리

Issues #12

client/package.json

@@ -10,11 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.5.0",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.1.2",
     "styled-components": "^6.0.7"
   },
   "devDependencies": {

client/src/components/StockOrderSection/Index.tsx

@@ -1,14 +1,18 @@
 import { styled } from "styled-components";
 
-import UpperBar from "./UpperBar";
 import StockName from "./StockName";
 import OrderRequest from "./OrderRequest";
 import OrderResult from "./OrderResult";
 
+const titleText: string = "주식주문";
+
 const StockOrderSection = () => {
   return (
     <Container>
-      <UpperBar />
+      <UpperBar>
+        <Title>{titleText}</Title>
+        <CloseBtn>&#10005;</CloseBtn>
+      </UpperBar>
       <StockName />
       <OrderRequest />
       <OrderResult />
@@ -29,3 +33,31 @@ const Container = styled.aside`
   height: 100%;
   background-color: #ffffff;
 `;
+
+const UpperBar = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 43px;
+  border-bottom: 1px solid black;
+`;
+
+const Title = styled.h2`
+  font-size: 17px;
+  font-weight: 450;
+  color: #1c1c1c;
+`;
+
+const CloseBtn = styled.button`
+  position: absolute;
+  right: 10px;
+  width: 28px;
+  height: 95%;
+  border: none;
+  font-size: 20px;
+  color: #525252;
+  background-color: #ffff;
+`;

client/src/components/StockOrderSection/OrderResult.tsx

@@ -30,7 +30,6 @@ const Title = styled.div`
   font-weight: 500;
   padding-left: 16px;
   padding-bottom: 16px;
-  /* border-bottom: 1px solid black; */
 `;
 
 const OrderPending = styled.div`

client/src/components/StockOrderSection/StockOrderBtn.tsx

@@ -1,17 +1,21 @@
+import { useSelector } from "react-redux";
 import { styled } from "styled-components";
+import { StateProps } from "../../models/stateProps";
+import { OrderTypeProps } from "../../models/orderTypeProps";
 
 const availableMoneyText01: string = "최대";
 const availableMoneyText02: string = "원";
 const totalAmountText01: string = "주문총액";
 const totalAmountText02: string = "원";
-const orderBtnText: string = "매수";
 
 // dummyData
 import { availableMoney } from "./dummyData";
 const dummyAmount: string = "0";
+const dummyMoney = availableMoney.toLocaleString();
 
 const StockOrderBtn = () => {
-  const dummyMoney = availableMoney.toLocaleString();
+  const stockOrderType = useSelector((state: StateProps) => state.stockOrderType);
+  const orderBtnText: string = stockOrderType ? "매도" : "매수";
 
   return (
     <Container>
@@ -25,7 +29,7 @@ const StockOrderBtn = () => {
         <div className="totalAmount">{dummyAmount}</div>
         <div>{totalAmountText02}</div>
       </TotalAmount>
-      <OrderBtn>{orderBtnText}</OrderBtn>
+      <OrderBtn ordertype={stockOrderType}>{orderBtnText}</OrderBtn>
     </Container>
   );
 };
@@ -73,13 +77,13 @@ const TotalAmount = styled.div`
   }
 `;
 
-const OrderBtn = styled.button`
+const OrderBtn = styled.button<OrderTypeProps>`
   width: 100%;
   height: 32px;
   margin-top: 16px;
   border: none;
   border-radius: 0.25rem;
-  background-color: #ed2926;
+  background-color: ${(props) => (props.ordertype ? "#2679ed" : "#e22926")};
   color: #ffffff;
   font-weight: 400;
 `;