[Feat] 종목 차트 및 개요 데이터 통신 관련 로직 수정

- QueryKey가 동일하여 이전에 조회한 종목의 경우 새롭게 데이터 fetching을 해오지 못하던 문제 해결
- 데이터를 받아오는 시간대를 기준으로 queryKey를 동적으로 생성하여 이전에 조회한 종목이라 하더라도, 서버 데이터 갱신에 맞춰서 fetching 가능하도록 로직 수정

Issues #14

client/src/hooks/useGetStockData.ts

@@ -5,13 +5,28 @@ import axios from "axios";
 const useGetStockData = (companyId: number) => {
   const [autoRefetch, setAutoRefetch] = useState(false);
 
+  // 시간대별로 queryKey 다르게 적용
+  const month = new Date().getMonth();
+  const day = new Date().getDay();
+  const hour = new Date().getHours();
+  let timeZone;
+  const queryKey = `${month}월 ${day}일 ${hour}시 ${timeZone}`;
+
   // 30분 or 정각여부 체크 함수 -> 30분 혹은 정각일 경우 api 1회 수동 요청 + 자동 요청 기능 활성화
   const checkTime = () => {
     const currentTime = new Date();
     const minute = currentTime.getMinutes();
 
+    if (0 < minute && minute < 30) {
+      timeZone = "01~29";
+    }
+
+    if (30 < minute && minute < 60) {
+      timeZone = "31~59";
+    }
+
     if (minute === 0 || minute === 30) {
-      refetch();
+      timeZone = "30 or 60";
       setAutoRefetch(true);
     }
 
@@ -32,10 +47,13 @@ const useGetStockData = (companyId: number) => {
     }
   }, []);
 
-  const { data, isLoading, error, refetch } = useQuery([`chartData${companyId}`, companyId], () => getChartData(companyId), {
+  const { data, isLoading, error } = useQuery(`chartData${companyId} ${queryKey}`, () => getChartData(companyId), {
     enabled: true,
     refetchInterval: autoRefetch && 60000 * 10, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭
     refetchOnMount: true,
+    onSuccess: () => {
+      console.log(data);
+    },
   });
 
   return { data, isLoading, error };

client/src/hooks/useGetStockInfo.ts

@@ -5,13 +5,28 @@ import axios from "axios";
 const useGetStockInfo = (companyId: number) => {
   const [autoRefetch, setAutoRefetch] = useState(false);
 
+  // 시간대별로 queryKey 다르게 적용
+  const month = new Date().getMonth();
+  const day = new Date().getDay();
+  const hour = new Date().getHours();
+  let queryKeyNum;
+  const queryKey = `${month}월 ${day}일 ${hour}시 ${queryKeyNum}`;
+
   // 30분 or 정각여부 체크 함수 -> 30분 혹은 정각일 경우 api 1회 수동 요청 + 자동 요청 기능 활성화
   const checkTime = () => {
     const currentTime = new Date();
     const minute = currentTime.getMinutes();
 
+    if (0 < minute && minute < 30) {
+      queryKeyNum = "01~29";
+    }
+
+    if (30 < minute && minute < 60) {
+      queryKeyNum = "31~59";
+    }
+
     if (minute === 0 || minute === 30) {
-      refetch();
+      queryKeyNum = "30 or 60";
       setAutoRefetch(true);
     }
 
@@ -32,7 +47,7 @@ const useGetStockInfo = (companyId: number) => {
     }
   }, []);
 
-  const { data, isLoading, error, refetch } = useQuery(`stockInfo${companyId}`, () => getStockInfo(companyId), {
+  const { data, isLoading, error } = useQuery(`stockInfo${companyId} ${queryKey}}`, () => getStockInfo(companyId), {
     enabled: true,
     refetchInterval: autoRefetch && 60000 * 10, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭
     refetchOnMount: true,