Merge pull request #52 from codestates-seb/dev-client#14/chartGraph

[FE] #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,24 @@
+// 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 { isLoading, error } = useGetStockData();
+  const { options, chartStyle } = useGetChart();
+
+  if (isLoading) {
+    return <LoadingContainer>{loadingText}</LoadingContainer>;
+  }
+
+  if (error) {
+    return <ErrorContainer>{errorText}</ErrorContainer>;
+  }
+
   return (
     <Container>
       <EChartsReact option={options} style={chartStyle} />
@@ -11,75 +28,24 @@ 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;
   flex-direction: column;
   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

@@ -0,0 +1,75 @@
+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.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;
+      }),
+    },
+    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;
+}