[Feat] 거래량 차트 구현 및 불필요한 컴포넌트 삭제

- 사용하지 않는 컴포넌트 (코스피 차트 등) 삭제
- 중앙 차트 컴포넌트 관련 거래량 차트 구현
- 차트 커스터마이징 일부 구현되었으며, 추가 진행 예정

Issues #14

client/src/components/CentralChart/Index.tsx

@@ -1,18 +1,12 @@
-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 />
-      {companyId === 0 ? <KospiChart /> : <StockChart />}
+      <StockChart />
     </Container>
   );
 };

client/src/components/CentralChart/StockChart.tsx

@@ -1,86 +1,20 @@
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } 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 useGetStockChart from "../../hooks/useGetStockChart";
 
-// 🔴 회사 목록 데이터 불러오는 로직
-import useGetCompanyList from "../../hooks/useGetCompanyList";
-
 const loadingText = "로딩 중 입니다...";
 const errorText = "화면을 불러올 수 없습니다";
 
-//🔴 테스트
-import { useState } from "react";
-
 const StockChart = () => {
   const companyId = useSelector((state: StateProps) => state.companyId);
-  const dispatch = useDispatch();
 
   const { stockPriceLoading, stockPriceError } = 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 (stockPriceLoading) {
     return <LoadingContainer>{loadingText}</LoadingContainer>;
   }
@@ -91,17 +25,6 @@ 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>
   );
@@ -115,6 +38,7 @@ const Container = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
 `;
 
 const LoadingContainer = styled.div`
@@ -130,13 +54,3 @@ 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,36 +1,22 @@
-import { useSelector } from "react-redux";
 import { styled } from "styled-components";
-import { StateProps } from "../../models/stateProps";
-
 import ExpandScreenBtn from "./ExpandScreenBtn";
 import StockOverview from "./StockOverview";
 import StockOrderBtn from "./StockOrderBtn";
 import CompareChartBtn from "./CompareChartBtn";
 
 const UpperMenuBar = () => {
-  const companyId = useSelector((state: StateProps) => state.companyId);
-
-  console.log(localStorage.getItem("accessToken"));
-
   return (
     <Container>
       <div className="FirstLine">
         <ExpandScreenBtn direction="left" />
-        {companyId === 0 ? (
-          <div>구현 예정</div>
-        ) : (
-          <>
-            <StockOverview />
-            {/* <BookmarkBtn /> */}
-            <StockOrderBtn type="buying" />
-            <StockOrderBtn type="selling" />
-          </>
-        )}
+        <StockOverview />
+        {/* <BookmarkBtn /> */}
+        <StockOrderBtn type="buying" />
+        <StockOrderBtn type="selling" />
         <ExpandScreenBtn direction="right" />
       </div>
       <div className="SecondLine">
         <CompareChartBtn />
-        {/* <ChangeChartCycleBtn /> */}
       </div>
     </Container>
   );

client/src/components/CentralChartMenu/StockOverview.tsx

@@ -4,7 +4,7 @@ import useGetStockInfo from "../../hooks/useGetStockInfo";
 import { StateProps } from "../../models/stateProps";
 
 // dummyData
-import { dummyData } from "./dummyData";
+import dummyLogo from "../../asset/CentralSectionMenu-dummyImg.png";
 
 const marketType: string = "코스피";
 const volumeText: string = "거래량";
@@ -38,7 +38,7 @@ const StockOverview = () => {
 
   return (
     <Container priceChangeRate={priceChageRate}>
-      <img className="CorpLogo" src={dummyData.corpLogo} />
+      <img className="CorpLogo" src={dummyLogo} />
       <div className="CorpName">{corpName}</div>
       <div className="StockCode">
         {stockCode} <span>{marketType}</span>