[Feat] 종목에 따른 차트 y축 눈금 변경 로직 구현

- 차트 종목에 따른 차트 눈금 변경 로직 구현 (종목마다 y축 간격 및 최소값이 다르므로, 이를 반영하여 차트를 그리는 로직) Issues #14
codestates-seb · Sep 6, 2023 · b45d674 · b45d674
1 parent ff755ca
commit b45d674
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 136 deletions.
diff --git a/client/src/components/CentralChart/KospiChart.tsx b/client/src/components/CentralChart/KospiChart.tsx
@@ -31,10 +31,6 @@ const KospiChart = () => {
     setCompanyLists(companyList);
   }, [companyList]);
 
-  useEffect(() => {
-    console.log(companyLists);
-  }, [companyLists]);
-
   const handleChangeSearchWord = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchWord(e.target.value);
   };
@@ -54,6 +50,13 @@ const KospiChart = () => {
     }
   };
 
+  const handlePressEmnterToSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === "Enter") {
+      handleSearchCompany();
+      setSearchWord("");
+    }
+  };
+
   // 🔴 2) 클릭 이벤트
   const handleKospi = () => {
     dispatch(changeCompanyId(0));
@@ -81,7 +84,7 @@ const KospiChart = () => {
       {/* 🔴 차트 변경 이벤트 테스트 */}
       <label>
         종목 검색
-        <input onChange={handleChangeSearchWord} />
+        <input onChange={handleChangeSearchWord} onKeyDown={handlePressEmnterToSearch} />
         <button onClick={handleSearchCompany}>검색</button>
       </label>
       <button onClick={handleKospi}>코스피 버튼</button>

diff --git a/client/src/components/CentralChart/StockChart.tsx b/client/src/components/CentralChart/StockChart.tsx
@@ -54,9 +54,12 @@ const StockChart = () => {
     }
   };
 
-  useEffect(() => {
-    console.log(companyId);
-  }, [companyId]);
+  const handlePressEmnterToSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === "Enter") {
+      handleSearchCompany();
+      setSearchWord("");
+    }
+  };
 
   // 🔴 2) 클릭 이벤트
   const handleKospi = () => {
@@ -85,7 +88,7 @@ const StockChart = () => {
       {/* 🔴 차트 변경 이벤트 테스트 */}
       <label>
         종목 검색
-        <input onChange={handleChangeSearchWord} />
+        <input onChange={handleChangeSearchWord} onKeyDown={handlePressEmnterToSearch} />
         <button onClick={handleSearchCompany}>검색</button>
       </label>
       <button onClick={handleKospi}>코스피 버튼</button>

diff --git a/client/src/hooks/useGetKospiChart.ts b/client/src/hooks/useGetKospiChart.ts
@@ -5,11 +5,7 @@ import axios from "axios";
 const useGetKospiChart = () => {
   const [kospiData, setKospiData] = useState([]);
 
-  const { data, isLoading, error } = useQuery("kospi", getKospiData, {
-    // onSuccess: () => {
-    //   console.log(data);
-    // },
-  });
+  const { data, isLoading, error } = useQuery("kospi", getKospiData, {});
 
   useEffect(() => {
     if (data) {

diff --git a/client/src/hooks/useGetStockChart.ts b/client/src/hooks/useGetStockChart.ts
@@ -3,13 +3,20 @@ import useGetStockData from "./useGetStockData";
 
 const useGetStockChart = (companyId: number) => {
   const { data } = useGetStockData(companyId);
-  const [chartData, setChartData] = useState([]);
+  const [chartData, setChartData] = useState<StockProps[]>([]);
+  const [yAxisInterval, setYAxisInterval] = useState(0);
+  const [yAxisMinPrice, setYAxisMinPrice] = useState(0);
 
+  // 서버에서 차트 데이터 fetching -> 클라이언트 화면에 활용할 차트 데이터 + 차트 y축 수치 상태 변화
   useEffect(() => {
     if (data) {
       setChartData(data);
+
+      const { interval, min } = calculateYAxisOptions(data);
+      setYAxisInterval(interval);
+      setYAxisMinPrice(min);
     }
-  }, [data, companyId]);
+  }, [data]);
 
   const options = {
     xAxis: {
@@ -24,8 +31,8 @@ const useGetStockChart = (companyId: number) => {
       {
         type: "value",
         position: "right",
-        interval: 100,
-        min: 69700,
+        interval: yAxisInterval,
+        min: yAxisMinPrice,
       },
     ],
     dataZoom: [
@@ -61,6 +68,20 @@ const useGetStockChart = (companyId: number) => {
 
 export default useGetStockChart;
 
+// y축 눈금 옵션 설정하는 함수
+const calculateYAxisOptions = (data: StockProps[]) => {
+  const sampleData = data.filter((_, index) => index % 10 === 0);
+  const samplePrice = sampleData.map((stock) => parseFloat(stock.stck_prpr));
+
+  const maxPrice = Math.max(...samplePrice);
+  const minPrice = Math.min(...samplePrice);
+
+  const interval = Math.ceil((maxPrice - minPrice) / 10);
+  const min = Math.floor(minPrice - interval * 5);
+
+  return { interval, min };
+};
+
 interface StockProps {
   stockMinId: number;
   companyId: number;

diff --git a/client/src/hooks/useGetStockData.ts b/client/src/hooks/useGetStockData.ts
@@ -10,9 +10,6 @@ const useGetStockData = (companyId: number) => {
     const currentTime = new Date();
     const minute = currentTime.getMinutes();
 
-    console.log(currentTime);
-    console.log("checkTime 테스트");
-
     if (minute === 0 || minute === 30) {
       refetch();
       setAutoRefetch(true);
@@ -39,10 +36,6 @@ const useGetStockData = (companyId: number) => {
     enabled: true,
     refetchInterval: autoRefetch && 60000 * 10, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭
     refetchOnMount: true,
-    // onSuccess: () => {
-    //   console.log(new Date());
-    //   console.log(data);
-    // },
   });
 
   return { data, isLoading, error };

diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
@@ -51,8 +51,7 @@ const MainPage = () => {
     setEmailSignupModalOpen(false);
   }, []);
 
-  const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] =
-    useState(false);
+  const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false);
 
   const openEmailVerificationModal = useCallback(() => {
     setEmailSignupModalOpen(false); // 이메일 회원가입 모달 닫기
@@ -63,8 +62,7 @@ const MainPage = () => {
     setEmailVerificationModalOpen(false);
   }, []);
 
-  const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] =
-    useState(false);
+  const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] = useState(false);
 
   const openPasswordSettingModal = useCallback(() => {
     setEmailVerificationModalOpen(false); // 이메일 인증 모달 닫기
@@ -81,9 +79,7 @@ const MainPage = () => {
     setIsLoggedIn(true);
   };
 
-  const [selectedMenu, setSelectedMenu] = useState<"관심목록" | "투자목록">(
-    "투자목록"
-  ); // Default menu is 관심목록
+  const [selectedMenu, setSelectedMenu] = useState<"관심목록" | "투자목록">("투자목록"); // Default menu is 관심목록
 
   const handleMenuChange = (menu: "관심목록" | "투자목록") => {
     setSelectedMenu(menu);
@@ -95,57 +91,22 @@ const MainPage = () => {
 
   return (
     <Container>
-      {isLoggedIn ? (
-        <LoginHeader onLogoutClick={handleLogout} />
-      ) : (
-        <LogoutHeader onLoginClick={openOAuthModal} />
-      )}
+      {isLoggedIn ? <LoginHeader onLogoutClick={handleLogout} /> : <LogoutHeader onLoginClick={openOAuthModal} />}
       <Main>
         <CompareChartSection />
         {!expandScreen.left && (
-          <LeftSection>
-            {selectedMenu === "관심목록" ? (
-              <WatchList
-                key="watchlist"
-                currentListType={selectedMenu}
-                onChangeListType={handleMenuChange}
-              />
-            ) : (
-              <Holdings
-                currentListType={selectedMenu}
-                onChangeListType={handleMenuChange}
-              />
-            )}
-          </LeftSection>
+          <LeftSection>{selectedMenu === "관심목록" ? <WatchList key="watchlist" currentListType={selectedMenu} onChangeListType={handleMenuChange} /> : <Holdings currentListType={selectedMenu} onChangeListType={handleMenuChange} />}</LeftSection>
         )}
         <CentralChart />
         <StockOrderSection />
         {!expandScreen.right && <TabContainerPage></TabContainerPage>}
       </Main>
       {isOAuthModalOpen && (
-        <OAuthLoginModal
-          onClose={closeOAuthModal}
-          onEmailLoginClick={openEmailLoginModal}
-          onEmailSignupClick={openEmailSignupModal}
-          onWatchListClick={() => handleMenuChange("관심목록")}
-          onHoldingsClick={() => handleMenuChange("투자목록")}
-        />
-      )}
-      {isEmailLoginModalOpen && (
-        <EmailLoginModal onClose={closeEmailLoginModal} onLogin={handleLogin} />
-      )}
-      {isEmailSignupModalOpen && (
-        <EmailSignupModal
-          onClose={closeEmailSignupModal}
-          onRequestVerification={openEmailVerificationModal}
-        />
-      )}
-      {isEmailVerificationModalOpen && (
-        <EmailVerificationModal
-          onClose={closeEmailVerificationModal}
-          onNextStep={openPasswordSettingModal}
-        />
+        <OAuthLoginModal onClose={closeOAuthModal} onEmailLoginClick={openEmailLoginModal} onEmailSignupClick={openEmailSignupModal} onWatchListClick={() => handleMenuChange("관심목록")} onHoldingsClick={() => handleMenuChange("투자목록")} />
       )}
+      {isEmailLoginModalOpen && <EmailLoginModal onClose={closeEmailLoginModal} onLogin={handleLogin} />}
+      {isEmailSignupModalOpen && <EmailSignupModal onClose={closeEmailSignupModal} onRequestVerification={openEmailVerificationModal} />}
+      {isEmailVerificationModalOpen && <EmailVerificationModal onClose={closeEmailVerificationModal} onNextStep={openPasswordSettingModal} />}
       {isPasswordSettingModalOpen && (
         <PasswordSettingModal
           onClose={() => {

diff --git a/client/src/page/TabPages/MarketInfoPage.tsx b/client/src/page/TabPages/MarketInfoPage.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import React, { useState } from "react";
-import MarketSummary from "../../components/MarketComponents/MarketSummary";
+import MarketSummary from "../../components/MarketComponents/index";
 import MarketStockList from "../../components/MarketComponents/MarketStockList";
 import MarketIssue from "../../components/MarketComponents/MarketIssue";
 interface Props {}
@@ -15,30 +15,16 @@ const MarketInfo: React.FC<Props> = () => {
   };
   return (
     <div>
-      <style>
-        @import
-        url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');
-      </style>
+      <style>@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');</style>
 
       <MarketInfoStyle>
-        <TabStyle
-          onClick={() => handleTabStyle(1)}
-          className={`tab ${tabStyle === 1 ? "active-tab" : "inactive-tab"}`}
-        >
+        <TabStyle onClick={() => handleTabStyle(1)} className={`tab ${tabStyle === 1 ? "active-tab" : "inactive-tab"}`}>
           <Market onClick={() => handleTabClick("market")}>시장요약</Market>
         </TabStyle>
-        <TabStyle
-          onClick={() => handleTabStyle(2)}
-          className={`tab ${tabStyle === 2 ? "active-tab" : "inactive-tab"}`}
-        >
-          <StockList onClick={() => handleTabClick("stockList")}>
-            전체종목
-          </StockList>
+        <TabStyle onClick={() => handleTabStyle(2)} className={`tab ${tabStyle === 2 ? "active-tab" : "inactive-tab"}`}>
+          <StockList onClick={() => handleTabClick("stockList")}>전체종목</StockList>
         </TabStyle>
-        <TabStyle
-          onClick={() => handleTabStyle(3)}
-          className={`tab ${tabStyle === 3 ? "active-tab" : "inactive-tab"}`}
-        >
+        <TabStyle onClick={() => handleTabStyle(3)} className={`tab ${tabStyle === 3 ? "active-tab" : "inactive-tab"}`}>
           <Issue onClick={() => handleTabClick("issues")}>시장이슈</Issue>
         </TabStyle>
       </MarketInfoStyle>

diff --git a/client/src/page/TabPages/TabContainerPage.tsx b/client/src/page/TabPages/TabContainerPage.tsx
@@ -3,7 +3,7 @@ import { Routes, Route, Link } from "react-router-dom";
 import styled from "styled-components";
 import { StockItems } from "../../components/stockListComponents/StockItems";
 import { Community } from "./communityPage";
-import { Status } from "../../components/statusComponents/Status";
+import { Status } from "../../components/statusComponents/index";
 import { useState } from "react";
 export const TabContainerPage = () => {
   const [activeTab, setActiveTab] = useState(1);
@@ -13,39 +13,20 @@ export const TabContainerPage = () => {
 
   return (
     <TabContainerStyle>
-      <style>
-        @import
-        url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');
-      </style>
+      <style>@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');</style>
 
       <div>
         <TabNavArea>
-          <Nav
-            to="/"
-            onClick={() => handleClickActiveTab(1)}
-            className={`tab ${activeTab === 1 ? "active-tab" : "inactive-tab"}`}
-          >
+          <Nav to="/" onClick={() => handleClickActiveTab(1)} className={`tab ${activeTab === 1 ? "active-tab" : "inactive-tab"}`}>
             시장정보
           </Nav>
-          <Nav
-            to="/stockitems"
-            onClick={() => handleClickActiveTab(2)}
-            className={`tab ${activeTab === 2 ? "active-tab" : "inactive-tab"}`}
-          >
+          <Nav to="/stockitems" onClick={() => handleClickActiveTab(2)} className={`tab ${activeTab === 2 ? "active-tab" : "inactive-tab"}`}>
             종목정보
           </Nav>
-          <Nav
-            to="/community"
-            onClick={() => handleClickActiveTab(3)}
-            className={`tab ${activeTab === 3 ? "active-tab" : "inactive-tab"}`}
-          >
+          <Nav to="/community" onClick={() => handleClickActiveTab(3)} className={`tab ${activeTab === 3 ? "active-tab" : "inactive-tab"}`}>
             커뮤니티
           </Nav>
-          <Nav
-            to="/status"
-            onClick={() => handleClickActiveTab(4)}
-            className={`tab ${activeTab === 4 ? "active-tab" : "inactive-tab"}`}
-          >
+          <Nav to="/status" onClick={() => handleClickActiveTab(4)} className={`tab ${activeTab === 4 ? "active-tab" : "inactive-tab"}`}>
             투자현황
           </Nav>
         </TabNavArea>

diff --git a/client/src/page/TabPages/communityPage.tsx b/client/src/page/TabPages/communityPage.tsx
@@ -1,7 +1,7 @@
 //import { TabNavArea } from "./TabNavArea";
 import { useState } from "react";
 import styled from "styled-components";
-import TimeLineComponent from "../../components/communityComponents/TimeLineComponent";
+import TimeLineComponent from "../../components/communityComponents/index";
 import { StockDisscussion } from "../../components/communityComponents/StockDisscussion";
 
 export const Community = () => {
@@ -20,25 +20,11 @@ export const Community = () => {
     <div>
       <CommunityNav>
         {/*커뮤니티 내부 탭 전환*/}
-        {selectCommunity === "timeline" ? (
-          <NavButtonFocus onClick={() => setSelectCommunity("timeline")}>
-            {communityText.timeline}
-          </NavButtonFocus>
-        ) : (
-          <NavButton onClick={() => setSelectCommunity("timeline")}>
-            {communityText.timeline}
-          </NavButton>
-        )}
+        {selectCommunity === "timeline" ? <NavButtonFocus onClick={() => setSelectCommunity("timeline")}>{communityText.timeline}</NavButtonFocus> : <NavButton onClick={() => setSelectCommunity("timeline")}>{communityText.timeline}</NavButton>}
         {selectCommunity === "stockDisscussion" ? (
-          <NavButtonFocus
-            onClick={() => setSelectCommunity("stockDisscussion")}
-          >
-            {communityText.stockDisscussion}
-          </NavButtonFocus>
+          <NavButtonFocus onClick={() => setSelectCommunity("stockDisscussion")}>{communityText.stockDisscussion}</NavButtonFocus>
         ) : (
-          <NavButton onClick={() => setSelectCommunity("stockDisscussion")}>
-            {communityText.stockDisscussion}
-          </NavButton>
+          <NavButton onClick={() => setSelectCommunity("stockDisscussion")}>{communityText.stockDisscussion}</NavButton>
         )}
       </CommunityNav>