호가창 매수,매도 색상 변경

features/trade/components/orderbook/OrderBook.tsx

@@ -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="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-red-600 dark:text-red-400">
+      <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="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-red-600/80 dark:text-red-400/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-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-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-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 === "ask" && "text-blue-600 dark:text-blue-400",
-          tone === "bid" && "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"
+          ? "right-0.5 bg-blue-300/55 dark:bg-blue-700/50"
-          : "left-0.5 bg-blue-300/60 dark:bg-blue-600/45",
+          : "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>