feat(ui): 관심종목(localStorage) + DART 공시 패널

- web/lib/watchlist.ts: KEY=stockchart.watchlist, storage+custom event 구독
- StarButton: 종목 페이지 헤더에서 ☆/★ 토글
- /watchlist 페이지: 카드 그리드 + 현재가/전일대비 + ✕ 제거
- DisclosuresPanel: 기존 /api/news?source=dart 재사용 (백엔드 신설 없음)
- 종목 페이지 하단에 공시 패널 부착, 홈에 ★ 관심종목 링크 추가

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

web/app/[code]/page.tsx

@@ -2,12 +2,14 @@
 
 import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
+import { DisclosuresPanel } from "../../components/DisclosuresPanel";
 import { MetricsPanel } from "../../components/MetricsPanel";
 import { NewsList } from "../../components/NewsList";
 import { PeriodTabs, periodSpec, type Period } from "../../components/PeriodTabs";
 import { PredictionPanel } from "../../components/PredictionPanel";
 import { PriceHero } from "../../components/PriceHero";
 import { RelatedStocks } from "../../components/RelatedStocks";
+import { StarButton } from "../../components/StarButton";
 import { StockChart } from "../../components/StockChart";
 import { SymbolSidebar } from "../../components/SymbolSidebar";
 import { api, type ChartPayload, type LatestPredictionResponse } from "../../lib/api";
@@ -89,10 +91,21 @@ export default function CodePage({ params }: { params: { code: string } }) {
   return (
     <main className="mx-auto max-w-5xl px-6 py-8">
       <div className="mb-4 flex items-center justify-between gap-3">
-        <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
-          ← 검색
-        </Link>
-        <PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
+        <div className="flex items-center gap-3">
+          <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
+            ← 검색
+          </Link>
+          <Link
+            href="/watchlist"
+            className="text-xs text-zinc-500 hover:text-zinc-300"
+          >
+            관심종목
+          </Link>
+        </div>
+        <div className="flex items-center gap-3">
+          <StarButton code={code} name={chart?.name} />
+          <PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
+        </div>
       </div>
 
       {err && <div className="mb-4 text-sm text-red-400">차트 로딩 실패: {err}</div>}
@@ -129,6 +142,9 @@ export default function CodePage({ params }: { params: { code: string } }) {
             <MetricsPanel code={code} />
             <NewsList code={code} />
           </div>
+          <div className="mt-6">
+            <DisclosuresPanel code={code} />
+          </div>
         </>
       )}
     </main>

web/app/page.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { IndicesPanel } from "../components/IndicesPanel";
 import { MarketsOverview } from "../components/MarketsOverview";
 import { SearchBox } from "../components/SearchBox";
@@ -7,11 +8,21 @@ import { ThemeTiles } from "../components/ThemeTiles";
 export default function HomePage() {
   return (
     <main className="mx-auto max-w-5xl px-6 py-12">
-      <h1 className="text-3xl font-bold tracking-tight text-zinc-50">종목 검색</h1>
-      <p className="mt-2 text-sm text-zinc-400">
-        종목을 골라 차트를 보고, <b className="text-rose-300">예상차트 보기</b> 버튼으로
-        15일·30일·1년 예측 캔들을 같은 차트에 이어 붙입니다.
-      </p>
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-zinc-50">종목 검색</h1>
+          <p className="mt-2 text-sm text-zinc-400">
+            종목을 골라 차트를 보고, <b className="text-rose-300">예상차트 보기</b> 버튼으로
+            15일·30일·1년 예측 캔들을 같은 차트에 이어 붙입니다.
+          </p>
+        </div>
+        <Link
+          href="/watchlist"
+          className="shrink-0 rounded-full border border-amber-500/40 bg-amber-500/10 px-3 py-1.5 text-xs text-amber-300 hover:bg-amber-500/20"
+        >
+          ★ 관심종목
+        </Link>
+      </div>
 
       <div className="mt-6">
         <SearchBox autoFocus />

web/app/watchlist/page.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+// /watchlist — localStorage 의 관심종목 코드들을 카드 그리드로.
+// SEED 타일과 같은 톤. 각 카드는 /api/chart 2일치를 받아 현재가/전일대비를 채움.
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { api } from "../../lib/api";
+import { watchlist } from "../../lib/watchlist";
+
+type Tile = {
+  code: string;
+  name: string;
+  market: string;
+  current: number | null;
+  prev: number | null;
+};
+
+export default function WatchlistPage() {
+  const [codes, setCodes] = useState<string[]>([]);
+  const [tiles, setTiles] = useState<Tile[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hydrated, setHydrated] = useState(false);
+
+  // localStorage 구독 — 다른 탭/페이지에서 추가/제거해도 즉시 반영.
+  useEffect(() => {
+    setHydrated(true);
+    const refresh = () => setCodes(watchlist.get());
+    refresh();
+    return watchlist.subscribe(refresh);
+  }, []);
+
+  useEffect(() => {
+    if (!hydrated) return;
+    if (codes.length === 0) {
+      setTiles([]);
+      setLoading(false);
+      return;
+    }
+    let alive = true;
+    setLoading(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;
+      const next: Tile[] = settled.map((r, i) => {
+        if (r.status === "fulfilled") return r.value;
+        return {
+          code: codes[i],
+          name: codes[i],
+          market: "—",
+          current: null,
+          prev: null,
+        };
+      });
+      setTiles(next);
+      setLoading(false);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [codes, hydrated]);
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-8">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
+          ← 홈
+        </Link>
+        <span className="text-[11px] text-zinc-500">{codes.length} 종목</span>
+      </div>
+
+      <h1 className="text-2xl font-bold text-zinc-50">관심종목</h1>
+      <p className="mt-1 text-sm text-zinc-400">
+        브라우저 저장소에 보관됩니다. 로그인 없이 같은 브라우저에서 유지.
+      </p>
+
+      <div className="mt-6">
+        {!hydrated || loading ? (
+          <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
+            관심종목 로딩 중…
+          </div>
+        ) : codes.length === 0 ? (
+          <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-6 text-center text-sm text-zinc-500">
+            아직 관심종목이 없습니다.
+            <br />
+            종목 페이지에서 <b className="text-amber-300">☆ 관심</b> 버튼을 눌러 추가하세요.
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
+            {tiles.map((t) => (
+              <TileCard key={t.code} t={t} />
+            ))}
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
+
+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 (
+    <div className="relative">
+      <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>
+      <button
+        type="button"
+        onClick={() => watchlist.remove(t.code)}
+        title="관심종목에서 제거"
+        className="absolute right-1.5 top-1.5 rounded-full bg-zinc-900/80 px-1.5 py-0.5 text-[10px] text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
+      >
+        ✕
+      </button>
+    </div>
+  );
+}