From cdef1f620ecb0cc3d97160b4f07155bfc42bf41e Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
Date: Wed, 6 Sep 2023 12:19:01 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=B0=A8=ED=8A=B8=20=EC=9E=90?=
 =?UTF-8?q?=EB=8F=99=EA=B0=B1=EC=8B=A0=20=EA=B8=B0=EB=8A=A5=20=EB=B3=B4?=
 =?UTF-8?q?=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 서버에서 데이터 갱신되는 주기 맞춰서 클라이언트에서도 신규 API 요청 발생하도록 로직 설정 (현재는 30분 단위로 갱신)
- 프로그램 실행 시 최초 1회 요청 후, 정각 혹은 30분에 맞춰서 10분 단위로 자동으로 API 요청 발생
* 서버 데이터는 30분 마다 갱신되지만, 서버-클라이언트 시간 차이 존재할 가능성과 API 요청 시 오류 발생 가능성 감안하여 10분 주기 호출로 보완함 (필요 시 호출 주기 변경 가능)

Issues #14
---
 client/src/components/CentralChart/Index.tsx  |  2 +-
 .../components/CentralChart/StockChart.tsx    | 13 +++++++--
 client/src/hooks/useGetChart.ts               | 10 +++----
 client/src/hooks/useGetStockData.ts           | 27 ++++++++++++-------
 4 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/client/src/components/CentralChart/Index.tsx b/client/src/components/CentralChart/Index.tsx
index 19a8da90..33406389 100644
--- a/client/src/components/CentralChart/Index.tsx
+++ b/client/src/components/CentralChart/Index.tsx
@@ -11,7 +11,7 @@ const CentralChart = () => {
   return (
     <Container>
       <UpperMenuBar />
-      {companyId === 0 ? <div>코스피 차트</div> : <StockChart />}
+      {companyId !== 0 ? <div>코스피 차트</div> : <StockChart />}
     </Container>
   );
 };
diff --git a/client/src/components/CentralChart/StockChart.tsx b/client/src/components/CentralChart/StockChart.tsx
index f7e9e7cc..ae392268 100644
--- a/client/src/components/CentralChart/StockChart.tsx
+++ b/client/src/components/CentralChart/StockChart.tsx
@@ -9,6 +9,7 @@ const errorText = "화면을 불러올 수 없습니다";
 
 // 🔴test
 import { useState } from "react";
+import axios from "axios";
 
 const StockChart = () => {
   // 🔴test
@@ -22,9 +23,17 @@ const StockChart = () => {
     setParams((state) => state - 1);
   };
 
+  // 코스피 데이터 정렬
+  const testKospi = async () => {
+    const res = await axios.get("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/kospi");
+    const kospi = res.data.output2;
+    return kospi.reverse();
+  };
+
   useEffect(() => {
-    console.log(params);
-  }, [params]);
+    const kospi = testKospi();
+    console.log(kospi);
+  }, []);
   // 테스트
 
   const { isLoading, error } = useGetStockData(params);
diff --git a/client/src/hooks/useGetChart.ts b/client/src/hooks/useGetChart.ts
index 9aa2a342..347ba201 100644
--- a/client/src/hooks/useGetChart.ts
+++ b/client/src/hooks/useGetChart.ts
@@ -15,10 +15,8 @@ const useGetChart = (companyId: number) => {
     xAxis: {
       type: "category",
       data: chartData.map((stock: StockProps) => {
-        // const date = new Date(stock.stck_cntg_hour);
-        const hours = stock.stck_cntg_hour.substring(0, 2);
-        const minutes = stock.stck_cntg_hour.substring(2, 4);
-        const tradeTime = `${hours}:${minutes}`;
+        const date = new Date(stock.stockTradeTime);
+        const tradeTime = `${date.getHours()}시 ${date.getMinutes()}분`;
         return tradeTime;
       }),
     },
@@ -26,8 +24,8 @@ const useGetChart = (companyId: number) => {
       {
         type: "value",
         position: "right",
-        interval: 1000,
-        min: 100000,
+        interval: 100,
+        min: 69700,
       },
     ],
     dataZoom: [
diff --git a/client/src/hooks/useGetStockData.ts b/client/src/hooks/useGetStockData.ts
index d4eaa09f..a097389e 100644
--- a/client/src/hooks/useGetStockData.ts
+++ b/client/src/hooks/useGetStockData.ts
@@ -3,14 +3,21 @@ import { useQuery } from "react-query";
 import axios from "axios";
 
 const useGetStockData = (companyId: number) => {
-  const [refetch, setRefetch] = useState(false);
+  const [autoRefetch, setAutoRefetch] = useState(false);
 
-  // 30분 or 정각여부 체크 함수
+  // 30분 or 정각여부 체크 함수 -> 30분 혹은 정각일 경우 api 1회 수동 요청 + 자동 요청 기능 활성화
   const checkTime = () => {
     const currentTime = new Date();
     const minute = currentTime.getMinutes();
 
-    minute === 0 || minute === 30 ? setRefetch(true) : setRefetch(false);
+    console.log(currentTime);
+    console.log("checkTime 테스트");
+
+    if (minute === 0 || minute === 30) {
+      refetch();
+      setAutoRefetch(true);
+    }
+
     return minute;
   };
 
@@ -28,14 +35,14 @@ const useGetStockData = (companyId: number) => {
     }
   }, []);
 
-  const { data, isLoading, error } = useQuery([`chartData${companyId}`, companyId], () => getChartData(companyId), {
+  const { data, isLoading, error, refetch } = useQuery([`chartData${companyId}`, companyId], () => getChartData(companyId), {
     enabled: true,
-    refetchInterval: refetch && 60000 * 10, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭
+    refetchInterval: autoRefetch && 60000 * 10, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭
     refetchOnMount: true,
-    // onSuccess: () => {
-    //   console.log(new Date());
-    //   console.log(data);
-    // },
+    onSuccess: () => {
+      console.log(new Date());
+      console.log(data);
+    },
   });
 
   return { data, isLoading, error };
@@ -43,7 +50,7 @@ const useGetStockData = (companyId: number) => {
 
 export default useGetStockData;
 
-// 차트 데이터 받아오는 refetch 로직
+// 차트 데이터 받아오는 fetch 로직
 const getChartData = async (companyId: number) => {
   const res = await axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/companies/charts/${companyId}`);
   return res.data;