feat: complete TechLog Studio publication flow

.superpowers/sdd/2026-08-15-techlog-ui-migration/task-13-report.md

@@ -0,0 +1,47 @@
+# Task 13 report: publication flow and atomic install
+
+## Status
+
+`DONE_WITH_CONCERNS`
+
+Base SHA: `9c6906fc6f76115346360d050dd8c211fee1b5a9`
+
+Delivery commit: the commit containing this report, with subject `feat: complete TechLog Studio publication flow`.
+
+## Publication mapping
+
+- Added the source-faithful publish screen, warning acknowledgements, publication history/filter, unpublish dialog, immutable event snapshot preview, and their three route pages.
+- Publish blocks invalid or stale validation, requires every warning acknowledgement, creates a fresh idempotency key per command/retry, preserves gateway command ordering, and exposes pending/error/retry states.
+- Unpublish preserves the reason/confirmation contract. Historical preview reads the event-owned immutable snapshot and renders it through the shared `PublicRecordRenderer`; a missing/unknown event stays inside Studio.
+- Added `tests/features/tech-log/studio-publication-flow.test.tsx` first. The initial red was the exact missing `publication-list.tsx` module/screen; the implemented suite is green at 7 tests.
+
+## Atomic install and removals
+
+- Installed exactly the 27 governed TechLog route definitions, codecs, runtime imports, module identities, message catalogs, schemas, and release-manifest chunk IDs. `PublicShell` and `StudioShell` are the grouped layout elements.
+- Added governed Vite chunk naming for the 27 route module identities and changed the performance probe to `TECH_LOG_HOME`.
+- Kept the reference contract/adapters and API/schema/invalidation/platform fixture tests, while removing its presentation runtime/pages and page-level tests.
+- Removed the four sample presentation pages, starter home/not-found pages, their page-level component/E2E screens, and all four `/examples/*` E2E specs authorized by the brief.
+- Added `tests/e2e/tech-log-studio-workflow.spec.ts`; it was deliberately not run and is deferred to Task 14.
+- Updated the removal fixture to retain TechLog after reference removal and to exclude tests whose only contract is the removed reference runtime or the canonical (non-reduced) CI authority.
+- Split `DocumentEditorController` into a type-only module to remove the editor/status-rail cycle exposed by the installed route graph.
+
+## Verification evidence
+
+- Publication + validation-preview + mock gateway: PASS, 3 files / 23 tests.
+- Router + runtime application + retained reference contract: PASS, 3 files / 16 tests.
+- Final route contract + navigation policy: PASS, 2 files / 10 tests.
+- Registry structure: PASS, 11 registries.
+- Release manifest inventory: PASS, exactly 27 derived chunk IDs.
+- `git diff --check`: PASS.
+- `test:sample-removal` was run once. Its isolated home smoke passed 9/9 and registry/CI reduced-contract checks passed, but its internally broad type/architecture/unit/coverage/build loop failed. Task-owned findings were fixed afterward: ES-target-incompatible `toSorted`, stale `APP_HOME`, direct adapter import, editor/status-rail cycle, reference-dependent fixture residue, canonical-CI-only tests in a reduced fixture, and missing governed build chunk names. Per fast-mode direction, that several-minute broad loop was not rerun; Task 14 must confirm the fixes through its integrated gates.
+
+## Files
+
+- Publication/UI/runtime: `src/features/tech-log/presentation/**`, including the five publication components, three pages, route runtime, and controller boundary.
+- Contracts/install: `src/contracts/{routes,route-runtime-contract}.ts`, `src/features/installed-feature-*.{ts,tsx}`, TechLog route contract, platform codecs/runtime, router, layout reference, registry governance, Vite config, release manifest, performance/removal scripts.
+- Tests: new publication flow and Studio workflow specs; updated route/router/runtime/reference/navigation expectations; authorized sample/reference presentation test deletions.
+
+## Task 14 deferred concerns
+
+- Run the complete integrated review/gates, including the sample-removal loop with the post-fix code, production build/manifest verification, types, lint, architecture, security, and Playwright workflow.
+- Confirm the governed Vite chunk names in the generated production manifest and assess any unrelated environment/timing failures from the broad isolated fixture.

config/contracts/registry-governance.json

@@ -256,7 +256,7 @@
       "consumerIdentityField": "schemaId",
       "consumerDirectories": [
         "src/presentation/routes",
-        "src/features/reference-feature/presentation",
+        "src/features/tech-log/presentation",
         "src/features/reference-feature/contracts"
       ],
       "breakingFields": ["schemaId", "boundary", "runtime"]

public/release-manifest.json

@@ -8,16 +8,33 @@
   "releaseId": "local-release",
   "builtAt": "1970-01-01T00:00:00.000Z",
   "routeChunks": {
-    "route-home": "src/presentation/pages/home-page.tsx",
+    "route-tech-log-home": "src/features/tech-log/presentation/public/pages/home-page.tsx",
-    "route-examples-platform": "src/presentation/examples/platform-overview-page.tsx",
+    "route-tech-log-explore": "src/features/tech-log/presentation/public/pages/explore-page.tsx",
-    "route-examples-ui": "src/presentation/examples/ui-gallery-page.tsx",
+    "route-tech-log-explore-kind": "src/features/tech-log/presentation/public/pages/explore-kind-page.tsx",
-    "route-examples-states": "src/presentation/examples/state-gallery-page.tsx",
+    "route-tech-log-case": "src/features/tech-log/presentation/public/pages/case-page.tsx",
-    "route-examples-auth": "src/presentation/examples/auth-example-page.tsx",
+    "route-tech-log-reference": "src/features/tech-log/presentation/public/pages/reference-page.tsx",
-    "route-reference-resources": "src/features/reference-feature/presentation/reference-resource-page.tsx",
+    "route-tech-log-question": "src/features/tech-log/presentation/public/pages/question-page.tsx",
-    "route-reference-resource-detail": "src/features/reference-feature/presentation/reference-resource-detail-page.tsx",
+    "route-tech-log-topic": "src/features/tech-log/presentation/public/pages/topic-page.tsx",
-    "route-reference-resource-form": "src/features/reference-feature/presentation/reference-resource-form-page.tsx",
+    "route-tech-log-projects": "src/features/tech-log/presentation/public/pages/projects-page.tsx",
-    "route-reference-resource-status": "src/features/reference-feature/presentation/reference-resource-status-page.tsx",
+    "route-tech-log-project": "src/features/tech-log/presentation/public/pages/project-overview-page.tsx",
-    "route-not-found": "src/presentation/pages/not-found-page.tsx"
+    "route-tech-log-project-records": "src/features/tech-log/presentation/public/pages/project-records-page.tsx",
+    "route-tech-log-project-decisions": "src/features/tech-log/presentation/public/pages/project-decisions-page.tsx",
+    "route-tech-log-project-activity": "src/features/tech-log/presentation/public/pages/project-activity-page.tsx",
+    "route-tech-log-releases": "src/features/tech-log/presentation/public/pages/releases-page.tsx",
+    "route-tech-log-release": "src/features/tech-log/presentation/public/pages/release-page.tsx",
+    "route-tech-log-profile": "src/features/tech-log/presentation/public/pages/profile-page.tsx",
+    "route-tech-log-search": "src/features/tech-log/presentation/public/pages/search-page.tsx",
+    "route-tech-log-studio-home": "src/features/tech-log/presentation/studio/pages/studio-home-page.tsx",
+    "route-tech-log-studio-documents": "src/features/tech-log/presentation/studio/pages/documents-page.tsx",
+    "route-tech-log-studio-document-new": "src/features/tech-log/presentation/studio/pages/new-document-page.tsx",
+    "route-tech-log-studio-document-edit": "src/features/tech-log/presentation/studio/pages/document-edit-page.tsx",
+    "route-tech-log-studio-document-validation": "src/features/tech-log/presentation/studio/pages/document-validation-page.tsx",
+    "route-tech-log-studio-document-preview": "src/features/tech-log/presentation/studio/pages/document-preview-page.tsx",
+    "route-tech-log-studio-document-publish": "src/features/tech-log/presentation/studio/pages/document-publish-page.tsx",
+    "route-tech-log-studio-publications": "src/features/tech-log/presentation/studio/pages/publications-page.tsx",
+    "route-tech-log-studio-publication-preview": "src/features/tech-log/presentation/studio/pages/publication-preview-page.tsx",
+    "route-tech-log-studio-not-found": "src/features/tech-log/presentation/studio/pages/studio-not-found-page.tsx",
+    "route-not-found": "src/features/tech-log/presentation/public/pages/public-not-found-page.tsx"
   },
   "contractSet": {
     "setAlgorithm": "CA_CONTRACT_SET_V1",

scripts/test-performance.ts

@@ -84,13 +84,8 @@ try {
       }).observe({ type: "layout-shift", buffered: true });
     });
     await page.goto(baseUrl, { waitUntil: "networkidle" });
-    const target = ROUTE_REGISTRY.EXAMPLES_PLATFORM;
+    const target = ROUTE_REGISTRY.TECH_LOG_HOME;
-    const targetLabel = target.navigationLabel;
-    if (!targetLabel) {
-      throw new Error("Performance route must be present in navigation.");
-    }
     const interactionStarted = performance.now();
