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/PriceHero.tsx

@@ -4,6 +4,8 @@
 // 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 + 우측에 sparkline.
 // 한국 거래소 관행대로 상승=빨강, 하락=파랑.
 
+import { Sparkline } from "./Sparkline";
+
 type Props = {
   name: string;
   code: string;
@@ -59,38 +61,3 @@ export function PriceHero({ name, code, market, current, prev, asOf, series }: P
     </div>
   );
 }
-
-// 가벼운 SVG sparkline. lightweight-charts 인스턴스를 또 만들 필요 없음.
-function Sparkline({ values, stroke }: { values: number[]; stroke: string }) {
-  const W = 140;
-  const H = 44;
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const span = max - min || 1;
-  const stepX = W / (values.length - 1);
-  const points = values
-    .map((v, i) => {
-      const x = (i * stepX).toFixed(1);
-      const y = (H - ((v - min) / span) * H).toFixed(1);
-      return `${x},${y}`;
-    })
-    .join(" ");
-  return (
-    <svg
-      width={W}
-      height={H}
-      viewBox={`0 0 ${W} ${H}`}
-      className="shrink-0 opacity-80"
-      aria-hidden
-    >
-      <polyline
-        points={points}
-        fill="none"
-        stroke={stroke}
-        strokeWidth={1.5}
-        strokeLinejoin="round"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}