정리

features/trade/components/orderbook/OrderBook.tsx

@@ -51,6 +51,52 @@ function fmtTime(hms: string) {
   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;
+}
+
 // ─── 메인 컴포넌트 ──────────────────────────────────────
 
 /**
@@ -305,13 +351,17 @@ function BookSideRows({
               {isAsk && (
                 <>
                   <DepthBar ratio={ratio} side="ask" />
-                  <AnimatedQuantity
-                    value={row.size}
-                    format={fmt}
-                    useColor
-                    side="ask"
-                    className="relative z-10"
-                  />
+                  {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>
@@ -350,13 +400,17 @@ function BookSideRows({
               {!isAsk && (
                 <>
                   <DepthBar ratio={ratio} side="bid" />
-                  <AnimatedQuantity
-                    value={row.size}
-                    format={fmt}
-                    useColor
-                    side="bid"
-                    className="relative z-10"
-                  />
+                  {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>
@@ -506,25 +560,42 @@ function TradeTape({ ticks }: { ticks: DashboardRealtimeTradeTick[] }) {
               체결 데이터가 아직 없습니다.
             </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 dark:border-brand-800/35"
-            >
-              <div className="flex items-center tabular-nums">
-                {fmtTime(t.tickTime)}
+          {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="flex items-center justify-end tabular-nums text-red-600">
+                  {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 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 dark:text-blue-400">
-                {fmt(t.tradeVolume)}
-              </div>
-              <div className="flex items-center justify-end tabular-nums">
-                {t.tradeStrength.toFixed(2)}%
-              </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </ScrollArea>
     </div>