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,
},
});