feat(themes): 테마 인덱스/상세 (11 카테고리 · 111 종목)

- seed/themes.py: 반도체/2차전지/바이오/게임/엔터/자동차/금융/조선·방산/플랫폼·AI/유통·소비재/에너지 정적 매핑
- /api/themes (인덱스) + /api/themes/{slug} (종목 카드 + 최신 종가/등락)
- 홈에 ThemeTiles 그리드, /themes/{slug} 상세 페이지

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

web/app/page.tsx

@@ -1,6 +1,7 @@
 import { MarketsOverview } from "../components/MarketsOverview";
 import { SearchBox } from "../components/SearchBox";
 import { SeedTiles } from "../components/SeedTiles";
+import { ThemeTiles } from "../components/ThemeTiles";
 
 export default function HomePage() {
   return (
@@ -19,6 +20,10 @@ export default function HomePage() {
         <SeedTiles />
       </div>
 
+      <div className="mt-8">
+        <ThemeTiles />
+      </div>
+
       <div className="mt-6">
         <MarketsOverview />
       </div>

web/app/themes/[slug]/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+// 테마 상세 페이지: /themes/{slug}.
+// 카드 그리드로 해당 테마 종목을 나열. close/pct_change 없으면 자리만 표시.
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { api, type ThemeDetailResponse } from "../../../lib/api";
+
+export default function ThemePage({ params }: { params: { slug: string } }) {
+  const { slug } = params;
+  const [data, setData] = useState<ThemeDetailResponse | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    setErr(null);
+    setData(null);
+    api
+      .themeDetail(slug, 60)
+      .then((r) => {
+        if (alive) setData(r);
+      })
+      .catch((e) => {
+        if (alive) setErr(e instanceof Error ? e.message : String(e));
+      });
+    return () => {
+      alive = false;
+    };
+  }, [slug]);
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-8">
+      <div className="mb-4">
+        <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
+          ← 홈
+        </Link>
+      </div>
+
+      {err && <div className="text-sm text-red-400">테마 로딩 실패: {err}</div>}
+      {!data && !err && <div className="text-sm text-zinc-500">테마 로딩 중…</div>}
+
+      {data && (
+        <>
+          <h1 className="text-2xl font-bold text-zinc-50">{data.name}</h1>
+          <p className="mt-1 text-sm text-zinc-400">{data.description}</p>
+          <div className="mt-1 text-[11px] text-zinc-600">
+            {data.items.length} 종목
+          </div>
+
+          <div className="mt-6 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+            {data.items.map((m) => {
+              const pct = m.pct_change;
+              const tone =
+                pct == null || pct === 0
+                  ? "text-zinc-400"
+                  : pct > 0
+                  ? "text-rose-400"
+                  : "text-sky-400";
+              return (
+                <Link
+                  key={m.code}
+                  href={`/${m.code}`}
+                  className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2.5 transition hover:border-zinc-700 hover:bg-zinc-800/60"
+                >
+                  <div className="flex items-baseline justify-between gap-2">
+                    <div className="min-w-0 truncate text-sm font-medium text-zinc-100">
+                      {m.name}
+                    </div>
+                    <div className="shrink-0 text-[11px] text-zinc-500">
+                      {m.market ?? "—"}
+                    </div>
+                  </div>
+                  <div className="mt-1 flex items-baseline justify-between text-xs tabular-nums">
+                    <span className="text-zinc-200">
+                      {m.close != null
+                        ? m.close.toLocaleString(undefined, {
+                            maximumFractionDigits: 0,
+                          })
+                        : "—"}
+                    </span>
+                    <span className={tone}>
+                      {pct != null
+                        ? `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`
+                        : ""}
+                    </span>
+                  </div>
+                  <div className="mt-0.5 text-[10px] text-zinc-600">{m.code}</div>
+                </Link>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </main>
+  );
+}

web/components/ThemeTiles.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+// 홈에 들어가는 '테마로 골라보기' 그리드.
+// /api/themes 인덱스를 받아 카드로 펼치고, 카드 클릭 시 /themes/{slug} 로 이동.
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { api, type ThemesIndexResponse } from "../lib/api";
+
+export function ThemeTiles() {
+  const [data, setData] = useState<ThemesIndexResponse | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    api
+      .themesIndex()
+      .then((r) => {
+        if (alive) setData(r);
+      })
+      .catch((e) => {
+        if (alive) setErr(e instanceof Error ? e.message : String(e));
+      });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  if (err)
+    return (
+      <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4 text-xs text-zinc-500">
+        테마 로딩 실패: {err}
+      </div>
+    );
+  if (!data)
+    return (
+      <div className="rounded-lg border border-zinc-800 bg-zinc-900/30 p-4 text-xs text-zinc-500">
+        테마 로딩 중…
+      </div>
+    );
+
+  return (
+    <div>
+      <div className="mb-3 flex items-baseline justify-between">
+        <h2 className="text-sm font-semibold text-zinc-200">테마로 골라보기</h2>
+        <span className="text-[11px] text-zinc-500">{data.total} 카테고리</span>
+      </div>
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
+        {data.items.map((t) => (
+          <Link
+            key={t.slug}
+            href={`/themes/${t.slug}`}
+            className="group rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2.5 transition hover:border-zinc-700 hover:bg-zinc-800/60"
+          >
+            <div className="text-sm font-medium text-zinc-100 group-hover:text-rose-300">
+              {t.name}
+            </div>
+            <div className="mt-0.5 truncate text-[11px] text-zinc-500">
+              {t.description}
+            </div>
+            <div className="mt-1 text-[10px] text-zinc-600">
+              {t.code_count} 종목
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

web/lib/api.ts

@@ -186,6 +186,25 @@ export type RelatedResponse = {
   items: Mover[];
 };
 
+export type ThemeIndex = {
+  slug: string;
+  name: string;
+  description: string;
+  code_count: number;
+};
+
+export type ThemesIndexResponse = {
+  items: ThemeIndex[];
+  total: number;
+};
+
+export type ThemeDetailResponse = {
+  slug: string;
+  name: string;
+  description: string;
+  items: Mover[];
+};
+
 async function getJson<T>(path: string, init?: RequestInit): Promise<T> {
   const res = await fetch(`${API_BASE}${path}`, {
     ...init,
@@ -239,4 +258,9 @@ export const api = {
     getJson<RelatedResponse>(
       `/api/markets/related/${encodeURIComponent(code)}?limit=${limit}`,
     ),
+  themesIndex: () => getJson<ThemesIndexResponse>(`/api/themes`),
+  themeDetail: (slug: string, limit = 30) =>
+    getJson<ThemeDetailResponse>(
+      `/api/themes/${encodeURIComponent(slug)}?limit=${limit}`,
+    ),
 };