feat(ui): 홈 SEED-10 타일 + 가격 헤로 sparkline
홈 페이지:
- 텍스트 카드를 SeedTiles 컴포넌트로 교체. 10개 병렬로 /api/chart 2일치 받아
현재가 + 전일대비 (절대값+%) 카드 그리드 (2/3/5 컬럼).
- max-w 를 3xl → 5xl 로 확장하여 타일 5열 그리드 수용.
종목 페이지:
- PriceHero 에 series prop 추가, 우측에 SVG sparkline (최근 30 종가) 표시.
- 라인 색상은 전일대비 부호로 결정 (상승 빨강 / 하락 파랑).
- lightweight-charts 인스턴스 추가 없이 인라인 SVG 만 사용 — 가벼움.
verify: tsc/next lint clean.
This commit is contained in:
claude
@@ -66,17 +66,22 @@ export default function CodePage({ params }: { params: { code: string } }) {
|
||||
};
|
||||
}, [code]);
|
||||
|
||||
// 현재가/전일가 — ohlcv 끝 두 점에서 산출.
|
||||
const { current, prev, asOf } = useMemo(() => {
|
||||
if (!chart || !chart.ohlcv.length) return { current: null, prev: null, asOf: null };
|
||||
// 현재가/전일가 + 헤더 sparkline 시리즈 — ohlcv 끝부분에서 산출.
|
||||
const { current, prev, asOf, sparkSeries } = useMemo(() => {
|
||||
if (!chart || !chart.ohlcv.length)
|
||||
return { current: null, prev: null, asOf: null, sparkSeries: [] as number[] };
|
||||
const valid = chart.ohlcv.filter((p) => p.close != null);
|
||||
if (!valid.length) return { current: null, prev: null, asOf: null };
|
||||
if (!valid.length)
|
||||
return { current: null, prev: null, asOf: null, sparkSeries: [] as number[] };
|
||||
const last = valid[valid.length - 1];
|
||||
const prevPt = valid.length >= 2 ? valid[valid.length - 2] : null;
|
||||
// 최근 30개 종가 (없으면 가용 전체).
|
||||
const recent = valid.slice(-30).map((p) => p.close as number);
|
||||
return {
|
||||
current: last.close,
|
||||
prev: prevPt?.close ?? null,
|
||||
asOf: last.date,
|
||||
sparkSeries: recent,
|
||||
};
|
||||
}, [chart]);
|
||||
|
||||
@@ -100,6 +105,7 @@ export default function CodePage({ params }: { params: { code: string } }) {
|
||||
current={current}
|
||||
prev={prev}
|
||||
asOf={asOf}
|
||||
series={sparkSeries}
|
||||
/>
|
||||
<div className="grid gap-6 lg:grid-cols-[1fr_280px]">
|
||||
<div>
|
||||
|
||||
@@ -1,36 +1,30 @@
|
||||
import { SearchBox } from "../components/SearchBox";
|
||||
import { SeedTiles } from "../components/SeedTiles";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main className="mx-auto max-w-3xl px-6 py-16">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-zinc-50">
|
||||
종목 검색
|
||||
</h1>
|
||||
<main className="mx-auto max-w-5xl px-6 py-12">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-zinc-50">종목 검색</h1>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
종목을 골라 차트를 보고, <b className="text-rose-300">예상차트 보기</b> 버튼으로
|
||||
15일·30일·1년 예측 캔들을 같은 차트에 이어 붙입니다.
|
||||
</p>
|
||||
|
||||
<div className="mt-8">
|
||||
<div className="mt-6">
|
||||
<SearchBox autoFocus />
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid gap-3 text-xs text-zinc-500 sm:grid-cols-2">
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4">
|
||||
<div className="font-medium text-zinc-300">학습 대상 10종목</div>
|
||||
<div className="mt-1">
|
||||
삼성전자, SK하이닉스, 에코프로비엠, 한미반도체, 두산에너빌리티,
|
||||
한화에어로스페이스, HD현대중공업, NAVER, KT&G, 한국가스공사
|
||||
<div className="mt-10">
|
||||
<SeedTiles />
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4">
|
||||
<div className="font-medium text-zinc-300">매칭/재학습</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">
|
||||
평일 16:30 KST 예측↔실제 매칭, 일요일 02:00 KST LGBM 재학습.
|
||||
앙상블은 Chronos(zero-shot) + LightGBM.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
// 종목 페이지 상단 가격 헤더.
|
||||
// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 (절대값 + 퍼센트).
|
||||
// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 + 우측에 sparkline.
|
||||
// 한국 거래소 관행대로 상승=빨강, 하락=파랑.
|
||||
|
||||
type Props = {
|
||||
@@ -11,9 +11,11 @@ type Props = {
|
||||
current: number | null;
|
||||
prev: number | null;
|
||||
asOf?: string | null;
|
||||
// 헤더 우측 sparkline 용 종가 시계열 (오래된 → 최신 순). 비어 있으면 미표시.
|
||||
series?: number[];
|
||||
};
|
||||
|
||||
export function PriceHero({ name, code, market, current, prev, asOf }: Props) {
|
||||
export function PriceHero({ name, code, market, current, prev, asOf, series }: Props) {
|
||||
const change = current != null && prev != null ? current - prev : null;
|
||||
const pct = change != null && prev ? (change / prev) * 100 : null;
|
||||
const tone =
|
||||
@@ -25,7 +27,8 @@ export function PriceHero({ name, code, market, current, prev, asOf }: Props) {
|
||||
const arrow = change == null || change === 0 ? "—" : change > 0 ? "▲" : "▼";
|
||||
|
||||
return (
|
||||
<div className="mb-5">
|
||||
<div className="mb-5 flex items-end justify-between gap-4">
|
||||
<div>
|
||||
<div className="text-xs text-zinc-500">
|
||||
{code} · {market}
|
||||
</div>
|
||||
@@ -44,9 +47,50 @@ export function PriceHero({ name, code, market, current, prev, asOf }: Props) {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{asOf && (
|
||||
<div className="mt-1 text-xs text-zinc-500">기준 {asOf}</div>
|
||||
{asOf && <div className="mt-1 text-xs text-zinc-500">기준 {asOf}</div>}
|
||||
</div>
|
||||
|
||||
{series && series.length >= 2 && (
|
||||
<Sparkline
|
||||
values={series}
|
||||
stroke={change != null && change < 0 ? "#3b82f6" : "#ef4444"}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 가벼운 SVG sparkline. lightweight-charts 인스턴스를 또 만들 필요 없음.
|
||||
function Sparkline({ values, stroke }: { values: number[]; stroke: string }) {
|
||||
const W = 140;
|
||||
const H = 44;
|
||||
const min = Math.min(...values);
|
||||
const max = Math.max(...values);
|
||||
const span = max - min || 1;
|
||||
const stepX = W / (values.length - 1);
|
||||
const points = values
|
||||
.map((v, i) => {
|
||||
const x = (i * stepX).toFixed(1);
|
||||
const y = (H - ((v - min) / span) * H).toFixed(1);
|
||||
return `${x},${y}`;
|
||||
})
|
||||
.join(" ");
|
||||
return (
|
||||
<svg
|
||||
width={W}
|
||||
height={H}
|
||||
viewBox={`0 0 ${W} ${H}`}
|
||||
className="shrink-0 opacity-80"
|
||||
aria-hidden
|
||||
>
|
||||
<polyline
|
||||
points={points}
|
||||
fill="none"
|
||||
stroke={stroke}
|
||||
strokeWidth={1.5}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
121
web/components/SeedTiles.tsx
Normal file
121
web/components/SeedTiles.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
"use client";
|
||||
|
||||
// 학습 대상 SEED 10종목 quick-access 타일.
|
||||
//
|
||||
// 토스 홈의 '인기 종목' 카드 톤. 각 타일이 자체적으로 /api/chart 를 2일치 받아
|
||||
// 현재가/전일대비 를 계산해서 표시. 10개 병렬 호출 — 백엔드는 캐시 친화적이므로 OK.
|
||||
//
|
||||
// 백엔드 신규 엔드포인트가 추가되면 (예: /api/markets/top-volume) 그쪽으로 갈아끼움.
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { api } from "../lib/api";
|
||||
|
||||
type Tile = {
|
||||
code: string;
|
||||
name: string;
|
||||
market: string;
|
||||
current: number | null;
|
||||
prev: number | null;
|
||||
};
|
||||
|
||||
const SEED_TICKERS: Array<Omit<Tile, "current" | "prev">> = [
|
||||
{ code: "005930", name: "삼성전자", market: "KOSPI" },
|
||||
{ code: "000660", name: "SK하이닉스", market: "KOSPI" },
|
||||
{ code: "247540", name: "에코프로비엠", market: "KOSDAQ" },
|
||||
{ code: "042700", name: "한미반도체", market: "KOSPI" },
|
||||
{ code: "034020", name: "두산에너빌리티", market: "KOSPI" },
|
||||
{ code: "012450", name: "한화에어로스페이스", market: "KOSPI" },
|
||||
{ code: "329180", name: "HD현대중공업", market: "KOSPI" },
|
||||
{ code: "035420", name: "NAVER", market: "KOSPI" },
|
||||
{ code: "033780", name: "KT&G", market: "KOSPI" },
|
||||
{ code: "036460", name: "한국가스공사", market: "KOSPI" },
|
||||
];
|
||||
|
||||
export function SeedTiles() {
|
||||
const [tiles, setTiles] = useState<Tile[]>(
|
||||
SEED_TICKERS.map((t) => ({ ...t, current: null, prev: null })),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
// 10 병렬 fetch. 한 종목 실패해도 다른 타일은 살린다.
|
||||
Promise.allSettled(
|
||||
SEED_TICKERS.map(async (t) => {
|
||||
const c = await api.getChart(t.code, 5, "1d");
|
||||
const valid = c.ohlcv.filter((p) => p.close != null);
|
||||
const last = valid[valid.length - 1] ?? null;
|
||||
const prev = valid.length >= 2 ? valid[valid.length - 2] : null;
|
||||
return {
|
||||
code: t.code,
|
||||
name: t.name,
|
||||
market: t.market,
|
||||
current: last?.close ?? null,
|
||||
prev: prev?.close ?? null,
|
||||
};
|
||||
}),
|
||||
).then((settled) => {
|
||||
if (!alive) return;
|
||||
const next: Tile[] = settled.map((r, i) => {
|
||||
if (r.status === "fulfilled") return r.value;
|
||||
return { ...SEED_TICKERS[i], current: null, prev: null };
|
||||
});
|
||||
setTiles(next);
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4">
|
||||
<div className="mb-3 flex items-baseline justify-between">
|
||||
<div className="text-sm font-medium text-zinc-200">학습 대상 10종목</div>
|
||||
<div className="text-[11px] text-zinc-500">현재가 · 전일대비</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
|
||||
{tiles.map((t) => (
|
||||
<TileCard key={t.code} t={t} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TileCard({ t }: { t: Tile }) {
|
||||
const change =
|
||||
t.current != null && t.prev != null ? t.current - t.prev : null;
|
||||
const pct =
|
||||
change != null && t.prev != null && t.prev !== 0
|
||||
? (change / t.prev) * 100
|
||||
: null;
|
||||
const tone =
|
||||
change == null || change === 0
|
||||
? "text-zinc-400"
|
||||
: change > 0
|
||||
? "text-rose-400"
|
||||
: "text-sky-400";
|
||||
return (
|
||||
<Link
|
||||
href={`/${t.code}`}
|
||||
className="block rounded-md border border-zinc-800 bg-zinc-900/40 p-3 transition hover:border-zinc-600"
|
||||
>
|
||||
<div className="truncate text-sm font-medium text-zinc-100">{t.name}</div>
|
||||
<div className="mt-0.5 text-[11px] text-zinc-500">
|
||||
{t.code} · {t.market}
|
||||
</div>
|
||||
<div className="mt-2 text-sm tabular-nums text-zinc-100">
|
||||
{t.current != null
|
||||
? t.current.toLocaleString(undefined, { maximumFractionDigits: 0 })
|
||||
: "—"}
|
||||
</div>
|
||||
<div className={`text-[11px] tabular-nums ${tone}`}>
|
||||
{change == null
|
||||
? " "
|
||||
: `${change > 0 ? "+" : ""}${change.toLocaleString(undefined, {
|
||||
maximumFractionDigits: 0,
|
||||
})}${pct != null ? ` (${pct > 0 ? "+" : ""}${pct.toFixed(2)}%)` : ""}`}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user