[Add] 종목 변경에 따른 주식주문 상단 종목명/코드 변경

- 종목 변경에 따라 주식주문란 상단의 종목명/코드가 변경되도록 코드 추가

Issues #17

client/src/components/StockOrderSection/Index.tsx

@@ -1,5 +1,6 @@
 import { useSelector, useDispatch } from "react-redux";
 import { styled } from "styled-components";
+import useGetStockInfo from "../../hooks/useGetStockInfo";
 import { stockOrderClose } from "../../reducer/StockOrderSet-Reducer";
 import { StateProps } from "../../models/stateProps";
 
@@ -13,13 +14,27 @@ const marketType: string = "코스피";
 import { dummyStockName } from "./dummyData";
 
 const StockOrderSection = () => {
+  const companyId = useSelector((state: StateProps) => state.companyId);
   const stockOrderSet = useSelector((state: StateProps) => state.stockOrderSet);
   const dispatch = useDispatch();
 
+  const { data, isLoading, error } = useGetStockInfo(companyId);
+
   const handleStockOrderClose = () => {
     dispatch(stockOrderClose());
   };
 
+  if (isLoading) {
+    return <></>;
+  }
+
+  if (error) {
+    return <></>;
+  }
+
+  const corpName = data.korName;
+  const stockCode = data.code;
+
   return (
     <Container orderSet={stockOrderSet}>
       <UpperBar>
@@ -31,9 +46,9 @@ const StockOrderSection = () => {
       <StockName>
         <img className="CorpLogo" src={dummyStockName.corpLogo} />
         <div className="NameContainer">
-          <div className="CorpName">{dummyStockName.corpName}</div>
+          <div className="CorpName">{corpName}</div>
           <div className="StockCode">
-            {dummyStockName.stockCode} {marketType}
+            {stockCode} {marketType}
           </div>
         </div>
       </StockName>

client/src/components/StockOrderSection/StockPriceList.tsx

@@ -13,17 +13,18 @@ const StockPriceList = () => {
   const { data, isLoading, error } = useGetStockInfo(companyId);
 
   if (isLoading) {
-    return <p>로딩 중</p>;
+    return;
   }
 
   if (error) {
-    return <p>에러 발생</p>;
+    return;
   }
 
   // 주가 정보 fetching -> 매수/매도 호가 및 거래량 각각 구분하여 배열 생성
   // 🟢 추가적으로 필요한 정보 = 주가 변동률 + 🟢 해당 로직 외부로 빼서 처리하는 방법 고민
-  const sellingPrice = [];
-  const buyingPrice = [];
+  // 주가 변동률 -> 전날 종가 대비 상승/하략률
+  const sellingPrice: priceProps[] = [];
+  const buyingPrice: priceProps[] = [];
 
   for (let i = 1; i < 6; i++) {
     const sellingPriceProp = `askp${i}`;
@@ -41,10 +42,17 @@ const StockPriceList = () => {
       volume: data.stockAsBiResponseDto[buyingVolumeProp],
     };
 
-    sellingPrice.push(sellingInfo);
-    buyingPrice.unshift(buyingInfo);
+    sellingPrice.unshift(sellingInfo);
+    buyingPrice.push(buyingInfo);
   }
 
+  const testFun = () => {
+    console.log(sellingPrice);
+    console.log(buyingPrice);
+  };
+
+  testFun();
+
   return (
     <Container>
       <HighFigure>
@@ -66,6 +74,12 @@ const StockPriceList = () => {
 
 export default StockPriceList;
 
+// type 정의
+interface priceProps {
+  price: string;
+  volume: string;
+}
+
 // component 생성
 const Container = styled.div`
   width: 40%;

client/src/hooks/useGetKospiChart.ts

@@ -7,6 +7,14 @@ const useGetKospiChart = () => {
 
   const { data, isLoading, error } = useQuery("kospi", getKospiData, {});
 
+  if (isLoading) {
+    console.log("데이터 로딩중");
+  }
+
+  if (error) {
+    console.log("에러 발생");
+  }
+
   useEffect(() => {
     if (data) {
       setKospiData(data);

client/src/hooks/useGetStockData.ts

@@ -7,10 +7,12 @@ const useGetStockData = (companyId: number) => {
 
   // 시간대 (timeZone) 별로 queryKey를 다르게 설정해서, 서버 데이터가 동일할 때는 캐싱된 데이터 활용하고 서버 데이터가 갱신됐을 때는 새롭게 받아옴 (서버 데이터 30분마다 갱신)
   const currentTime = new Date();
-  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDay(), currentTime.getHours, currentTime.getMinutes()];
+  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDay(), currentTime.getHours(), currentTime.getMinutes()];
   const timeZone = minute === 0 || minute === 30 ? "30 or 60" : 0 < minute && minute < 30 ? "1~29" : "31~59";
   const queryKey = `${month}월 ${day}일 ${hour}시 ${timeZone}`;
 
+  console.log(queryKey);
+
   // 현재 시각이 30분, 정각이 아닌 경우 남은 시간 계산하여 checkTime 함수 다시 실행
   useEffect(() => {
     if (minute === 0 || minute === 30) {

client/src/reducer/CompanyId-Reducer.ts

@@ -15,3 +15,33 @@ const companyIdSlice = createSlice({
 
 export const { changeCompanyId } = companyIdSlice.actions;
 export const companyIdReducer = companyIdSlice.reducer;
+
+// ///
+// import createSlice
+
+// const Slice <- reducer, action 같이
+
+// const companyIdSlice = createSlice({
+//   ///
+//   name: 'companyId',
+//   initialState:
+
+// })
+
+// /// action <- 상태를 변경하는 행위 <- 여러개가 존재할 수 잇다
+// // store <- 상태는 여러개인데,,,,
+// /// 상태를 관리하는 <- reducer는 1개 <-
+// /// redcuer를 통해서 변경할 수 잇는 상태의 개수는 여러개
+
+// /// number 상태를 만들었다
+// /// reducer 1개
+// /// +1, -1, *100, %100,,,,, <- action
+
+// // action.payload <- 관용어구 ////
+
+// // action 생성자 함수
+// // -> plusState: (state, action) => {return state+ 2}
+
+// // dispatch( plusState(2 === action.payload) )
+
+// // action = {payload :2 }