[Design] 주가/거래량 차트 커스터마이징

- 중앙 차트 (주가/거래량) 차트 커스터마이징

Issues #14

client/src/hooks/useGetStockChart.ts

@@ -1,50 +1,70 @@
 import { useState, useEffect } from "react";
 import useGetStockData from "./useGetStockData";
+import useGetStockInfo from "./useGetStockInfo";
 
 // 색상
 const upColor = "rgba(198, 6, 6, 0.37)";
 const downColor = "rgba(59, 119, 247, 0.51)";
 const volumColor = "rgba(57, 118, 249, 0.56)";
 const pointerColor = "#cc3c3a";
 const indexColor = "#4479c2";
+// const indexColor = "#cc3c3a";
 
 const useGetStockChart = (companyId: number) => {
   const { stockPrice } = useGetStockData(companyId);
+  const { stockInfo } = useGetStockInfo(companyId);
   const [chartData, setChartData] = useState<StockProps[]>([]);
+  const [corpName, setCorpName] = useState("");
 
   useEffect(() => {
-    if (stockPrice) {
+    if (stockPrice && stockInfo) {
       setChartData(stockPrice);
+      setCorpName(stockInfo.korName);
     }
-  }, [stockPrice]);
+  }, [stockPrice, stockInfo]);
 
   // 🔴 테스트
   const organizeData = (rawData: StockProps[]) => {
+    const tooltipTitle = [];
     const time = [];
     const values = [];
     const volumes = [];
 
     for (let i = 0; i < rawData.length; i++) {
       // 날짜
       const date = new Date(rawData[i].stockTradeTime);
+      console.log(date);
+
+      // 2) 1축 날짜
       const hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
       const minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
       const priceTime = `${hour}:${minute}`;
       time.push(priceTime);
 
+      // 2) 툴팁 날짜
+      const dayList = ["일", "월", "화", "수", "목", "금", "토"];
+
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
+      const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+      const dayOfWeek = dayList[date.getDay()];
+      const tooltipDay = `${year}.${month}.${day}(${dayOfWeek}) ${priceTime}`;
+      tooltipTitle.push(tooltipDay);
+
       // 주가
-      const openPrice = rawData[i].stck_oprc;
-      const closePrice = rawData[i].stck_prpr;
-      const lowestPrice = rawData[i].stck_lwpr;
-      const highestPrice = rawData[i].stck_hgpr;
+      const openPrice = parseInt(rawData[i].stck_oprc);
+      const closePrice = parseInt(rawData[i].stck_prpr);
+      const lowestPrice = parseInt(rawData[i].stck_lwpr);
+      const highestPrice = parseInt(rawData[i].stck_hgpr);
       values.push([openPrice, closePrice, lowestPrice, highestPrice]);
 
       // 거래량
-      const volume = rawData[i].cntg_vol;
+      const volume = parseInt(rawData[i].cntg_vol);
       const priceChange = openPrice < closePrice ? 1 : -1;
       volumes.push([i, volume, priceChange]);
     }
     return {
+      tooltipTitle: tooltipTitle,
       time: time,
       values: values,
       volumes: volumes,
@@ -60,6 +80,30 @@ const useGetStockChart = (companyId: number) => {
       axisPointer: {
         type: "cross",
       },
+      formatter: (params: any) => {
+        const dataIndex = params[0]?.dataIndex || 0;
+
+        const date = organizedChartData.tooltipTitle[dataIndex];
+        const dataPoint = organizedChartData.values[dataIndex];
+        const openPrice = dataPoint[0].toLocaleString();
+        const closePrice = dataPoint[1].toLocaleString();
+        const highPrice = dataPoint[2].toLocaleString();
+        const lowPrice = dataPoint[3].toLocaleString();
+        const volume = organizedChartData.volumes[dataIndex][1].toLocaleString();
+
+        // 툴팁 내용을 원하는 형식으로 조합
+        const tooltipContent = `
+          ${date}<br/><br/>
+          📈 ${corpName}<br/>
+          • 시가 ${openPrice} 원<br/>
+          • 종가 ${closePrice} 원<br/>
+          • 고가 ${highPrice} 원<br/>
+          • 저가 ${lowPrice} 원<br/>
+          • 거래량 ${volume} 주<br/>
+        `;
+
+        return tooltipContent;
+      },
       borderWidth: 1,
       borderColor: "#ccc",
       padding: 10,
@@ -231,7 +275,7 @@ const useGetStockChart = (companyId: number) => {
     ],
     series: [
       {
-        name: "Dow-Jones index",
+        name: `${corpName} 주가`,
         type: "candlestick",
         data: organizedChartData.values,
         itemStyle: {
@@ -243,7 +287,7 @@ const useGetStockChart = (companyId: number) => {
         yAxisIndex: 0,
       },
       {
-        name: "Volume",
+        name: "거래량",
         type: "bar",
         xAxisIndex: 1,
         data: organizedChartData.volumes,