From a40a7f1203c8fe3f4e0da1926014bce6b2068af2 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Wed, 6 Sep 2023 03:33:13 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A2=85=EB=AA=A9=EB=B3=84=20?= =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - API 요청 시 첨부할 파라미터(companyID)를 전역 상태로 설정하여, 특정 이벤트 발생 시 (ex. 버튼 클릭) 서버에서 특정 종목 주가 데이터 받아오는 로직 구현 - 현재 임시버튼 통해서 테스트한 상황이며, 추후 타 컴포넌트 및 상단 검색바 통해 기능 연결할 예정 - 이외에 최초 접속 시 코스피 지수 차트 보여줄 수 있도록 구현할 예정 Issues #14 --- client/.eslintrc.cjs | 19 ++++--------- client/src/components/CentralChart/Index.tsx | 6 +++- .../components/CentralChart/StockChart.tsx | 27 ++++++++++++++++-- client/src/hooks/useGetChart.ts | 10 +++---- client/src/hooks/useGetStockData.ts | 28 +++++++++---------- client/src/models/stateProps.ts | 1 + client/src/page/MainPage.tsx | 1 + client/src/reducer/CompanyId-Reducer.ts | 17 +++++++++++ client/src/store/config.ts | 2 ++ 9 files changed, 74 insertions(+), 37 deletions(-) create mode 100644 client/src/reducer/CompanyId-Reducer.ts 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, }, });