[Add] 주식주문 상단 종목명/코드 관련 설정

- 종목 선택에 따라 주식주문 창 상단의 종목명/종목코드 변경되도록 설정 - 관련하여 필요한 변수명 (useQuery 활용하여 fetching 해온 데이터 변수명) 수정 Issues #17
codestates-seb · Sep 8, 2023 · ce48903 · ce48903
1 parent bfc6901
commit ce48903
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 29 deletions.
diff --git a/client/src/components/CentralChart/KospiChart.tsx b/client/src/components/CentralChart/KospiChart.tsx
@@ -17,7 +17,7 @@ import { useEffect, useState } from "react";
 const KospiChart = () => {
   const dispatch = useDispatch();
 
-  const { isLoading, error, options, chartStyle } = useGetKospiChart();
+  const { kospiLoading, kospiError, options, chartStyle } = useGetKospiChart();
 
   // 🔴 차트 변환 테스트
 
@@ -71,11 +71,11 @@ const KospiChart = () => {
   };
   //
 
-  if (isLoading) {
+  if (kospiLoading) {
     return <LoadingContainer>{loadingText}</LoadingContainer>;
   }
 
-  if (error) {
+  if (kospiError) {
     return <ErrorContainer>{errorText}</ErrorContainer>;
   }
 

diff --git a/client/src/components/CentralChart/StockChart.tsx b/client/src/components/CentralChart/StockChart.tsx
@@ -20,7 +20,7 @@ const StockChart = () => {
   const companyId = useSelector((state: StateProps) => state.companyId);
   const dispatch = useDispatch();
 
-  const { isLoading, error } = useGetStockData(companyId);
+  const { stockPriceLoading, stockPriceError } = useGetStockData(companyId);
   const { options, chartStyle } = useGetStockChart(companyId);
 
   // 🔴 차트 변환 테스트
@@ -81,11 +81,11 @@ const StockChart = () => {
   };
   //
 
-  if (isLoading) {
+  if (stockPriceLoading) {
     return <LoadingContainer>{loadingText}</LoadingContainer>;
   }
 
-  if (error) {
+  if (stockPriceError) {
     return <ErrorContainer>{errorText}</ErrorContainer>;
   }
 

diff --git a/client/src/components/CentralChartMenu/StockOverview.tsx b/client/src/components/CentralChartMenu/StockOverview.tsx
@@ -13,25 +13,25 @@ const valueText: string = "거래대금";
 // styled-component 수정 및 미디어 쿼리 적용
 const StockOverview = () => {
   const companyId = useSelector((state: StateProps) => state.companyId);
-  const { data, isLoading, error } = useGetStockInfo(companyId);
+  const { stockInfo, stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);
 
-  if (isLoading) {
+  if (stockInfoLoading) {
     return <p>로딩 중 입니다</p>;
   }
 
-  if (error) {
+  if (stockInfoError) {
     return <p>에러 발생</p>;
   }
 
-  const corpName = data.korName;
-  const stockCode = data.code;
-  const stockPrice = parseInt(data.stockInfResponseDto.stck_prpr, 10).toLocaleString();
-  const priceChageRate = parseFloat(data.stockInfResponseDto.prdy_ctrt);
+  const corpName = stockInfo.korName;
+  const stockCode = stockInfo.code;
+  const stockPrice = parseInt(stockInfo.stockInfResponseDto.stck_prpr, 10).toLocaleString();
+  const priceChageRate = parseFloat(stockInfo.stockInfResponseDto.prdy_ctrt);
   const chageDirection = priceChageRate > 0 ? "▲" : "▼";
-  const priceChageAmount = Math.abs(parseInt(data.stockInfResponseDto.prdy_vrss, 10)).toLocaleString();
-  const transactionVolume = parseInt(data.stockInfResponseDto.acml_vol, 10).toLocaleString();
+  const priceChageAmount = Math.abs(parseInt(stockInfo.stockInfResponseDto.prdy_vrss, 10)).toLocaleString();
+  const transactionVolume = parseInt(stockInfo.stockInfResponseDto.acml_vol, 10).toLocaleString();
   // 총 거래대금 계산
-  const amount = parseInt(data.stockInfResponseDto.acml_tr_pbmn, 10);
+  const amount = parseInt(stockInfo.stockInfResponseDto.acml_tr_pbmn, 10);
   const [billions, tenThousands] = [Math.floor(amount / 100000000), Math.floor((amount % 100000000) / 10000)];
   const transactionValue = `${billions.toLocaleString()}억 ${tenThousands.toLocaleString()}만`;
 

diff --git a/client/src/components/StockOrderSection/Index.tsx b/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,9 +14,23 @@ 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 { stockInfo, stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);
+
+  if (stockInfoLoading) {
+    return <></>;
+  }
+
+  if (stockInfoError) {
+    return <></>;
+  }
+
+  const corpName = stockInfo.korName;
+  const stockCode = stockInfo.code;
+
   const handleStockOrderClose = () => {
     dispatch(stockOrderClose());
   };
@@ -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>

diff --git a/client/src/hooks/useGetCompanyList.ts b/client/src/hooks/useGetCompanyList.ts
@@ -4,7 +4,7 @@ import axios from "axios";
 const useGetCompanyList = () => {
   const { data, isLoading, error } = useQuery("companyList", getCompanyList, {});
 
-  return { companyList: data, isLoading, error };
+  return { companyList: data, compnayListLoading: isLoading, companyListError: error };
 };
 
 export default useGetCompanyList;

diff --git a/client/src/hooks/useGetKospiChart.ts b/client/src/hooks/useGetKospiChart.ts
@@ -68,7 +68,7 @@ const useGetKospiChart = () => {
     height: "100%",
   };
 
-  return { isLoading, error, options, chartStyle };
+  return { kospiLoading: isLoading, kospiError: error, options, chartStyle };
 };
 
 export default useGetKospiChart;

diff --git a/client/src/hooks/useGetStockChart.ts b/client/src/hooks/useGetStockChart.ts
@@ -2,21 +2,21 @@ import { useState, useEffect } from "react";
 import useGetStockData from "./useGetStockData";
 
 const useGetStockChart = (companyId: number) => {
-  const { data } = useGetStockData(companyId);
+  const { stockPrice } = useGetStockData(companyId);
   const [chartData, setChartData] = useState<StockProps[]>([]);
   const [yAxisInterval, setYAxisInterval] = useState(0);
   const [yAxisMinPrice, setYAxisMinPrice] = useState(0);
 
   // 서버에서 차트 데이터 fetching -> 클라이언트 화면에 활용할 차트 데이터 + 차트 y축 수치 상태 변화
   useEffect(() => {
-    if (data) {
-      setChartData(data);
+    if (stockPrice) {
+      setChartData(stockPrice);
 
-      const { interval, min } = calculateYAxisOptions(data);
+      const { interval, min } = calculateYAxisOptions(stockPrice);
       setYAxisInterval(interval);
       setYAxisMinPrice(min);
     }
-  }, [data]);
+  }, [stockPrice]);
 
   const options = {
     xAxis: {

diff --git a/client/src/hooks/useGetStockData.ts b/client/src/hooks/useGetStockData.ts
@@ -7,7 +7,7 @@ const useGetStockData = (companyId: number) => {
 
   // 시간대 (timeZone) 별로 queryKey를 다르게 설정해서, 서버 데이터가 동일할 때는 캐싱된 데이터 활용하고 서버 데이터가 갱신됐을 때는 새롭게 받아옴 (서버 데이터 30분마다 갱신)
   const currentTime = new Date();
-  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDate(), currentTime.getHours, currentTime.getMinutes()];
+  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDate(), 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}`;
 
@@ -39,7 +39,7 @@ const useGetStockData = (companyId: number) => {
     },
   });
 
-  return { data, isLoading, error };
+  return { stockPrice: data, stockPriceLoading: isLoading, stockPriceError: error };
 };
 
 export default useGetStockData;

diff --git a/client/src/hooks/useGetStockInfo.ts b/client/src/hooks/useGetStockInfo.ts
@@ -7,7 +7,7 @@ const useGetStockInfo = (companyId: number) => {
 
   // 시간대 (timeZone) 별로 queryKey를 다르게 설정해서, 서버 데이터가 동일할 때는 캐싱된 데이터 활용하고 서버 데이터가 갱신됐을 때는 새롭게 받아옴 (서버 데이터 30분마다 갱신)
   const currentTime = new Date();
-  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDate(), currentTime.getHours, currentTime.getMinutes()];
+  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDate(), 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}`;
 
@@ -39,7 +39,7 @@ const useGetStockInfo = (companyId: number) => {
     },
   });
 
-  return { data, isLoading, error };
+  return { stockInfo: data, stockInfoLoading: isLoading, stockInfoError: error };
 };
 
 const getStockInfo = async (companyId: number) => {