[FE] feature-fe-#112 차트 실시간 데이터 등락 표시

.github/workflows/CICD.yml

@@ -6,7 +6,7 @@ on:
       - main
       - dev
       - dev-be
-      - feature-be-#51
+      - feature-be-#105
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest

nginx.conf

@@ -35,6 +35,9 @@ http {
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
 
+            # Origin 헤더 유지
+            proxy_set_header Origin $http_origin;
+
             # CORS 설정 추가
             add_header 'Access-Control-Allow-Origin' 'https://www.corinee.site' always;
             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;

packages/client/src/Router.tsx

@@ -5,18 +5,21 @@ import Account from '@/pages/account/Account';
 import Trade from '@/pages/trade/Trade';
 import NotFound from '@/pages/not-found/NotFound';
 import Redricet from '@/pages/auth/Redirect';
+import { Suspense } from 'react';
 
 function Router() {
 	return (
-		<Routes>
-			<Route element={<Layout />}>
-				<Route path="/" element={<Home />} />
-				<Route path="/account" element={<Account />} />
-				<Route path="/trade/:market" element={<Trade />} />
-			</Route>
-			<Route path="/auth/callback" element={<Redricet />} />
-			<Route path="*" element={<NotFound />} />
-		</Routes>
+		<Suspense>
+			<Routes>
+				<Route element={<Layout />}>
+					<Route path="/" element={<Home />} />
+					<Route path="/account" element={<Account />} />
+					<Route path="/trade/:market" element={<Trade />} />
+				</Route>
+				<Route path="/auth/callback" element={<Redricet />} />
+				<Route path="*" element={<NotFound />} />
+			</Routes>
+		</Suspense>
 	);
 }
 

packages/client/src/api/interceptors.ts

@@ -1,6 +1,6 @@
 import { authInstance, instance } from '@/api/instance';
 import { Login } from '@/types/auth';
-import { getCookie, removeCookie, setCookie } from '@/utility/cookies';
+import { getCookie, removeCookie, setCookie } from '@/utility/storage/cookies';
 import { AxiosResponse } from 'axios';
 
 authInstance.interceptors.request.use(

packages/client/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { useAuth } from '@/hooks/auth/useAuth';
 import { Button, Navbar } from '@material-tailwind/react';
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 import { useAuthStore } from '@/store/authStore';
 import { useToast } from '@/hooks/ui/useToast';
 import logoImage from '@asset/logo/corineeLogo.png';
@@ -22,7 +22,7 @@ function Header() {
 		<>
 			<Navbar
 				fullWidth={true}
-				className=" flex justify-between items-center sticky top-0 min-w-[1300px]"
+				className="w-full flex justify-between items-center sticky top-0 z-10"
 				shadow={false}
 			>
 				<div>
@@ -32,12 +32,22 @@ function Header() {
 					</Link>
 				</div>
 				<div className="flex gap-4">
-					<Link to={'/'} className="text-gray-600 hover:text-black">
+					<NavLink
+						to={'/'}
+						className={({ isActive }) =>
+							`${isActive ? 'text-black' : 'text-gray-600'} hover:text-black`
+						}
+					>
 						홈
-					</Link>
-					<Link to={'/account'} className="text-gray-600 hover:text-black">
+					</NavLink>
+					<NavLink
+						to={'/account'}
+						className={({ isActive }) =>
+							`${isActive ? 'text-black' : 'text-gray-600'} hover:text-black`
+						}
+					>
 						내 계좌
-					</Link>
+					</NavLink>
 				</div>
 				<div>
 					{isAuthenticated ? (
@@ -63,11 +73,7 @@ function Header() {
 								<img alt="kakao_image" src={kakaLogo} className="w-10 h-10" />
 							</button>
 							<button onClick={() => handleLogin('google')}>
-								<img
-									alt="google_image"
-									src={googleLogo}
-									className="w-10 h-10"
-								/>
+								<img alt="google_image" src={googleLogo} className="w-9 h-9" />
 							</button>
 						</div>
 					)}

packages/client/src/components/sidebar/RecentlyViewed.tsx

@@ -3,7 +3,7 @@ import { useSSETicker } from '@/hooks/SSE/useSSETicker';
 import { formatData } from '@/utility/format/formatSSEData';
 import useRecentlyMarketStore from '@/store/recentlyViewed';
 import { useRecentlyMarketList } from '@/hooks/market/useRecentlyMarket';
-import { convertToQueryString } from '@/utility/queryString';
+import { convertToQueryString } from '@/utility/api/queryString';
 import { SidebarMarketData } from '@/types/market';
 
 function RecentlyViewed() {

packages/client/src/components/sidebar/Sidebar.tsx

@@ -45,9 +45,9 @@ function Sidebar() {
 	];
 
 	return (
-		<div className="absolute sm:flex xl:sticky xl:z-0 top-0 right-0 bg-gray-100 h-screen z-50">
+		<div className="relative h-full flex">
 			<SideDrawer isOpen={isOpen} activeMenu={activeMenu} />
-			<div className="w-14 flex flex-col gap-3 items-center border-l border-gray-400 border-solid">
+			<div className="w-14 flex flex-col gap-3 items-center bg-gray-100 border-l border-gray-400 border-solid h-full">
 				{SIDEBAR_BUTTONS.map((button) => (
 					<SideBarButton
 						key={button.id}

packages/client/src/hooks/auth/useAuth.ts

@@ -1,7 +1,7 @@
 import { guestLogin, logout } from '@/api/auth';
 import { useAuthStore } from '@/store/authStore';
 import { Login } from '@/types/auth';
-import { removeCookie, setCookie } from '@/utility/cookies';
+import { removeCookie, setCookie } from '@/utility/storage/cookies';
 import { useMutation } from '@tanstack/react-query';
 
 export function useAuth() {

packages/client/src/hooks/chart/useChartSetup.ts

@@ -0,0 +1,40 @@
+import {
+	initializeChart,
+	setupCandlestickSeries,
+} from '@/utility/chart/chartSetup';
+import { useRef, useEffect } from 'react';
+import { IChartApi, ISeriesApi } from 'lightweight-charts';
+import { chartConfig } from '@/utility/chart/config';
+import { handleResize } from '@/utility/chart/chartEvent';
+
+export function useChartSetup() {
+	const chartRef = useRef<HTMLDivElement>(null);
+	const chartInstanceRef = useRef<IChartApi | null>(null);
+	const seriesRef = useRef<ISeriesApi<'Candlestick'> | null>(null);
+
+	useEffect(() => {
+		if (!chartRef.current) return;
+		chartInstanceRef.current = initializeChart(chartRef.current, chartConfig);
+		seriesRef.current = setupCandlestickSeries(
+			chartInstanceRef.current,
+			[],
+			chartConfig,
+		);
+		const resizeObserver = new ResizeObserver(() => {
+			handleResize(chartRef, chartInstanceRef);
+		});
+
+		if (chartRef.current.parentElement) {
+			resizeObserver.observe(chartRef.current.parentElement);
+		}
+
+		return () => {
+			if (chartInstanceRef.current) {
+				resizeObserver.disconnect();
+				chartInstanceRef.current.remove();
+			}
+		};
+	}, []);
+
+	return { chartRef, chartInstanceRef, seriesRef };
+}

packages/client/src/hooks/chart/usePeriodChart.ts

@@ -0,0 +1,40 @@
+import { getCandleByPeriod } from '@/api/market';
+import { Candle, CandlePeriod, InfiniteCandle } from '@/types/chart';
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+
+export function usePeriodChart(
+	market: string,
+	period: CandlePeriod,
+	minute?: number,
+) {
+	const { data, fetchNextPage, hasNextPage, refetch } =
+		useSuspenseInfiniteQuery<
+			Candle[],
+			Error,
+			InfiniteCandle,
+			[string, string, CandlePeriod, number?],
+			string | undefined
+		>({
+			queryKey: ['candles', market, period, minute],
+			queryFn: ({ pageParam }) => {
+				return getCandleByPeriod(market, period, pageParam, minute);
+			},
+			getNextPageParam: (lastPage) => {
+				if (lastPage.length === 0) return undefined;
+				const oldestCandle = lastPage[lastPage.length - 1];
+				return oldestCandle?.candle_date_time_utc;
+			},
+			initialPageParam: undefined,
+			select: (data) => ({
+				candles: data.pages.flat(),
+				hasNextPage: data.pages[data.pages.length - 1]?.length === 200,
+			}),
+		});
+
+	return {
+		refetch,
+		data,
+		fetchNextPage,
+		hasNextPage,
+	};
+}

packages/client/src/hooks/chart/useRealTimeCandle.ts

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+import { CandleFormat, CandlePeriod } from '@/types/chart';
+import { ISeriesApi } from 'lightweight-charts';
+import { getCurrentCandleStartTime } from '@/utility/chart/chartTimeUtils';
+
+type Props = {
+	seriesRef: React.RefObject<ISeriesApi<'Candlestick'>>;
+	currentPrice: number;
+	activePeriod: CandlePeriod;
+	refetch: () => Promise<unknown>;
+	minute?: number;
+};
+export function useRealTimeCandle({
+	seriesRef,
+	currentPrice,
+	activePeriod,
+	refetch,
+	minute,
+}: Props) {
+	const lastCandleRef = useRef<CandleFormat | null>(null);
+
+	const updateRealTimeCandle = () => {
+		if (!seriesRef.current || !currentPrice || !lastCandleRef.current) return;
+
+		const currentCandleStartTime = getCurrentCandleStartTime(
+			activePeriod,
+			minute,
+		);
+		if (
+			!lastCandleRef.current ||
+			lastCandleRef.current.time !== currentCandleStartTime
+		) {
+			refetch();
+		} else {
+			const updatedCandle = {
+				...lastCandleRef.current,
+				close: currentPrice,
+				high: Math.max(lastCandleRef.current.high, currentPrice),
+				low: Math.min(lastCandleRef.current.low, currentPrice),
+			};
+			lastCandleRef.current = updatedCandle;
+			seriesRef.current.update(updatedCandle);
+		}
+	};
+
+	useEffect(() => {
+		if (!seriesRef.current || !currentPrice) return;
+		updateRealTimeCandle();
+	}, [currentPrice, minute, activePeriod]);
+
+	return { lastCandleRef };
+}

packages/client/src/hooks/market/useValidCoin.ts

@@ -0,0 +1,13 @@
+import { useMarketAll } from '@/hooks/market/useMarketAll';
+import { useMemo } from 'react';
+import { filterCoin } from '@/utility/validation/filter';
+export function useValidCoin(market: string | undefined) {
+	const { data } = useMarketAll();
+	const KRW_Markets = useMemo(() => filterCoin(data, 'KRW'), [data]);
+	const isValidCoin = useMemo(() => {
+		if (!market || !KRW_Markets) return false;
+		return KRW_Markets.some((item) => item.market === market);
+	}, [KRW_Markets]);
+
+	return { isValidCoin };
+}

packages/client/src/hooks/ui/useSideDraw.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { SideBarCategory } from '@/types/category';
-import { isSideBarMenu } from '@/utility/typeGuard';
+import { isSideBarMenu } from '@/utility/validation/typeGuard';
 
 function useSideDrawer() {
 	const [activeMenu, setActiveMenu] = useState<SideBarCategory>(null);

packages/client/src/hooks/ui/useToast.ts

@@ -6,6 +6,12 @@ export function useToast() {
 		pauseOnHover: false,
 		hideProgressBar: true,
 		transition: Zoom,
+		style: {
+			width: 'fit-content',
+			whiteSpace: 'nowrap',
+			display: 'inline-flex',
+			margin: '0 auto',
+		},
 	};
 
 	const showToast = {

packages/client/src/hooks/useMyHistory.ts

@@ -1,16 +1,15 @@
 import { myHistory } from '@/api/history';
-import { getCookie } from '@/utility/cookies';
+import { getCookie } from '@/utility/storage/cookies';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 export function useMyHistory() {
 	const QUERY_KEY = 'MY_History';
 	const token = getCookie('access_token');
-	const  {data}  = useSuspenseQuery({
+	const { data } = useSuspenseQuery({
 		queryFn: () => myHistory(token),
 		queryKey: [QUERY_KEY],
 		refetchOnMount: 'always',
 	});
 
-
 	return data;
 }

packages/client/src/pages/account/balance/BalanceCoin.tsx

@@ -1,7 +1,7 @@
 import { Change, CoinTicker } from '@/types/ticker';
 import colorClasses from '@/constants/priceColor';
 import { AccountCoin } from '@/types/account';
-import PORTFOLIO_EVALUATOR from '@/utility/portfolioEvaluator';
+import PORTFOLIO_EVALUATOR from '@/utility/finance/portfolioEvaluator';
 import { Link } from 'react-router-dom';
 
 type BalanceCoinProps = {

packages/client/src/pages/account/balance/BalanceTable.tsx

@@ -1,7 +1,7 @@
 import BalanceInfo from '@/pages/account/balance/BalanceInfo';
 import { BalanceMarket } from '@/types/market';
 import { SSEDataType } from '@/types/ticker';
-import PORTFOLIO_EVALUATOR from '@/utility/portfolioEvaluator';
+import PORTFOLIO_EVALUATOR from '@/utility/finance/portfolioEvaluator';
 
 type BalanceTableProps = {
 	KRW: number;

packages/client/src/pages/auth/Redirect.tsx

@@ -1,6 +1,6 @@
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
-import { setCookie } from '@/utility/cookies';
+import { setCookie } from '@/utility/storage/cookies';
 import { useAuthStore } from '@/store/authStore';
 
 function Redirect() {