[FE] feature fe- #121 코인 상세페이지 css 수정, 차트 실시간 데이터 업데이트

packages/client/src/api/trade.ts

@@ -41,11 +41,11 @@ export async function trade(params: TradeAPI): Promise<Trade> {
 }
 
 export async function checkCoin(coin: string): Promise<CheckCoin> {
-	const response = await authInstance.get(`/trade/check-coinData/${coin}`);
+	const response = await authInstance.get(`/trade/check-coindata?coin=${coin}`);
 	return response.data;
 }
 
 export async function pendingCoin(coin: string): Promise<PendingCoinAPI> {
-	const response = await authInstance.get(`/trade/tradeData/${coin}`);
+	const response = await authInstance.get(`/trade/tradeData?coin=${coin}`);
 	return response.data;
 }

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, NavLink, useLocation, useMatch } from 'react-router-dom';
+import { Link, NavLink, useLocation } from 'react-router-dom';
 import { useAuthStore } from '@/store/authStore';
 import { useToast } from '@/hooks/ui/useToast';
 import logoImage from '@asset/logo/corineeLogo.png';
@@ -22,65 +22,63 @@ function Header() {
 	const isAccountPage = location.pathname.startsWith('/account');
 
 	return (
-		<>
-			<Navbar
-				fullWidth={true}
-				className="w-full flex justify-between items-center sticky top-0 z-10"
-				shadow={false}
-			>
-				<div>
-					<Link to={'/'} className="flex gap-2 items-center">
-						<img className="w-12 h-12" src={logoImage} />
-						<h1 className="text-black text-xl font-semibold">Corinee</h1>
-					</Link>
-				</div>
-				<div className="flex gap-4">
-					<NavLink
-						to={'/'}
-						className={({ isActive }) =>
-							`${isActive ? 'text-black font-semibold' : 'text-gray-600'} hover:text-black`
-						}
+		<Navbar
+			fullWidth={true}
+			className="w-full flex justify-between items-center sticky top-0 z-10"
+			shadow={false}
+		>
+			<div>
+				<Link to={'/'} className="flex gap-2 items-center">
+					<img className="w-12 h-12" src={logoImage} />
+					<h1 className="text-black text-xl font-semibold">Corinee</h1>
+				</Link>
+			</div>
+			<div className="flex gap-4">
+				<NavLink
+					to={'/'}
+					className={({ isActive }) =>
+						`${isActive ? 'text-black font-semibold' : 'text-gray-600'} hover:text-black`
+					}
+				>
+					홈
+				</NavLink>
+				<NavLink
+					to={'/account/balance'}
+					className={`${isAccountPage ? 'text-black font-semibold' : 'text-gray-600'} hover:text-black`}
+				>
+					내 계좌
+				</NavLink>
+			</div>
+			<div>
+				{isAuthenticated ? (
+					<Button
+						onClick={() => {
+							logout.mutateAsync();
+							toast.success('로그아웃됐어요');
+						}}
 					>
-						홈
-					</NavLink>
-					<NavLink
-						to={'/account/balance'}
-						className={`${isAccountPage ? 'text-black font-semibold' : 'text-gray-600'} hover:text-black`}
-					>
-						내 계좌
-					</NavLink>
-				</div>
-				<div>
-					{isAuthenticated ? (
+						로그아웃
+					</Button>
+				) : (
+					<div className="flex gap-3">
 						<Button
 							onClick={() => {
-								logout.mutateAsync();
-								toast.success('로그아웃됐어요');
+								guestLogin.mutateAsync();
+								toast.success('안녕하세요');
 							}}
 						>
-							로그아웃
+							체험하기
 						</Button>
-					) : (
-						<div className="flex gap-3">
-							<Button
-								onClick={() => {
-									guestLogin.mutateAsync();
-									toast.success('안녕하세요');
-								}}
-							>
-								체험하기
-							</Button>
-							<button onClick={() => handleLogin('kakao')}>
-								<img alt="kakao_image" src={kakaLogo} className="w-10 h-10" />
-							</button>
-							<button onClick={() => handleLogin('google')}>
-								<img alt="google_image" src={googleLogo} className="w-9 h-9" />
-							</button>
-						</div>
-					)}
-				</div>
-			</Navbar>
-		</>
+						<button onClick={() => handleLogin('kakao')}>
+							<img alt="kakao_image" src={kakaLogo} className="w-10 h-10" />
+						</button>
+						<button onClick={() => handleLogin('google')}>
+							<img alt="google_image" src={googleLogo} className="w-9 h-9" />
+						</button>
+					</div>
+				)}
+			</div>
+		</Navbar>
 	);
 }
 

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

@@ -1,5 +1,6 @@
 import { getCandleByPeriod } from '@/api/market';
 import { Candle, CandlePeriod, InfiniteCandle } from '@/types/chart';
+import { getPeriodMs } from '@/utility/chart/chartTimeUtils';
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 
 export function usePeriodChart(
@@ -29,6 +30,7 @@ export function usePeriodChart(
 				candles: data.pages.flat(),
 				hasNextPage: data.pages[data.pages.length - 1]?.length === 200,
 			}),
+			refetchInterval: getPeriodMs(period, minute),
 		});
 
 	return {

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

@@ -1,7 +1,6 @@
 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'>>;
@@ -20,31 +19,22 @@ export function useRealTimeCandle({
 
 	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);
-		}
+		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();
+		const intervalId = setInterval(() => {
+			if (!seriesRef.current || !currentPrice) return;
+			updateRealTimeCandle();
+		}, 500);
+		return () => clearInterval(intervalId);
 	}, [currentPrice, minute, activePeriod]);
 
 	return { lastCandleRef };

packages/client/src/pages/home/components/Coin.tsx

