[Feat] 비교차트 종목명 렌더링 기능 추가

- 비교차트 종목명이 함께 렌더링 되도록 기능 추가 Issues #14
codestates-seb · Sep 18, 2023 · 0c9f76d · 0c9f76d
1 parent 8e25c69
commit 0c9f76d
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/client/src/hooks/useGetStockChart.tsx b/client/src/hooks/useGetStockChart.tsx
@@ -19,20 +19,22 @@ const useGetStockChart = (companyId: number) => {
   const [corpName, setCorpName] = useState("");
 
   // 비교차트 설정 (10일 기준, 이동 평균선)
+  const [compareName, setCompareName] = useState("");
   const [compareChart, setCompare] = useState<any>(undefined);
   const compareId = useSelector((state: StateProps) => state.compareChart);
+  const { stockInfo: compareInfo } = useGetStockInfo(compareId);
 
   const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies/charts/";
   const averageDay = 10;
 
-  const getCompareChart = async (compareId: number) => {
+  const getCompareChart = async (compareId: number, compareName: strign) => {
     const response = await axios.get(`${url}${compareId}`);
     const data = await response.data;
 
     const compareChartData = organizeData(data);
     const compareMovingAvgData = calculateMovingAvgLine(averageDay, compareChartData);
     const compareMovingAvgChart = {
-      name: "비교차트",
+      name: `${compareName}`,
       type: "line",
       data: compareMovingAvgData,
       smooth: true,
@@ -46,15 +48,23 @@ const useGetStockChart = (companyId: number) => {
     setCompare(compareMovingAvgChart);
   };
 
+  useEffect(() => {
+    if (compareInfo && compareId !== null) {
+      const compareStockName = compareInfo.korName;
+      console.log(compareStockName);
+      setCompareName(compareStockName);
+    }
+  }, [compareInfo]);
+
   useEffect(() => {
     if (compareId !== null) {
-      getCompareChart(compareId);
+      getCompareChart(compareId, compareName);
     }
 
     if (companyId === null) {
       setCompare(undefined);
     }
-  }, [compareId]);
+  }, [compareId, compareName]);
 
   useEffect(() => {
     if (stockPrice && stockInfo) {
@@ -72,7 +82,7 @@ const useGetStockChart = (companyId: number) => {
       top: 10,
       left: "left",
       padding: [4, 0, 0, 15],
-      data: [`주가`, `거래량`, `이동평균선 (${averageLineMinute}분)`, compareChart !== undefined && "비교차트"],
+      data: [`주가`, `거래량`, `이동평균선 (${averageLineMinute}분)`, compareChart !== undefined && `${compareName}`],
     },
     tooltip: {
       trigger: "axis",