-    await page.getByRole("link", { name: targetLabel }).click();
     await page.getByRole("heading", { name: target.title }).waitFor();
     const namedInteractionMs = performance.now() - interactionStarted;
     const paint = await page.evaluate(

scripts/test-sample-removal.ts

@@ -36,6 +36,8 @@ const featureOwnedPaths = [
   featureSource,
   featureTests,
   "tests/integration/http-scenario-catalog.test.ts",
+  "tests/integration/http-execution-v3-observability.test.ts",
+  "tests/features/tech-log/runtime-composition.test.ts",
   "tests/e2e/reference-form.spec.ts",
   "tests/e2e/reference-route.spec.ts",
   "tests/mocks",
@@ -74,13 +76,17 @@ const copyTargets = [
   ".nvmrc",
 ];
 
-const emptyContracts = `import { PLATFORM_ROUTE_RUNTIME_CONTRACT } from "../contracts/route-runtime-contract.ts";
+const emptyContracts = `import type { RouteDefinition } from "../contracts/routes.ts";
-import { PLATFORM_ROUTE_REGISTRY, type RouteDefinition } from "../contracts/routes.ts";
 import { PLATFORM_SCHEMA_REGISTRY } from "../contracts/schema-registry.ts";
+import {
+  TECH_LOG_ROUTE_REGISTRY,
+  TECH_LOG_ROUTE_RUNTIME_CONTRACT,
+  TECH_LOG_ROUTE_SCHEMA_REGISTRY,
+} from "./tech-log/contracts/tech-log-route-contract.ts";
 
 export const INSTALLED_FEATURE_CONTRACTS: readonly unknown[] = Object.freeze([]);
-export const ROUTE_REGISTRY = PLATFORM_ROUTE_REGISTRY;
+export const ROUTE_REGISTRY = TECH_LOG_ROUTE_REGISTRY;
-export const ROUTE_RUNTIME_CONTRACT = PLATFORM_ROUTE_RUNTIME_CONTRACT;
+export const ROUTE_RUNTIME_CONTRACT = TECH_LOG_ROUTE_RUNTIME_CONTRACT;
 export const API_OPERATIONS = Object.freeze({});
 export const INVALIDATION_REGISTRY = Object.freeze({
   topics: Object.freeze([]),
@@ -88,7 +94,10 @@ export const INVALIDATION_REGISTRY = Object.freeze({
   edges: Object.freeze([]),
 });
 export const INVALIDATION_TOPIC_VERSIONS = Object.freeze([]);
-export const SCHEMA_REGISTRY = PLATFORM_SCHEMA_REGISTRY;
+export const SCHEMA_REGISTRY = Object.freeze({
+  ...PLATFORM_SCHEMA_REGISTRY,
+  ...TECH_LOG_ROUTE_SCHEMA_REGISTRY,
+});
 export const NAVIGATION_ROUTES = Object.freeze(
   Object.values(ROUTE_REGISTRY)
     .filter((definition) => definition.navigationOrder !== null)
@@ -109,15 +118,22 @@ export function routePath(routeId: string): string {
 `;
 
 const emptyRuntimes = `import { PLATFORM_ROUTE_CODECS } from "../presentation/routes/platform-route-codecs.ts";
-import { PLATFORM_ROUTE_RUNTIME } from "../presentation/routes/route-runtime.tsx";
+import { TECH_LOG_ROUTE_CODECS } from "./tech-log/presentation/tech-log-route-codecs.ts";
+import { TECH_LOG_ROUTE_RUNTIME } from "./tech-log/presentation/tech-log-route-runtime.tsx";
 
-export const ROUTE_CODECS = PLATFORM_ROUTE_CODECS;
+export const ROUTE_CODECS = Object.freeze({
-export const ROUTE_RUNTIME = PLATFORM_ROUTE_RUNTIME;
+  ...PLATFORM_ROUTE_CODECS,
+  ...TECH_LOG_ROUTE_CODECS,
+});
+export const ROUTE_RUNTIME = TECH_LOG_ROUTE_RUNTIME;
 `;
 
-const emptyAdapters = `export function createInstalledFeatureInputs(_context: unknown) {
+const emptyAdapters = `import { createTechLogFeatureInstalledInput } from "./tech-log/adapters/create-tech-log-feature-input.ts";
+
+export function createInstalledFeatureInputs(_context: unknown) {
   void _context;
-  return Object.freeze({});
+  const techLog = createTechLogFeatureInstalledInput();
+  return Object.freeze({ [techLog.featureId]: techLog.input });
 }
 `;
 
@@ -138,9 +154,11 @@ export const EXPECTED_CONTRACT_SET_PACKAGES: readonly InstalledContractPackageId
   COMPOSED_CONTRACT_CONTRIBUTIONS.externalPackages;
 `;
 
-const emptyMessages = `export const INSTALLED_MESSAGE_CATALOGS = Object.freeze({
+const emptyMessages = `import { TECH_LOG_MESSAGE_CATALOGS } from "./tech-log/contracts/tech-log-message-catalog.ts";
-  "ko-KR": Object.freeze({}),
+
-  "en-US": Object.freeze({}),
+export const INSTALLED_MESSAGE_CATALOGS = Object.freeze({
+  "ko-KR": TECH_LOG_MESSAGE_CATALOGS["ko-KR"],
+  "en-US": TECH_LOG_MESSAGE_CATALOGS["en-US"],
 });
 `;
 
@@ -174,10 +192,13 @@ function runPnpm(script: string, extra: string[] = []): boolean {
 try {
   await prepareRemovalFixture(fixtureRoot, copyTargets);
   for (const excludedFixtureTest of [
+    "tests/integration/security-followup-archive.test.ts",
+    "tests/unit/ci-artifact-contract.test.ts",
     "tests/unit/ci-workflow-generation.test.ts",
     "tests/unit/__snapshots__/ci-workflow-generation.test.ts.snap",
     "tests/unit/removal-fixture.test.ts",
     "tests/unit/http-scenario-evidence.test.ts",
+    "tests/unit/task3-selective-integration.test.ts",
   ]) {
     await rm(path.join(fixtureRoot, excludedFixtureTest), { force: true });
   }

src/contracts/route-runtime-contract.ts

@@ -21,45 +21,4 @@ export type RouteRuntimeDefinition = Readonly<{
   searchCodec: RouteCodecId;
 }>;
 
-const runtime = <Definition extends RouteRuntimeDefinition>(
+export const PLATFORM_ROUTE_RUNTIME_CONTRACT = Object.freeze({});
-  value: Definition,
-): Readonly<Definition> => Object.freeze(value);
-
-export const PLATFORM_ROUTE_RUNTIME_CONTRACT = Object.freeze({
-  APP_HOME: runtime({
-    routeId: "APP_HOME",
-    moduleId: "home-page",
-    paramsCodec: "none",
-    searchCodec: "none",
-  }),
-  EXAMPLES_PLATFORM: runtime({
-    routeId: "EXAMPLES_PLATFORM",
-    moduleId: "platform-overview-page",
-    paramsCodec: "none",
-    searchCodec: "none",
-  }),
-  EXAMPLES_UI: runtime({
-    routeId: "EXAMPLES_UI",
-    moduleId: "ui-gallery-page",
-    paramsCodec: "none",
-    searchCodec: "none",
-  }),
-  EXAMPLES_STATES: runtime({
-    routeId: "EXAMPLES_STATES",
-    moduleId: "state-gallery-page",
-    paramsCodec: "none",
-    searchCodec: "none",
-  }),
-  EXAMPLES_AUTH: runtime({
-    routeId: "EXAMPLES_AUTH",
-    moduleId: "auth-example-page",
-    paramsCodec: "none",
-    searchCodec: "none",
-  }),
-  NOT_FOUND: runtime({
-    routeId: "NOT_FOUND",
-    moduleId: "not-found-page",
-    paramsCodec: "NotFoundSplat",
-    searchCodec: "none",
-  }),
-});

src/contracts/routes.ts

@@ -15,93 +15,4 @@ export type RouteDefinition = Readonly<{
   navigationOrder: number | null;
 }>;
 
-const route = <Definition extends RouteDefinition>(
+export const PLATFORM_ROUTE_REGISTRY = Object.freeze({});
-  definition: Definition,
-): Readonly<Definition> => Object.freeze(definition);
-
-export const PLATFORM_ROUTE_REGISTRY = Object.freeze({
-  APP_HOME: route({
-    routeId: "APP_HOME",
-    path: "/",
-    layoutGroup: "PUBLIC",
-    paramsSchema: null,
-    searchSchema: null,
-    access: "public",
-    loadingSurface: "app-shell",
-    errorSurface: "route-boundary",
-    chunkId: "route-home",
-    title: "시작",
-    navigationLabel: "시작",
-    navigationOrder: 10,
-  }),
-  EXAMPLES_PLATFORM: route({
-    routeId: "EXAMPLES_PLATFORM",
-    path: "/examples/platform",
-    layoutGroup: "PUBLIC",
-    paramsSchema: null,
-    searchSchema: null,
-    access: "public",
-    loadingSurface: "example-page",
-    errorSurface: "route-boundary",
-    chunkId: "route-examples-platform",
-    title: "플랫폼 구성",
-    navigationLabel: "플랫폼 구성",
-    navigationOrder: 15,
-  }),
-  EXAMPLES_UI: route({
-    routeId: "EXAMPLES_UI",
-    path: "/examples/ui",
-    layoutGroup: "PUBLIC",
-    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",
-    layoutGroup: "PUBLIC",
-    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",
-    layoutGroup: "PUBLIC",
-    paramsSchema: null,
-    searchSchema: null,
-    access: "public",
-    loadingSurface: "example-page",
-    errorSurface: "route-boundary",
-    chunkId: "route-examples-auth",
-    title: "인증 연동",
-    navigationLabel: "인증 연동",
-    navigationOrder: 40,
-  }),
-  NOT_FOUND: route({
-    routeId: "NOT_FOUND",
-    path: "*",
-    layoutGroup: "PUBLIC",
-    paramsSchema: "NotFoundSplat",
-    searchSchema: null,
-    access: "public",
-    loadingSurface: "none",
-    errorSurface: "not-found",
-    chunkId: "route-not-found",
-    title: "페이지를 찾을 수 없음",
-    navigationLabel: null,
-    navigationOrder: null,
-  }),
-});

src/features/installed-feature-contracts.ts

@@ -1,6 +1,4 @@
-import { PLATFORM_ROUTE_RUNTIME_CONTRACT } from "../contracts/route-runtime-contract.ts";
 import type { RouteRuntimeDefinition } from "../contracts/route-runtime-contract.ts";
-import { PLATFORM_ROUTE_REGISTRY } from "../contracts/routes.ts";
 import type { RouteDefinition } from "../contracts/routes.ts";
 import {
   composeSchemaRegistry,
@@ -14,18 +12,21 @@ import {
 import { validateRestProfileBindings } from "../contracts/rest-profiles.ts";
 import { composeRuntimeSchemaCodecs } from "../contracts/schema-registry.ts";
 import { composeBoundaryMapperRegistry } from "../contracts/boundary-mapper.ts";
+import {
+  TECH_LOG_ROUTE_REGISTRY,
+  TECH_LOG_ROUTE_RUNTIME_CONTRACT,
+  TECH_LOG_ROUTE_SCHEMA_REGISTRY,
+} from "./tech-log/contracts/tech-log-route-contract.ts";
 
 export const INSTALLED_FEATURE_CONTRACTS = Object.freeze([
   REFERENCE_FEATURE_CONTRACT,
 ]);
 
 export const ROUTE_REGISTRY = Object.freeze({
-  ...PLATFORM_ROUTE_REGISTRY,
+  ...TECH_LOG_ROUTE_REGISTRY,
-  ...REFERENCE_FEATURE_CONTRACT.routes,
 }) satisfies Readonly<Record<string, RouteDefinition>>;
 export const ROUTE_RUNTIME_CONTRACT = Object.freeze({
-  ...PLATFORM_ROUTE_RUNTIME_CONTRACT,
+  ...TECH_LOG_ROUTE_RUNTIME_CONTRACT,
-  ...REFERENCE_FEATURE_CONTRACT.routeRuntimeContracts,
 }) satisfies Readonly<Record<string, RouteRuntimeDefinition>>;
 export const API_OPERATIONS = composeApiOperations(
   INSTALLED_FEATURE_CONTRACTS.map((contract) => contract.apiOperations),
@@ -56,6 +57,7 @@ export const INVALIDATION_TOPIC_VERSIONS = Object.freeze(
 );
 export const SCHEMA_REGISTRY = composeSchemaRegistry([
   PLATFORM_SCHEMA_REGISTRY,
+  TECH_LOG_ROUTE_SCHEMA_REGISTRY,
   ...INSTALLED_FEATURE_CONTRACTS.map((contract) => contract.schemas),
 ]);
 export const RUNTIME_SCHEMA_CODECS = composeRuntimeSchemaCodecs(

src/features/installed-feature-messages.ts

@@ -1,10 +1,13 @@
 import { REFERENCE_MESSAGE_CATALOGS } from "./reference-feature/contracts/reference-message-catalog.ts";
+import { TECH_LOG_MESSAGE_CATALOGS } from "./tech-log/contracts/tech-log-message-catalog.ts";
 
 export const INSTALLED_MESSAGE_CATALOGS = Object.freeze({
   "ko-KR": Object.freeze({
     ...REFERENCE_MESSAGE_CATALOGS["ko-KR"],
+    ...TECH_LOG_MESSAGE_CATALOGS["ko-KR"],
   }),
   "en-US": Object.freeze({
     ...REFERENCE_MESSAGE_CATALOGS["en-US"],
+    ...TECH_LOG_MESSAGE_CATALOGS["en-US"],
   }),
 } as const);

src/features/installed-feature-runtimes.tsx

@@ -1,18 +1,12 @@
 import { PLATFORM_ROUTE_CODECS } from "../presentation/routes/platform-route-codecs.ts";
-import { PLATFORM_ROUTE_RUNTIME } from "../presentation/routes/route-runtime.tsx";
-import {
-  REFERENCE_FEATURE_ROUTE_CODECS,
-  REFERENCE_FEATURE_ROUTE_RUNTIME,
-} from "./reference-feature/presentation/reference-feature-runtime.tsx";
 import { TECH_LOG_ROUTE_CODECS } from "./tech-log/presentation/tech-log-route-codecs.ts";
+import { TECH_LOG_ROUTE_RUNTIME } from "./tech-log/presentation/tech-log-route-runtime.tsx";
 
 export const ROUTE_CODECS = Object.freeze({
   ...PLATFORM_ROUTE_CODECS,
-  ...REFERENCE_FEATURE_ROUTE_CODECS,
   ...TECH_LOG_ROUTE_CODECS,
 });
 
 export const ROUTE_RUNTIME = Object.freeze({
-  ...PLATFORM_ROUTE_RUNTIME,
+  ...TECH_LOG_ROUTE_RUNTIME,
-  ...REFERENCE_FEATURE_ROUTE_RUNTIME,
 });

src/features/reference-feature/presentation/reference-feature-runtime.tsx

@@ -1,30 +0,0 @@
-import { lazy } from "react";
-
-import {
-  referenceResourceListQuerySchema,
-  referenceResourceParamsSchema,
-} from "../contracts/reference-schemas.ts";
-
-export const REFERENCE_FEATURE_ROUTE_CODECS = {
-  ReferenceResourceListQuery: referenceResourceListQuerySchema,
-  ReferenceResourceParams: referenceResourceParamsSchema,
-} as const;
-
-export const REFERENCE_FEATURE_ROUTE_RUNTIME = {
-  REFERENCE_RESOURCE_LIST: Object.freeze({
-    moduleId: "reference-resource-page",
-    Component: lazy(() => import("./reference-resource-page.tsx")),
-  }),
-  REFERENCE_RESOURCE_DETAIL: Object.freeze({
-    moduleId: "reference-resource-detail-page",
-    Component: lazy(() => import("./reference-resource-detail-page.tsx")),
-  }),
-  REFERENCE_RESOURCE_FORM: Object.freeze({
-    moduleId: "reference-resource-form-page",
-    Component: lazy(() => import("./reference-resource-form-page.tsx")),
-  }),
-  REFERENCE_RESOURCE_STATUS: Object.freeze({
-    moduleId: "reference-resource-status-page",
-    Component: lazy(() => import("./reference-resource-status-page.tsx")),
-  }),
-} as const;

src/features/reference-feature/presentation/reference-resource-detail-page.tsx

@@ -1,61 +0,0 @@
-import { Link } from "react-router-dom";
-
-import {
-  AsyncSurface,
-  DetailPage,
-} from "../../../presentation/design-system/index.ts";
-import { useRouteInput } from "../../../presentation/routes/route-input.tsx";
-import { useLocale } from "../../../presentation/i18n/index.ts";
-import { useReferenceFailureAction } from "./use-reference-failure-action.ts";
-import { useReferenceDetail } from "./use-reference-feature.ts";
-
-export default function ReferenceResourceDetailPage() {
-  const { date, message } = useLocale();
-  const route = useRouteInput();
-  const resourceId = String(route.params.resourceId);
-  const { query } = useReferenceDetail(resourceId);
-  const resource = query.data;
-  const failureAction = useReferenceFailureAction(query.state.failure);
-
-  return (
-    <DetailPage
-      key={resourceId}
-      breadcrumb={
-        <Link to="/examples/reference-resources">Reference resources</Link>
-      }
-      heading={{
-        eyebrow: "DetailPage",
-        title: resource?.title ?? "Reference detail",
-        description: "route param과 detail query의 reset 경계를 확인합니다.",
-      }}
-      metadata={
-        resource ? (
-          <dl>
-            <dt>Resource ID</dt>
-            <dd>{resource.resourceId}</dd>
-            <dt>Created</dt>
-            <dd>
-              {resource.createdAt
-                ? date(new Date(resource.createdAt))
-                : message("common.noDisplayValue")}
-            </dd>
-          </dl>
-        ) : (
-          <p>요약 정보를 준비하고 있습니다.</p>
-        )
-      }
-      feedback={
-        <AsyncSurface
-          state={query.state}
-          onAction={failureAction}
-          onRetry={query.retry}
-        >
-          {resource ? (
-            <p>이 영역에는 제품별 상세 section을 조립할 수 있습니다.</p>
-          ) : null}
-        </AsyncSurface>
-      }
-      aside={<p>상세 페이지의 관련 정보 slot입니다.</p>}
-    />
-  );
-}

src/features/reference-feature/presentation/reference-resource-form-page.tsx

@@ -1,158 +0,0 @@
-import { useCallback } from "react";
-import { useNavigate } from "react-router-dom";
-
-import {
-  Button,
-  AsyncSurface,
-  DirtyNavigationDialog,
-  ErrorSummary,
-  Form,
-  FormActions,
-  FormPage,
-  FormField,
-  useAppForm,
-  useDirtyNavigationGuard,
-} from "../../../presentation/design-system/index.ts";
-import {
-  REFERENCE_FORM_DEFAULTS,
-  referenceResourceFormSchema,
-  toCreateReferenceCommand,
-  type ReferenceResourceFormValues,
-} from "./reference-resource-form.ts";
-import { useReferenceCreate } from "./use-reference-feature.ts";
-
-const FIELD_LABELS = Object.freeze({
-  name: "새 항목 이름",
-  note: "설명",
-}) satisfies Record<keyof ReferenceResourceFormValues, string>;
-
-export default function ReferenceResourceFormPage() {
-  const navigate = useNavigate();
-  const mutation = useReferenceCreate();
-  const submit = useCallback(
-    (command: ReturnType<typeof toCreateReferenceCommand>) =>
-      mutation.submit(command),
-    [mutation],
-  );
-  const form = useAppForm({
-    schema: referenceResourceFormSchema,
-    defaultValues: REFERENCE_FORM_DEFAULTS,
-    allowedServerFields: ["name", "note"],
-    mapToCommand: toCreateReferenceCommand,
-    submit,
-  });
-  const mutationEffectUnknown =
-    mutation.state.indicator === "mutation-effect-unknown";
-  const mutationBlocked =
-    mutationEffectUnknown || mutation.state.indicator === "mutation-pending";
-  const guard = useDirtyNavigationGuard(form.dirty && !form.pending);
-
-  return (
-    <Form
-      id={form.formId}
-      pending={form.pending}
-      onSubmit={(event) => {
-        if (mutationBlocked) {
-          event.preventDefault();
-          return;
-        }
-        void form.submitForm(event);
-      }}
-    >
-      <FormPage
-        breadcrumb={
-          <button
-            className="ui-button ui-button--ghost"
-            type="button"
-            onClick={() => navigate("/examples/reference-resources")}
-          >
-            목록으로 돌아가기
-          </button>
-        }
-        heading={{
-          eyebrow: "FormPage",
-          title: "Reference resource 만들기",
-          description:
-            "presentation schema, command mapper, 422/conflict와 dirty navigation 정책을 실행합니다.",
-        }}
-        errorSummary={
-          <ErrorSummary
-            fieldErrors={form.fieldErrors}
-            formErrors={form.formErrors}
-            fieldLabels={FIELD_LABELS}
-            fieldId={form.fieldId}
-            onFocusField={form.focusField}
-          />
-        }
-        fields={
-          <>
-            <FormField
-              {...form.field("name")}
-              label={FIELD_LABELS.name}
-              description="앞뒤 공백은 command mapper 전에 제거됩니다."
-              autoComplete="off"
-              required
-            />
-            <FormField
-              {...form.field("note")}
-              label={FIELD_LABELS.note}
-              description="선택 입력이며 비어 있으면 command에 포함되지 않습니다."
-              autoComplete="off"
-            />
-          </>
-        }
-        formActions={
-          <FormActions sticky>
-            <Button
-              variant="secondary"
-              onClick={() => navigate("/examples/reference-resources")}
-              disabled={form.pending || mutationBlocked}
-            >
-              취소
-            </Button>
-            <Button
-              type="submit"
-              disabled={form.pending || mutationBlocked}
-            >
-              {form.pending ? "저장 중…" : "저장"}
-            </Button>
-            <Button
-              variant="ghost"
-              onClick={() => form.reset()}
-              disabled={!form.dirty || form.pending || mutationBlocked}
-            >
-              초기화
-            </Button>
-          </FormActions>
-        }
-        feedback={
-          mutationEffectUnknown ? (
-            <AsyncSurface
-              state={mutation.state}
-              onReconcileUnknownEffect={(resolution) => {
-                void mutation.reconcileUnknownEffect(resolution).then(() => {
-                  if (resolution === "APPLIED") {
-                    form.settleApplied();
-                  } else {
-                    form.settleNotApplied();
-                  }
-                });
-              }}
-            />
-          ) : form.result === "success" ? (
-            <p role="status">저장했습니다.</p>
-          ) : form.result === "conflict" ? (
-            <p role="status">충돌을 해결한 뒤 다시 제출할 수 있습니다.</p>
-          ) : null
-        }
-        aside={
-          <p>
-            form value는 URL, storage, telemetry에 저장되지 않고 submit 시에만
-            application command로 변환됩니다.
-          </p>
-        }
-        guard={<DirtyNavigationDialog guard={guard} />}
-      />
-    </Form>
-  );
-}

src/features/reference-feature/presentation/reference-resource-form.ts

@@ -1,29 +0,0 @@
-import { z } from "zod";
-
-export const referenceResourceFormSchema = z
-  .object({
-    name: z
-      .string()
-      .trim()
-      .min(2, "이름은 두 글자 이상이어야 합니다.")
-      .max(120),
-    note: z.string().trim().max(500).default(""),
-  })
-  .strict();
-
-export type ReferenceResourceFormValues = z.infer<
-  typeof referenceResourceFormSchema
->;
-
-export const REFERENCE_FORM_DEFAULTS: ReferenceResourceFormValues =
-  Object.freeze({
-    name: "",
-    note: "",
-  });
-
-export function toCreateReferenceCommand(values: ReferenceResourceFormValues) {
-  return Object.freeze({
-    name: values.name,
-    ...(values.note ? { note: values.note } : {}),
-  });
-}

src/features/reference-feature/presentation/reference-resource-page.tsx

@@ -1,61 +0,0 @@
-import { Link, useNavigate } from "react-router-dom";
-
-import {
-  AsyncSurface,
-  Button,
-  CollectionPage,
-} from "../../../presentation/design-system/index.ts";
-import { useReferenceFailureAction } from "./use-reference-failure-action.ts";
-import { useReferenceFeature } from "./use-reference-feature.ts";
-
-export default function ReferenceResourcePage() {
-  const navigate = useNavigate();
-  const { filters, query } = useReferenceFeature();
-  const failureAction = useReferenceFailureAction(query.state.failure);
-
-  return (
-    <CollectionPage
-      heading={{
-        eyebrow: "제거 가능한 수직 슬라이스",
-        title: "Reference feature",
-        description:
-          "URL codec, application input, HTTP/schema/mapper와 query 상태를 한 경로로 검증합니다.",
-      }}
-      actions={[
-        {
-          kind: "button",
-          label: "새 항목 만들기",
-          onAction: () => navigate("/examples/reference-resources/new"),
-        },
-      ]}
-      activeFilters={
-        <p data-testid="reference-filter">
-          limit {filters.limit}
-          {filters.tags?.length ? ` · tags ${filters.tags.join(", ")}` : ""}
-        </p>
-      }
-      toolbar={<Button onClick={() => void query.retry()}>새로고침</Button>}
-      resultCount={
-        query.data ? `총 ${query.data.length}개 항목` : "결과 확인 중"
-      }
-    >
-      <AsyncSurface
-        state={query.state}
-        onAction={failureAction}
-        onRetry={query.retry}
-      >
-        <ul aria-label="Reference resources">
-          {(query.data ?? []).map((resource) => (
-            <li key={resource.resourceId}>
-              <Link
-                to={`/examples/reference-resources/${encodeURIComponent(resource.resourceId)}`}
-              >
-                {resource.title}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </AsyncSurface>
-    </CollectionPage>
-  );
-}

src/features/reference-feature/presentation/reference-resource-status-page.tsx

@@ -1,25 +0,0 @@
-import { useNavigate } from "react-router-dom";
-
-import { StatusPage } from "../../../presentation/design-system/index.ts";
-
-export default function ReferenceResourceStatusPage() {
-  const navigate = useNavigate();
-
-  return (
-    <StatusPage
-      variant="maintenance"
-      heading={{
-        eyebrow: "StatusPage · maintenance",
-        title: "잠시 사용할 수 없습니다.",
-        description:
-          "도메인 데이터나 raw 오류를 노출하지 않는 중립적인 상태 페이지 예시입니다.",
-      }}
-      primaryAction={{
-        kind: "button",
-        label: "목록으로 이동",
-        onAction: () => navigate("/examples/reference-resources"),
-      }}
-      supportReference="REFERENCE-STATUS-DEMO"
-    />
-  );
-}

src/features/reference-feature/presentation/use-reference-failure-action.ts

@@ -1,50 +0,0 @@
-import { useCallback } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-
-import type { AppFailure } from "../../../contracts/errors.ts";
-import { useSession } from "../../../presentation/providers/session-provider.tsx";
-
-const REFERENCE_SUPPORT_ROUTE = "/examples/reference-resources/status";
-
-/**
- * Reference queries own concrete destinations for generic application failure
- * actions. Retry remains query-owned; guarded release reloads remain in the
- * chunk recovery boundary.
- */
-export function useReferenceFailureAction(
-  failure: AppFailure | undefined,
-): (() => void) | undefined {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { beginSignIn } = useSession();
-  const action = failure?.action;
-  const handleAction = useCallback(() => {
-    if (action === "reauth") {
-      const returnTo = `${location.pathname}${location.search}${location.hash}`;
-      void beginSignIn(returnTo).catch(() => {
-        void navigate("/");
-      });
-      return;
-    }
-    if (action === "navigate") {
-      void navigate("/");
-      return;
-    }
-    if (action === "contact-support") {
-      void navigate(REFERENCE_SUPPORT_ROUTE);
-    }
-  }, [
-    action,
-    beginSignIn,
-    location.hash,
-    location.pathname,
-    location.search,
-    navigate,
-  ]);
-
-  return action === "reauth" ||
-    action === "navigate" ||
-    action === "contact-support"
-    ? handleAction
-    : undefined;
-}

src/features/reference-feature/presentation/use-reference-feature.ts

@@ -1,138 +0,0 @@
-import { useApplication } from "../../../presentation/providers/application-provider.tsx";
-import {
-  useApplicationMutation,
-  useApplicationQuery,
-} from "../../../presentation/adapters/query/application-query.ts";
-import { useRouteInput } from "../../../presentation/routes/route-input.tsx";
-import {
-  REFERENCE_FEATURE_ID,
-  REFERENCE_RESOURCE_INVALIDATION_TOPIC,
-  REFERENCE_RESOURCE_QUERY_NAMESPACE,
-} from "../contracts/reference-feature-contract.ts";
-import type {
-  ReferenceCreateCommand,
-  ReferenceFeatureInput,
-  ReferenceListFilters,
-} from "../application/reference-feature-api.ts";
-import type { ReferenceResourceView } from "../contracts/reference-mapper.ts";
-import {
-  bindQuery,
-  type BoundMutation,
-  type QueryResultMeasure,
-} from "../../../contracts/server-state.ts";
-import { useServerStateScope } from "../../../presentation/adapters/query/server-state-scope-provider.tsx";
-
-const UTF8 = new TextEncoder();
-
-/**
- * §10.4. Feature-owned measurement over the mapped application value. There is
- * no generic fallback: bounded string bytes plus fixed primitive width plus a
- * small per-item overhead, never `JSON.stringify` or a recursive walker.
- */
-function measureResourceView(view: ReferenceResourceView): QueryResultMeasure {
-  return {
-    itemCount: 1,
-    estimatedBytes:
-      UTF8.encode(view.resourceId).byteLength +
-      UTF8.encode(view.title).byteLength +
-      UTF8.encode(view.createdAt ?? "").byteLength +
-      32,
-  };
-}
-
-function measureResourceList(
-  views: readonly ReferenceResourceView[],
-): QueryResultMeasure {
-  let estimatedBytes = 16;
-  for (const view of views) {
-    estimatedBytes += measureResourceView(view).estimatedBytes;
-  }
-  return { itemCount: views.length, estimatedBytes };
-}
-
-export function useReferenceFeatureInput(): ReferenceFeatureInput {
-  return useApplication().features.get(REFERENCE_FEATURE_ID);
-}
-
-export function useReferenceDetail(resourceId: string) {
-  const input = useReferenceFeatureInput();
-  const scope = useServerStateScope();
-  const query = useApplicationQuery(
-    bindQuery(
-      {
-        definitionId: "reference-resource-detail-v1",
-        definitionVersion: 1,
-        owner: REFERENCE_FEATURE_ID,
-        namespace: REFERENCE_RESOURCE_QUERY_NAMESPACE.namespaceId,
-        namespaceVersion:
-          REFERENCE_RESOURCE_QUERY_NAMESPACE.namespaceVersion,
-        operationId: "GET_REFERENCE_RESOURCE",
-        profileId: "DETAIL_STANDARD",
-        measureResult: measureResourceView,
-        execute: (selectedResourceId: string, { signal }) =>
-          input.getResource(selectedResourceId, { signal }),
-      },
-      resourceId,
-      scope,
-    ),
-  );
-  return Object.freeze({ query });
-}
-
-export function useReferenceCreate() {
-  const input = useReferenceFeatureInput();
-  const scope = useServerStateScope();
-  const mutation: BoundMutation<
-    ReferenceCreateCommand,
-    ReferenceResourceView
-  > = {
-    definitionId: "reference-resource-create-v1",
-    definitionVersion: 1,
-    operationId: "CREATE_REFERENCE_RESOURCE",
-    requiresIdempotencyKey: true,
-    owner: REFERENCE_FEATURE_ID,
-    duplicatePolicy: "REJECT_WHILE_ACTIVE",
-    scope,
-    execute: input.createResource,
-    invalidate: [REFERENCE_RESOURCE_INVALIDATION_TOPIC],
-  };
-  return useApplicationMutation(mutation);
-}
-
-export function useReferenceFeature() {
-  const input = useReferenceFeatureInput();
-  const scope = useServerStateScope();
-  const routeInput = useRouteInput();
-  const filters = routeInput.search as ReferenceListFilters;
-  const query = useApplicationQuery(
-    bindQuery(
-      {
-        definitionId: "reference-resource-list-v1",
-        definitionVersion: 1,
-        owner: REFERENCE_FEATURE_ID,
-        namespace: REFERENCE_RESOURCE_QUERY_NAMESPACE.namespaceId,
-        namespaceVersion:
-          REFERENCE_RESOURCE_QUERY_NAMESPACE.namespaceVersion,
-        operationId: "LIST_REFERENCE_RESOURCES",
-        profileId: "LIST_STANDARD",
-        measureResult: measureResourceList,
-        execute: (selectedFilters: ReferenceListFilters, { signal }) =>
-          input.listResources(selectedFilters, { signal }),
-      },
-      filters,
-      scope,
-    ),
-  );
-  const mutation = useApplicationMutation({
-    definitionId: "reference-resource-create-v1",
-    definitionVersion: 1,
-    operationId: "CREATE_REFERENCE_RESOURCE",
-    requiresIdempotencyKey: true,
-    owner: REFERENCE_FEATURE_ID,
-    duplicatePolicy: "REJECT_WHILE_ACTIVE",
-    scope,
-    execute: input.createResource,
-    invalidate: [REFERENCE_RESOURCE_INVALIDATION_TOPIC],
-  });
-  return Object.freeze({ filters, query, mutation });
-}

src/features/tech-log/contracts/tech-log-route-contract.ts

@@ -6,6 +6,7 @@ import type {
   RouteDefinition,
   RouteLayoutGroup,
 } from "../../../contracts/routes.ts";
+import type { SchemaDefinition } from "../../../contracts/schema-registry.ts";
 
 type RouteSpec = Readonly<{
   routeId: string;
@@ -52,6 +53,79 @@ const TECH_LOG_ROUTE_SPECS = [
 
 export type TechLogRouteId = (typeof TECH_LOG_ROUTE_SPECS)[number]["routeId"];
 
+const routeSchema = (
+  schemaId: string,
+  boundary: "route-params" | "route-search",
+  unknownFieldPolicy: "REJECT_UNKNOWN" | "STRIP_UNKNOWN",
+): SchemaDefinition =>
+  Object.freeze({
+    schemaId,
+    boundary,
+    owner: "feature-tech-log",
+    runtime: "zod",
+    schemaVersion: 1,
+    direction: "REQUEST",
+    unknownFieldPolicy,
+  });
+
+export const TECH_LOG_ROUTE_SCHEMA_REGISTRY = Object.freeze({
+  TechLogExploreKindParams: routeSchema(
+    "TechLogExploreKindParams",
+    "route-params",
+    "REJECT_UNKNOWN",
+  ),
+  TechLogSlugParams: routeSchema(
+    "TechLogSlugParams",
+    "route-params",
+    "REJECT_UNKNOWN",
+  ),
+  TechLogVersionParams: routeSchema(
+    "TechLogVersionParams",
+    "route-params",
+    "REJECT_UNKNOWN",
+  ),
+  TechLogDocumentIdParams: routeSchema(
+    "TechLogDocumentIdParams",
+    "route-params",
+    "REJECT_UNKNOWN",
+  ),
+  TechLogPublicationEventIdParams: routeSchema(
+    "TechLogPublicationEventIdParams",
+    "route-params",
+    "REJECT_UNKNOWN",
+  ),
+  TechLogStudioSplat: routeSchema(
+    "TechLogStudioSplat",
+    "route-params",
+    "REJECT_UNKNOWN",
+  ),
+  TechLogHomeSearch: routeSchema(
+    "TechLogHomeSearch",
+    "route-search",
+    "STRIP_UNKNOWN",
+  ),
+  TechLogExploreSearch: routeSchema(
+    "TechLogExploreSearch",
+    "route-search",
+    "STRIP_UNKNOWN",
+  ),
+  TechLogExploreKindSearch: routeSchema(
+    "TechLogExploreKindSearch",
+    "route-search",
+    "STRIP_UNKNOWN",
+  ),
+  TechLogSearchQuery: routeSchema(
+    "TechLogSearchQuery",
+    "route-search",
+    "STRIP_UNKNOWN",
+  ),
+  TechLogCaseStateSearch: routeSchema(
+    "TechLogCaseStateSearch",
+    "route-search",
+    "STRIP_UNKNOWN",
+  ),
+});
+
 function chunkId(routeId: TechLogRouteId): string {
   return routeId === "NOT_FOUND"
     ? "route-not-found"
@@ -92,4 +166,5 @@ export const TECH_LOG_ROUTE_RUNTIME_CONTRACT = Object.freeze(
 export const TECH_LOG_ROUTE_CONTRACT = Object.freeze({
   routes: TECH_LOG_ROUTE_REGISTRY,
   routeRuntimeContracts: TECH_LOG_ROUTE_RUNTIME_CONTRACT,
+  schemas: TECH_LOG_ROUTE_SCHEMA_REGISTRY,
 });

src/features/tech-log/presentation/studio/components/document-editor-controller.ts

@@ -0,0 +1,14 @@
+import type {
+  WorkingCopy,
+  WorkingCopyInput,
+} from "../../../contracts/studio/contract.ts";
+import type { StudioEditorStatus } from "../use-studio.ts";
+
+export type DocumentEditorController = {
+  saved: WorkingCopy;
+  draft: WorkingCopyInput;
+  status: StudioEditorStatus;
+  update(patch: Partial<WorkingCopyInput>): void;
+  replace(draft: WorkingCopyInput): void;
+  save(): Promise<void>;
+};

src/features/tech-log/presentation/studio/components/document-editor-screen.tsx

@@ -7,7 +7,8 @@ import type {
   WorkingCopyInput,
 } from "../../../contracts/studio/contract.ts";
 import { createLocalId } from "../../../domain/studio/local-id.ts";
-import { DocumentEditor, type DocumentEditorController } from "./document-editor.tsx";
+import type { DocumentEditorController } from "./document-editor-controller.ts";
+import { DocumentEditor } from "./document-editor.tsx";
 import { GuardedStudioLink } from "./guarded-studio-link.tsx";
 import { useStudio, useStudioEditorSession } from "../use-studio.ts";
 

src/features/tech-log/presentation/studio/components/document-editor.tsx

@@ -1,11 +1,7 @@
 import { useRef, useState, type KeyboardEvent } from "react";
 
 import type { components } from "../../../contracts/studio/generated.ts";
-import type {
+import type { DocumentEditorController } from "./document-editor-controller.ts";
-  WorkingCopy,
-  WorkingCopyInput,
-} from "../../../contracts/studio/contract.ts";
-import type { StudioEditorStatus } from "../use-studio.ts";
 import { CaseFields } from "./case-fields.tsx";
 import { CommonDocumentFields } from "./common-document-fields.tsx";
 import { DocumentStatusRail } from "./document-status-rail.tsx";
@@ -15,15 +11,6 @@ import { ReferenceFields } from "./reference-fields.tsx";
 
 type CatalogEntry = components["schemas"]["CatalogEntry"];
 
-export type DocumentEditorController = {
-  saved: WorkingCopy;
-  draft: WorkingCopyInput;
-  status: StudioEditorStatus;
-  update(patch: Partial<WorkingCopyInput>): void;
-  replace(draft: WorkingCopyInput): void;
-  save(): Promise<void>;
-};
-
 export function DocumentEditor({ controller, catalog }: { controller: DocumentEditorController; catalog: CatalogEntry[] }) {
   const [tab, setTab] = useState<"EDIT" | "PREVIEW">("EDIT");
   const editTab = useRef<HTMLButtonElement>(null);

src/features/tech-log/presentation/studio/components/document-status-rail.tsx

@@ -1,4 +1,4 @@
-import type { DocumentEditorController } from "./document-editor.tsx";
+import type { DocumentEditorController } from "./document-editor-controller.ts";
 import { GuardedStudioLink } from "./guarded-studio-link.tsx";
 
 const labels = {

src/features/tech-log/presentation/studio/components/publication-event-preview-screen.tsx

@@ -0,0 +1,176 @@
+/* eslint-disable react-hooks/set-state-in-effect -- a changed event or retry intentionally enters a fresh loading state. */
+
+import { useEffect, useState } from "react";
+
+import {
+  isStudioGatewayError,
+  type StudioGatewayError,
+} from "../../../application/ports/studio-gateway-error.ts";
+import type { PublicationSnapshot } from "../../../contracts/studio/contract.ts";
+import type { EvidenceAsset } from "../../../domain/public-render-content.ts";
+import { PublicRecordRenderer } from "../../shared/public-render/public-record-renderer.tsx";
+import { GuardedStudioLink } from "./guarded-studio-link.tsx";
+import {
+  defaultPublicationFlowClasses,
+  type PublicationFlowClasses,
+} from "./publication-flow-classes.ts";
+import { useStudio } from "../use-studio.ts";
+
+const eventLabels = {
+  PUBLISHED: "게시",
+  REPUBLISHED: "재게시",
+  UNPUBLISHED: "게시 취소",
+} as const;
+
+function resolveEvidenceAsset(key: string): EvidenceAsset {
+  if (key !== "fetch-strategy-boundary") {
+    throw new Error(`Unknown local evidence asset: ${key}`);
+  }
+  return {
+    src: "/media/fetch-strategy-boundary.svg",
+    width: 1080,
+    height: 420,
+    triggerLabel: "Fetch Join과 Batch Fetch 비교 다이어그램 크게 보기",
+    dialogLabel: "Fetch Join과 Batch Fetch의 페이징 경계 확대",
+  };
+}
+
+function dateTime(value: string) {
+  return new Intl.DateTimeFormat("ko-KR", {
+    dateStyle: "long",
+    timeStyle: "short",
+    timeZone: "Asia/Seoul",
+  }).format(new Date(value));
+}
+
+export function PublicationEventPreviewScreen({
+  publicationEventId,
+  classes: styles = defaultPublicationFlowClasses,
+}: {
+  publicationEventId: string;
+  classes?: PublicationFlowClasses;
+}) {
+  const { gateway } = useStudio();
+  const [retry, setRetry] = useState(0);
+  const [state, setState] = useState<
+    | { status: "LOADING" }
+    | { status: "ERROR"; problem: StudioGatewayError | Error }
+    | { status: "READY"; snapshot: PublicationSnapshot }
+  >({ status: "LOADING" });
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let current = true;
+    setState({ status: "LOADING" });
+    void gateway
+      .getPublicationSnapshot(publicationEventId, {
+        signal: controller.signal,
+      })
+      .then(
+        (snapshot) => {
+          if (current) setState({ status: "READY", snapshot });
+        },
+        (error: unknown) => {
+          if (!current || controller.signal.aborted) return;
+          setState({
+            status: "ERROR",
+            problem:
+              error instanceof Error
+                ? error
+                : new Error("Snapshot을 불러오지 못했습니다."),
+          });
+        },
+      );
+    return () => {
+      current = false;
+      controller.abort();
+    };
+  }, [gateway, publicationEventId, retry]);
+
+  if (state.status === "LOADING") {
+    return (
+      <p className={styles.loading} role="status">
+        게시 Snapshot을 불러오는 중입니다.
+      </p>
+    );
+  }
+  if (state.status === "ERROR") {
+    const missing =
+      isStudioGatewayError(state.problem) &&
+      (state.problem.code === "PUBLICATION_EVENT_NOT_FOUND" ||
+        state.problem.code === "PUBLICATION_SNAPSHOT_NOT_FOUND");
+    if (missing) {
+      return (
+        <section className={styles.routeState}>
+          <p className={styles.eyebrow}>NOT FOUND</p>
+          <h1>게시 기록을 찾을 수 없습니다</h1>
+          <p>
+            이 이벤트는 현재 Studio 세션에 없거나 Snapshot을 소유하지
+            않습니다.
+          </p>
+          <GuardedStudioLink href="/studio/publications">
+            게시 기록으로 돌아가기
+          </GuardedStudioLink>
+        </section>
+      );
+    }
+    return (
+      <section className={styles.routeState} role="alert">
+        <p className={styles.eyebrow}>SNAPSHOT ERROR</p>
+        <h1>게시 Snapshot을 불러오지 못했습니다</h1>
+        <p>
+          {isStudioGatewayError(state.problem)
+            ? state.problem.problem.detail
+            : state.problem.message}
+        </p>
+        <button type="button" onClick={() => setRetry((value) => value + 1)}>
+          다시 시도
+        </button>
+      </section>
+    );
+  }
+
+  const { event, renderModel } = state.snapshot;
+  return (
+    <div className={styles.snapshotPage}>
+      <section
+        className={styles.snapshotToolbar}
+        aria-label="게시 Snapshot 정보"
+      >
+        <div>
+          <p className={styles.eyebrow}>IMMUTABLE SNAPSHOT</p>
+          <p className={styles.snapshotTitle}>게시 이벤트 시점의 공개 화면</p>
+        </div>
+        <dl>
+          <div>
+            <dt>이벤트</dt>
+            <dd>{eventLabels[event.type]}</dd>
+          </div>
+          <div>
+            <dt>게시 버전</dt>
+            <dd>v{event.publishedVersion}</dd>
+          </div>
+          <div>
+            <dt>발생 시각</dt>
+            <dd>
+              <time dateTime={event.occurredAt}>
+                {dateTime(event.occurredAt)}
+              </time>
+            </dd>
+          </div>
+        </dl>
+        <GuardedStudioLink href="/studio/publications">
+          게시 기록으로 돌아가기
+        </GuardedStudioLink>
+      </section>
+      <div className={styles.snapshotDocument}>
+        <PublicRecordRenderer
+          model={renderModel}
+          embedded
+          resolveEvidenceAsset={resolveEvidenceAsset}
+          resolvePublishedLabel={() => undefined}
+        />
+      </div>
+    </div>
+  );
+}

src/features/tech-log/presentation/studio/components/publication-list.tsx

@@ -0,0 +1,289 @@
+/* eslint-disable react-hooks/set-state-in-effect -- a changed history query intentionally enters a fresh loading state. */
+
+import { useEffect, useRef, useState, type FormEvent } from "react";
+
+import {
+  isStudioGatewayError,
+  type StudioGatewayError,
+} from "../../../application/ports/studio-gateway-error.ts";
+import type { ListPublicationsQuery } from "../../../application/ports/studio-gateway.ts";
+import type {
+  PublicationListItem,
+  PublicationPage,
+} from "../../../contracts/studio/contract.ts";
+import { createLocalId } from "../../../domain/studio/local-id.ts";
+import { GuardedStudioLink } from "./guarded-studio-link.tsx";
+import {
+  defaultPublicationFlowClasses,
+  type PublicationFlowClasses,
+} from "./publication-flow-classes.ts";
+import { UnpublishDialog } from "./unpublish-dialog.tsx";
+import { useStudio } from "../use-studio.ts";
+
+const eventLabels = {
+  PUBLISHED: "게시",
+  REPUBLISHED: "재게시",
+  UNPUBLISHED: "게시 취소",
+} as const;
+
+const kindLabels = {
+  CASE: "Case",
+  REFERENCE: "Reference",
+  QUESTION: "Question",
+} as const;
+
+function dateTime(value: string) {
+  return new Intl.DateTimeFormat("ko-KR", {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZone: "Asia/Seoul",
+  }).format(new Date(value));
+}
+
+function snapshotHref(item: PublicationListItem) {
+  if (
+    item.availableActions.includes("VIEW_SOURCE_SNAPSHOT") &&
+    item.event.sourcePublishedEventId
+  ) {
+    return `/studio/publications/${item.event.sourcePublishedEventId}/preview`;
+  }
+  if (item.availableActions.includes("VIEW_SNAPSHOT")) {
+    return `/studio/publications/${item.event.publicationEventId}/preview`;
+  }
+  return null;
+}
+
+export function PublicationList({
+  classes: styles = defaultPublicationFlowClasses,
+}: { classes?: PublicationFlowClasses } = {}) {
+  const studio = useStudio();
+  const [query, setQuery] = useState<ListPublicationsQuery>({ limit: 100 });
+  const [queryDraft, setQueryDraft] = useState("");
+  const [typeDraft, setTypeDraft] =
+    useState<ListPublicationsQuery["type"]>();
+  const [reload, setReload] = useState(0);
+  const [state, setState] = useState<
+    | { status: "LOADING" }
+    | { status: "ERROR"; problem: StudioGatewayError | Error }
+    | { status: "READY"; page: PublicationPage }
+  >({ status: "LOADING" });
+  const [selected, setSelected] = useState<PublicationListItem | null>(null);
+  const [pending, setPending] = useState(false);
+  const [dialogError, setDialogError] = useState("");
+  const [announcement, setAnnouncement] = useState("");
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let current = true;
+    setState({ status: "LOADING" });
+    void studio.gateway.listPublications(query, {
+      signal: controller.signal,
+    }).then(
+      (page) => {
+        if (current) setState({ status: "READY", page });
+      },
+      (error: unknown) => {
+        if (!current || controller.signal.aborted) return;
+        setState({
+          status: "ERROR",
+          problem:
+            error instanceof Error
+              ? error
+              : new Error("게시 기록을 불러오지 못했습니다."),
+        });
+      },
+    );
+    return () => {
+      current = false;
+      controller.abort();
+    };
+  }, [query, reload, studio.gateway]);
+
+  const applyFilter = (event: FormEvent) => {
+    event.preventDefault();
+    setQuery({
+      ...(queryDraft.trim() ? { q: queryDraft.trim().slice(0, 100) } : {}),
+      ...(typeDraft ? { type: typeDraft } : {}),
+      limit: 100,
+    });
+  };
+
+  const dismiss = () => {
+    setSelected(null);
+    setDialogError("");
+    queueMicrotask(() => triggerRef.current?.focus());
+  };
+
+  const confirmUnpublish = async () => {
+    if (
+      !selected ||
+      pending ||
+      !selected.availableActions.includes("UNPUBLISH")
+    ) {
+      return;
+    }
+    setPending(true);
+    setDialogError("");
+    try {
+      const result = await studio.gateway.unpublishPublication(
+        selected.publication.publicationId,
+        {
+          expectedPublicationRevision:
+            selected.publication.publicationRevision,
+        },
+        { idempotencyKey: createLocalId("studio-unpublish") },
+      );
+      setSelected(null);
+      setAnnouncement("게시를 취소했습니다.");
+      studio.setRequestAnnouncement("게시를 취소했습니다.");
+      setReload((value) => value + 1);
+    } catch (error) {
+      setDialogError(
+        isStudioGatewayError(error)
+          ? error.problem.detail
+          : "게시를 취소하지 못했습니다.",
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.heading}>
+        <p className={styles.eyebrow}>PUBLICATION EVENTS</p>
+        <h1>게시 기록</h1>
+        <p>
+          게시·재게시·게시 취소 이벤트와 각 시점의 Snapshot을 확인합니다.
+        </p>
+      </header>
+
+      <form className={styles.filters} onSubmit={applyFilter}>
+        <label>
+          <span>검색</span>
+          <input
+            value={queryDraft}
+            maxLength={100}
+            onChange={(event) => setQueryDraft(event.currentTarget.value)}
+            placeholder="제목 또는 요약"
+          />
+        </label>
+        <label>
+          <span>이벤트</span>
+          <select
+            value={typeDraft ?? ""}
+            onChange={(event) =>
+              setTypeDraft(
+                (event.currentTarget.value || undefined) as ListPublicationsQuery["type"],
+              )
+            }
+          >
+            <option value="">전체</option>
+            <option value="PUBLISHED">게시</option>
+            <option value="REPUBLISHED">재게시</option>
+            <option value="UNPUBLISHED">게시 취소</option>
+          </select>
+        </label>
+        <button type="submit">적용</button>
+      </form>
+
+      {announcement ? (
+        <p className={styles.success} role="status">
+          {announcement}
+        </p>
+      ) : null}
+      {state.status === "LOADING" ? (
+        <p className={styles.loading} role="status">
+          게시 기록을 불러오는 중입니다.
+        </p>
+      ) : null}
+      {state.status === "ERROR" ? (
+        <section className={styles.errorState} role="alert">
+          <h2>게시 기록을 불러오지 못했습니다</h2>
+          <p>
+            {isStudioGatewayError(state.problem)
+              ? state.problem.problem.detail
+              : state.problem.message}
+          </p>
+          <button type="button" onClick={() => setReload((value) => value + 1)}>
+            다시 시도
+          </button>
+        </section>
+      ) : null}
+      {state.status === "READY" && state.page.items.length === 0 ? (
+        <section className={styles.emptyState}>
+          <h2>조건에 맞는 게시 기록이 없습니다</h2>
+          <p>검색어 또는 이벤트 필터를 바꿔 보세요.</p>
+        </section>
+      ) : null}
+      {state.status === "READY" && state.page.items.length > 0 ? (
+        <ol className={styles.historyList}>
+          {state.page.items.map((item) => {
+            const href = snapshotHref(item);
+            const source = item.availableActions.includes(
+              "VIEW_SOURCE_SNAPSHOT",
+            );
+            const canUnpublish = item.availableActions.includes("UNPUBLISH");
+            return (
+              <li key={item.event.publicationEventId}>
+                <article className={styles.historyRow}>
+                  <p className={styles.eventType}>
+                    {eventLabels[item.event.type]}
+                  </p>
+                  <div className={styles.eventMain}>
+                    <p className={styles.kind}>
+                      {kindLabels[item.document.kind]} · v
+                      {item.event.publishedVersion}
+                    </p>
+                    <h2>{item.document.title || "제목 없는 작업본"}</h2>
+                    <p>
+                      이벤트: {eventLabels[item.event.type]} · 현재 상태:{" "}
+                      {item.publication.status === "PUBLISHED"
+                        ? "게시 중"
+                        : "게시 취소"}
+                    </p>
+                  </div>
+                  <time dateTime={item.event.occurredAt}>
+                    {dateTime(item.event.occurredAt)}
+                  </time>
+                  <div className={styles.rowActions}>
+                    {href ? (
+                      <GuardedStudioLink href={href}>
+                        {source ? "게시 취소 전 Snapshot 보기" : "Snapshot 보기"}
+                      </GuardedStudioLink>
+                    ) : null}
+                    {canUnpublish ? (
+                      <button
+                        type="button"
+                        aria-label={`${item.document.title || "제목 없는 작업본"} 게시 취소`}
+                        onClick={(event) => {
+                          triggerRef.current = event.currentTarget;
+                          setDialogError("");
+                          setSelected(item);
+                        }}
+                      >
+                        게시 취소
+                      </button>
+                    ) : null}
+                  </div>
+                </article>
+              </li>
+            );
+          })}
+        </ol>
+      ) : null}
+
+      <UnpublishDialog
+        item={selected}
+        pending={pending}
+        error={dialogError}
+        onDismiss={dismiss}
+        onConfirm={() => {
+          void confirmUnpublish();
+        }}
+        classes={styles}
+      />
+    </div>
+  );
+}

src/features/tech-log/presentation/studio/components/publish-screen.tsx

@@ -0,0 +1,403 @@
+/* eslint-disable react-hooks/set-state-in-effect -- a changed document or retry intentionally enters a fresh loading state. */
+
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  isStudioGatewayError,
+  type StudioGatewayError,
+} from "../../../application/ports/studio-gateway-error.ts";
+import type {
+  PreviewDetail,
+  WorkingCopyDetail,
+} from "../../../contracts/studio/contract.ts";
+import { deriveValidationState } from "../../../domain/studio/document-state.ts";
+import { createLocalId } from "../../../domain/studio/local-id.ts";
+import { GuardedStudioLink } from "./guarded-studio-link.tsx";
+import {
+  defaultPublicationFlowClasses,
+  type PublicationFlowClasses,
+} from "./publication-flow-classes.ts";
+import { useStudio } from "../use-studio.ts";
+import { WarningAcknowledgements } from "./warning-acknowledgements.tsx";
+
+type LoadState =
+  | { status: "LOADING" }
+  | { status: "ERROR"; problem: StudioGatewayError | Error }
+  | { status: "READY"; detail: WorkingCopyDetail; preview: PreviewDetail | null };
+
+function dateTime(value: string) {
+  return new Intl.DateTimeFormat("ko-KR", {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZone: "Asia/Seoul",
+  }).format(new Date(value));
+}
+
+function notFound(problem: StudioGatewayError | Error) {
+  return isStudioGatewayError(problem) && problem.code === "DOCUMENT_NOT_FOUND";
+}
+
+export function PublishScreen({
+  documentId,
+  classes: styles = defaultPublicationFlowClasses,
+}: {
+  documentId: string;
+  classes?: PublicationFlowClasses;
+}) {
+  const studio = useStudio();
+  const [attempt, setAttempt] = useState(0);
+  const [state, setState] = useState<LoadState>({ status: "LOADING" });
+  const [acknowledged, setAcknowledged] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [pending, setPending] = useState(false);
+  const [actionError, setActionError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let current = true;
+    setState({ status: "LOADING" });
+    setAcknowledged(new Set());
+    setActionError("");
+    setSuccess("");
+
+    void (async () => {
+      const detail = await studio.gateway.getDocument(documentId, {
+        signal: controller.signal,
+      });
+      const sameVersion =
+        detail.currentPublication?.status === "PUBLISHED" &&
+        detail.currentPublication.publishedVersion === detail.document.version;
+      let preview: PreviewDetail | null = null;
+      if (!sameVersion && detail.latestPreview) {
+        try {
+          preview = await studio.gateway.getCurrentPreview(documentId, {
+            signal: controller.signal,
+          });
+        } catch (error) {
+          if (
+            !(
+              isStudioGatewayError(error) &&
+              error.code === "PREVIEW_NOT_FOUND"
+            )
+          ) {
+            throw error;
+          }
+        }
+      }
+      if (current) setState({ status: "READY", detail, preview });
+    })().catch((error: unknown) => {
+      if (!current || controller.signal.aborted) return;
+      setState({
+        status: "ERROR",
+        problem:
+          error instanceof Error
+            ? error
+            : new Error("게시 정보를 불러오지 못했습니다."),
+      });
+    });
+
+    return () => {
+      current = false;
+      controller.abort();
+    };
+  }, [attempt, documentId, studio.gateway]);
+
+  const ready = state.status === "READY" ? state : null;
+  const validation = ready?.detail.currentValidation ?? null;
+  const warnings = useMemo(
+    () =>
+      validation?.issues.filter((issue) => issue.severity === "WARNING") ?? [],
+    [validation],
+  );
+
+  if (state.status === "LOADING") {
+    return (
+      <p className={styles.loading} role="status">
+        게시 준비 정보를 불러오는 중입니다.
+      </p>
+    );
+  }
+  if (state.status === "ERROR" && notFound(state.problem)) {
+    return (
+      <section className={styles.routeState}>
+        <p className={styles.eyebrow}>NOT FOUND</p>
+        <h1>작업본을 찾을 수 없습니다</h1>
+        <p>이 작업본은 현재 Studio 세션에 없습니다.</p>
+        <GuardedStudioLink href="/studio/documents">
+          작업본으로 돌아가기
+        </GuardedStudioLink>
+      </section>
+    );
+  }
+  if (state.status === "ERROR") {
+    return (
+      <section className={styles.routeState} role="alert">
+        <p className={styles.eyebrow}>PUBLISH ERROR</p>
+        <h1>게시 정보를 불러오지 못했습니다</h1>
+        <p>
+          {isStudioGatewayError(state.problem)
+            ? state.problem.problem.detail
+            : state.problem.message}
+        </p>
+        <button type="button" onClick={() => setAttempt((value) => value + 1)}>
+          다시 시도
+        </button>
+      </section>
+    );
+  }
+
+  const { detail, preview } = state;
+  const { document, currentPublication } = detail;
+  const sameVersion =
+    currentPublication?.status === "PUBLISHED" &&
+    currentPublication.publishedVersion === document.version;
+  const validationMatches =
+    validation !== null &&
+    deriveValidationState({ ...detail, now: studio.now() }).freshness ===
+      "CURRENT";
+  const validationAllowsPreview =
+    validationMatches && validation?.status !== "INVALID";
+  const previewIsCurrent =
+    preview?.state === "CURRENT" &&
+    preview.preview.previewVersion === document.version &&
+    preview.currentValidationId === validation?.validationId;
+  const warningsDone = warnings.every((warning) =>
+    acknowledged.has(warning.code),
+  );
+  const canPublish =
+    validationAllowsPreview && previewIsCurrent && warningsDone && !pending;
+  const actionLabel = currentPublication ? "다시 게시" : "게시";
+
+  const toggleWarning = (code: string, checked: boolean) => {
+    setAcknowledged((current) => {
+      const next = new Set(current);
+      if (checked) next.add(code);
+      else next.delete(code);
+      return next;
+    });
+  };
+
+  const publish = async () => {
+    if (!canPublish || !validation || !preview) return;
+    setPending(true);
+    setActionError("");
+    setSuccess("");
+    try {
+      const result = await studio.gateway.publishDocument(
+        document.id,
+        {
+          expectedVersion: document.version,
+          validationId: validation.validationId,
+          previewId: preview.preview.previewId,
+          acknowledgedWarningCodes: [...acknowledged].sort(),
+        },
+        { idempotencyKey: createLocalId("studio-publish") },
+      );
+      setSuccess("게시했습니다.");
+      studio.setRequestAnnouncement("게시했습니다.");
+      studio.clearEditor();
+      studio.navigateInternal(
+        `/studio/publications/${result.event.publicationEventId}/preview`,
+      );
+    } catch (error) {
+      setActionError(
+        isStudioGatewayError(error)
+          ? error.problem.detail
+          : "게시하지 못했습니다. 다시 시도해 주세요.",
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  if (sameVersion && currentPublication) {
+    return (
+      <div className={styles.page}>
+        <header className={styles.heading}>
+          <p className={styles.eyebrow}>PUBLICATION</p>
+          <h1>게시 준비</h1>
+          <p>{document.title}</p>
+        </header>
+        <section
+          className={styles.gateReady}
+          aria-labelledby="same-version-title"
+        >
+          <h2 id="same-version-title">현재 버전이 이미 게시되어 있습니다</h2>
+          <p>
+            저장 버전 v{document.version}과 게시 버전이 같습니다. 새 게시
+            이벤트를 만들지 않습니다.
+          </p>
+          <GuardedStudioLink
+            href={`/studio/publications/${currentPublication.latestEventId}/preview`}
+          >
+            현재 게시 Snapshot 보기
+          </GuardedStudioLink>
+        </section>
+      </div>
+    );
+  }
+
+  let blocked: {
+    title: string;
+    detail: string;
+    href: string;
+    label: string;
+  } | null = null;
+  if (!validation) {
+    blocked = {
+      title: "저장 버전 검증이 필요합니다",
+      detail: "게시 전에 현재 저장 버전을 검증해 주세요.",
+      href: `/studio/documents/${document.id}/validation`,
+      label: "검증하기",
+    };
+  } else if (!validationMatches) {
+    blocked = {
+      title: "검증 결과가 현재 버전과 다릅니다",
+      detail: "현재 저장 버전으로 다시 검증해야 합니다.",
+      href: `/studio/documents/${document.id}/validation`,
+      label: "다시 검증",
+    };
+  } else if (validation.status === "INVALID") {
+    blocked = {
+      title: "검증 오류를 먼저 수정해야 합니다",
+      detail: `${validation.issues.filter((issue) => issue.severity === "ERROR").length}개의 오류가 게시를 막고 있습니다.`,
+      href: `/studio/documents/${document.id}/validation`,
+      label: "검증 오류 보기",
+    };
+  } else if (!preview) {
+    blocked = {
+      title: "Public Preview가 필요합니다",
+      detail: "검증된 저장 버전의 공개 레이아웃을 먼저 확인해 주세요.",
+      href: `/studio/documents/${document.id}/preview`,
+      label: "Public Preview 만들기",
+    };
+  } else if (!previewIsCurrent) {
+    blocked = {
+      title:
+        preview.state === "EXPIRED"
+          ? "Public Preview가 만료되었습니다"
+          : "Public Preview가 오래되었습니다",
+      detail: "현재 검증과 저장 버전으로 Preview를 다시 만들어야 합니다.",
+      href: `/studio/documents/${document.id}/preview`,
+      label: "Public Preview 다시 만들기",
+    };
+  }
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.heading}>
+        <p className={styles.eyebrow}>PUBLICATION</p>
+        <h1>게시 준비</h1>
+        <p>{document.title || "제목 없는 작업본"}</p>
+      </header>
+
+      <section className={styles.summary} aria-label="게시 준비 요약">
+        <dl>
+          <div>
+            <dt>저장 버전</dt>
+            <dd>v{document.version}</dd>
+          </div>
+          <div>
+            <dt>검증</dt>
+            <dd>
+              {validation
+                ? `${validation.status} · v${validation.validatedVersion}`
+                : "실행 전"}
+            </dd>
+          </div>
+          <div>
+            <dt>Public Preview</dt>
+            <dd>
+              {preview
+                ? `${preview.state} · v${preview.preview.previewVersion}`
+                : "없음"}
+            </dd>
+          </div>
+          <div>
+            <dt>현재 게시</dt>
+            <dd>
+              {currentPublication
+                ? `${currentPublication.status} · v${currentPublication.publishedVersion}`
+                : "게시 전"}
+            </dd>
+          </div>
+        </dl>
+      </section>
+
+      <section
+        className={styles.changeSummary}
+        aria-labelledby="change-summary-title"
+      >
+        <p className={styles.eyebrow}>CHANGE SUMMARY</p>
+        <h2 id="change-summary-title">변경 요약</h2>
+        <p>
+          {currentPublication
+            ? `게시 버전 v${currentPublication.publishedVersion}에서 저장 버전 v${document.version}으로 반영합니다.`
+            : `저장 버전 v${document.version}을 처음 게시합니다.`}
+        </p>
+        {preview ? (
+          <p>
+            Preview 만료:{" "}
+            <time dateTime={preview.preview.expiresAt}>
+              {dateTime(preview.preview.expiresAt)}
+            </time>
+          </p>
+        ) : null}
+      </section>
+
+      {blocked ? (
+        <section
+          className={styles.blocked}
+          aria-labelledby="publish-blocked-title"
+        >
+          <h2 id="publish-blocked-title">{blocked.title}</h2>
+          <p>{blocked.detail}</p>
+          <GuardedStudioLink href={blocked.href}>
+            {blocked.label}
+          </GuardedStudioLink>
+        </section>
+      ) : (
+        <section
+          className={styles.publishAction}
+          aria-labelledby="publish-action-title"
+        >
+          <h2 id="publish-action-title">{actionLabel}</h2>
+          <WarningAcknowledgements
+            warnings={warnings}
+            acknowledged={acknowledged}
+            onToggle={toggleWarning}
+            classes={styles}
+          />
+          {actionError ? (
+            <p className={styles.error} role="alert">
+              {actionError}
+            </p>
+          ) : null}
+          {success ? (
+            <p className={styles.success} role="status">
+              {success}
+            </p>
+          ) : null}
+          <div className={styles.actions}>
+            <GuardedStudioLink
+              href={`/studio/documents/${document.id}/preview`}
+            >
+              Preview로 돌아가기
+            </GuardedStudioLink>
+            <button
+              type="button"
+              disabled={!canPublish}
+              onClick={() => {
+                void publish();
+              }}
+            >
+              {pending ? "게시 중…" : actionLabel}
+            </button>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}

src/features/tech-log/presentation/studio/components/unpublish-dialog.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useId, useRef, type KeyboardEvent } from "react";
+
+import type { PublicationListItem } from "../../../contracts/studio/contract.ts";
+import {
+  defaultPublicationFlowClasses,
+  type PublicationFlowClasses,
+} from "./publication-flow-classes.ts";
+
+export function UnpublishDialog({
+  item,
+  pending,
+  error,
+  onDismiss,
+  onConfirm,
+  classes: styles = defaultPublicationFlowClasses,
+}: {
+  item: PublicationListItem | null;
+  pending: boolean;
+  error: string;
+  onDismiss(): void;
+  onConfirm(): void;
+  classes?: PublicationFlowClasses;
+}) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  const titleId = useId();
+  const descriptionId = useId();
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (item && !dialog.open) {
+      dialog.showModal();
+      cancelRef.current?.focus();
+    } else if (!item && dialog.open) {
+      dialog.close();
+    }
+  }, [item]);
+
+  useEffect(
+    () => () => {
+      if (dialogRef.current?.open) dialogRef.current.close();
+    },
+    [],
+  );
+
+  const trapFocus = (event: KeyboardEvent<HTMLDialogElement>) => {
+    if (event.key !== "Tab") return;
+    const controls = Array.from(
+      event.currentTarget.querySelectorAll<HTMLElement>(
+        "button:not([disabled])",
+      ),
+    );
+    if (!controls.length) return;
+    const first = controls[0];
+    const last = controls.at(-1)!;
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className={styles.dialog}
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      onCancel={(event) => {
+        event.preventDefault();
+        if (!pending) onDismiss();
+      }}
+      onKeyDown={trapFocus}
+    >
+      <div className={styles.dialogBody}>
+        <p className={styles.eyebrow}>UNPUBLISH</p>
+        <h2 id={titleId}>게시를 취소할까요?</h2>
+        <p id={descriptionId}>
+          {item?.document.title ?? "선택한 기록"}의 Studio 게시 상태를 중단하고
+          게시 취소 이벤트를 남깁니다.
+        </p>
+        <div className={styles.preservedNote}>
+          <strong>작업본과 이전 Snapshot은 보존됩니다.</strong>
+          <p>
+            현재 Mock에서는 기존 Public 사이트와 검색 결과를 변경하지 않습니다.
+          </p>
+        </div>
+        {error ? (
+          <p className={styles.error} role="alert">
+            {error}
+          </p>
+        ) : null}
+        <div className={styles.dialogActions}>
+          <button
+            ref={cancelRef}
+            type="button"
+            disabled={pending}
+            onClick={onDismiss}
+          >
+            계속 게시
+          </button>
+          <button type="button" disabled={pending} onClick={onConfirm}>
+            {pending ? "취소 처리 중…" : "게시 취소 확인"}
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+}

src/features/tech-log/presentation/studio/components/validation-report.tsx

@@ -39,7 +39,7 @@ export function ValidationReport({
   report: ValidationReportModel;
   current: boolean;
 }) {
-  const issues = report.issues.toSorted((left, right) => {
+  const issues = [...report.issues].sort((left, right) => {
     const rank = { ERROR: 0, WARNING: 1 } as const;
     return rank[left.severity] - rank[right.severity];
   });

src/features/tech-log/presentation/studio/components/warning-acknowledgements.tsx

@@ -0,0 +1,64 @@
+import { useId } from "react";
+
+import type { components } from "../../../contracts/studio/generated.ts";
+import {
+  defaultPublicationFlowClasses,
+  type PublicationFlowClasses,
+} from "./publication-flow-classes.ts";
+
+type ValidationIssue = components["schemas"]["ValidationIssue"];
+
+export function WarningAcknowledgements({
+  warnings,
+  acknowledged,
+  onToggle,
+  classes: styles = defaultPublicationFlowClasses,
+}: {
+  warnings: ValidationIssue[];
+  acknowledged: ReadonlySet<string>;
+  onToggle(code: string, checked: boolean): void;
+  classes?: PublicationFlowClasses;
+}) {
+  const groupId = useId();
+
+  if (warnings.length === 0) {
+    return <p className={styles.noWarnings}>확인할 경고가 없습니다.</p>;
+  }
+
+  return (
+    <fieldset
+      className={styles.warningGroup}
+      aria-describedby={`${groupId}-description`}
+    >
+      <legend>게시 전 경고 확인</legend>
+      <p id={`${groupId}-description`}>
+        현재 검증의 경고를 모두 확인해야 게시할 수 있습니다.
+      </p>
+      <div className={styles.warningList}>
+        {warnings.map((warning, index) => {
+          const inputId = `${groupId}-warning-${index}`;
+          return (
+            <label
+              className={styles.warningItem}
+              htmlFor={inputId}
+              key={`${warning.code}:${warning.path}`}
+            >
+              <input
+                id={inputId}
+                type="checkbox"
+                checked={acknowledged.has(warning.code)}
+                onChange={(event) =>
+                  onToggle(warning.code, event.currentTarget.checked)
+                }
+              />
+              <span>
+                <strong>{warning.code}</strong>
+                <small>{warning.message}</small>
+              </span>
+            </label>
+          );
+        })}
+      </div>
+    </fieldset>
+  );
+}

src/features/tech-log/presentation/studio/pages/document-publish-page.tsx

@@ -0,0 +1,8 @@
+import { useRouteInput } from "../../../../../presentation/routes/route-input.tsx";
+import { PublishScreen } from "../components/publish-screen.tsx";
+
+export function DocumentPublishPage() {
+  const { params } =
+    useRouteInput<"TECH_LOG_STUDIO_DOCUMENT_PUBLISH">();
+  return <PublishScreen documentId={String(params.id)} />;
+}

src/features/tech-log/presentation/studio/pages/publication-preview-page.tsx

@@ -0,0 +1,12 @@
+import { useRouteInput } from "../../../../../presentation/routes/route-input.tsx";
+import { PublicationEventPreviewScreen } from "../components/publication-event-preview-screen.tsx";
+
+export function PublicationPreviewPage() {
+  const { params } =
+    useRouteInput<"TECH_LOG_STUDIO_PUBLICATION_PREVIEW">();
+  return (
+    <PublicationEventPreviewScreen
+      publicationEventId={String(params.publicationEventId)}
+    />
+  );
+}

src/features/tech-log/presentation/studio/pages/publications-page.tsx

@@ -0,0 +1,5 @@
+import { PublicationList } from "../components/publication-list.tsx";
+
+export function PublicationsPage() {
+  return <PublicationList />;
+}

src/features/tech-log/presentation/tech-log-route-runtime.tsx

@@ -0,0 +1,234 @@
+import {
+  lazy,
+  type ComponentType,
+  type LazyExoticComponent,
+  type ReactNode,
+} from "react";
+import { Outlet } from "react-router-dom";
+
+import {
+  TECH_LOG_ROUTE_RUNTIME_CONTRACT,
+  type TechLogRouteId,
+} from "../contracts/tech-log-route-contract.ts";
+import { PublicShell } from "./public/public-shell.tsx";
+import { StudioShell } from "./studio/studio-shell.tsx";
+
+type RouteRuntime = Readonly<{
+  moduleId: string;
+  Component: LazyExoticComponent<ComponentType>;
+}>;
+
+function runtime(
+  routeId: TechLogRouteId,
+  load: () => Promise<{ default: ComponentType }>,
+): RouteRuntime {
+  return Object.freeze({
+    moduleId: TECH_LOG_ROUTE_RUNTIME_CONTRACT[routeId].moduleId,
+    Component: lazy(load),
+  });
+}
+
+function routeModule<Module, Key extends keyof Module>(
+  load: () => Promise<Module>,
+  key: Key,
+): () => Promise<{ default: Extract<Module[Key], ComponentType> }> {
+  return async () => {
+    const module = await load();
+    return { default: module[key] as Extract<Module[Key], ComponentType> };
+  };
+}
+
+export const TECH_LOG_ROUTE_RUNTIME = Object.freeze({
+  TECH_LOG_HOME: runtime(
+    "TECH_LOG_HOME",
+    routeModule(() => import("./public/pages/home-page.tsx"), "HomePage"),
+  ),
+  TECH_LOG_EXPLORE: runtime(
+    "TECH_LOG_EXPLORE",
+    routeModule(
+      () => import("./public/pages/explore-page.tsx"),
+      "ExplorePage",
+    ),
+  ),
+  TECH_LOG_EXPLORE_KIND: runtime(
+    "TECH_LOG_EXPLORE_KIND",
+    routeModule(
+      () => import("./public/pages/explore-kind-page.tsx"),
+      "ExploreKindPage",
+    ),
+  ),
+  TECH_LOG_CASE: runtime(
+    "TECH_LOG_CASE",
+    routeModule(() => import("./public/pages/case-page.tsx"), "CasePage"),
+  ),
+  TECH_LOG_REFERENCE: runtime(
+    "TECH_LOG_REFERENCE",
+    routeModule(
+      () => import("./public/pages/reference-page.tsx"),
+      "ReferencePage",
+    ),
+  ),
+  TECH_LOG_QUESTION: runtime(
+    "TECH_LOG_QUESTION",
+    routeModule(
+      () => import("./public/pages/question-page.tsx"),
+      "QuestionPage",
+    ),
+  ),
+  TECH_LOG_TOPIC: runtime(
+    "TECH_LOG_TOPIC",
+    routeModule(() => import("./public/pages/topic-page.tsx"), "TopicPage"),
+  ),
+  TECH_LOG_PROJECTS: runtime(
+    "TECH_LOG_PROJECTS",
+    routeModule(
+      () => import("./public/pages/projects-page.tsx"),
+      "ProjectsPage",
+    ),
+  ),
+  TECH_LOG_PROJECT: runtime(
+    "TECH_LOG_PROJECT",
+    routeModule(
+      () => import("./public/pages/project-overview-page.tsx"),
+      "ProjectOverviewPage",
+    ),
+  ),
+  TECH_LOG_PROJECT_RECORDS: runtime(
+    "TECH_LOG_PROJECT_RECORDS",
+    routeModule(
+      () => import("./public/pages/project-records-page.tsx"),
+      "ProjectRecordsPage",
+    ),
+  ),
+  TECH_LOG_PROJECT_DECISIONS: runtime(
+    "TECH_LOG_PROJECT_DECISIONS",
+    routeModule(
+      () => import("./public/pages/project-decisions-page.tsx"),
+      "ProjectDecisionsPage",
+    ),
+  ),
+  TECH_LOG_PROJECT_ACTIVITY: runtime(
+    "TECH_LOG_PROJECT_ACTIVITY",
+    routeModule(
+      () => import("./public/pages/project-activity-page.tsx"),
+      "ProjectActivityPage",
+    ),
+  ),
+  TECH_LOG_RELEASES: runtime(
+    "TECH_LOG_RELEASES",
+    routeModule(
+      () => import("./public/pages/releases-page.tsx"),
+      "ReleasesPage",
+    ),
+  ),
+  TECH_LOG_RELEASE: runtime(
+    "TECH_LOG_RELEASE",
+    routeModule(
+      () => import("./public/pages/release-page.tsx"),
+      "ReleasePage",
+    ),
+  ),
+  TECH_LOG_PROFILE: runtime(
+    "TECH_LOG_PROFILE",
+    routeModule(
+      () => import("./public/pages/profile-page.tsx"),
+      "ProfilePage",
+    ),
+  ),
+  TECH_LOG_SEARCH: runtime(
+    "TECH_LOG_SEARCH",
+    routeModule(() => import("./public/pages/search-page.tsx"), "SearchPage"),
+  ),
+  TECH_LOG_STUDIO_HOME: runtime(
+    "TECH_LOG_STUDIO_HOME",
+    routeModule(
+      () => import("./studio/pages/studio-home-page.tsx"),
+      "StudioHomePage",
+    ),
+  ),
+  TECH_LOG_STUDIO_DOCUMENTS: runtime(
+    "TECH_LOG_STUDIO_DOCUMENTS",
+    routeModule(
+      () => import("./studio/pages/documents-page.tsx"),
+      "DocumentsPage",
+    ),
+  ),
+  TECH_LOG_STUDIO_DOCUMENT_NEW: runtime(
+    "TECH_LOG_STUDIO_DOCUMENT_NEW",
+    routeModule(
+      () => import("./studio/pages/new-document-page.tsx"),
+      "NewDocumentPage",
+    ),
+  ),
+  TECH_LOG_STUDIO_DOCUMENT_EDIT: runtime(
+    "TECH_LOG_STUDIO_DOCUMENT_EDIT",
+    routeModule(
+      () => import("./studio/pages/document-edit-page.tsx"),
+      "DocumentEditPage",
+    ),
+  ),
+  TECH_LOG_STUDIO_DOCUMENT_VALIDATION: runtime(
+    "TECH_LOG_STUDIO_DOCUMENT_VALIDATION",
+    routeModule(
+      () => import("./studio/pages/document-validation-page.tsx"),
+      "DocumentValidationPage",
+    ),
+  ),
+  TECH_LOG_STUDIO_DOCUMENT_PREVIEW: runtime(
+    "TECH_LOG_STUDIO_DOCUMENT_PREVIEW",
+    routeModule(
+      () => import("./studio/pages/document-preview-page.tsx"),
+      "DocumentPreviewPage",
+    ),
+  ),
+  TECH_LOG_STUDIO_DOCUMENT_PUBLISH: runtime(
+    "TECH_LOG_STUDIO_DOCUMENT_PUBLISH",
+    routeModule(
+      () => import("./studio/pages/document-publish-page.tsx"),
+      "DocumentPublishPage",
+    ),
+  ),
+  TECH_LOG_STUDIO_PUBLICATIONS: runtime(
+    "TECH_LOG_STUDIO_PUBLICATIONS",
+    routeModule(
+      () => import("./studio/pages/publications-page.tsx"),
+      "PublicationsPage",
+    ),
+  ),
+  TECH_LOG_STUDIO_PUBLICATION_PREVIEW: runtime(
+    "TECH_LOG_STUDIO_PUBLICATION_PREVIEW",
+    routeModule(
+      () => import("./studio/pages/publication-preview-page.tsx"),
+      "PublicationPreviewPage",
+    ),
+  ),
+  TECH_LOG_STUDIO_NOT_FOUND: runtime(
+    "TECH_LOG_STUDIO_NOT_FOUND",
+    routeModule(
+      () => import("./studio/pages/studio-not-found-page.tsx"),
+      "StudioNotFoundPage",
+    ),
+  ),
+  NOT_FOUND: runtime(
+    "NOT_FOUND",
+    routeModule(
+      () => import("./public/pages/public-not-found-page.tsx"),
+      "PublicNotFoundPage",
+    ),
+  ),
+}) satisfies Readonly<Record<TechLogRouteId, RouteRuntime>>;
+
+export const TECH_LOG_ROUTE_LAYOUTS: Readonly<
+  Record<"PUBLIC" | "STUDIO", ReactNode>
+> = Object.freeze({
+  PUBLIC: (
+    <PublicShell>
+      <Outlet />
+    </PublicShell>
+  ),
+  STUDIO: (
+    <StudioShell>
+      <Outlet />
+    </StudioShell>
+  ),
+});

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

@@ -1,79 +0,0 @@
-import { useState } from "react";
-import { useLocation } from "react-router-dom";
-
-import { PageHeader } from "../design-system/index.ts";
-import { useSession } from "../providers/session-provider.tsx";
-
-export default function AuthExamplePage() {
-  const location = useLocation();
-  const { sessionState, beginSignIn, signOut, recover } = useSession();
-  const [pending, setPending] = useState(false);
-  const [failed, setFailed] = useState(false);
-
-  async function execute(action: () => Promise<unknown>): Promise<void> {
-    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/platform-overview-page.tsx

@@ -1,484 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { HTTP_EXECUTION_CEILINGS } from "../../contracts/external-contract-runtime.ts";
-import { SERVER_STATE_PROFILES } from "../../contracts/server-state.ts";
-import {
-  COMPOSED_CONTRACT_CONTRIBUTIONS,
-  EXPECTED_CONTRACT_SET_PACKAGES,
-} from "../../features/installed-contract-contributions.ts";
-import { ROUTE_REGISTRY } from "../../features/installed-feature-contracts.ts";
-import type {
-  RuntimeCapabilityId,
-  RuntimeCapabilityStatus,
-} from "../../contracts/runtime-capabilities.ts";
-import {
-  Badge,
-  Card,
-  DataTable,
-  EmptySurface,
-  PageHeader,
-  type DataTableColumn,
-} from "../design-system/index.ts";
-import { useApplication } from "../providers/application-provider.tsx";
-
-/**
- * Every number and row on this page is read from an installed registry at
- * render time. Nothing is transcribed by hand, so deleting a feature removes
- * its rows and the page keeps describing what the repository actually is.
- */
-
-function kilobytes(bytes: number): string {
-  if (bytes === 0) return "없음";
-  if (bytes >= 1_048_576) return `${bytes / 1_048_576} MiB`;
-  return `${bytes / 1024} KiB`;
-}
-
-function seconds(milliseconds: number): string {
-  return milliseconds < 1000
-    ? `${milliseconds}ms`
-    : `${milliseconds / 1000}초`;
-}
-
-function Metric({
-  label,
-  value,
-  hint,
-}: Readonly<{ label: string; value: string; hint?: string }>) {
-  return (
-    <div className="platform-metric">
-      <dt>{label}</dt>
-      <dd>
-        <span className="platform-metric__value">{value}</span>
-        {hint ? <span className="platform-metric__hint">{hint}</span> : null}
-      </dd>
-    </div>
-  );
-}
-
-type RouteRow = (typeof ROUTE_REGISTRY)[keyof typeof ROUTE_REGISTRY];
-
-const ROUTE_COLUMNS: readonly DataTableColumn<RouteRow>[] = Object.freeze([
-  {
-    id: "routeId",
-    header: "라우트",
-    cell: (row) => <code>{row.routeId}</code>,
-  },
-  { id: "path", header: "경로", cell: (row) => <code>{row.path}</code> },
-  {
-    id: "access",
-    header: "접근",
-    cell: (row) => (
-      <Badge variant={row.access === "public" ? "success" : "warning"}>
-        {row.access}
-      </Badge>
-    ),
-  },
-  {
-    id: "schemas",
-    header: "입력 스키마",
-    cell: (row) =>
-      [row.paramsSchema, row.searchSchema].filter(Boolean).join(" · ") || "없음",
-  },
-  {
-    id: "chunkId",
-    header: "청크",
-    cell: (row) => <code>{row.chunkId}</code>,
-  },
-]);
-
-type OperationRow = Readonly<{
-  operationId: string;
-  method: string;
-  pathTemplate: string;
-  retrySemantics: string;
-  retryBudget: number;
-  totalDeadlineMs: number;
-  requestByteLimit: number;
-  responseByteLimit: number;
-  effect: string;
-  recovery: string;
-}>;
-
-const OPERATION_COLUMNS: readonly DataTableColumn<OperationRow>[] =
-  Object.freeze([
-    {
-      id: "operationId",
-      header: "오퍼레이션",
-      cell: (row) => (
-        <>
-          <code>{row.operationId}</code>
-          <span className="platform-operation__path">
-            {row.method} {row.pathTemplate}
-          </span>
-        </>
-      ),
-    },
-    {
-      id: "retry",
-      header: "재시도",
-      cell: (row) => (
-        <>
-          <Badge variant={row.retrySemantics === "SAFE" ? "success" : "warning"}>
-            {row.retrySemantics}
-          </Badge>
-          <span className="platform-operation__path">
-            예산 {row.retryBudget}회
-          </span>
-        </>
-      ),
-    },
-    {
-      id: "effect",
-      header: "효과 확정성",
-      cell: (row) => row.effect,
-    },
-    {
-      id: "recovery",
-      header: "복구",
-      cell: (row) => row.recovery,
-    },
-    {
-      id: "budget",
-      header: "예산",
-      cell: (row) => (
-        <>
-          <span className="platform-operation__path">
-            요청 {kilobytes(row.requestByteLimit)} · 응답{" "}
-            {kilobytes(row.responseByteLimit)}
-          </span>
-          <span className="platform-operation__path">
-            마감 {seconds(row.totalDeadlineMs)}
-          </span>
-        </>
-      ),
-    },
-  ]);
-
-type ProfileRow = (typeof SERVER_STATE_PROFILES)[keyof typeof SERVER_STATE_PROFILES];
-
-const PROFILE_COLUMNS: readonly DataTableColumn<ProfileRow>[] = Object.freeze([
-  {
-    id: "profileId",
-    header: "프로파일",
-    cell: (row) => <code>{row.profileId}</code>,
-  },
-  { id: "stale", header: "stale", cell: (row) => seconds(row.staleTimeMs) },
-  { id: "gc", header: "gc", cell: (row) => seconds(row.gcTimeMs) },
-  {
-    id: "refetch",
-    header: "재조회",
-    cell: (row) =>
-      [
-        row.refetchOnMount === "always"
-          ? "mount(always)"
-          : row.refetchOnMount && "mount",
-        row.refetchOnFocus && "focus",
-        row.refetchOnReconnect && "reconnect",
-      ]
-        .filter(Boolean)
-        .join(" · "),
-  },
-  {
-    id: "budget",
-    header: "결과 예산",
-    cell: (row) =>
-      `${row.maxResultItems}건 · ${kilobytes(row.maxEstimatedResultBytes)}`,
-  },
-]);
-
-const CAPABILITY_COPY: Readonly<
-  Record<RuntimeCapabilityId, Readonly<{ label: string; description: string }>>
-> = Object.freeze({
-  REALTIME: Object.freeze({
-    label: "실시간 수신",
-    description:
-      "WebSocket, SSE, 경계 폴링 런타임은 구현되어 있습니다. 제품 기여물이 엔드포인트와 이벤트 서술자를 제공해야 설치됩니다.",
-  }),
-  WEB_WORKER: Object.freeze({
-    label: "웹 워커",
-    description:
-      "워커 실행 계약과 전용 타입 프로젝트가 준비되어 있습니다. 프로파일링으로 확인된 CPU 작업이 있어야 설치됩니다.",
-  }),
-  SERVICE_WORKER: Object.freeze({
-    label: "서비스 워커",
-    description:
-      "참조 런타임과 두 단계 빌드가 준비되어 있습니다. 설치하면 검증된 정적 자산 캐시와 등록 해제 경로가 함께 켜집니다.",
-  }),
-  OFFLINE_COMMANDS: Object.freeze({
-    label: "오프라인 명령",
-    description:
-      "명령 큐 상태 기계가 준비되어 있습니다. 복구 서술자를 가진 KEYED 오퍼레이션이 있어야 설치됩니다.",
-  }),
-});
-
-/**
- * A capability that was never selected and one an operator switched off look
- * identical if both are reported as "off". The snapshot separates them, and so
- * does this badge.
- */
-function capabilityBadge(
-  status: RuntimeCapabilityStatus,
-): Readonly<{ text: string; variant: "success" | "warning" | "neutral" }> {
-  if (status.selected === 0) return { text: "미선택", variant: "neutral" };
-  if (status.active === 0) {
-    return { text: "운영자가 비활성화함", variant: "warning" };
-  }
-  return { text: `활성 (${status.active})`, variant: "success" };
-}
-
-function buildOperationRows(): readonly OperationRow[] {
-  return Object.freeze(
-    [...COMPOSED_CONTRACT_CONTRIBUTIONS.httpByOperationId.values()].map(
-      (installed) => {
-        const { contract, frontend } = installed;
-        return Object.freeze({
-          operationId: contract.operationId,
-          method: contract.method,
-          pathTemplate: contract.pathTemplate,
-          retrySemantics: contract.retrySemantics,
-          retryBudget: frontend.retryBudget,
-          totalDeadlineMs: frontend.totalDeadlineMs,
-          requestByteLimit: frontend.requestByteLimit,
-          responseByteLimit: frontend.responseByteLimit,
-          effect:
-            contract.commandEffect === null
-              ? "해당 없음"
-              : contract.commandEffect.successEffect,
-          recovery:
-            contract.commandRecovery === null
-              ? "해당 없음"
-              : contract.commandRecovery.mode,
-        });
-      },
-    ),
-  );
-}
-
-export default function PlatformOverviewPage() {
-  const { runtime } = useApplication();
-  const [release, setRelease] = useState<
-    Awaited<ReturnType<typeof runtime.getReleaseSummary>> | null
-  >(null);
-
-  useEffect(() => {
-    let active = true;
-    void runtime.getReleaseSummary().then((summary) => {
-      if (active) setRelease(summary);
-    });
-    return () => {
-      active = false;
-    };
-  }, [runtime]);
-
-  const routes = Object.values(ROUTE_REGISTRY);
-  const operations = buildOperationRows();
-  const capabilities = runtime.getCapabilitySnapshot();
-  const activeCapabilityCount = capabilities.filter(
-    (status) => status.active > 0,
-  ).length;
-  const fixtureContributions =
-    COMPOSED_CONTRACT_CONTRIBUTIONS.contributions.filter(
-      (contribution) => contribution.source.kind === "TEMPLATE_FIXTURE",
-    ).length;
-
-  return (
-    <section className="ui-page">
-      <PageHeader
-        eyebrow="예제"
-        title="플랫폼 구성"
-        description="이 화면의 모든 값은 설치된 레지스트리에서 렌더 시점에 읽습니다. 손으로 옮겨 적은 숫자가 없으므로 코드가 바뀌면 이 화면도 함께 바뀝니다."
-      />
-
-      <section
-        className="gallery-section"
-        aria-labelledby="platform-release-title"
-      >
-        <header className="gallery-section__header">
-          <h2 id="platform-release-title">릴리스 신원</h2>
-          <p>
-            부팅 시 경계 검사를 통과한 런타임 설정과 릴리스 매니페스트에서 옵니다.
-          </p>
-        </header>
-        <dl className="platform-metric-grid" aria-live="polite">
-          {release ? (
-            <>
-              <Metric label="빌드" value={release.buildId} />
-              <Metric label="릴리스" value={release.releaseId} />
-              <Metric
-                label="설정 스키마"
-                value={release.configSchemaVersion}
-                hint={
-                  release.apiContractVersion
-                    ? `레거시 계약 ${release.apiContractVersion}`
-                    : "계약 집합 사용"
-                }
-              />
-              <Metric
-                label="계약 집합 다이제스트"
-                value={
-                  release.contractSetDigest
-                    ? `${release.contractSetDigest.slice(0, 20)}…`
-                    : "없음"
-                }
-                hint={
-                  release.contractSetDigest
-                    ? "릴리스 매니페스트 V2"
-                    : "릴리스 매니페스트 V1"
-                }
-              />
-            </>
-          ) : (
-            <Metric label="상태" value="런타임 정보를 확인하고 있습니다." />
-          )}
-        </dl>
-      </section>
-
-      <section
-        className="gallery-section"
-        aria-labelledby="platform-summary-title"
-      >
-        <header className="gallery-section__header">
-          <h2 id="platform-summary-title">설치 요약</h2>
-          <p>레지스트리 항목 수를 그대로 센 값입니다.</p>
-        </header>
-        <dl className="platform-metric-grid">
-          <Metric label="라우트" value={`${routes.length}개`} />
-          <Metric label="HTTP 오퍼레이션" value={`${operations.length}개`} />
-          <Metric
-            label="외부 계약 패키지"
-            value={`${EXPECTED_CONTRACT_SET_PACKAGES.length}개`}
-            hint={`템플릿 픽스처 ${fixtureContributions}개`}
-          />
-          <Metric
-            label="선택적 런타임 능력"
-            value={`${activeCapabilityCount} / ${capabilities.length}`}
-            hint="런타임 오버라이드 반영"
-          />
-        </dl>
-      </section>
-
-      <section
-        className="gallery-section"
-        aria-labelledby="platform-routes-title"
-      >
-        <header className="gallery-section__header">
-          <h2 id="platform-routes-title">설치된 라우트</h2>
-          <p>
-            라우트 레지스트리가 단일 진실 공급원입니다. 접근 정책, 코드 분할 청크,
-            입력 스키마가 한 항목에 함께 선언됩니다.
-          </p>
-        </header>
-        <DataTable
-          caption="설치된 라우트 목록"
-          columns={ROUTE_COLUMNS}
-          rows={routes}
-          rowKey={(row) => row.routeId}
-          empty={
-            <EmptySurface
-              title="설치된 라우트가 없습니다."
-              description="라우트 레지스트리가 비어 있습니다."
-            />
-          }
-        />
-      </section>
-
-      <section
-        className="gallery-section"
-        aria-labelledby="platform-contracts-title"
-      >
-        <header className="gallery-section__header">
-          <h2 id="platform-contracts-title">계약과 HTTP 오퍼레이션</h2>
-          <p>
-            외부 계약 패키지 {EXPECTED_CONTRACT_SET_PACKAGES.length}개가 설치되어
-            있습니다. 아래 오퍼레이션은 템플릿 픽스처가 제공하며 릴리스 다이제스트에
-            포함되지 않습니다. 제품은 픽스처를 지우고 자기 패키지를 고정합니다.
-          </p>
-        </header>
-        <DataTable
-          caption="설치된 HTTP 오퍼레이션"
-          columns={OPERATION_COLUMNS}
-          rows={operations}
-          rowKey={(row) => row.operationId}
-          empty={
-            <EmptySurface
-              title="설치된 HTTP 오퍼레이션이 없습니다."
-              description="계약 기여물을 추가하면 이 표에 나타납니다."
-            />
-          }
-        />
-      </section>
-
-      <section
-        className="gallery-section"
-        aria-labelledby="platform-server-state-title"
-      >
-        <header className="gallery-section__header">
-          <h2 id="platform-server-state-title">서버 상태와 실행 상한</h2>
-          <p>
-            조회는 네 개의 고정 프로파일 중 하나를 골라야 하고, 실행 정책은 아래
-            상한을 넘을 수 없습니다.
-          </p>
-        </header>
-        <DataTable
-          caption="서버 상태 프로파일"
-          columns={PROFILE_COLUMNS}
-          rows={Object.values(SERVER_STATE_PROFILES)}
-          rowKey={(row) => row.profileId}
-          empty={<EmptySurface title="프로파일이 없습니다." />}
-        />
-        <dl className="platform-metric-grid">
-          <Metric
-            label="응답 상한"
-            value={kilobytes(HTTP_EXECUTION_CEILINGS.hardResponseBytes)}
-            hint={`기본 ${kilobytes(HTTP_EXECUTION_CEILINGS.defaultResponseBytes)}`}
-          />
-          <Metric
-            label="요청 상한"
-            value={kilobytes(HTTP_EXECUTION_CEILINGS.hardRequestBytes)}
-            hint={`기본 ${kilobytes(HTTP_EXECUTION_CEILINGS.defaultRequestBytes)}`}
-          />
-          <Metric
-            label="총 마감 상한"
-            value={seconds(HTTP_EXECUTION_CEILINGS.hardTotalDeadlineMs)}
-            hint={`기본 ${seconds(HTTP_EXECUTION_CEILINGS.defaultTotalDeadlineMs)}`}
-          />
-          <Metric
-            label="재시도 상한"
-            value={`${HTTP_EXECUTION_CEILINGS.hardRetryCount}회`}
-            hint="전송 실패에만 적용"
-          />
-        </dl>
-      </section>
-
-      <section
-        className="gallery-section"
-        aria-labelledby="platform-capabilities-title"
-      >
-        <header className="gallery-section__header">
-          <h2 id="platform-capabilities-title">선택적 런타임 능력</h2>
-          <p>
-            정적 선택 파일이 단일 진실 공급원입니다. 런타임 설정은 이미 선택된
-            능력을 끌 수만 있고, 설정 문자열로 새 능력을 켜거나 모듈 경로를 만들지
-            못합니다. 여기 표시되는 상태는 정적 선택에 런타임 오버라이드를 적용한
-            결과이므로, 애초에 선택되지 않은 능력과 운영자가 끈 능력이 구분됩니다.
-          </p>
-        </header>
-        <div className="component-grid component-grid--two">
-          {capabilities.map((status) => {
-            const copy = CAPABILITY_COPY[status.capabilityId];
-            const badge = capabilityBadge(status);
-            return (
-              <Card
-                key={status.capabilityId}
-                title={copy.label}
-                footer={<Badge variant={badge.variant}>{badge.text}</Badge>}
-              >
-                <p>{copy.description}</p>
-              </Card>
-            );
-          })}
-        </div>
-      </section>
-    </section>
-  );
-}

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

@@ -1,96 +0,0 @@
-import { useState } from "react";
-
-import { deriveAsyncState } from "../../application/view-models/async-state.ts";
-import { createFailure } from "../../contracts/errors.ts";
-import {
-  AsyncSurface,
-  EmptySurface,
-  LoadingSurface,
-  TerminalErrorSurface,
-  AuthRequiredSurface,
-  ForbiddenSurface,
-  NotFoundSurface,
-  Button,
-  Card,
-  PageHeader,
-} from "../design-system/index.ts";
-
-export default function StateGalleryPage() {
-  const [lastAction, setLastAction] = useState(
-    "상태 화면의 작업을 선택하면 결과가 여기에 표시됩니다.",
-  );
-  const refreshingState = deriveAsyncState({
-    data: ["기존 데이터"],
-    isFetching: true,
-  });
-
-  return (
-    <section className="ui-page">
-      <PageHeader
-        eyebrow="예제"
-        title="화면 상태"
-        description="로딩, 빈 화면, 오류, 인증 필요와 권한 없음 상태가 다음 행동까지 일관되게 안내합니다."
-      />
-
-      <section className="gallery-section" aria-labelledby="async-states-title">
-        <header className="gallery-section__header">
-          <h2 id="async-states-title">비동기 데이터 상태</h2>
-          <p>초기 로딩과 백그라운드 갱신을 구분해 기존 콘텐츠를 보존합니다.</p>
-        </header>
-        <div className="component-grid component-grid--two">
-          <Card title="초기 로딩">
-            <LoadingSurface label="예제 데이터를 불러오는 중" />
-          </Card>
-          <Card title="백그라운드 갱신">
-            <AsyncSurface state={refreshingState}>
-              <div className="state-preview-content">기존 콘텐츠는 계속 표시됩니다.</div>
-            </AsyncSurface>
-          </Card>
-          <Card title="빈 화면">
-            <EmptySurface
-              title="아직 표시할 항목이 없습니다."
-              description="첫 항목을 추가하거나 필터를 초기화할 수 있습니다."
-              action={
-                <Button onClick={() => setLastAction("빈 화면 작업을 실행했습니다.")}>
-                  첫 작업 시작
-                </Button>
-              }
-            />
-          </Card>
-          <Card title="복구 가능한 오류">
-            <TerminalErrorSurface
-              userMessageKey={
-                createFailure("NETWORK_UNREACHABLE", "EXAMPLE", 0)
-                  .userMessageKey
-              }
-              action="retry"
-              onAction={() => setLastAction("오류 요청을 다시 시도했습니다.")}
-            />
-          </Card>
-        </div>
-      </section>
-
-      <section className="gallery-section" aria-labelledby="access-states-title">
-        <header className="gallery-section__header">
-          <h2 id="access-states-title">접근과 탐색 상태</h2>
-          <p>인증 여부와 서버 권한 결과를 서로 다른 상태로 전달합니다.</p>
-        </header>
-        <div className="component-grid component-grid--three">
-          <AuthRequiredSurface
-            onSignIn={() => setLastAction("로그인 연동 작업을 시작했습니다.")}
-          />
-          <ForbiddenSurface
-            onNavigate={() => setLastAction("접근 가능한 화면으로 이동합니다.")}
-          />
-          <NotFoundSurface
-            onNavigate={() => setLastAction("시작 화면으로 이동합니다.")}
-          />
-        </div>
-      </section>
-
-      <output className="gallery-notice" aria-live="polite">
-        {lastAction}
-      </output>
-    </section>
-  );
-}

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

@@ -1,318 +0,0 @@
-import { useState, type FormEvent } from "react";
-
-import {
-  Alert,
-  Badge,
-  Button,
-  Card,
-  Checkbox,
-  Dialog,
-  Menu,
-  PageHeader,
-  ProgressBar,
-  RadioGroup,
-  Select,
-  Switch,
-  Tabs,
-  TextArea,
-  TextField,
-  ToastProvider,
-  Tooltip,
-  useToast,
-} from "../design-system/index.ts";
-
-const COLOR_TOKENS = Object.freeze([
-  ["Surface", "--color-surface"],
-  ["Muted surface", "--color-surface-muted"],
-  ["Content", "--color-content"],
-  ["Muted content", "--color-content-muted"],
-  ["Action", "--color-action"],
-  ["Danger", "--color-danger"],
-  ["Focus", "--color-focus"],
-]);
-
-export default function UiGalleryPage() {
-  return (
-    <ToastProvider>
-      <UiGalleryContent />
-    </ToastProvider>
-  );
-}
-
-function UiGalleryContent() {
-  const toast = useToast();
-  const [projectName, setProjectName] = useState("");
-  const [description, setDescription] = useState("");
-  const [template, setTemplate] = useState("application");
-  const [reviewed, setReviewed] = useState(false);
-  const [notifications, setNotifications] = useState(true);
-  const [density, setDensity] = useState("comfortable");
-  const [fieldTouched, setFieldTouched] = useState(false);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [notice, setNotice] = useState(
-    "구성요소를 조작하면 결과가 여기에 표시됩니다.",
-  );
-  const [alertVisible, setAlertVisible] = useState(true);
-  const fieldError =
-    fieldTouched && projectName.trim().length === 0
-      ? "프로젝트 이름을 입력해 주세요."
-      : undefined;
-
-  function submitExample(event: FormEvent<HTMLFormElement>): void {
-    event.preventDefault();
-    setFieldTouched(true);
-    if (projectName.trim().length === 0) {
-      setNotice("입력값을 확인해 주세요.");
-      return;
-    }
-    setNotice(`“${projectName.trim()}” 입력을 확인했습니다.`);
-  }
-
-  return (
-    <section className="ui-page">
-      <PageHeader
-        eyebrow="예제"
-        title="UI 구성요소"
-        description="제품 도메인과 독립적인 공통 컨트롤, 피드백, 표면과 디자인 토큰을 직접 조작할 수 있습니다."
-      />
-
-      <section className="gallery-section" aria-labelledby="controls-title">
-        <header className="gallery-section__header">
-          <h2 id="controls-title">버튼과 입력</h2>
-          <p>키보드, 비활성 상태, 오류 설명을 포함한 기본 상호작용입니다.</p>
-        </header>
-        <div className="component-grid component-grid--two">
-          <Card title="버튼" description="의미와 위험도에 따라 변형을 선택합니다.">
-            <div className="button-row">
-              <Button onClick={() => setNotice("기본 작업을 실행했습니다.")}>
-                기본 작업
-              </Button>
-              <Button
-                variant="secondary"
-                onClick={() => setNotice("보조 작업을 실행했습니다.")}
-              >
-                보조 작업
-              </Button>
-              <Button
-                variant="danger"
-                onClick={() => setNotice("위험 작업 예제를 선택했습니다.")}
-              >
-                위험 작업
-              </Button>
-              <Button disabled>사용 불가</Button>
-            </div>
-          </Card>
-          <Card title="입력창" description="레이블과 도움말, 오류가 입력에 연결됩니다.">
-            <form className="example-form" noValidate onSubmit={submitExample}>
-              <TextField
-                label="프로젝트 이름"
-                description="새 도메인을 연결할 때 사용할 중립적인 예제입니다."
-                error={fieldError}
-                value={projectName}
-                required
-                onChange={(event) => setProjectName(event.currentTarget.value)}
-              />
-              <Button type="submit">입력 확인</Button>
-            </form>
-          </Card>
-        </div>
-      </section>
-
-      <section className="gallery-section" aria-labelledby="form-controls-title">
-        <header className="gallery-section__header">
-          <h2 id="form-controls-title">폼과 선택 컨트롤</h2>
-          <p>native semantics, 설명·오류 연결과 controlled 상태를 제공합니다.</p>
-        </header>
-        <div className="component-grid component-grid--two">
-          <Card title="긴 입력과 선택">
-            <div className="component-stack">
-              <TextArea
-                label="설명"
-                maxLength={120}
-                value={description}
-                onChange={(event) => setDescription(event.currentTarget.value)}
-              />
-              <Select
-                label="시작 템플릿"
-                options={[
-                  { value: "application", label: "Application" },
-                  { value: "library", label: "Library" },
-                ]}
-                value={template}
-                onChange={(event) => setTemplate(event.currentTarget.value)}
-              />
-              <Checkbox
-                checked={reviewed}
-                label="접근성 계약을 확인했습니다."
-                onChange={(event) => setReviewed(event.currentTarget.checked)}
-              />
-            </div>
-          </Card>
-          <Card title="단일 선택과 설정">
-            <div className="component-stack">
-              <RadioGroup
-                label="화면 밀도"
-                name="density"
-                onChange={setDensity}
-                options={[
-                  { value: "comfortable", label: "여유롭게" },
-                  { value: "compact", label: "조밀하게" },
-                ]}
-                value={density}
-              />
-              <Switch
-                checked={notifications}
-                description="boolean 설정에만 switch를 사용합니다."
-                label="알림 사용"
-                onChange={setNotifications}
-              />
-              <ProgressBar label="설정 준비도" max={4} value={3} />
-            </div>
-          </Card>
-        </div>
-      </section>
-
-      <section className="gallery-section" aria-labelledby="feedback-title">
-        <header className="gallery-section__header">
-          <h2 id="feedback-title">피드백과 모달</h2>
-          <p>상태 전달은 색에만 의존하지 않으며, 모든 제어에는 이름이 있습니다.</p>
-        </header>
-        <div className="component-grid component-grid--two">
-          <Card title="알림과 배지" description="짧은 상태와 문맥형 피드백입니다.">
-            <div className="component-stack">
-              {alertVisible ? (
-                <Alert
-                  title="설정이 저장되었습니다."
-                  variant="success"
-                  onDismiss={() => setAlertVisible(false)}
-                >
-                  <p>운영 환경에는 실제 저장 포트를 연결하세요.</p>
-                </Alert>
-              ) : (
-                <Button
-                  variant="secondary"
-                  onClick={() => setAlertVisible(true)}
-                >
-                  알림 다시 표시
-                </Button>
-              )}
-              <div className="badge-row" aria-label="배지 변형">
-                <Badge>중립</Badge>
-                <Badge variant="info">정보</Badge>
-                <Badge variant="success">준비됨</Badge>
-                <Badge variant="warning">확인 필요</Badge>
-                <Badge variant="danger">실패</Badge>
-              </div>
-            </div>
-          </Card>
-          <Card title="모달" description="배경과 키보드 Esc로 닫고 포커스를 복원합니다.">
-            <div className="button-row">
-              <Button onClick={() => setDialogOpen(true)}>모달 열기</Button>
-              <Menu
-                items={[
-                  {
-                    id: "inspect",
-                    label: "상태 확인",
-                    onSelect: () => setNotice("메뉴 작업을 실행했습니다."),
-                  },
-                  {
-                    id: "notify",
-                    label: "Toast 표시",
-                    onSelect: () =>
-                      toast.push({
-                        id: "gallery-saved",
-                        title: "예제가 저장되었습니다.",
-                        tone: "success",
-                      }),
-                  },
-                ]}
-                triggerLabel="작업 메뉴"
-              />
-              <Tooltip content="이 설명은 필수 정보가 아닙니다.">
-                <Button variant="ghost">도움말</Button>
-              </Tooltip>
-            </div>
-            <Dialog
-              open={dialogOpen}
-              onClose={() => setDialogOpen(false)}
-              title="연동 확인"
-              description="도메인 작업을 실행하기 전 확인 화면의 기본 구조입니다."
-              actions={
-                <>
-                  <Button
-                    variant="secondary"
-                    onClick={() => setDialogOpen(false)}
-                  >
-                    취소
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      setNotice("모달의 확인 작업을 실행했습니다.");
-                      setDialogOpen(false);
-                    }}
-                  >
-                    확인
-                  </Button>
-                </>
-              }
-            >
-              <p>민감한 값이나 구현 세부정보는 확인 문구에 포함하지 않습니다.</p>
-            </Dialog>
-          </Card>
-        </div>
-      </section>
-
-      <section className="gallery-section" aria-labelledby="navigation-title">
-        <header className="gallery-section__header">
-          <h2 id="navigation-title">탐색 패턴</h2>
-          <p>화살표 키와 명시적인 활성화 정책을 갖는 탭 예제입니다.</p>
-        </header>
-        <Tabs
-          activation="manual"
-          label="디자인 시스템 계층"
-          tabs={[
-            {
-              id: "tokens",
-              label: "토큰",
-              panel: <p>원시 값에서 의미와 컴포넌트 토큰을 파생합니다.</p>,
-            },
-            {
-              id: "primitives",
-              label: "프리미티브",
-              panel: <p>native semantics와 interaction을 닫습니다.</p>,
-            },
-            {
-              id: "patterns",
-              label: "패턴",
-              panel: <p>반복되는 사용자 문제를 조합으로 해결합니다.</p>,
-            },
-          ]}
-        />
-      </section>
-
-      <section className="gallery-section" aria-labelledby="tokens-title">
-        <header className="gallery-section__header">
-          <h2 id="tokens-title">디자인 토큰</h2>
-          <p>구성요소가 사용하는 의미 기반 색상과 형태 토큰입니다.</p>
-        </header>
-        <div className="token-grid">
-          {COLOR_TOKENS.map(([label, token]) => (
-            <article className="token-swatch" key={token}>
-              <span
-                className="token-swatch__color"
-                style={{ backgroundColor: `var(${token})` }}
-                aria-hidden="true"
-              />
-              <strong>{label}</strong>
-              <code>{token}</code>
-            </article>
-          ))}
-        </div>
-      </section>
-
-      <output className="gallery-notice" aria-live="polite">
-        {notice}
-      </output>
-    </section>
-  );
-}

src/presentation/layouts/app-shell.tsx

@@ -88,7 +88,7 @@ export function AppShell() {
         >
           <MenuIcon />
         </IconButton>
-        <NavLink className="app-shell__brand" to={routePath("APP_HOME")}>
+        <NavLink className="app-shell__brand" to={routePath("TECH_LOG_HOME")}>
           {message("common.appName")}
         </NavLink>
         <div className="app-shell__session">

src/presentation/pages/home-page.tsx

@@ -1,87 +0,0 @@
-import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-
-import { routePath } from "../../features/installed-feature-contracts.ts";
-import { PageHeader } from "../design-system/index.ts";
-import { useApplication } from "../providers/application-provider.tsx";
-
-const READINESS_ITEMS = Object.freeze([
-  {
-    title: "실행 계약",
-    description: "런타임 설정, 릴리스 정합성, 오류 경계가 마운트 전에 검증됩니다.",
-  },
-  {
-    title: "교체 가능한 연동",
-    description: "인증, HTTP, 캐시, 저장소, 텔레메트리가 포트 뒤에 분리되어 있습니다.",
-  },
-  {
-    title: "접근 가능한 화면",
-    description: "키보드 탐색, 포커스 이동, 반응형 앱 셸의 기본 동작이 준비되어 있습니다.",
-  },
-]);
-
-export default function HomePage() {
-  const { runtime } = useApplication();
-  const [release, setRelease] = useState<
-    Awaited<ReturnType<typeof runtime.getReleaseSummary>> | null
-  >(null);
-
-  useEffect(() => {
-    let active = true;
-    void runtime.getReleaseSummary().then((summary) => {
-      if (active) setRelease(summary);
-    });
-    return () => {
-      active = false;
-    };
-  }, [runtime]);
-
-  return (
-    <section className="ui-page">
-      <PageHeader
-        eyebrow="프로젝트 시작점"
-        title="Tech Log"
-        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>
-      <p className="ui-runtime-summary" aria-live="polite">
-        {release
-          ? `빌드 ${release.buildId} · 릴리스 ${release.releaseId}`
-          : "검증된 런타임 정보를 확인하고 있습니다."}
-      </p>
-      <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_PLATFORM")}>
-            플랫폼 구성 보기
-          </Link>
-          <Link
-            className="ui-button ui-button--secondary"
-            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.tsx

@@ -1,22 +0,0 @@
-import { Link } from "react-router-dom";
-
-import { routePath } from "../../features/installed-feature-contracts.ts";
-import { PageHeader } from "../design-system/index.ts";
-import { useLocale } from "../i18n/index.ts";
-
-export default function NotFoundPage() {
-  const { message } = useLocale();
-  return (
-    <section className="ui-page">
-      <PageHeader
-        title={message("page.notFound.title")}
-        description={message("page.notFound.description")}
-      />
-      <div>
-        <Link className="ui-button" to={routePath("APP_HOME")}>
-          {message("action.goHome")}
-        </Link>
-      </div>
-    </section>
-  );
-}

src/presentation/routes/app-router.tsx

@@ -9,7 +9,6 @@ import {
 } from "react";
 import {
   createBrowserRouter,
-  Outlet,
   RouterProvider,
   type RouteObject,
   useLocation,
@@ -30,7 +29,7 @@ import {
 import { ChunkRecoveryBoundary } from "../boundaries/chunk-recovery-boundary.tsx";
 import { Button, PageHeader } from "../design-system/index.ts";
 import { LocaleProvider, useLocale } from "../i18n/index.ts";
-import { AppShell } from "../layouts/app-shell.tsx";
+import { TECH_LOG_ROUTE_LAYOUTS } from "../../features/tech-log/presentation/tech-log-route-runtime.tsx";
 import { useApplication } from "../providers/application-provider.tsx";
 import { SessionProvider, useSession } from "../providers/session-provider.tsx";
 import { ThemeProvider } from "../providers/theme-provider.tsx";
@@ -459,10 +458,7 @@ export function AppRouter({
         createGroupedRouteObjects(
           ROUTE_REGISTRY,
           ROUTE_RUNTIME,
-          {
+          TECH_LOG_ROUTE_LAYOUTS,
-            PUBLIC: <AppShell />,
-            STUDIO: <Outlet />,
-          },
           buildId,
           ROUTE_CODECS,
         ),

src/presentation/routes/platform-route-codecs.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-export const PLATFORM_ROUTE_CODECS = {
+export const PLATFORM_ROUTE_CODECS = Object.freeze({
   none: z.object({}).strict(),
   NotFoundSplat: z.object({ "*": z.string().min(1).optional() }).strict(),
-} as const;
+});

src/presentation/routes/route-runtime.tsx

@@ -1,47 +1 @@
-import {
+export const PLATFORM_ROUTE_RUNTIME = Object.freeze({});
-  lazy,
-  type ComponentType,
-  type LazyExoticComponent,
-} from "react";
-
-import { PLATFORM_ROUTE_RUNTIME_CONTRACT } from "../../contracts/route-runtime-contract.ts";
-
-type RouteModule = Readonly<{ default: ComponentType }>;
-type RouteRuntime = Readonly<{
-  moduleId: string;
-  Component: LazyExoticComponent<ComponentType>;
-}>;
-
-function runtime(
-  routeId: keyof typeof PLATFORM_ROUTE_RUNTIME_CONTRACT,
-  load: () => Promise<RouteModule>,
-): RouteRuntime {
-  return Object.freeze({
-    moduleId: PLATFORM_ROUTE_RUNTIME_CONTRACT[routeId].moduleId,
-    Component: lazy(load),
-  });
-}
-
-export const PLATFORM_ROUTE_RUNTIME = {
-  APP_HOME: runtime("APP_HOME", () => import("../pages/home-page.tsx")),
-  EXAMPLES_PLATFORM: runtime(
-    "EXAMPLES_PLATFORM",
-    () => import("../examples/platform-overview-page.tsx"),
-  ),
-  EXAMPLES_UI: runtime(
-    "EXAMPLES_UI",
-    () => import("../examples/ui-gallery-page.tsx"),
-  ),
-  EXAMPLES_STATES: runtime(
-    "EXAMPLES_STATES",
-    () => import("../examples/state-gallery-page.tsx"),
-  ),
-  EXAMPLES_AUTH: runtime(
-    "EXAMPLES_AUTH",
-    () => import("../examples/auth-example-page.tsx"),
-  ),
-  NOT_FOUND: runtime(
-    "NOT_FOUND",
-    () => import("../pages/not-found-page.tsx"),
-  ),
-} satisfies Record<keyof typeof PLATFORM_ROUTE_RUNTIME_CONTRACT, RouteRuntime>;

tests/component/platform-overview-page.test.tsx

@@ -1,164 +0,0 @@
-// @vitest-environment jsdom
-
-import { render, screen, waitFor, within } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { SERVER_STATE_PROFILES } from "../../src/contracts/server-state.ts";
-import { COMPOSED_CONTRACT_CONTRIBUTIONS } from "../../src/features/installed-contract-contributions.ts";
-import { ROUTE_REGISTRY } from "../../src/features/installed-feature-contracts.ts";
-import PlatformOverviewPage from "../../src/presentation/examples/platform-overview-page.tsx";
-import { LocaleProvider } from "../../src/presentation/i18n/index.ts";
-import { ApplicationProvider } from "../../src/presentation/providers/application-provider.tsx";
-import { createTestApplication } from "../helpers/create-test-application.ts";
-import { createRuntimeCapabilitiesStub } from "../helpers/runtime-capabilities-stub.ts";
-
-/**
- * The page must stay a projection of the installed registries. Every assertion
- * below derives its expectation from the same registry the page reads, so a
- * template that removes its sample feature still satisfies this suite.
- */
-
-function renderPage() {
-  return render(
-    <ApplicationProvider application={createTestApplication()}>
-      <LocaleProvider>
-        <PlatformOverviewPage />
-      </LocaleProvider>
-    </ApplicationProvider>,
-  );
-}
-
-function tableByCaption(caption: string): HTMLElement {
-  return screen.getByRole("table", { name: caption });
-}
-
-/** A metric is a `dt`/`dd` pair, which carries no ARIA role to query by. */
-function metricByLabel(scope: HTMLElement, label: string): HTMLElement {
-  const term = within(scope).getByText(label).closest(".platform-metric");
-  if (!(term instanceof HTMLElement)) {
-    throw new Error(`No metric is labelled ${label}`);
-  }
-  return term;
-}
-
-describe("platform overview page", () => {
-  it("renders one route row per installed route registry entry", () => {
-    renderPage();
-
-    const table = tableByCaption("설치된 라우트 목록");
-    const dataRows = within(table).getAllByRole("row").slice(1);
-
-    expect(dataRows).toHaveLength(Object.keys(ROUTE_REGISTRY).length);
-    for (const definition of Object.values(ROUTE_REGISTRY)) {
-      expect(
-        within(table).getByText(definition.routeId),
-      ).toBeInTheDocument();
-    }
-  });
-
-  it("renders one operation row per installed HTTP contract", () => {
-    const operationIds = [
-      ...COMPOSED_CONTRACT_CONTRIBUTIONS.httpByOperationId.keys(),
-    ];
-    renderPage();
-
-    if (operationIds.length === 0) {
-      expect(
-        screen.getByRole("heading", {
-          name: "설치된 HTTP 오퍼레이션이 없습니다.",
-        }),
-      ).toBeVisible();
-      return;
-    }
-
-    const table = tableByCaption("설치된 HTTP 오퍼레이션");
-    expect(within(table).getAllByRole("row").slice(1)).toHaveLength(
-      operationIds.length,
-    );
-    for (const operationId of operationIds) {
-      expect(within(table).getByText(operationId)).toBeInTheDocument();
-    }
-  });
-
-  it("renders every fixed server-state profile with its own budget", () => {
-    renderPage();
-
-    const table = tableByCaption("서버 상태 프로파일");
-    for (const profile of Object.values(SERVER_STATE_PROFILES)) {
-      expect(within(table).getByText(profile.profileId)).toBeInTheDocument();
-    }
-    expect(within(table).getAllByRole("row").slice(1)).toHaveLength(
-      Object.keys(SERVER_STATE_PROFILES).length,
-    );
-  });
-
-  it("labels a capability that was never selected as unselected", () => {
-    renderPage();
-
-    const region = screen.getByRole("region", { name: "선택적 런타임 능력" });
-
-    expect(within(region).getAllByText("미선택")).toHaveLength(4);
-    expect(within(region).queryByText("운영자가 비활성화함")).toBeNull();
-  });
-
-  it("separates an operator disable from a capability that was never selected", () => {
-    render(
-      <ApplicationProvider
-        application={createTestApplication({
-          runtimeCapabilities: createRuntimeCapabilitiesStub({
-            SERVICE_WORKER: { selected: 1, active: 0, override: "DISABLED" },
-            OFFLINE_COMMANDS: { selected: 1, active: 1 },
-          }),
-        })}
-      >
-        <LocaleProvider>
-          <PlatformOverviewPage />
-        </LocaleProvider>
-      </ApplicationProvider>,
-    );
-
-    const region = screen.getByRole("region", { name: "선택적 런타임 능력" });
-
-    expect(within(region).getByText("운영자가 비활성화함")).toBeVisible();
-    expect(within(region).getByText("활성 (1)")).toBeVisible();
-    expect(within(region).getAllByText("미선택")).toHaveLength(2);
-  });
-
-  it("counts installed contract packages separately from template fixtures", () => {
-    const fixtures = COMPOSED_CONTRACT_CONTRIBUTIONS.contributions.filter(
-      (contribution) => contribution.source.kind === "TEMPLATE_FIXTURE",
-    ).length;
-    renderPage();
-
-    const summary = screen.getByRole("region", { name: "설치 요약" });
-    const packages = metricByLabel(summary, "외부 계약 패키지");
-
-    expect(
-      within(packages).getByText(
-        `${COMPOSED_CONTRACT_CONTRIBUTIONS.externalPackages.length}개`,
-      ),
-    ).toBeVisible();
-    expect(
-      within(packages).getByText(`템플릿 픽스처 ${fixtures}개`),
-    ).toBeVisible();
-    expect(
-      within(metricByLabel(summary, "라우트")).getByText(
-        `${Object.keys(ROUTE_REGISTRY).length}개`,
-      ),
-    ).toBeVisible();
-  });
-
-  it("renders the verified release identity once the runtime resolves it", async () => {
-    renderPage();
-
-    const region = screen.getByRole("region", { name: "릴리스 신원" });
-    await waitFor(() =>
-      expect(
-        within(metricByLabel(region, "빌드")).getByText("test-build"),
-      ).toBeVisible(),
-    );
-    expect(
-      within(metricByLabel(region, "릴리스")).getByText("test-release"),
-    ).toBeVisible();
-  });
-});

tests/component/router.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, expectTypeOf, it } from "vitest";
 import { z } from "zod";
@@ -12,6 +12,8 @@ import {
 } from "react-router-dom";
 
 import { createAnonymousSessionAdapter } from "../../src/adapters/auth/external-session-adapter.ts";
+import { createTechLogFeatureInstalledInput } from "../../src/features/tech-log/adapters/create-tech-log-feature-input.ts";
+import { TECH_LOG_FEATURE_ID } from "../../src/features/tech-log/application/tech-log-feature-input.ts";
 import { ApplicationProvider } from "../../src/presentation/providers/application-provider.tsx";
 import {
   AppRouter,
@@ -54,7 +56,7 @@ const groupedFixtureCodecs = Object.freeze({
 
 const reviewFixtureRegistry = Object.freeze({
   REVIEW_FIXTURE: Object.freeze({
-    ...ROUTE_REGISTRY.APP_HOME,
+    ...ROUTE_REGISTRY.TECH_LOG_HOME,
     routeId: "REVIEW_FIXTURE",
     path: "/review/:reviewId",
     paramsSchema: "ReviewFixtureParams",
@@ -100,10 +102,12 @@ function compileTimeGroupedRouteContract() {
 void compileTimeGroupedRouteContract;
 
 function renderRouter() {
+  const techLog = createTechLogFeatureInstalledInput();
   return render(
     <ApplicationProvider
       application={createTestApplication({
         session: createAnonymousSessionAdapter(),
+        featureInputs: { [TECH_LOG_FEATURE_ID]: techLog.input },
       })}
     >
       <AppRouter />
@@ -159,7 +163,7 @@ describe("generic application router", () => {
 
   it("assembles generic Public and Studio parents with Studio catch-all precedence", () => {
     const registry = {
-      APP_HOME: ROUTE_REGISTRY.APP_HOME,
+      TECH_LOG_HOME: ROUTE_REGISTRY.TECH_LOG_HOME,
       STUDIO_FIXTURE: {
         ...ROUTE_REGISTRY.NOT_FOUND,
         routeId: "STUDIO_FIXTURE",
@@ -169,7 +173,7 @@ describe("generic application router", () => {
       NOT_FOUND: ROUTE_REGISTRY.NOT_FOUND,
     };
     const runtime = {
-      APP_HOME: ROUTE_RUNTIME.APP_HOME,
+      TECH_LOG_HOME: ROUTE_RUNTIME.TECH_LOG_HOME,
       STUDIO_FIXTURE: ROUTE_RUNTIME.NOT_FOUND,
       NOT_FOUND: ROUTE_RUNTIME.NOT_FOUND,
     };
@@ -220,7 +224,7 @@ describe("generic application router", () => {
         "test-build",
         groupedFixtureCodecs,
       ),
-    ).toThrow("Missing route runtime: APP_HOME");
+    ).toThrow("Missing route runtime: TECH_LOG_HOME");
   });
 
   it("renders a non-installed Studio wildcard leaf without rewriting its URL", async () => {
@@ -277,10 +281,11 @@ describe("generic application router", () => {
     const routes = createGroupedRouteObjects(
       {
         PROTECTED_FIXTURE: {
-          ...ROUTE_REGISTRY.APP_HOME,
+          ...ROUTE_REGISTRY.TECH_LOG_HOME,
           routeId: "PROTECTED_FIXTURE",
           path: "/private-fixture",
           access: "session-required",
+          searchSchema: null,
         },
       },
       {
@@ -317,89 +322,67 @@ describe("generic application router", () => {
     ).toBeVisible();
   });
 
-  it("reaches the platform overview from the home starter actions", async () => {
+  it("renders the installed TechLog home in the Public layout", async () => {
     const user = userEvent.setup();
     window.history.pushState({}, "", "/");
     renderRouter();
 
-    // The starter action lives inside the lazily loaded home chunk, so this is
+    expect(
-    // the first wait in the file that has to outlast a chunk load rather than
+      await screen.findByRole("heading", { name: "TechLog", level: 1 }),
-    // an already-mounted shell element.
+    ).toBeVisible();
+    expect(screen.getByRole("navigation", { name: "주요 탐색" })).toBeVisible();
     await user.click(
-      await screen.findByRole(
+      within(screen.getByRole("navigation", { name: "주요 탐색" })).getByRole(
         "link",
-        { name: "플랫폼 구성 보기" },
+        { name: "프로젝트" },
-        { timeout: 5000 },
       ),
     );
-
+    expect(
-    await waitFor(() =>
+      await screen.findByRole("heading", { name: "프로젝트", level: 1 }),
-      expect(
+    ).toBeVisible();
-        screen.getByRole("heading", { name: "플랫폼 구성", level: 1 }),
+    expect(window.location.pathname).toBe("/projects");
-      ).toHaveFocus(),
-    );
   });
 
-  it("renders the app shell and not-found route without a feature input", async () => {
+  it("renders the Public shell and TechLog not-found route", async () => {
     window.history.pushState({}, "", "/missing");
     renderRouter();
 
     expect(
       await screen.findByRole("heading", {
-        name: "페이지를 찾을 수 없습니다.",
+        name: "404",
+        level: 1,
       }),
     ).toBeVisible();
-    expect(screen.getByRole("navigation", { name: "주요 탐색" })).toBeVisible();
-    expect(screen.getByRole("main")).toBeVisible();
-  });
-
-  it("preserves authorization around grouped registered leaves", async () => {
-    window.history.pushState({}, "", "/examples/reference-resources");
-    renderRouter();
-
     expect(
-      await screen.findByRole("heading", { name: "세션이 필요합니다." }),
+      screen.getByRole("heading", { name: "This page could not be found." }),
     ).toBeVisible();
     expect(screen.getByRole("navigation", { name: "주요 탐색" })).toBeVisible();
   });
 
-  it("navigates between registry-backed platform routes", async () => {
+  it("keeps Studio routes inside the persistent Studio layout", async () => {
-    const user = userEvent.setup();
+    window.history.pushState({}, "", "/studio");
-    window.history.pushState({}, "", "/");
     renderRouter();
 
-    await user.click(
-      await screen.findByRole("link", { name: "UI 구성요소" }),
-    );
-
     expect(
-      await screen.findByRole("heading", { name: "UI 구성요소", level: 1 }),
+      await screen.findByRole("heading", { name: "작업 흐름" }),
     ).toBeVisible();
-    expect(window.location.pathname).toBe("/examples/ui");
+    expect(screen.getByRole("navigation", { name: "Studio 주 탐색" })).toBeVisible();
-    expect(document.title).toBe("UI 구성요소 · Tech Log");
+    expect(screen.getByRole("link", { name: "공개 사이트 보기" })).toHaveAttribute(
-    await waitFor(() =>
+      "href",
-      expect(
+      "/",
-        screen.getByRole("heading", { name: "UI 구성요소", level: 1 }),
-      ).toHaveFocus(),
     );
   });
 
-  it("focuses the route heading again when the lazy chunk is already cached", async () => {
+  it("gives the Studio wildcard precedence over the Public not-found route", async () => {
-    // §9.7. The first visit resolves the route module asynchronously, so the
+    window.history.pushState({}, "", "/studio/missing");
-    // router lifecycle and the page header commit separately. A later visit
-    // renders the cached module in the same commit, which is the ordering that
-    // must still hand focus to the heading rather than leaving it on main.
-    const user = userEvent.setup();
-    window.history.pushState({}, "", "/");
     renderRouter();
 
-    for (const label of ["UI 구성요소", "화면 상태", "UI 구성요소"]) {
+    expect(
-      await user.click(await screen.findByRole("link", { name: label }));
+      await screen.findByRole("heading", {
-      await waitFor(() =>
+        name: "Studio 화면을 찾을 수 없습니다",
-        expect(
+      }),
-          screen.getByRole("heading", { name: label, level: 1 }),
+    ).toBeVisible();
-        ).toHaveFocus(),
+    expect(screen.getByRole("navigation", { name: "Studio 주 탐색" })).toBeVisible();
-      );
+    expect(window.location.pathname).toBe("/studio/missing");
-    }
   });
 });

tests/component/runtime-application.test.tsx

@@ -31,10 +31,32 @@ const releaseManifest = {
   releaseId: "local-release",
   builtAt: "2026-07-26T00:00:00.000Z",
   routeChunks: {
-    "route-home": "assets/home.js",
+    "route-tech-log-home": "assets/tech-log-home.js",
-    "route-examples-ui": "assets/ui.js",
+    "route-tech-log-explore": "assets/tech-log-explore.js",
-    "route-examples-states": "assets/states.js",
+    "route-tech-log-explore-kind": "assets/tech-log-explore-kind.js",
-    "route-examples-auth": "assets/auth.js",
+    "route-tech-log-case": "assets/tech-log-case.js",
+    "route-tech-log-reference": "assets/tech-log-reference.js",
+    "route-tech-log-question": "assets/tech-log-question.js",
+    "route-tech-log-topic": "assets/tech-log-topic.js",
+    "route-tech-log-projects": "assets/tech-log-projects.js",
+    "route-tech-log-project": "assets/tech-log-project.js",
+    "route-tech-log-project-records": "assets/tech-log-project-records.js",
+    "route-tech-log-project-decisions": "assets/tech-log-project-decisions.js",
+    "route-tech-log-project-activity": "assets/tech-log-project-activity.js",
+    "route-tech-log-releases": "assets/tech-log-releases.js",
+    "route-tech-log-release": "assets/tech-log-release.js",
+    "route-tech-log-profile": "assets/tech-log-profile.js",
+    "route-tech-log-search": "assets/tech-log-search.js",
+    "route-tech-log-studio-home": "assets/tech-log-studio-home.js",
+    "route-tech-log-studio-documents": "assets/tech-log-studio-documents.js",
+    "route-tech-log-studio-document-new": "assets/tech-log-studio-document-new.js",
+    "route-tech-log-studio-document-edit": "assets/tech-log-studio-document-edit.js",
+    "route-tech-log-studio-document-validation": "assets/tech-log-studio-document-validation.js",
+    "route-tech-log-studio-document-preview": "assets/tech-log-studio-document-preview.js",
+    "route-tech-log-studio-document-publish": "assets/tech-log-studio-document-publish.js",
+    "route-tech-log-studio-publications": "assets/tech-log-studio-publications.js",
+    "route-tech-log-studio-publication-preview": "assets/tech-log-studio-publication-preview.js",
+    "route-tech-log-studio-not-found": "assets/tech-log-studio-not-found.js",
     "route-not-found": "assets/not-found.js",
   },
 };
@@ -62,12 +84,14 @@ describe("production runtime application tree", () => {
 
     expect(
       await screen.findByRole("heading", {
-        name: "Tech Log",
+        name: "TechLog",
       }),
     ).toBeVisible();
     expect(
-      await screen.findByText("빌드 local-build · 릴리스 local-release"),
+      await screen.findAllByText(
-    ).toBeVisible();
+        "문제를 재현하고 검증해 운영 가능한 설계로 연결합니다.",
+      ),
+    ).toHaveLength(2);
     expect(fetcher).toHaveBeenCalledTimes(2);
     expect(composition).not.toHaveProperty("ports");
   });

tests/e2e/platform-overview.spec.ts

@@ -1,58 +0,0 @@
-import { expect, test } from "../support/browser/strict-browser-test.ts";
-import { SERVER_STATE_PROFILES } from "../../src/contracts/server-state.ts";
-import { ROUTE_REGISTRY } from "../../src/features/installed-feature-contracts.ts";
-
-/**
- * The overview is a projection of the installed registries. These assertions
- * read the same registries the shipped bundle was built from, so they keep
- * meaning after a feature is added or removed.
- */
-
-test("projects the installed route registry into the shipped bundle", async ({
-  page,
-}) => {
-  await page.goto("/examples/platform");
-  await expect(
-    page.getByRole("heading", { name: "플랫폼 구성", level: 1 }),
-  ).toBeVisible();
-
-  const table = page.getByRole("table", { name: "설치된 라우트 목록" });
-  await expect(table.locator("tbody tr")).toHaveCount(
-    Object.keys(ROUTE_REGISTRY).length,
-  );
-  for (const routeId of Object.keys(ROUTE_REGISTRY)) {
-    await expect(table.getByText(routeId, { exact: true })).toBeVisible();
-  }
-});
-
-test("shows every fixed server-state profile", async ({ page }) => {
-  await page.goto("/examples/platform");
-
-  const table = page.getByRole("table", { name: "서버 상태 프로파일" });
-  await expect(table.locator("tbody tr")).toHaveCount(
-    Object.keys(SERVER_STATE_PROFILES).length,
-  );
-});
-
-test("states the release contract identity verified at boot", async ({
-  page,
-}) => {
-  await page.goto("/examples/platform");
-
-  const release = page.locator(
-    "section[aria-labelledby='platform-release-title']",
-  );
-  await expect(release.getByText(/^sha256:/)).toBeVisible();
-});
-
-test("reports an unselected capability without claiming it was disabled", async ({
-  page,
-}) => {
-  await page.goto("/examples/platform");
-
-  const capabilities = page.locator(
-    "section[aria-labelledby='platform-capabilities-title']",
-  );
-  await expect(capabilities.getByText("미선택")).toHaveCount(4);
-  await expect(capabilities.getByText("운영자가 비활성화함")).toHaveCount(0);
-});

tests/e2e/reference-form.spec.ts

@@ -1,50 +0,0 @@
-import type { Page } from "@playwright/test";
-import { expect, test } from "../support/browser/strict-browser-test.ts";
-
-async function openReferenceForm(page: Page) {
-  await page.goto("/examples/reference-resources/new");
-  await page.getByRole("button", { name: "로그인 시작" }).click();
-  await expect(
-    page.getByRole("heading", { name: "Reference resource 만들기" }),
-  ).toBeVisible();
-}
-
-test("validates a reference form and focuses the first invalid field", async ({
-  page,
-}) => {
-  await openReferenceForm(page);
-  await page.getByRole("button", { name: "저장" }).click();
-
-  const firstField = page.getByRole("textbox", { name: /새 항목 이름/ });
-  await expect(firstField).toBeFocused();
-  await expect(firstField).toHaveAttribute("aria-invalid", "true");
-  await expect(page.getByRole("alert")).toContainText("입력 내용을 확인해 주세요.");
-});
-
-test("guards dirty cancellation and restores focus when writing continues", async ({
-  page,
-}) => {
-  await openReferenceForm(page);
-  await page
-    .getByRole("textbox", { name: /새 항목 이름/ })
-    .fill("Unsaved reference");
-  const cancel = page.getByRole("button", { name: "취소" });
-  await cancel.click();
-
-  await expect(
-    page.getByRole("dialog", { name: "저장하지 않은 변경이 있습니다." }),
-  ).toBeVisible();
-  await page.getByRole("button", { name: "계속 작성" }).click();
-  await expect(cancel).toBeFocused();
-  await expect(page).toHaveURL(/\/examples\/reference-resources\/new$/);
-});
-
-test("keeps the form template within a 320px viewport", async ({ page }) => {
-  await page.setViewportSize({ width: 320, height: 720 });
-  await openReferenceForm(page);
-  const viewport = await page.evaluate(() => ({
-    clientWidth: document.documentElement.clientWidth,
-    scrollWidth: document.documentElement.scrollWidth,
-  }));
-  expect(viewport.scrollWidth).toBeLessThanOrEqual(viewport.clientWidth);
-});

tests/e2e/reference-route.spec.ts

@@ -1,32 +0,0 @@
-import { expect, test } from "../support/browser/strict-browser-test.ts";
-import { ROUTE_REGISTRY } from "../../src/features/installed-feature-contracts.ts";
-
-test("opens the protected integration route through the local demo seam", async ({
-  page,
-}) => {
-  const protectedRoute = ROUTE_REGISTRY.REFERENCE_RESOURCE_LIST;
-  await page.route(
-    "http://localhost:8080/api/reference-resources?*",
-    (route) =>
-      route.fulfill({
-        json: [
-          {
-            id: "browser-reference",
-            name: "Browser reference",
-            createdAt: "2026-07-26T00:00:00.000Z",
-          },
-        ],
-      }),
-  );
-  await page.goto(protectedRoute.path);
-  await expect(
-    page.getByRole("heading", { name: "세션이 필요합니다." }),
-  ).toBeVisible();
-
-  await page.getByRole("button", { name: "로그인 시작" }).click();
-
-  await expect(
-    page.getByRole("heading", { name: protectedRoute.title }),
-  ).toBeVisible();
-  await expect(page.getByText("인증됨")).toBeVisible();
-});

tests/e2e/tech-log-studio-workflow.spec.ts

@@ -0,0 +1,71 @@
+import { FIXTURE_IDS } from "../../src/features/tech-log/adapters/mock/fixtures.ts";
+import { expect, test } from "../support/browser/strict-browser-test.ts";
+
+test("validates, previews, publishes, and unpublishes one Studio working copy", async ({
+  page,
+}) => {
+  await page.goto(
+    `/studio/documents/${FIXTURE_IDS.stateNonceReference}/validation`,
+  );
+  await expect(
+    page.getByText("현재 저장 버전의 검증을 통과했습니다"),
+  ).toBeVisible();
+
+  await page.getByRole("link", { name: "Public Preview 만들기" }).click();
+  await page
+    .getByRole("button", { name: "Public Preview 만들기" })
+    .click();
+  await expect(
+    page.getByText("현재 저장 버전의 Public Preview입니다."),
+  ).toBeVisible();
+
+  await page.getByRole("link", { name: "게시 준비로 이동" }).click();
+  await page.getByRole("button", { name: "게시" }).click();
+  await expect(page).toHaveURL(
+    /\/studio\/publications\/[0-9a-f-]+\/preview$/,
+  );
+  await expect(
+    page.getByRole("heading", {
+      level: 1,
+      name: "Authorization Code Flow에서 state와 nonce의 경계",
+    }),
+  ).toBeVisible();
+
+  await page.getByRole("link", { name: "게시 기록으로 돌아가기" }).click();
+  await page
+    .getByRole("button", {
+      name: /Authorization Code Flow에서 state와 nonce의 경계 게시 취소/,
+    })
+    .click();
+  await expect(
+    page.getByRole("dialog", { name: "게시를 취소할까요?" }),
+  ).toContainText("작업본과 이전 Snapshot은 보존됩니다.");
+  await page.getByRole("button", { name: "게시 취소 확인" }).click();
+  await expect(page.getByRole("status")).toContainText(
+    "게시를 취소했습니다.",
+  );
+});
+
+test("renders an immutable historical snapshot and Studio-local missing event", async ({
+  page,
+}) => {
+  await page.goto(
+    `/studio/publications/${FIXTURE_IDS.fetchPublishedEvent}/preview`,
+  );
+  await expect(
+    page.getByText(/반환된 20건 뒤에서 전체 컬렉션이 로드되는 과정/),
+  ).toBeVisible();
+  await expect(
+    page.getByText("게시 후 본문 측정값을 보완한 저장본입니다."),
+  ).toHaveCount(0);
+
+  await page.goto(
+    "/studio/publications/99999999-9999-4999-8999-999999999999/preview",
+  );
+  await expect(
+    page.getByRole("heading", { name: "게시 기록을 찾을 수 없습니다" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("navigation", { name: "Studio 주 탐색" }),
+  ).toBeVisible();
+});

tests/e2e/ui-gallery.spec.ts

@@ -1,34 +0,0 @@
-import { expect, test } from "../support/browser/strict-browser-test.ts";
-
-test("validates and reports the common text-field flow", async ({ page }) => {
-  await page.goto("/examples/ui");
-  await page.getByRole("button", { name: "입력 확인" }).click();
-
-  const field = page.getByRole("textbox", { name: "프로젝트 이름" });
-  await expect(field).toHaveAttribute("aria-invalid", "true");
-  await expect(field).toHaveAccessibleDescription(
-    /프로젝트 이름을 입력해 주세요/,
-  );
-
-  await field.fill("Starter");
-  await page.getByRole("button", { name: "입력 확인" }).click();
-  await expect(page.getByText("“Starter” 입력을 확인했습니다.")).toBeVisible();
-});
-
-test("traps modal interaction and restores focus to the trigger", async ({
-  page,
-}) => {
-  await page.goto("/examples/ui");
-  const trigger = page.getByRole("button", { name: "모달 열기" });
-  await trigger.click();
-
-  const dialog = page.getByRole("dialog", { name: "연동 확인" });
-  await expect(dialog).toBeVisible();
-  await expect(
-    dialog.getByRole("button", { name: "연동 확인 닫기" }),
-  ).toBeFocused();
-
-  await page.keyboard.press("Escape");
-  await expect(dialog).toBeHidden();
-  await expect(trigger).toBeFocused();
-});

tests/features/reference-feature/reference-contract.test.ts

@@ -1,9 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
 
-import {
-  buildRouteUrl,
-  parseRouteInput,
-} from "../../../src/presentation/routes/route-codecs.ts";
 import {
   mapReferenceOperation,
   toReferenceView,
@@ -47,35 +43,7 @@ describe("reference feature boundary contracts", () => {
     });
   });
 
-  it("round-trips one canonical filter through the URL codec", () => {
-    const filters = {
-      tags: ["open", "new"],
-      cursor: "a/b",
-      limit: 5,
-    };
-    const url = buildRouteUrl("REFERENCE_RESOURCE_LIST", { search: filters });
-    expect(url).toBe(
-      "/examples/reference-resources?cursor=a%2Fb&limit=5&tags=open&tags=new",
-    );
-    const parsed = parseRouteInput(
-      "REFERENCE_RESOURCE_LIST",
-      {},
-      new URL(url, "https://app.test").searchParams,
-    );
-    expect(parsed).toMatchObject({
-      success: true,
-      data: { search: filters },
-    });
-  });
-
   it("rejects unknown search and malformed DTO before mapping", () => {
-    expect(
-      parseRouteInput(
-        "REFERENCE_RESOURCE_LIST",
-        {},
-        new URLSearchParams("unknown=value"),
-      ),
-    ).toEqual({ success: false, code: "ROUTE_SEARCH_INVALID" });
     expect(
       validateReferencePayload("ReferenceResourceListPayload", [
         { id: "unsafe", name: 42 },
@@ -109,13 +77,7 @@ describe("reference feature boundary contracts", () => {
     });
   });
 
-  it("owns route and operation contributions in one removable contract", () => {
+  it("owns the retained API operation fixture contract", () => {
-    expect(Object.keys(REFERENCE_FEATURE_CONTRACT.routes)).toEqual([
-      "REFERENCE_RESOURCE_LIST",
-      "REFERENCE_RESOURCE_DETAIL",
-      "REFERENCE_RESOURCE_FORM",
-      "REFERENCE_RESOURCE_STATUS",
-    ]);
     expect(Object.keys(REFERENCE_FEATURE_CONTRACT.apiOperations)).toEqual([
       "LIST_REFERENCE_RESOURCES",
       "CREATE_REFERENCE_RESOURCE",

tests/features/reference-feature/reference-page.test.tsx

@@ -1,490 +0,0 @@
-// @vitest-environment jsdom
-
-import {
-  QueryClient,
-  QueryClientProvider,
-} from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { createDemoSessionAdapter } from "../../../src/adapters/auth/external-session-adapter.ts";
-import type { AuthSessionPort } from "../../../src/application/ports/auth-session-port.ts";
-import type { MutationIntentFactory } from "../../../src/application/ports/mutation-intent-factory.ts";
-import type {
-  ReferenceFeatureInput,
-  ReferenceResult,
-} from "../../../src/features/reference-feature/application/reference-feature-api.ts";
-import {
-  REFERENCE_FEATURE_ID,
-  REFERENCE_RESOURCE_INVALIDATION_TOPIC,
-  REFERENCE_RESOURCE_QUERY_NAMESPACE,
-} from "../../../src/features/reference-feature/contracts/reference-feature-contract.ts";
-import { INVALIDATION_REGISTRY } from "../../../src/features/installed-feature-contracts.ts";
-import type { ReferenceResourceView } from "../../../src/features/reference-feature/contracts/reference-mapper.ts";
-import { createFailure } from "../../../src/contracts/errors.ts";
-import type { QueryInvalidationCoordinator } from "../../../src/contracts/query-invalidation.ts";
-import { QueryInvalidationProvider } from "../../../src/presentation/adapters/query/query-invalidation-provider.tsx";
-import { MutationIntentProvider } from "../../../src/presentation/adapters/query/mutation-intent-provider.tsx";
-import { ServerStateScopeProvider } from "../../../src/presentation/adapters/query/server-state-scope-provider.tsx";
-import { createServerStateScopeRuntime } from "../../../src/adapters/query-cache/server-state-scope-runtime.ts";
-import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
-import { AppRouter } from "../../../src/presentation/routes/app-router.tsx";
-import { createTestApplication } from "../../helpers/create-test-application.ts";
-
-function renderReference(
-  input: ReferenceFeatureInput,
-  url = "/examples/reference-resources?limit=5",
-  session: AuthSessionPort = createDemoSessionAdapter("authenticated"),
-) {
-  window.history.pushState({}, "", url);
-  const client = new QueryClient({
-    defaultOptions: {
-      queries: { retry: false, gcTime: Infinity },
-      mutations: { retry: false },
-    },
-  });
-  const invalidation: QueryInvalidationCoordinator = Object.freeze({
-    async invalidate() {},
-    beginMutation() {
-      return Object.freeze({
-        async release() {},
-      });
-    },
-    async resetLocal() {},
-    dispose() {},
-  });
-  const serverStateScope = createServerStateScopeRuntime({
-    session,
-    queryInvalidation: invalidation,
-  });
-  let intentSequence = 0;
-  const mutationIntentFactory: MutationIntentFactory = Object.freeze({
-    create(input) {
-      intentSequence += 1;
-      return Object.freeze({
-        intentId: `reference-page-intent-${intentSequence}`,
-        operationId: input.operationId,
-        canonicalInputIdentity: input.canonicalInputIdentity,
-        ...(input.requiresIdempotencyKey
-          ? { idempotencyKey: `reference-page-key-${intentSequence}` }
-          : {}),
-        createdAtMonotonicMs: intentSequence,
-      });
-    },
-  });
-  return Object.assign(render(
-    <MutationIntentProvider factory={mutationIntentFactory}>
-      <QueryClientProvider client={client}>
-        <ServerStateScopeProvider runtime={serverStateScope}>
-          <QueryInvalidationProvider coordinator={invalidation}>
-            <ApplicationProvider
-              application={createTestApplication({
-                session,
-                featureInputs: { [REFERENCE_FEATURE_ID]: input },
-              })}
-            >
-              <AppRouter />
-            </ApplicationProvider>
-          </QueryInvalidationProvider>
-        </ServerStateScopeProvider>
-      </QueryClientProvider>
-    </MutationIntentProvider>,
-  ), { client });
-}
-
-function inputWith(
-  overrides: Partial<ReferenceFeatureInput> = {},
-): ReferenceFeatureInput {
-  return {
-    listResources: async () => ({ ok: true, value: [] }),
-    createResource: async ({ name }) => ({
-      ok: true,
-      value: {
-        resourceId: "created",
-        title: name,
-        createdAt: null,
-      },
-    }),
-    getResource: async (resourceId) => ({
-      ok: true,
-      value: {
-        resourceId,
-        title: "Detail",
-        createdAt: null,
-      },
-    }),
-    ...overrides,
-  };
-}
-
-describe("reference feature page states", () => {
-  it("mounts list and detail keys under the installed governed namespace", async () => {
-    expect(REFERENCE_RESOURCE_QUERY_NAMESPACE).toEqual({
-      namespaceId: "reference-resource",
-      namespaceVersion: 1,
-    });
-    const installedEdge = INVALIDATION_REGISTRY.edges.find(
-      (edge) => edge.topicId === REFERENCE_RESOURCE_INVALIDATION_TOPIC,
-    );
-    expect(installedEdge?.namespace).toEqual(
-      REFERENCE_RESOURCE_QUERY_NAMESPACE,
-    );
-
-    const list = renderReference(inputWith());
-    await screen.findByRole("heading", { name: "표시할 항목이 없습니다." });
-    const listKey = list.client.getQueryCache().getAll()[0]?.queryKey;
-    expect(listKey?.slice(0, 4)).toEqual([
-      "query",
-      2,
-      REFERENCE_RESOURCE_QUERY_NAMESPACE.namespaceId,
-      REFERENCE_RESOURCE_QUERY_NAMESPACE.namespaceVersion,
-    ]);
-    list.unmount();
-
-    const detail = renderReference(
-      inputWith(),
-      "/examples/reference-resources/reference-1",
-    );
-    await screen.findByText("Detail");
-    const detailKey = detail.client.getQueryCache().getAll()[0]?.queryKey;
-    expect(detailKey?.slice(0, 4)).toEqual([
-      "query",
-      2,
-      installedEdge?.namespace.namespaceId,
-      installedEdge?.namespace.namespaceVersion,
-    ]);
-    detail.unmount();
-  });
-
-  it("renders loading, success and empty states through the installed route", async () => {
-    let resolveList:
-      | ((result: ReferenceResult<readonly ReferenceResourceView[]>) => void)
-      | undefined;
-    const pending = new Promise<
-      ReferenceResult<readonly ReferenceResourceView[]>
-    >((resolve) => {
-      resolveList = resolve;
-    });
-    const loaded = renderReference(
-      inputWith({ listResources: async () => pending }),
-    );
-    expect(await screen.findByLabelText("불러오는 중")).toBeVisible();
-    resolveList?.({
-      ok: true,
-      value: [
-        {
-          resourceId: "reference-1",
-          title: "Loaded",
-          createdAt: null,
-        },
-      ],
-    });
-    expect(await screen.findByText("Loaded")).toBeVisible();
-    loaded.unmount();
-
-    renderReference(inputWith(), "/examples/reference-resources?limit=10");
-    expect(
-      await screen.findByRole("heading", {
-        name: "표시할 항목이 없습니다.",
-      }),
-    ).toBeVisible();
-  });
-
-  it("rejects invalid URL input before the feature application input", async () => {
-    const listResources = vi.fn();
-    renderReference(
-      inputWith({ listResources }),
-      "/examples/reference-resources?limit=invalid",
-    );
-    expect(
-      await screen.findByRole("heading", {
-        name: "올바르지 않은 주소입니다.",
-      }),
-    ).toBeVisible();
-    expect(listResources).not.toHaveBeenCalled();
-  });
-
-  it("renders backend forbidden even when the client access hint allowed entry", async () => {
-    const user = userEvent.setup();
-    renderReference(
-      inputWith({
-        listResources: async () => ({
-          ok: false,
-          error: createFailure(
-            "FORBIDDEN",
-            "LIST_REFERENCE_RESOURCES",
-            0,
-          ),
-        }),
-      }),
-    );
-    expect(await screen.findByRole("alert")).toHaveTextContent(
-      "이 작업을 수행할 권한이 없습니다.",
-    );
-    await user.click(
-      screen.getByRole("button", { name: "안전한 화면으로 이동" }),
-    );
-    expect(
-      await screen.findByRole("heading", {
-        level: 1,
-        name: "Tech Log",
-      }),
-    ).toBeVisible();
-  });
-
-  it("starts sign-in with the current route for a backend auth failure", async () => {
-    const user = userEvent.setup();
-    const demoSession = createDemoSessionAdapter("authenticated");
-    const beginSignIn = vi.fn(async () => {});
-    const session = { ...demoSession, beginSignIn };
-    renderReference(
-      inputWith({
-        listResources: async () => ({
-          ok: false,
-          error: createFailure(
-            "AUTH_REQUIRED",
-            "LIST_REFERENCE_RESOURCES",
-            0,
-          ),
-        }),
-      }),
-      "/examples/reference-resources?limit=5",
-      session,
-    );
-
-    await user.click(await screen.findByRole("button", { name: "로그인" }));
-    expect(beginSignIn).toHaveBeenCalledWith(
-      "/examples/reference-resources?limit=5",
-    );
-  });
-
-  it("falls back to a public route when starting sign-in fails", async () => {
-    const user = userEvent.setup();
-    const demoSession = createDemoSessionAdapter("authenticated");
-    const beginSignIn = vi.fn(async () => {
-      throw new Error("identity provider unavailable");
-    });
-    renderReference(
-      inputWith({
-        listResources: async () => ({
-          ok: false,
-          error: createFailure(
-            "AUTH_REQUIRED",
-            "LIST_REFERENCE_RESOURCES",
-            0,
-          ),
-        }),
-      }),
-      "/examples/reference-resources?limit=5",
-      { ...demoSession, beginSignIn },
-    );
-
-    await user.click(await screen.findByRole("button", { name: "로그인" }));
-    expect(
-      await screen.findByRole("heading", {
-        level: 1,
-        name: "Tech Log",
-      }),
-    ).toBeVisible();
-  });
-
-  it("deduplicates create, preserves input and surfaces a conflict", async () => {
-    const user = userEvent.setup();
-    let finish:
-      | ((result: ReferenceResult<ReferenceResourceView>) => void)
-      | undefined;
-    const createResource = vi.fn(
-      () =>
-        new Promise<ReferenceResult<ReferenceResourceView>>((resolve) => {
-          finish = resolve;
-        }),
-    );
-    renderReference(
-      inputWith({ createResource }),
-      "/examples/reference-resources/new",
-    );
-    await screen.findByRole("heading", {
-      name: "Reference resource 만들기",
-    });
-    await user.type(
-      screen.getByRole("textbox", { name: /새 항목 이름/ }),
-      "Conflicting",
-    );
-    await user.type(screen.getByLabelText("설명"), "Keep this input");
-    const submit = screen.getByRole("button", { name: "저장" });
-    await user.dblClick(submit);
-
-    await waitFor(() => expect(createResource).toHaveBeenCalledOnce());
-    expect(screen.getByRole("button", { name: "저장 중…" })).toBeDisabled();
-
-    finish?.({
-      ok: false,
-      error: createFailure(
-        "CONFLICT",
-        "CREATE_REFERENCE_RESOURCE",
-        0,
-        { effect: "NOT_APPLIED" },
-      ),
-    });
-    expect(await screen.findByText(/다른 변경과 충돌했습니다/)).toBeVisible();
-    expect(
-      screen.getByRole("textbox", { name: /새 항목 이름/ }),
-    ).toHaveValue("Conflicting");
-    expect(screen.getByLabelText("설명")).toHaveValue("Keep this input");
-  });
-
-  it("blocks resubmit and exposes only reconciliation for an unknown create effect", async () => {
-    const user = userEvent.setup();
-    const createResource = vi.fn(async () => ({
-      ok: false as const,
-      error: createFailure(
-        "SERVER_FAILURE",
-        "CREATE_REFERENCE_RESOURCE",
-        0,
-        { effect: "MAYBE_APPLIED" },
-      ),
-    }));
-    renderReference(
-      inputWith({ createResource }),
-      "/examples/reference-resources/new",
-    );
-    await user.type(
-      await screen.findByRole("textbox", { name: /새 항목 이름/ }),
-      "Unknown result",
-    );
-    await user.click(screen.getByRole("button", { name: "저장" }));
-
-    expect(
-      await screen.findByText("변경 결과를 확인할 수 없습니다."),
-    ).toBeVisible();
-    expect(screen.getByRole("button", { name: "저장" })).toBeDisabled();
-    expect(
-      screen.queryByText("저장하지 못했습니다. 잠시 후 다시 시도해 주세요."),
-    ).not.toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "저장" }));
-    expect(createResource).toHaveBeenCalledOnce();
-    expect(
-      screen.getByRole("textbox", { name: /새 항목 이름/ }),
-    ).toHaveValue("Unknown result");
-
-    await user.click(
-      screen.getByRole("button", { name: "변경되지 않음으로 확인" }),
-    );
-    await waitFor(() =>
-      expect(screen.getByRole("button", { name: "저장" })).toBeEnabled(),
-    );
-    expect(createResource).toHaveBeenCalledOnce();
-    expect(
-      screen.getByRole("textbox", { name: /새 항목 이름/ }),
-    ).toHaveValue("Unknown result");
-  });
-
-  it("settles the form after confirming an unknown create was applied", async () => {
-    const user = userEvent.setup();
-    const createResource = vi.fn(async () => ({
-      ok: false as const,
-      error: createFailure(
-        "SERVER_FAILURE",
-        "CREATE_REFERENCE_RESOURCE",
-        0,
-        { effect: "MAYBE_APPLIED" },
-      ),
-    }));
-    renderReference(
-      inputWith({ createResource }),
-      "/examples/reference-resources/new",
-    );
-    const name = await screen.findByRole("textbox", {
-      name: /새 항목 이름/,
-    });
-    await user.type(name, "Already created");
-    await user.click(screen.getByRole("button", { name: "저장" }));
-    await user.click(
-      await screen.findByRole("button", { name: "변경됨으로 확인" }),
-    );
-
-    expect(await screen.findByRole("status")).toHaveTextContent("저장했습니다.");
-    expect(name).toHaveValue("");
-    await user.click(screen.getByRole("button", { name: "저장" }));
-    expect(createResource).toHaveBeenCalledOnce();
-  });
-
-  it("treats an applied-confirmed failure as a settled create", async () => {
-    const user = userEvent.setup();
-    const createResource = vi.fn(async () => ({
-      ok: false as const,
-      error: createFailure(
-        "SERVER_FAILURE",
-        "CREATE_REFERENCE_RESOURCE",
-        0,
-        { effect: "APPLIED_CONFIRMED" },
-      ),
-    }));
-    renderReference(
-      inputWith({ createResource }),
-      "/examples/reference-resources/new",
-    );
-    const name = await screen.findByRole("textbox", {
-      name: /새 항목 이름/,
-    });
-    await user.type(name, "Committed despite response");
-    await user.click(screen.getByRole("button", { name: "저장" }));
-
-    expect(await screen.findByRole("status")).toHaveTextContent("저장했습니다.");
-    expect(name).toHaveValue("");
-    expect(
-      screen.queryByText("저장하지 못했습니다. 잠시 후 다시 시도해 주세요."),
-    ).not.toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "저장" }));
-    expect(createResource).toHaveBeenCalledOnce();
-  });
-
-  it("keeps stale data visible during refresh failure and recovers on retry", async () => {
-    const user = userEvent.setup();
-    const listResources = vi
-      .fn<ReferenceFeatureInput["listResources"]>()
-      .mockResolvedValueOnce({
-        ok: true,
-        value: [
-          {
-            resourceId: "existing",
-            title: "Existing",
-            createdAt: null,
-          },
-        ],
-      })
-      .mockResolvedValueOnce({
-        ok: false,
-        error: createFailure(
-          "SERVER_FAILURE",
-          "LIST_REFERENCE_RESOURCES",
-          0,
-        ),
-      })
-      .mockResolvedValue({
-        ok: true,
-        value: [
-          {
-            resourceId: "recovered",
-            title: "Recovered",
-            createdAt: null,
-          },
-        ],
-      });
-    renderReference(inputWith({ listResources }));
-    await screen.findByText("Existing");
-    await user.click(screen.getByRole("button", { name: "새로고침" }));
-
-    expect(
-      await screen.findByText("기존 정보를 표시하고 있습니다."),
-    ).toBeVisible();
-    expect(screen.getByText("Existing")).toBeVisible();
-    await user.click(screen.getByRole("button", { name: "다시 시도" }));
-    expect(await screen.findByText("Recovered")).toBeVisible();
-    await waitFor(() =>
-      expect(screen.queryByText("stale-degraded")).not.toBeInTheDocument(),
-    );
-    expect(listResources).toHaveBeenCalledTimes(3);
-  });
-});

tests/features/reference-feature/reference-production-vertical.test.tsx

@@ -1,121 +0,0 @@
-// @vitest-environment jsdom
-
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import {
-  afterAll,
-  afterEach,
-  beforeAll,
-  describe,
-  expect,
-  it,
-  vi,
-} from "vitest";
-
-import { createRuntimeComposition } from "../../../src/bootstrap/create-runtime-composition.ts";
-import { RuntimeApplication } from "../../../src/bootstrap/runtime-application.tsx";
-import { createBootstrapHandlers } from "../../mocks/handlers/bootstrap.ts";
-import { createReferenceScenarioHandlers } from "../../mocks/handlers/reference-resources.ts";
-import { createStrictMockServer } from "../../mocks/server.ts";
-
-const runtimeConfig = {
-  APP_ENV: "local",
-  API_BASE_URL: "https://api.test",
-  REQUEST_TIMEOUT_MS: 10_000,
-  MAX_RETRY_ATTEMPTS: 0,
-  TELEMETRY_ENABLED: false,
-  AUTH_MODE: "demo",
-  CONFIG_SCHEMA_VERSION: "1",
-  API_CONTRACT_VERSION: "1",
-  RELEASE_MANIFEST_URL: "/release-manifest.json",
-  BUILD_ID: "local-build",
-  RELEASE_ID: "local-release",
-};
-const releaseManifest = {
-  schemaVersion: 1,
-  appVersion: "0.1.0",
-  buildId: "local-build",
-  commitSha: "local",
-  configSchemaVersion: "1",
-  apiContractVersion: "1",
-  assetManifestHash: "test-hash",
-  releaseId: "local-release",
-  builtAt: "2026-07-26T00:00:00.000Z",
-  routeChunks: {
-    "route-home": "assets/home.js",
-    "route-examples-ui": "assets/ui.js",
-    "route-examples-states": "assets/states.js",
-    "route-examples-auth": "assets/auth.js",
-    "route-reference-resources": "assets/reference.js",
-    "route-reference-resource-detail": "assets/reference-detail.js",
-    "route-reference-resource-form": "assets/reference-form.js",
-    "route-reference-resource-status": "assets/reference-status.js",
-    "route-not-found": "assets/not-found.js",
-  },
-};
-
-const listRequests = vi.fn();
-const createRequests = vi.fn();
-const resources = [{ id: "reference-1", name: "Existing" }];
-const mockApi = createStrictMockServer(
-  ...createBootstrapHandlers(runtimeConfig, releaseManifest),
-  ...createReferenceScenarioHandlers({
-    resources,
-    onList: listRequests,
-    onCreate: createRequests,
-  }),
-);
-
-beforeAll(mockApi.listen);
-afterEach(() => {
-  mockApi.reset();
-  listRequests.mockClear();
-  createRequests.mockClear();
-  resources.splice(1);
-});
-afterAll(mockApi.close);
-
-const absoluteFetch: typeof fetch = (input, init) => {
-  if (input instanceof Request) return fetch(input, init);
-  const url = new URL(
-    input instanceof URL ? input.href : input,
-    "http://app.test",
-  );
-  return fetch(url, init);
-};
-
-describe("reference feature production vertical path", () => {
-  it("traverses bootstrap, router, application, HTTP schema/mapper and query cache", async () => {
-    const user = userEvent.setup();
-    const composition = await createRuntimeComposition({
-      fetcher: absoluteFetch,
-      host: {},
-    });
-    window.history.pushState(
-      {},
-      "",
-      "/examples/reference-resources?tags=open&tags=new&limit=5",
-    );
-    render(<RuntimeApplication composition={composition} />);
-
-    await user.click(
-      await screen.findByRole("button", { name: "로그인 시작" }),
-    );
-    expect(await screen.findByText("Existing")).toBeVisible();
-    expect(listRequests).toHaveBeenCalledWith(
-      "?limit=5&tags=open&tags=new",
-    );
-
-    await user.click(screen.getByRole("button", { name: "새 항목 만들기" }));
-    await user.type(
-      await screen.findByRole("textbox", { name: /새 항목 이름/ }),
-      "  Created  ",
-    );
-    await user.click(screen.getByRole("button", { name: "저장" }));
-    expect(await screen.findByText("저장했습니다.")).toBeVisible();
-    await user.click(screen.getByRole("button", { name: "목록으로 돌아가기" }));
-    expect(await screen.findByText("Created")).toBeVisible();
-    expect(createRequests).toHaveBeenCalledWith({ name: "Created" });
-    expect(listRequests.mock.calls.length).toBeGreaterThanOrEqual(2);
-  });
-});

tests/features/tech-log/public-discovery-screens.test.tsx

@@ -27,9 +27,9 @@ import { ExploreKindPage } from "../../../src/features/tech-log/presentation/pub
 import { ExplorePage } from "../../../src/features/tech-log/presentation/public/pages/explore-page.tsx";
 import { HomePage } from "../../../src/features/tech-log/presentation/public/pages/home-page.tsx";
 import { SearchPage } from "../../../src/features/tech-log/presentation/public/pages/search-page.tsx";
+import { PublicNotFoundPage as NotFoundPage } from "../../../src/features/tech-log/presentation/public/pages/public-not-found-page.tsx";
 import { TECH_LOG_ROUTE_CODECS } from "../../../src/features/tech-log/presentation/tech-log-route-codecs.ts";
 import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
-import NotFoundPage from "../../../src/presentation/pages/not-found-page.tsx";
 import { createGroupedRouteObjects } from "../../../src/presentation/routes/app-router.tsx";
 import { PLATFORM_ROUTE_CODECS } from "../../../src/presentation/routes/platform-route-codecs.ts";
 import { createTestApplication } from "../../helpers/create-test-application.ts";

tests/features/tech-log/public-document-screens.test.tsx

@@ -18,10 +18,10 @@ import { CasePage } from "../../../src/features/tech-log/presentation/public/pag
 import { QuestionPage } from "../../../src/features/tech-log/presentation/public/pages/question-page.tsx";
 import { ReferencePage } from "../../../src/features/tech-log/presentation/public/pages/reference-page.tsx";
 import { TopicPage } from "../../../src/features/tech-log/presentation/public/pages/topic-page.tsx";
+import { PublicNotFoundPage as NotFoundPage } from "../../../src/features/tech-log/presentation/public/pages/public-not-found-page.tsx";
 import { PublicShell } from "../../../src/features/tech-log/presentation/public/public-shell.tsx";
 import { TECH_LOG_ROUTE_CODECS } from "../../../src/features/tech-log/presentation/tech-log-route-codecs.ts";
 import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
-import NotFoundPage from "../../../src/presentation/pages/not-found-page.tsx";
 import { createGroupedRouteObjects } from "../../../src/presentation/routes/app-router.tsx";
 import { PLATFORM_ROUTE_CODECS } from "../../../src/presentation/routes/platform-route-codecs.ts";
 import { createTestApplication } from "../../helpers/create-test-application.ts";

tests/features/tech-log/route-contract.test.ts

@@ -197,9 +197,11 @@ describe("TechLog route boundary contract", () => {
     ).toThrow();
   });
 
-  it("does not install unfinished TechLog route or runtime entries", () => {
+  it("atomically installs the complete TechLog route and runtime inventories", () => {
-    expect(Object.keys(ROUTE_REGISTRY).some((routeId) => routeId.startsWith("TECH_LOG_"))).toBe(false);
+    expect(Object.keys(ROUTE_REGISTRY)).toEqual(
-    expect(Object.keys(ROUTE_RUNTIME).some((routeId) => routeId.startsWith("TECH_LOG_"))).toBe(false);
+      expectedRoutes.map(([routeId]) => routeId),
-    expect(Object.keys(ROUTE_REGISTRY)).toEqual(Object.keys(ROUTE_RUNTIME));
+    );
+    expect(Object.keys(ROUTE_RUNTIME)).toEqual(Object.keys(ROUTE_REGISTRY));
+    expect(ROUTE_REGISTRY).toEqual(TECH_LOG_ROUTE_REGISTRY);
   });
 });

tests/features/tech-log/studio-publication-flow.test.tsx

@@ -0,0 +1,302 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
+
+import { createTechLogFeatureInstalledInput } from "../../../src/features/tech-log/adapters/create-tech-log-feature-input.ts";
+import { FIXTURE_IDS } from "../../../src/features/tech-log/adapters/mock/fixtures.ts";
+import { StudioGatewayError } from "../../../src/features/tech-log/application/ports/studio-gateway-error.ts";
+import type { StudioGateway } from "../../../src/features/tech-log/application/ports/studio-gateway.ts";
+import type { WorkingCopyInput } from "../../../src/features/tech-log/contracts/studio/contract.ts";
+import { PublicationEventPreviewScreen } from "../../../src/features/tech-log/presentation/studio/components/publication-event-preview-screen.tsx";
+import { PublicationList } from "../../../src/features/tech-log/presentation/studio/components/publication-list.tsx";
+import { PublishScreen } from "../../../src/features/tech-log/presentation/studio/components/publish-screen.tsx";
+import { StudioProvider } from "../../../src/features/tech-log/presentation/studio/studio-provider.tsx";
+
+const originalShowModal = HTMLDialogElement.prototype.showModal;
+const originalClose = HTMLDialogElement.prototype.close;
+
+class NoopIntersectionObserver implements IntersectionObserver {
+  readonly root = null;
+  readonly rootMargin = "0px";
+  readonly scrollMargin = "0px";
+  readonly thresholds = [0];
+
+  disconnect() {}
+  observe() {}
+  takeRecords(): IntersectionObserverEntry[] {
+    return [];
+  }
+  unobserve() {}
+}
+
+beforeAll(() => {
+  vi.stubGlobal("IntersectionObserver", NoopIntersectionObserver);
+});
+
+afterAll(() => {
+  vi.unstubAllGlobals();
+});
+
+beforeEach(() => {
+  Object.defineProperty(HTMLDialogElement.prototype, "showModal", {
+    configurable: true,
+    value(this: HTMLDialogElement) {
+      this.setAttribute("open", "");
+    },
+  });
+  Object.defineProperty(HTMLDialogElement.prototype, "close", {
+    configurable: true,
+    value(this: HTMLDialogElement) {
+      this.removeAttribute("open");
+      this.dispatchEvent(new Event("close"));
+    },
+  });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  Object.defineProperty(HTMLDialogElement.prototype, "showModal", {
+    configurable: true,
+    value: originalShowModal,
+  });
+  Object.defineProperty(HTMLDialogElement.prototype, "close", {
+    configurable: true,
+    value: originalClose,
+  });
+});
+
+function renderInStudio(
+  node: React.ReactNode,
+  gateway: StudioGateway = createTechLogFeatureInstalledInput().input.createStudioGateway(),
+  navigate: (href: string) => void = () => undefined,
+) {
+  return render(
+    <MemoryRouter initialEntries={["/studio"]}>
+      <StudioProvider createGateway={() => gateway} navigate={navigate}>
+        {node}
+      </StudioProvider>
+    </MemoryRouter>,
+  );
+}
+
+async function warningReadyDocument(gateway: StudioGateway) {
+  const input: WorkingCopyInput = {
+    kind: "CASE",
+    title: "게시 경고 예시",
+    slug: "publish-warning-example",
+    summary: "경고 확인 뒤 게시합니다.",
+    topicId: FIXTURE_IDS.topicJpa,
+    projectId: null,
+    relations: [],
+    problem: "경고가 있습니다.",
+    conclusion: "확인 뒤 게시합니다.",
+    environment: "Studio",
+    reproduction: "Mock",
+    lastVerifiedOn: "2026-08-14",
+    bodyMarkdown: "게시할 본문",
+  };
+  const document = await gateway.createDocument(input, {
+    idempotencyKey: "publication-test-create",
+  });
+  const validation = await gateway.validateDocument(
+    document.id,
+    { expectedVersion: 1 },
+    { idempotencyKey: "publication-test-validation" },
+  );
+  await gateway.createPreview(
+    document.id,
+    { expectedVersion: 1, validationId: validation.validationId },
+    { idempotencyKey: "publication-test-preview" },
+  );
+  return document;
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((nextResolve, nextReject) => {
+    resolve = nextResolve;
+    reject = nextReject;
+  });
+  return { promise, resolve, reject };
+}
+
+describe("TechLog Studio publication flow", () => {
+  it("blocks invalid and stale saved versions before a publish command can start", async () => {
+    const invalid = renderInStudio(
+      <PublishScreen documentId={FIXTURE_IDS.edgeTokenQuestion} />,
+    );
+    expect(await screen.findByText("검증 오류를 먼저 수정해야 합니다")).toBeVisible();
+    expect(screen.queryByRole("button", { name: "게시" })).not.toBeInTheDocument();
+    invalid.unmount();
+
+    renderInStudio(<PublishScreen documentId={FIXTURE_IDS.fetchJoinCase} />);
+    expect(await screen.findByText("검증 결과가 현재 버전과 다릅니다")).toBeVisible();
+    expect(screen.getByRole("link", { name: "다시 검증" })).toHaveAttribute(
+      "href",
+      `/studio/documents/${FIXTURE_IDS.fetchJoinCase}/validation`,
+    );
+  });
+
+  it("publishes a current warning preview only after every warning is acknowledged", async () => {
+    const gateway = createTechLogFeatureInstalledInput().input.createStudioGateway();
+    const document = await warningReadyDocument(gateway);
+    const destinations: string[] = [];
+    renderInStudio(
+      <PublishScreen documentId={document.id} />,
+      gateway,
+      (href) => destinations.push(href),
+    );
+
+    const publish = await screen.findByRole("button", { name: "게시" });
+    expect(publish).toBeDisabled();
+    await userEvent.click(screen.getByRole("checkbox", { name: /PROJECT_MISSING/ }));
+    expect(publish).toBeEnabled();
+    await userEvent.click(publish);
+
+    await waitFor(() =>
+      expect(destinations[0]).toMatch(
+        /^\/studio\/publications\/[0-9a-f-]+\/preview$/,
+      ),
+    );
+    expect(screen.getByRole("status", { name: "" })).toHaveTextContent("게시했습니다.");
+    expect((await gateway.listPublications({ limit: 100 })).items[0]).toMatchObject({
+      event: { type: "PUBLISHED", publishedVersion: 1 },
+      publication: { status: "PUBLISHED", publicPath: "/cases/publish-warning-example" },
+    });
+  });
+
+  it("keeps the publish pending state, preserves gateway command order, and retries with a new key", async () => {
+    const user = userEvent.setup();
+    const base = createTechLogFeatureInstalledInput().input.createStudioGateway();
+    const document = await warningReadyDocument(base);
+    const first = deferred<never>();
+    const calls: string[] = [];
+    const keys: string[] = [];
+    const publishDocument = vi
+      .fn<StudioGateway["publishDocument"]>()
+      .mockImplementationOnce((_id, _command, options) => {
+        calls.push("publishDocument");
+        keys.push(options.idempotencyKey);
+        return first.promise;
+      })
+      .mockImplementation((...args) => {
+        calls.push("publishDocument");
+        keys.push(args[2].idempotencyKey);
+        return base.publishDocument(...args);
+      });
+    const gateway = {
+      ...base,
+      getDocument(...args: Parameters<StudioGateway["getDocument"]>) {
+        calls.push("getDocument");
+        return base.getDocument(...args);
+      },
+      getCurrentPreview(...args: Parameters<StudioGateway["getCurrentPreview"]>) {
+        calls.push("getCurrentPreview");
+        return base.getCurrentPreview(...args);
+      },
+      publishDocument,
+    } satisfies StudioGateway;
+    renderInStudio(<PublishScreen documentId={document.id} />, gateway);
+
+    await user.click(await screen.findByRole("checkbox", { name: /PROJECT_MISSING/ }));
+    await user.click(screen.getByRole("button", { name: "게시" }));
+    expect(screen.getByRole("button", { name: "게시 중…" })).toBeDisabled();
+    expect(calls.slice(0, 3)).toEqual([
+      "getDocument",
+      "getCurrentPreview",
+      "publishDocument",
+    ]);
+
+    first.reject(new StudioGatewayError({
+      type: "https://techlog.local/problems/studio-unavailable",
+      title: "STUDIO_UNAVAILABLE",
+      status: 503,
+      detail: "Studio가 잠시 응답하지 않습니다.",
+      code: "STUDIO_UNAVAILABLE",
+      retryable: true,
+    }));
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "Studio가 잠시 응답하지 않습니다.",
+    );
+    await user.click(screen.getByRole("button", { name: "게시" }));
+    await waitFor(() => expect(publishDocument).toHaveBeenCalledTimes(2));
+    expect(keys[1]).not.toBe(keys[0]);
+  });
+
+  it("filters publication events and recovers a failed history read", async () => {
+    const user = userEvent.setup();
+    const base = createTechLogFeatureInstalledInput().input.createStudioGateway();
+    const listPublications = vi
+      .fn<StudioGateway["listPublications"]>()
+      .mockRejectedValueOnce(new Error("offline"))
+      .mockImplementation((query, options) => base.listPublications(query, options));
+    renderInStudio(<PublicationList />, { ...base, listPublications });
+
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "게시 기록을 불러오지 못했습니다offline",
+    );
+    await user.click(screen.getByRole("button", { name: "다시 시도" }));
+    expect(await screen.findByRole("heading", { name: "Redis Adapter가 도메인 TTL 정책을 소유하지 않는 이유" })).toBeVisible();
+
+    await user.selectOptions(screen.getByLabelText("이벤트"), "UNPUBLISHED");
+    await user.type(screen.getByLabelText("검색"), "Fetch 전략");
+    await user.click(screen.getByRole("button", { name: "적용" }));
+    expect(await screen.findByRole("heading", { name: "JPA 목록 조회에서 Fetch 전략을 선택하는 기준" })).toBeVisible();
+    expect(screen.queryByRole("heading", { name: "Redis Adapter가 도메인 TTL 정책을 소유하지 않는 이유" })).not.toBeInTheDocument();
+  });
+
+  it("unpublishes only the selected current row after the source confirmation", async () => {
+    const user = userEvent.setup();
+    const gateway = createTechLogFeatureInstalledInput().input.createStudioGateway();
+    renderInStudio(<PublicationList />, gateway);
+    await user.click(
+      await screen.findByRole("button", { name: /Redis Adapter.*게시 취소/ }),
+    );
+
+    expect(screen.getByRole("dialog", { name: "게시를 취소할까요?" })).toHaveTextContent(
+      "Studio 게시 상태를 중단하고 게시 취소 이벤트를 남깁니다.",
+    );
+    expect(screen.getByText("작업본과 이전 Snapshot은 보존됩니다.")).toBeVisible();
+    await user.click(screen.getByRole("button", { name: "게시 취소 확인" }));
+
+    await waitFor(() => expect(screen.getAllByText("게시를 취소했습니다.").length).toBeGreaterThanOrEqual(1));
+    expect(await screen.findAllByRole("link", { name: "게시 취소 전 Snapshot 보기" })).not.toHaveLength(0);
+  });
+
+  it("renders the event's immutable snapshot instead of a newer working copy", async () => {
+    const view = renderInStudio(
+      <PublicationEventPreviewScreen publicationEventId={FIXTURE_IDS.fetchPublishedEvent} />,
+    );
+
+    expect(await screen.findByRole("heading", { level: 1, name: "컬렉션 Fetch Join과 페이징은 왜 충돌하는가" })).toBeVisible();
+    expect(screen.getByText(/반환된 20건 뒤에서 전체 컬렉션이 로드되는 과정/)).toBeVisible();
+    expect(screen.queryByText("게시 후 본문 측정값을 보완한 저장본입니다.")).not.toBeInTheDocument();
+    expect(view.container.querySelectorAll("main")).toHaveLength(0);
+    expect(view.container.querySelector(".public-record-embedded")).toBeInTheDocument();
+  });
+
+  it("keeps unknown publication events inside the Studio not-found screen", async () => {
+    renderInStudio(
+      <PublicationEventPreviewScreen publicationEventId="99999999-9999-4999-8999-999999999999" />,
+    );
+
+    expect(await screen.findByRole("heading", { level: 1, name: "게시 기록을 찾을 수 없습니다" })).toBeVisible();
+    expect(screen.getByRole("link", { name: "게시 기록으로 돌아가기" })).toHaveAttribute(
+      "href",
+      "/studio/publications",
+    );
+  });
+});

tests/unit/navigation-policy.test.ts

@@ -23,7 +23,7 @@ describe("installed route registry", () => {
   });
 
   it("allows public routes without consulting a product permission", () => {
-    expect(decideRouteAccess("APP_HOME", "unauthenticated")).toEqual({
+    expect(decideRouteAccess("TECH_LOG_HOME", "unauthenticated")).toEqual({
       allowed: true,
       action: "none",
     });

vite.config.ts

@@ -4,10 +4,54 @@ import tailwindcss from "@tailwindcss/vite";
 
 import { viteModuleInventoryPlugin } from "./scripts/lib/vite-module-inventory.ts";
 
+const techLogRouteChunks = Object.freeze({
+  "/public/pages/home-page.tsx": "route-tech-log-home",
+  "/public/pages/explore-page.tsx": "route-tech-log-explore",
+  "/public/pages/explore-kind-page.tsx": "route-tech-log-explore-kind",
+  "/public/pages/case-page.tsx": "route-tech-log-case",
+  "/public/pages/reference-page.tsx": "route-tech-log-reference",
+  "/public/pages/question-page.tsx": "route-tech-log-question",
+  "/public/pages/topic-page.tsx": "route-tech-log-topic",
+  "/public/pages/projects-page.tsx": "route-tech-log-projects",
+  "/public/pages/project-overview-page.tsx": "route-tech-log-project",
+  "/public/pages/project-records-page.tsx": "route-tech-log-project-records",
+  "/public/pages/project-decisions-page.tsx": "route-tech-log-project-decisions",
+  "/public/pages/project-activity-page.tsx": "route-tech-log-project-activity",
+  "/public/pages/releases-page.tsx": "route-tech-log-releases",
+  "/public/pages/release-page.tsx": "route-tech-log-release",
+  "/public/pages/profile-page.tsx": "route-tech-log-profile",
+  "/public/pages/search-page.tsx": "route-tech-log-search",
+  "/studio/pages/studio-home-page.tsx": "route-tech-log-studio-home",
+  "/studio/pages/documents-page.tsx": "route-tech-log-studio-documents",
+  "/studio/pages/new-document-page.tsx": "route-tech-log-studio-document-new",
+  "/studio/pages/document-edit-page.tsx": "route-tech-log-studio-document-edit",
+  "/studio/pages/document-validation-page.tsx": "route-tech-log-studio-document-validation",
+  "/studio/pages/document-preview-page.tsx": "route-tech-log-studio-document-preview",
+  "/studio/pages/document-publish-page.tsx": "route-tech-log-studio-document-publish",
+  "/studio/pages/publications-page.tsx": "route-tech-log-studio-publications",
+  "/studio/pages/publication-preview-page.tsx": "route-tech-log-studio-publication-preview",
+  "/studio/pages/studio-not-found-page.tsx": "route-tech-log-studio-not-found",
+  "/public/pages/public-not-found-page.tsx": "route-not-found",
+} as const);
+
+function routeChunkName(moduleId: string): string | undefined {
+  const normalized = moduleId.replaceAll("\\", "/");
+  const featurePath = "/src/features/tech-log/presentation";
+  const featureIndex = normalized.lastIndexOf(featurePath);
+  if (featureIndex < 0) return undefined;
+  const routePath = normalized.slice(featureIndex + featurePath.length);
+  return techLogRouteChunks[routePath as keyof typeof techLogRouteChunks];
+}
+
 export default defineConfig({
   plugins: [react(), tailwindcss(), viteModuleInventoryPlugin()],
   build: {
     manifest: true,
     sourcemap: false,
+    rolldownOptions: {
+      output: {
+        manualChunks: routeChunkName,
+      },
+    },
   },
 });