merge: assemble responsive app shell navigation

src/bootstrap/main.jsx

@@ -1,5 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { QueryClientProvider } from "@tanstack/react-query";
 
 import { BootErrorShell } from "../presentation/boundaries/boot-error-shell.jsx";
 import { AppRouter } from "../presentation/routes/app-router.jsx";
@@ -21,10 +22,14 @@ async function boot() {
     const composition = await createRuntimeComposition();
     root.render(
       <StrictMode>
-        <AppRouter
-          authSession={composition.ports.authSession}
-          basename={composition.config.build.routerBasePath}
-        />
+        <QueryClientProvider client={composition.ports.queryClient}>
+          <AppRouter
+            authSession={composition.ports.authSession}
+            basename={composition.config.build.routerBasePath}
+            buildId={composition.release.buildId}
+            telemetry={composition.ports.telemetry}
+          />
+        </QueryClientProvider>
       </StrictMode>,
     );
   } catch (error) {

src/contracts/routes.js

@@ -7,7 +7,10 @@
  *   access: "public" | "session-required" | "integration-defined",
  *   loadingSurface: string,
  *   errorSurface: string,
- *   chunkId: string
+ *   chunkId: string,
+ *   title: string,
+ *   navigationLabel: string | null,
+ *   navigationOrder: number | null
  * }} RouteDefinition
  */
 
