474 lines
15 KiB
TypeScript
474 lines
15 KiB
TypeScript
import { useMemo } from "react";
|
|
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";
|
|
import type { BookRow } from "./orderbook-utils";
|
|
import {
|
|
fmt,
|
|
fmtPct,
|
|
fmtSignedChange,
|
|
fmtTime,
|
|
getChangeToneClass,
|
|
pctChange,
|
|
resolveTickExecutionSide,
|
|
} from "./orderbook-utils";
|
|
|
|
/**
|
|
* @description 호가창 중앙의 현재가/등락률/총잔량 바를 렌더링합니다.
|
|
* @summary UI 흐름: OrderBook -> CurrentPriceBar -> 매도/매수 구간 사이 현재 체결 상태를 강조 표시
|
|
* @see features/trade/components/orderbook/OrderBook.tsx 일반호가 탭의 모바일/데스크톱 공통 현재가 행
|
|
*/
|
|
export function CurrentPriceBar({
|
|
latestPrice,
|
|
basePrice,
|
|
bestAsk,
|
|
totalAsk,
|
|
totalBid,
|
|
}: {
|
|
latestPrice: number;
|
|
basePrice: number;
|
|
bestAsk: number;
|
|
totalAsk: number;
|
|
totalBid: number;
|
|
}) {
|
|
return (
|
|
<div className="grid h-10 grid-cols-3 items-center border-y-2 border-amber-400 bg-linear-to-r from-blue-50/60 via-amber-50/90 to-red-50/60 shadow-[0_0_10px_rgba(251,191,36,0.25)] dark:from-blue-950/30 dark:via-amber-900/30 dark:to-red-950/30 xl:h-10">
|
|
<div className="px-2 text-right text-[10px] font-semibold text-blue-600 dark:text-blue-400">
|
|
{totalAsk > 0 ? fmt(totalAsk) : ""}
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center">
|
|
<span
|
|
className={cn(
|
|
"text-base leading-none font-bold tabular-nums",
|
|
latestPrice > 0 && basePrice > 0
|
|
? latestPrice >= basePrice
|
|
? "text-red-600"
|
|
: "text-blue-600 dark:text-blue-400"
|
|
: "text-foreground dark:text-brand-50",
|
|
)}
|
|
>
|
|
{latestPrice > 0 ? fmt(latestPrice) : bestAsk > 0 ? fmt(bestAsk) : "-"}
|
|
</span>
|
|
{latestPrice > 0 && basePrice > 0 && (
|
|
<span
|
|
className={cn(
|
|
"text-[11px] font-semibold leading-none",
|
|
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-semibold text-red-600 dark:text-red-400">
|
|
{totalBid > 0 ? fmt(totalBid) : ""}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 호가 표 헤더 */
|
|
export function BookHeader() {
|
|
return (
|
|
<div className="grid h-8 grid-cols-3 border-b bg-linear-to-r from-blue-50/40 via-muted/20 to-red-50/40 text-[11px] font-semibold text-muted-foreground dark:border-brand-800/50 dark:from-blue-950/30 dark:via-brand-900/40 dark:to-red-950/30 dark:text-brand-100/80">
|
|
<div className="flex items-center justify-end px-2 text-blue-600/80 dark:text-blue-400/80">
|
|
매도잔량
|
|
</div>
|
|
<div className="flex items-center justify-center border-x border-border/50 dark:border-brand-800/40">
|
|
호가
|
|
</div>
|
|
<div className="flex items-center justify-start px-2 text-red-600/80 dark:text-red-400/80">
|
|
매수잔량
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 매도 또는 매수 호가 행 목록 */
|
|
export function BookSideRows({
|
|
rows,
|
|
side,
|
|
maxSize,
|
|
}: {
|
|
rows: BookRow[];
|
|
side: "ask" | "bid";
|
|
maxSize: number;
|
|
}) {
|
|
const isAsk = side === "ask";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
isAsk
|
|
? "bg-linear-to-r from-blue-50/40 via-blue-50/10 to-transparent dark:from-blue-950/35 dark:via-blue-950/10 dark:to-transparent"
|
|
: "bg-linear-to-r from-transparent via-red-50/10 to-red-50/45 dark:from-transparent dark:via-red-950/10 dark:to-red-950/35",
|
|
)}
|
|
>
|
|
{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-[29px] grid-cols-3 border-b border-border/30 text-[11px] transition-colors hover:bg-muted/15 xl:h-[29px] xl:text-xs dark:border-brand-800/25 dark:hover:bg-brand-900/20",
|
|
row.isHighlighted &&
|
|
"ring-1 ring-inset ring-amber-400 bg-amber-100/60 dark:bg-amber-800/35",
|
|
)}
|
|
>
|
|
<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={cn(
|
|
"text-[12px] xl:text-[13px]",
|
|
isAsk ? "text-blue-600 dark:text-blue-400" : "text-red-600",
|
|
)}
|
|
>
|
|
{row.price > 0 ? fmt(row.price) : "-"}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"w-[50px] shrink-0 text-right text-[10px] tabular-nums xl:w-[58px]",
|
|
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>
|
|
);
|
|
}
|
|
|
|
/** 우측 요약 패널 */
|
|
export function SummaryPanel({
|
|
orderBook,
|
|
latestTick,
|
|
spread,
|
|
imbalance,
|
|
totalAsk,
|
|
totalBid,
|
|
}: {
|
|
orderBook: DashboardStockOrderBookResponse | null;
|
|
latestTick: DashboardRealtimeTradeTick | null;
|
|
spread: number;
|
|
imbalance: number;
|
|
totalAsk: number;
|
|
totalBid: number;
|
|
}) {
|
|
const displayTradeVolume =
|
|
latestTick?.isExpected && (orderBook?.anticipatedVolume ?? 0) > 0
|
|
? (orderBook?.anticipatedVolume ?? 0)
|
|
: (latestTick?.tradeVolume ?? orderBook?.anticipatedVolume ?? 0);
|
|
const summaryItems: SummaryMetric[] = [
|
|
{
|
|
label: "실시간",
|
|
value: orderBook || latestTick ? "연결됨" : "끊김",
|
|
tone: orderBook || latestTick ? "ask" : undefined,
|
|
},
|
|
{ label: "거래량", value: fmt(displayTradeVolume) },
|
|
{
|
|
label: "누적거래량",
|
|
value: fmt(
|
|
latestTick?.accumulatedVolume ?? orderBook?.accumulatedVolume ?? 0,
|
|
),
|
|
},
|
|
{
|
|
label: "체결강도",
|
|
value: latestTick
|
|
? `${latestTick.tradeStrength.toFixed(2)}%`
|
|
: orderBook?.anticipatedChangeRate !== undefined
|
|
? `${orderBook.anticipatedChangeRate.toFixed(2)}%`
|
|
: "-",
|
|
},
|
|
{ label: "예상체결가", value: fmt(orderBook?.anticipatedPrice ?? 0) },
|
|
{
|
|
label: "매도1호가",
|
|
value: latestTick ? fmt(latestTick.askPrice1) : "-",
|
|
tone: "ask",
|
|
},
|
|
{
|
|
label: "매수1호가",
|
|
value: latestTick ? fmt(latestTick.bidPrice1) : "-",
|
|
tone: "bid",
|
|
},
|
|
{
|
|
label: "순매수체결",
|
|
value: latestTick ? fmt(latestTick.netBuyExecutionCount) : "-",
|
|
},
|
|
{ label: "총 매도잔량", value: fmt(totalAsk), tone: "ask" },
|
|
{ label: "총 매수잔량", value: fmt(totalBid), tone: "bid" },
|
|
{ label: "스프레드", value: fmt(spread) },
|
|
{
|
|
label: "수급 불균형",
|
|
value: `${imbalance >= 0 ? "+" : ""}${imbalance.toFixed(2)}%`,
|
|
tone: imbalance >= 0 ? "bid" : "ask",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="h-full min-w-0 bg-muted/10 p-2 text-xs dark:bg-brand-900/30">
|
|
<div className="grid grid-cols-2 gap-1 xl:h-full xl:grid-cols-1 xl:grid-rows-12">
|
|
{summaryItems.map((item) => (
|
|
<SummaryMetricCell
|
|
key={item.label}
|
|
label={item.label}
|
|
value={item.value}
|
|
tone={item.tone}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 체결 목록 (Trade Tape) */
|
|
export function TradeTape({
|
|
ticks,
|
|
maxRows,
|
|
}: {
|
|
ticks: DashboardRealtimeTradeTick[];
|
|
maxRows?: number;
|
|
}) {
|
|
const visibleTicks =
|
|
typeof maxRows === "number" ? ticks.slice(0, maxRows) : ticks;
|
|
const shouldUseScrollableList = typeof maxRows !== "number";
|
|
|
|
const tapeRows = (
|
|
<div>
|
|
{visibleTicks.length === 0 && (
|
|
<div className="flex min-h-[96px] items-center justify-center text-xs text-muted-foreground dark:text-brand-100/70 xl:min-h-[140px]">
|
|
체결 데이터가 아직 없습니다.
|
|
</div>
|
|
)}
|
|
{visibleTicks.map((t, i) => {
|
|
const olderTick = visibleTicks[i + 1];
|
|
const executionSide = resolveTickExecutionSide(t, olderTick);
|
|
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-7 grid-cols-3 border-b border-border/40 px-2 text-[13px] 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>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="flex min-h-0 flex-col bg-background dark:bg-brand-900/20">
|
|
<div className="grid h-8 grid-cols-3 border-b bg-muted/20 px-2 text-xs 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>
|
|
{shouldUseScrollableList ? (
|
|
<ScrollArea className="min-h-0 flex-1">{tapeRows}</ScrollArea>
|
|
) : (
|
|
tapeRows
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 누적호가 행 */
|
|
export 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 += 1) {
|
|
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-blue-600 dark:text-blue-400">
|
|
{fmt(r.askAcc)}
|
|
</span>
|
|
<span className="text-center font-medium tabular-nums">
|
|
{fmt(r.price)}
|
|
</span>
|
|
<span className="text-right tabular-nums text-red-600 dark:text-red-400">
|
|
{fmt(r.bidAcc)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 로딩 스켈레톤 */
|
|
export 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>
|
|
);
|
|
}
|
|
|
|
interface SummaryMetric {
|
|
label: string;
|
|
value: string;
|
|
tone?: "ask" | "bid";
|
|
}
|
|
|
|
/**
|
|
* @description 실시간 요약 패널의 2열 메트릭 셀을 렌더링합니다.
|
|
* @summary UI 흐름: SummaryPanel -> SummaryMetricCell -> 체결량 하단 정보 패널을 압축해 스크롤 없이 표시
|
|
* @see features/trade/components/orderbook/orderbook-sections.tsx SummaryPanel summaryItems
|
|
*/
|
|
function SummaryMetricCell({
|
|
label,
|
|
value,
|
|
tone,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
tone?: "ask" | "bid";
|
|
}) {
|
|
return (
|
|
<div className="flex h-full min-w-0 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="truncate text-[11px] text-muted-foreground dark:text-brand-100/70">
|
|
{label}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"shrink-0 text-xs font-semibold tabular-nums",
|
|
tone === "ask" && "text-blue-600 dark:text-blue-400",
|
|
tone === "bid" && "text-red-600",
|
|
)}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 잔량 깊이 바 */
|
|
function DepthBar({ ratio, side }: { ratio: number; side: "ask" | "bid" }) {
|
|
if (ratio <= 0) return null;
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"absolute inset-y-0.5 z-0 rounded-sm transition-[width] duration-150",
|
|
side === "ask"
|
|
? "right-0.5 bg-blue-300/55 dark:bg-blue-700/50"
|
|
: "left-0.5 bg-red-300/60 dark:bg-red-600/45",
|
|
)}
|
|
style={{ width: `${ratio}%` }}
|
|
/>
|
|
);
|
|
}
|