[Refactor] 종목 개요 fetching 관련 로직 수정

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

Issues #14

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,111 +26,27 @@ 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>
   );
 };
 
 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;

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;
-}