feat(home+search): KOSPI/KOSDAQ 인덱스 카드 + 검색결과 미니 sparkline

- Sparkline 컴포넌트를 PriceHero 내부에서 web/components/Sparkline.tsx 로 분리·재사용
- /api/markets/indices: macro_daily 의 kospi/kosdaq N일 시계열 + 최신값/전일대비
- 홈 IndicesPanel: 두 인덱스 카드(현재값/등락/우측 sparkline)
- /api/symbols/search?with_sparkline=true: 결과 한 번에 최근 30 종가 batch 조회
- SearchBox 결과 행에 mini sparkline + 현재가/등락률 인라인 표시

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

web/components/SearchBox.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { api, type Symbol } from "../lib/api";
+import { Sparkline } from "./Sparkline";
 
 export function SearchBox({ autoFocus = false }: { autoFocus?: boolean }) {
   const [q, setQ] = useState("");
@@ -22,7 +23,8 @@ export function SearchBox({ autoFocus = false }: { autoFocus?: boolean }) {
     setErr(null);
     const handle = setTimeout(async () => {
       try {
-        const r = await api.search(term, seedOnly, 15);
+        // with_sparkline=true: 백엔드가 최근 30 종가 + close + pct_change 동봉.
+        const r = await api.search(term, seedOnly, 15, true);
         setItems(r.items);
       } catch (e) {
         setErr(e instanceof Error ? e.message : String(e));
@@ -63,31 +65,61 @@ export function SearchBox({ autoFocus = false }: { autoFocus?: boolean }) {
       {items.length > 0 && (
         <ul className="mt-2 divide-y divide-zinc-800 rounded-md border border-zinc-800 bg-zinc-900/40">
           {items.map((it) => (
-            <li key={it.code}>
-              <Link
-                href={`/${it.code}`}
-                className="flex items-center justify-between px-4 py-3 text-sm hover:bg-zinc-800/70"
-              >
-                <div>
-                  <div className="font-medium text-zinc-100">
-                    {it.name}
-                    {it.is_seed && (
-                      <span className="ml-2 rounded-full bg-emerald-900/60 px-2 py-0.5 text-[10px] font-semibold text-emerald-300">
-                        SEED
-                      </span>
-                    )}
-                  </div>
-                  <div className="text-xs text-zinc-500">
-                    {it.code} · {it.market}
-                    {it.sector ? ` · ${it.sector}` : ""}
-                  </div>
-                </div>
-                <span className="text-zinc-500">→</span>
-              </Link>
-            </li>
+            <SearchRow key={it.code} it={it} />
           ))}
         </ul>
       )}
     </div>
   );
 }
+
+function SearchRow({ it }: { it: Symbol }) {
+  const pct = it.pct_change ?? null;
+  const tone =
+    pct == null || pct === 0
+      ? "text-zinc-400"
+      : pct > 0
+      ? "text-rose-400"
+      : "text-sky-400";
+  const stroke = pct != null && pct < 0 ? "#3b82f6" : "#ef4444";
+  const series = it.sparkline ?? [];
+
+  return (
+    <li>
+      <Link
+        href={`/${it.code}`}
+        className="flex items-center justify-between gap-3 px-4 py-3 text-sm hover:bg-zinc-800/70"
+      >
+        <div className="min-w-0">
+          <div className="font-medium text-zinc-100">
+            {it.name}
+            {it.is_seed && (
+              <span className="ml-2 rounded-full bg-emerald-900/60 px-2 py-0.5 text-[10px] font-semibold text-emerald-300">
+                SEED
+              </span>
+            )}
+          </div>
+          <div className="text-xs text-zinc-500">
+            {it.code} · {it.market}
+            {it.sector ? ` · ${it.sector}` : ""}
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-3">
+          {series.length >= 2 && (
+            <Sparkline values={series} stroke={stroke} width={80} height={28} />
+          )}
+          <div className="text-right tabular-nums">
+            <div className="text-xs text-zinc-100">
+              {it.close != null
+                ? it.close.toLocaleString(undefined, { maximumFractionDigits: 0 })
+                : "—"}
+            </div>
+            <div className={`text-[11px] ${tone}`}>
+              {pct != null ? `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%` : ""}
+            </div>
+          </div>
+        </div>
+      </Link>
+    </li>
+  );
+}