[Feat] 차트관련 주식 종목 검색 및 선택 기능 구현 및 테스트 완료

- 중앙 차트 관련하여 종목 검색 및 선택 기능 구현 및 테스트 완료 - 테스트 위하여 차트관련 컴포넌트에 임시로 테스트 요소 (input, button 엘리먼트) 만들어놓은 상황으로 이후 삭제할 예정 - 기능 구현 위한 코드들 실제적으로 필요한 컴포넌트로 이동시킨 후 삭제할 예정 Issues #14
codestates-seb · Sep 6, 2023 · e5b4a5e · e5b4a5e
1 parent cdef1f6
commit e5b4a5e
Show file tree

Hide file tree

Showing 7 changed files with 320 additions and 32 deletions.
diff --git a/client/src/components/CentralChart/Index.tsx b/client/src/components/CentralChart/Index.tsx
@@ -3,6 +3,7 @@ import { styled } from "styled-components";
 import { StateProps } from "../../models/stateProps";
 
 import UpperMenuBar from "../CentralChartMenu/Index";
+import KospiChart from "./KospiChart";
 import StockChart from "./StockChart";
 
 const CentralChart = () => {
@@ -11,7 +12,8 @@ const CentralChart = () => {
   return (
     <Container>
       <UpperMenuBar />
-      {companyId !== 0 ? <div>코스피 차트</div> : <StockChart />}
+      {companyId === 0 ? <KospiChart /> : <StockChart />}
+      {/* <StockChart /> */}
     </Container>
   );
 };

diff --git a/client/src/components/CentralChart/KospiChart.tsx b/client/src/components/CentralChart/KospiChart.tsx
@@ -0,0 +1,128 @@
+import { useDispatch } from "react-redux";
+import { styled } from "styled-components";
+import EChartsReact from "echarts-for-react";
+import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
+
+import useGetKospiChart from "../../hooks/useGetKospiChart";
+
+// 🔴 회사 목록 데이터 불러오는 로직
+import useGetCompanyList from "../../hooks/useGetCompanyList";
+
+const loadingText = "로딩 중 입니다...";
+const errorText = "화면을 불러올 수 없습니다";
+
+//🔴 테스트
+import { useEffect, useState } from "react";
+
+const KospiChart = () => {
+  const dispatch = useDispatch();
+
+  const { isLoading, error, options, chartStyle } = useGetKospiChart();
+
+  // 🔴 차트 변환 테스트
+
+  // 🔴 1) 검색 이벤트
+  const { companyList } = useGetCompanyList();
+  const [companyLists, setCompanyLists] = useState([]);
+  const [searchWord, setSearchWord] = useState("");
+
+  // 회사 목록 불러오면 -> companyList 상태에 할당
+  useEffect(() => {
+    setCompanyLists(companyList);
+  }, [companyList]);
+
+  useEffect(() => {
+    console.log(companyLists);
+  }, [companyLists]);
+
+  const handleChangeSearchWord = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchWord(e.target.value);
+  };
+
+  const handleSearchCompany = () => {
+    let searchResult: string = "noExistCompany";
+
+    companyLists.forEach((company: CompanyProps) => {
+      if (company.korName === searchWord) {
+        searchResult = "ExistCompany";
+        dispatch(changeCompanyId(company.companyId));
+      }
+    });
+
+    if (searchResult === "noExistCompany") {
+      dispatch(changeCompanyId(-1));
+    }
+  };
+
+  // 🔴 2) 클릭 이벤트
+  const handleKospi = () => {
+    dispatch(changeCompanyId(0));
+  };
+
+  const handleStock1 = () => {
+    dispatch(changeCompanyId(1));
+  };
+
+  const handleStock10 = () => {
+    dispatch(changeCompanyId(10));
+  };
+  //
+
+  if (isLoading) {
+    return <LoadingContainer>{loadingText}</LoadingContainer>;
+  }
+
+  if (error) {
+    return <ErrorContainer>{errorText}</ErrorContainer>;
+  }
+
+  return (
+    <Container>
+      {/* 🔴 차트 변경 이벤트 테스트 */}
+      <label>
+        종목 검색
+        <input onChange={handleChangeSearchWord} />
+        <button onClick={handleSearchCompany}>검색</button>
+      </label>
+      <button onClick={handleKospi}>코스피 버튼</button>
+      <button onClick={handleStock1}>1번 주식 버튼</button>
+      <button onClick={handleStock10}>10번 주식 버튼</button>
+      {/* 🔴 차트 변경 이벤트 테스트 */}
+      <EChartsReact option={options} style={chartStyle} />
+    </Container>
+  );
+};
+
+export default KospiChart;
+
+const Container = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const LoadingContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 20px;
+  font-weight: 500;
+  color: #999999;
+`;
+
+const ErrorContainer = styled(LoadingContainer)``;
+
+//🔴 테스트
+// type 선언
+interface CompanyProps {
+  companyId: number;
+  code: string;
+  korName: string;
+  stockAsBiResponseDto: null;
+  stockInfResponseDto: null;
+}
diff --git a/client/src/components/CentralChart/StockChart.tsx b/client/src/components/CentralChart/StockChart.tsx
@@ -1,43 +1,76 @@
-import { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import { styled } from "styled-components";
 import EChartsReact from "echarts-for-react";
+import { StateProps } from "../../models/stateProps";
+import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
+
 import useGetStockData from "../../hooks/useGetStockData";
-import useGetChart from "../../hooks/useGetChart";
+import useGetStockChart from "../../hooks/useGetStockChart";
+
+// 🔴 회사 목록 데이터 불러오는 로직
+import useGetCompanyList from "../../hooks/useGetCompanyList";
 
 const loadingText = "로딩 중 입니다...";
 const errorText = "화면을 불러올 수 없습니다";
 
-// 🔴test
-import { useState } from "react";
-import axios from "axios";
+//🔴 테스트
+import { useEffect, useState } from "react";
 
 const StockChart = () => {
-  // 🔴test
-  const [params, setParams] = useState(1);
+  const companyId = useSelector((state: StateProps) => state.companyId);
+  const dispatch = useDispatch();
 
-  const handlePlus = () => {
-    setParams((state) => state + 1);
-  };
+  const { isLoading, error } = useGetStockData(companyId);
+  const { options, chartStyle } = useGetStockChart(companyId);
+
+  // 🔴 차트 변환 테스트
 
-  const handleMinus = () => {
-    setParams((state) => state - 1);
+  // 🔴 1) 검색 이벤트
+  const { companyList } = useGetCompanyList();
+  const [companyLists, setCompanyLists] = useState([]);
+  const [searchWord, setSearchWord] = useState("");
+
+  // 회사 목록 불러오면 -> companyList 상태에 할당
+  useEffect(() => {
+    setCompanyLists(companyList);
+  }, [companyList]);
+
+  const handleChangeSearchWord = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchWord(e.target.value);
   };
 
-  // 코스피 데이터 정렬
-  const testKospi = async () => {
-    const res = await axios.get("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/kospi");
-    const kospi = res.data.output2;
-    return kospi.reverse();
+  const handleSearchCompany = () => {
+    let searchResult: string = "noExistCompany";
+
+    companyLists.forEach((company: CompanyProps) => {
+      if (company.korName === searchWord) {
+        searchResult = "ExistCompany";
+        dispatch(changeCompanyId(company.companyId));
+      }
+    });
+
+    if (searchResult === "noExistCompany") {
+      dispatch(changeCompanyId(-1));
+    }
   };
 
   useEffect(() => {
-    const kospi = testKospi();
-    console.log(kospi);
-  }, []);
-  // 테스트
+    console.log(companyId);
+  }, [companyId]);
+
+  // 🔴 2) 클릭 이벤트
+  const handleKospi = () => {
+    dispatch(changeCompanyId(0));
+  };
 
-  const { isLoading, error } = useGetStockData(params);
-  const { options, chartStyle } = useGetChart(params);
+  const handleStock1 = () => {
+    dispatch(changeCompanyId(1));
+  };
+
+  const handleStock10 = () => {
+    dispatch(changeCompanyId(10));
+  };
+  //
 
   if (isLoading) {
     return <LoadingContainer>{loadingText}</LoadingContainer>;
@@ -49,8 +82,16 @@ const StockChart = () => {
 
   return (
     <Container>
-      <button onClick={handlePlus}>플러스 버튼</button>
-      <button onClick={handleMinus}>마이너스 버튼</button>
+      {/* 🔴 차트 변경 이벤트 테스트 */}
+      <label>
+        종목 검색
+        <input onChange={handleChangeSearchWord} />
+        <button onClick={handleSearchCompany}>검색</button>
+      </label>
+      <button onClick={handleKospi}>코스피 버튼</button>
+      <button onClick={handleStock1}>1번 주식 버튼</button>
+      <button onClick={handleStock10}>10번 주식 버튼</button>
+      {/* 🔴 차트 변경 이벤트 테스트 */}
       <EChartsReact option={options} style={chartStyle} />
     </Container>
   );
@@ -79,3 +120,13 @@ const LoadingContainer = styled.div`
 `;
 
 const ErrorContainer = styled(LoadingContainer)``;
+
+//🔴 테스트
+// type 선언
+interface CompanyProps {
+  companyId: number;
+  code: string;
+  korName: string;
+  stockAsBiResponseDto: null;
+  stockInfResponseDto: null;
+}
diff --git a/client/src/hooks/useGetCompanyList.ts b/client/src/hooks/useGetCompanyList.ts
@@ -0,0 +1,18 @@
+import { useQuery } from "react-query";
+import axios from "axios";
+
+const useGetCompanyList = () => {
+  const { data, isLoading, error } = useQuery("companyList", getCompanyList, {});
+
+  return { companyList: data, isLoading, error };
+};
+
+export default useGetCompanyList;
+
+// 서버에서 Company 목록 fetch 하는 함수
+const getCompanyList = async () => {
+  const res = await axios.get("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies");
+  const companyList = res.data;
+
+  return companyList;
+};
diff --git a/client/src/hooks/useGetKospiChart.ts b/client/src/hooks/useGetKospiChart.ts
@@ -0,0 +1,89 @@
+import { useState, useEffect } from "react";
+import { useQuery } from "react-query";
+import axios from "axios";
+
+const useGetKospiChart = () => {
+  const [kospiData, setKospiData] = useState([]);
+
+  const { data, isLoading, error } = useQuery("kospi", getKospiData, {
+    // onSuccess: () => {
+    //   console.log(data);
+    // },
+  });
+
+  useEffect(() => {
+    if (data) {
+      setKospiData(data);
+    }
+  }, [data]);
+
+  const options = {
+    xAxis: {
+      type: "category",
+      data: kospiData.map((kospi: KospiProps) => {
+        const year = kospi.stck_bsop_date.slice(0, 4);
+        const month = kospi.stck_bsop_date.slice(4, 6);
+        const period = `${year}년 ${month}월`;
+        return period;
+      }),
+    },
+    yAxis: [
+      {
+        type: "value",
+        position: "right",
+        interval: 100,
+        min: 2000,
+      },
+    ],
+    dataZoom: [
+      {
+        type: "inside",
+      },
+    ],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+      },
+    },
+    series: [
+      {
+        name: "코스피 지수",
+        type: "candlestick",
+        data: kospiData.map((kospi: KospiProps) => {
+          return [kospi.bstp_nmix_oprc, kospi.bstp_nmix_prpr, kospi.bstp_nmix_lwpr, kospi.bstp_nmix_hgpr];
+        }),
+        yAxisIndex: 0,
+      },
+    ],
+  };
+
+  const chartStyle = {
+    width: "100%",
+    height: "100%",
+  };
+
+  return { isLoading, error, options, chartStyle };
+};
+
+export default useGetKospiChart;
+
+// kospi 차트 데이터 fetch 로직
+const getKospiData = async () => {
+  const res = await axios.get("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/kospi");
+  const chartData = res.data.output2;
+  const kospiData = chartData.reverse();
+
+  return kospiData;
+};
+
+interface KospiProps {
+  acml_tr_pbmn: string;
+  acml_vol: string;
+  bstp_nmix_hgpr: string;
+  bstp_nmix_lwpr: string;
+  bstp_nmix_oprc: string;
+  bstp_nmix_prpr: string;
+  mod_yn: string;
+  stck_bsop_date: string;
+}