95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
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 { 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;
|
|
matchedHolding?: DashboardHoldingItem | null;
|
|
availableCashBalance: number | null;
|
|
verifiedCredentials: KisRuntimeCredentials | null;
|
|
latestTick: DashboardRealtimeTradeTick | null;
|
|
recentTradeTicks: DashboardRealtimeTradeTick[];
|
|
orderBook: DashboardStockOrderBookResponse | null;
|
|
isOrderBookLoading: boolean;
|
|
referencePrice?: number;
|
|
}
|
|
|
|
/**
|
|
* @description 트레이드 본문(차트/체결+호가/주문)을 조합하여 렌더링합니다.
|
|
* @see features/trade/components/TradeContainer.tsx - TradeDashboardContent 렌더링 (selectedStock, verifiedCredentials 등 전달)
|
|
* @see features/trade/components/layout/DashboardLayout.tsx - 3열 레이아웃(차트 | 체결+호가 | 매도)을 처리합니다.
|
|
*/
|
|
export function TradeDashboardContent({
|
|
selectedStock,
|
|
matchedHolding,
|
|
availableCashBalance,
|
|
verifiedCredentials,
|
|
latestTick,
|
|
recentTradeTicks,
|
|
orderBook,
|
|
isOrderBookLoading,
|
|
referencePrice,
|
|
}: TradeDashboardContentProps) {
|
|
// [State] 차트 영역 보임/숨김 - 요청사항 반영: 모바일에서도 기본 표시
|
|
const [isChartVisible, setIsChartVisible] = useState(true);
|
|
|
|
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
|
|
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}
|
|
latestTick={latestTick}
|
|
recentTicks={recentTradeTicks}
|
|
orderBook={orderBook}
|
|
isLoading={isOrderBookLoading}
|
|
/>
|
|
}
|
|
orderForm={
|
|
<OrderForm
|
|
key={selectedStock?.symbol ?? "order-form-empty"}
|
|
stock={selectedStock ?? undefined}
|
|
matchedHolding={matchedHolding}
|
|
availableCashBalance={availableCashBalance}
|
|
/>
|
|
}
|
|
isChartVisible={isChartVisible}
|
|
onToggleChart={() => setIsChartVisible((prev) => !prev)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|