ecf8b9112b
- New table symbol_views_daily(code, view_date, views) via migration 004.
- POST /api/views/{code} UPSERTs and returns today_views; GET returns
today + last_7d + trend (last 7 days).
- Client dedupes via localStorage (views:logged map keyed by KST date) so a
given browser counts once per day per code; refresh/extra tabs don't inflate.
- PriceHero shows "오늘 N명이 봤어요" pill when viewsToday > 0.
Read-only social proof — Toss 의 종목 상세에서 익명 카운트로 진입 신호를 주는 패턴.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
// 종목 페이지 상단 가격 헤더.
|
|
// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 + 우측에 sparkline.
|
|
// 한국 거래소 관행대로 상승=빨강, 하락=파랑.
|
|
|
|
import { Sparkline } from "./Sparkline";
|
|
|
|
type Props = {
|
|
name: string;
|
|
code: string;
|
|
market: string;
|
|
current: number | null;
|
|
prev: number | null;
|
|
asOf?: string | null;
|
|
// 헤더 우측 sparkline 용 종가 시계열 (오래된 → 최신 순). 비어 있으면 미표시.
|
|
series?: number[];
|
|
// social-proof — "오늘 N명이 봤어요" 배지. null/0 이면 숨김.
|
|
viewsToday?: number | null;
|
|
};
|
|
|
|
export function PriceHero({
|
|
name,
|
|
code,
|
|
market,
|
|
current,
|
|
prev,
|
|
asOf,
|
|
series,
|
|
viewsToday,
|
|
}: 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>
|
|
<div className="mt-1 flex items-center gap-2 text-xs text-zinc-500">
|
|
{asOf && <span>기준 {asOf}</span>}
|
|
{viewsToday != null && viewsToday > 0 && (
|
|
<span className="rounded-full border border-zinc-700/70 bg-zinc-900/60 px-2 py-0.5 text-[11px] text-zinc-300">
|
|
오늘 <span className="tabular-nums text-zinc-100">
|
|
{viewsToday.toLocaleString()}
|
|
</span>
|
|
명이 봤어요
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{series && series.length >= 2 && (
|
|
<Sparkline
|
|
values={series}
|
|
stroke={change != null && change < 0 ? "#3b82f6" : "#ef4444"}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|