feat(markets): /api/markets/movers + /related/{code} + 홈/종목 페이지 연동

backend:
  - 신규 라우터 app/api/markets.py
  - GET /api/markets/movers?market=ALL|KOSPI|KOSDAQ&limit=10
    → gainers / losers / by_volume 3 카테고리. ohlcv_daily 최신 2 거래일 비교.
  - GET /api/markets/related/{code}?limit=8
    → 같은 market 내 거래량 상위 (sector 컬럼은 시드 단계 NULL 다수라 제외).
  - main.py 에 라우터 include.

frontend:
  - lib/api.ts 에 Mover/MoversResponse/RelatedResponse 타입 + .movers/.related 추가.
  - components/MarketsOverview.tsx: 등락 상위 / 등락 하위 / 거래량 상위 3 컬럼.
  - components/RelatedStocks.tsx: 같은 시장 내 관련 종목 8 개.
  - 홈 페이지에 MarketsOverview 배치 (SeedTiles 아래).
  - 종목 페이지 우측 사이드바 컬럼에 RelatedStocks 추가 (SymbolSidebar 아래).

verify: py_compile clean, tsc --noEmit clean, next lint clean.

web/app/[code]/page.tsx

@@ -7,6 +7,7 @@ import { NewsList } from "../../components/NewsList";
 import { PeriodTabs, periodSpec, type Period } from "../../components/PeriodTabs";
 import { PredictionPanel } from "../../components/PredictionPanel";
 import { PriceHero } from "../../components/PriceHero";
+import { RelatedStocks } from "../../components/RelatedStocks";
 import { StockChart } from "../../components/StockChart";
 import { SymbolSidebar } from "../../components/SymbolSidebar";
 import { api, type ChartPayload, type LatestPredictionResponse } from "../../lib/api";
