[Feat] 차트 자동갱신 기능 보완

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

Issues #14

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

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

client/src/hooks/useGetChart.ts

@@ -15,19 +15,17 @@ 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;
       }),
     },
     yAxis: [
       {
         type: "value",
         position: "right",
-        interval: 1000,
-        min: 100000,
+        interval: 100,
+        min: 69700,
       },
     ],
     dataZoom: [

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,22 +35,22 @@ 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 };
 };
 
 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;