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

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

backend/app/api/markets.py

@@ -4,10 +4,11 @@ GET /api/markets/movers
   ?market=KOSPI|KOSDAQ|ALL  (기본 ALL)
   ?limit=10                  (각 카테고리 별 상위 N)
 
-응답 (3 카테고리):
+응답 (4 카테고리):
-  - gainers: 등락률 상위 (전일종가 대비 상승%)
+  - gainers       : 등락률 상위 (전일종가 대비 상승%)
-  - losers : 등락률 하위 (하락%)
+  - losers        : 등락률 하위 (하락%)
-  - volume : 거래량 상위 (당일 volume)
+  - by_volume     : 거래량 상위 (당일 volume)
+  - by_trading_value: 거래대금 상위 (close × volume, 원 단위)
 
 ohlcv_daily 에서 가장 최근 2 거래일을 잡아 비교한다. 데이터가 한 종목당
 2 일치 이상 없을 때는 그 종목은 자연 누락된다.
@@ -64,7 +65,8 @@ def _movers_sql(where_market: str) -> str:
                CASE WHEN p.close1 > 0
                     THEN (l.close0 - p.close1) / p.close1 * 100
                     ELSE NULL
-               END AS pct_change
+               END AS pct_change,
+               (l.close0 * l.volume0) AS trading_value
           FROM symb s
           JOIN latest l ON l.code = s.code
           JOIN prev   p ON p.code = s.code
@@ -97,6 +99,10 @@ def movers(
             text(base_sql + " ORDER BY volume DESC NULLS LAST LIMIT :lim"),
             params,
         ).all()
+        by_trading_value = conn.execute(
+            text(base_sql + " ORDER BY trading_value DESC NULLS LAST LIMIT :lim"),
+            params,
+        ).all()
 
     def _row(r) -> dict:
         return {
@@ -107,6 +113,7 @@ def movers(
             "prev_close": float(r[4]) if r[4] is not None else None,
             "volume": int(r[5]) if r[5] is not None else None,
             "pct_change": float(r[6]) if r[6] is not None else None,
+            "trading_value": float(r[7]) if r[7] is not None else None,
         }
 
     return {
@@ -115,6 +122,7 @@ def movers(
         "gainers": [_row(r) for r in gainers],
         "losers": [_row(r) for r in losers],
         "by_volume": [_row(r) for r in by_volume],
+        "by_trading_value": [_row(r) for r in by_trading_value],
     }
 
 

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">{primary}</div>
-            <>
+          <div className={`text-[10px] ${tone}`}>
-              <div className="text-zinc-100">{fmtVol(m.volume)}</div>
+            {pct != null ? `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%` : ""}
-              <div className={`text-[10px] ${tone}`}>
+          </div>
-                {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>
       </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,
+      yearHigh: yh,
-      yearLow: yearLow === Infinity ? null : yearLow,
+      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>
   );
 }

web/lib/api.ts

@@ -174,6 +174,7 @@ export type Mover = {
   prev_close: number | null;
   volume: number | null;
   pct_change: number | null;
+  trading_value?: number | null;
 };
 
 export type MoversResponse = {
@@ -182,6 +183,7 @@ export type MoversResponse = {
   gainers: Mover[];
   losers: Mover[];
   by_volume: Mover[];
+  by_trading_value: Mover[];
 };
 
 export type RelatedResponse = {