[Feat] 차트 통신 및 그래피 렌더링 구현

- 서버에서 데이터 패칭 후 차트 그리는 기본 로직 구현
- 최초 렌더링 이후 정각 혹은 30분 마다 API 호출하여 데이터 갱신되도록 로직 구현
- 현재 단일 주식 로직만 구현된 상황으로, 추후 로직 확장 예정

Issues #14

client/package.json

@@ -16,6 +16,7 @@
     "echarts-for-react": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "styled-components": "^6.0.7"

client/src/components/CentralChart/StockChart.tsx

@@ -1,7 +1,25 @@
+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 StockChart = () => {
+  const { data, isLoading, error } = useGetStockData();
+  const { options, chartStyle } = useGetChart();
+
+  useEffect(() => {
+    console.log(data);
+  }, [data]);
+
+  if (isLoading) {
+    return <p>Loading</p>;
+  }
+
+  if (error) {
+    return <p>error</p>;
+  }
+
   return (
     <Container>
       <EChartsReact option={options} style={chartStyle} />
@@ -11,71 +29,6 @@ const StockChart = () => {
 
 export default StockChart;
 
-const options = {
-  xAxis: {
-    type: "category",
-  },
-  yAxis: [
-    {
-      type: "value",
-      position: "right", // 오른쪽에 위치
-    },
-  ],
-  dataZoom: [
-    {
-      type: "inside", // 마우스 스크롤을 통한 줌 인/아웃 지원
-    },
-  ],
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "cross", // 마우스 위치에 눈금 표시
-    },
-  },
-  series: [
-    {
-      name: "주가",
-      type: "candlestick", // 캔들스틱 시리즈
-      data: [
-        [100, 120, 80, 90], // 시가, 종가, 저가, 주가
-        [110, 130, 100, 120],
-        [90, 110, 70, 100],
-        [95, 105, 85, 110],
-        [105, 125, 95, 120],
-        [110, 120, 100, 130],
-        [120, 140, 110, 150],
-        [130, 150, 120, 160],
-        [140, 160, 130, 170],
-        [150, 170, 140, 180],
-        [150, 170, 140, 180],
-        [160, 180, 150, 190],
-        [170, 190, 160, 200],
-        [170, 200, 170, 210],
-        [170, 140, 130, 130],
-        [150, 160, 120, 160],
-        [140, 160, 130, 170],
-        [150, 170, 140, 180],
-        [140, 125, 95, 120],
-        [110, 120, 100, 130],
-        [120, 140, 110, 150],
-        [130, 150, 120, 160],
-        [140, 160, 130, 170],
-        [150, 170, 140, 180],
-        [160, 180, 150, 190],
-        [170, 190, 160, 200],
-        [180, 200, 170, 210],
-        [190, 210, 180, 220],
-      ],
-      yAxisIndex: 0, // 첫 번째 Y 축 사용
-    },
-  ],
-};
-
-const chartStyle = {
-  width: "100%",
-  height: "100%",
-};
-
 const Container = styled.div`
   height: 100%;
   display: flex;

client/src/hooks/useGetChart.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect } from "react";
+import useGetStockData from "./useGetStockData";
+
+const useGetChart = () => {
+  const { data } = useGetStockData();
+  const [chartData, setChartData] = useState([]);
+
+  useEffect(() => {
+    if (data) {
+      setChartData(data);
+    }
+  }, [data]);
+
+  const options = {
+    xAxis: {
+      type: "category",
+      data: chartData.map((stock: StockProps) => {
+        const date = new Date(stock.stockTradeTime);
+        const tradeTime = `${date.getHours()}:${date.getMinutes()}`;
+        return tradeTime;
+      }),
+    },
+    yAxis: [
+      {
+        type: "value",
+        position: "right",
+        interval: 100,
+        min: 70000,
+      },
+    ],
+    dataZoom: [
+      {
+        type: "inside",
+      },
+    ],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+      },
+    },
+    series: [
+      {
+        name: "주가",
+        type: "candlestick",
+        data: chartData.map((stock: StockProps) => {
+          return [stock.stck_oprc, stock.stck_prpr, stock.stck_lwpr, stock.stck_hgpr];
+        }),
+        yAxisIndex: 0,
+      },
+    ],
+  };
+
+  const chartStyle = {
+    width: "100%",
+    height: "100%",
+  };
+
+  return { options, chartStyle };
+};
+
+export default useGetChart;
+
+interface StockProps {
+  stockMinId: number;
+  companyId: number;
+  stockTradeTime: string;
+  stck_cntg_hour: string;
+  stck_prpr: string;
+  stck_oprc: string;
+  stck_hgpr: string;
+  stck_lwpr: string;
+}