[Add] 우측 주식주문 주가리스트 관련 로직 구현 중

- 서버에서 주가 정보를 fetching 한 후 이를 활용하여 주가 리스트 렌더링에 활용할 배열 데이터 생성하는 로직 구현 중
- 매수/매도 호가 및 거래량 관련된 데이터 포함하였으며, fetching 된 데이터에 포함되지 않은 일부 데이터 (주가 등락률) 관련한 로직 계산하는 로직 추가적으로 필요

Issues #17

client/src/components/StockOrderSection/StockOrderBtn.tsx

@@ -19,7 +19,7 @@ const StockOrderBtn = () => {
 
   return (
     <Container>
-      <AvailableMoney>
+      <AvailableMoney orderType={stockOrderType}>
         <span>{availableMoneyText01}</span>
         <span className="availableMoney">{dummyMoney}</span>
         <span>{availableMoneyText02}</span>
@@ -38,19 +38,19 @@ export default StockOrderBtn;
 
 const Container = styled.div``;
 
-const AvailableMoney = styled.div`
+const AvailableMoney = styled.div<{ orderType: boolean }>`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   gap: 4px;
 
   & span {
     font-size: 14px;
-    color: #999999;
+    color: ${(props) => (props.orderType ? "white" : "#999999")};
   }
 
   .availableMoney {
-    color: #ed2926;
+    color: ${(props) => (props.orderType ? "white" : "#ed2926")};
   }
 `;
 

client/src/components/StockOrderSection/StockPriceList.tsx

@@ -1,10 +1,50 @@
+import { useSelector } from "react-redux";
+import useGetStockInfo from "../../hooks/useGetStockInfo";
 import { styled } from "styled-components";
+import { StateProps } from "../../models/stateProps";
+
 import StockPrice from "./StockPrice";
 
-// dummyData
+// dummyData & 🔴 테스트
 import { dummyPrice } from "./dummyData";
 
 const StockPriceList = () => {
+  const companyId = useSelector((state: StateProps) => state.companyId);
+  const { data, isLoading, error } = useGetStockInfo(companyId);
+
+  if (isLoading) {
+    return <p>로딩 중</p>;
+  }
+
+  if (error) {
+    return <p>에러 발생</p>;
+  }
+
+  // 주가 정보 fetching -> 매수/매도 호가 및 거래량 각각 구분하여 배열 생성
+  // 🟢 추가적으로 필요한 정보 = 주가 변동률 + 🟢 해당 로직 외부로 빼서 처리하는 방법 고민
+  const sellingPrice = [];
+  const buyingPrice = [];
+
+  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: data.stockAsBiResponseDto[sellingPriceProp],
+      volume: data.stockAsBiResponseDto[sellingVolumeProp],
+    };
+
+    const buyingInfo = {
+      price: data.stockAsBiResponseDto[buyingPriceProp],
+      volume: data.stockAsBiResponseDto[buyingVolumeProp],
+    };
+
+    sellingPrice.push(sellingInfo);
+    buyingPrice.unshift(buyingInfo);
+  }
+
   return (
     <Container>
       <HighFigure>

client/src/components/StockOrderSection/VolumeSetteing.tsx

@@ -119,6 +119,7 @@ const PercentageBox = styled.div`
   flex-direction: row;
   justify-content: space-between;
   margin-top: 8px;
+  gap: 8px;
 
   & button {
     width: 56px;