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-25 10:01:58 +09:00
parent f875e338eb
commit 076f27a12a
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
features/trade/components/orderbook/OrderBook.tsx
View File

@@ -462,8 +462,8 @@ function CurrentPriceBar({
totalBid: number;
}) {
return (
<div className="grid h-10 grid-cols-3 items-center border-y-2 border-amber-400 bg-linear-to-r from-red-50/60 via-amber-50/90 to-blue-50/60 shadow-[0_0_10px_rgba(251,191,36,0.25)] dark:from-red-950/30 dark:via-amber-900/30 dark:to-blue-950/30 xl:h-10">
<div className="px-2 text-right text-[10px] font-semibold text-red-600 dark:text-red-400">
<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">
@@ -492,7 +492,7 @@ function CurrentPriceBar({
</span>
)}
</div>
<div className="px-2 text-left text-[10px] font-semibold text-blue-600 dark:text-blue-400">
<div className="px-2 text-left text-[10px] font-semibold text-red-600 dark:text-red-400">
{totalBid > 0 ? fmt(totalBid) : ""}
</div>
</div>
@@ -502,14 +502,14 @@ function CurrentPriceBar({
/** 호가 표 헤더 */
function BookHeader() {
return (
<div className="grid h-8 grid-cols-3 border-b bg-linear-to-r from-red-50/40 via-muted/20 to-blue-50/40 text-[11px] font-semibold text-muted-foreground dark:border-brand-800/50 dark:from-red-950/30 dark:via-brand-900/40 dark:to-blue-950/30 dark:text-brand-100/80">
<div className="flex items-center justify-end px-2 text-red-600/80 dark:text-red-400/80">
<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-blue-600/80 dark:text-blue-400/80">
<div className="flex items-center justify-start px-2 text-red-600/80 dark:text-red-400/80">
매수잔량
</div>
</div>
@@ -532,8 +532,8 @@ function BookSideRows({
<div
className={cn(
isAsk
? "bg-linear-to-r from-red-50/40 via-red-50/10 to-transparent dark:from-red-950/35 dark:via-red-950/10 dark:to-transparent"
: "bg-linear-to-r from-transparent via-blue-50/10 to-blue-50/45 dark:from-transparent dark:via-blue-950/10 dark:to-blue-950/35",
? "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) => {
@@ -580,7 +580,7 @@ function BookSideRows({
<span
className={cn(
"text-[12px] xl:text-[13px]",
isAsk ? "text-red-600" : "text-blue-600 dark:text-blue-400",
isAsk ? "text-blue-600 dark:text-blue-400" : "text-red-600",
)}
>
{row.price > 0 ? fmt(row.price) : "-"}
@@ -647,7 +647,7 @@ function SummaryPanel({
{
label: "실시간",
value: orderBook || latestTick ? "연결됨" : "끊김",
tone: orderBook || latestTick ? "bid" : undefined,
tone: orderBook || latestTick ? "ask" : undefined,
},
{ label: "거래량", value: fmt(displayTradeVolume) },
{
@@ -733,8 +733,8 @@ function SummaryMetricCell({
<span
className={cn(
"shrink-0 text-xs font-semibold tabular-nums",
tone === "ask" && "text-red-600",
tone === "bid" && "text-blue-600 dark:text-blue-400",
tone === "ask" && "text-blue-600 dark:text-blue-400",
tone === "bid" && "text-red-600",
)}
>
{value}
@@ -751,8 +751,8 @@ function DepthBar({ ratio, side }: { ratio: number; side: "ask" | "bid" }) {
className={cn(
"absolute inset-y-0.5 z-0 rounded-sm transition-[width] duration-150",
side === "ask"
? "right-0.5 bg-red-300/55 dark:bg-red-700/50"
: "left-0.5 bg-blue-300/60 dark:bg-blue-600/45",
? "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}%` }}
/>
@@ -861,11 +861,11 @@ function CumulativeRows({ asks, bids }: { asks: BookRow[]; bids: BookRow[] }) {
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="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-blue-600 dark:text-blue-400">
<span className="text-right tabular-nums text-red-600 dark:text-red-400">
{fmt(r.bidAcc)}
</span>
</div>