[Feat] 주가 및 주문설정 관련 레이아웃 일부 구현

- 주가 및 주문설정 관련 전체 레이아웃 설정
- 레이아웃 내부에 들어가는 요소 구현 중

Issues #12

client/src/components/StockOrder/Index.tsx → client/src/components/StockOrderSection/Index.tsx

@@ -2,22 +2,31 @@ import { styled } from "styled-components";
 
 import UpperBar from "./UpperBar";
 import StockName from "./StockName";
+import OrderRequest from "./OrderRequest";
+import OrderResult from "./OrderResult";
 
-const StockOrder = () => {
+const StockOrderSection = () => {
   return (
     <Container>
       <UpperBar />
       <StockName />
+      <OrderRequest />
+      <OrderResult />
     </Container>
   );
 };
 
-export default StockOrder;
+export default StockOrderSection;
 
 const Container = styled.aside`
+  // 우측 슬라이드 관련 설정
   position: fixed;
   right: 0px;
   transition: right 0.3s ease-in-out;
+  //
+
+  display: flex;
+  flex-direction: column;
 
   flex: 3.3 0 0;
   min-width: 400px;

client/src/components/StockOrderSection/OrderRequest.tsx

@@ -0,0 +1,23 @@
+import { styled } from "styled-components";
+
+import StockPriceInfo from "./StockPriceInfo";
+import StockOrderSetting from "./StockOrderSetting";
+
+const OrderRequest = () => {
+  return (
+    <Container>
+      <StockPriceInfo />
+      <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,12 @@
+import { styled } from "styled-components";
+
+const OrderResult = () => {
+  return <Container></Container>;
+};
+
+export default OrderResult;
+
+const Container = styled.div`
+  flex: 1 0 0;
+  border-bottom: 1px solid black;
+`;

client/src/components/StockOrderSection/StockOrderSetting.tsx

@@ -0,0 +1,41 @@
+import { styled } from "styled-components";
+
+const orderType01: string = "매수";
+const orderType02: string = "매도";
+
+const StockOrderSetting = () => {
+  return (
+    <Container>
+      <OrderType>
+        <div className="buying">{orderType01}</div>
+        <div className="selling">{orderType02}</div>
+      </OrderType>
+    </Container>
+  );
+};
+
+export default StockOrderSetting;
+
+const Container = styled.div`
+  width: 208px;
+  height: 100%;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+`;
+
+const OrderType = styled.div`
+  width: 100%;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+
+  & div {
+    flex: 1 0 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 31px;
+    font-size: 14px;
+    border-bottom: 1px solid darkgray;
+  }
+`;

client/src/components/StockOrderSection/StockPriceInfo.tsx

@@ -0,0 +1,37 @@
+import { styled } from "styled-components";
+
+const StockPriceInfo = () => {
+  return (
+    <Container>
+      <HighFigure></HighFigure>
+      <PriceInfo></PriceInfo>
+      <LowerFigure></LowerFigure>
+    </Container>
+  );
+};
+
+export default StockPriceInfo;
+
+const Container = styled.div`
+  width: 160px;
+  height: 100%;
+  margin-right: 16px;
+  border-right: 1px solid black;
+`;
+
+const HighFigure = styled.div`
+  width: 100%;
+  height: 32px;
+  border-bottom: 1px solid black;
+`;
+
+const PriceInfo = styled.div`
+  width: 100%;
+  height: 348px;
+  border-bottom: 1px solid black;
+`;
+
+const LowerFigure = styled.div`
+  width: 100%;
+  height: 32px;
+`;

client/src/page/MainPage.tsx

@@ -1,7 +1,7 @@
 import { styled } from "styled-components";
 
 import LoginHeader from "../components/Headers/LoginHeader";
-import StockOrder from "../components/StockOrder/Index";
+import StockOrderSection from "../components/StockOrderSection/Index";
 
 const MainPage = () => {
   return (
@@ -10,7 +10,7 @@ const MainPage = () => {
       <Main>
         <LeftSection></LeftSection>
         <CentralSection></CentralSection>
-        <StockOrder />
+        <StockOrderSection />
         {/* <RightSection></RightSection> */}
       </Main>
     </Container>