정리

2026-02-12 10:24:03 +09:00
parent 3cea3e66d0
commit 8f1d75b4d5
41 changed files with 22902 additions and 43669 deletions
--- a/features/trade/components/layout/TradeDashboardContent.tsx
+++ b/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>
+  );
+}