@@ -19,7 +19,6 @@ function Coin({ formatters, market, sseData }: CoinProps) {
 	const { addRecentlyViewedMarket } = useRecentlyMarketStore();
 	const handleClick = () => {
 		addRecentlyViewedMarket(market.market);
-		console.log(market);
 		navigate(`/trade/KRW-${market.market.split('-')[1]}`);
 		queryClient.invalidateQueries({ queryKey: ['recentlyMarketList'] });
 	};

packages/client/src/pages/layout/Layout.tsx

@@ -4,16 +4,15 @@ import { Outlet } from 'react-router-dom';
 
 function Layout() {
 	return (
-		<div className="flex min-h-screen h-screen overflow-x-auto overflow-y-auto">
+		<div className="flex min-h-screen h-screen overflow-x-hidden overflow-y-auto">
 			<div className="w-full flex flex-col">
 				<Header />
 				<main className="flex-1">
-					<div className="pt-10 px-20">
+					<div className="h-full pt-5 px-20">
 						<Outlet />
 					</div>
 				</main>
 			</div>
-
 			<div className="sticky top-0 right-0 h-screen shrink-0 overflow-visible z-20">
 				<Sidebar />
 			</div>

packages/client/src/pages/trade/Trade.tsx

@@ -37,9 +37,9 @@ function Trade() {
 
 	return (
 		<>
-			<div className="w-full h-full flex flex-col">
+			<div className="h-auto min-h-full pb-10">
 				<TradeHeader market={market} sseData={price} />
-				<div className="flex flex-1 gap-2 max-h-[670px] min-h-0">
+				<div className="flex flex-1 gap-2 max-h-[650px] min-h-0">
 					<Suspense fallback={<ChartSkeleton />}>
 						<Chart market={market} currentPrice={currentPrice} />
 					</Suspense>
@@ -50,10 +50,12 @@ function Trade() {
 					/>
 					<OrderForm currentPrice={currentPrice} selectPrice={selectPrice} />
 				</div>
+				<div className="w-96 h-full flex justify-center">
+					<Suspense>
+						<TradeFooter />
+					</Suspense>
+				</div>
 			</div>
-			<Suspense>
-				<TradeFooter />
-			</Suspense>
 		</>
 	);
 }

packages/client/src/pages/trade/components/trade_footer/TradeFooter.tsx

@@ -9,17 +9,15 @@ function TradeFooter() {
 	const duplicatedCoins = coins ? [...coins, ...coins, ...coins, ...coins] : [];
 
 	return (
-		<div className="w-full fixed bottom-0 bg-white">
-			<div className="inline-flex relative">
-				<div className="flex items-center justify-center whitespace-nowrap animate-infiniteScroll">
-					{duplicatedCoins?.map((coin, index) => (
-						<TradeFooterCoin
-							key={`${coin.market}-${index}`}
-							coin={coin}
-							ticker={ticker}
-						/>
-					))}
-				</div>
+		<div className="h-10 bg-white translate-y-14">
+			<div className="flex whitespace-nowrap animate-infiniteScroll">
+				{duplicatedCoins?.map((coin, index) => (
+					<TradeFooterCoin
+						key={`${coin.market}-${index}`}
+						coin={coin}
+						ticker={ticker}
+					/>
+				))}
 			</div>
 		</div>
 	);

packages/client/src/utility/chart/chartTimeUtils.ts

@@ -1,5 +1,4 @@
 import { CandlePeriod } from '@/types/chart';
-import { Time } from 'lightweight-charts';
 
 export const getPeriodMs = (activePeriod: CandlePeriod, minute?: number) => {
 	switch (activePeriod) {
@@ -15,41 +14,3 @@ export const getPeriodMs = (activePeriod: CandlePeriod, minute?: number) => {
 			return 60 * 1000;
 	}
 };
-
-export const getCurrentCandleStartTime = (
-	activePeriod: CandlePeriod,
-	minute?: number,
-) => {
-	const now = new Date();
-	const periodMs = getPeriodMs(activePeriod, minute);
-
-	switch (activePeriod) {
-		case 'minutes':
-			return ((Math.floor(now.getTime() / periodMs) * periodMs) / 1000) as Time;
-
-		case 'days': {
-			const startOfDay = new Date(now);
-			startOfDay.setUTCHours(0, 0, 0, 0);
-			return (startOfDay.getTime() / 1000) as Time;
-		}
-
-		case 'weeks': {
-			const startOfWeek = new Date(now);
-			startOfWeek.setUTCHours(0, 0, 0, 0);
-			const day = startOfWeek.getUTCDay();
-			const diff = startOfWeek.getUTCDate() - day + (day === 0 ? -6 : 1);
-			startOfWeek.setUTCDate(diff);
-			return (startOfWeek.getTime() / 1000) as Time;
-		}
-
-		case 'months': {
-			const startOfMonth = new Date(now);
-			startOfMonth.setUTCHours(0, 0, 0, 0);
-			startOfMonth.setUTCDate(1);
-			return (startOfMonth.getTime() / 1000) as Time;
-		}
-
-		default:
-			return ((Math.floor(now.getTime() / periodMs) * periodMs) / 1000) as Time;
-	}
-};

packages/client/tailwind.config.js

@@ -12,12 +12,12 @@ module.exports = withMT({
 				sans: ['Pretendard', 'sans-serif'],
 			},
 			animation: {
-				infiniteScroll: 'infiniteScroll 250s linear infinite',
+				infiniteScroll: 'infiniteScroll 500s linear infinite',
 			},
 			keyframes: {
 				infiniteScroll: {
 					'0%': { transform: 'translateX(0)' },
-					'100%': { transform: 'translateX(-50%)' },
+					'100%': { transform: 'translateX(-100%)' },
 				},
 			},
 		},