전체적인 리팩토링

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">