04358469d1
홈 페이지:
- 텍스트 카드를 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.
97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
// 종목 페이지 상단 가격 헤더.
|
|
// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 + 우측에 sparkline.
|
|
// 한국 거래소 관행대로 상승=빨강, 하락=파랑.
|
|
|
|
type Props = {
|
|
name: string;
|
|
code: string;
|
|
market: string;
|
|
current: number | null;
|
|
prev: number | null;
|
|
asOf?: string | null;
|
|
// 헤더 우측 sparkline 용 종가 시계열 (오래된 → 최신 순). 비어 있으면 미표시.
|
|
series?: number[];
|
|
};
|
|
|
|
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 =
|
|
change == null || change === 0
|
|
? "text-zinc-400"
|
|
: change > 0
|
|
? "text-rose-400"
|
|
: "text-sky-400";
|
|
const arrow = change == null || change === 0 ? "—" : change > 0 ? "▲" : "▼";
|
|
|
|
return (
|
|
<div className="mb-5 flex items-end justify-between gap-4">
|
|
<div>
|
|
<div className="text-xs text-zinc-500">
|
|
{code} · {market}
|
|
</div>
|
|
<h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-50">
|
|
{name}
|
|
</h1>
|
|
<div className="mt-3 flex items-baseline gap-3">
|
|
<span className="text-4xl font-semibold tabular-nums text-zinc-50">
|
|
{current != null ? current.toLocaleString() : "-"}
|
|
</span>
|
|
{change != null && pct != null && (
|
|
<span className={`text-base font-medium tabular-nums ${tone}`}>
|
|
{arrow} {Math.abs(change).toLocaleString()}{" "}
|
|
({pct >= 0 ? "+" : ""}
|
|
{pct.toFixed(2)}%)
|
|
</span>
|
|
)}
|
|
</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>
|
|
);
|
|
}
|