트레이딩창 UI 배치 및 UX 수정 및 기획서 추가

features/trade/components/layout/TradeDashboardContent.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
+import type { DashboardHoldingItem } from "@/features/dashboard/types/dashboard.types";
 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";
@@ -14,36 +14,32 @@ import { cn } from "@/lib/utils";
 
 interface TradeDashboardContentProps {
   selectedStock: DashboardStockItem | null;
+  matchedHolding?: DashboardHoldingItem | 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에서 처리합니다.
+ * @description 트레이드 본문(차트/체결+호가/주문)을 조합하여 렌더링합니다.
+ * @see features/trade/components/TradeContainer.tsx - TradeDashboardContent 렌더링 (selectedStock, verifiedCredentials 등 전달)
+ * @see features/trade/components/layout/DashboardLayout.tsx - 3열 레이아웃(차트 | 체결+호가 | 매도)을 처리합니다.
  */
 export function TradeDashboardContent({
   selectedStock,
+  matchedHolding,
   verifiedCredentials,
   latestTick,
   recentTradeTicks,
   orderBook,
   isOrderBookLoading,
   referencePrice,
-  currentPrice,
-  change,
-  changeRate,
 }: TradeDashboardContentProps) {
-  // [State] 차트 영역 보임/숨김 상태
-  const [isChartVisible, setIsChartVisible] = useState(false);
+  // [State] 차트 영역 보임/숨김 - 요청사항 반영: 모바일에서도 기본 표시
+  const [isChartVisible, setIsChartVisible] = useState(true);
 
   return (
     <div
@@ -54,21 +50,6 @@ export function TradeDashboardContent({
     >
       {/* ========== 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">
@@ -95,7 +76,12 @@ export function TradeDashboardContent({
             isLoading={isOrderBookLoading}
           />
         }
-        orderForm={<OrderForm stock={selectedStock ?? undefined} />}
+        orderForm={
+          <OrderForm
+            stock={selectedStock ?? undefined}
+            matchedHolding={matchedHolding}
+          />
+        }
         isChartVisible={isChartVisible}
         onToggleChart={() => setIsChartVisible((prev) => !prev)}
       />