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/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