805 lines
27 KiB
TypeScript
805 lines
27 KiB
TypeScript
import { useMemo } from "react";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import type {
|
|
DashboardRealtimeTradeTick,
|
|
DashboardStockOrderBookResponse,
|
|
} from "@/features/trade/types/trade.types";
|
|
import { cn } from "@/lib/utils";
|
|
import { AnimatedQuantity } from "./AnimatedQuantity";
|
|
|
|
// ─── 타입 ───────────────────────────────────────────────
|
|
|
|
interface OrderBookProps {
|
|
symbol?: string;
|
|
referencePrice?: number;
|
|
latestTick: DashboardRealtimeTradeTick | null;
|
|
recentTicks: DashboardRealtimeTradeTick[];
|
|
orderBook: DashboardStockOrderBookResponse | null;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
interface BookRow {
|
|
price: number;
|
|
size: number;
|
|
changeValue: number | null;
|
|
isHighlighted: boolean;
|
|
}
|
|
|
|
/**
|
|
* @description 실시간 호가 레벨 데이터가 실제 값을 포함하는지 검사합니다.
|
|
* @see features/trade/components/orderbook/OrderBook.tsx levels 계산에서 WS 호가 유효성 판단에 사용합니다.
|
|
*/
|
|
function hasOrderBookLevelData(levels: DashboardStockOrderBookResponse["levels"]) {
|
|
return levels.some(
|
|
(level) =>
|
|
level.askPrice > 0 ||
|
|
level.bidPrice > 0 ||
|
|
level.askSize > 0 ||
|
|
level.bidSize > 0,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @description H0STOAA0 미수신 상황에서 체결(H0UNCNT0) 데이터로 최소 1호가를 구성합니다.
|
|
* @see features/trade/utils/kisRealtimeUtils.ts parseKisRealtimeTickBatch 체결 데이터에서 1호가/잔량/총잔량을 파싱합니다.
|
|
*/
|
|
function buildFallbackLevelsFromTick(latestTick: DashboardRealtimeTradeTick | null) {
|
|
if (!latestTick) return [] as DashboardStockOrderBookResponse["levels"];
|
|
if (latestTick.askPrice1 <= 0 && latestTick.bidPrice1 <= 0) {
|
|
return [] as DashboardStockOrderBookResponse["levels"];
|
|
}
|
|
|
|
return [
|
|
{
|
|
askPrice: latestTick.askPrice1,
|
|
bidPrice: latestTick.bidPrice1,
|
|
askSize: Math.max(latestTick.askSize1, 0),
|
|
bidSize: Math.max(latestTick.bidSize1, 0),
|
|
},
|
|
];
|
|
}
|
|
|
|
// ─── 유틸리티 함수 ──────────────────────────────────────
|
|
|
|
/** 천단위 구분 포맷 */
|
|
function fmt(v: number) {
|
|
return Number.isFinite(v) ? v.toLocaleString("ko-KR") : "0";
|
|
}
|
|
|
|
/** 부호 포함 퍼센트 */
|
|
function fmtPct(v: number) {
|
|
return `${v > 0 ? "+" : ""}${v.toFixed(2)}%`;
|
|
}
|
|
|
|
/** 등락률 계산 */
|
|
function pctChange(price: number, base: number) {
|
|
return base > 0 ? ((price - base) / base) * 100 : 0;
|
|
}
|
|
|
|
/**
|
|
* @description 기준가 대비 증감값/증감률을 함께 계산합니다.
|
|
* @see features/trade/components/orderbook/OrderBook.tsx buildBookRows
|
|
*/
|
|
function resolvePriceChange(price: number, basePrice: number) {
|
|
if (price <= 0 || basePrice <= 0) {
|
|
return { changeValue: null } as const;
|
|
}
|
|
|
|
const changeValue = price - basePrice;
|
|
|
|
return { changeValue } as const;
|
|
}
|
|
|
|
/**
|
|
* @description 증감 숫자를 부호 포함 문자열로 포맷합니다.
|
|
* @see features/trade/components/orderbook/OrderBook.tsx BookSideRows
|
|
*/
|
|
function fmtSignedChange(v: number) {
|
|
if (!Number.isFinite(v)) return "-";
|
|
if (v > 0) return `+${fmt(v)}`;
|
|
if (v < 0) return `-${fmt(Math.abs(v))}`;
|
|
return "0";
|
|
}
|
|
|
|
/**
|
|
* @description 증감값에 따라 색상 톤 클래스를 반환합니다.
|
|
* @see features/trade/components/orderbook/OrderBook.tsx BookSideRows
|
|
*/
|
|
function getChangeToneClass(
|
|
changeValue: number | null,
|
|
neutralClass = "text-muted-foreground",
|
|
) {
|
|
if (changeValue === null) {
|
|
return neutralClass;
|
|
}
|
|
if (changeValue > 0) {
|
|
return "text-red-500";
|
|
}
|
|
if (changeValue < 0) {
|
|
return "text-blue-600 dark:text-blue-400";
|
|
}
|
|
return neutralClass;
|
|
}
|
|
|
|
/** 체결 시각 포맷 */
|
|
function fmtTime(hms: string) {
|
|
if (!hms || hms.length !== 6) return "--:--:--";
|
|
return `${hms.slice(0, 2)}:${hms.slice(2, 4)}:${hms.slice(4, 6)}`;
|
|
}
|
|
|
|
/**
|
|
* @description 체결 틱 데이터에서 체결 주도 방향(매수/매도/중립)을 계산합니다.
|
|
* @see features/trade/components/orderbook/OrderBook.tsx TradeTape 체결량 글자색 결정에 사용합니다.
|
|
*/
|
|
function resolveTickExecutionSide(
|
|
tick: DashboardRealtimeTradeTick,
|
|
olderTick?: DashboardRealtimeTradeTick,
|
|
) {
|
|
// 실시간 체결구분 코드(CNTG_CLS_CODE) 우선 해석
|
|
const executionClassCode = (tick.executionClassCode ?? "").trim();
|
|
if (executionClassCode === "1" || executionClassCode === "2") {
|
|
return "buy" as const;
|
|
}
|
|
if (executionClassCode === "4" || executionClassCode === "5") {
|
|
return "sell" as const;
|
|
}
|
|
|
|
// 누적 건수 기반 데이터는 절대값이 아니라 "증분"으로 판단해야 편향을 줄일 수 있습니다.
|
|
if (olderTick) {
|
|
const netBuyDelta =
|
|
tick.netBuyExecutionCount - olderTick.netBuyExecutionCount;
|
|
if (netBuyDelta > 0) return "buy" as const;
|
|
if (netBuyDelta < 0) return "sell" as const;
|
|
|
|
const buyCountDelta = tick.buyExecutionCount - olderTick.buyExecutionCount;
|
|
const sellCountDelta =
|
|
tick.sellExecutionCount - olderTick.sellExecutionCount;
|
|
if (buyCountDelta > sellCountDelta) return "buy" as const;
|
|
if (buyCountDelta < sellCountDelta) return "sell" as const;
|
|
}
|
|
|
|
if (tick.askPrice1 > 0 && tick.bidPrice1 > 0) {
|
|
if (tick.price >= tick.askPrice1 && tick.price > tick.bidPrice1) {
|
|
return "buy" as const;
|
|
}
|
|
if (tick.price <= tick.bidPrice1 && tick.price < tick.askPrice1) {
|
|
return "sell" as const;
|
|
}
|
|
}
|
|
|
|
if (tick.tradeStrength > 100) return "buy" as const;
|
|
if (tick.tradeStrength < 100) return "sell" as const;
|
|
|
|
return "neutral" as const;
|
|
}
|
|
|
|
/**
|
|
* @description 호가 레벨을 화면 렌더링용 행 모델로 변환합니다.
|
|
* UI 흐름: OrderBook(levels/basePrice/latestPrice) -> buildBookRows -> BookSideRows -> 가격/증감 반영
|
|
* @see features/trade/components/orderbook/OrderBook.tsx OrderBook askRows/bidRows 계산
|
|
*/
|
|
function buildBookRows({
|
|
levels,
|
|
side,
|
|
basePrice,
|
|
latestPrice,
|
|
}: {
|
|
levels: DashboardStockOrderBookResponse["levels"];
|
|
side: "ask" | "bid";
|
|
basePrice: number;
|
|
latestPrice: number;
|
|
}) {
|
|
const normalizedLevels = side === "ask" ? [...levels].reverse() : levels;
|
|
|
|
return normalizedLevels.map((level) => {
|
|
const price = side === "ask" ? level.askPrice : level.bidPrice;
|
|
const size = side === "ask" ? level.askSize : level.bidSize;
|
|
const { changeValue } = resolvePriceChange(price, basePrice);
|
|
|
|
return {
|
|
price,
|
|
size: Math.max(size, 0),
|
|
changeValue,
|
|
isHighlighted: latestPrice > 0 && price === latestPrice,
|
|
} satisfies BookRow;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @description 호가/체결 증감 표시용 기준가(전일종가)를 결정합니다.
|
|
* @summary UI 흐름: OrderBook props -> resolveReferencePrice -> 호가행/체결가 증감 계산 반영
|
|
* @see features/trade/components/orderbook/OrderBook.tsx basePrice 계산
|
|
*/
|
|
function resolveReferencePrice({
|
|
referencePrice,
|
|
latestTick,
|
|
}: {
|
|
referencePrice?: number;
|
|
latestTick: DashboardRealtimeTradeTick | null;
|
|
}) {
|
|
if ((referencePrice ?? 0) > 0) {
|
|
return referencePrice!;
|
|
}
|
|
|
|
// referencePrice 미전달 케이스에서도 틱 데이터(price-change)로 전일종가를 역산합니다.
|
|
if (latestTick?.price && Number.isFinite(latestTick.change)) {
|
|
const derivedPrevClose = latestTick.price - latestTick.change;
|
|
if (derivedPrevClose > 0) {
|
|
return derivedPrevClose;
|
|
}
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
|
|
// ─── 메인 컴포넌트 ──────────────────────────────────────
|
|
|
|
/**
|
|
* 호가창 — 실시간 매도·매수 10호가와 체결 목록을 표시합니다.
|
|
*/
|
|
export function OrderBook({
|
|
symbol,
|
|
referencePrice,
|
|
latestTick,
|
|
recentTicks,
|
|
orderBook,
|
|
isLoading,
|
|
}: OrderBookProps) {
|
|
const realtimeLevels = useMemo(() => orderBook?.levels ?? [], [orderBook]);
|
|
const fallbackLevelsFromTick = useMemo(
|
|
() => buildFallbackLevelsFromTick(latestTick),
|
|
[latestTick],
|
|
);
|
|
const levels = useMemo(() => {
|
|
if (hasOrderBookLevelData(realtimeLevels)) return realtimeLevels;
|
|
return fallbackLevelsFromTick;
|
|
}, [fallbackLevelsFromTick, realtimeLevels]);
|
|
const isTickFallbackActive =
|
|
!hasOrderBookLevelData(realtimeLevels) && fallbackLevelsFromTick.length > 0;
|
|
|
|
// 체결가: tick에서 우선, 없으면 0
|
|
const latestPrice =
|
|
latestTick?.price && latestTick.price > 0 ? latestTick.price : 0;
|
|
|
|
// 등락률 기준가
|
|
const basePrice = resolveReferencePrice({ referencePrice, latestTick });
|
|
|
|
// 매도호가 (역순: 10호가 → 1호가)
|
|
const askRows: BookRow[] = useMemo(
|
|
() =>
|
|
buildBookRows({
|
|
levels,
|
|
side: "ask",
|
|
basePrice,
|
|
latestPrice,
|
|
}),
|
|
[levels, basePrice, latestPrice],
|
|
);
|
|
|
|
// 매수호가 (1호가 → 10호가)
|
|
const bidRows: BookRow[] = useMemo(
|
|
() =>
|
|
buildBookRows({
|
|
levels,
|
|
side: "bid",
|
|
basePrice,
|
|
latestPrice,
|
|
}),
|
|
[levels, basePrice, latestPrice],
|
|
);
|
|
|
|
const askMax = Math.max(1, ...askRows.map((r) => r.size));
|
|
const bidMax = Math.max(1, ...bidRows.map((r) => r.size));
|
|
|
|
// 스프레드·수급 불균형
|
|
const bestAsk = levels.find((l) => l.askPrice > 0)?.askPrice ?? 0;
|
|
const bestBid = levels.find((l) => l.bidPrice > 0)?.bidPrice ?? 0;
|
|
const spread = bestAsk > 0 && bestBid > 0 ? bestAsk - bestBid : 0;
|
|
const totalAsk =
|
|
orderBook?.totalAskSize && orderBook.totalAskSize > 0
|
|
? orderBook.totalAskSize
|
|
: (latestTick?.totalAskSize ?? 0);
|
|
const totalBid =
|
|
orderBook?.totalBidSize && orderBook.totalBidSize > 0
|
|
? orderBook.totalBidSize
|
|
: (latestTick?.totalBidSize ?? 0);
|
|
const imbalance =
|
|
totalAsk + totalBid > 0
|
|
? ((totalBid - totalAsk) / (totalAsk + totalBid)) * 100
|
|
: 0;
|
|
|
|
// 체결가 행 중앙 스크롤
|
|
|
|
// ─── 빈/로딩 상태 ───
|
|
if (!symbol) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
|
종목을 선택해주세요.
|
|
</div>
|
|
);
|
|
}
|
|
if (isLoading && !orderBook && fallbackLevelsFromTick.length === 0) {
|
|
return <OrderBookSkeleton />;
|
|
}
|
|
if (!orderBook && fallbackLevelsFromTick.length === 0) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
|
호가 정보를 가져오지 못했습니다.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full min-h-0 flex-col bg-white dark:bg-brand-900/10">
|
|
<Tabs defaultValue="normal" className="h-full min-h-0">
|
|
{/* 탭 헤더 */}
|
|
<div className="border-b px-2 pt-2 dark:border-brand-800/45 dark:bg-brand-900/28">
|
|
<TabsList variant="line" className="w-full justify-start">
|
|
<TabsTrigger value="normal" className="px-3">
|
|
일반호가
|
|
</TabsTrigger>
|
|
<TabsTrigger value="cumulative" className="px-3">
|
|
누적호가
|
|
</TabsTrigger>
|
|
<TabsTrigger value="order" className="px-3">
|
|
호가주문
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
|
|
{/* ── 일반호가 탭 ── */}
|
|
<TabsContent value="normal" className="min-h-0 flex-1">
|
|
<div className="flex h-full min-h-0 flex-col border-t dark:border-brand-800/45 xl:grid xl:grid-cols-[minmax(0,1fr)_320px_168px] xl:overflow-hidden">
|
|
{/* 호가 테이블 */}
|
|
<div className="flex min-h-0 flex-col xl:border-r dark:border-brand-800/45">
|
|
{isTickFallbackActive && (
|
|
<div className="border-b border-amber-200 bg-amber-50 px-2 py-1 text-[11px] text-amber-700 dark:border-amber-700/40 dark:bg-amber-900/20 dark:text-amber-200">
|
|
시간외 전용 호가(`H0STOAA0`) 미수신 상태입니다. 체결(`H0UNCNT0`)
|
|
1호가 기준으로 표시 중입니다.
|
|
</div>
|
|
)}
|
|
<BookHeader />
|
|
<ScrollArea className="min-h-0 flex-1 [&>[data-slot=scroll-area-scrollbar]]:hidden xl:[&>[data-slot=scroll-area-scrollbar]]:flex">
|
|
{/* 매도호가 */}
|
|
<BookSideRows rows={askRows} side="ask" maxSize={askMax} />
|
|
|
|
{/* 중앙 바: 현재 체결가 */}
|
|
<div className="grid h-8 grid-cols-3 items-center border-y-2 border-amber-400 bg-amber-50/80 dark:bg-amber-900/30 xl:h-9">
|
|
<div className="px-2 text-right text-[10px] font-medium text-muted-foreground dark:text-brand-100/72">
|
|
{totalAsk > 0 ? fmt(totalAsk) : ""}
|
|
</div>
|
|
<div className="flex items-center justify-center gap-1">
|
|
<span className="text-xs font-bold tabular-nums">
|
|
{latestPrice > 0
|
|
? fmt(latestPrice)
|
|
: bestAsk > 0
|
|
? fmt(bestAsk)
|
|
: "-"}
|
|
</span>
|
|
{latestPrice > 0 && basePrice > 0 && (
|
|
<span
|
|
className={cn(
|
|
"text-[10px] font-medium",
|
|
latestPrice >= basePrice
|
|
? "text-red-500"
|
|
: "text-blue-600 dark:text-blue-400",
|
|
)}
|
|
>
|
|
{fmtPct(pctChange(latestPrice, basePrice))}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="px-2 text-left text-[10px] font-medium text-muted-foreground dark:text-brand-100/72">
|
|
{totalBid > 0 ? fmt(totalBid) : ""}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 매수호가 */}
|
|
<BookSideRows rows={bidRows} side="bid" maxSize={bidMax} />
|
|
</ScrollArea>
|
|
</div>
|
|
|
|
{/* 체결 목록: 데스크톱에서는 호가 오른쪽, 모바일에서는 아래 */}
|
|
<div className="min-h-[220px] border-t border-border/60 dark:border-brand-800/45 xl:min-h-0 xl:border-t-0 xl:border-r">
|
|
<TradeTape ticks={recentTicks} />
|
|
</div>
|
|
|
|
{/* 우측 요약 패널 */}
|
|
<div className="hidden xl:block min-h-0">
|
|
<SummaryPanel
|
|
orderBook={orderBook}
|
|
latestTick={latestTick}
|
|
spread={spread}
|
|
imbalance={imbalance}
|
|
totalAsk={totalAsk}
|
|
totalBid={totalBid}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* ── 누적호가 탭 ── */}
|
|
<TabsContent value="cumulative" className="min-h-0 flex-1">
|
|
<ScrollArea className="h-full border-t dark:border-brand-800/45">
|
|
<div className="p-3">
|
|
<div className="mb-2 grid grid-cols-3 text-[11px] font-medium text-muted-foreground">
|
|
<span>매도누적</span>
|
|
<span className="text-center">호가</span>
|
|
<span className="text-right">매수누적</span>
|
|
</div>
|
|
<CumulativeRows asks={askRows} bids={bidRows} />
|
|
</div>
|
|
</ScrollArea>
|
|
</TabsContent>
|
|
|
|
{/* ── 호가주문 탭 ── */}
|
|
<TabsContent value="order" className="min-h-0 flex-1">
|
|
<div className="flex h-full items-center justify-center border-t px-4 text-sm text-muted-foreground dark:border-brand-800/45 dark:text-brand-100/75">
|
|
호가주문 탭은 주문 입력 패널과 연동해 확장할 수 있습니다.
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── 하위 컴포넌트 ──────────────────────────────────────
|
|
|
|
/** 호가 표 헤더 */
|
|
function BookHeader() {
|
|
return (
|
|
<div className="grid h-8 grid-cols-3 border-b bg-muted/20 text-[11px] font-medium text-muted-foreground dark:border-brand-800/45 dark:bg-brand-900/35 dark:text-brand-100/78">
|
|
<div className="flex items-center justify-end px-2">매도잔량</div>
|
|
<div className="flex items-center justify-center border-x">호가</div>
|
|
<div className="flex items-center justify-start px-2">매수잔량</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 매도 또는 매수 호가 행 목록 */
|
|
function BookSideRows({
|
|
rows,
|
|
side,
|
|
maxSize,
|
|
}: {
|
|
rows: BookRow[];
|
|
side: "ask" | "bid";
|
|
maxSize: number;
|
|
}) {
|
|
const isAsk = side === "ask";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
isAsk
|
|
? "bg-red-50/20 dark:bg-red-950/18"
|
|
: "bg-blue-50/55 dark:bg-blue-950/22",
|
|
)}
|
|
>
|
|
{rows.map((row, i) => {
|
|
const ratio =
|
|
maxSize > 0 ? Math.min((row.size / maxSize) * 100, 100) : 0;
|
|
|
|
return (
|
|
<div
|
|
key={`${side}-${row.price}-${i}`}
|
|
className={cn(
|
|
"grid h-7 grid-cols-3 border-b border-border/40 text-[11px] xl:h-8 xl:text-xs dark:border-brand-800/35",
|
|
row.isHighlighted &&
|
|
"ring-1 ring-inset ring-amber-400 bg-amber-100/50 dark:bg-amber-800/30",
|
|
)}
|
|
>
|
|
{/* 매도잔량 (좌측) */}
|
|
<div className="relative flex items-center justify-end overflow-hidden px-2">
|
|
{isAsk && (
|
|
<>
|
|
<DepthBar ratio={ratio} side="ask" />
|
|
{row.size > 0 ? (
|
|
<AnimatedQuantity
|
|
value={row.size}
|
|
format={fmt}
|
|
useColor
|
|
side="ask"
|
|
className="relative z-10"
|
|
/>
|
|
) : (
|
|
<span className="relative z-10 text-transparent">0</span>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* 호가 (중앙) */}
|
|
<div
|
|
className={cn(
|
|
"flex items-center justify-center border-x font-medium tabular-nums gap-1",
|
|
row.isHighlighted &&
|
|
"border-x-amber-400 bg-amber-50/70 dark:bg-amber-800/20",
|
|
)}
|
|
>
|
|
<span
|
|
className={
|
|
isAsk ? "text-red-600" : "text-blue-600 dark:text-blue-400"
|
|
}
|
|
>
|
|
{row.price > 0 ? fmt(row.price) : "-"}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"w-[58px] shrink-0 text-right text-[10px] tabular-nums",
|
|
getChangeToneClass(row.changeValue),
|
|
)}
|
|
>
|
|
{row.changeValue === null ? "-" : fmtSignedChange(row.changeValue)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* 매수잔량 (우측) */}
|
|
<div className="relative flex items-center justify-start overflow-hidden px-1">
|
|
{!isAsk && (
|
|
<>
|
|
<DepthBar ratio={ratio} side="bid" />
|
|
{row.size > 0 ? (
|
|
<AnimatedQuantity
|
|
value={row.size}
|
|
format={fmt}
|
|
useColor
|
|
side="bid"
|
|
className="relative z-10"
|
|
/>
|
|
) : (
|
|
<span className="relative z-10 text-transparent">0</span>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 우측 요약 패널 */
|
|
function SummaryPanel({
|
|
orderBook,
|
|
latestTick,
|
|
spread,
|
|
imbalance,
|
|
totalAsk,
|
|
totalBid,
|
|
}: {
|
|
orderBook: DashboardStockOrderBookResponse | null;
|
|
latestTick: DashboardRealtimeTradeTick | null;
|
|
spread: number;
|
|
imbalance: number;
|
|
totalAsk: number;
|
|
totalBid: number;
|
|
}) {
|
|
return (
|
|
<div className="min-w-0 border-l bg-muted/10 p-2 text-[11px] dark:border-brand-800/45 dark:bg-brand-900/30">
|
|
<Row
|
|
label="실시간"
|
|
value={orderBook || latestTick ? "연결됨" : "끊김"}
|
|
tone={orderBook || latestTick ? "bid" : undefined}
|
|
/>
|
|
<Row
|
|
label="거래량"
|
|
value={fmt(latestTick?.tradeVolume ?? orderBook?.anticipatedVolume ?? 0)}
|
|
/>
|
|
<Row
|
|
label="누적거래량"
|
|
value={fmt(
|
|
latestTick?.accumulatedVolume ?? orderBook?.accumulatedVolume ?? 0,
|
|
)}
|
|
/>
|
|
<Row
|
|
label="체결강도"
|
|
value={
|
|
latestTick
|
|
? `${latestTick.tradeStrength.toFixed(2)}%`
|
|
: orderBook?.anticipatedChangeRate !== undefined
|
|
? `${orderBook.anticipatedChangeRate.toFixed(2)}%`
|
|
: "-"
|
|
}
|
|
/>
|
|
<Row label="예상체결가" value={fmt(orderBook?.anticipatedPrice ?? 0)} />
|
|
<Row
|
|
label="매도1호가"
|
|
value={latestTick ? fmt(latestTick.askPrice1) : "-"}
|
|
tone="ask"
|
|
/>
|
|
<Row
|
|
label="매수1호가"
|
|
value={latestTick ? fmt(latestTick.bidPrice1) : "-"}
|
|
tone="bid"
|
|
/>
|
|
<Row
|
|
label="매수체결"
|
|
value={latestTick ? fmt(latestTick.buyExecutionCount) : "-"}
|
|
/>
|
|
<Row
|
|
label="매도체결"
|
|
value={latestTick ? fmt(latestTick.sellExecutionCount) : "-"}
|
|
/>
|
|
<Row
|
|
label="순매수체결"
|
|
value={latestTick ? fmt(latestTick.netBuyExecutionCount) : "-"}
|
|
/>
|
|
<Row label="총 매도잔량" value={fmt(totalAsk)} tone="ask" />
|
|
<Row label="총 매수잔량" value={fmt(totalBid)} tone="bid" />
|
|
<Row label="스프레드" value={fmt(spread)} />
|
|
<Row
|
|
label="수급 불균형"
|
|
value={`${imbalance >= 0 ? "+" : ""}${imbalance.toFixed(2)}%`}
|
|
tone={imbalance >= 0 ? "bid" : "ask"}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 요약 패널 단일 행 */
|
|
function Row({
|
|
label,
|
|
value,
|
|
tone,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
tone?: "ask" | "bid";
|
|
}) {
|
|
return (
|
|
<div className="mb-1.5 flex items-center justify-between gap-2 rounded border bg-background px-2 py-1 dark:border-brand-800/45 dark:bg-black/20">
|
|
<span className="min-w-0 truncate text-muted-foreground dark:text-brand-100/70">
|
|
{label}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"shrink-0 font-medium tabular-nums",
|
|
tone === "ask" && "text-red-600",
|
|
tone === "bid" && "text-blue-600 dark:text-blue-400",
|
|
)}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 잔량 깊이 바 */
|
|
function DepthBar({ ratio, side }: { ratio: number; side: "ask" | "bid" }) {
|
|
if (ratio <= 0) return null;
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"absolute inset-y-1 z-0 rounded-sm",
|
|
side === "ask"
|
|
? "right-1 bg-red-200/50 dark:bg-red-800/40"
|
|
: "left-1 bg-blue-200/55 dark:bg-blue-500/35",
|
|
)}
|
|
style={{ width: `${ratio}%` }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/** 체결 목록 (Trade Tape) */
|
|
function TradeTape({ ticks }: { ticks: DashboardRealtimeTradeTick[] }) {
|
|
return (
|
|
<div className="flex h-full min-h-0 flex-col bg-background dark:bg-brand-900/20">
|
|
<div className="grid h-7 grid-cols-4 border-b bg-muted/20 px-2 text-[11px] font-medium text-muted-foreground dark:border-brand-800/45 dark:bg-brand-900/35 dark:text-brand-100/78">
|
|
<div className="flex items-center">체결시각</div>
|
|
<div className="flex items-center justify-end">체결가</div>
|
|
<div className="flex items-center justify-end">체결량</div>
|
|
<div className="flex items-center justify-end">체결강도</div>
|
|
</div>
|
|
<ScrollArea className="min-h-0 flex-1">
|
|
<div>
|
|
{ticks.length === 0 && (
|
|
<div className="flex min-h-[160px] items-center justify-center text-xs text-muted-foreground dark:text-brand-100/70">
|
|
체결 데이터가 아직 없습니다.
|
|
</div>
|
|
)}
|
|
{ticks.map((t, i) => {
|
|
const olderTick = ticks[i + 1];
|
|
const executionSide = resolveTickExecutionSide(t, olderTick);
|
|
// UI 흐름: 체결목록 UI -> resolveTickExecutionSide(현재/이전 틱) -> 색상 class 결정 -> 체결량 렌더 반영
|
|
const volumeToneClass =
|
|
executionSide === "buy"
|
|
? "text-red-600"
|
|
: executionSide === "sell"
|
|
? "text-blue-600 dark:text-blue-400"
|
|
: "text-muted-foreground dark:text-brand-100/70";
|
|
|
|
return (
|
|
<div
|
|
key={`${t.tickTime}-${t.price}-${i}`}
|
|
className="grid h-8 grid-cols-4 border-b border-border/40 px-2 text-xs dark:border-brand-800/35"
|
|
>
|
|
<div className="flex items-center tabular-nums">
|
|
{fmtTime(t.tickTime)}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"flex items-center justify-end tabular-nums",
|
|
getChangeToneClass(t.change, "text-foreground dark:text-brand-50"),
|
|
)}
|
|
>
|
|
{fmt(t.price)}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"flex items-center justify-end tabular-nums",
|
|
volumeToneClass,
|
|
)}
|
|
>
|
|
{fmt(t.tradeVolume)}
|
|
</div>
|
|
<div className="flex items-center justify-end tabular-nums">
|
|
{t.tradeStrength.toFixed(2)}%
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 누적호가 행 */
|
|
function CumulativeRows({ asks, bids }: { asks: BookRow[]; bids: BookRow[] }) {
|
|
const rows = useMemo(() => {
|
|
const len = Math.max(asks.length, bids.length);
|
|
const result: { askAcc: number; bidAcc: number; price: number }[] = [];
|
|
for (let i = 0; i < len; i++) {
|
|
const prevAsk = result[i - 1]?.askAcc ?? 0;
|
|
const prevBid = result[i - 1]?.bidAcc ?? 0;
|
|
result.push({
|
|
askAcc: prevAsk + (asks[i]?.size ?? 0),
|
|
bidAcc: prevBid + (bids[i]?.size ?? 0),
|
|
price: asks[i]?.price || bids[i]?.price || 0,
|
|
});
|
|
}
|
|
return result;
|
|
}, [asks, bids]);
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
{rows.map((r, i) => (
|
|
<div
|
|
key={i}
|
|
className="grid h-7 grid-cols-3 items-center rounded border bg-background px-2 text-xs dark:border-brand-800/45 dark:bg-black/20"
|
|
>
|
|
<span className="tabular-nums text-red-600">{fmt(r.askAcc)}</span>
|
|
<span className="text-center font-medium tabular-nums">
|
|
{fmt(r.price)}
|
|
</span>
|
|
<span className="text-right tabular-nums text-blue-600 dark:text-blue-400">
|
|
{fmt(r.bidAcc)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 로딩 스켈레톤 */
|
|
function OrderBookSkeleton() {
|
|
return (
|
|
<div className="flex h-full flex-col p-3">
|
|
<div className="mb-3 grid grid-cols-3 gap-2">
|
|
<Skeleton className="h-8 w-full" />
|
|
<Skeleton className="h-8 w-full" />
|
|
<Skeleton className="h-8 w-full" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
{Array.from({ length: 16 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-7 w-full" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|