feat: add removable reference feature vertical slice

2026-07-26 14:56:34 +09:00
parent 980981bc86
commit c11be43f20
87 changed files with 1881 additions and 1114 deletions
@@ -46,6 +46,8 @@ const noAuthSession =
 *   random?: () => number,
 *   validatePayload?: (schemaId: string, value: unknown) =>
 *     { success: true, data: unknown } | { success: false },
+ *   validateRequest?: (schemaId: string, value: unknown) =>
+ *     { success: true, data: unknown } | { success: false },
 *   mapPayload?: (operationId: string, payload: unknown) => unknown,
 *   idempotencyKeyFactory?: () => string,
 *   timeoutMs?: number,
@@ -61,6 +63,8 @@ export function createHttpClient(dependencies) {
  const random = dependencies.random ?? Math.random;
  const validatePayload =
    dependencies.validatePayload ?? validateOperationPayload;
+  const validateRequest =
+    dependencies.validateRequest ?? validateOperationRequest;
  const mapPayload = dependencies.mapPayload ?? mapOperationPayload;
  const idempotencyKeyFactory =
    dependencies.idempotencyKeyFactory ?? (() => crypto.randomUUID());
@@ -193,7 +197,7 @@ export function createHttpClient(dependencies) {
          ? input.body
          : {};
    if (operation.requestSource !== "none") {
-      const requestValidation = validateOperationRequest(
+      const requestValidation = validateRequest(
        operation.requestSchema,
        requestValue,
      );
@@ -1,30 +1,5 @@
-import { createResource } from "../../domain/models/resource.js";
-
-/** @param {unknown} value */
-export function mapResourceDto(value) {
-  if (!value || typeof value !== "object") {
-    throw new TypeError("Validated resource DTO is required");
-  }
-  const dto = /** @type {Record<string, unknown>} */ (value);
-  if (typeof dto.id !== "string" || typeof dto.name !== "string") {
-    throw new TypeError("Validated resource DTO invariants were breached");
-  }
-
-  return createResource({
-    id: dto.id,
-    displayName: dto.name,
-    createdAt: typeof dto.createdAt === "string" ? dto.createdAt : null,
-  });
-}
-
 /** @param {string} operationId @param {unknown} payload */
 export function mapOperationPayload(operationId, payload) {
-  if (operationId === "LIST_SAMPLE_RESOURCES") {
-    if (!Array.isArray(payload)) throw new TypeError("Expected a resource list");
-    return payload.map(mapResourceDto);
-  }
-  if (operationId === "CREATE_SAMPLE_RESOURCE") {
-    return mapResourceDto(payload);
-  }
+  void payload;
  throw new TypeError(`No boundary mapper registered for ${operationId}`);
 }
@@ -37,35 +37,11 @@ export const responseEnvelopeSchema = z.discriminatedUnion("success", [
  failureEnvelopeSchema,
 ]);

-const sampleResourceSchema = z
-  .object({
-    id: z.string().min(1),
-    name: z.string().min(1),
-    createdAt: z.string().optional(),
-  })
-  .passthrough();
-
 const payloadSchemas =
-  /** @type {Readonly<Record<string, z.ZodType>>} */ (Object.freeze({
-  SampleResourceListPayload: z.array(sampleResourceSchema),
-  SampleResourcePayload: sampleResourceSchema,
-}));
+  /** @type {Readonly<Record<string, z.ZodType>>} */ (Object.freeze({}));

 const requestSchemas =
-  /** @type {Readonly<Record<string, z.ZodType>>} */ (Object.freeze({
-  SampleResourceListQuery: z
-    .object({
-      cursor: z.string().optional(),
-      limit: z.int().min(1).max(100).default(20),
-      tags: z.array(z.string().trim().min(1)).optional(),
-    })
-    .strict(),
-  CreateSampleResourceCommand: z
-    .object({
-      name: z.string().trim().min(1).max(120),
-    })
-    .strict(),
-}));
+  /** @type {Readonly<Record<string, z.ZodType>>} */ (Object.freeze({}));

 /** @param {unknown} value */
 export function validateEnvelope(value) {
@@ -15,6 +15,7 @@ export type { ApplicationApi, ApplicationOutputPorts };
 */
 export function createApplication(
  outputPorts: ApplicationOutputPorts,
+  featureInputs: Readonly<Record<string, unknown>> = {},
 ): ApplicationApi {
  const session = Object.freeze({
    getSnapshot: () => outputPorts.session.getState(),
@@ -107,6 +108,18 @@ export function createApplication(
      }
    },
  });
+  const installedFeatureInputs = Object.freeze({ ...featureInputs });
+  const features = Object.freeze({
+    has(featureId: string) {
+      return Object.hasOwn(installedFeatureInputs, featureId);
+    },
+    get(featureId: string) {
+      if (!Object.hasOwn(installedFeatureInputs, featureId)) {
+        throw new Error(`Application feature is not installed: ${featureId}`);
+      }
+      return installedFeatureInputs[featureId];
+    },
+  });

  return Object.freeze({
    session,
@@ -114,5 +127,6 @@ export function createApplication(
    diagnostics,
    runtime,
    recovery,
+    features,
  });
 }
@@ -47,4 +47,8 @@ export type ApplicationApi = Readonly<{
      | Readonly<{ action: "support"; reason: string }>
    >;
  }>;
+  features: Readonly<{
+    has(featureId: string): boolean;
+    get(featureId: string): unknown;
+  }>;
 }>;
@@ -7,11 +7,5 @@ export type {
 export type { ClockPort } from "../clock-port.js";
 export type { QueryCachePort } from "../query-cache-port.js";
 export type { ReleaseInfoPort } from "../release-info-port.js";
-export type {
-  RequestContext,
-  ResourceCommandPort,
-  ResourceQueryPort,
-  Result,
-} from "../resource-ports.js";
 export type { StoragePort } from "../storage-port.js";
 export type { TelemetryPort } from "../telemetry-port.js";
@@ -1,28 +0,0 @@
-/**
- * @template Query
- * @template Model
- * @typedef {{ execute(query: Query, context?: RequestContext): Promise<Result<Model>> }} ResourceQueryPort
- */
-
-/**
- * @template Command
- * @template Model
- * @typedef {{ execute(command: Command, context?: RequestContext): Promise<Result<Model>> }} ResourceCommandPort
- */
-
-/**
- * @typedef {{
- *   operationId: string,
- *   routeId: string,
- *   signal?: AbortSignal,
- *   idempotencyKey?: string
- * }} RequestContext
- */
-
-/**
- * @template Value
- * @typedef {{ ok: true, value: Value, meta?: Record<string, unknown> } |
- *   { ok: false, error: import("../../contracts/errors.js").ApiFailure }} Result
- */
-
-export {};
@@ -1,16 +0,0 @@
-/**
- * @param {import("../../domain/models/resource.js").Resource} resource
- * @param {(value: Date) => string} [formatDate]
- */
-export function toResourceViewModel(
-  resource,
-  formatDate = (value) => new Intl.DateTimeFormat("ko-KR").format(value),
-) {
-  return Object.freeze({
-    resourceId: resource.id,
-    title: resource.displayName,
-    createdAtLabel: resource.createdAt
-      ? formatDate(new Date(resource.createdAt))
-      : null,
-  });
-}
@@ -16,7 +16,8 @@ import { createApplication } from "../application/create-application.js";
 *     release: Release
 *   }): Promise<{
 *     outputPorts: OutputPorts,
- *     infrastructure: Infrastructure
+ *     infrastructure: Infrastructure,
+ *     featureInputs?: Readonly<Record<string, unknown>>
 *   }>
 * }} factories
 * @returns {Promise<Readonly<{
@@ -30,7 +31,10 @@ export async function createCompositionRoot(factories) {
  const config = await factories.loadConfig();
  const release = await factories.loadRelease(config);
  const adapters = await factories.createAdapters({ config, release });
-  const application = createApplication(adapters.outputPorts);
+  const application = createApplication(
+    adapters.outputPorts,
+    adapters.featureInputs,
+  );

  return Object.freeze({
    config,
@@ -10,6 +10,7 @@ import {
 import { createBrowserStorageAdapter } from "../adapters/storage/browser-storage-adapter.js";
 import { createTelemetryAdapter } from "../adapters/telemetry/best-effort-telemetry.js";
 import { fetchReleaseManifest } from "./load-release-manifest.js";
+import { createInstalledFeatureInputs } from "../features/installed-feature-adapters.js";

 /**
 * @param {Record<string, unknown>} host
@@ -54,7 +55,7 @@ function storageOrUndefined(value) {
 *   scheduler?: Parameters<typeof createHttpClient>[0]["scheduler"]
 * }} context
 */
-export function createRuntimeHttpClient(context) {
+export function createRuntimeHttpClient(context, contract = {}) {
  return createHttpClient({
    baseUrl: context.runtime.config.API_BASE_URL,
    timeoutMs: context.runtime.config.REQUEST_TIMEOUT_MS,
@@ -63,6 +64,7 @@ export function createRuntimeHttpClient(context) {
    fetcher: context.fetcher,
    clock: context.clock,
    scheduler: context.scheduler,
+    ...contract,
  });
 }

@@ -116,6 +118,17 @@ export async function createRuntimeAdapters(context) {
      location.reload();
    },
  });
+  const featureInputs = createInstalledFeatureInputs({
+    createHttpClient: (contract) =>
+      createRuntimeHttpClient(
+        {
+          runtime: context.runtime,
+          authSession,
+          fetcher: context.fetcher,
+        },
+        contract,
+      ),
+  });

  return Object.freeze({
    outputPorts: Object.freeze({
@@ -128,5 +141,6 @@ export async function createRuntimeAdapters(context) {
    infrastructure: Object.freeze({
      queryClient,
    }),
+    featureInputs,
  });
 }
@@ -14,41 +14,11 @@
 * }} ApiOperation
 */

-/** @param {ApiOperation} definition */
-const operation = (definition) => Object.freeze(definition);
-
-export const API_OPERATIONS = Object.freeze({
-  LIST_SAMPLE_RESOURCES: operation({
-    method: "GET",
-    path: "/api/sample/resources",
-    operationId: "LIST_SAMPLE_RESOURCES",
-    auth: "external-session",
-    timeoutMs: null,
-    idempotency: "safe",
-    retry: "runtime",
-    requestSource: "search",
-    requestSchema: "SampleResourceListQuery",
-    responseSchema: "SampleResourceListPayload",
-    owner: "feature-sample-feature-slice-contract-fixture",
-  }),
-  CREATE_SAMPLE_RESOURCE: operation({
-    method: "POST",
-    path: "/api/sample/resources",
-    operationId: "CREATE_SAMPLE_RESOURCE",
-    auth: "external-session",
-    timeoutMs: null,
-    idempotency: "keyed",
-    retry: "runtime",
-    requestSource: "body",
-    requestSchema: "CreateSampleResourceCommand",
-    responseSchema: "SampleResourcePayload",
-    owner: "feature-sample-feature-slice-contract-fixture",
-  }),
-});
+export const API_OPERATIONS = Object.freeze({});

 /** @param {string} operationId */
-export function getApiOperation(operationId) {
-  const registry = /** @type {Record<string, ApiOperation>} */ (API_OPERATIONS);
+export function getApiOperation(operationId, operations = API_OPERATIONS) {
+  const registry = /** @type {Record<string, ApiOperation>} */ (operations);
  const selected = registry[operationId];
  if (!selected) {
    throw new Error(`Unregistered API operation: ${operationId}`);
@@ -1,26 +1,4 @@
-const RESOURCE_NAMESPACE = Object.freeze(["resource", 1]);
-
-export const queryKeys = Object.freeze({
-  resource: Object.freeze({
-    all: () => RESOURCE_NAMESPACE,
-    list: (filters = {}) =>
-      Object.freeze([...RESOURCE_NAMESPACE, "list", canonicalize(filters)]),
-    /** @param {string} resourceId */
-    detail: (resourceId) =>
-      Object.freeze([...RESOURCE_NAMESPACE, "detail", String(resourceId)]),
-  }),
-});
-
-export const QUERY_REGISTRY = Object.freeze({
-  RESOURCE: Object.freeze({
-    namespace: RESOURCE_NAMESPACE,
-    serialization: "canonical-object-order",
-    identity: "no-pii-token-or-raw-url",
-    invalidation: "resource namespace after successful mutation",
-    version: 1,
-    persistence: "disabled",
-  }),
-});
+export const QUERY_REGISTRY = Object.freeze({});

 /** @param {unknown} value @returns {unknown} */
 export function canonicalize(value) {
@@ -1,11 +1,11 @@
 /**
- * @typedef {"none" | "NotFoundSplat" | "SampleResourceListQuery"} RouteCodecId
+ * @typedef {"none" | "NotFoundSplat"} RouteCodecId
 */

 /** @param {Readonly<{routeId: string, moduleId: string, paramsCodec: RouteCodecId, searchCodec: RouteCodecId}>} value */
 const runtime = (value) => Object.freeze(value);

-export const ROUTE_RUNTIME_CONTRACT = Object.freeze({
+export const PLATFORM_ROUTE_RUNTIME_CONTRACT = Object.freeze({
  APP_HOME: runtime({
    routeId: "APP_HOME",
    moduleId: "home-page",
@@ -30,12 +30,6 @@ export const ROUTE_RUNTIME_CONTRACT = Object.freeze({
    paramsCodec: "none",
    searchCodec: "none",
  }),
-  SAMPLE_RESOURCE_LIST: runtime({
-    routeId: "SAMPLE_RESOURCE_LIST",
-    moduleId: "sample-contract-page",
-    paramsCodec: "none",
-    searchCodec: "SampleResourceListQuery",
-  }),
  NOT_FOUND: runtime({
    routeId: "NOT_FOUND",
    moduleId: "not-found-page",
@@ -17,7 +17,7 @@
 /** @param {RouteDefinition} definition */
 const route = (definition) => Object.freeze(definition);

-export const ROUTE_REGISTRY = Object.freeze({
+export const PLATFORM_ROUTE_REGISTRY = Object.freeze({
  APP_HOME: route({
    routeId: "APP_HOME",
    path: "/",
@@ -70,19 +70,6 @@ export const ROUTE_REGISTRY = Object.freeze({
    navigationLabel: "인증 연동",
    navigationOrder: 40,
  }),
-  SAMPLE_RESOURCE_LIST: route({
-    routeId: "SAMPLE_RESOURCE_LIST",
-    path: "/sample/resources",
-    paramsSchema: null,
-    searchSchema: "SampleResourceListQuery",
-    access: "integration-defined",
-    loadingSurface: "sample-resource-list",
-    errorSurface: "feature-boundary",
-    chunkId: "route-sample-resources",
-    title: "보호된 연동 지점",
-    navigationLabel: "보호된 연동 지점",
-    navigationOrder: 50,
-  }),
  NOT_FOUND: route({
    routeId: "NOT_FOUND",
    path: "*",
@@ -97,28 +84,3 @@ export const ROUTE_REGISTRY = Object.freeze({
    navigationOrder: null,
  }),
 });
-
-export const NAVIGATION_ROUTES = Object.freeze(
-  Object.values(ROUTE_REGISTRY)
-    .filter((definition) => definition.navigationOrder !== null)
-    .sort(
-      (left, right) =>
-        /** @type {number} */ (left.navigationOrder) -
-        /** @type {number} */ (right.navigationOrder),
-    ),
-);
-
-/** @param {string} routeId */
-export function getRoute(routeId) {
-  const registry = /** @type {Record<string, Readonly<RouteDefinition>>} */ (
-    ROUTE_REGISTRY
-  );
-  const selected = registry[routeId];
-  if (!selected) throw new Error(`Unregistered route: ${routeId}`);
-  return selected;
-}
-
-/** @param {string} routeId */
-export function routePath(routeId) {
-  return getRoute(routeId).path;
-}
@@ -1,19 +0,0 @@
-/**
- * @typedef {{
- *   id: string,
- *   displayName: string,
- *   createdAt: string | null
- * }} Resource
- */
-
-/** @param {Resource} values @returns {Readonly<Resource>} */
-export function createResource(values) {
-  if (!values.id || !values.displayName) {
-    throw new TypeError("Resource invariants require id and displayName");
-  }
-  return Object.freeze({
-    id: values.id,
-    displayName: values.displayName,
-    createdAt: values.createdAt,
-  });
-}
@@ -0,0 +1,15 @@
+import { createReferenceFeatureInstalledInput } from "./reference-feature/adapters/create-reference-feature-input.js";
+
+export function createInstalledFeatureInputs(
+  context: Parameters<typeof createReferenceFeatureInstalledInput>[0],
+): Readonly<Record<string, unknown>> {
+  const installed = [createReferenceFeatureInstalledInput(context)];
+  return Object.freeze(
+    Object.fromEntries(
+      installed.map((contribution) => [
+        contribution.featureId,
+        contribution.input,
+      ]),
+    ),
+  );
+}
@@ -0,0 +1,48 @@
+import { PLATFORM_ROUTE_RUNTIME_CONTRACT } from "../contracts/route-runtime-contract.js";
+import { PLATFORM_ROUTE_REGISTRY } from "../contracts/routes.js";
+import { REFERENCE_FEATURE_CONTRACT } from "./reference-feature/contracts/reference-feature-contract.js";
+
+export const INSTALLED_FEATURE_CONTRACTS = Object.freeze([
+  REFERENCE_FEATURE_CONTRACT,
+]);
+
+export const ROUTE_REGISTRY = Object.freeze({
+  ...PLATFORM_ROUTE_REGISTRY,
+  ...REFERENCE_FEATURE_CONTRACT.routes,
+});
+export const ROUTE_RUNTIME_CONTRACT = Object.freeze({
+  ...PLATFORM_ROUTE_RUNTIME_CONTRACT,
+  ...REFERENCE_FEATURE_CONTRACT.routeRuntimeContracts,
+});
+export const API_OPERATIONS = Object.freeze({
+  ...REFERENCE_FEATURE_CONTRACT.apiOperations,
+});
+export const QUERY_REGISTRY = Object.freeze({
+  ...REFERENCE_FEATURE_CONTRACT.queryRegistry,
+});
+
+export const NAVIGATION_ROUTES = Object.freeze(
+  Object.values(ROUTE_REGISTRY)
+    .filter((definition) => definition.navigationOrder !== null)
+    .sort(
+      (left, right) =>
+        /** @type {number} */ (left.navigationOrder) -
+        /** @type {number} */ (right.navigationOrder),
+    ),
+);
+
+/** @param {string} routeId */
+export function getRoute(routeId) {
+  const registry =
+    /** @type {Readonly<Record<string, import("../contracts/routes.js").RouteDefinition>>} */ (
+      ROUTE_REGISTRY
+    );
+  const selected = registry[routeId];
+  if (!selected) throw new Error(`Unregistered route: ${routeId}`);
+  return selected;
+}
+
+/** @param {string} routeId */
+export function routePath(routeId) {
+  return getRoute(routeId).path;
+}
@@ -0,0 +1,16 @@
+import { PLATFORM_ROUTE_CODECS } from "../presentation/routes/platform-route-codecs.js";
+import { PLATFORM_ROUTE_RUNTIME } from "../presentation/routes/route-runtime.js";
+import {
+  REFERENCE_FEATURE_ROUTE_CODECS,
+  REFERENCE_FEATURE_ROUTE_RUNTIME,
+} from "./reference-feature/presentation/reference-feature-runtime.js";
+
+export const ROUTE_CODECS = Object.freeze({
+  ...PLATFORM_ROUTE_CODECS,
+  ...REFERENCE_FEATURE_ROUTE_CODECS,
+});
+
+export const ROUTE_RUNTIME = Object.freeze({
+  ...PLATFORM_ROUTE_RUNTIME,
+  ...REFERENCE_FEATURE_ROUTE_RUNTIME,
+});
@@ -0,0 +1,39 @@
+# Reference feature ownership and removal
+
+이 모듈은 제품 도메인이 아니라 새 기능의 수직 경계를 검증하는 제거 가능한
+reference implementation이다.
+
+## 소유 경계
+
+- `domain`: 외부 DTO와 React를 모르는 불변 model
+- `application`: UI가 호출하는 list/create input과 gateway 계약
+- `adapters`: HTTP executor를 gateway로 투영하는 outbound adapter
+- `contracts`: route/API/query contribution, Zod DTO와 request schema, mapper
+- `presentation`: route input을 query/mutation controller로 연결하는 inbound
+  adapter와 page
+
+generic application은 `features.get(featureId)` catalog만 제공한다. feature hook이
+자신의 input shape를 확인하며 page는 HTTP client, storage, auth owner, output
+port나 TanStack API를 직접 import하지 않는다.
+
+## 설치 지점
+
+- 직렬화 계약: `src/features/installed-feature-contracts.js`
+- component/codec: `src/features/installed-feature-runtimes.tsx`
+- bootstrap input 조립: `src/features/installed-feature-adapters.ts`
+
+새 기능도 이 세 지점에 contribution을 합성하되 feature ID를 generic application,
+router나 HTTP client에 하드코딩하지 않는다.
+
+## 검증과 제거
+
+```sh
+corepack pnpm test:reference-feature
+corepack pnpm test:sample-removal
+```
+
+첫 명령은 URL filter와 query key/HTTP request의 동일성, schema/mapper, 모든
+query/mutation 상태와 production composition을 검증한다. 두 번째 명령은 임시
+복제본에서 이 source/test 디렉터리를 제거하고 installed catalog를 빈 목록으로
+재생성한 뒤 typecheck, architecture, registry, unit/integration, home smoke,
+production build와 fixture ID 잔여 0개를 검사한다.
@@ -0,0 +1,43 @@
+import { createReferenceFeatureInput } from "../application/reference-feature-api.js";
+import {
+  REFERENCE_FEATURE_CONTRACT,
+  REFERENCE_FEATURE_ID,
+} from "../contracts/reference-feature-contract.js";
+import { mapReferenceOperation } from "../contracts/reference-mapper.js";
+import {
+  validateReferencePayload,
+  validateReferenceRequest,
+} from "../contracts/reference-schemas.js";
+import { createReferenceHttpGateway } from "./reference-http-gateway.js";
+
+type HttpContract = Readonly<{
+  getOperation(operationId: string): unknown;
+  validatePayload: typeof validateReferencePayload;
+  validateRequest: typeof validateReferenceRequest;
+  mapPayload: typeof mapReferenceOperation;
+}>;
+
+type HttpExecutor = Parameters<typeof createReferenceHttpGateway>[0];
+
+export function createReferenceFeatureInstalledInput(context: Readonly<{
+  createHttpClient(contract: HttpContract): HttpExecutor;
+}>) {
+  const operations =
+    REFERENCE_FEATURE_CONTRACT.apiOperations as Readonly<Record<string, unknown>>;
+  const http = context.createHttpClient({
+    getOperation(operationId) {
+      const operation = operations[operationId];
+      if (!operation) {
+        throw new Error(`Unknown reference operation: ${operationId}`);
+      }
+      return operation;
+    },
+    validatePayload: validateReferencePayload,
+    validateRequest: validateReferenceRequest,
+    mapPayload: mapReferenceOperation,
+  });
+  return Object.freeze({
+    featureId: REFERENCE_FEATURE_ID,
+    input: createReferenceFeatureInput(createReferenceHttpGateway(http)),
+  });
+}
@@ -0,0 +1,56 @@
+import type { ApiFailure } from "../../../contracts/errors.js";
+import type {
+  ReferenceGateway,
+  ReferenceListFilters,
+} from "../application/reference-feature-api.js";
+import type { ReferenceResource } from "../domain/reference-resource.js";
+
+type HttpResult =
+  | Readonly<{ ok: true; value: unknown }>
+  | Readonly<{ ok: false; error: ApiFailure }>;
+
+type HttpExecutor = Readonly<{
+  execute(
+    request: Readonly<{
+      operationId: string;
+      routeId: string;
+      searchParams?: unknown;
+      body?: unknown;
+      signal?: AbortSignal;
+    }>,
+  ): Promise<HttpResult>;
+}>;
+
+export function createReferenceHttpGateway(
+  http: HttpExecutor,
+): ReferenceGateway {
+  return Object.freeze({
+    async list(
+      filters: ReferenceListFilters,
+      context?: Readonly<{ signal?: AbortSignal }>,
+    ) {
+      const result = await http.execute({
+        operationId: "LIST_REFERENCE_RESOURCES",
+        routeId: "REFERENCE_RESOURCE_LIST",
+        searchParams: filters,
+        signal: context?.signal,
+      });
+      return result.ok
+        ? {
+            ok: true as const,
+            value: result.value as readonly ReferenceResource[],
+          }
+        : result;
+    },
+    async create(command: Readonly<{ name: string }>) {
+      const result = await http.execute({
+        operationId: "CREATE_REFERENCE_RESOURCE",
+        routeId: "REFERENCE_RESOURCE_LIST",
+        body: command,
+      });
+      return result.ok
+        ? { ok: true as const, value: result.value as ReferenceResource }
+        : result;
+    },
+  });
+}
@@ -0,0 +1,58 @@
+import type { ApiFailure } from "../../../contracts/errors.js";
+import {
+  toReferenceView,
+  type ReferenceResourceView,
+} from "../contracts/reference-mapper.js";
+import type { ReferenceResource } from "../domain/reference-resource.js";
+
+export type ReferenceListFilters = Readonly<{
+  cursor?: string;
+  limit: number;
+  tags?: readonly string[];
+}>;
+
+export type ReferenceResult<Value> =
+  | Readonly<{ ok: true; value: Value }>
+  | Readonly<{ ok: false; error: ApiFailure }>;
+
+export type ReferenceFeatureInput = Readonly<{
+  listResources(
+    filters: ReferenceListFilters,
+    context?: Readonly<{ signal?: AbortSignal }>,
+  ): Promise<ReferenceResult<readonly ReferenceResourceView[]>>;
+  createResource(
+    command: Readonly<{ name: string }>,
+  ): Promise<ReferenceResult<ReferenceResourceView>>;
+}>;
+
+export type ReferenceGateway = Readonly<{
+  list(
+    filters: ReferenceListFilters,
+    context?: Readonly<{ signal?: AbortSignal }>,
+  ): Promise<ReferenceResult<readonly ReferenceResource[]>>;
+  create(
+    command: Readonly<{ name: string }>,
+  ): Promise<ReferenceResult<ReferenceResource>>;
+}>;
+
+export function createReferenceFeatureInput(
+  gateway: ReferenceGateway,
+): ReferenceFeatureInput {
+  return Object.freeze({
+    async listResources(filters, context) {
+      const result = await gateway.list(filters, context);
+      return result.ok
+        ? {
+            ok: true as const,
+            value: result.value.map((resource) => toReferenceView(resource)),
+          }
+        : result;
+    },
+    async createResource(command) {
+      const result = await gateway.create(command);
+      return result.ok
+        ? { ok: true as const, value: toReferenceView(result.value) }
+        : result;
+    },
+  });
+}
@@ -0,0 +1,75 @@
+import { canonicalize } from "../../../contracts/query-keys.js";
+
+export const REFERENCE_FEATURE_ID = "reference-feature";
+const REFERENCE_NAMESPACE = Object.freeze(["reference-resource", 1]);
+
+export const referenceQueryKeys = Object.freeze({
+  all: () => REFERENCE_NAMESPACE,
+  list: (filters = {}) =>
+    Object.freeze([...REFERENCE_NAMESPACE, "list", canonicalize(filters)]),
+});
+
+export const REFERENCE_FEATURE_CONTRACT = Object.freeze({
+  featureId: REFERENCE_FEATURE_ID,
+  routes: Object.freeze({
+    REFERENCE_RESOURCE_LIST: Object.freeze({
+      routeId: "REFERENCE_RESOURCE_LIST",
+      path: "/examples/reference-resources",
+      paramsSchema: null,
+      searchSchema: "ReferenceResourceListQuery",
+      access: "integration-defined",
+      loadingSurface: "reference-resource-list",
+      errorSurface: "feature-boundary",
+      chunkId: "route-reference-resources",
+      title: "Reference feature",
+      navigationLabel: "Reference feature",
+      navigationOrder: 50,
+    }),
+  }),
+  routeRuntimeContracts: Object.freeze({
+    REFERENCE_RESOURCE_LIST: Object.freeze({
+      routeId: "REFERENCE_RESOURCE_LIST",
+      moduleId: "reference-resource-page",
+      paramsCodec: "none",
+      searchCodec: "ReferenceResourceListQuery",
+    }),
+  }),
+  apiOperations: Object.freeze({
+    LIST_REFERENCE_RESOURCES: Object.freeze({
+      method: "GET",
+      path: "/api/reference-resources",
+      operationId: "LIST_REFERENCE_RESOURCES",
+      auth: "external-session",
+      timeoutMs: null,
+      idempotency: "safe",
+      retry: "runtime",
+      requestSource: "search",
+      requestSchema: "ReferenceResourceListQuery",
+      responseSchema: "ReferenceResourceListPayload",
+      owner: "feature-frontend-reference-feature-vertical-slice",
+    }),
+    CREATE_REFERENCE_RESOURCE: Object.freeze({
+      method: "POST",
+      path: "/api/reference-resources",
+      operationId: "CREATE_REFERENCE_RESOURCE",
+      auth: "external-session",
+      timeoutMs: null,
+      idempotency: "keyed",
+      retry: "runtime",
+      requestSource: "body",
+      requestSchema: "CreateReferenceResourceCommand",
+      responseSchema: "ReferenceResourcePayload",
+      owner: "feature-frontend-reference-feature-vertical-slice",
+    }),
+  }),
+  queryRegistry: Object.freeze({
+    REFERENCE_RESOURCE: Object.freeze({
+      namespace: REFERENCE_NAMESPACE,
+      serialization: "canonical-object-order",
+      identity: "no-pii-token-or-raw-url",
+      invalidation: "reference resource namespace after successful mutation",
+      version: 1,
+      persistence: "disabled",
+    }),
+  }),
+});
@@ -0,0 +1,54 @@
+import {
+  createReferenceResource,
+  type ReferenceResource,
+} from "../domain/reference-resource.js";
+
+export type ReferenceResourceView = Readonly<{
+  resourceId: string;
+  title: string;
+  createdAtLabel: string | null;
+  optimistic?: boolean;
+}>;
+
+function mapReferenceDto(value: unknown): ReferenceResource {
+  if (!value || typeof value !== "object") {
+    throw new TypeError("Validated reference DTO is required");
+  }
+  const dto = value as Record<string, unknown>;
+  if (typeof dto.id !== "string" || typeof dto.name !== "string") {
+    throw new TypeError("Validated reference DTO invariants were breached");
+  }
+  return createReferenceResource({
+    id: dto.id,
+    displayName: dto.name,
+    createdAt: typeof dto.createdAt === "string" ? dto.createdAt : null,
+  });
+}
+
+export function mapReferenceOperation(
+  operationId: string,
+  payload: unknown,
+): ReferenceResource | readonly ReferenceResource[] {
+  if (operationId === "LIST_REFERENCE_RESOURCES") {
+    if (!Array.isArray(payload)) throw new TypeError("Expected a reference list");
+    return payload.map(mapReferenceDto);
+  }
+  if (operationId === "CREATE_REFERENCE_RESOURCE") {
+    return mapReferenceDto(payload);
+  }
+  throw new TypeError(`No reference mapper registered for ${operationId}`);
+}
+
+export function toReferenceView(
+  resource: ReferenceResource,
+  formatDate: (value: Date) => string = (value) =>
+    new Intl.DateTimeFormat("ko-KR").format(value),
+): ReferenceResourceView {
+  return Object.freeze({
+    resourceId: resource.id,
+    title: resource.displayName,
+    createdAtLabel: resource.createdAt
+      ? formatDate(new Date(resource.createdAt))
+      : null,
+  });
+}
@@ -0,0 +1,67 @@
+import { z } from "zod";
+
+export const referenceResourceListQuerySchema = z
+  .object({
+    cursor: z.string().min(1).optional(),
+    limit: z.coerce.number().int().min(1).max(100).default(20),
+    tags: z
+      .preprocess(
+        (value) =>
+          value === undefined
+            ? undefined
+            : Array.isArray(value)
+              ? value
+              : [value],
+        z.array(z.string().trim().min(1)),
+      )
+      .optional(),
+  })
+  .strict();
+
+const referenceResourceDtoSchema = z
+  .object({
+    id: z.string().min(1),
+    name: z.string().min(1),
+    createdAt: z.string().datetime().optional(),
+  })
+  .strict();
+
+const payloadSchemas = {
+  ReferenceResourceListPayload: z.array(referenceResourceDtoSchema),
+  ReferenceResourcePayload: referenceResourceDtoSchema,
+} satisfies Record<string, z.ZodType>;
+
+const requestSchemas = {
+  ReferenceResourceListQuery: referenceResourceListQuerySchema,
+  CreateReferenceResourceCommand: z
+    .object({
+      name: z.string().trim().min(1).max(120),
+    })
+    .strict(),
+} satisfies Record<string, z.ZodType>;
+
+function project(result: z.ZodSafeParseResult<unknown>) {
+  return result.success
+    ? ({ success: true as const, data: structuredClone(result.data) })
+    : ({
+        success: false as const,
+        issues: result.error.issues.map((issue) => ({
+          path: issue.path.join("."),
+          code: issue.code,
+        })),
+      });
+}
+
+export function validateReferencePayload(schemaId: string, value: unknown) {
+  const schema = payloadSchemas[schemaId as keyof typeof payloadSchemas];
+  return schema
+    ? project(schema.safeParse(value))
+    : { success: false as const, issues: [{ path: "", code: "SCHEMA_NOT_REGISTERED" }] };
+}
+
+export function validateReferenceRequest(schemaId: string, value: unknown) {
+  const schema = requestSchemas[schemaId as keyof typeof requestSchemas];
+  return schema
+    ? project(schema.safeParse(value))
+    : { success: false as const, issues: [{ path: "", code: "SCHEMA_NOT_REGISTERED" }] };
+}
@@ -0,0 +1,14 @@
+export type ReferenceResource = Readonly<{
+  id: string;
+  displayName: string;
+  createdAt: string | null;
+}>;
+
+export function createReferenceResource(
+  values: ReferenceResource,
+): ReferenceResource {
+  if (!values.id || !values.displayName) {
+    throw new TypeError("Reference resource invariants require id and displayName");
+  }
+  return Object.freeze({ ...values });
+}
@@ -0,0 +1,14 @@
+import { lazy } from "react";
+
+import { referenceResourceListQuerySchema } from "../contracts/reference-schemas.js";
+
+export const REFERENCE_FEATURE_ROUTE_CODECS = {
+  ReferenceResourceListQuery: referenceResourceListQuerySchema,
+} as const;
+
+export const REFERENCE_FEATURE_ROUTE_RUNTIME = {
+  REFERENCE_RESOURCE_LIST: Object.freeze({
+    moduleId: "reference-resource-page",
+    Component: lazy(() => import("./reference-resource-page.js")),
+  }),
+} as const;
@@ -0,0 +1,60 @@
+import { useState, type FormEvent } from "react";
+
+import { AsyncSurface } from "../../../presentation/components/async-surface.jsx";
+import { Button } from "../../../presentation/components/ui/button.jsx";
+import { PageHeader } from "../../../presentation/components/page-header.jsx";
+import { useReferenceFeature } from "./use-reference-feature.js";
+
+export default function ReferenceResourcePage() {
+  const { filters, query, mutation } = useReferenceFeature();
+  const [name, setName] = useState("");
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const result = await mutation.submit({ name });
+    if (result.ok) setName("");
+  }
+
+  return (
+    <section className="ui-page">
+      <PageHeader
+        eyebrow="제거 가능한 수직 슬라이스"
+        title="Reference feature"
+        description="URL codec, application input, HTTP/schema/mapper와 query/mutation 상태를 한 경로로 검증합니다."
+      />
+      <p data-testid="reference-filter">
+        limit {filters.limit}
+        {filters.tags?.length ? ` · tags ${filters.tags.join(", ")}` : ""}
+      </p>
+      <AsyncSurface state={query.state} onRetry={query.retry}>
+        <ul aria-label="Reference resources">
+          {(query.data ?? []).map((resource) => (
+            <li
+              key={resource.resourceId}
+              data-optimistic={resource.optimistic || undefined}
+            >
+              {resource.title}
+            </li>
+          ))}
+        </ul>
+      </AsyncSurface>
+      <AsyncSurface
+        state={mutation.state}
+        onResolveConflict={mutation.resolveConflict}
+      >
+        <form onSubmit={(event) => void submit(event)}>
+          <label htmlFor="reference-resource-name">새 항목 이름</label>
+          <input
+            id="reference-resource-name"
+            value={name}
+            onChange={(event) => setName(event.currentTarget.value)}
+            required
+          />
+          <Button type="submit" disabled={mutation.state.overlay.mutationPending}>
+            추가
+          </Button>
+        </form>
+      </AsyncSurface>
+    </section>
+  );
+}
@@ -0,0 +1,62 @@
+import { useApplication } from "../../../presentation/providers/application-provider.js";
+import {
+  useApplicationMutation,
+  useApplicationQuery,
+} from "../../../presentation/adapters/query/application-query.js";
+import { useRouteInput } from "../../../presentation/routes/app-router.js";
+import type { ReferenceResourceView } from "../contracts/reference-mapper.js";
+import {
+  REFERENCE_FEATURE_ID,
+  referenceQueryKeys,
+} from "../contracts/reference-feature-contract.js";
+import type {
+  ReferenceFeatureInput,
+  ReferenceListFilters,
+} from "../application/reference-feature-api.js";
+
+function useReferenceFeatureInput(): ReferenceFeatureInput {
+  const candidate = useApplication().features.get(REFERENCE_FEATURE_ID);
+  if (
+    !candidate ||
+    typeof candidate !== "object" ||
+    typeof (candidate as ReferenceFeatureInput).listResources !== "function" ||
+    typeof (candidate as ReferenceFeatureInput).createResource !== "function"
+  ) {
+    throw new Error("Reference feature application input is invalid");
+  }
+  return candidate as ReferenceFeatureInput;
+}
+
+export function useReferenceFeature() {
+  const input = useReferenceFeatureInput();
+  const routeInput = useRouteInput();
+  const filters = routeInput.search as ReferenceListFilters;
+  const queryKey = referenceQueryKeys.list(filters);
+  const query = useApplicationQuery({
+    queryKey,
+    execute: ({ signal }) => input.listResources(filters, { signal }),
+  });
+  const mutation = useApplicationMutation({
+    execute: input.createResource,
+    invalidate: [referenceQueryKeys.all()],
+    currentData: true,
+    optimistic: {
+      queryKey,
+      update(previous, command: Readonly<{ name: string }>) {
+        const current = Array.isArray(previous)
+          ? (previous as readonly ReferenceResourceView[])
+          : [];
+        return [
+          ...current,
+          {
+            resourceId: `optimistic:${command.name}`,
+            title: command.name,
+            createdAtLabel: null,
+            optimistic: true,
+          },
+        ];
+      },
+    },
+  });
+  return Object.freeze({ filters, query, mutation });
+}
@@ -1,7 +1,10 @@
 import { useEffect, useState } from "react";
 import { NavLink, Outlet, useLocation } from "react-router-dom";

-import { NAVIGATION_ROUTES, routePath } from "../../contracts/routes.js";
+import {
+  NAVIGATION_ROUTES,
+  routePath,
+} from "../../features/installed-feature-contracts.js";
 import { useSession } from "../providers/session-provider.jsx";
 import { useTheme } from "../providers/theme-provider.jsx";

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";

-import { routePath } from "../../contracts/routes.js";
+import { routePath } from "../../features/installed-feature-contracts.js";
 import { PageHeader } from "../components/page-header.jsx";
 import { useApplication } from "../providers/application-provider.js";

@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";

-import { routePath } from "../../contracts/routes.js";
+import { routePath } from "../../features/installed-feature-contracts.js";
 import { PageHeader } from "../components/page-header.jsx";

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

 const RouteInputContext = createContext<ParsedRouteInput | null>(null);

@@ -1,4 +1,4 @@
-import { getRoute } from "../../contracts/routes.js";
+import { getRoute } from "../../features/installed-feature-contracts.js";

 /**
 * @param {string} routeId
@@ -0,0 +1,6 @@
+import { z } from "zod";
+
+export const PLATFORM_ROUTE_CODECS = {
+  none: z.object({}).strict(),
+  NotFoundSplat: z.object({ "*": z.string().optional() }).strict(),
+} as const;
@@ -1,36 +1,8 @@
-import { z } from "zod";
-
-import { getRoute } from "../../contracts/routes.js";
-import { ROUTE_RUNTIME_CONTRACT } from "../../contracts/route-runtime-contract.js";
+import { getRoute, ROUTE_RUNTIME_CONTRACT } from "../../features/installed-feature-contracts.js";
+import { ROUTE_CODECS } from "../../features/installed-feature-runtimes.js";

 export type RouteId = keyof typeof ROUTE_RUNTIME_CONTRACT;

-const emptyCodec = z.object({}).strict();
-const notFoundSplatCodec = z.object({ "*": z.string().optional() }).strict();
-const sampleResourceListQuery = z
-  .object({
-    cursor: z.string().min(1).optional(),
-    limit: z.coerce.number().int().min(1).max(100).default(20),
-    tags: z
-      .preprocess(
-        (value) =>
-          value === undefined
-            ? undefined
-            : Array.isArray(value)
-              ? value
-              : [value],
-        z.array(z.string().trim().min(1)),
-      )
-      .optional(),
-  })
-  .strict();
-
-const codecs = {
-  none: emptyCodec,
-  NotFoundSplat: notFoundSplatCodec,
-  SampleResourceListQuery: sampleResourceListQuery,
-} as const;
-
 export type ParsedRouteInput = Readonly<{
  routeId: RouteId;
  params: Readonly<Record<string, unknown>>;
@@ -44,17 +16,23 @@ export type RouteInputResult =
      code: "ROUTE_PARAMS_INVALID" | "ROUTE_SEARCH_INVALID";
    }>;

+function codecById(codecId: string) {
+  const codec = ROUTE_CODECS[codecId as keyof typeof ROUTE_CODECS];
+  if (!codec) throw new TypeError(`Unregistered route codec: ${codecId}`);
+  return codec;
+}
+
 export function parseRouteInput(
  routeId: RouteId,
  rawParams: Readonly<Record<string, string | undefined>>,
  rawSearch: URLSearchParams,
 ): RouteInputResult {
  const runtime = ROUTE_RUNTIME_CONTRACT[routeId];
-  const params = codecs[runtime.paramsCodec].safeParse(rawParams);
+  const params = codecById(runtime.paramsCodec).safeParse(rawParams);
  if (!params.success) {
    return { success: false, code: "ROUTE_PARAMS_INVALID" };
  }
-  const search = codecs[runtime.searchCodec].safeParse(
+  const search = codecById(runtime.searchCodec).safeParse(
    searchRecord(rawSearch),
  );
  if (!search.success) {
@@ -84,14 +62,18 @@ export function buildRouteUrl(
    throw new TypeError("The not-found route cannot build a canonical URL");
  }
  const runtime = ROUTE_RUNTIME_CONTRACT[routeId];
-  const params = codecs[runtime.paramsCodec].parse(input.params ?? {});
-  const search = codecs[runtime.searchCodec].parse(input.search ?? {});
+  const params = codecById(runtime.paramsCodec).parse(input.params ?? {});
+  const search = codecById(runtime.searchCodec).parse(input.search ?? {});
  const parsedParams: Record<string, unknown> = { ...params };
  const parsedSearch: Record<string, unknown> = { ...search };
  let path = definition.path;
  path = path.replace(
    /:([A-Za-z][A-Za-z0-9_]*)|\{([A-Za-z][A-Za-z0-9_]*)\}/g,
-    (_token, colonName: string | undefined, braceName: string | undefined) => {
+    (
+      _token: string,
+      colonName: string | undefined,
+      braceName: string | undefined,
+    ) => {
      const name = colonName ?? braceName ?? "";
      const value = parsedParams[name];
      if (typeof value !== "string" && typeof value !== "number") {
@@ -4,8 +4,7 @@ import {
  type LazyExoticComponent,
 } from "react";

-import { ROUTE_RUNTIME_CONTRACT } from "../../contracts/route-runtime-contract.js";
-import type { RouteId } from "./route-codecs.js";
+import { PLATFORM_ROUTE_RUNTIME_CONTRACT } from "../../contracts/route-runtime-contract.js";

 type RouteModule = Readonly<{ default: ComponentType }>;
 type RouteRuntime = Readonly<{
@@ -14,16 +13,16 @@ type RouteRuntime = Readonly<{
 }>;

 function runtime(
-  routeId: RouteId,
+  routeId: keyof typeof PLATFORM_ROUTE_RUNTIME_CONTRACT,
  load: () => Promise<RouteModule>,
 ): RouteRuntime {
  return Object.freeze({
-    moduleId: ROUTE_RUNTIME_CONTRACT[routeId].moduleId,
+    moduleId: PLATFORM_ROUTE_RUNTIME_CONTRACT[routeId].moduleId,
    Component: lazy(load),
  });
 }

-export const ROUTE_RUNTIME = {
+export const PLATFORM_ROUTE_RUNTIME = {
  APP_HOME: runtime("APP_HOME", () => import("../pages/home-page.jsx")),
  EXAMPLES_UI: runtime(
    "EXAMPLES_UI",
@@ -37,12 +36,8 @@ export const ROUTE_RUNTIME = {
    "EXAMPLES_AUTH",
    () => import("../examples/auth-example-page.jsx"),
  ),
-  SAMPLE_RESOURCE_LIST: runtime(
-    "SAMPLE_RESOURCE_LIST",
-    () => import("../pages/sample-contract-page.jsx"),
-  ),
  NOT_FOUND: runtime(
    "NOT_FOUND",
    () => import("../pages/not-found-page.jsx"),
  ),
-} satisfies Record<RouteId, RouteRuntime>;
+} satisfies Record<keyof typeof PLATFORM_ROUTE_RUNTIME_CONTRACT, RouteRuntime>;
@@ -1,15 +0,0 @@
-export function DesignTokenShowcase() {
-  return (
-    <section className="ui-panel" aria-labelledby="token-showcase-title">
-      <h2 id="token-showcase-title" className="text-xl font-semibold">
-        Design token fixture
-      </h2>
-      <p className="text-content-muted">
-        Semantic tokens style loading, empty, and terminal surfaces.
-      </p>
-      <button className="ui-button" type="button">
-        Token action
-      </button>
-    </section>
-  );
-}
@@ -1,53 +0,0 @@
-import { toResourceViewModel } from "../../application/view-models/resource-view-model.js";
-import { queryKeys } from "../../contracts/query-keys.js";
-
-/**
- * @param {{
- *   http: { execute(operationId: string, input?: Record<string, unknown>): Promise<
- *     {ok: true, value: unknown} | {ok: false, error: import("../../contracts/errors.js").ApiFailure}
- *   > },
- *   cache: import("../../application/ports/query-cache-port.js").QueryCachePort
- * }} ports
- */
-export function createSampleFacade(ports) {
-  return Object.freeze({
-    async listResources(filters = {}) {
-      const key = queryKeys.resource.list(filters);
-      const result = await ports.http.execute("LIST_SAMPLE_RESOURCES", {
-        routeId: "SAMPLE_RESOURCE_LIST",
-      });
-      if (!result.ok) return result;
-
-      const models =
-        /** @type {Array<import("../../domain/models/resource.js").Resource>} */ (
-          result.value
-        );
-      const cached = ports.cache.write(key, models);
-      if (!cached.ok) return cached;
-      return {
-        ok: /** @type {true} */ (true),
-        value: models.map((model) => toResourceViewModel(model)),
-      };
-    },
-
-    /** @param {{ name: string }} command */
-    async createResource(command) {
-      const result = await ports.http.execute("CREATE_SAMPLE_RESOURCE", {
-        body: command,
-        routeId: "SAMPLE_RESOURCE_LIST",
-      });
-      if (!result.ok) return result;
-
-      const invalidated = await ports.cache.invalidate(queryKeys.resource.all());
-      if (!invalidated.ok) return invalidated;
-      return {
-        ok: /** @type {true} */ (true),
-        value: toResourceViewModel(
-          /** @type {import("../../domain/models/resource.js").Resource} */ (
-            result.value
-          ),
-        ),
-      };
-    },
-  });
-}
@@ -1,61 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { deriveAsyncState } from "../../application/view-models/async-state.js";
-import { AsyncSurface } from "../../presentation/components/async-surface.jsx";
-
-/**
- * @typedef {{
- *   loading: boolean,
- *   resources?: Array<{resourceId: string, title: string, createdAtLabel: string | null}>,
- *   failure?: import("../../contracts/errors.js").ApiFailure
- * }} SamplePageState
- */
-
-/**
- * @param {{
- *   facade: ReturnType<typeof import("./sample-facade.js").createSampleFacade>
- * }} props
- */
-export function SampleResourcePage({ facade }) {
-  const [result, setResult] = useState(
-    /** @type {SamplePageState} */ ({
-      loading: true,
-      resources: undefined,
-      failure: undefined,
-    }),
-  );
-
-  useEffect(() => {
-    let active = true;
-    void facade.listResources().then((outcome) => {
-      if (!active) return;
-      setResult(
-        outcome.ok
-          ? { loading: false, resources: outcome.value, failure: undefined }
-          : { loading: false, resources: undefined, failure: outcome.error },
-      );
-    });
-    return () => {
-      active = false;
-    };
-  }, [facade]);
-
-  const state = deriveAsyncState({
-    isInitialLoading: result.loading,
-    data: result.resources,
-    failure: result.failure,
-  });
-
-  return (
-    <main>
-      <h1>샘플 리소스</h1>
-      <AsyncSurface state={state}>
-        <ul>
-          {(result.resources ?? []).map((resource) => (
-            <li key={resource.resourceId}>{resource.title}</li>
-          ))}
-        </ul>
-      </AsyncSurface>
-    </main>
-  );
-}