@@ -24,6 +27,48 @@ export const ROUTE_REGISTRY = Object.freeze({
     loadingSurface: "app-shell",
     errorSurface: "route-boundary",
     chunkId: "route-home",
+    title: "시작",
+    navigationLabel: "시작",
+    navigationOrder: 10,
+  }),
+  EXAMPLES_UI: route({
+    routeId: "EXAMPLES_UI",
+    path: "/examples/ui",
+    paramsSchema: null,
+    searchSchema: null,
+    access: "public",
+    loadingSurface: "example-page",
+    errorSurface: "route-boundary",
+    chunkId: "route-examples-ui",
+    title: "UI 구성요소",
+    navigationLabel: "UI 구성요소",
+    navigationOrder: 20,
+  }),
+  EXAMPLES_STATES: route({
+    routeId: "EXAMPLES_STATES",
+    path: "/examples/states",
+    paramsSchema: null,
+    searchSchema: null,
+    access: "public",
+    loadingSurface: "example-page",
+    errorSurface: "route-boundary",
+    chunkId: "route-examples-states",
+    title: "화면 상태",
+    navigationLabel: "화면 상태",
+    navigationOrder: 30,
+  }),
+  EXAMPLES_AUTH: route({
+    routeId: "EXAMPLES_AUTH",
+    path: "/examples/auth",
+    paramsSchema: null,
+    searchSchema: null,
+    access: "public",
+    loadingSurface: "example-page",
+    errorSurface: "route-boundary",
+    chunkId: "route-examples-auth",
+    title: "인증 연동",
+    navigationLabel: "인증 연동",
+    navigationOrder: 40,
   }),
   SAMPLE_RESOURCE_LIST: route({
     routeId: "SAMPLE_RESOURCE_LIST",
@@ -34,6 +79,9 @@ export const ROUTE_REGISTRY = Object.freeze({
     loadingSurface: "sample-resource-list",
     errorSurface: "feature-boundary",
     chunkId: "route-sample-resources",
+    title: "보호된 연동 지점",
+    navigationLabel: "보호된 연동 지점",
+    navigationOrder: 50,
   }),
   NOT_FOUND: route({
     routeId: "NOT_FOUND",
@@ -44,9 +92,22 @@ export const ROUTE_REGISTRY = Object.freeze({
     loadingSurface: "none",
     errorSurface: "not-found",
     chunkId: "route-not-found",
+    title: "페이지를 찾을 수 없음",
+    navigationLabel: null,
+    navigationOrder: null,
   }),
 });
 
+export const NAVIGATION_ROUTES = Object.freeze(
+  Object.values(ROUTE_REGISTRY)
+    .filter((definition) => definition.navigationOrder !== null)
+    .sort(
+      (left, right) =>
+        /** @type {number} */ (left.navigationOrder) -
+        /** @type {number} */ (right.navigationOrder),
+    ),
+);
+
 /** @param {string} routeId */
 export function getRoute(routeId) {
   const registry = /** @type {Record<string, Readonly<RouteDefinition>>} */ (

src/presentation/components/page-header.jsx

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * @param {{
+ *   title: string,
+ *   description?: string,
+ *   eyebrow?: string
+ * }} props
+ */
+export function PageHeader({ title, description, eyebrow }) {
+  const headingRef = useRef(/** @type {HTMLHeadingElement | null} */ (null));
+
+  useEffect(() => {
+    document.title = `${title} · Frontend Skeleton`;
+    headingRef.current?.focus();
+  }, [title]);
+
+  return (
+    <header className="page-header">
+      {eyebrow ? <p className="page-header__eyebrow">{eyebrow}</p> : null}
+      <h1 ref={headingRef} tabIndex={-1} data-route-heading>
+        {title}
+      </h1>
+      {description ? <p className="page-header__description">{description}</p> : null}
+    </header>
+  );
+}

src/presentation/examples/auth-example-page.jsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+
+import { PageHeader } from "../components/page-header.jsx";
+import { useSession } from "../providers/session-provider.jsx";
+
+export default function AuthExamplePage() {
+  const location = useLocation();
+  const { sessionState, beginSignIn, signOut, recover } = useSession();
+  const [pending, setPending] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  /** @param {() => Promise<unknown>} action */
+  async function execute(action) {
+    setPending(true);
+    setFailed(false);
+    try {
+      await action();
+    } catch {
+      setFailed(true);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <section className="ui-page">
+      <PageHeader
+        eyebrow="예제"
+        title="인증 연동"
+        description="스켈레톤은 자격 증명을 소유하지 않고 외부 인증 구현이 연결될 포트와 화면 상태만 제공합니다."
+      />
+      <section className="ui-panel auth-example" aria-labelledby="auth-state-title">
+        <div>
+          <h2 id="auth-state-title">현재 세션 상태</h2>
+          <output className="session-status" data-state={sessionState}>
+            {sessionState}
+          </output>
+        </div>
+        <div className="button-row">
+          <button
+            className="ui-button"
+            type="button"
+            disabled={pending || sessionState === "integration-failed"}
+            onClick={() =>
+              void execute(() =>
+                beginSignIn(`${location.pathname}${location.search}`),
+              )
+            }
+          >
+            로그인 시작
+          </button>
+          <button
+            className="ui-button ui-button--secondary"
+            type="button"
+            disabled={pending || sessionState !== "authenticated"}
+            onClick={() => void execute(signOut)}
+          >
+            로그아웃
+          </button>
+          <button
+            className="ui-button ui-button--secondary"
+            type="button"
+            disabled={pending || sessionState !== "recovery-pending"}
+            onClick={() => void execute(recover)}
+          >
+            세션 복구
+          </button>
+        </div>
+        {sessionState === "integration-failed" ? (
+          <p role="status">
+            외부 인증 소유자가 연결되지 않았습니다. 런타임 호스트의 인증
+            계약을 연결하세요.
+          </p>
+        ) : null}
+        {failed ? <p role="alert">인증 작업을 완료하지 못했습니다.</p> : null}
+      </section>
+    </section>
+  );
+}

src/presentation/examples/state-gallery-page.jsx

@@ -0,0 +1,24 @@
+import { PageHeader } from "../components/page-header.jsx";
+
+export default function StateGalleryPage() {
+  return (
+    <section className="ui-page">
+      <PageHeader
+        eyebrow="예제"
+        title="화면 상태"
+        description="로딩, 빈 화면, 오류, 인증 필요와 권한 없음 상태의 기본 표현을 확인합니다."
+      />
+      <div className="readiness-grid">
+        <section className="ui-skeleton" aria-label="로딩 상태 예제" />
+        <section className="ui-empty">
+          <h2>표시할 항목이 없습니다.</h2>
+          <p>다음 행동이 있다면 이 위치에 명확한 안내를 제공합니다.</p>
+        </section>
+        <section className="ui-terminal-error" role="alert">
+          <h2>요청을 완료하지 못했습니다.</h2>
+          <p>안전한 재시도 또는 지원 참조 정보를 제공합니다.</p>
+        </section>
+      </div>
+    </section>
+  );
+}

src/presentation/examples/ui-gallery-page.jsx

@@ -0,0 +1,20 @@
+import { PageHeader } from "../components/page-header.jsx";
+
+export default function UiGalleryPage() {
+  return (
+    <section className="ui-page">
+      <PageHeader
+        eyebrow="예제"
+        title="UI 구성요소"
+        description="제품 도메인과 독립적인 공통 컨트롤과 표면을 확인하는 공간입니다."
+      />
+      <section className="ui-panel" aria-labelledby="ui-gallery-status">
+        <h2 id="ui-gallery-status">구성요소 계약</h2>
+        <p>
+          버튼, 입력창, 카드, 알림, 모달의 상호작용과 디자인 토큰을 이
+          라우트에 조립합니다.
+        </p>
+      </section>
+    </section>
+  );
+}

src/presentation/layouts/app-shell.jsx

@@ -0,0 +1,139 @@
+import { useEffect, useState } from "react";
+import { NavLink, Outlet, useLocation } from "react-router-dom";
+
+import { NAVIGATION_ROUTES, routePath } from "../../contracts/routes.js";
+import { useSession } from "../providers/session-provider.jsx";
+
+const SESSION_LABELS = Object.freeze({
+  authenticated: "인증됨",
+  unauthenticated: "로그인 전",
+  "recovery-pending": "복구 대기",
+  "integration-failed": "연동 필요",
+});
+
+export function AppShell() {
+  const location = useLocation();
+  const { sessionState, beginSignIn, signOut, recover } = useSession();
+  const [navigationOpen, setNavigationOpen] = useState(false);
+  const [sessionActionPending, setSessionActionPending] = useState(false);
+  const [sessionActionFailed, setSessionActionFailed] = useState(false);
+
+  useEffect(() => {
+    setNavigationOpen(false);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (!navigationOpen) return undefined;
+    /** @param {KeyboardEvent} event */
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") setNavigationOpen(false);
+    };
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, [navigationOpen]);
+
+  async function runSessionAction() {
+    setSessionActionPending(true);
+    setSessionActionFailed(false);
+    try {
+      if (sessionState === "authenticated") {
+        await signOut();
+      } else if (sessionState === "recovery-pending") {
+        await recover();
+      } else {
+        await beginSignIn(
+          `${location.pathname}${location.search}${location.hash}`,
+        );
+      }
+    } catch {
+      setSessionActionFailed(true);
+    } finally {
+      setSessionActionPending(false);
+    }
+  }
+
+  const sessionActionLabel =
+    sessionState === "authenticated"
+      ? "로그아웃"
+      : sessionState === "recovery-pending"
+        ? "세션 복구"
+        : "로그인";
+  const integrationAvailable = sessionState !== "integration-failed";
+
+  return (
+    <div className="app-shell">
+      <a className="skip-link" href="#main-content">
+        본문으로 건너뛰기
+      </a>
+      <header className="app-shell__header">
+        <button
+          className="app-shell__menu-button"
+          type="button"
+          aria-controls="primary-navigation"
+          aria-expanded={navigationOpen}
+          onClick={() => setNavigationOpen((open) => !open)}
+        >
+          <span aria-hidden="true">☰</span>
+          <span>메뉴</span>
+        </button>
+        <NavLink className="app-shell__brand" to={routePath("APP_HOME")}>
+          Frontend Skeleton
+        </NavLink>
+        <div className="app-shell__session">
+          <span className="session-status" data-state={sessionState}>
+            {SESSION_LABELS[sessionState]}
+          </span>
+          {integrationAvailable ? (
+            <button
+              className="ui-button ui-button--compact"
+              type="button"
+              disabled={sessionActionPending}
+              onClick={() => void runSessionAction()}
+            >
+              {sessionActionPending ? "처리 중…" : sessionActionLabel}
+            </button>
+          ) : null}
+        </div>
+        {sessionActionFailed ? (
+          <p className="app-shell__session-error" role="alert">
+            세션 작업을 완료하지 못했습니다.
+          </p>
+        ) : null}
+      </header>
+      <aside
+        className="app-shell__sidebar"
+        data-open={navigationOpen}
+        aria-label="사이드바"
+      >
+        <nav id="primary-navigation" aria-label="주요 탐색">
+          <ul className="app-navigation">
+            {NAVIGATION_ROUTES.map((definition) => (
+              <li key={definition.routeId}>
+                <NavLink
+                  className={({ isActive }) =>
+                    `app-navigation__link${isActive ? " is-active" : ""}`
+                  }
+                  end={definition.path === "/"}
+                  to={definition.path}
+                >
+                  {definition.navigationLabel}
+                </NavLink>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </aside>
+      {navigationOpen ? (
+        <button
+          className="app-shell__scrim"
+          type="button"
+          aria-label="메뉴 닫기"
+          onClick={() => setNavigationOpen(false)}
+        />
+      ) : null}
+      <main className="app-shell__content" id="main-content" tabIndex={-1}>
+        <Outlet />
+      </main>
+    </div>
+  );
+}

src/presentation/pages/home-page.jsx

@@ -0,0 +1,56 @@
+import { Link } from "react-router-dom";
+
+import { routePath } from "../../contracts/routes.js";
+import { PageHeader } from "../components/page-header.jsx";
+
+const READINESS_ITEMS = Object.freeze([
+  {
+    title: "실행 계약",
+    description: "런타임 설정, 릴리스 정합성, 오류 경계가 마운트 전에 검증됩니다.",
+  },
+  {
+    title: "교체 가능한 연동",
+    description: "인증, HTTP, 캐시, 저장소, 텔레메트리가 포트 뒤에 분리되어 있습니다.",
+  },
+  {
+    title: "접근 가능한 화면",
+    description: "키보드 탐색, 포커스 이동, 반응형 앱 셸의 기본 동작이 준비되어 있습니다.",
+  },
+]);
+
+export default function HomePage() {
+  return (
+    <section className="ui-page">
+      <PageHeader
+        eyebrow="프로젝트 시작점"
+        title="Clean Architecture Frontend"
+        description="도메인을 추가하기 전에 실행 구조와 범용 사용자 경험을 확인할 수 있는 중립적인 스켈레톤입니다."
+      />
+      <div className="readiness-grid" aria-label="구현 준비 상태">
+        {READINESS_ITEMS.map((item) => (
+          <article className="ui-panel" key={item.title}>
+            <h2>{item.title}</h2>
+            <p>{item.description}</p>
+          </article>
+        ))}
+      </div>
+      <section className="ui-panel starter-actions" aria-labelledby="starter-title">
+        <div>
+          <h2 id="starter-title">준비된 화면 살펴보기</h2>
+          <p>공통 구성요소와 비동기 화면 상태를 예제 라우트에서 확인하세요.</p>
+        </div>
+        <div className="button-row">
+          <Link className="ui-button" to={routePath("EXAMPLES_UI")}>
+            UI 구성요소 보기
+          </Link>
+          <Link
+            className="ui-button ui-button--secondary"
+            to={routePath("EXAMPLES_STATES")}
+          >
+            화면 상태 보기
+          </Link>
+        </div>
+      </section>
+    </section>
+  );
+}

src/presentation/pages/not-found-page.jsx

@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+import { routePath } from "../../contracts/routes.js";
+import { PageHeader } from "../components/page-header.jsx";
+
+export default function NotFoundPage() {
+  return (
+    <section className="ui-page">
+      <PageHeader
+        title="페이지를 찾을 수 없습니다."
+        description="주소를 확인하거나 준비된 시작 화면으로 돌아가세요."
+      />
+      <div>
+        <Link className="ui-button" to={routePath("APP_HOME")}>
+          홈으로 이동
+        </Link>
+      </div>
+    </section>
+  );
+}

src/presentation/pages/sample-contract-page.jsx

@@ -0,0 +1,23 @@
+import { PageHeader } from "../components/page-header.jsx";
+import { useSession } from "../providers/session-provider.jsx";
+
+export default function SampleContractPage() {
+  const { sessionState } = useSession();
+
+  return (
+    <section className="ui-page">
+      <PageHeader
+        eyebrow="보호 라우트"
+        title="보호된 연동 지점"
+        description="실제 도메인 기능이 인증된 세션과 연결되는 위치를 보여주는 중립적인 계약 화면입니다."
+      />
+      <section className="ui-panel" aria-labelledby="protected-state-title">
+        <h2 id="protected-state-title">라우트 접근 허용</h2>
+        <p>
+          현재 세션 상태는 <strong>{sessionState}</strong>입니다. 서버의
+          권한 검증은 이 클라이언트 라우트 정책과 별도로 유지해야 합니다.
+        </p>
+      </section>
+    </section>
+  );
+}

src/presentation/providers/session-provider.jsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+
+/**
+ * @typedef {{
+ *   sessionState: import("../../application/ports/auth-session-port.js").SessionState,
+ *   beginSignIn: import("../../application/ports/auth-session-port.js").AuthSessionPort["beginSignIn"],
+ *   signOut: import("../../application/ports/auth-session-port.js").AuthSessionPort["signOut"],
+ *   recover: import("../../application/ports/auth-session-port.js").AuthSessionPort["recover"]
+ * }} SessionContextValue
+ */
+
+const SessionContext = createContext(
+  /** @type {SessionContextValue | null} */ (null),
+);
+
+/**
+ * @param {{
+ *   authSession: import("../../application/ports/auth-session-port.js").AuthSessionPort,
+ *   children: React.ReactNode
+ * }} props
+ */
+export function SessionProvider({ authSession, children }) {
+  const sessionState = useSyncExternalStore(
+    authSession.subscribe,
+    authSession.getState,
+    authSession.getState,
+  );
+  const value = useMemo(
+    () =>
+      Object.freeze({
+        sessionState,
+        beginSignIn: authSession.beginSignIn,
+        signOut: authSession.signOut,
+        recover: authSession.recover,
+      }),
+    [authSession, sessionState],
+  );
+
+  return (
+    <SessionContext.Provider value={value}>{children}</SessionContext.Provider>
+  );
+}
+
+export function useSession() {
+  const session = useContext(SessionContext);
+  if (!session) {
+    throw new Error("SessionProvider is required");
+  }
+  return session;
+}

src/presentation/routes/app-router.jsx

@@ -1,81 +1,267 @@
+import { lazy, Suspense, useState } from "react";
 import {
   BrowserRouter,
-  Link,
   Route,
   Routes,
+  useLocation,
 } from "react-router-dom";
 
-import { routePath } from "../../contracts/routes.js";
+import { getRoute, routePath } from "../../contracts/routes.js";
+import { RouteBoundary } from "../boundaries/render-error-boundary.jsx";
+import { AppShell } from "../layouts/app-shell.jsx";
+import { PageHeader } from "../components/page-header.jsx";
+import { SessionProvider, useSession } from "../providers/session-provider.jsx";
 import { decideRouteAccess } from "./navigation-policy.js";
 
-function HomePage() {
+const HomePage = lazy(() => import("../pages/home-page.jsx"));
+const UiGalleryPage = lazy(() => import("../examples/ui-gallery-page.jsx"));
+const StateGalleryPage = lazy(
+  () => import("../examples/state-gallery-page.jsx"),
+);
+const AuthExamplePage = lazy(
+  () => import("../examples/auth-example-page.jsx"),
+);
+const SampleContractPage = lazy(
+  () => import("../pages/sample-contract-page.jsx"),
+);
+const NotFoundPage = lazy(() => import("../pages/not-found-page.jsx"));
+
+/** @param {{ routeId: string }} props */
+function RouteLoadingSurface({ routeId }) {
+  const definition = getRoute(routeId);
   return (
-    <main className="ui-page">
-      <h1>Clean Architecture Frontend</h1>
-      <p>런타임 계약이 검증되었습니다.</p>
-      <Link to={routePath("SAMPLE_RESOURCE_LIST")}>샘플 리소스</Link>
-    </main>
+    <section className="ui-page route-loading" aria-live="polite" aria-busy="true">
+      <div className="ui-skeleton" aria-hidden="true" />
+      <p>화면을 준비하고 있습니다.</p>
+      <span className="visually-hidden">{definition.title} 로딩 중</span>
+    </section>
   );
 }
 
-function SamplePlaceholder() {
+function RouteFailureSurface() {
   return (
-    <main className="ui-page">
-      <h1>샘플 리소스</h1>
-      <p>계약 fixture를 준비하고 있습니다.</p>
-    </main>
-  );
-}
-
-function NotFoundPage() {
-  return (
-    <main className="ui-page">
-      <h1>페이지를 찾을 수 없습니다.</h1>
-      <Link to={routePath("APP_HOME")}>홈으로 이동</Link>
-    </main>
+    <section className="ui-page">
+      <PageHeader
+        title="화면을 표시하지 못했습니다."
+        description="잠시 후 페이지를 새로고침해 주세요. 문제가 계속되면 운영 지원 참조 정보를 확인하세요."
+      />
+    </section>
   );
 }
 
 /**
  * @param {{
- *   authSession: import("../../application/ports/auth-session-port.js").AuthSessionPort
+ *   routeId: string,
+ *   buildId: string,
+ *   telemetry?: import("../../application/ports/telemetry-port.js").TelemetryPort,
+ *   children: React.ReactNode
  * }} props
  */
-function GuardedSampleRoute({ authSession }) {
-  const decision = decideRouteAccess(
-    "SAMPLE_RESOURCE_LIST",
-    authSession.getState(),
+function RouteSurface({ routeId, buildId, telemetry, children }) {
+  return (
+    <RouteBoundary
+      routeId={routeId}
+      buildId={buildId}
+      telemetry={telemetry}
+      fallback={<RouteFailureSurface />}
+    >
+      <Suspense fallback={<RouteLoadingSurface routeId={routeId} />}>
+        {children}
+      </Suspense>
+    </RouteBoundary>
   );
-  if (!decision.allowed) {
+}
+
+/**
+ * @param {{
+ *   routeId: string,
+ *   children: React.ReactNode
+ * }} props
+ */
+function ProtectedRoute({ routeId, children }) {
+  const location = useLocation();
+  const { sessionState, beginSignIn, recover } = useSession();
+  const [pending, setPending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const decision = decideRouteAccess(routeId, sessionState);
+
+  async function continueSession() {
+    setPending(true);
+    setFailed(false);
+    try {
+      if (decision.action === "wait-for-session") {
+        await recover();
+      } else {
+        await beginSignIn(
+          `${location.pathname}${location.search}${location.hash}`,
+        );
+      }
+    } catch {
+      setFailed(true);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  if (decision.allowed) return children;
+
+  if (sessionState === "integration-failed") {
     return (
-      <main className="ui-page">
-        <h1>세션이 필요합니다.</h1>
-        <button className="ui-button" type="button">
-          로그인
-        </button>
-      </main>
+      <section className="ui-page">
+        <PageHeader
+          title="로그인 연동이 필요합니다."
+          description="외부 인증 소유자가 런타임에 연결되면 이 보호 라우트를 사용할 수 있습니다."
+        />
+      </section>
     );
   }
-  return <SamplePlaceholder />;
+
+  const recovering = decision.action === "wait-for-session";
+  return (
+    <section className="ui-page">
+      <PageHeader
+        title={recovering ? "세션을 복구하고 있습니다." : "세션이 필요합니다."}
+        description={
+          recovering
+            ? "기존 세션 확인을 계속하려면 복구를 실행하세요."
+            : "이 화면은 인증 연동 지점을 확인하기 위한 보호 라우트입니다."
+        }
+      />
+      <div>
+        <button
+          className="ui-button"
+          type="button"
+          disabled={pending}
+          onClick={() => void continueSession()}
+        >
+          {pending
+            ? "처리 중…"
+            : recovering
+              ? "세션 복구"
+              : "로그인 시작"}
+        </button>
+      </div>
+      {failed ? (
+        <p className="ui-terminal-error" role="alert">
+          세션 작업을 완료하지 못했습니다.
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
+/**
+ * @param {{
+ *   routeId: string,
+ *   buildId: string,
+ *   telemetry?: import("../../application/ports/telemetry-port.js").TelemetryPort,
+ *   children: React.ReactNode
+ * }} props
+ */
+function PublicRoute({ routeId, buildId, telemetry, children }) {
+  return (
+    <RouteSurface routeId={routeId} buildId={buildId} telemetry={telemetry}>
+      {children}
+    </RouteSurface>
+  );
 }
 
 /**
  * @param {{
  *   authSession: import("../../application/ports/auth-session-port.js").AuthSessionPort,
- *   basename?: string
+ *   basename?: string,
+ *   buildId?: string,
+ *   telemetry?: import("../../application/ports/telemetry-port.js").TelemetryPort
  * }} props
  */
-export function AppRouter({ authSession, basename = "/" }) {
+export function AppRouter({
+  authSession,
+  basename = "/",
+  buildId = "local-build",
+  telemetry,
+}) {
   return (
     <BrowserRouter basename={basename}>
-      <Routes>
-        <Route path={routePath("APP_HOME")} element={<HomePage />} />
-        <Route
-          path={routePath("SAMPLE_RESOURCE_LIST")}
-          element={<GuardedSampleRoute authSession={authSession} />}
-        />
-        <Route path={routePath("NOT_FOUND")} element={<NotFoundPage />} />
-      </Routes>
+      <SessionProvider authSession={authSession}>
+        <Routes>
+          <Route element={<AppShell />}>
+            <Route
+              index
+              element={
+                <PublicRoute
+                  routeId="APP_HOME"
+                  buildId={buildId}
+                  telemetry={telemetry}
+                >
+                  <HomePage />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path={routePath("EXAMPLES_UI")}
+              element={
+                <PublicRoute
+                  routeId="EXAMPLES_UI"
+                  buildId={buildId}
+                  telemetry={telemetry}
+                >
+                  <UiGalleryPage />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path={routePath("EXAMPLES_STATES")}
+              element={
+                <PublicRoute
+                  routeId="EXAMPLES_STATES"
+                  buildId={buildId}
+                  telemetry={telemetry}
+                >
+                  <StateGalleryPage />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path={routePath("EXAMPLES_AUTH")}
+              element={
+                <PublicRoute
+                  routeId="EXAMPLES_AUTH"
+                  buildId={buildId}
+                  telemetry={telemetry}
+                >
+                  <AuthExamplePage />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path={routePath("SAMPLE_RESOURCE_LIST")}
+              element={
+                <RouteSurface
+                  routeId="SAMPLE_RESOURCE_LIST"
+                  buildId={buildId}
+                  telemetry={telemetry}
+                >
+                  <ProtectedRoute routeId="SAMPLE_RESOURCE_LIST">
+                    <SampleContractPage />
+                  </ProtectedRoute>
+                </RouteSurface>
+              }
+            />
+            <Route
+              path={routePath("NOT_FOUND")}
+              element={
+                <PublicRoute
+                  routeId="NOT_FOUND"
+                  buildId={buildId}
+                  telemetry={telemetry}
+                >
+                  <NotFoundPage />
+                </PublicRoute>
+              }
+            />
+          </Route>
+        </Routes>
+      </SessionProvider>
     </BrowserRouter>
   );
 }

src/presentation/styles/theme.css

@@ -24,6 +24,35 @@
 
   body {
     margin: 0;
+    min-width: 20rem;
+    min-height: 100vh;
+  }
+
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  h1,
+  h2,
+  p {
+    margin-block-start: 0;
+  }
+
+  h1 {
+    font-size: clamp(2rem, 5vw, 3.5rem);
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+  }
+
+  h2 {
+    line-height: 1.25;
   }
 
   :focus-visible {
@@ -33,8 +62,165 @@
 }
 
 @layer components {
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .skip-link {
+    position: fixed;
+    z-index: 100;
+    top: 0.75rem;
+    left: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius-control);
+    color: white;
+    background: var(--color-content);
+    transform: translateY(-200%);
+  }
+
+  .skip-link:focus {
+    transform: translateY(0);
+  }
+
+  .app-shell {
+    display: grid;
+    min-height: 100vh;
+    grid-template-rows: 4.5rem 1fr;
+    grid-template-columns: 15rem minmax(0, 1fr);
+    grid-template-areas:
+      "header header"
+      "sidebar content";
+  }
+
+  .app-shell__header {
+    position: sticky;
+    z-index: 30;
+    top: 0;
+    grid-area: header;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-width: 0;
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid var(--color-surface-muted);
+    background: color-mix(in oklch, white 92%, var(--color-surface));
+    box-shadow: 0 1px 8px color-mix(in oklch, var(--color-content) 8%, transparent);
+  }
+
+  .app-shell__brand {
+    overflow: hidden;
+    font-size: 1.05rem;
+    font-weight: 800;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .app-shell__menu-button {
+    display: none;
+    align-items: center;
+    gap: 0.4rem;
+    border: 1px solid var(--color-surface-muted);
+    border-radius: var(--radius-control);
+    padding: 0.55rem 0.75rem;
+    color: var(--color-content);
+    background: white;
+    cursor: pointer;
+  }
+
+  .app-shell__session {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-inline-start: auto;
+  }
+
+  .app-shell__session-error {
+    position: absolute;
+    top: calc(100% + 0.25rem);
+    right: 1rem;
+    padding: 0.5rem;
+    color: var(--color-danger);
+    background: white;
+  }
+
+  .session-status {
+    display: inline-flex;
+    width: fit-content;
+    align-items: center;
+    border-radius: 999px;
+    padding: 0.3rem 0.65rem;
+    color: var(--color-content-muted);
+    background: var(--color-surface-muted);
+    font-size: 0.8rem;
+    font-weight: 700;
+  }
+
+  .session-status[data-state="authenticated"] {
+    color: oklch(0.35 0.12 155);
+    background: oklch(0.93 0.05 155);
+  }
+
+  .session-status[data-state="integration-failed"] {
+    color: var(--color-danger);
+  }
+
+  .app-shell__sidebar {
+    position: sticky;
+    top: 4.5rem;
+    grid-area: sidebar;
+    height: calc(100vh - 4.5rem);
+    padding: 1.25rem 0.75rem;
+    border-right: 1px solid var(--color-surface-muted);
+    background: white;
+  }
+
+  .app-navigation {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .app-navigation__link {
+    display: block;
+    border-radius: var(--radius-control);
+    padding: 0.75rem 0.9rem;
+    color: var(--color-content-muted);
+    font-weight: 650;
+    text-decoration: none;
+  }
+
+  .app-navigation__link:hover {
+    color: var(--color-content);
+    background: var(--color-surface);
+  }
+
+  .app-navigation__link.is-active {
+    color: var(--color-action-hover);
+    background: color-mix(in oklch, var(--color-action) 10%, white);
+    font-weight: 800;
+  }
+
+  .app-shell__content {
+    grid-area: content;
+    min-width: 0;
+  }
+
   .ui-page {
-    @apply mx-auto flex min-h-screen max-w-4xl flex-col gap-6 p-page;
+    @apply mx-auto flex max-w-6xl flex-col gap-6 p-page;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   .ui-panel {
@@ -43,12 +229,41 @@
 
   .ui-button {
     @apply rounded-control bg-action px-4 py-2 font-semibold text-white;
+    display: inline-flex;
+    min-height: 2.75rem;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    text-decoration: none;
+    cursor: pointer;
   }
 
   .ui-button:hover {
     @apply bg-action-hover;
   }
 
+  .ui-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .ui-button--secondary {
+    border: 1px solid var(--color-surface-muted);
+    color: var(--color-content);
+    background: white;
+  }
+
+  .ui-button--secondary:hover {
+    color: var(--color-action);
+    background: var(--color-surface);
+  }
+
+  .ui-button--compact {
+    min-height: 2.25rem;
+    padding: 0.4rem 0.75rem;
+    font-size: 0.85rem;
+  }
+
   .ui-skeleton {
     @apply h-24 animate-pulse rounded-surface bg-surface-muted;
   }
@@ -57,6 +272,115 @@
   .ui-terminal-error {
     @apply rounded-surface border border-surface-muted p-6;
   }
+
+  .page-header {
+    max-width: 50rem;
+    padding-block: clamp(1rem, 5vw, 3.5rem) 0.5rem;
+  }
+
+  .page-header__eyebrow {
+    margin-block-end: 0.75rem;
+    color: var(--color-action);
+    font-size: 0.8rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .page-header__description {
+    max-width: 45rem;
+    color: var(--color-content-muted);
+    font-size: 1.05rem;
+    line-height: 1.7;
+  }
+
+  .readiness-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1rem;
+  }
+
+  .readiness-grid p,
+  .starter-actions p {
+    margin-block-end: 0;
+    color: var(--color-content-muted);
+    line-height: 1.65;
+  }
+
+  .starter-actions,
+  .auth-example {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+  }
+
+  .button-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .route-loading {
+    padding-block-start: 4rem;
+  }
+
+  .app-shell__scrim {
+    display: none;
+  }
+}
+
+@media (max-width: 47.999rem) {
+  .app-shell {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "header"
+      "content";
+  }
+
+  .app-shell__header {
+    padding-inline: 0.75rem;
+  }
+
+  .app-shell__menu-button {
+    display: inline-flex;
+  }
+
+  .app-shell__sidebar {
+    position: fixed;
+    z-index: 50;
+    top: 4.5rem;
+    bottom: 0;
+    left: 0;
+    display: none;
+    width: min(18rem, 85vw);
+    height: auto;
+    box-sizing: border-box;
+    box-shadow: 10px 0 30px color-mix(in oklch, var(--color-content) 15%, transparent);
+  }
+
+  .app-shell__sidebar[data-open="true"] {
+    display: block;
+  }
+
+  .app-shell__scrim {
+    position: fixed;
+    z-index: 40;
+    inset: 4.5rem 0 0;
+    display: block;
+    border: 0;
+    background: color-mix(in oklch, var(--color-content) 35%, transparent);
+    cursor: pointer;
+  }
+
+  .app-shell__session .session-status {
+    display: none;
+  }
+
+  .readiness-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

tests/component/router.test.jsx

@@ -1,24 +1,72 @@
 // @vitest-environment jsdom
 
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it } from "vitest";
 
-import { createAnonymousSessionAdapter } from "../../src/adapters/auth/external-session-adapter.js";
+import {
+  createAnonymousSessionAdapter,
+  createDemoSessionAdapter,
+} from "../../src/adapters/auth/external-session-adapter.js";
 import { AppRouter } from "../../src/presentation/routes/app-router.jsx";
 
 describe("application router", () => {
-  it("renders not-found without making an API request", () => {
+  it("renders the app shell and not-found route without an API request", async () => {
     window.history.pushState({}, "", "/missing");
     render(<AppRouter authSession={createAnonymousSessionAdapter()} />);
+
     expect(
-      screen.getByRole("heading", { name: "페이지를 찾을 수 없습니다." }),
+      await screen.findByRole("heading", {
+        name: "페이지를 찾을 수 없습니다.",
+      }),
     ).toBeVisible();
+    expect(screen.getByRole("navigation", { name: "주요 탐색" })).toBeVisible();
+    expect(screen.getByRole("main")).toBeVisible();
   });
 
-  it("shows session-required UX without claiming authorization", () => {
+  it("navigates between registry-backed example routes", async () => {
+    const user = userEvent.setup();
+    window.history.pushState({}, "", "/");
+    render(<AppRouter authSession={createAnonymousSessionAdapter()} />);
+
+    await user.click(
+      await screen.findByRole("link", { name: "UI 구성요소", exact: true }),
+    );
+
+    expect(
+      await screen.findByRole("heading", { name: "UI 구성요소", level: 1 }),
+    ).toBeVisible();
+    expect(window.location.pathname).toBe("/examples/ui");
+  });
+
+  it("reacts to demo sign-in and opens the protected integration route", async () => {
+    const user = userEvent.setup();
+    const authSession = createDemoSessionAdapter();
+    window.history.pushState({}, "", "/sample/resources");
+    render(<AppRouter authSession={authSession} />);
+
+    expect(
+      await screen.findByRole("heading", { name: "세션이 필요합니다." }),
+    ).toBeVisible();
+    await user.click(screen.getByRole("button", { name: "로그인 시작" }));
+
+    expect(
+      await screen.findByRole("heading", { name: "보호된 연동 지점" }),
+    ).toBeVisible();
+    expect(screen.getByText("인증됨")).toBeVisible();
+  });
+
+  it("fails closed when the auth integration does not change state", async () => {
+    const user = userEvent.setup();
     window.history.pushState({}, "", "/sample/resources");
     render(<AppRouter authSession={createAnonymousSessionAdapter()} />);
-    expect(screen.getByRole("heading", { name: "세션이 필요합니다." })).toBeVisible();
-    expect(screen.getByRole("button", { name: "로그인" })).toBeVisible();
+
+    await user.click(
+      await screen.findByRole("button", { name: "로그인 시작" }),
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "세션이 필요합니다." }),
+    ).toBeVisible();
   });
 });

tests/e2e/accessibility.spec.js

@@ -1,7 +1,14 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect, test } from "@playwright/test";
 
-for (const route of ["/", "/sample/resources", "/not-found"]) {
+for (const route of [
+  "/",
+  "/examples/ui",
+  "/examples/states",
+  "/examples/auth",
+  "/sample/resources",
+  "/not-found",
+]) {
   test(`@a11y ${route} has no critical or serious axe violations`, async ({
     page,
   }) => {
@@ -21,7 +28,7 @@ test("@a11y keyboard reaches the primary route action with visible focus", async
   page,
 }) => {
   await page.goto("/");
-  const action = page.getByRole("link", { name: "샘플 리소스" });
+  const action = page.getByRole("link", { name: "UI 구성요소 보기" });
   await expect(action).toBeVisible();
   await page.keyboard.press("Tab");
   await expect(action).toBeFocused();

tests/e2e/app-shell.spec.js

@@ -5,4 +5,51 @@ test("boots the public app shell", async ({ page }) => {
   await expect(page.getByRole("heading", { level: 1 })).toHaveText(
     "Clean Architecture Frontend",
   );
+  await expect(page.getByRole("navigation", { name: "주요 탐색" })).toBeVisible();
+  await expect(page.getByRole("main")).toBeVisible();
+});
+
+test("navigates to a registry-backed example without a page reload", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page
+    .getByRole("navigation", { name: "주요 탐색" })
+    .getByRole("link", { name: "화면 상태" })
+    .click();
+
+  await expect(page).toHaveURL(/\/examples\/states$/);
+  await expect(
+    page.getByRole("heading", { level: 1, name: "화면 상태" }),
+  ).toBeFocused();
+});
+
+test("opens the protected integration route through the local demo seam", async ({
+  page,
+}) => {
+  await page.goto("/sample/resources");
+  await expect(
+    page.getByRole("heading", { name: "세션이 필요합니다." }),
+  ).toBeVisible();
+
+  await page.getByRole("button", { name: "로그인 시작" }).click();
+
+  await expect(
+    page.getByRole("heading", { name: "보호된 연동 지점" }),
+  ).toBeVisible();
+  await expect(page.getByText("인증됨")).toBeVisible();
+});
+
+test("provides an escape-dismissible mobile navigation", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto("/");
+  const menu = page.getByRole("button", { name: "메뉴", exact: true });
+
+  await menu.click();
+  await expect(menu).toHaveAttribute("aria-expanded", "true");
+  await expect(page.getByRole("navigation", { name: "주요 탐색" })).toBeVisible();
+
+  await page.keyboard.press("Escape");
+  await expect(menu).toHaveAttribute("aria-expanded", "false");
+  await expect(page.getByRole("navigation", { name: "주요 탐색" })).toBeHidden();
 });

tests/unit/navigation-policy.test.js

@@ -4,7 +4,10 @@ import {
   createRedirectLoopGuard,
   decideRouteAccess,
 } from "../../src/presentation/routes/navigation-policy.js";
-import { ROUTE_REGISTRY } from "../../src/contracts/routes.js";
+import {
+  NAVIGATION_ROUTES,
+  ROUTE_REGISTRY,
+} from "../../src/contracts/routes.js";
 
 describe("route registry", () => {
   it("matches the stable registry snapshot", () => {
@@ -15,35 +18,93 @@ describe("route registry", () => {
           "chunkId": "route-home",
           "errorSurface": "route-boundary",
           "loadingSurface": "app-shell",
+          "navigationLabel": "시작",
+          "navigationOrder": 10,
           "paramsSchema": null,
           "path": "/",
           "routeId": "APP_HOME",
           "searchSchema": null,
+          "title": "시작",
+        },
+        "EXAMPLES_AUTH": {
+          "access": "public",
+          "chunkId": "route-examples-auth",
+          "errorSurface": "route-boundary",
+          "loadingSurface": "example-page",
+          "navigationLabel": "인증 연동",
+          "navigationOrder": 40,
+          "paramsSchema": null,
+          "path": "/examples/auth",
+          "routeId": "EXAMPLES_AUTH",
+          "searchSchema": null,
+          "title": "인증 연동",
+        },
+        "EXAMPLES_STATES": {
+          "access": "public",
+          "chunkId": "route-examples-states",
+          "errorSurface": "route-boundary",
+          "loadingSurface": "example-page",
+          "navigationLabel": "화면 상태",
+          "navigationOrder": 30,
+          "paramsSchema": null,
+          "path": "/examples/states",
+          "routeId": "EXAMPLES_STATES",
+          "searchSchema": null,
+          "title": "화면 상태",
+        },
+        "EXAMPLES_UI": {
+          "access": "public",
+          "chunkId": "route-examples-ui",
+          "errorSurface": "route-boundary",
+          "loadingSurface": "example-page",
+          "navigationLabel": "UI 구성요소",
+          "navigationOrder": 20,
+          "paramsSchema": null,
+          "path": "/examples/ui",
+          "routeId": "EXAMPLES_UI",
+          "searchSchema": null,
+          "title": "UI 구성요소",
         },
         "NOT_FOUND": {
           "access": "public",
           "chunkId": "route-not-found",
           "errorSurface": "not-found",
           "loadingSurface": "none",
+          "navigationLabel": null,
+          "navigationOrder": null,
           "paramsSchema": null,
           "path": "*",
           "routeId": "NOT_FOUND",
           "searchSchema": null,
+          "title": "페이지를 찾을 수 없음",
         },
         "SAMPLE_RESOURCE_LIST": {
           "access": "integration-defined",
           "chunkId": "route-sample-resources",
           "errorSurface": "feature-boundary",
           "loadingSurface": "sample-resource-list",
+          "navigationLabel": "보호된 연동 지점",
+          "navigationOrder": 50,
           "paramsSchema": null,
           "path": "/sample/resources",
           "routeId": "SAMPLE_RESOURCE_LIST",
           "searchSchema": "SampleResourceListQuery",
+          "title": "보호된 연동 지점",
         },
       }
     `);
   });
 
+  it("derives visible navigation in explicit order", () => {
+    expect(NAVIGATION_ROUTES.map(({ routeId }) => routeId)).toEqual([
+      "APP_HOME",
+      "EXAMPLES_UI",
+      "EXAMPLES_STATES",
+      "EXAMPLES_AUTH",
+      "SAMPLE_RESOURCE_LIST",
+    ]);
+  });
+
   it("treats client access as a UX hint, not authorization", () => {
     expect(decideRouteAccess("APP_HOME", "unauthenticated")).toEqual({
       allowed: true,