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.

web/app/[code]/page.tsx

@@ -66,17 +66,22 @@ export default function CodePage({ params }: { params: { code: string } }) {
     };
   }, [code]);
 
-  // 현재가/전일가 — ohlcv 끝 두 점에서 산출.
+  // 현재가/전일가 + 헤더 sparkline 시리즈 — ohlcv 끝부분에서 산출.
-  const { current, prev, asOf } = useMemo(() => {
+  const { current, prev, asOf, sparkSeries } = useMemo(() => {
-    if (!chart || !chart.ohlcv.length) return { current: null, prev: null, asOf: null };
+    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>

web/app/page.tsx

@@ -1,34 +1,28 @@
 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">
+    <main className="mx-auto max-w-5xl px-6 py-12">
-      <h1 className="text-3xl font-bold tracking-tight text-zinc-50">
+      <h1 className="text-3xl font-bold tracking-tight text-zinc-50">종목 검색</h1>
-        종목 검색
-      </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="mt-10">
-        <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4">
+        <SeedTiles />
-          <div className="font-medium text-zinc-300">학습 대상 10종목</div>
+      </div>
-          <div className="mt-1">
+
-            삼성전자, SK하이닉스, 에코프로비엠, 한미반도체, 두산에너빌리티,
+      <div className="mt-6 rounded-lg border border-zinc-800 bg-zinc-900/30 p-4 text-xs text-zinc-500">
-            한화에어로스페이스, HD현대중공업, NAVER, KT&amp;G, 한국가스공사
+        <div className="font-medium text-zinc-300">매칭 · 재학습</div>
-          </div>
+        <div className="mt-1">
-        </div>
+          평일 16:30 KST 예측↔실제 매칭, 일요일 02:00 KST LGBM 재학습.
-        <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4">
+          앙상블은 Chronos(zero-shot) + LightGBM.
-          <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>

web/components/PriceHero.tsx

@@ -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,28 +27,70 @@ 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 className="text-xs text-zinc-500">
+      <div>
-        {code} · {market}
+        <div className="text-xs text-zinc-500">
-      </div>
+          {code} · {market}
-      <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-50">
+        </div>
-        {name}
+        <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-50">
-      </h1>
+          {name}
-      <div className="mt-3 flex items-baseline gap-3">
+        </h1>
-        <span className="text-4xl font-semibold tabular-nums text-zinc-50">
+        <div className="mt-3 flex items-baseline gap-3">
-          {current != null ? current.toLocaleString() : "-"}
+          <span className="text-4xl font-semibold tabular-nums text-zinc-50">
-        </span>
+            {current != null ? current.toLocaleString() : "-"}
-        {change != null && pct != null && (
-          <span className={`text-base font-medium tabular-nums ${tone}`}>
-            {arrow} {Math.abs(change).toLocaleString()}{" "}
-            ({pct >= 0 ? "+" : ""}
-            {pct.toFixed(2)}%)
           </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>
-      {asOf && (
+
-        <div className="mt-1 text-xs text-zinc-500">기준 {asOf}</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>
+  );
+}

web/components/SeedTiles.tsx

@@ -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>
+  );
+}