[Add] 주식주문 관련 주가 변동률 게산 로직 추가

- 주가 변동률 (전날 종가 대비, 당일 매수/매도호가 변동률) 계산에 필요한 로직 추가
- 전날 종가 관련하여 화~토요일은 전날 종가를 기준으로 하며, 일/월요일은 금요일 종가를 기준으로 함

Issues #17

client/src/components/StockOrderSection/StockPriceList.tsx

@@ -1,10 +1,87 @@
+import { useSelector } from "react-redux";
+import useGetStockInfo from "../../hooks/useGetStockInfo";
+import useGetStockData from "../../hooks/useGetStockData";
 import { styled } from "styled-components";
+import { StateProps } from "../../models/stateProps";
+import { StockProps } from "../../models/stockProps";
+
 import StockPrice from "./StockPrice";
 
 // dummyData
 import { dummyPrice } from "./dummyData";
 
 const StockPriceList = () => {
+  const companyId = useSelector((state: StateProps) => state.companyId);
+  const { stockInfo, stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);
+  const { stockPrice, stockPriceLoading, stockPriceError } = useGetStockData(companyId);
+
+  if (stockInfoLoading || stockPriceLoading) {
+    return <></>;
+  }
+
+  if (stockInfoError || stockPriceError) {
+    return <></>;
+  }
+
+  // 당일 매수/매도 호가 정리
+  const sellingPrice: PriceProps[] = [];
+  const buyingPrice: PriceProps[] = [];
+  let previousDayStockClosingPrice: number = 0;
+
+  for (let i = 1; i < 6; i++) {
+    const sellingPriceProp = `askp${i}`;
+    const sellingVolumeProp = `askp_rsqn${i}`;
+    const buyingPriceProp = `bidp${i}`;
+    const buyingVolumeProp = `bidp_rsqn${i}`;
+
+    const sellingInfo = {
+      price: parseInt(stockInfo.stockAsBiResponseDto[sellingPriceProp]),
+      volume: parseInt(stockInfo.stockAsBiResponseDto[sellingVolumeProp]),
+    };
+
+    const buyingInfo = {
+      price: parseInt(stockInfo.stockAsBiResponseDto[buyingPriceProp]),
+      volume: parseInt(stockInfo.stockAsBiResponseDto[buyingVolumeProp]),
+    };
+
+    sellingPrice.unshift(sellingInfo);
+    buyingPrice.push(buyingInfo);
+  }
+
+  // 전날 종가 데이터 -> 1) 일/월 : 금요일 종가로 설정  2) 화~토 : 전날 종가로 설정
+  const daysOfWeek = ["일", "월", "화", "수", "목", "금", "토"];
+  const getToday = new Date().getDay();
+  const today = daysOfWeek[getToday];
+
+  if (today === "일" || today === "월") {
+    previousDayStockClosingPrice = stockPrice[stockPrice.length - 1].stck_prpr;
+  } else {
+    const yesterday = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
+    const yesterdayYymmdd = yesterday.toISOString().slice(0, 10);
+
+    const yesterdayStockInfo = stockPrice.filter((stockInfo: StockProps) => {
+      const dayInfo = stockInfo.stockTradeTime.slice(0, 10);
+
+      if (dayInfo === yesterdayYymmdd) {
+        return stockInfo;
+      }
+    });
+
+    previousDayStockClosingPrice = parseInt(yesterdayStockInfo[yesterdayStockInfo.length - 1].stck_prpr);
+  }
+
+  const testFun = () => {
+    console.log(sellingPrice);
+    console.log(buyingPrice);
+
+    console.log(sellingPrice[0].price);
+    console.log(previousDayStockClosingPrice);
+
+    console.log(sellingPrice[0].price - previousDayStockClosingPrice);
+  };
+
+  testFun();
+
   return (
     <Container>
       <HighFigure>
@@ -26,6 +103,12 @@ const StockPriceList = () => {
 
 export default StockPriceList;
 
+// type 정의
+interface PriceProps {
+  price: number;
+  volume: number;
+}
+
 // component 생성
 const Container = styled.div`
   width: 40%;

client/src/models/stockProps.ts

@@ -0,0 +1,10 @@
+export interface StockProps {
+  stockMinId: number;
+  companyId: number;
+  stockTradeTime: string;
+  stck_cntg_hour: string;
+  stck_prpr: string;
+  stck_oprc: string;
+  stck_hgpr: string;
+  stck_lwpr: string;
+}