refactor: 체결알림 코드 수정

Author: BHyeonKim

src/app/root.tsx

@@ -12,7 +12,6 @@ import type { Route } from './+types/root';
 
 import './app.css';
 import { Slide } from 'react-toastify';
-import useTradeNotification from '~/features/trade/hooks/useTradeNotification';
 import StompProvider from './provider/StompProvider';
 import UserIdProvider from './provider/UserInfoProvider';
 
@@ -76,11 +75,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
 	);
 }
 
-function TradeNotificationHandler() {
-	useTradeNotification();
-	return null;
-}
-
 export default function App() {
 	return (
 		<UserIdProvider>

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

@@ -9,10 +9,12 @@ import { AIChatBot } from '~/features/chat';
 import { CoinListWithSearchBar } from '~/features/coin-search-list';
 import { OrderForm, OrderFormFallback } from '~/features/order';
 import { ExecutionList } from '~/features/order-execution-list';
+import useTradeNotification from '~/features/trade/hooks/useTradeNotification';
 import { Orderbook, StockChart } from '~/features/tradeview';
 import Container from '~/shared/ui/Container';
 import ContainerTitle from '~/shared/ui/ContainerTitle';
 import { NavBar, SideBar } from '~/widgets/navbar';
+import { useUserId } from '../provider/UserInfoProvider';
 import type { Route } from './+types/trade.$ticker';
 
 export async function loader({ request, params }: Route.LoaderArgs) {
@@ -41,6 +43,8 @@ export async function clientAction() {
 export default function TradeRouteComponent({
 	loaderData,
 }: Route.ComponentProps) {
+	const { userId } = useUserId();
+	useTradeNotification(userId || 0);
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 	const { coinInfo, coinList, isLoggedIn } = loaderData;
 	const coinListWithIcon = coinList.map((coinInfo) => ({

src/features/trade/hooks/useTradeNotification.tsx

@@ -1,9 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { toast } from 'react-toastify/unstyled';
 
 import { useStompClient } from '~/app/provider/StompProvider';
-import { api as userApi } from '~/entities/user';
-import type { UserInfoResponse } from '~/entities/user/types/user.type';
 
 type TradeNotification = {
 	ticker: string;
@@ -13,24 +11,8 @@ type TradeNotification = {
 	tradedTime: string;
 };
 
-export default function useTradeNotification() {
+export default function useTradeNotification(userId: number) {
 	const { client, connected } = useStompClient();
-	const [userId, setUserId] = useState<number | null>(null);
-
-	useEffect(() => {
-		const fetchUserInfo = async () => {
-			try {
-				const response = await userApi.getUserInfo();
-				const { data } = await (response.json() as Promise<UserInfoResponse>);
-				setUserId(data.userId);
-			} catch (error) {
-				console.error('Failed to fetch user info:', error);
-				toast.error('사용자 정보를 가져오는데 실패했습니다.');
-			}
-		};
-
-		fetchUserInfo();
-	}, []);
 
 	useEffect(() => {
 		if (!client || !connected || !userId) return;