From b45d674a013febf5a4ee71139517cf9542542d5c Mon Sep 17 00:00:00 2001 From: novice1993 Date: Wed, 6 Sep 2023 21:54:23 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A2=85=EB=AA=A9=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=B0=A8=ED=8A=B8=20y=EC=B6=95=20?= =?UTF-8?q?=EB=88=88=EA=B8=88=20=EB=B3=80=EA=B2=BD=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 차트 종목에 따른 차트 눈금 변경 로직 구현 (종목마다 y축 간격 및 최소값이 다르므로, 이를 반영하여 차트를 그리는 로직) Issues #14 --- .../components/CentralChart/KospiChart.tsx | 13 +++-- .../components/CentralChart/StockChart.tsx | 11 ++-- client/src/hooks/useGetKospiChart.ts | 6 +- client/src/hooks/useGetStockChart.ts | 29 ++++++++-- client/src/hooks/useGetStockData.ts | 7 --- client/src/page/MainPage.tsx | 57 +++---------------- client/src/page/TabPages/MarketInfoPage.tsx | 26 ++------- client/src/page/TabPages/TabContainerPage.tsx | 31 ++-------- client/src/page/TabPages/communityPage.tsx | 22 ++----- 9 files changed, 66 insertions(+), 136 deletions(-) diff --git a/client/src/components/CentralChart/KospiChart.tsx b/client/src/components/CentralChart/KospiChart.tsx index 09744a95..6cf6ab9c 100644 --- 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) => { setSearchWord(e.target.value); }; @@ -54,6 +50,13 @@ const KospiChart = () => { } }; + const handlePressEmnterToSearch = (e: React.KeyboardEvent) => { + if (e.code === "Enter") { + handleSearchCompany(); + setSearchWord(""); + } + }; + // 🔴 2) 클릭 이벤트 const handleKospi = () => { dispatch(changeCompanyId(0)); @@ -81,7 +84,7 @@ const KospiChart = () => { {/* 🔴 차트 변경 이벤트 테스트 */} diff --git a/client/src/components/CentralChart/StockChart.tsx b/client/src/components/CentralChart/StockChart.tsx index 25a786c8..c457741f 100644 --- 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) => { + if (e.code === "Enter") { + handleSearchCompany(); + setSearchWord(""); + } + }; // 🔴 2) 클릭 이벤트 const handleKospi = () => { @@ -85,7 +88,7 @@ const StockChart = () => { {/* 🔴 차트 변경 이벤트 테스트 */} diff --git a/client/src/hooks/useGetKospiChart.ts b/client/src/hooks/useGetKospiChart.ts index 90e9f356..7bc58862 100644 --- 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 index 51743364..67935cc2 100644 --- 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([]); + 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 index e241da62..eef30962 100644 --- 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 index 3b3a13be..b96dd4cf 100644 --- 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 ( - {isLoggedIn ? ( - - ) : ( - - )} + {isLoggedIn ? : }
{!expandScreen.left && ( - - {selectedMenu === "관심목록" ? ( - - ) : ( - - )} - + {selectedMenu === "관심목록" ? : } )} {!expandScreen.right && }
{isOAuthModalOpen && ( - handleMenuChange("관심목록")} - onHoldingsClick={() => handleMenuChange("투자목록")} - /> - )} - {isEmailLoginModalOpen && ( - - )} - {isEmailSignupModalOpen && ( - - )} - {isEmailVerificationModalOpen && ( - + handleMenuChange("관심목록")} onHoldingsClick={() => handleMenuChange("투자목록")} /> )} + {isEmailLoginModalOpen && } + {isEmailSignupModalOpen && } + {isEmailVerificationModalOpen && } {isPasswordSettingModalOpen && ( { diff --git a/client/src/page/TabPages/MarketInfoPage.tsx b/client/src/page/TabPages/MarketInfoPage.tsx index 194678f4..a12d12bd 100644 --- 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 = () => { }; return (
- + - handleTabStyle(1)} - className={`tab ${tabStyle === 1 ? "active-tab" : "inactive-tab"}`} - > + handleTabStyle(1)} className={`tab ${tabStyle === 1 ? "active-tab" : "inactive-tab"}`}> handleTabClick("market")}>시장요약 - handleTabStyle(2)} - className={`tab ${tabStyle === 2 ? "active-tab" : "inactive-tab"}`} - > - handleTabClick("stockList")}> - 전체종목 - + handleTabStyle(2)} className={`tab ${tabStyle === 2 ? "active-tab" : "inactive-tab"}`}> + handleTabClick("stockList")}>전체종목 - handleTabStyle(3)} - className={`tab ${tabStyle === 3 ? "active-tab" : "inactive-tab"}`} - > + handleTabStyle(3)} className={`tab ${tabStyle === 3 ? "active-tab" : "inactive-tab"}`}> handleTabClick("issues")}>시장이슈 diff --git a/client/src/page/TabPages/TabContainerPage.tsx b/client/src/page/TabPages/TabContainerPage.tsx index 2e413ab7..0546dda6 100644 --- 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 ( - +
-