디자인 변경

features/dashboard/components/orderbook/AnimatedQuantity.tsx

@@ -8,6 +8,8 @@ interface AnimatedQuantityProps {
   className?: string;
   /** 값 변동 시 배경 깜빡임 */
   useColor?: boolean;
+  /** 정렬 방향 (ask: 우측 정렬/왼쪽으로 확장, bid: 좌측 정렬/오른쪽으로 확장) */
+  side?: "ask" | "bid";
 }
 
 /**
@@ -18,6 +20,7 @@ export function AnimatedQuantity({
   format = (v) => v.toLocaleString(),
   className,
   useColor = false,
+  side = "bid",
 }: AnimatedQuantityProps) {
   const prevRef = useRef(value);
   const [diff, setDiff] = useState<number | null>(null);
@@ -59,32 +62,41 @@ export function AnimatedQuantity({
             transition={{ duration: 1 }}
             className={cn(
               "absolute inset-0 z-0 rounded-sm",
-              flash === "up" ? "bg-red-200/50" : "bg-brand-200/50",
+              flash === "up" ? "bg-red-200/50" : "bg-blue-200/50",
             )}
           />
         )}
       </AnimatePresence>
 
+      {/* 매도(Ask)일 경우 Diff가 먼저 와야 텍스트가 우측 정렬된 상태에서 흔들리지 않음 */}
+      {side === "ask" && <DiffChange diff={diff} />}
+
       {/* 수량 값 */}
       <span className="relative z-10">{format(value)}</span>
 
-      {/* ±diff (인라인 표시) */}
-      <AnimatePresence>
-        {diff != null && diff !== 0 && (
-          <motion.span
-            initial={{ opacity: 1, scale: 1 }}
-            animate={{ opacity: 0, scale: 0.85 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 1.2, ease: "easeOut" }}
-            className={cn(
-              "relative z-20 whitespace-nowrap text-[9px] font-bold leading-none",
-              diff > 0 ? "text-red-500" : "text-brand-600",
-            )}
-          >
-            {diff > 0 ? `+${diff.toLocaleString()}` : diff.toLocaleString()}
-          </motion.span>
-        )}
-      </AnimatePresence>
+      {/* 매수(Bid)일 경우 Diff가 뒤에 와야 텍스트가 좌측 정렬된 상태에서 흔들리지 않음 */}
+      {side !== "ask" && <DiffChange diff={diff} />}
     </span>
   );
 }
+
+function DiffChange({ diff }: { diff: number | null }) {
+  return (
+    <AnimatePresence>
+      {diff != null && diff !== 0 && (
+        <motion.span
+          initial={{ opacity: 1, scale: 1 }}
+          animate={{ opacity: 0, scale: 0.85 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 1.2, ease: "easeOut" }}
+          className={cn(
+            "relative z-20 whitespace-nowrap text-[9px] font-bold leading-none tabular-nums",
+            diff > 0 ? "text-red-500" : "text-blue-600 dark:text-blue-400",
+          )}
+        >
+          {diff > 0 ? `+${diff.toLocaleString()}` : diff.toLocaleString()}
+        </motion.span>
+      )}
+    </AnimatePresence>
+  );
+}

features/dashboard/components/orderbook/OrderBook.tsx

@@ -309,6 +309,7 @@ function BookSideRows({
                     value={row.size}
                     format={fmt}
                     useColor
+                    side="ask"
                     className="relative z-10"
                   />
                 </>
@@ -323,7 +324,11 @@ function BookSideRows({
                   "border-x-amber-400 bg-amber-50/70 dark:bg-amber-800/20",
               )}
             >
-              <span className={isAsk ? "text-red-600" : "text-blue-600 dark:text-blue-400"}>
+              <span
+                className={
+                  isAsk ? "text-red-600" : "text-blue-600 dark:text-blue-400"
+                }
+              >
                 {row.price > 0 ? fmt(row.price) : "-"}
               </span>
               <span
@@ -349,6 +354,7 @@ function BookSideRows({
                     value={row.size}
                     format={fmt}
                     useColor
+                    side="bid"
                     className="relative z-10"
                   />
                 </>
@@ -451,7 +457,9 @@ function Row({
 }) {
   return (
     <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="min-w-0 truncate text-muted-foreground dark:text-brand-100/70">
+        {label}
+      </span>
       <span
         className={cn(
           "shrink-0 font-medium tabular-nums",