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 = () => { <button onClick={handleSearchCompany}>검색</button> </label> <button onClick={handleKospi}>코스피 버튼</button> + <button onClick={handlePlus}>CompanyId +1</button> <button onClick={handleStock1}>1번 주식 버튼</button> <button onClick={handleStock10}>10번 주식 버튼</button> {/* 🔴 차트 변경 이벤트 테스트 */} 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 ( <Container> <div className="FirstLine"> <ExpandScreenBtn direction="left" /> - <StockOverview /> - <BookmarkBtn /> - <StockOrderBtn type="buying" /> - <StockOrderBtn type="selling" /> + {companyId === 0 ? ( + <div>구현 예정</div> + ) : ( + <> + <StockOverview /> + <BookmarkBtn /> + <StockOrderBtn type="buying" /> + <StockOrderBtn type="selling" /> + </> + )} <ExpandScreenBtn direction="right" /> </div> <div className="SecondLine"> 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<StockOverviewProps>(inintialState); + const companyId = useSelector((state: StateProps) => state.companyId); + const { data, isLoading, error } = useGetStockInfo(companyId); + + useEffect(() => { + if (data) { + setStockInfo(data); + } + }, [data]); + + if (isLoading) { + return <p>로딩 중 입니다</p>; + } + + if (error) { + return <p>에러 발생</p>; + } + return ( <Container> <img className="CorpLogo" src={dummyData.corpLogo} /> - <div className="CorpName">{dummyData.corpName}</div> + <div className="CorpName">{stockInfo.korName}</div> <div className="StockCode"> - {dummyData.stockCode} <span>{marketType}</span> + {stockInfo.code} <span>{marketType}</span> </div> - <div className="StockPrice">{dummyData.stockPrice}</div> - <div className="PriceChangeRate">{dummyData.changeRate}</div> - <div className="PriceChangeAmount">{dummyData.changeAmount}</div> + <div className="StockPrice">{stockInfo.stockInfResponseDto.stck_prpr}</div> + <div className="PriceChangeRate">{stockInfo.stockInfResponseDto.prdy_vrss}</div> + <div className="PriceChangeAmount">{stockInfo.stockInfResponseDto.prdy_ctrt}</div> <TransactionVolume> <span>{volumeText}</span> - {dummyData.totalVolume} + {stockInfo.stockInfResponseDto.acml_vol} </TransactionVolume> <TransactionValue> <span>{valueText}</span> - {dummyData.totalValue} + {stockInfo.stockInfResponseDto.acml_tr_pbmn} </TransactionValue> </Container> ); @@ -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; +}