정리

features/trade/components/TradeContainer.tsx

@@ -1,24 +1,18 @@
 "use client";
 
-import Link from "next/link";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { type FormEvent, useCallback, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
-import { StockSearchForm } from "@/features/trade/components/search/StockSearchForm";
-import { StockSearchHistory } from "@/features/trade/components/search/StockSearchHistory";
-import { StockSearchResults } from "@/features/trade/components/search/StockSearchResults";
+import { TradeAccessGate } from "@/features/trade/components/guards/TradeAccessGate";
+import { TradeDashboardContent } from "@/features/trade/components/layout/TradeDashboardContent";
+import { TradeSearchSection } from "@/features/trade/components/search/TradeSearchSection";
 import { useStockSearch } from "@/features/trade/hooks/useStockSearch";
 import { useOrderBook } from "@/features/trade/hooks/useOrderBook";
 import { useKisTradeWebSocket } from "@/features/trade/hooks/useKisTradeWebSocket";
 import { useStockOverview } from "@/features/trade/hooks/useStockOverview";
 import { useCurrentPrice } from "@/features/trade/hooks/useCurrentPrice";
-import { DashboardLayout } from "@/features/trade/components/layout/DashboardLayout";
-import { StockHeader } from "@/features/trade/components/header/StockHeader";
-import { OrderBook } from "@/features/trade/components/orderbook/OrderBook";
-import { OrderForm } from "@/features/trade/components/order/OrderForm";
-import { StockLineChart } from "@/features/trade/components/chart/StockLineChart";
+import { useTradeSearchPanel } from "@/features/trade/hooks/useTradeSearchPanel";
 import type {
   DashboardStockOrderBookResponse,
   DashboardStockSearchItem,
@@ -32,18 +26,17 @@ import type {
  * @see features/trade/hooks/useStockOverview.ts 선택 종목 상세 상태를 관리합니다.
  */
 export function TradeContainer() {
-  const skipNextAutoSearchRef = useRef(false);
-  const searchShellRef = useRef<HTMLDivElement | null>(null);
-
-  // 상태 정의: 검색 패널 열림 상태를 관리합니다.
-  const [isSearchPanelOpen, setIsSearchPanelOpen] = useState(false);
-
-  const { verifiedCredentials, isKisVerified } = useKisRuntimeStore(
-    useShallow((state) => ({
-      verifiedCredentials: state.verifiedCredentials,
-      isKisVerified: state.isKisVerified,
-    })),
-  );
+  // [State] 호가 실시간 데이터 (체결 WS와 동일 소켓에서 수신)
+  const [realtimeOrderBook, setRealtimeOrderBook] =
+    useState<DashboardStockOrderBookResponse | null>(null);
+  const { verifiedCredentials, isKisVerified, _hasHydrated } =
+    useKisRuntimeStore(
+      useShallow((state) => ({
+        verifiedCredentials: state.verifiedCredentials,
+        isKisVerified: state.isKisVerified,
+        _hasHydrated: state._hasHydrated,
+      })),
+    );
 
   const {
     keyword,
@@ -58,14 +51,32 @@ export function TradeContainer() {
     removeSearchHistory,
     clearSearchHistory,
   } = useStockSearch();
-
   const { selectedStock, loadOverview, updateRealtimeTradeTick } =
     useStockOverview();
+  const canTrade = isKisVerified && !!verifiedCredentials;
+  const canSearch = canTrade;
 
-  // 호가 실시간 데이터 (체결 WS에서 동일 소켓으로 수신)
-  const [realtimeOrderBook, setRealtimeOrderBook] =
-    useState<DashboardStockOrderBookResponse | null>(null);
+  const {
+    searchShellRef,
+    isSearchPanelOpen,
+    markSkipNextAutoSearch,
+    openSearchPanel,
+    closeSearchPanel,
+    handleSearchShellBlur,
+    handleSearchShellKeyDown,
+  } = useTradeSearchPanel({
+    canSearch,
+    keyword,
+    verifiedCredentials,
+    search,
+    clearSearch,
+  });
 
+  /**
+   * @description 체결 WS에서 전달받은 실시간 호가를 상태에 저장합니다.
+   * @see features/trade/hooks/useKisTradeWebSocket.ts onOrderBookMessage 콜백
+   * @see features/trade/hooks/useOrderBook.ts externalRealtimeOrderBook 주입
+   */
   const handleOrderBookMessage = useCallback(
     (data: DashboardStockOrderBookResponse) => {
       setRealtimeOrderBook(data);
@@ -109,9 +120,6 @@ export function TradeContainer() {
     orderBook,
   });
 
-  const canTrade = isKisVerified && !!verifiedCredentials;
-  const canSearch = canTrade;
-
   /**
    * @description 검색 전 API 인증 여부를 확인합니다.
    * @see features/trade/components/search/StockSearchForm.tsx 검색 제출 전 공통 가드로 사용합니다.
@@ -122,67 +130,12 @@ export function TradeContainer() {
     return false;
   }, [canSearch, setSearchError]);
 
-  const closeSearchPanel = useCallback(() => {
-    setIsSearchPanelOpen(false);
-  }, []);
-
-  const openSearchPanel = useCallback(() => {
-    if (!canSearch) return;
-    setIsSearchPanelOpen(true);
-  }, [canSearch]);
-
-  /**
-   * @description 검색 영역 포커스가 완전히 빠지면 드롭다운(검색결과/히스토리)을 닫습니다.
-   * @see features/trade/components/search/StockSearchForm.tsx 입력 포커스 이벤트에서 열림 제어를 함께 사용합니다.
-   */
-  const handleSearchShellBlur = useCallback(
-    (event: React.FocusEvent<HTMLDivElement>) => {
-      const nextTarget = event.relatedTarget as Node | null;
-      if (nextTarget && searchShellRef.current?.contains(nextTarget)) return;
-      closeSearchPanel();
-    },
-    [closeSearchPanel],
-  );
-
-  const handleSearchShellKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key !== "Escape") return;
-      closeSearchPanel();
-      (event.target as HTMLElement | null)?.blur?.();
-    },
-    [closeSearchPanel],
-  );
-
-  useEffect(() => {
-    if (skipNextAutoSearchRef.current) {
-      skipNextAutoSearchRef.current = false;
-      return;
-    }
-
-    if (!canSearch) {
-      clearSearch();
-      return;
-    }
-
-    const trimmed = keyword.trim();
-    if (!trimmed) {
-      clearSearch();
-      return;
-    }
-
-    const timer = window.setTimeout(() => {
-      search(trimmed, verifiedCredentials);
-    }, 220);
-
-    return () => window.clearTimeout(timer);
-  }, [canSearch, keyword, verifiedCredentials, search, clearSearch]);
-
   /**
    * @description 수동 검색 버튼(엔터 포함) 제출 이벤트를 처리합니다.
    * @see features/trade/components/search/StockSearchForm.tsx onSubmit 이벤트로 호출됩니다.
    */
   const handleSearchSubmit = useCallback(
-    (event: React.FormEvent) => {
+    (event: FormEvent) => {
       event.preventDefault();
       if (!ensureSearchReady() || !verifiedCredentials) return;
       search(keyword, verifiedCredentials);
@@ -207,7 +160,7 @@ export function TradeContainer() {
       }
 
       // 카드 선택으로 keyword가 바뀔 때 자동 검색이 다시 실행되지 않게 한 번 건너뜁니다.
-      skipNextAutoSearchRef.current = true;
+      markSkipNextAutoSearch();
       setKeyword(item.name);
       clearSearch();
       closeSearchPanel();
@@ -223,135 +176,57 @@ export function TradeContainer() {
       setKeyword,
       appendSearchHistory,
       loadOverview,
+      markSkipNextAutoSearch,
     ],
   );
 
-  if (!canTrade) {
+  if (!_hasHydrated) {
     return (
       <div className="flex h-full items-center justify-center p-6">
-        <section className="w-full max-w-xl rounded-2xl border border-brand-200 bg-background p-6 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/18">
-          {/* ========== UNVERIFIED NOTICE ========== */}
-          <h2 className="text-lg font-semibold text-foreground">
-            트레이딩을 시작하려면 KIS API 인증이 필요합니다.
-          </h2>
-          <p className="mt-2 text-sm text-muted-foreground">
-            설정 페이지에서 App Key/App Secret을 입력하고 연결 상태를 확인해
-            주세요.
-          </p>
-          <div className="mt-4">
-            <Button asChild className="bg-brand-600 hover:bg-brand-700">
-              <Link href="/settings">설정 페이지로 이동</Link>
-            </Button>
-          </div>
-        </section>
+        <LoadingSpinner />
       </div>
     );
   }
 
+  if (!canTrade) {
+    return <TradeAccessGate canTrade={canTrade} />;
+  }
+
   return (
     <div className="relative h-full flex flex-col">
-      {/* ========== SEARCH ========== */}
-      <div className="z-30 flex-none border-b bg-background/95 p-4 backdrop-blur-sm dark:border-brand-800/45 dark:bg-brand-900/22">
-        <div
-          ref={searchShellRef}
-          onBlurCapture={handleSearchShellBlur}
-          onKeyDownCapture={handleSearchShellKeyDown}
-          className="relative mx-auto max-w-2xl"
-        >
-          <StockSearchForm
-            keyword={keyword}
-            onKeywordChange={setKeyword}
-            onSubmit={handleSearchSubmit}
-            onInputFocus={openSearchPanel}
-            disabled={!canSearch}
-            isLoading={isSearching}
-          />
+      {/* ========== SEARCH SECTION ========== */}
+      <TradeSearchSection
+        canSearch={canSearch}
+        isSearchPanelOpen={isSearchPanelOpen}
+        isSearching={isSearching}
+        keyword={keyword}
+        selectedSymbol={selectedStock?.symbol}
+        searchResults={searchResults}
+        searchHistory={searchHistory}
+        searchShellRef={searchShellRef}
+        onKeywordChange={setKeyword}
+        onSearchSubmit={handleSearchSubmit}
+        onSearchFocus={openSearchPanel}
+        onSearchShellBlur={handleSearchShellBlur}
+        onSearchShellKeyDown={handleSearchShellKeyDown}
+        onSelectStock={handleSelectStock}
+        onRemoveHistory={removeSearchHistory}
+        onClearHistory={clearSearchHistory}
+      />
 
-          {isSearchPanelOpen && canSearch && (
-            <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-80 overflow-x-hidden overflow-y-auto rounded-md border bg-background shadow-lg dark:border-brand-800/45 dark:bg-brand-950/95">
-              {searchResults.length > 0 ? (
-                <StockSearchResults
-                  items={searchResults}
-                  onSelect={handleSelectStock}
-                  selectedSymbol={selectedStock?.symbol}
-                />
-              ) : keyword.trim() ? (
-                <div className="px-3 py-2 text-sm text-muted-foreground">
-                  {isSearching ? "검색 중..." : "검색 결과가 없습니다."}
-                </div>
-              ) : searchHistory.length > 0 ? (
-                <StockSearchHistory
-                  items={searchHistory}
-                  onSelect={handleSelectStock}
-                  onRemove={removeSearchHistory}
-                  onClear={clearSearchHistory}
-                  selectedSymbol={selectedStock?.symbol}
-                />
-              ) : (
-                <div className="px-3 py-2 text-sm text-muted-foreground">
-                  최근 검색 종목이 없습니다.
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* ========== MAIN CONTENT ========== */}
-      <div
-        className={cn(
-          "transition-opacity duration-200 h-full flex-1 min-h-0 overflow-x-hidden",
-          !selectedStock && "opacity-20 pointer-events-none",
-        )}
-      >
-        <DashboardLayout
-          header={
-            selectedStock ? (
-              <StockHeader
-                stock={selectedStock}
-                price={currentPrice?.toLocaleString() ?? "0"}
-                change={change?.toLocaleString() ?? "0"}
-                changeRate={changeRate?.toFixed(2) ?? "0.00"}
-                high={latestTick ? latestTick.high.toLocaleString() : undefined}
-                low={latestTick ? latestTick.low.toLocaleString() : undefined}
-                volume={
-                  latestTick
-                    ? latestTick.accumulatedVolume.toLocaleString()
-                    : undefined
-                }
-              />
-            ) : null
-          }
-          chart={
-            selectedStock ? (
-              <div className="p-0 h-full flex flex-col">
-                <StockLineChart
-                  symbol={selectedStock.symbol}
-                  candles={selectedStock.candles}
-                  credentials={verifiedCredentials}
-                  latestTick={latestTick}
-                />
-              </div>
-            ) : (
-              <div className="h-full flex items-center justify-center text-muted-foreground">
-                차트 영역
-              </div>
-            )
-          }
-          orderBook={
-            <OrderBook
-              symbol={selectedStock?.symbol}
-              referencePrice={referencePrice}
-              currentPrice={currentPrice}
-              latestTick={latestTick}
-              recentTicks={recentTradeTicks}
-              orderBook={orderBook}
-              isLoading={isOrderBookLoading}
-            />
-          }
-          orderForm={<OrderForm stock={selectedStock ?? undefined} />}
-        />
-      </div>
+      {/* ========== DASHBOARD SECTION ========== */}
+      <TradeDashboardContent
+        selectedStock={selectedStock}
+        verifiedCredentials={verifiedCredentials}
+        latestTick={latestTick}
+        recentTradeTicks={recentTradeTicks}
+        orderBook={orderBook}
+        isOrderBookLoading={isOrderBookLoading}
+        referencePrice={referencePrice}
+        currentPrice={currentPrice}
+        change={change}
+        changeRate={changeRate}
+      />
     </div>
   );
 }

features/trade/components/guards/TradeAccessGate.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface TradeAccessGateProps {
+  canTrade: boolean;
+}
+
+/**
+ * @description KIS 인증 여부에 따라 트레이드 화면 접근 가이드를 렌더링합니다.
+ * @see features/trade/components/TradeContainer.tsx TradeContainer의 인증 가드 UI를 분리합니다.
+ * @see app/(main)/settings/page.tsx 미인증 사용자를 설정 페이지로 이동시킵니다.
+ */
+export function TradeAccessGate({ canTrade }: TradeAccessGateProps) {
+  if (canTrade) return null;
+
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <section className="w-full max-w-xl rounded-2xl border border-brand-200 bg-background p-6 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/18">
+        {/* ========== UNVERIFIED NOTICE ========== */}
+        <h2 className="text-lg font-semibold text-foreground">
+          트레이딩을 시작하려면 KIS API 인증이 필요합니다.
+        </h2>
+        <p className="mt-2 text-sm text-muted-foreground">
+          설정 페이지에서 App Key/App Secret을 입력하고 연결 상태를 확인해 주세요.
+        </p>
+
+        {/* ========== ACTION ========== */}
+        <div className="mt-4">
+          <Button asChild className="bg-brand-600 hover:bg-brand-700">
+            <Link href="/settings">설정 페이지로 이동</Link>
+          </Button>
+        </div>
+      </section>
+    </div>
+  );
+}

features/trade/components/layout/TradeDashboardContent.tsx

@@ -0,0 +1,99 @@
+import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
+import { StockLineChart } from "@/features/trade/components/chart/StockLineChart";
+import { StockHeader } from "@/features/trade/components/header/StockHeader";
+import { DashboardLayout } from "@/features/trade/components/layout/DashboardLayout";
+import { OrderForm } from "@/features/trade/components/order/OrderForm";
+import { OrderBook } from "@/features/trade/components/orderbook/OrderBook";
+import type {
+  DashboardRealtimeTradeTick,
+  DashboardStockItem,
+  DashboardStockOrderBookResponse,
+} from "@/features/trade/types/trade.types";
+import { cn } from "@/lib/utils";
+
+interface TradeDashboardContentProps {
+  selectedStock: DashboardStockItem | null;
+  verifiedCredentials: KisRuntimeCredentials | null;
+  latestTick: DashboardRealtimeTradeTick | null;
+  recentTradeTicks: DashboardRealtimeTradeTick[];
+  orderBook: DashboardStockOrderBookResponse | null;
+  isOrderBookLoading: boolean;
+  referencePrice?: number;
+  currentPrice?: number;
+  change?: number;
+  changeRate?: number;
+}
+
+/**
+ * @description 트레이드 본문(헤더/차트/호가/주문)을 조합해서 렌더링합니다.
+ * @see features/trade/components/TradeContainer.tsx TradeContainer가 화면 조합 코드를 단순화하기 위해 사용합니다.
+ * @see features/trade/components/layout/DashboardLayout.tsx 실제 4분할 레이아웃은 DashboardLayout에서 처리합니다.
+ */
+export function TradeDashboardContent({
+  selectedStock,
+  verifiedCredentials,
+  latestTick,
+  recentTradeTicks,
+  orderBook,
+  isOrderBookLoading,
+  referencePrice,
+  currentPrice,
+  change,
+  changeRate,
+}: TradeDashboardContentProps) {
+  return (
+    <div
+      className={cn(
+        "transition-opacity duration-200 h-full flex-1 min-h-0 overflow-x-hidden",
+        !selectedStock && "opacity-20 pointer-events-none",
+      )}
+    >
+      {/* ========== DASHBOARD LAYOUT ========== */}
+      <DashboardLayout
+        header={
+          selectedStock ? (
+            <StockHeader
+              stock={selectedStock}
+              price={currentPrice?.toLocaleString() ?? "0"}
+              change={change?.toLocaleString() ?? "0"}
+              changeRate={changeRate?.toFixed(2) ?? "0.00"}
+              high={latestTick ? latestTick.high.toLocaleString() : undefined}
+              low={latestTick ? latestTick.low.toLocaleString() : undefined}
+              volume={
+                latestTick ? latestTick.accumulatedVolume.toLocaleString() : undefined
+              }
+            />
+          ) : null
+        }
+        chart={
+          selectedStock ? (
+            <div className="p-0 h-full flex flex-col">
+              <StockLineChart
+                symbol={selectedStock.symbol}
+                candles={selectedStock.candles}
+                credentials={verifiedCredentials}
+                latestTick={latestTick}
+              />
+            </div>
+          ) : (
+            <div className="h-full flex items-center justify-center text-muted-foreground">
+              차트 영역
+            </div>
+          )
+        }
+        orderBook={
+          <OrderBook
+            symbol={selectedStock?.symbol}
+            referencePrice={referencePrice}
+            currentPrice={currentPrice}
+            latestTick={latestTick}
+            recentTicks={recentTradeTicks}
+            orderBook={orderBook}
+            isLoading={isOrderBookLoading}
+          />
+        }
+        orderForm={<OrderForm stock={selectedStock ?? undefined} />}
+      />
+    </div>
+  );
+}

features/trade/components/orderbook/OrderBook.tsx

@@ -51,6 +51,52 @@ function fmtTime(hms: string) {
   return `${hms.slice(0, 2)}:${hms.slice(2, 4)}:${hms.slice(4, 6)}`;
 }
 
+/**
+ * @description 체결 틱 데이터에서 체결 주도 방향(매수/매도/중립)을 계산합니다.
+ * @see features/trade/components/orderbook/OrderBook.tsx TradeTape 체결량 글자색 결정에 사용합니다.
+ */
+function resolveTickExecutionSide(
+  tick: DashboardRealtimeTradeTick,
+  olderTick?: DashboardRealtimeTradeTick,
+) {
+  // 실시간 체결구분 코드(CNTG_CLS_CODE) 우선 해석
+  const executionClassCode = (tick.executionClassCode ?? "").trim();
+  if (executionClassCode === "1" || executionClassCode === "2") {
+    return "buy" as const;
+  }
+  if (executionClassCode === "4" || executionClassCode === "5") {
+    return "sell" as const;
+  }
+
+  // 누적 건수 기반 데이터는 절대값이 아니라 "증분"으로 판단해야 편향을 줄일 수 있습니다.
+  if (olderTick) {
+    const netBuyDelta =
+      tick.netBuyExecutionCount - olderTick.netBuyExecutionCount;
+    if (netBuyDelta > 0) return "buy" as const;
+    if (netBuyDelta < 0) return "sell" as const;
+
+    const buyCountDelta = tick.buyExecutionCount - olderTick.buyExecutionCount;
+    const sellCountDelta =
+      tick.sellExecutionCount - olderTick.sellExecutionCount;
+    if (buyCountDelta > sellCountDelta) return "buy" as const;
+    if (buyCountDelta < sellCountDelta) return "sell" as const;
+  }
+
+  if (tick.askPrice1 > 0 && tick.bidPrice1 > 0) {
+    if (tick.price >= tick.askPrice1 && tick.price > tick.bidPrice1) {
+      return "buy" as const;
+    }
+    if (tick.price <= tick.bidPrice1 && tick.price < tick.askPrice1) {
+      return "sell" as const;
+    }
+  }
+
+  if (tick.tradeStrength > 100) return "buy" as const;
+  if (tick.tradeStrength < 100) return "sell" as const;
+
+  return "neutral" as const;
+}
+
 // ─── 메인 컴포넌트 ──────────────────────────────────────
 
 /**
@@ -305,13 +351,17 @@ function BookSideRows({
               {isAsk && (
                 <>
                   <DepthBar ratio={ratio} side="ask" />
-                  <AnimatedQuantity
-                    value={row.size}
-                    format={fmt}
-                    useColor
-                    side="ask"
-                    className="relative z-10"
-                  />
+                  {row.size > 0 ? (
+                    <AnimatedQuantity
+                      value={row.size}
+                      format={fmt}
+                      useColor
+                      side="ask"
+                      className="relative z-10"
+                    />
+                  ) : (
+                    <span className="relative z-10 text-transparent">0</span>
+                  )}
                 </>
               )}
             </div>
@@ -350,13 +400,17 @@ function BookSideRows({
               {!isAsk && (
                 <>
                   <DepthBar ratio={ratio} side="bid" />
-                  <AnimatedQuantity
-                    value={row.size}
-                    format={fmt}
-                    useColor
-                    side="bid"
-                    className="relative z-10"
-                  />
+                  {row.size > 0 ? (
+                    <AnimatedQuantity
+                      value={row.size}
+                      format={fmt}
+                      useColor
+                      side="bid"
+                      className="relative z-10"
+                    />
+                  ) : (
+                    <span className="relative z-10 text-transparent">0</span>
+                  )}
                 </>
               )}
             </div>
@@ -506,25 +560,42 @@ function TradeTape({ ticks }: { ticks: DashboardRealtimeTradeTick[] }) {
               체결 데이터가 아직 없습니다.
             </div>
           )}
-          {ticks.map((t, i) => (
-            <div
-              key={`${t.tickTime}-${t.price}-${i}`}
-              className="grid h-8 grid-cols-4 border-b border-border/40 px-2 text-xs dark:border-brand-800/35"
-            >
-              <div className="flex items-center tabular-nums">
-                {fmtTime(t.tickTime)}
+          {ticks.map((t, i) => {
+            const olderTick = ticks[i + 1];
+            const executionSide = resolveTickExecutionSide(t, olderTick);
+            // UI 흐름: 체결목록 UI -> resolveTickExecutionSide(현재/이전 틱) -> 색상 class 결정 -> 체결량 렌더 반영
+            const volumeToneClass =
+              executionSide === "buy"
+                ? "text-red-600"
+                : executionSide === "sell"
+                  ? "text-blue-600 dark:text-blue-400"
+                  : "text-muted-foreground dark:text-brand-100/70";
+
+            return (
+              <div
+                key={`${t.tickTime}-${t.price}-${i}`}
+                className="grid h-8 grid-cols-4 border-b border-border/40 px-2 text-xs dark:border-brand-800/35"
+              >
+                <div className="flex items-center tabular-nums">
+                  {fmtTime(t.tickTime)}
+                </div>
+                <div className="flex items-center justify-end tabular-nums text-red-600">
+                  {fmt(t.price)}
+                </div>
+                <div
+                  className={cn(
+                    "flex items-center justify-end tabular-nums",
+                    volumeToneClass,
+                  )}
+                >
+                  {fmt(t.tradeVolume)}
+                </div>
+                <div className="flex items-center justify-end tabular-nums">
+                  {t.tradeStrength.toFixed(2)}%
+                </div>
               </div>
-              <div className="flex items-center justify-end tabular-nums text-red-600">
-                {fmt(t.price)}
-              </div>
-              <div className="flex items-center justify-end tabular-nums text-blue-600 dark:text-blue-400">
-                {fmt(t.tradeVolume)}
-              </div>
-              <div className="flex items-center justify-end tabular-nums">
-                {t.tradeStrength.toFixed(2)}%
-              </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </ScrollArea>
     </div>

features/trade/components/search/TradeSearchSection.tsx

@@ -0,0 +1,101 @@
+import type { FormEvent, KeyboardEvent, FocusEvent, MutableRefObject } from "react";
+import { StockSearchForm } from "@/features/trade/components/search/StockSearchForm";
+import { StockSearchHistory } from "@/features/trade/components/search/StockSearchHistory";
+import { StockSearchResults } from "@/features/trade/components/search/StockSearchResults";
+import type {
+  DashboardStockSearchHistoryItem,
+  DashboardStockSearchItem,
+} from "@/features/trade/types/trade.types";
+
+interface TradeSearchSectionProps {
+  canSearch: boolean;
+  isSearchPanelOpen: boolean;
+  isSearching: boolean;
+  keyword: string;
+  selectedSymbol?: string;
+  searchResults: DashboardStockSearchItem[];
+  searchHistory: DashboardStockSearchHistoryItem[];
+  searchShellRef: MutableRefObject<HTMLDivElement | null>;
+  onKeywordChange: (value: string) => void;
+  onSearchSubmit: (event: FormEvent) => void;
+  onSearchFocus: () => void;
+  onSearchShellBlur: (event: FocusEvent<HTMLDivElement>) => void;
+  onSearchShellKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+  onSelectStock: (item: DashboardStockSearchItem) => void;
+  onRemoveHistory: (symbol: string) => void;
+  onClearHistory: () => void;
+}
+
+/**
+ * @description 트레이드 화면 상단의 검색 입력/결과/히스토리 드롭다운 영역을 렌더링합니다.
+ * @see features/trade/components/TradeContainer.tsx TradeContainer에서 검색 섹션을 분리해 렌더 복잡도를 줄입니다.
+ * @see features/trade/hooks/useTradeSearchPanel.ts 패널 열림/닫힘 및 포커스 핸들러를 전달받습니다.
+ */
+export function TradeSearchSection({
+  canSearch,
+  isSearchPanelOpen,
+  isSearching,
+  keyword,
+  selectedSymbol,
+  searchResults,
+  searchHistory,
+  searchShellRef,
+  onKeywordChange,
+  onSearchSubmit,
+  onSearchFocus,
+  onSearchShellBlur,
+  onSearchShellKeyDown,
+  onSelectStock,
+  onRemoveHistory,
+  onClearHistory,
+}: TradeSearchSectionProps) {
+  return (
+    <div className="z-30 flex-none border-b bg-background/95 p-4 backdrop-blur-sm dark:border-brand-800/45 dark:bg-brand-900/22">
+      {/* ========== SEARCH SHELL ========== */}
+      <div
+        ref={searchShellRef}
+        onBlurCapture={onSearchShellBlur}
+        onKeyDownCapture={onSearchShellKeyDown}
+        className="relative mx-auto max-w-2xl"
+      >
+        <StockSearchForm
+          keyword={keyword}
+          onKeywordChange={onKeywordChange}
+          onSubmit={onSearchSubmit}
+          onInputFocus={onSearchFocus}
+          disabled={!canSearch}
+          isLoading={isSearching}
+        />
+
+        {/* ========== SEARCH DROPDOWN ========== */}
+        {isSearchPanelOpen && canSearch && (
+          <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-80 overflow-x-hidden overflow-y-auto rounded-md border bg-background shadow-lg dark:border-brand-800/45 dark:bg-brand-950/95">
+            {searchResults.length > 0 ? (
+              <StockSearchResults
+                items={searchResults}
+                onSelect={onSelectStock}
+                selectedSymbol={selectedSymbol}
+              />
+            ) : keyword.trim() ? (
+              <div className="px-3 py-2 text-sm text-muted-foreground">
+                {isSearching ? "검색 중..." : "검색 결과가 없습니다."}
+              </div>
+            ) : searchHistory.length > 0 ? (
+              <StockSearchHistory
+                items={searchHistory}
+                onSelect={onSelectStock}
+                onRemove={onRemoveHistory}
+                onClear={onClearHistory}
+                selectedSymbol={selectedSymbol}
+              />
+            ) : (
+              <div className="px-3 py-2 text-sm text-muted-foreground">
+                최근 검색 종목이 없습니다.
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}