diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs index d6c95379..78174f68 100644 --- a/client/.eslintrc.cjs +++ b/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 }], }, -} +}; diff --git a/client/src/components/CentralChart/Index.tsx b/client/src/components/CentralChart/Index.tsx index b97ea7af..19a8da90 100644 --- a/client/src/components/CentralChart/Index.tsx +++ b/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 ( - + {companyId === 0 ?
코스피 차트
: }
); }; diff --git a/client/src/components/CentralChart/StockChart.tsx b/client/src/components/CentralChart/StockChart.tsx index b11411ea..f7e9e7cc 100644 --- a/client/src/components/CentralChart/StockChart.tsx +++ b/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 {loadingText}; @@ -21,6 +40,8 @@ const StockChart = () => { return ( + + ); diff --git a/client/src/hooks/useGetChart.ts b/client/src/hooks/useGetChart.ts index 7c0dbc7f..9aa2a342 100644 --- a/client/src/hooks/useGetChart.ts +++ b/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: [ diff --git a/client/src/hooks/useGetStockData.ts b/client/src/hooks/useGetStockData.ts index fa347c5a..d4eaa09f 100644 --- a/client/src/hooks/useGetStockData.ts +++ b/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,16 +28,14 @@ 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 }; @@ -45,8 +43,8 @@ const useGetStockData = () => { 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; }; diff --git a/client/src/models/stateProps.ts b/client/src/models/stateProps.ts index e9c49a5b..56d3fca1 100644 --- a/client/src/models/stateProps.ts +++ b/client/src/models/stateProps.ts @@ -4,4 +4,5 @@ export interface StateProps { stockOrderPrice: number; expandScreen: { left: boolean; right: boolean }; stockOrderSet: boolean; + companyId: number; } diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx index c62a047f..b96dd4cf 100644 --- a/client/src/page/MainPage.tsx +++ b/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); diff --git a/client/src/reducer/CompanyId-Reducer.ts b/client/src/reducer/CompanyId-Reducer.ts new file mode 100644 index 00000000..c811f963 --- /dev/null +++ b/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; diff --git a/client/src/store/config.ts b/client/src/store/config.ts index 2c2e91ce..5a3b3d55 100644 --- a/client/src/store/config.ts +++ b/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, }, });