[Rename] StockOrderSection 디렉토리 내부 파일명 수정

- StockOrderSection 내부 컴포넌트명 조금 더 직관적으로 수정
- 기타 변경 사항 : 더이상 사용하지 않는 더미 데이터 파일 삭제

Issues #17

client/src/components/CentralChartMenu/StockOverview.tsx

@@ -30,6 +30,7 @@ const StockOverview = () => {
   const chageDirection = priceChageRate > 0 ? "▲" : "▼";
   const priceChageAmount = Math.abs(parseInt(stockInfo.stockInfResponseDto.prdy_vrss, 10)).toLocaleString();
   const transactionVolume = parseInt(stockInfo.stockInfResponseDto.acml_vol, 10).toLocaleString();
+
   // 총 거래대금 계산
   const amount = parseInt(stockInfo.stockInfResponseDto.acml_tr_pbmn, 10);
   const [billions, tenThousands] = [Math.floor(amount / 100000000), Math.floor((amount % 100000000) / 10000)];

client/src/components/StockOrderSection/Index.tsx

@@ -4,7 +4,7 @@ import useGetStockInfo from "../../hooks/useGetStockInfo";
 import { stockOrderClose } from "../../reducer/StockOrderSet-Reducer";
 import { StateProps } from "../../models/stateProps";
 
-import OrderRequest from "./OrderRequest";
+import StockOrder from "./StockOrder";
 import OrderResult from "./OrderResult";
 
 const loginRequiredText: string = "로그인이 필요한 서비스입니다";
@@ -14,7 +14,7 @@ const titleText: string = "주식주문";
 const marketType: string = "코스피";
 
 // dummyData
-import { dummyStockName } from "./dummyData";
+import dummyLogo from "../../asset/CentralSectionMenu-dummyImg.png";
 import { useState } from "react";
 
 const StockOrderSection = () => {
@@ -50,32 +50,39 @@ const StockOrderSection = () => {
           ✕
         </button>
       </UpperBar>
-      {!login ? (
-        <LoginRequiredIndicator>
-          <div className="Notification">{loginRequiredText}</div>
-          <button className="LoginButton">{loginBtnText}</button>
-        </LoginRequiredIndicator>
-      ) : (
+      {login ? (
         <>
           <StockName>
-            <img className="CorpLogo" src={dummyStockName.corpLogo} />
+            <img className="CorpLogo" src={dummyLogo} />
             <div className="NameContainer">
               <div className="CorpName">{corpName}</div>
               <div className="StockCode">
                 {stockCode} {marketType}
               </div>
             </div>
           </StockName>
-          <OrderRequest />
+          <StockOrder />
           <OrderResult />
         </>
+      ) : (
+        <LoginRequestIndicator />
       )}
     </Container>
   );
 };
 
 export default StockOrderSection;
 
+// 미로그인 시 -> 로그인 요청 화면
+const LoginRequestIndicator = () => {
+  return (
+    <LoginRequestContainer>
+      <div className="Notification">{loginRequiredText}</div>
+      <button className="LoginButton">{loginBtnText}</button>
+    </LoginRequestContainer>
+  );
+};
+
 const Container = styled.aside<{ orderSet: boolean }>`
   position: fixed;
   z-index: 1;
@@ -119,7 +126,7 @@ const UpperBar = styled.div`
   }
 `;
 
-const LoginRequiredIndicator = styled.div`
+const LoginRequestContainer = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
@@ -138,7 +145,7 @@ const LoginRequiredIndicator = styled.div`
     font-size: 15px;
     font-weight: 400;
     color: white;
-    background-color: #e22926;
+    background-color: #2f4f4f;
     border: none;
     border-radius: 0.3rem;
   }

client/src/components/StockOrderSection/StockOrderBtn.tsx → client/src/components/StockOrderSection/OrderDicisionBtn.tsx

@@ -10,10 +10,9 @@ const totalAmountText: string = "주문총액";
 const totalAmountUnit: string = "원";
 
 // dummyData
-import { availableMoney } from "./dummyData";
-const dummyMoney = availableMoney.toLocaleString();
+const dummyMoney = 10000000;
 
-const StockOrderBtn = (props: OwnProps) => {
+const OrderDicisionBtn = (props: OwnProps) => {
   const { orderVolume, setOrderVolume } = props;
 
   const stockOrderType = useSelector((state: StateProps) => state.stockOrderType);
@@ -31,10 +30,10 @@ const StockOrderBtn = (props: OwnProps) => {
   }, [stockOrderType]);
 
   return (
-    <Container>
+    <div className="container">
       <AvailableMoney orderType={stockOrderType}>
         <span>{availableMoneyText01}</span>
-        <span className="availableMoney">{dummyMoney}</span>
+        <span className="availableMoney">{dummyMoney.toLocaleString()}</span>
         <span>{availableMoneyText02}</span>
       </AvailableMoney>
       <TotalAmount>
@@ -43,19 +42,19 @@ const StockOrderBtn = (props: OwnProps) => {
         <div>{totalAmountUnit}</div>
       </TotalAmount>
       <OrderBtn ordertype={stockOrderType}>{orderBtnText}</OrderBtn>
-    </Container>
+    </div>
   );
 };
 
-export default StockOrderBtn;
+export default OrderDicisionBtn;
 
+// type 선언
 interface OwnProps {
   orderVolume: number;
   setOrderVolume: (orderVolume: number) => void;
 }
 
-const Container = styled.div``;
-
+// component 생성
 const AvailableMoney = styled.div<{ orderType: boolean }>`
   display: flex;
   flex-direction: row;

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

@@ -3,7 +3,7 @@ import { styled } from "styled-components";
 import StockPriceList from "./StockPriceList";
 import StockOrderSetting from "./StockOrderSetting";
 
-const OrderRequest = () => {
+const StockOrder = () => {
   return (
     <Container>
       <StockPriceList />
@@ -12,7 +12,7 @@ const OrderRequest = () => {
   );
 };
 
-export default OrderRequest;
+export default StockOrder;
 
 const Container = styled.div`
   height: 414px;

client/src/components/StockOrderSection/StockOrderSetting.tsx

@@ -8,7 +8,7 @@ import { OrderTypeProps } from "../../models/orderTypeProps";
 
 import PriceSetting from "./PriceSetting";
 import VolumeSetting from "./VolumeSetteing";
-import StockOrderBtn from "./StockOrderBtn";
+import OrderDicisionBtn from "./OrderDicisionBtn";
 
 const orderType01: string = "매수";
 const orderType02: string = "매도";
@@ -51,7 +51,7 @@ const StockOrderSetting = () => {
       <OrderTypeChangeEffetLine />
       <PriceSetting stockInfo={stockInfo.stockAsBiResponseDto} companyId={companyId} />
       <VolumeSetting orderVolume={orderVolume} setOrderVolume={setOrderVolume} />
-      <StockOrderBtn orderVolume={orderVolume} setOrderVolume={setOrderVolume} />
+      <OrderDicisionBtn orderVolume={orderVolume} setOrderVolume={setOrderVolume} />
     </Container>
   );
 };

client/src/reducer/StockOrderPrice-Reducer.ts

@@ -1,8 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 
-import { dummyPrice } from "../components/StockOrderSection/dummyData";
-
-const initialState: number = dummyPrice[10].price;
+const initialState: number = 0;
 
 const stockPriceOrderSlice = createSlice({
   name: "stockOrderPrice",