From 8dd73e906cb8a8b8b33ffb227f391ab3aa31a43f Mon Sep 17 00:00:00 2001 From: novice1993 Date: Thu, 7 Sep 2023 02:16:56 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A4=91=EC=95=99=20=EC=B0=A8?= =?UTF-8?q?=ED=8A=B8=20=EC=83=81=EB=8B=A8=20=EC=A3=BC=EC=8B=9D=EA=B0=9C?= =?UTF-8?q?=EC=9A=94=20=EA=B0=B1=EC=8B=A0=EA=B4=80=EB=A0=A8=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 중앙 차트 상단 주식개요 관련 갱신 로직 구현 - 특정 종목 선택 혹은 검색 시 주가 차트와 함께 상단 개요 항목도 변경되도록 로직 구현 - 일부 예외처리 및 CSS 디자인 추가 구현 예정 Issues #14 --- .../components/CentralChart/StockChart.tsx | 5 + .../src/components/CentralChartMenu/Index.tsx | 18 ++- .../CentralChartMenu/StockOverview.tsx | 121 +++++++++++++++++- client/src/hooks/useGetKospiChart.ts | 11 +- client/src/hooks/useGetStockChart.ts | 9 ++ client/src/hooks/useGetStockInfo.ts | 59 +++++++++ 6 files changed, 211 insertions(+), 12 deletions(-) create mode 100644 client/src/hooks/useGetStockInfo.ts diff --git a/client/src/components/CentralChart/StockChart.tsx b/client/src/components/CentralChart/StockChart.tsx index c457741f..d7e91ed3 100644 --- a/client/src/components/CentralChart/StockChart.tsx +++ b/client/src/components/CentralChart/StockChart.tsx @@ -66,6 +66,10 @@ const StockChart = () => { dispatch(changeCompanyId(0)); }; + const handlePlus = () => { + dispatch(changeCompanyId(companyId + 1)); + }; + const handleStock1 = () => { dispatch(changeCompanyId(1)); }; @@ -92,6 +96,7 @@ const StockChart = () => { + {/* 🔴 차트 변경 이벤트 테스트 */} diff --git a/client/src/components/CentralChartMenu/Index.tsx b/client/src/components/CentralChartMenu/Index.tsx index a93705f7..fe8d23f2 100644 --- a/client/src/components/CentralChartMenu/Index.tsx +++ b/client/src/components/CentralChartMenu/Index.tsx @@ -1,4 +1,6 @@ +import { useSelector } from "react-redux"; import { styled } from "styled-components"; +import { StateProps } from "../../models/stateProps"; import ExpandScreenBtn from "./ExpandScreenBtn"; import StockOverview from "./StockOverview"; @@ -8,14 +10,22 @@ import CompareChartBtn from "./CompareChartBtn"; import ChangeChartCycleBtn from "./ChangeChartCycleBtn"; const UpperMenuBar = () => { + const companyId = useSelector((state: StateProps) => state.companyId); + return (
- - - - + {companyId === 0 ? ( +
구현 예정
+ ) : ( + <> + + + + + + )}
diff --git a/client/src/components/CentralChartMenu/StockOverview.tsx b/client/src/components/CentralChartMenu/StockOverview.tsx index 23fa392e..6464cda8 100644 --- a/client/src/components/CentralChartMenu/StockOverview.tsx +++ b/client/src/components/CentralChartMenu/StockOverview.tsx @@ -1,4 +1,8 @@ +import { useState, useEffect } from "react"; +import { useSelector } from "react-redux"; import { styled } from "styled-components"; +import useGetStockInfo from "../../hooks/useGetStockInfo"; +import { StateProps } from "../../models/stateProps"; // dummyData import { dummyData } from "./dummyData"; @@ -9,23 +13,41 @@ const valueText: string = "거래대금"; // styled-component 수정 및 미디어 쿼리 적용 const StockOverview = () => { + const [stockInfo, setStockInfo] = useState(inintialState); + const companyId = useSelector((state: StateProps) => state.companyId); + const { data, isLoading, error } = useGetStockInfo(companyId); + + useEffect(() => { + if (data) { + setStockInfo(data); + } + }, [data]); + + if (isLoading) { + return

로딩 중 입니다

