From 23579b540703cd3f75e6c5cea4536ac90311d7a2 Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
Date: Thu, 7 Sep 2023 03:47:36 +0900
Subject: [PATCH] =?UTF-8?q?[Refactor]=20=EC=A2=85=EB=AA=A9=20=EA=B0=9C?=
 =?UTF-8?q?=EC=9A=94=20fetching=20=EA=B4=80=EB=A0=A8=20=EB=A1=9C=EC=A7=81?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 주식 종목 개요 fetching 로직 관련하여 불필요한 코드 (useEffect 사용 코드) 삭제
- React-Query의 useQuery 메서드 기능 통하여 필요한 기능 구현 가능하므로, 불필요한 코드 삭제하여 가독성 및 효율성 증진

Issues #14
---
 .../CentralChartMenu/StockOverview.tsx        | 106 ++----------------
 client/src/hooks/useGetStockInfo.ts           |  43 -------
 2 files changed, 7 insertions(+), 142 deletions(-)

diff --git a/client/src/components/CentralChartMenu/StockOverview.tsx b/client/src/components/CentralChartMenu/StockOverview.tsx
index 6464cda8..a2837752 100644
--- a/client/src/components/CentralChartMenu/StockOverview.tsx
+++ b/client/src/components/CentralChartMenu/StockOverview.tsx
@@ -1,4 +1,3 @@
-import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { styled } from "styled-components";
 import useGetStockInfo from "../../hooks/useGetStockInfo";
@@ -13,16 +12,9 @@ const valueText: string = "거래대금";
 
 // styled-component 수정 및 미디어 쿼리 적용
 const StockOverview = () => {
-  const [stockInfo, setStockInfo] = useState<StockOverviewProps>(inintialState);
   const companyId = useSelector((state: StateProps) => state.companyId);
   const { data, isLoading, error } = useGetStockInfo(companyId);
 
-  useEffect(() => {
-    if (data) {
-      setStockInfo(data);
-    }
-  }, [data]);
-
   if (isLoading) {
     return <p>로딩 중 입니다</p>;
   }
@@ -34,20 +26,20 @@ const StockOverview = () => {
   return (
     <Container>
       <img className="CorpLogo" src={dummyData.corpLogo} />
-      <div className="CorpName">{stockInfo.korName}</div>
+      <div className="CorpName">{data.korName}</div>
       <div className="StockCode">
-        {stockInfo.code} <span>{marketType}</span>
+        {data.code} <span>{marketType}</span>
       </div>
-      <div className="StockPrice">{stockInfo.stockInfResponseDto.stck_prpr}</div>
-      <div className="PriceChangeRate">{stockInfo.stockInfResponseDto.prdy_vrss}</div>
-      <div className="PriceChangeAmount">{stockInfo.stockInfResponseDto.prdy_ctrt}</div>
+      <div className="StockPrice">{data.stockInfResponseDto.stck_prpr}</div>
+      <div className="PriceChangeRate">{data.stockInfResponseDto.prdy_vrss}</div>
+      <div className="PriceChangeAmount">{data.stockInfResponseDto.prdy_ctrt}</div>
       <TransactionVolume>
         <span>{volumeText}</span>
-        {stockInfo.stockInfResponseDto.acml_vol}
+        {data.stockInfResponseDto.acml_vol}
       </TransactionVolume>
       <TransactionValue>
         <span>{valueText}</span>
-        {stockInfo.stockInfResponseDto.acml_tr_pbmn}
+        {data.stockInfResponseDto.acml_tr_pbmn}
       </TransactionValue>
     </Container>
   );
@@ -55,90 +47,6 @@ const StockOverview = () => {
 
 export default StockOverview;
 
-// 상태 초기값
-const inintialState = {
-  companyId: 0,
-  code: "",
-  korName: "",
-  stockAsBiResponseDto: {
-    stockAsBiId: 0,
-    companyId: 0,
-    askp1: "",
-    askp2: "",
-    askp3: "",
-    askp4: "",
-    askp5: "",
-    askp_rsqn1: "",
-    askp_rsqn2: "",
-    askp_rsqn3: "",
-    askp_rsqn4: "",
-    askp_rsqn5: "",
-    bidp1: "",
-    bidp2: "",
-    bidp3: "",
-    bidp4: "",
-    bidp5: "",
-    bidp_rsqn1: "",
-    bidp_rsqn2: "",
-    bidp_rsqn3: "",
-    bidp_rsqn4: "",
-    bidp_rsqn5: "",
-  },
-  stockInfResponseDto: {
-    stockInfId: 0,
-    companyId: 0,
-    stck_prpr: "",
-    prdy_vrss: "",
-    prdy_ctrt: "",
-    acml_vol: "",
-    acml_tr_pbmn: "",
-  },
-};
-
-// type 정의
-interface StockOverviewProps {
-  companyId: number;
-  code: string;
-  korName: string;
-  stockAsBiResponseDto: StockPriceProps;
-  stockInfResponseDto: StockInfoProps;
-}
-
-interface StockPriceProps {
-  stockAsBiId: number;
-  companyId: number;
-  askp1: string;
-  askp2: string;
-  askp3: string;
-  askp4: string;
-  askp5: string;
-  askp_rsqn1: string;
-  askp_rsqn2: string;
-  askp_rsqn3: string;
-  askp_rsqn4: string;
-  askp_rsqn5: string;
-  bidp1: string;
-  bidp2: string;
-  bidp3: string;
-  bidp4: string;
-  bidp5: string;
-  bidp_rsqn1: string;
-  bidp_rsqn2: string;
-  bidp_rsqn3: string;
-  bidp_rsqn4: string;
-  bidp_rsqn5: string;
-}
-
-interface StockInfoProps {
-  stockInfId: number;
-  companyId: number;
-  stck_prpr: string;
-  prdy_vrss: string;
-  prdy_ctrt: string;
-  acml_vol: string;
-  acml_tr_pbmn: string;
-}
-
 // component 생성
 const Container = styled.div`
   flex: 7 0 0;
diff --git a/client/src/hooks/useGetStockInfo.ts b/client/src/hooks/useGetStockInfo.ts
index e4acedf5..3c57fe42 100644
--- a/client/src/hooks/useGetStockInfo.ts
+++ b/client/src/hooks/useGetStockInfo.ts
@@ -14,46 +14,3 @@ const getStockInfo = async (companyId: number) => {
 };
 
 export default useGetStockInfo;
-
-interface StockOverviewProps {
-  companyId: number;
-  code: string;
-  korName: string;
-  stockAsBiResponseDto: StockPriceProps;
-  stockInfResponseDto: StockInfoProps;
-}
-
-interface StockPriceProps {
-  stockAsBiId: number;
-  companyId: number;
-  askp1: string;
-  askp2: string;
-  askp3: string;
-  askp4: string;
-  askp5: string;
-  askp_rsqn1: string;
-  askp_rsqn2: string;
-  askp_rsqn3: string;
-  askp_rsqn4: string;
-  askp_rsqn5: string;
-  bidp1: string;
-  bidp2: string;
-  bidp3: string;
-  bidp4: string;
-  bidp5: string;
-  bidp_rsqn1: string;
-  bidp_rsqn2: string;
-  bidp_rsqn3: string;
-  bidp_rsqn4: string;
-  bidp_rsqn5: string;
-}
-
-interface StockInfoProps {
-  stockInfId: number;
-  companyId: number;
-  stck_prpr: string;
-  prdy_vrss: string;
-  prdy_ctrt: string;
-  acml_vol: string;
-  acml_tr_pbmn: string;
-}