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/app/[code]/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { MetricsPanel } from "../../components/MetricsPanel";
+import { NewsList } from "../../components/NewsList";
+import { PredictionPanel } from "../../components/PredictionPanel";
+import { StockChart } from "../../components/StockChart";
+import {
+  api,
+  type ChartPayload,
+  type LatestPredictionResponse,
+} from "../../lib/api";
+
+export default function CodePage({ params }: { params: { code: string } }) {
+  const { code } = params;
+  const [chart, setChart] = useState<ChartPayload | null>(null);
+  const [prediction, setPrediction] = useState<LatestPredictionResponse | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const [days, setDays] = useState(180);
+
+  useEffect(() => {
+    let alive = true;
+    setErr(null);
+    setChart(null);
+    api
+      .getChart(code, days)
+      .then((c) => {
+        if (alive) setChart(c);
+      })
+      .catch((e) => {
+        if (alive) setErr(e instanceof Error ? e.message : String(e));
+      });
+    return () => {
+      alive = false;
+    };
+  }, [code, days]);
+
+  useEffect(() => {
+    let alive = true;
+    api
+      .latestPrediction(code)
+      .then((r) => {
+        if (alive && r.found) setPrediction(r);
+      })
+      .catch(() => {
+        // 예측 이력 없는 경우는 무시.
+      });
+    return () => {
+      alive = false;
+    };
+  }, [code]);
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-10">
+      <div className="mb-4 flex items-center justify-between">
+        <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
+          ← 검색으로
+        </Link>
+        <select
+          value={days}
+          onChange={(e) => setDays(Number(e.target.value))}
+          className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs"
+        >
+          <option value={60}>최근 3개월</option>
+          <option value={180}>최근 6개월</option>
+          <option value={365}>최근 1년</option>
+          <option value={1095}>최근 3년</option>
+        </select>
+      </div>
+
+      {chart && (
+        <div className="mb-4">
+          <h1 className="text-2xl font-semibold text-zinc-100">
+            {chart.name}{" "}
+            <span className="text-sm font-normal text-zinc-500">
+              {chart.code} · {chart.market}
+            </span>
+          </h1>
+        </div>
+      )}
+
+      {err && <div className="mb-4 text-sm text-red-400">차트 로딩 실패: {err}</div>}
+
+      {chart && (
+        <>
+          <StockChart chart={chart} prediction={prediction} />
+          <div className="mt-6">
+            <PredictionPanel code={code} initial={prediction} onResult={setPrediction} />
+          </div>
+          <div className="mt-6 grid gap-6 md:grid-cols-2">
+            <MetricsPanel code={code} />
+            <NewsList code={code} />
+          </div>
+        </>
+      )}
+    </main>
+  );
+}

web/app/page.tsx

@@ -1,13 +1,32 @@
+import { SearchBox } from "../components/SearchBox";
+
 export default function HomePage() {
   return (
     <main className="mx-auto max-w-3xl px-6 py-16">
       <h1 className="text-3xl font-bold tracking-tight">Stock Chart Site</h1>
-      <p className="mt-3 text-sm text-zinc-400">
-        Phase 0 scaffold. 종목 검색 UI는 Phase 6에서 추가됩니다.
+      <p className="mt-2 text-sm text-zinc-400">
+        종목을 검색해 현재 차트를 보고, <b>예상차트 보기</b> 버튼으로 Chronos + LightGBM
+        앙상블의 단기(1·3·5거래일) 예측을 차트에 이어 붙입니다.
       </p>
-      <div className="mt-8 rounded-md border border-zinc-800 bg-zinc-900/50 p-4 text-sm">
-        <div className="font-medium">Backend health</div>
-        <code className="mt-2 block text-zinc-400">GET {process.env.NEXT_PUBLIC_API_BASE}/health</code>
+
+      <div className="mt-8">
+        <SearchBox autoFocus />
+      </div>
+
+      <div className="mt-12 grid gap-3 text-xs text-zinc-500 sm:grid-cols-2">
+        <div className="rounded-md border border-zinc-800 bg-zinc-900/30 p-4">
+          <div className="font-medium text-zinc-300">학습 대상 10종목</div>
+          <div className="mt-1">
+            삼성전자, SK하이닉스, 에코프로비엠, 한미반도체, 두산에너빌리티, 한화에어로스페이스,
+            HD현대중공업, NAVER, KT&amp;G, 한국가스공사
+          </div>
+        </div>
+        <div className="rounded-md border border-zinc-800 bg-zinc-900/30 p-4">
+          <div className="font-medium text-zinc-300">매칭/재학습</div>
+          <div className="mt-1">
+            평일 16:30 KST 에 예측과 실제 종가 매칭, 일요일 02:00 KST 에 LGBM 재학습.
+          </div>
+        </div>
       </div>
     </main>
   );