전체적인 리팩토링

features/trade/components/orderbook/orderbook-sections.tsx

@@ -160,7 +160,7 @@ export function BookSideRows({
               </span>
               <span
                 className={cn(
-                  "w-[50px] shrink-0 text-right text-[10px] tabular-nums xl:w-[58px]",
+                  "w-[48px] shrink-0 text-right text-[10px] tabular-nums xl:w-[56px]",
                   getChangeToneClass(row.changeValue),
                 )}
               >
@@ -168,6 +168,14 @@ export function BookSideRows({
                   ? "-"
                   : fmtSignedChange(row.changeValue)}
               </span>
+              <span
+                className={cn(
+                  "w-[52px] shrink-0 text-right text-[10px] tabular-nums xl:w-[58px]",
+                  getChangeToneClass(row.changeRate),
+                )}
+              >
+                {row.changeRate === null ? "-" : fmtPct(row.changeRate)}
+              </span>
             </div>
 
             <div className="relative flex items-center justify-start overflow-hidden px-1">

features/trade/components/orderbook/orderbook-utils.ts

@@ -9,6 +9,7 @@ export interface BookRow {
   price: number;
   size: number;
   changeValue: number | null;
+  changeRate: number | null;
   isHighlighted: boolean;
 }
 
@@ -166,11 +167,13 @@ export function buildBookRows({
     const price = side === "ask" ? level.askPrice : level.bidPrice;
     const size = side === "ask" ? level.askSize : level.bidSize;
     const changeValue = resolvePriceChange(price, basePrice);
+    const changeRate = resolvePriceChangeRate(price, basePrice);
 
     return {
       price,
       size: Math.max(size, 0),
       changeValue,
+      changeRate,
       isHighlighted: latestPrice > 0 && price === latestPrice,
     } satisfies BookRow;
   });
@@ -208,3 +211,10 @@ function resolvePriceChange(price: number, basePrice: number) {
   }
   return price - basePrice;
 }
+
+function resolvePriceChangeRate(price: number, basePrice: number) {
+  if (price <= 0 || basePrice <= 0) {
+    return null;
+  }
+  return ((price - basePrice) / basePrice) * 100;
+}