105 lines
3.7 KiB
TypeScript
105 lines
3.7 KiB
TypeScript
import { useState } from "react";
|
|
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) {
|
|
// [State] 차트 영역 보임/숨김 상태
|
|
const [isChartVisible, setIsChartVisible] = useState(false);
|
|
|
|
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}
|
|
latestTick={latestTick}
|
|
recentTicks={recentTradeTicks}
|
|
orderBook={orderBook}
|
|
isLoading={isOrderBookLoading}
|
|
/>
|
|
}
|
|
orderForm={<OrderForm stock={selectedStock ?? undefined} />}
|
|
isChartVisible={isChartVisible}
|
|
onToggleChart={() => setIsChartVisible((prev) => !prev)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|