전체적인 리팩토링

features/trade/components/TradeContainer.tsx

@@ -10,6 +10,7 @@ import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-st
 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 { AutotradeControlPanel } from "@/features/autotrade/components/AutotradeControlPanel";
 import { useStockSearch } from "@/features/trade/hooks/useStockSearch";
 import { useOrderBook } from "@/features/trade/hooks/useOrderBook";
 import { useKisTradeWebSocket } from "@/features/trade/hooks/useKisTradeWebSocket";
@@ -40,6 +41,8 @@ export function TradeContainer() {
     useState<DashboardStockOrderBookResponse | null>(null);
   // [State] 선택 종목과 매칭할 보유 종목 목록
   const [holdings, setHoldings] = useState<DashboardHoldingItem[]>([]);
+  // [State] 주문 패널에서 사용할 가용 예수금 스냅샷(원)
+  const [availableCashBalance, setAvailableCashBalance] = useState<number | null>(null);
   const { verifiedCredentials, isKisVerified, _hasHydrated } =
     useKisRuntimeStore(
       useShallow((state) => ({
@@ -125,15 +128,18 @@ export function TradeContainer() {
   const loadHoldingsSnapshot = useCallback(async () => {
     if (!verifiedCredentials?.accountNo?.trim()) {
       setHoldings([]);
+      setAvailableCashBalance(null);
       return;
     }
 
     try {
       const balance = await fetchDashboardBalance(verifiedCredentials);
-      setHoldings(balance.holdings);
+      setHoldings(balance.holdings.filter((item) => item.quantity > 0));
+      setAvailableCashBalance(balance.summary.cashBalance);
     } catch {
       // 상단 요약은 보조 정보이므로 실패 시 화면 전체를 막지 않고 빈 상태로 처리합니다.
       setHoldings([]);
+      setAvailableCashBalance(null);
     }
   }, [verifiedCredentials]);
 
@@ -328,6 +334,13 @@ export function TradeContainer() {
         onClearHistory={clearSearchHistory}
       />
 
+      <AutotradeControlPanel
+        selectedStock={selectedStock}
+        latestTick={latestTick}
+        credentials={verifiedCredentials}
+        canTrade={canTrade}
+      />
+
       {/* ========== DASHBOARD SECTION ========== */}
       <TradeDashboardContent
         selectedStock={selectedStock}
@@ -338,6 +351,7 @@ export function TradeContainer() {
         isOrderBookLoading={isOrderBookLoading}
         referencePrice={referencePrice}
         matchedHolding={matchedHolding}
+        availableCashBalance={availableCashBalance}
       />
     </div>
   );