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

web/components/SymbolSidebar.tsx

@@ -45,13 +45,22 @@ export function SymbolSidebar({ code }: { code: string }) {
       if (p.high != null && p.high > yearHigh) yearHigh = p.high;
       if (p.low != null && p.low < yearLow) yearLow = p.low;
     }
+    const yh = yearHigh === -Infinity ? null : yearHigh;
+    const yl = yearLow === Infinity ? null : yearLow;
+    // 52주 위치 (0~1). 종가 기준, 분모 0 방어.
+    let pos: number | null = null;
+    if (yh != null && yl != null && yh > yl && last.close != null) {
+      pos = Math.min(1, Math.max(0, (last.close - yl) / (yh - yl)));
+    }
     return {
       open: last.open,
       high: last.high,
       low: last.low,
+      close: last.close,
       volume: last.volume,
-      yearHigh: yearHigh === -Infinity ? null : yearHigh,
-      yearLow: yearLow === Infinity ? null : yearLow,
+      yearHigh: yh,
+      yearLow: yl,
+      yearPos: pos,
     };
   }, [chart]);
 
@@ -81,6 +90,48 @@ export function SymbolSidebar({ code }: { code: string }) {
         <Row label="52주 최고" value={fmt(stats.yearHigh)} tone="up" />
         <Row label="52주 최저" value={fmt(stats.yearLow)} tone="down" />
       </dl>
+      {stats.yearPos != null && (
+        <YearRangeBar
+          low={stats.yearLow}
+          high={stats.yearHigh}
+          pos={stats.yearPos}
+        />
+      )}
+    </div>
+  );
+}
+
+// 52주 범위 내 현재가 위치 — 토스 종목 상세에 있는 가로 게이지를 흉내냄.
+function YearRangeBar({
+  low,
+  high,
+  pos,
+}: {
+  low: number | null;
+  high: number | null;
+  pos: number;
+}) {
+  const pct = pos * 100;
+  return (
+    <div className="mt-4 border-t border-zinc-800 pt-3">
+      <div className="mb-1.5 flex items-center justify-between text-[10px] text-zinc-500">
+        <span>52주 위치</span>
+        <span className="tabular-nums text-zinc-300">{pct.toFixed(0)}%</span>
+      </div>
+      <div className="relative h-1.5 w-full rounded-full bg-zinc-800">
+        <div
+          className="absolute left-0 top-0 h-full rounded-full bg-gradient-to-r from-sky-500/70 via-amber-400/70 to-rose-500/70"
+          style={{ width: "100%" }}
+        />
+        <div
+          className="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-zinc-950 bg-zinc-100 shadow"
+          style={{ left: `${pct}%` }}
+        />
+      </div>
+      <div className="mt-1 flex justify-between text-[10px] tabular-nums text-zinc-500">
+        <span>{fmt(low)}</span>
+        <span>{fmt(high)}</span>
+      </div>
     </div>
   );
 }