feat(phase-6): Next.js UI + TypeScript strict + 백엔드 mypy 설정

UI:
- web/lib/api.ts: 백엔드 모든 엔드포인트의 클라이언트 + 타입 (Symbol,
  ChartPayload, PredictResponse, LatestPredictionResponse, MetricsResponse,
  NewsResponse). NEXT_PUBLIC_API_BASE 자동 정규화.
- web/components/SearchBox: 디바운스 검색, seed_only 토글, trigram + prefix.
- web/components/StockChart: lightweight-charts 캔들 + 예측 overlay
  (median dashed + q10/q90 점선). base_date 에서 target_date 까지 이어 붙임.
- web/components/PredictionPanel: "예상차트 보기" 버튼 → POST /api/predict
  → user_triggered=TRUE 저장 → onResult 콜백으로 StockChart 에 반영.
  표로 +1/+3/+5거래일 direction, prob_up/flat/down, expected_return,
  ci_low~ci_high 표시.
- web/components/MetricsPanel: 최근 30일 hit_rate / mae.
- web/components/NewsList: 최근 뉴스 + 감성 라벨/점수.
- web/app/page.tsx: 검색 페이지.
- web/app/[code]/page.tsx: 종목 상세 (차트 + 패널 + 메트릭 + 뉴스).

TypeScript 보강 (사용자 요청 "typescript도 추가해서 나중에 수정하기 쉽게"):
- tsconfig.json: strict 외에 forceConsistentCasingInFileNames,
  noFallthroughCasesInSwitch, noImplicitOverride 추가.
- package.json: typecheck (tsc --noEmit), check (typecheck + lint) 스크립트,
  eslint + eslint-config-next 14.2.3.
- .eslintrc.json: next/core-web-vitals.
- package-lock.json 커밋 (재현 가능한 dep).

백엔드:
- pyproject.toml: [tool.mypy] 추가. strict_optional, no_implicit_optional,
  check_untyped_defs. 3rd-party stub 없는 pykrx/chronos 등은 ignore.

검증: `npx tsc --noEmit` 통과 (exit=0).

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

web/components/SearchBox.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { api, type Symbol } from "../lib/api";
+
+export function SearchBox({ autoFocus = false }: { autoFocus?: boolean }) {
+  const [q, setQ] = useState("");
+  const [items, setItems] = useState<Symbol[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [seedOnly, setSeedOnly] = useState(false);
+
+  useEffect(() => {
+    const term = q.trim();
+    if (!term) {
+      setItems([]);
+      setErr(null);
+      return;
+    }
+    setLoading(true);
+    setErr(null);
+    const handle = setTimeout(async () => {
+      try {
+        const r = await api.search(term, seedOnly, 15);
+        setItems(r.items);
+      } catch (e) {
+        setErr(e instanceof Error ? e.message : String(e));
+        setItems([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 200);
+    return () => clearTimeout(handle);
+  }, [q, seedOnly]);
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center gap-3">
+        <input
+          autoFocus={autoFocus}
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          placeholder="종목명 또는 코드 (예: 삼성, 005930)"
+          className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-4 py-3 text-base outline-none focus:border-zinc-500"
+        />
+        <label className="flex shrink-0 items-center gap-2 text-xs text-zinc-400">
+          <input
+            type="checkbox"
+            checked={seedOnly}
+            onChange={(e) => setSeedOnly(e.target.checked)}
+          />
+          학습대상 10종목만
+        </label>
+      </div>
+
+      <div className="mt-2 min-h-[1.5rem] text-xs text-zinc-500">
+        {loading && "검색중…"}
+        {err && <span className="text-red-400">에러: {err}</span>}
+        {!loading && !err && q && items.length === 0 && "검색 결과 없음"}
+      </div>
+
+      {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>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}