디자인 변경

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>
+  );
+}