@@ -119,7 +120,10 @@ export default function CodePage({ params }: { params: { code: string } }) {
                 <PredictionPanel code={code} initial={prediction} onResult={setPrediction} />
               </div>
             </div>
-            <SymbolSidebar code={code} />
+            <div className="space-y-4">
+              <SymbolSidebar code={code} />
+              <RelatedStocks code={code} />
+            </div>
           </div>
           <div className="mt-6 grid gap-6 md:grid-cols-2">
             <MetricsPanel code={code} />

web/app/page.tsx

@@ -1,3 +1,4 @@
+import { MarketsOverview } from "../components/MarketsOverview";
 import { SearchBox } from "../components/SearchBox";
 import { SeedTiles } from "../components/SeedTiles";
 
@@ -18,6 +19,10 @@ export default function HomePage() {
         <SeedTiles />
       </div>
 
+      <div className="mt-6">
+        <MarketsOverview />
+      </div>
+
       <div className="mt-6 rounded-lg border border-zinc-800 bg-zinc-900/30 p-4 text-xs text-zinc-500">
         <div className="font-medium text-zinc-300">매칭 · 재학습</div>
         <div className="mt-1">

web/components/MarketsOverview.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+// 시장 overview: 등락 상위 / 등락 하위 / 거래량 상위 3 컬럼.
+// /api/markets/movers 응답을 그대로 표 형태로 렌더.
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { api, type Mover, type MoversResponse } from "../lib/api";
+
+export function MarketsOverview() {
+  const [data, setData] = useState<MoversResponse | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    api
+      .movers("ALL", 10)
+      .then((r) => {
+        if (alive) setData(r);
+      })
+      .catch((e) => {
+        if (alive) setErr(e instanceof Error ? e.message : String(e));
+      });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  if (err)
+    return (
+      <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4 text-xs text-zinc-500">
+        시장 overview 로딩 실패: {err}
+      </div>
+    );
+  if (!data)
+    return (
+      <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4 text-xs text-zinc-500">
+        시장 overview 로딩 중…
+      </div>
+    );
+
+  // 아직 ohlcv_daily 가 비어 있으면 모든 리스트가 빈 배열로 옴 — 안내만.
+  const empty =
+    !data.gainers.length && !data.losers.length && !data.by_volume.length;
+  if (empty)
+    return (
+      <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4 text-xs text-zinc-500">
+        시장 데이터 준비 중. ohlcv_daily 가 채워지면 자동으로 표시됩니다.
+      </div>
+    );
+
+  return (
+    <div className="grid gap-3 md:grid-cols-3">
+      <MoverList title="등락 상위" items={data.gainers} />
+      <MoverList title="등락 하위" items={data.losers} />
+      <MoverList title="거래량 상위" items={data.by_volume} showVolume />
+    </div>
+  );
+}
+
+function MoverList({
+  title,
+  items,
+  showVolume = false,
+}: {
+  title: string;
+  items: Mover[];
+  showVolume?: boolean;
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-3">
+      <div className="mb-2 text-xs font-medium text-zinc-300">{title}</div>
+      {items.length === 0 ? (
+        <div className="text-[11px] text-zinc-500">데이터 없음</div>
+      ) : (
+        <ul className="divide-y divide-zinc-800">
+          {items.map((m, i) => (
+            <MoverRow key={m.code} rank={i + 1} m={m} showVolume={showVolume} />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function MoverRow({
+  rank,
+  m,
+  showVolume,
+}: {
+  rank: number;
+  m: Mover;
+  showVolume: boolean;
+}) {
+  const pct = m.pct_change;
+  const tone =
+    pct == null || pct === 0
+      ? "text-zinc-400"
+      : pct > 0
+      ? "text-rose-400"
+      : "text-sky-400";
+  return (
+    <li>
+      <Link
+        href={`/${m.code}`}
+        className="flex items-center justify-between gap-2 py-1.5 text-xs hover:bg-zinc-800/40"
+      >
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="w-4 shrink-0 text-zinc-500">{rank}</span>
+          <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>
+      </Link>
+    </li>
+  );
+}
+
+function fmtVol(n: number | null): string {
+  if (n == null) return "—";
+  if (n >= 1e8) return `${(n / 1e8).toFixed(1)}억`;
+  if (n >= 1e4) return `${(n / 1e4).toFixed(1)}만`;
+  return n.toLocaleString();
+}

web/components/RelatedStocks.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+// 같은 시장 내 거래량/유동성 기준 관련 종목 8개.
+// /api/markets/related/{code} 응답을 좁은 list 카드로 렌더.
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { api, type RelatedResponse } from "../lib/api";
+
+export function RelatedStocks({ code }: { code: string }) {
+  const [data, setData] = useState<RelatedResponse | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    setErr(null);
+    setData(null);
+    api
+      .related(code, 8)
+      .then((r) => {
+        if (alive) setData(r);
+      })
+      .catch((e) => {
+        if (alive) setErr(e instanceof Error ? e.message : String(e));
+      });
+    return () => {
+      alive = false;
+    };
+  }, [code]);
+
+  if (err)
+    return (
+      <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
+        관련 종목 로딩 실패: {err}
+      </div>
+    );
+  if (!data)
+    return (
+      <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
+        관련 종목 로딩 중…
+      </div>
+    );
+  if (!data.items.length)
+    return (
+      <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
+        같은 시장({data.market}) 데이터가 아직 부족합니다.
+      </div>
+    );
+
+  return (
+    <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
+      <div className="mb-2 flex items-baseline justify-between">
+        <div className="text-sm font-medium text-zinc-200">관련 종목</div>
+        <div className="text-[11px] text-zinc-500">{data.market} · 거래량 기준</div>
+      </div>
+      <ul className="divide-y divide-zinc-800">
+        {data.items.map((m) => {
+          const pct = m.pct_change;
+          const tone =
+            pct == null || pct === 0
+              ? "text-zinc-400"
+              : pct > 0
+              ? "text-rose-400"
+              : "text-sky-400";
+          return (
+            <li key={m.code}>
+              <Link
+                href={`/${m.code}`}
+                className="flex items-center justify-between gap-2 py-1.5 text-xs hover:bg-zinc-800/40"
+              >
+                <span className="min-w-0 truncate text-zinc-100">{m.name}</span>
+                <span className="shrink-0 text-right tabular-nums">
+                  <span className="text-zinc-100">
+                    {m.close != null
+                      ? m.close.toLocaleString(undefined, { maximumFractionDigits: 0 })
+                      : "—"}
+                  </span>
+                  <span className={`ml-2 ${tone}`}>
+                    {pct != null
+                      ? `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`
+                      : ""}
+                  </span>
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

web/lib/api.ts

@@ -162,6 +162,30 @@ export type NewsResponse = {
   items: NewsItem[];
 };
 
+export type Mover = {
+  code: string;
+  name: string;
+  market: string;
+  close: number | null;
+  prev_close: number | null;
+  volume: number | null;
+  pct_change: number | null;
+};
+
+export type MoversResponse = {
+  market: string;
+  limit: number;
+  gainers: Mover[];
+  losers: Mover[];
+  by_volume: Mover[];
+};
+
+export type RelatedResponse = {
+  code: string;
+  market: string;
+  items: Mover[];
+};
+
 async function getJson<T>(path: string, init?: RequestInit): Promise<T> {
   const res = await fetch(`${API_BASE}${path}`, {
     ...init,
@@ -209,4 +233,10 @@ export const api = {
         source ? `&source=${encodeURIComponent(source)}` : ""
       }`,
     ),
+  movers: (market: "ALL" | "KOSPI" | "KOSDAQ" = "ALL", limit = 10) =>
+    getJson<MoversResponse>(`/api/markets/movers?market=${market}&limit=${limit}`),
+  related: (code: string, limit = 8) =>
+    getJson<RelatedResponse>(
+      `/api/markets/related/${encodeURIComponent(code)}?limit=${limit}`,
+    ),
 };