feat(ui): 최근 본 종목 (localStorage + 홈 카드 + TopNav popover)

- web/lib/recent.ts: stockchart.recent KEY, push/get/clear/subscribe (storage + custom event)
- [code]/page.tsx: 페이지 진입 시 recent.push(code) — 자동 트래킹
- web/components/RecentTiles.tsx: 홈 카드 그리드 (최대 10개, 2~5컬럼)
- web/app/page.tsx: SearchBox 아래에 RecentTiles 배치 (빈 리스트면 자동 숨김)
- TopNav: 검색어 비면서 포커스 시 최근 본 종목 popover 표시 + "지우기" 버튼

토스 "최근 본 종목" 톤 — 검색 빈 상태에서도 popover 가 비어 있지 않게.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/app/[code]/page.tsx

@@ -17,6 +17,7 @@ import { StockChart } from "../../components/StockChart";
 import { SymbolSidebar } from "../../components/SymbolSidebar";
 import { TradingValuePanel } from "../../components/TradingValuePanel";
 import { api, type ChartPayload, type LatestPredictionResponse } from "../../lib/api";
+import { recent } from "../../lib/recent";
 
 export default function CodePage({ params }: { params: { code: string } }) {
   const { code } = params;
@@ -28,6 +29,11 @@ export default function CodePage({ params }: { params: { code: string } }) {
   const spec = periodSpec(period);
   const isIntraday = spec.interval === "10m";
 
+  // 종목 페이지 방문 시 최근 본 종목에 push.
+  useEffect(() => {
+    recent.push(code);
+  }, [code]);
+
   useEffect(() => {
     let alive = true;
     setErr(null);

web/app/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { IndicesPanel } from "../components/IndicesPanel";
 import { MarketsOverview } from "../components/MarketsOverview";
+import { RecentTiles } from "../components/RecentTiles";
 import { SearchBox } from "../components/SearchBox";
 import { SeedTiles } from "../components/SeedTiles";
 import { ThemeTiles } from "../components/ThemeTiles";
@@ -28,6 +29,10 @@ export default function HomePage() {
         <SearchBox autoFocus />
       </div>
 
+      <div className="mt-8">
+        <RecentTiles />
+      </div>
+
       <div className="mt-8">
         <IndicesPanel />
       </div>

web/components/RecentTiles.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+// 최근 본 종목 카드 그리드. localStorage 의 stockchart.recent 를 구독.
+// 각 코드별로 /api/chart 2일치 받아서 현재가/전일대비 표시.
+// 빈 리스트면 패널 자체를 안 그림.
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { api } from "../lib/api";
+import { recent } from "../lib/recent";
+
+type Tile = {
+  code: string;
+  name: string;
+  market: string;
+  current: number | null;
+  prev: number | null;
+};
+
+export function RecentTiles() {
+  const [codes, setCodes] = useState<string[]>([]);
+  const [tiles, setTiles] = useState<Tile[]>([]);
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    setHydrated(true);
+    const refresh = () => setCodes(recent.get());
+    refresh();
+    return recent.subscribe(refresh);
+  }, []);
+
+  useEffect(() => {
+    if (!hydrated || codes.length === 0) {
+      setTiles([]);
+      return;
+    }
+    let alive = true;
+    Promise.allSettled(
+      codes.map(async (code) => {
+        const c = await api.getChart(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,
+          name: c.name,
+          market: c.market,
+          current: last?.close ?? null,
+          prev: prev?.close ?? null,
+        };
+      }),
+    ).then((settled) => {
+      if (!alive) return;
+      setTiles(
+        settled.map((r, i) => {
+          if (r.status === "fulfilled") return r.value;
+          return {
+            code: codes[i],
+            name: codes[i],
+            market: "—",
+            current: null,
+            prev: null,
+          };
+        }),
+      );
+    });
+    return () => {
+      alive = false;
+    };
+  }, [codes, hydrated]);
+
+  if (!hydrated || codes.length === 0) return null;
+
+  return (
+    <div className="rounded-md 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">최근 본 종목</div>
+        <button
+          type="button"
+          onClick={() => recent.clear()}
+          className="text-[11px] text-zinc-500 hover:text-zinc-300"
+        >
+          모두 지우기
+        </button>
+      </div>
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
+        {tiles.map((t) => (
+          <Tile key={t.code} t={t} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Tile({ 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-2.5 transition hover:border-zinc-600"
+    >
+      <div className="truncate text-xs font-medium text-zinc-100">{t.name}</div>
+      <div className="mt-0.5 text-[10px] text-zinc-500">
+        {t.code} · {t.market}
+      </div>
+      <div className="mt-1.5 text-xs tabular-nums text-zinc-100">
+        {t.current != null
+          ? t.current.toLocaleString(undefined, { maximumFractionDigits: 0 })
+          : "—"}
+      </div>
+      <div className={`text-[10px] tabular-nums ${tone}`}>
+        {pct == null
+          ? " "
+          : `${pct > 0 ? "+" : ""}${pct.toFixed(2)}%`}
+      </div>
+    </Link>
+  );
+}

web/components/TopNav.tsx

@@ -9,14 +9,23 @@
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 import { api, type Symbol } from "../lib/api";
+import { recent } from "../lib/recent";
 
 export function TopNav() {
   const [q, setQ] = useState("");
   const [items, setItems] = useState<Symbol[]>([]);
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [recentCodes, setRecentCodes] = useState<string[]>([]);
   const wrapRef = useRef<HTMLDivElement | null>(null);
 
+  // 최근 본 종목 구독 — popover 빈 상태에서 보여줌.
+  useEffect(() => {
+    const refresh = () => setRecentCodes(recent.get());
+    refresh();
+    return recent.subscribe(refresh);
+  }, []);
+
   // 디바운스 검색. 입력 비면 결과 클리어.
   useEffect(() => {
     const term = q.trim();
@@ -112,6 +121,34 @@ export function TopNav() {
               </ul>
             </div>
           )}
+
+          {open && !q.trim() && recentCodes.length > 0 && (
+            <div className="absolute left-0 right-0 top-full mt-1 max-h-80 overflow-auto rounded-md border border-zinc-800 bg-zinc-950 shadow-xl">
+              <div className="flex items-center justify-between px-3 py-1.5 text-[10px] text-zinc-500">
+                <span>최근 본 종목</span>
+                <button
+                  type="button"
+                  onClick={() => recent.clear()}
+                  className="hover:text-zinc-300"
+                >
+                  지우기
+                </button>
+              </div>
+              <ul className="divide-y divide-zinc-800">
+                {recentCodes.map((c) => (
+                  <li key={c}>
+                    <Link
+                      href={`/${c}`}
+                      onClick={() => setOpen(false)}
+                      className="block px-3 py-2 text-xs text-zinc-200 hover:bg-zinc-800/60"
+                    >
+                      {c}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
         </div>
 
         <Link

web/lib/recent.ts

@@ -0,0 +1,52 @@
+// 최근 본 종목 — localStorage 기반. 종목 페이지 진입 시 자동으로 push.
+// 단순 string[] 직렬화. 최신이 앞쪽, 최대 MAX 개로 캡.
+
+const KEY = "stockchart.recent";
+const MAX = 10;
+
+function read(): string[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(KEY);
+    if (!raw) return [];
+    const v = JSON.parse(raw);
+    return Array.isArray(v) ? v.filter((s) => typeof s === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+function write(codes: string[]) {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(KEY, JSON.stringify(codes));
+  // 같은 탭은 storage 이벤트가 안 떠서 수동 dispatch.
+  window.dispatchEvent(new CustomEvent("recent:change"));
+}
+
+export const recent = {
+  get(): string[] {
+    return read();
+  },
+  push(code: string): void {
+    if (!code) return;
+    const cur = read().filter((c) => c !== code);
+    cur.unshift(code);
+    write(cur.slice(0, MAX));
+  },
+  clear(): void {
+    write([]);
+  },
+  subscribe(cb: () => void): () => void {
+    if (typeof window === "undefined") return () => {};
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === KEY) cb();
+    };
+    const onCustom = () => cb();
+    window.addEventListener("storage", onStorage);
+    window.addEventListener("recent:change", onCustom as EventListener);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener("recent:change", onCustom as EventListener);
+    };
+  },
+};