Merge pull request #66 from codestates-seb/dev-client#14/chartGraph

[FE] 중앙 차트 데이터 갱신 로직 구현

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 }],
   },
-}
+};

client/src/components/CentralChart/Index.tsx

@@ -1,13 +1,19 @@
+import { useSelector } from "react-redux";
 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 = () => {
+  const companyId = useSelector((state: StateProps) => state.companyId);
+
   return (
     <Container>
       <UpperMenuBar />
-      <StockChart />
+      {companyId === 0 ? <KospiChart /> : <StockChart />}
+      {/* <StockChart /> */}
     </Container>
   );
 };

client/src/components/CentralChart/KospiChart.tsx

@@ -0,0 +1,131 @@
+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]);
+
+  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));
+    }
+  };
+
+  const handlePressEmnterToSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === "Enter" && e.nativeEvent.isComposing === false) {
+      handleSearchCompany();
+      setSearchWord("");
+    }
+  };
+
+  // 🔴 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} onKeyDown={handlePressEmnterToSearch} />
+        <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;
+}

client/src/components/CentralChart/StockChart.tsx

@@ -1,15 +1,85 @@
-// 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 = "화면을 불러올 수 없습니다";
 
+//🔴 테스트
+import { useState } from "react";
+
 const StockChart = () => {
-  const { isLoading, error } = useGetStockData();
-  const { options, chartStyle } = useGetChart();
+  const companyId = useSelector((state: StateProps) => state.companyId);
+  const dispatch = useDispatch();
+
+  const { isLoading, error } = useGetStockData(companyId);
+  const { options, chartStyle } = useGetStockChart(companyId);
+
+  // 🔴 차트 변환 테스트
+
+  // 🔴 1) 검색 이벤트
+  const { companyList, compnayListLoading, companyListError } = useGetCompanyList();
+  const [searchWord, setSearchWord] = useState("");
+
+  if (compnayListLoading) {
+    return <p>회사정보 불러오는 중</p>;
+  }
+
+  if (companyListError) {
+    return <p>에러 발생</p>;
+  }
+
+  const handleChangeSearchWord = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchWord(e.target.value);
+  };
+
+  const handleSearchCompany = () => {
+    let searchResult: string = "noExistCompany";
+
+    companyList.forEach((company: CompanyProps) => {
+      if (company.korName === searchWord) {
+        searchResult = "ExistCompany";
+        dispatch(changeCompanyId(company.companyId));
+      }
+    });
+
+    if (searchResult === "noExistCompany") {
+      dispatch(changeCompanyId(-1));
+    }
+  };
+
+  const handlePressEmnterToSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === "Enter" && e.nativeEvent.isComposing === false) {
+      handleSearchCompany();
+      setSearchWord("");
+    }
+  };
+
+  // 🔴 2) 클릭 이벤트
+  const handleKospi = () => {
+    dispatch(changeCompanyId(0));
+  };
+
+  const handlePlus = () => {
+    dispatch(changeCompanyId(companyId + 1));
+  };
+
+  const handleStock1 = () => {
+    dispatch(changeCompanyId(1));
+  };
+
+  const handleStock10 = () => {
+    dispatch(changeCompanyId(10));
+  };
+  //
 
   if (isLoading) {
     return <LoadingContainer>{loadingText}</LoadingContainer>;
@@ -21,6 +91,17 @@ const StockChart = () => {
 
   return (
     <Container>
+      {/* 🔴 차트 변경 이벤트 테스트 */}
+      <label>
+        종목 검색
+        <input onChange={handleChangeSearchWord} onKeyDown={handlePressEmnterToSearch} />
+        <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>
+      {/* 🔴 차트 변경 이벤트 테스트 */}
       <EChartsReact option={options} style={chartStyle} />
     </Container>
   );
@@ -49,3 +130,13 @@ const LoadingContainer = styled.div`
 `;
 
 const ErrorContainer = styled(LoadingContainer)``;
+
+//🔴 테스트
+// type 선언
+interface CompanyProps {
+  companyId: number;
+  code: string;
+  korName: string;
+  stockAsBiResponseDto: null;
+  stockInfResponseDto: null;
+}

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">