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.
This commit is contained in:
claude
147
web/components/MarketsOverview.tsx
Normal file
147
web/components/MarketsOverview.tsx
Normal file
@@ -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();
|
||||
}
|
||||
91
web/components/RelatedStocks.tsx
Normal file
91
web/components/RelatedStocks.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user