jihoon87/auto-trade
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

테마 적용

Browse Source
This commit is contained in:
jihoon87.lee
2026-02-11 14:06:06 +09:00
parent def87bd47a
commit 95291e6922
30 changed files with 1209 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
features/dashboard/components/orderbook/OrderBook.tsx
View File

@@ -145,10 +145,10 @@ export function OrderBook({
}
return (
<div className="flex h-full min-h-0 flex-col bg-background">
<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">
<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">
일반호가
@@ -164,10 +164,10 @@ export function OrderBook({
{/* ── 일반호가 탭 ── */}
<TabsContent value="normal" className="min-h-0 flex-1">
<div className="block h-full min-h-0 border-t xl:grid xl:grid-rows-[1fr_190px] xl:overflow-hidden">
<div className="block h-full min-h-0 border-t dark:border-brand-800/45 xl:grid xl:grid-rows-[1fr_190px] xl:overflow-hidden">
<div className="block min-h-0 xl:grid xl:grid-cols-[minmax(0,1fr)_168px] xl:overflow-hidden">
{/* 호가 테이블 */}
<div className="min-h-0 xl:border-r">
<div className="min-h-0 xl:border-r dark:border-brand-800/45">
<BookHeader />
<ScrollArea className="h-[320px] sm:h-[360px] xl:h-[calc(100%-32px)] [&>[data-slot=scroll-area-scrollbar]]:hidden xl:[&>[data-slot=scroll-area-scrollbar]]:flex">
{/* 매도호가 */}
@@ -175,7 +175,7 @@ export function OrderBook({
{/* 중앙 바: 현재 체결가 */}
<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">
<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">
@@ -192,14 +192,14 @@ export function OrderBook({
"text-[10px] font-medium",
latestPrice >= basePrice
? "text-red-500"
: "text-blue-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">
<div className="px-2 text-left text-[10px] font-medium text-muted-foreground dark:text-brand-100/72">
{totalBid > 0 ? fmt(totalBid) : ""}
</div>
</div>
@@ -231,7 +231,7 @@ export function OrderBook({
{/* ── 누적호가 탭 ── */}
<TabsContent value="cumulative" className="min-h-0 flex-1">
<ScrollArea className="h-full border-t">
<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>
@@ -245,7 +245,7 @@ export function OrderBook({
{/* ── 호가주문 탭 ── */}
<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">
<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>
@@ -259,7 +259,7 @@ export function OrderBook({
/** 호가 표 헤더 */
function BookHeader() {
return (
<div className="grid h-8 grid-cols-3 border-b bg-muted/20 text-[11px] font-medium text-muted-foreground">
<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>
@@ -280,7 +280,13 @@ function BookSideRows({
const isAsk = side === "ask";
return (
<div className={isAsk ? "bg-red-50/15" : "bg-blue-50/15"}>
<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;
@@ -289,9 +295,9 @@ function BookSideRows({
<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",
"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-900/30",
"ring-1 ring-inset ring-amber-400 bg-amber-100/50 dark:bg-amber-800/30",
)}
>
{/* 매도잔량 (좌측) */}
@@ -314,10 +320,10 @@ function BookSideRows({
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-900/25",
"border-x-amber-400 bg-amber-50/70 dark:bg-amber-800/20",
)}
>
<span className={isAsk ? "text-red-600" : "text-blue-600"}>
<span className={isAsk ? "text-red-600" : "text-blue-600 dark:text-blue-400"}>
{row.price > 0 ? fmt(row.price) : "-"}
</span>
<span
@@ -326,7 +332,7 @@ function BookSideRows({
row.changePercent !== null
? row.changePercent >= 0
? "text-red-500"
: "text-blue-500"
: "text-blue-600 dark:text-blue-400"
: "text-muted-foreground",
)}
>
@@ -372,7 +378,7 @@ function SummaryPanel({
totalBid: number;
}) {
return (
<div className="min-w-0 border-l bg-muted/15 p-2 text-[11px]">
<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 ? "연결됨" : "끊김"}
@@ -444,13 +450,13 @@ function Row({
tone?: "ask" | "bid";
}) {
return (
<div className="mb-1.5 flex items-center justify-between gap-2 rounded border bg-background px-2 py-1">
<span className="min-w-0 truncate text-muted-foreground">{label}</span>
<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",
tone === "bid" && "text-blue-600 dark:text-blue-400",
)}
>
{value}
@@ -466,7 +472,9 @@ function DepthBar({ ratio, side }: { ratio: number; side: "ask" | "bid" }) {
<div
className={cn(
"absolute inset-y-1 z-0 rounded-sm",
side === "ask" ? "right-1 bg-red-200/50" : "left-1 bg-blue-200/50",
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}%` }}
/>
@@ -476,8 +484,8 @@ function DepthBar({ ratio, side }: { ratio: number; side: "ask" | "bid" }) {
/** 체결 목록 (Trade Tape) */
function TradeTape({ ticks }: { ticks: DashboardRealtimeTradeTick[] }) {
return (
<div className="border-t bg-background">
<div className="grid h-7 grid-cols-4 border-b bg-muted/20 px-2 text-[11px] font-medium text-muted-foreground">
<div className="border-t bg-background dark:border-brand-800/45 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>
@@ -486,14 +494,14 @@ function TradeTape({ ticks }: { ticks: DashboardRealtimeTradeTick[] }) {
<ScrollArea className="h-[162px]">
<div>
{ticks.length === 0 && (
<div className="flex h-[160px] items-center justify-center text-xs text-muted-foreground">
<div className="flex h-[160px] items-center justify-center text-xs text-muted-foreground dark:text-brand-100/70">
체결 데이터가 아직 없습니다.
</div>
)}
{ticks.map((t, i) => (
<div
key={`${t.tickTime}-${t.price}-${i}`}
className="grid h-8 grid-cols-4 border-b border-border/40 px-2 text-xs"
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)}
@@ -501,7 +509,7 @@ function TradeTape({ ticks }: { ticks: DashboardRealtimeTradeTick[] }) {
<div className="flex items-center justify-end tabular-nums text-red-600">
{fmt(t.price)}
</div>
<div className="flex items-center justify-end tabular-nums text-blue-600">
<div className="flex items-center justify-end tabular-nums text-blue-600 dark:text-blue-400">
{fmt(t.tradeVolume)}
</div>
<div className="flex items-center justify-end tabular-nums">
@@ -537,13 +545,13 @@ function CumulativeRows({ asks, bids }: { asks: BookRow[]; bids: BookRow[] }) {
{rows.map((r, i) => (
<div
key={i}
className="grid h-7 grid-cols-3 items-center rounded border bg-background px-2 text-xs"
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">
<span className="text-right tabular-nums text-blue-600 dark:text-blue-400">
{fmt(r.bidAcc)}
</span>
</div>