[Feat] 매수/매도호가 관련 더미데이터 추가로직 복구

- BE 에서 받아오는 매도/매수호가 데이터 중 price 값이 0인 경우가 예외적으로 발생함 (한국투자증권 API를 기반으로 하여 BE 에서 수정 불가)
- price가 0일 경우 주가리스트에 포함해서 유저에게 보여주는 의미가 없기 때문에 필터링 하여 제거하여, price가 0인 경우가 발생하면 총 호가 개수가 20개 미만으로 설정됨 (BE 에서 매수/매도호가 각각 10개씩 총 20개 데이터를 받아오지만, price가 0인 경우를 필터링 하여 제거하기 때문에)
- 이러한 예외상황 발생하더라도 항상 주가 리스트에 호가가 총 20개 렌더링 될 수 있도록 FE에서 더미데이터 추가하는 로직 추가 (해당 더미 price 관련하여 거래량 0으로 설정하여, 유저가 해당 가격 지정하더로 거래가 불가함을 인지시킴 + 안내 메세지 띄워서 명확히 인식시킴)

Issues #17

client/src/components/StockOrderSection/StockPriceList.tsx

@@ -1,11 +1,13 @@
 import { useSelector } from "react-redux";
 import useGetStockInfo from "../../hooks/useGetStockInfo";
-
 import { styled } from "styled-components";
 import { StateProps } from "../../models/stateProps";
-
 import StockPrice from "./StockPrice";
 
+const sellingPriceText: string = "매도호가";
+const buyingPriceTest: string = "매수호가";
+const tradingVolumeText: string = "거래량";
+
 const StockPriceList = () => {
   const companyId = useSelector((state: StateProps) => state.companyId);
   const stockOrderType = useSelector((state: StateProps) => state.stockOrderType);
@@ -47,6 +49,22 @@ const StockPriceList = () => {
   const existSellingPrice = sellingPrice.filter((selling) => selling.price !== 0);
   const existBuyingPrice = buyingPrice.filter((buyingPrice) => buyingPrice.price !== 0);
 
+  /* 🔴 더미 데이터 추가 로직
+  [문제점] 주가 리스트 개수가 너무 적음 (매도호가 5개 + 매수호가 5개 = 총 10개) → 더미데이터를 추가하여 가격 리스트 확장 (매도 10개 + 매수 10개 = 총 20개)
+  [해결방안] 1) fetching 해온 데이터 중 가격 0인 데이터 제외 (한국투자증권 API에서 간혹 보내는 경우 있음) → 호가 간격 계산 후, 더미 데이터 추가 (거래량은 0으로 설정)
+  */
+  const priceInterval: number = existSellingPrice[existSellingPrice.length - 1].price - existBuyingPrice[0].price;
+
+  for (let i = 0; existSellingPrice.length < 10; i++) {
+    const dummySellingData = { price: existSellingPrice[0].price + priceInterval, volume: 0 };
+    existSellingPrice.unshift(dummySellingData);
+  }
+
+  for (let i = 0; existBuyingPrice.length < 10; i++) {
+    const dummyBuyingData = { price: existBuyingPrice[existBuyingPrice.length - 1].price - priceInterval, volume: 0 };
+    existBuyingPrice.push(dummyBuyingData);
+  }
+
   // 1) 매도/매수호가 종합  2) 매수/매도호가 거래량 종합
   const sellingAndBuyingPrice = [...existSellingPrice, ...existBuyingPrice];
   const totalSellingVolume = existSellingPrice.reduce((acc, cur) => {
@@ -59,17 +77,17 @@ const StockPriceList = () => {
   return (
     <Container orderType={stockOrderType}>
       <div className="priceIndicator">
-        <div className="sellingPrice">매도호가</div>
-        <div className="sellingVolume">거래량</div>
+        <div className="sellingPrice">{sellingPriceText}</div>
+        <div className="sellingVolume">{tradingVolumeText}</div>
       </div>
       <PriceList>
         {sellingAndBuyingPrice.map((item, idx) => (
           <StockPrice key={item.price} index={idx} price={item.price} volume={item.volume} totalSellingVolume={totalSellingVolume} totalBuyingVolum={totalBuyingVolum} />
         ))}
       </PriceList>
       <div className="priceIndicator">
-        <div className="buyingPrice">매수호가</div>
-        <div className="buyingVolume">거래량</div>
+        <div className="buyingPrice">{buyingPriceTest}</div>
+        <div className="buyingVolume">{tradingVolumeText}</div>
       </div>
     </Container>
   );