feat(market): 거래대금 상위 + 52주 위치 게이지

- /api/markets/movers: by_trading_value (close*volume DESC) 카테고리 추가
- MarketsOverview: 4 컬럼 그리드 (등락 상위/하위/거래대금/거래량), 거래대금은 억·조 표기
- SymbolSidebar: 52주 범위 내 현재가 위치 게이지 (그라데이션 바 + 화이트 점)

web/components/MarketsOverview.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-// 시장 overview: 등락 상위 / 등락 하위 / 거래량 상위 3 컬럼.
+// 시장 overview: 등락 상위 / 등락 하위 / 거래대금 상위 / 거래량 상위 4 컬럼.
 // /api/markets/movers 응답을 그대로 표 형태로 렌더.
+// 거래대금 = close × volume, 단위 억원. 토스 톤의 핵심 랭킹.
 
 import Link from "next/link";
 import { useEffect, useState } from "react";
@@ -41,7 +42,10 @@ export function MarketsOverview() {
 
   // 아직 ohlcv_daily 가 비어 있으면 모든 리스트가 빈 배열로 옴 — 안내만.
   const empty =
-    !data.gainers.length && !data.losers.length && !data.by_volume.length;
+    !data.gainers.length &&
+    !data.losers.length &&
+    !data.by_volume.length &&
+    !data.by_trading_value.length;
   if (empty)
     return (
       <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4 text-xs text-zinc-500">
@@ -50,22 +54,29 @@ export function MarketsOverview() {
     );
 
   return (
-    <div className="grid gap-3 md:grid-cols-3">
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
       <MoverList title="등락 상위" items={data.gainers} />
       <MoverList title="등락 하위" items={data.losers} />
-      <MoverList title="거래량 상위" items={data.by_volume} showVolume />
+      <MoverList
+        title="거래대금 상위"
+        items={data.by_trading_value}
+        metric="trading_value"
+      />
+      <MoverList title="거래량 상위" items={data.by_volume} metric="volume" />
     </div>
   );
 }
 
+type Metric = "price" | "volume" | "trading_value";
+
 function MoverList({
   title,
   items,
-  showVolume = false,
+  metric = "price",
 }: {
   title: string;
   items: Mover[];
-  showVolume?: boolean;
+  metric?: Metric;
 }) {
   return (
     <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-3">
@@ -75,7 +86,7 @@ function MoverList({
       ) : (
         <ul className="divide-y divide-zinc-800">
           {items.map((m, i) => (
-            <MoverRow key={m.code} rank={i + 1} m={m} showVolume={showVolume} />
+            <MoverRow key={m.code} rank={i + 1} m={m} metric={metric} />
           ))}
         </ul>
       )}
@@ -86,11 +97,11 @@ function MoverList({
 function MoverRow({
   rank,
   m,
-  showVolume,
+  metric,
 }: {
   rank: number;
   m: Mover;
-  showVolume: boolean;
+  metric: Metric;
 }) {
   const pct = m.pct_change;
   const tone =
@@ -99,6 +110,19 @@ function MoverRow({
       : pct > 0
       ? "text-rose-400"
       : "text-sky-400";
+
+  let primary: string;
+  if (metric === "volume") {
+    primary = fmtVol(m.volume);
+  } else if (metric === "trading_value") {
+    primary = fmtKrw(m.trading_value ?? null);
+  } else {
+    primary =
+      m.close != null
+        ? m.close.toLocaleString(undefined, { maximumFractionDigits: 0 })
+        : "—";
+  }
+
   return (
     <li>
       <Link
@@ -110,29 +134,10 @@ function MoverRow({
           <span className="min-w-0 truncate text-zinc-100">{m.name}</span>
         </div>
         <div className="shrink-0 text-right tabular-nums">
-          {showVolume ? (
-            <>
-              <div className="text-zinc-100">{fmtVol(m.volume)}</div>
-              <div className={`text-[10px] ${tone}`}>
-                {pct != null
-                  ? `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`
-                  : ""}
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="text-zinc-100">
-                {m.close != null
-                  ? m.close.toLocaleString(undefined, { maximumFractionDigits: 0 })
-                  : "—"}
-              </div>
-              <div className={`text-[10px] ${tone}`}>
-                {pct != null
-                  ? `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`
-                  : ""}
-              </div>
-            </>
-          )}
+          <div className="text-zinc-100">{primary}</div>
+          <div className={`text-[10px] ${tone}`}>
+            {pct != null ? `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%` : ""}
+          </div>
         </div>
       </Link>
     </li>
@@ -145,3 +150,12 @@ function fmtVol(n: number | null): string {
   if (n >= 1e4) return `${(n / 1e4).toFixed(1)}만`;
   return n.toLocaleString();
 }
+
+// 거래대금 원 → 억/조 표기. 토스에서 가장 흔한 단위.
+function fmtKrw(n: number | null): string {
+  if (n == null) return "—";
+  if (n >= 1e12) return `${(n / 1e12).toFixed(2)}조`;
+  if (n >= 1e8) return `${Math.round(n / 1e8).toLocaleString()}억`;
+  if (n >= 1e4) return `${(n / 1e4).toFixed(0)}만`;
+  return n.toLocaleString();
+}