[Feat] 중앙 차트 상단 주식개요 갱신관련 로직 구현

- 중앙 차트 상단 주식개요 관련 갱신 로직 구현 - 특정 종목 선택 혹은 검색 시 주가 차트와 함께 상단 개요 항목도 변경되도록 로직 구현 - 일부 예외처리 및 CSS 디자인 추가 구현 예정 Issues #14
codestates-seb · Sep 6, 2023 · 8dd73e9 · 8dd73e9
1 parent 8ce617f
commit 8dd73e9
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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,30 +13,133 @@ 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>
   );
 };
 
 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
@@ -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
@@ -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
@@ -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;
+}