[Feat] API 요청 주기 수정

- 기존 : 정각/30분에 맞춰서 단일 주가데이터 API 요청 후 30분 주기로 신규 API 요청
- 변경 : 10분 주기로 신규 API 요청
- 변경 사유 : 서버 시간 - 클라이언트 시간 불일치 혹은 API 호출 시 오차 발생으로 인한 데이터 불일치 (서버는 갱신 되었으나, 클라이언트는 갱신 X) 예방 차원에서 API 호출 주기를 더 짧게설정

- 이외 변경 사항 : Loading Indicator, Error Indicator 관련하여 CSS 일부 수정

Issues #14

client/src/components/CentralChart/StockChart.tsx

@@ -1,23 +1,22 @@
-import { useEffect } from "react";
+// import { useEffect } from "react";
 import { styled } from "styled-components";
 import EChartsReact from "echarts-for-react";
 import useGetStockData from "../../hooks/useGetStockData";
 import useGetChart from "../../hooks/useGetChart";
 
+const loadingText = "로딩 중 입니다...";
+const errorText = "화면을 불러올 수 없습니다";
+
 const StockChart = () => {
-  const { data, isLoading, error } = useGetStockData();
+  const { isLoading, error } = useGetStockData();
   const { options, chartStyle } = useGetChart();
 
-  useEffect(() => {
-    console.log(data);
-  }, [data]);
-
   if (isLoading) {
-    return <p>Loading</p>;
+    return <LoadingContainer>{loadingText}</LoadingContainer>;
   }
 
   if (error) {
-    return <p>error</p>;
+    return <ErrorContainer>{errorText}</ErrorContainer>;
   }
 
   return (
@@ -36,3 +35,17 @@ const Container = styled.div`
   justify-content: center;
   align-items: center;
 `;
+
+const LoadingContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 20px;
+  font-weight: 500;
+  color: #999999;
+`;
+
+const ErrorContainer = styled(LoadingContainer)``;

client/src/hooks/useGetChart.ts

@@ -15,8 +15,10 @@ const useGetChart = () => {
     xAxis: {
       type: "category",
       data: chartData.map((stock: StockProps) => {
-        const date = new Date(stock.stockTradeTime);
-        const tradeTime = `${date.getHours()}:${date.getMinutes()}`;
+        // 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}`;
         return tradeTime;
       }),
     },

client/src/hooks/useGetStockData.ts

@@ -10,7 +10,7 @@ const useGetStockData = () => {
     const currentTime = new Date();
     const minute = currentTime.getMinutes();
 
-    (minute === 0 || minute === 30) && setFetching(false);
+    minute === 0 || minute === 30 ? setFetching(true) : setFetching(false);
     return minute;
   };
 
@@ -31,8 +31,13 @@ const useGetStockData = () => {
   // 30분 정각이 될경우 서버 데이터 호출 + 30분 마다 데이터 갱신
   const { data, isLoading, error } = useQuery("chartData", getChartData, {
     enabled: fetching,
-    refetchInterval: 60000 * 30,
+    // refetchInterval: 60000 * 30,
+    refetchInterval: 60000 * 10, // 10분에 한번씩 재호출
     refetchOnMount: true,
+    onSuccess: () => {
+      console.log(new Date());
+      console.log(data);
+    },
   });
 
   return { data, isLoading, error };