[Feat] 종목별 차트 렌더링 기능 구현

- API 요청 시 첨부할 파라미터(companyID)를 전역 상태로 설정하여, 특정 이벤트 발생 시 (ex. 버튼 클릭) 서버에서 특정 종목 주가 데이터 받아오는 로직 구현
- 현재 임시버튼 통해서 테스트한 상황이며, 추후 타 컴포넌트 및 상단 검색바 통해 기능 연결할 예정
- 이외에 최초 접속 시 코스피 지수 차트 보여줄 수 있도록 구현할 예정

Issues #14

client/.eslintrc.cjs

@@ -1,18 +1,11 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
   },
-}
+};

client/src/components/CentralChart/Index.tsx

@@ -1,13 +1,17 @@
+import { useSelector } from "react-redux";
 import { styled } from "styled-components";
+import { StateProps } from "../../models/stateProps";
 
 import UpperMenuBar from "../CentralChartMenu/Index";
 import StockChart from "./StockChart";
 
 const CentralChart = () => {
+  const companyId = useSelector((state: StateProps) => state.companyId);
+
   return (
     <Container>
       <UpperMenuBar />
-      <StockChart />
+      {companyId === 0 ? <div>코스피 차트</div> : <StockChart />}
     </Container>
   );
 };

client/src/components/CentralChart/StockChart.tsx

@@ -1,4 +1,4 @@
-// import { useEffect } from "react";
+import { useEffect } from "react";
 import { styled } from "styled-components";
 import EChartsReact from "echarts-for-react";
 import useGetStockData from "../../hooks/useGetStockData";
@@ -7,9 +7,28 @@ import useGetChart from "../../hooks/useGetChart";
 const loadingText = "로딩 중 입니다...";
 const errorText = "화면을 불러올 수 없습니다";
 
+// 🔴test
+import { useState } from "react";
+
 const StockChart = () => {
-  const { isLoading, error } = useGetStockData();
-  const { options, chartStyle } = useGetChart();
+  // 🔴test
+  const [params, setParams] = useState(1);
+
+  const handlePlus = () => {
+    setParams((state) => state + 1);
+  };
+
+  const handleMinus = () => {
+    setParams((state) => state - 1);
+  };
+
+  useEffect(() => {
+    console.log(params);
+  }, [params]);
+  // 테스트
+
+  const { isLoading, error } = useGetStockData(params);
+  const { options, chartStyle } = useGetChart(params);
 
   if (isLoading) {
     return <LoadingContainer>{loadingText}</LoadingContainer>;
@@ -21,6 +40,8 @@ const StockChart = () => {
 
   return (
     <Container>
+      <button onClick={handlePlus}>플러스 버튼</button>
+      <button onClick={handleMinus}>마이너스 버튼</button>
       <EChartsReact option={options} style={chartStyle} />
     </Container>
   );

client/src/hooks/useGetChart.ts

@@ -1,15 +1,15 @@
 import { useState, useEffect } from "react";
 import useGetStockData from "./useGetStockData";
 
-const useGetChart = () => {
-  const { data } = useGetStockData();
+const useGetChart = (companyId: number) => {
+  const { data } = useGetStockData(companyId);
   const [chartData, setChartData] = useState([]);
 
   useEffect(() => {
     if (data) {
       setChartData(data);
     }
-  }, [data]);
+  }, [data, companyId]);
 
   const options = {
     xAxis: {
@@ -26,8 +26,8 @@ const useGetChart = () => {
       {
         type: "value",
         position: "right",
-        interval: 100,
-        min: 70000,
+        interval: 1000,
+        min: 100000,
       },
     ],
     dataZoom: [

client/src/hooks/useGetStockData.ts

@@ -2,15 +2,15 @@ import { useState, useEffect } from "react";
 import { useQuery } from "react-query";
 import axios from "axios";
 
-const useGetStockData = () => {
-  const [fetching, setFetching] = useState(true);
+const useGetStockData = (companyId: number) => {
+  const [refetch, setRefetch] = useState(false);
 
   // 30분 or 정각여부 체크 함수
   const checkTime = () => {
     const currentTime = new Date();
     const minute = currentTime.getMinutes();
 
-    minute === 0 || minute === 30 ? setFetching(true) : setFetching(false);
+    minute === 0 || minute === 30 ? setRefetch(true) : setRefetch(false);
     return minute;
   };
 
@@ -28,25 +28,23 @@ const useGetStockData = () => {
     }
   }, []);
 
-  // 30분 정각이 될경우 서버 데이터 호출 + 30분 마다 데이터 갱신
-  const { data, isLoading, error } = useQuery("chartData", getChartData, {
-    enabled: fetching,
-    // refetchInterval: 60000 * 30,
-    refetchInterval: 60000 * 10, // 10분에 한번씩 재호출
+  const { data, isLoading, error } = useQuery([`chartData${companyId}`, companyId], () => getChartData(companyId), {
+    enabled: true,
+    refetchInterval: refetch && 60000 * 10, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭
     refetchOnMount: true,
-    onSuccess: () => {
-      console.log(new Date());
-      console.log(data);
-    },
+    // onSuccess: () => {
+    //   console.log(new Date());
+    //   console.log(data);
+    // },
   });
 
   return { data, isLoading, error };
 };
 
 export default useGetStockData;
 
-// 차트 데이터 받아오는 fetching 로직
-const getChartData = async () => {
-  const res = await axios.get("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/companies/charts/1");
+// 차트 데이터 받아오는 refetch 로직
+const getChartData = async (companyId: number) => {
+  const res = await axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/companies/charts/${companyId}`);
   return res.data;
 };

client/src/models/stateProps.ts

@@ -4,4 +4,5 @@ export interface StateProps {
   stockOrderPrice: number;
   expandScreen: { left: boolean; right: boolean };
   stockOrderSet: boolean;
+  companyId: number;
 }

client/src/page/MainPage.tsx

@@ -17,6 +17,7 @@ import StockOrderSection from "../components/StockOrderSection/Index";
 import { StateProps } from "../models/stateProps";
 
 import { TabContainerPage } from "./TabPages/TabContainerPage";
+
 const MainPage = () => {
   const expandScreen = useSelector((state: StateProps) => state.expandScreen);
 

client/src/reducer/CompanyId-Reducer.ts

@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState: number = 0;
+
+const companyIdSlice = createSlice({
+  name: "companyId",
+  initialState: initialState,
+  reducers: {
+    changeCompanyId: (state, action) => {
+      state = action.payload;
+      return state;
+    },
+  },
+});
+
+export const { changeCompanyId } = companyIdSlice.actions;
+export const companyIdReducer = companyIdSlice.reducer;

client/src/store/config.ts

@@ -4,6 +4,7 @@ import { stockPriceTypeReducer } from "../reducer/StockPriceType-Reducer";
 import { stockOrderPriceReducer } from "../reducer/StockOrderPrice-Reducer";
 import { expandScreenReducer } from "../reducer/ExpandScreen-Reducer";
 import { stockOrderSetReducer } from "../reducer/StockOrderSet-Reducer";
+import { companyIdReducer } from "../reducer/CompanyId-Reducer";
 
 const store = configureStore({
   reducer: {
@@ -12,6 +13,7 @@ const store = configureStore({
     stockOrderPrice: stockOrderPriceReducer,
     expandScreen: expandScreenReducer,
     stockOrderSet: stockOrderSetReducer,
+    companyId: companyIdReducer,
   },
 });