fix: 코인 링크를 누르면 사이드바가 닫히도록 수정

Author: BHyeonKim

src/app/routes/trade.$ticker.tsx

@@ -1,6 +1,6 @@
 import * as cookie from 'cookie';
 import { AnimatePresence } from 'motion/react';
-import { Suspense, lazy, useState } from 'react';
+import { Suspense, lazy, useMemo, useState } from 'react';
 import { Outlet, redirect } from 'react-router';
 
 import { CoinPriceWithName, api as coinApi } from '~/entities/coin';
@@ -49,11 +49,16 @@ export default function TradeRouteComponent({
 	useTradeNotification(userId ?? 0);
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 	const { coinInfo, coinList, isLoggedIn } = loaderData;
-	const coinListWithIcon = coinList.map((coinInfo) => ({
-		...coinInfo,
-		coinIcon: <span>🪙</span>,
-		to: `/trade/${coinInfo.ticker}`,
-	}));
+	const coinListWithIcon = useMemo(
+		() =>
+			coinList.map((coinInfo) => ({
+				...coinInfo,
+				coinIcon: <span>🪙</span>,
+				to: `/trade/${coinInfo.ticker}`,
+				onClick: () => setIsMenuOpen(false),
+			})),
+		[coinList],
+	);
 
 	const handleOpenMenu = () => {
 		setIsMenuOpen(true);

src/features/coin-search-list/ui/CoinListItem/index.tsx

@@ -1,4 +1,4 @@
-import { Link, type LinkProps } from 'react-router';
+import { type LinkProps, useNavigate } from 'react-router';
 
 import {
 	CoinWithIconAndName,
@@ -9,48 +9,51 @@ import { formatCurrencyKR } from '~/shared/utils';
 
 export type CoinListItemProps = {
 	to: LinkProps['to'];
+	onClick?: () => void;
 } & CoinWithIconAndNameProps;
 
 export default function CoinListItem({
 	name,
 	ticker,
 	coinIcon: CoinIcon,
 	to,
+	onClick,
 }: Readonly<CoinListItemProps>) {
+	const navigate = useNavigate();
 	const currentPriceData = useCurrentPrice(ticker);
 	const isBull = currentPriceData && currentPriceData.changeRate > 0;
 	const formatedPrice = `${formatCurrencyKR(
 		+(currentPriceData?.currentPrice ?? 0).toFixed(2),
 	)}원`;
 
+	const handleClickCoinItem = async () => {
+		onClick?.();
+		await navigate(to);
+	};
+
 	return (
-		<Link to={to} className="block px-2">
-			<button
-				type="button"
-				className="flex w-[max(300px,100%)] cursor-pointer items-center py-1"
-			>
-				<div className="flex-1">
-					<CoinWithIconAndName
-						name={name}
-						ticker={ticker}
-						coinIcon={CoinIcon}
-					/>
-				</div>
-				<div className="flex-1 text-right text-sm">
-					<span className={isBull ? 'text-red-600' : 'text-blue-700'}>
-						{formatedPrice}
-					</span>
-				</div>
-				<div className="flex-1 text-right text-sm">
-					<span className={isBull ? 'text-red-600' : 'text-blue-700'}>
-						{(currentPriceData?.changeRate ?? 0).toFixed(2)}%
-					</span>
-				</div>
-				<div className="flex-1 text-right text-sm">
-					{/* TODO: 거래량 API가 나오면 추가할 것 */}
-					<span>{0}</span>
-				</div>
-			</button>
-		</Link>
+		<button
+			type="button"
+			className="flex w-[max(300px,100%)] cursor-pointer items-center py-1"
+			onClick={handleClickCoinItem}
+		>
+			<div className="flex-1">
+				<CoinWithIconAndName name={name} ticker={ticker} coinIcon={CoinIcon} />
+			</div>
+			<div className="flex-1 text-right text-sm">
+				<span className={isBull ? 'text-red-600' : 'text-blue-700'}>
+					{formatedPrice}
+				</span>
+			</div>
+			<div className="flex-1 text-right text-sm">
+				<span className={isBull ? 'text-red-600' : 'text-blue-700'}>
+					{(currentPriceData?.changeRate ?? 0).toFixed(2)}%
+				</span>
+			</div>
+			<div className="flex-1 text-right text-sm">
+				{/* TODO: 거래량 API가 나오면 추가할 것 */}
+				<span>{0}</span>
+			</div>
+		</button>
 	);
 }