b16f2b578d
- 예측 오버레이: 라인 시리즈 3개 (median/q10/q90) 를 단일 캔들 시리즈 하나로 합쳤다. 합성 OHLC: open=직전 close, close=point_close, high=ci_high, low=ci_low. 옅은 색 (up #fda4af / down #93c5fd) 으로 실 캔들과 시각 톤은 같고 명도만 낮춰 "어우러지되 미래"임이 보이게. - 예측 프리셋 단순화: 단기/중기/장기 + 직접입력 다 떼고 15일/30일/1년 3개로. 백엔드 horizon cap 30 → 252 로 확장 (1년 = 240 거래일). - PriceHero: 종목명/현재가/등락 큰 글씨 헤더. KR 관례대로 상승=빨강, 하락=파랑. - PeriodTabs: 1일/1주/1달/3달/1년/5년/최대 7탭. 기존 interval+days 이중 컨트롤 제거. 5년·최대 는 자동으로 주봉/월봉으로 폴백. - 차트 본체 캔들 색조도 KR 관례 (적/청) 로 통일. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
// 종목 페이지 상단 가격 헤더.
|
|
// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 (절대값 + 퍼센트).
|
|
// 한국 거래소 관행대로 상승=빨강, 하락=파랑.
|
|
|
|
type Props = {
|
|
name: string;
|
|
code: string;
|
|
market: string;
|
|
current: number | null;
|
|
prev: number | null;
|
|
asOf?: string | null;
|
|
};
|
|
|
|
export function PriceHero({ name, code, market, current, prev, asOf }: 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">
|
|
<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>
|
|
);
|
|
}
|