feat: P1 풀빌드 — React 프론트 7화면 + 백엔드 상담루프·평가·음성·RAG

web (Vite+React19+TS, Cloudflare Pages 배포):
- 디자인토큰(세이지틸/테라코타 SSOT), 앱셸, 공통 UI 프리미티브
- 7화면: 로그인/학습자홈/상담세션/회기리뷰/교수자/관리자/설정
- ClientAvatar: SVG 반구상 흉상 4상태 + RMS 립싱크 + 6파라미터 정서
- 회기리뷰는 외부 레퍼런스 디자인을 Vignette 토큰으로 리스킨

api (FastAPI):
- 게이트웨이 /v1/generate·/v1/stream 어댑터(상주풀/EngineSession 보존)
- services: 페르소나 L0~L6 빌더 / 결정론 상태머신 / 가드레일 /
  턴 오케스트레이터 / 회기간 메모리 / 평가AI / 음성 / RAG
- store: DB off 폴백(in-memory), sessions 실구현

검증:
- web: node22 tsc+vite build 통과(node23 segfault 회피), Pages 배포 200
- api: app.main import 통과
- 핫픽스: Topbar initials undefined-safe (undefined.trim 크래시)
- E2E: 서연(P1) 상담 1턴 — 좋은/나쁜 상담에 차등 반응 실증

apps/web/src/pages/settings/useTheme.ts

@@ -0,0 +1,59 @@
+/* =====================================================================
+   useTheme — 라이트/다크 토글 상태.
+   Topbar 의 토글과 동일한 저장소 키(vignette.theme)와 동일한
+   data-theme 속성(documentElement)을 공유한다 → 두 토글이 충돌 없이 동기화.
+   tokens.css 의 [data-theme="dark"] 블록만으로 전환된다.
+   ===================================================================== */
+import { useCallback, useEffect, useState } from "react";
+
+const THEME_KEY = "vignette.theme";
+
+function readInitial(): boolean {
+  try {
+    const saved = localStorage.getItem(THEME_KEY);
+    if (saved) return saved === "dark";
+  } catch {
+    /* 무시 */
+  }
+  return (
+    typeof window !== "undefined" &&
+    window.matchMedia?.("(prefers-color-scheme: dark)").matches
+  );
+}
+
+/** [dark, setDark] — Topbar 토글과 같은 키/속성을 사용. */
+export function useTheme(): [boolean, (next: boolean) => void] {
+  const [dark, setDark] = useState<boolean>(() => {
+    // documentElement 가 이미 dark 면 그것을 우선(다른 토글이 방금 바꿨을 수 있음)
+    if (typeof document !== "undefined") {
+      const attr = document.documentElement.getAttribute("data-theme");
+      if (attr === "dark") return true;
+    }
+    return readInitial();
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (dark) root.setAttribute("data-theme", "dark");
+    else root.removeAttribute("data-theme");
+    try {
+      localStorage.setItem(THEME_KEY, dark ? "dark" : "light");
+    } catch {
+      /* 무시 */
+    }
+  }, [dark]);
+
+  // 다른 곳(Topbar)에서 속성을 바꾸면 따라잡기 위해 마운트 시 1회 동기화
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => {
+      const isDark = root.getAttribute("data-theme") === "dark";
+      setDark((prev) => (prev === isDark ? prev : isDark));
+    });
+    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, []);
+
+  const set = useCallback((next: boolean) => setDark(next), []);
+  return [dark, set];
+}