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

- /api/markets/movers: by_trading_value (close*volume DESC) 카테고리 추가 - MarketsOverview: 4 컬럼 그리드 (등락 상위/하위/거래대금/거래량), 거래대금은 억·조 표기 - SymbolSidebar: 52주 범위 내 현재가 위치 게이지 (그라데이션 바 + 화이트 점)
2026-05-28 15:21:27 +09:00
parent aa58761176
commit 645e93e7bf
4 changed files with 114 additions and 39 deletions
--- a/backend/app/api/markets.py
+++ b/backend/app/api/markets.py
@@ -4,10 +4,11 @@ GET /api/markets/movers
  ?market=KOSPI|KOSDAQ|ALL  (기본 ALL)
  ?limit=10                  (각 카테고리 별 상위 N)

-응답 (3 카테고리):
-  - gainers: 등락률 상위 (전일종가 대비 상승%)
-  - losers : 등락률 하위 (하락%)
-  - volume : 거래량 상위 (당일 volume)
+응답 (4 카테고리):
+  - gainers       : 등락률 상위 (전일종가 대비 상승%)
+  - losers        : 등락률 하위 (하락%)
+  - 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],
    }


--- a/web/components/MarketsOverview.tsx
+++ b/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();
+}
--- a/web/components/SymbolSidebar.tsx
+++ b/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>
  );
 }
--- a/web/lib/api.ts
+++ b/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 = {