임시커밋

2026-02-11 16:31:28 +09:00
parent f650d51f68
commit 3cea3e66d0
45 changed files with 289 additions and 236 deletions
--- a/features/trade/components/orderbook/AnimatedQuantity.tsx
+++ b/features/trade/components/orderbook/AnimatedQuantity.tsx
@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion } from "framer-motion";
+
+interface AnimatedQuantityProps {
+  value: number;
+  format?: (val: number) => string;
+  className?: string;
+  /** 값 변동 시 배경 깜빡임 */
+  useColor?: boolean;
+  /** 정렬 방향 (ask: 우측 정렬/왼쪽으로 확장, bid: 좌측 정렬/오른쪽으로 확장) */
+  side?: "ask" | "bid";
+}
+
+/**
+ * 실시간 수량 표시 — 값이 변할 때 ±diff를 인라인으로 보여줍니다.
+ */
+export function AnimatedQuantity({
+  value,
+  format = (v) => v.toLocaleString(),
+  className,
+  useColor = false,
+  side = "bid",
+}: AnimatedQuantityProps) {
+  const prevRef = useRef(value);
+  const [diff, setDiff] = useState<number | null>(null);
+  const [flash, setFlash] = useState<"up" | "down" | null>(null);
+
+  useEffect(() => {
+    if (prevRef.current === value) return;
+
+    const delta = value - prevRef.current;
+    prevRef.current = value;
+
+    if (delta === 0) return;
+
+    setDiff(delta);
+    setFlash(delta > 0 ? "up" : "down");
+
+    const timer = setTimeout(() => {
+      setDiff(null);
+      setFlash(null);
+    }, 1200);
+
+    return () => clearTimeout(timer);
+  }, [value]);
+
+  return (
+    <span
+      className={cn(
+        "relative inline-flex items-center gap-1 tabular-nums",
+        className,
+      )}
+    >
+      {/* 배경 깜빡임 */}
+      <AnimatePresence>
+        {useColor && flash && (
+          <motion.span
+            initial={{ opacity: 0.5 }}
+            animate={{ opacity: 0 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 1 }}
+            className={cn(
+              "absolute inset-0 z-0 rounded-sm",
+              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>
+
+      {/* 매수(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>
+  );
+}