대시보드 실시간 기능 추가

features/trade/components/TradeContainer.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { type FormEvent, useCallback, useState } from "react";
+import { type FormEvent, useCallback, useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { useShallow } from "zustand/react/shallow";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
@@ -26,6 +27,10 @@ import type {
  * @see features/trade/hooks/useStockOverview.ts 선택 종목 상세 상태를 관리합니다.
  */
 export function TradeContainer() {
+  const searchParams = useSearchParams();
+  const symbolParam = searchParams.get("symbol");
+  const nameParam = searchParams.get("name");
+
   // [State] 호가 실시간 데이터 (체결 WS와 동일 소켓에서 수신)
   const [realtimeOrderBook, setRealtimeOrderBook] =
     useState<DashboardStockOrderBookResponse | null>(null);
@@ -53,6 +58,36 @@ export function TradeContainer() {
   } = useStockSearch();
   const { selectedStock, loadOverview, updateRealtimeTradeTick } =
     useStockOverview();
+
+  /**
+   * [Effect] URL 파라미터(symbol) 감지 시 자동 종목 로드
+   * 대시보드 등 외부에서 종목 코드를 넘겨받아 트레이딩 페이지로 진입할 때 사용합니다.
+   */
+  useEffect(() => {
+    if (symbolParam && isKisVerified && verifiedCredentials && _hasHydrated) {
+      // 현재 선택된 종목과 파라미터가 다를 경우에만 자동 로드 수행
+      if (selectedStock?.symbol !== symbolParam) {
+        setKeyword(nameParam || symbolParam);
+        appendSearchHistory({
+          symbol: symbolParam,
+          name: nameParam || symbolParam,
+          market: "KOSPI", // 기본값 설정, loadOverview 이후 실제 데이터로 보완됨
+        });
+        loadOverview(symbolParam, verifiedCredentials);
+      }
+    }
+  }, [
+    symbolParam,
+    nameParam,
+    isKisVerified,
+    verifiedCredentials,
+    _hasHydrated,
+    selectedStock?.symbol,
+    loadOverview,
+    setKeyword,
+    appendSearchHistory,
+  ]);
+
   const canTrade = isKisVerified && !!verifiedCredentials;
   const canSearch = canTrade;