Merge pull request #39 from codestates-seb/dev-client#12/stockOrderLa…

…yout

[FE] #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

@@ -0,0 +1,63 @@
+import { styled } from "styled-components";
+
+import StockName from "./StockName";
+import OrderRequest from "./OrderRequest";
+import OrderResult from "./OrderResult";
+
+const titleText: string = "주식주문";
+
+const StockOrderSection = () => {
+  return (
+    <Container>
+      <UpperBar>
+        <Title>{titleText}</Title>
+        <CloseBtn>&#10005;</CloseBtn>
+      </UpperBar>
+      <StockName />
+      <OrderRequest />
+      <OrderResult />
+    </Container>
+  );
+};
+
+export default StockOrderSection;
+
+const Container = styled.aside`
+  position: fixed;
+  right: -500px;
+  transition: right 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  width: 26%;
+  min-width: 400px;
+  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/OrderRequest.tsx

@@ -0,0 +1,23 @@
+import { styled } from "styled-components";
+
+import StockPrice from "./StockPrice";
+import StockOrderSetting from "./StockOrderSetting";
+
+const OrderRequest = () => {
+  return (
+    <Container>
+      <StockPrice />
+      <StockOrderSetting />
+    </Container>
+  );
+};
+
+export default OrderRequest;
+
+const Container = styled.div`
+  height: 414px;
+  border-bottom: 1px solid black;
+
+  display: flex;
+  flex-direction: row;
+`;

client/src/components/StockOrderSection/OrderResult.tsx

@@ -0,0 +1,51 @@
+import { styled } from "styled-components";
+
+const titleText: string = "주문내역";
+const orderPendingTitle: string = "미체결";
+const orderPendingEmptyMessage: string = "미체결 내역이 없습니다";
+
+const OrderResult = () => {
+  return (
+    <Container>
+      <Title>{titleText}</Title>
+      <OrderPending>
+        <div className="orderPendingTitle">{orderPendingTitle}</div>
+        <div className="emptyIndicator">{orderPendingEmptyMessage}</div>
+      </OrderPending>
+    </Container>
+  );
+};
+
+export default OrderResult;
+
+const Container = styled.div`
+  flex: 1 0 0;
+  padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Title = styled.div`
+  font-size: 16px;
+  font-weight: 500;
+  padding-left: 16px;
+  padding-bottom: 16px;
+`;
+
+const OrderPending = styled.div`
+  .orderPendingTitle {
+    padding-left: 16px;
+    margin-bottom: 8px;
+  }
+
+  .emptyIndicator {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 350;
+    color: #999999;
+  }
+`;