; + } + + if (error) { + return

에러 발생

; + } + return ( -
{dummyData.corpName}
+
{stockInfo.korName}
- {dummyData.stockCode} {marketType} + {stockInfo.code} {marketType}
-
{dummyData.stockPrice}
-
{dummyData.changeRate}
-
{dummyData.changeAmount}
+
{stockInfo.stockInfResponseDto.stck_prpr}
+
{stockInfo.stockInfResponseDto.prdy_vrss}
+
{stockInfo.stockInfResponseDto.prdy_ctrt}
{volumeText} - {dummyData.totalVolume} + {stockInfo.stockInfResponseDto.acml_vol} {valueText} - {dummyData.totalValue} + {stockInfo.stockInfResponseDto.acml_tr_pbmn} ); @@ -33,6 +55,91 @@ const StockOverview = () => { export default StockOverview; +// 상태 초기값 +const inintialState = { + companyId: 0, + code: "", + korName: "", + stockAsBiResponseDto: { + stockAsBiId: 0, + companyId: 0, + askp1: "", + askp2: "", + askp3: "", + askp4: "", + askp5: "", + askp_rsqn1: "", + askp_rsqn2: "", + askp_rsqn3: "", + askp_rsqn4: "", + askp_rsqn5: "", + bidp1: "", + bidp2: "", + bidp3: "", + bidp4: "", + bidp5: "", + bidp_rsqn1: "", + bidp_rsqn2: "", + bidp_rsqn3: "", + bidp_rsqn4: "", + bidp_rsqn5: "", + }, + stockInfResponseDto: { + stockInfId: 0, + companyId: 0, + stck_prpr: "", + prdy_vrss: "", + prdy_ctrt: "", + acml_vol: "", + acml_tr_pbmn: "", + }, +}; + +// type 정의 +interface StockOverviewProps { + companyId: number; + code: string; + korName: string; + stockAsBiResponseDto: StockPriceProps; + stockInfResponseDto: StockInfoProps; +} + +interface StockPriceProps { + stockAsBiId: number; + companyId: number; + askp1: string; + askp2: string; + askp3: string; + askp4: string; + askp5: string; + askp_rsqn1: string; + askp_rsqn2: string; + askp_rsqn3: string; + askp_rsqn4: string; + askp_rsqn5: string; + bidp1: string; + bidp2: string; + bidp3: string; + bidp4: string; + bidp5: string; + bidp_rsqn1: string; + bidp_rsqn2: string; + bidp_rsqn3: string; + bidp_rsqn4: string; + bidp_rsqn5: string; +} + +interface StockInfoProps { + stockInfId: number; + companyId: number; + stck_prpr: string; + prdy_vrss: string; + prdy_ctrt: string; + acml_vol: string; + acml_tr_pbmn: string; +} + +// component 생성 const Container = styled.div` flex: 7 0 0; overflow-x: scroll; diff --git a/client/src/hooks/useGetKospiChart.ts b/client/src/hooks/useGetKospiChart.ts index 7bc58862..84b80c98 100644 --- a/client/src/hooks/useGetKospiChart.ts +++ b/client/src/hooks/useGetKospiChart.ts @@ -27,8 +27,11 @@ const useGetKospiChart = () => { { type: "value", position: "right", - interval: 100, + interval: 50, min: 2000, + splitLine: { + show: false, + }, }, ], dataZoom: [ @@ -52,6 +55,12 @@ const useGetKospiChart = () => { yAxisIndex: 0, }, ], + grid: { + left: "3%", + right: "7%", + top: "3%", + bottom: "5%", + }, }; const chartStyle = { diff --git a/client/src/hooks/useGetStockChart.ts b/client/src/hooks/useGetStockChart.ts index 67935cc2..551cc560 100644 --- a/client/src/hooks/useGetStockChart.ts +++ b/client/src/hooks/useGetStockChart.ts @@ -33,6 +33,9 @@ const useGetStockChart = (companyId: number) => { position: "right", interval: yAxisInterval, min: yAxisMinPrice, + splitLine: { + show: false, + }, }, ], dataZoom: [ @@ -56,6 +59,12 @@ const useGetStockChart = (companyId: number) => { yAxisIndex: 0, }, ], + grid: { + left: "3%", + right: "7%", + top: "3%", + bottom: "5%", + }, }; const chartStyle = { diff --git a/client/src/hooks/useGetStockInfo.ts b/client/src/hooks/useGetStockInfo.ts new file mode 100644 index 00000000..e4acedf5 --- /dev/null +++ b/client/src/hooks/useGetStockInfo.ts @@ -0,0 +1,59 @@ +import { useQuery } from "react-query"; +import axios from "axios"; + +const useGetStockInfo = (companyId: number) => { + const { data, isLoading, error } = useQuery(`stockInfo${companyId}`, () => getStockInfo(companyId), {}); + + return { data, isLoading, error }; +}; + +const getStockInfo = async (companyId: number) => { + const res = await axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies/${companyId}`); + const stockInfo = res.data; + return stockInfo; +}; + +export default useGetStockInfo; + +interface StockOverviewProps { + companyId: number; + code: string; + korName: string; + stockAsBiResponseDto: StockPriceProps; + stockInfResponseDto: StockInfoProps; +} + +interface StockPriceProps { + stockAsBiId: number; + companyId: number; + askp1: string; + askp2: string; + askp3: string; + askp4: string; + askp5: string; + askp_rsqn1: string; + askp_rsqn2: string; + askp_rsqn3: string; + askp_rsqn4: string; + askp_rsqn5: string; + bidp1: string; + bidp2: string; + bidp3: string; + bidp4: string; + bidp5: string; + bidp_rsqn1: string; + bidp_rsqn2: string; + bidp_rsqn3: string; + bidp_rsqn4: string; + bidp_rsqn5: string; +} + +interface StockInfoProps { + stockInfId: number; + companyId: number; + stck_prpr: string; + prdy_vrss: string; + prdy_ctrt: string; + acml_vol: string; + acml_tr_pbmn: string; +}