feat: let Studio create the topics and projects publishing requires

Publishing needs a topic and nothing could create one. The backend now owns that surface; this is its consumer — the management contract vendored, a gateway over its nine operations, and one Studio screen that lists, creates, and deletes topics and projects. The screen adds no CSS. It reuses the classes the working-copy list already uses, so it inherits Studio's spacing, type, and colour rather than growing a second visual vocabulary beside them. Scope stops at list/create/delete: renaming, phase changes, and visibility are implemented in the backend and declared in the contract, but their screens are a separate design. Two real defects surfaced while making the public port async, and both would have shipped: The search page and the header search dialog shared a query key. With an empty query, `["tech-log","search",""]` was identical for both, so react-query handed one surface the other's cache — different shapes — and the page died reading a field that was not there. Keys now name the surface. The explore filter's selects are uncontrolled and read `defaultValue`, which React applies once. Their options arrive later now, so the first render had nothing to match and the value stayed empty: a topic in the URL no longer showed as selected. The form key includes whether the catalog has arrived, so it remounts with the options present. Controlled inputs would be the other answer, but this form submits to build a URL — the URL owns the value. The route brought its own bookkeeping: a build chunk, a manual accessibility evidence file, and the CI artifact baseline that counts them. The gate pins a digest of its own shape precisely so a new route cannot slip in without that count being reviewed. Test harnesses that render public screens now assemble the query providers and await the settled paint, because the screens they render became async.
2026-08-20 23:40:15 +09:00
parent 4b62bf3b1f
commit 11c2713139
52 changed files with 16509 additions and 134 deletions
@@ -0,0 +1,18 @@
+# TECH_LOG_STUDIO_TAXONOMY accessibility review
+
+Status: pending-manual-review
+Route ID: TECH_LOG_STUDIO_TAXONOMY
+Release ID:
+Reviewer:
+Reviewed at:
+Signature:
+Attestation: pending
+M1 Keyboard: pending
+M2 Visible focus: pending
+M3 Route focus: pending
+M4 Modal focus: pending
+M5 Error association: pending
+M6 Color signal: pending
+M7 Reduced motion: pending
+Screen reader: pending
+Notes: Human review pending; automated evidence does not replace signed keyboard, focus, and screen-reader review.
@@ -1196,6 +1196,12 @@
      "schemaId": "markdown",
      "production": "source-controlled"
    },
+    {
+      "id": "artifact-artifacts-tests-a11y-manual-TECH-LOG-STUDIO-TAXONOMY-md",
+      "path": "artifacts/tests/a11y-manual/TECH_LOG_STUDIO_TAXONOMY.md",
+      "schemaId": "markdown",
+      "production": "source-controlled"
+    },
    {
      "id": "artifact-artifacts-tests-a11y-manual-TECH-LOG-STUDIO-NOT-FOUND-md",
      "path": "artifacts/tests/a11y-manual/TECH_LOG_STUDIO_NOT_FOUND.md",
@@ -1949,6 +1955,7 @@
        "artifact-artifacts-tests-a11y-manual-TECH-LOG-STUDIO-PUBLICATIONS-md",
        "artifact-artifacts-tests-a11y-manual-TECH-LOG-STUDIO-PUBLICATION-PREVIEW-md",
        "artifact-artifacts-tests-a11y-manual-TECH-LOG-STUDIO-ASSETS-md",
+        "artifact-artifacts-tests-a11y-manual-TECH-LOG-STUDIO-TAXONOMY-md",
        "artifact-artifacts-tests-a11y-manual-TECH-LOG-STUDIO-NOT-FOUND-md",
        "artifact-artifacts-tests-a11y-manual-NOT-FOUND-md",
        "artifact-artifacts-tests-a11y-manual-report-json"
@@ -15,7 +15,7 @@
    "OFFLINE_COMMANDS": "DEFAULT"
  },
  "TECH_LOG_STUDIO_SOURCE": "HTTP",
-  "TECH_LOG_PUBLIC_SOURCE": "MOCK",
+  "TECH_LOG_PUBLIC_SOURCE": "HTTP",
  "FEATURE_OVERRIDES": {
    "reference-feature": "DEFAULT"
  }
@@ -38,21 +38,28 @@
  },
  "contractSet": {
    "setAlgorithm": "CA_CONTRACT_SET_V1",
-    "setDigest": "sha256:c8a29bdf6deadd8951b0a15426fcc119ff85ee9349acc0e8b200c8a5650d8b31",
+    "setDigest": "sha256:ac1448ced933beece92924be4ffb7beb182c3df26371a83ffeffbb174ce98e72",
    "packages": [
+      {
+        "packageId": "@tech-log/management-contract",
+        "version": "1.0.0",
+        "digest": "sha256:ec5e432215fb041abee980787366a6db29ff1ecdd78416aa9c61e09b9b91022f",
+        "runtimeProtocolVersion": 1,
+        "sourceRevision": "6ef5c1c"
+      },
      {
        "packageId": "@tech-log/public-contract",
        "version": "2.0.0",
        "digest": "sha256:8ac71425b38658f34641102b4c2e6e21288c811efebdb92c0a46fb9d4790e23e",
        "runtimeProtocolVersion": 1,
-        "sourceRevision": "b98eaf9"
+        "sourceRevision": "6ef5c1c"
      },
      {
        "packageId": "@tech-log/studio-contract",
        "version": "3.0.0",
        "digest": "sha256:6cae9924403d0761f401643a022980b8e04183eea0d890c143c9fbbbbc7431e4",
        "runtimeProtocolVersion": 1,
-        "sourceRevision": "b98eaf9"
+        "sourceRevision": "6ef5c1c"
      }
    ]
  }
@@ -459,7 +459,12 @@ const CANONICAL_GATE_SHAPE_SHA256 =
  // Dev release manifest drift fix, item 2: recomputed again after FE-GATE-010
  // gained `check-dev-release-manifest`. Same method — 98d19911… was first
  // reproduced from the previous gates.json before this value was hashed.
-  "b40962448e617883060e09eb7183837cfea6833519f435f11713efd083210dbe";
+  // Taxonomy route: recomputed again after FE-GATE-009 gained the
+  // TECH_LOG_STUDIO_TAXONOMY manual accessibility evidence artifact. The gate
+  // lists one evidence artifact per installed route and refuses a set that does
+  // not match the route scope exactly, so adding a route necessarily moves this
+  // digest — that is the point of pinning it.
+  "8c73d4477392a63e91088ff91e53293e7fc3ace891f8eb3da3b0d05fa714df60";

 function canonicalGateShapeSha256(gates: CiGateContract["gates"]): string {
  const normalized = gates.map(
@@ -512,8 +517,10 @@ function canonicalAuthorityBaselineFailures(contract: CiGateContract): string[]
  // Template merge. 126 product artifacts plus the two the template added.
  // Task 11 added one more: the TECH_LOG_STUDIO_ASSETS manual a11y evidence file.
  // Alignment follow-up, item 2 added the TechLog junit report.
-  if (contract.artifacts.length !== 130) {
-    failures.push(`artifact authority baseline must contain exactly 130 artifacts; received ${contract.artifacts.length}`);
+  // The taxonomy route added its own manual a11y evidence file — every installed
+  // route carries one, and the gate checks that the two sets match exactly.
+  if (contract.artifacts.length !== 131) {
+    failures.push(`artifact authority baseline must contain exactly 131 artifacts; received ${contract.artifacts.length}`);
  }
  if (contract.stages.length !== 5) {
    failures.push(`stage authority baseline must contain exactly 5 stages; received ${contract.stages.length}`);
@@ -50,6 +50,14 @@ const CONTRACTS: readonly ContractTarget[] = Object.freeze([
    generated: "src/features/tech-log/contracts/public/generated.ts",
    sourceRecord: "src/features/tech-log/contracts/public/canonical-source.json",
  }),
+  Object.freeze({
+    name: "management",
+    packageId: "@tech-log/management-contract",
+    canonicalYaml: `${CANONICAL_ROOT}/contracts/openapi/studio-management-v1.yaml`,
+    vendorYaml: "src/features/tech-log/contracts/management/management-api.openapi.yaml",
+    generated: "src/features/tech-log/contracts/management/generated.ts",
+    sourceRecord: "src/features/tech-log/contracts/management/canonical-source.json",
+  }),
 ]);

 const OPENAPI_TYPESCRIPT = "openapi-typescript@7.9.1";
@@ -56,6 +56,7 @@ const studioSpaPathPatterns = Object.freeze([
  // reload of /studio/assets was served the in-shell Studio 404 -- the screen
  // was only reachable by client-side navigation from another Studio page.
  "^/studio/assets$",
+  "^/studio/taxonomy$",
  "^/studio/documents$",
  "^/studio/documents/new$",
  "^/studio/documents/[^/]+/(edit|validation|preview|publish)$",
@@ -6,6 +6,7 @@ import {
 import { REFERENCE_FEATURE_TEMPLATE_CONTRIBUTION } from "./reference-feature/contracts/reference-feature-contract-contribution.ts";
 import { REFERENCE_FEATURE_ID } from "./reference-feature/contracts/reference-feature-contract.ts";
 import { INSTALLED_PRODUCT_FEATURE_IDS } from "./installed-product-manifest.ts";
+import { TECH_LOG_MANAGEMENT_CONTRIBUTION } from "./tech-log/contracts/tech-log-management-contract-contribution.ts";
 import { TECH_LOG_PUBLIC_CONTRIBUTION } from "./tech-log/contracts/tech-log-public-contract-contribution.ts";
 import { TECH_LOG_STUDIO_CONTRIBUTION } from "./tech-log/contracts/tech-log-studio-contract-contribution.ts";

@@ -23,8 +24,13 @@ export const INSTALLED_CONTRACT_CONTRIBUTIONS: readonly InstalledContractContrib
          REFERENCE_FEATURE_TEMPLATE_CONTRIBUTION,
          TECH_LOG_STUDIO_CONTRIBUTION,
          TECH_LOG_PUBLIC_CONTRIBUTION,
+          TECH_LOG_MANAGEMENT_CONTRIBUTION,
        ]
-      : [TECH_LOG_STUDIO_CONTRIBUTION, TECH_LOG_PUBLIC_CONTRIBUTION],
+      : [
+          TECH_LOG_STUDIO_CONTRIBUTION,
+          TECH_LOG_PUBLIC_CONTRIBUTION,
+          TECH_LOG_MANAGEMENT_CONTRIBUTION,
+        ],
  );

 export const COMPOSED_CONTRACT_CONTRIBUTIONS = composeContractContributions(
@@ -12,6 +12,7 @@ import {
 import type { CsrfTokenProvider } from "./http/studio-session-csrf.ts";
 import { createMockStudioAssetGateway } from "./mock/mock-studio-asset-gateway.ts";
 import { createMockStudioGateway } from "./mock/mock-studio-gateway.ts";
+import { createHttpManagementGateway } from "./http/http-management-gateway.ts";
 import { createHttpPublicContentGateway } from "./http/http-public-content-gateway.ts";
 import { publicContentQueries } from "./static/public-query.ts";

@@ -76,8 +77,12 @@ export function createTechLogFeatureInstalledInput(
      ? publicContentQueries
      : createHttpPublicContentGateway({ operations: context.contractOperations });

+  const createManagementGateway = () =>
+    createHttpManagementGateway({ operations: context.contractOperations });
+
  const input: TechLogFeatureInput = Object.freeze({
    publicContent,
+    createManagementGateway,
    createStudioGateway,
    createStudioAssetGateway,
  });
@@ -0,0 +1,64 @@
+import type {
+  CreateDraftResponse,
+  ProjectEditResponse,
+  ProjectIndexPage,
+  ProjectUpdateRequest,
+  TopicEdit,
+} from "../../contracts/management/contract.ts";
+import type { ManagementGateway } from "../../application/ports/management-gateway.ts";
+import type { StudioOperationExecutor } from "./http-studio-gateway.ts";
+
+export type { ManagementGateway };
+
+const ROUTE_ID = "TECH_LOG_STUDIO";
+
+/**
+ * 주제·프로젝트 관리 게이트웨이.
+ *
+ * <p>Studio 게이트웨이와 같은 실패 규약을 쓴다 — 실패는 던지고, 화면은 `usePublicContent` 가 아니라
+ * Studio 쪽 상태 처리를 그대로 쓴다. 여기서 Result 로 감싸면 이 표면만 다른 규약이 된다.
+ */
+
+export class ManagementGatewayError extends Error {
+  readonly operationId: string;
+  readonly code: string;
+
+  constructor(operationId: string, code: string) {
+    super(`${operationId}: ${code}`);
+    this.name = "ManagementGatewayError";
+    this.operationId = operationId;
+    this.code = code;
+  }
+}
+
+export function createHttpManagementGateway(
+  deps: Readonly<{ operations: StudioOperationExecutor }>,
+): ManagementGateway {
+  async function run<T>(operationId: string, input: unknown): Promise<T> {
+    const outcome = await deps.operations.execute(operationId, input, { routeId: ROUTE_ID });
+    if (outcome.kind === "SUCCESS") return outcome.value as T;
+    if (outcome.kind === "PROBLEM") {
+      const problem = outcome.problem as Readonly<{ code?: string }> | null;
+      throw new ManagementGatewayError(operationId, problem?.code ?? "PROBLEM");
+    }
+    throw new ManagementGatewayError(operationId, outcome.kind);
+  }
+
+  return Object.freeze({
+    listTopics: () => run<TopicEdit[]>("listStudioTopics", {}),
+    createTopic: (input: TopicEdit) => run<TopicEdit>("createTopic", input),
+    updateTopic: (id: string, body: TopicEdit) => run<TopicEdit>("updateTopic", { id, body }),
+    deleteTopic: async (id: string, expectedVersion: number) => {
+      await run<void>("deleteTopic", { id, expectedVersion });
+    },
+    listProjects: (page?: number, size?: number) =>
+      run<ProjectIndexPage>("listStudioProjects", { ...(page !== undefined ? { page } : {}), ...(size !== undefined ? { size } : {}) }),
+    getProject: (id: string) => run<ProjectEditResponse>("getProjectForEdit", { id }),
+    createProject: (title: string) => run<CreateDraftResponse>("createProject", { title }),
+    updateProject: (id: string, body: ProjectUpdateRequest) =>
+      run<ProjectEditResponse>("updateProject", { id, body }),
+    deleteProject: async (id: string, expectedVersion: number) => {
+      await run<void>("deleteProject", { id, expectedVersion });
+    },
+  });
+}
@@ -0,0 +1,26 @@
+import type {
+  CreateDraftResponse,
+  ProjectEditResponse,
+  ProjectIndexPage,
+  ProjectUpdateRequest,
+  TopicEdit,
+} from "../../contracts/management/contract.ts";
+
+/**
+ * 주제·프로젝트 관리 표면.
+ *
+ * <p>Studio 게이트웨이와 같은 실패 규약이다 — 실패는 던지고, 화면이 잡는다. MOCK 대응물을 두지
+ * 않는 것도 의도다: 이 표면은 백엔드가 없으면 존재할 이유가 없고, 픽스처를 만들면 실제로는 만들
+ * 수 없는 주제를 화면이 보여주게 된다.
+ */
+export type ManagementGateway = Readonly<{
+  listTopics(): Promise<TopicEdit[]>;
+  createTopic(input: TopicEdit): Promise<TopicEdit>;
+  updateTopic(id: string, body: TopicEdit): Promise<TopicEdit>;
+  deleteTopic(id: string, expectedVersion: number): Promise<void>;
+  listProjects(page?: number, size?: number): Promise<ProjectIndexPage>;
+  getProject(id: string): Promise<ProjectEditResponse>;
+  createProject(title: string): Promise<CreateDraftResponse>;
+  updateProject(id: string, body: ProjectUpdateRequest): Promise<ProjectEditResponse>;
+  deleteProject(id: string, expectedVersion: number): Promise<void>;
+}>;
@@ -1,5 +1,6 @@
 import type { PublicContentQueries } from "./ports/public-content-queries.ts";
 import type { StudioAssetGateway } from "./ports/studio-asset-gateway.ts";
+import type { ManagementGateway } from "./ports/management-gateway.ts";
 import type { StudioGateway } from "./ports/studio-gateway.ts";

 export const TECH_LOG_FEATURE_ID = "tech-log" as const;
@@ -8,6 +9,9 @@ export type TechLogFeatureInput = Readonly<{
  publicContent: PublicContentQueries;
  createStudioGateway(): StudioGateway;
  createStudioAssetGateway(): StudioAssetGateway;
+  // 주제·프로젝트 관리. MOCK 대응물이 없다 — 이 표면은 백엔드가 없으면 존재할 이유가 없고,
+  // 픽스처를 만들면 실제로는 못 만드는 주제를 화면이 보여주게 된다.
+  createManagementGateway(): ManagementGateway;
 }>;

 declare module "../../../application/ports/in/application-api.ts" {
@@ -0,0 +1,87 @@
+{
+  "packageId": "@tech-log/management-contract",
+  "version": "1.0.0",
+  "digest": "sha256:ec5e432215fb041abee980787366a6db29ff1ecdd78416aa9c61e09b9b91022f",
+  "sourceRevision": "6ef5c1c",
+  "operationIds": [
+    "createCaseDraft",
+    "getCaseForEdit",
+    "updateCaseDraft",
+    "deleteCaseDraft",
+    "createReferenceDraft",
+    "getReferenceForEdit",
+    "updateReferenceDraft",
+    "deleteReferenceDraft",
+    "validateCase",
+    "submitReviewCase",
+    "returnToDraftCase",
+    "unpublishCase",
+    "archiveCase",
+    "restoreCase",
+    "publishCase",
+    "validateReference",
+    "submitReviewReference",
+    "returnToDraftReference",
+    "unpublishReference",
+    "archiveReference",
+    "restoreReference",
+    "publishReference",
+    "createQuestion",
+    "listStudioQuestions",
+    "getQuestionForEdit",
+    "updateQuestion",
+    "deleteQuestion",
+    "addQuestionUpdate",
+    "updateQuestionUpdate",
+    "deleteQuestionUpdate",
+    "resolveQuestion",
+    "startQuestionInvestigation",
+    "pauseQuestion",
+    "resumeQuestion",
+    "reopenQuestion",
+    "archiveQuestion",
+    "publishQuestion",
+    "unpublishQuestion",
+    "createProject",
+    "listStudioProjects",
+    "getProjectForEdit",
+    "updateProject",
+    "deleteProject",
+    "changeProjectPhase",
+    "publishProject",
+    "unpublishProject",
+    "createProjectDecision",
+    "listStudioProjectDecisions",
+    "getProjectDecision",
+    "updateProjectDecision",
+    "acceptProjectDecision",
+    "rejectProjectDecision",
+    "supersedeProjectDecision",
+    "createRelease",
+    "listStudioReleases",
+    "getReleaseForEdit",
+    "updateRelease",
+    "deleteRelease",
+    "publishRelease",
+    "archiveRelease",
+    "listStudioTopics",
+    "createTopic",
+    "updateTopic",
+    "deleteTopic",
+    "listStudioTags",
+    "createTag",
+    "updateTag",
+    "deleteTag",
+    "getStudioSite",
+    "updateStudioSite",
+    "getStudioProfile",
+    "updateStudioProfile",
+    "publishProfile",
+    "unpublishProfile",
+    "getHomeFocus",
+    "updateHomeFocus",
+    "listStudioProjectActivities",
+    "createProjectActivity",
+    "updateProjectActivity"
+  ]
+}
@@ -0,0 +1,12 @@
+import type { components } from "./generated.ts";
+
+type Schemas = components["schemas"];
+
+export type TopicEdit = Schemas["TopicEdit"];
+export type ProjectEditResponse = Schemas["ProjectEditResponse"];
+export type ProjectIndexItem = Schemas["ProjectIndexItem"];
+export type ProjectIndexPage = Schemas["ProjectIndexPage"];
+export type ProjectUpdateRequest = Schemas["ProjectUpdateRequest"];
+export type CreateDraftRequest = Schemas["CreateDraftRequest"];
+export type CreateDraftResponse = Schemas["CreateDraftResponse"];
+export type ExpectedVersionRequest = Schemas["ExpectedVersionRequest"];
@@ -2,7 +2,7 @@
  "packageId": "@tech-log/public-contract",
  "version": "2.0.0",
  "digest": "sha256:8ac71425b38658f34641102b4c2e6e21288c811efebdb92c0a46fb9d4790e23e",
-  "sourceRevision": "b98eaf9",
+  "sourceRevision": "6ef5c1c",
  "operationIds": [
    "getPublicSite",
    "getPublicHome",
@@ -2,7 +2,7 @@
  "packageId": "@tech-log/studio-contract",
  "version": "3.0.0",
  "digest": "sha256:6cae9924403d0761f401643a022980b8e04183eea0d890c143c9fbbbbc7431e4",
-  "sourceRevision": "b98eaf9",
+  "sourceRevision": "6ef5c1c",
  "operationIds": [
    "getStudioSession",
    "getStudioDashboard",
@@ -0,0 +1,256 @@
+import type {
+  CommandEffectDescriptor,
+  InstalledContractContribution,
+  InstalledHttpContract,
+} from "../../../contracts/external-contract-runtime.ts";
+import type { ProblemDetails } from "./studio/contract.ts";
+import { TECH_LOG_FEATURE_ID } from "../application/tech-log-feature-input.ts";
+import canonicalSource from "./management/canonical-source.json" with { type: "json" };
+import {
+  envelopeData,
+  envelopeError,
+  passthroughInput,
+} from "./tech-log-studio-contract-contribution.ts";
+import { TECH_LOG_STUDIO_SESSION_AUTH_PROFILE_ID } from "../adapters/http/studio-session-credentials.ts";
+
+type PathValues = Readonly<Record<string, string>>;
+type QueryEntries = readonly (readonly [string, string])[];
+
+const NO_PATH: PathValues = Object.freeze({});
+const NO_QUERY = Object.freeze([]) as QueryEntries;
+const PROBLEM = envelopeError();
+
+/** Studio 쪽과 같은 판정이다: 4xx 도메인 거절은 적용되지 않았음이 확정, 5xx·네트워크는 불확정. */
+const COMMAND_EFFECT: CommandEffectDescriptor<ProblemDetails> = Object.freeze({
+  successEffect: "APPLIED_CONFIRMED" as const,
+  classifyProblem({ status }: Readonly<{ status: number; problem: unknown }>) {
+    return status >= 400 && status < 500 ? "NOT_APPLIED" : "MAYBE_APPLIED";
+  },
+});
+
+/**
+ * 관리 표면은 Studio 와 같은 세션·CSRF 를 쓴다. 계약이 `sessionCookie` 보안과 `CsrfToken`
+ * 파라미터를 선언하고 있고, 실제로 같은 백엔드의 같은 필터 체인을 지난다 — 그래서 인증 프로필도
+ * 공유한다. 부트스트랩 프로필은 쓰지 않는다: CSRF 토큰을 발급하는 것은 `getStudioSession`
+ * 하나뿐이고, 이 표면은 그 뒤에만 호출된다.
+ */
+function readOperation(
+  operationId: string,
+  pathTemplate: string,
+  responseByteLimit: number,
+  project: (input: never) => Readonly<{ pathValues: PathValues; queryEntries: QueryEntries }> = () =>
+    Object.freeze({ pathValues: NO_PATH, queryEntries: NO_QUERY }),
+): InstalledHttpContract<unknown, unknown, unknown> {
+  return Object.freeze({
+    contract: Object.freeze({
+      operationId,
+      method: "GET" as const,
+      pathTemplate,
+      inputValidator: passthroughInput(`${operationId}Input`),
+      outputValidator: envelopeData(`${operationId}Output`),
+      problemValidator: PROBLEM,
+      acceptedStatuses: Object.freeze([200]),
+      emptyBodyStatuses: Object.freeze([]),
+      retrySemantics: "SAFE" as const,
+      requestBody: "NONE" as const,
+      responseBody: "REQUIRED_JSON" as const,
+      commandRecovery: null,
+      commandEffect: null,
+      projectRequest(input: never) {
+        return Object.freeze({ ...project(input), body: null });
+      },
+    }),
+    frontend: Object.freeze({
+      policyId: `${operationId}_V1`,
+      requestByteLimit: 0,
+      responseByteLimit,
+      totalDeadlineMs: 10_000,
+      retryBudget: 2 as const,
+      authProfileId: TECH_LOG_STUDIO_SESSION_AUTH_PROFILE_ID,
+      diagnosticsOperation: `techLog.management.${operationId}`,
+    }),
+  }) as InstalledHttpContract<unknown, unknown, unknown>;
+}
+
+/**
+ * 쓰기는 `Idempotency-Key` 를 쓰지 않는다 — 계약이 요구하지 않고, 재생 보호는 `expectedVersion`
+ * 이 맡는다. 그래서 `NOT_IDEMPOTENT` 가 아니라 재시도 예산 0 으로 둔다: 응답을 못 본 재시도가
+ * 두 번째 생성을 만들 수 있는 표면이다.
+ */
+function writeOperation(
+  operationId: string,
+  method: "POST" | "PUT" | "DELETE",
+  pathTemplate: string,
+  options: Readonly<{
+    acceptedStatuses: readonly number[];
+    emptyBodyStatuses?: readonly number[];
+    requestByteLimit: number;
+    responseByteLimit: number;
+  }>,
+  project: (input: never) => Readonly<{
+    pathValues: PathValues;
+    queryEntries: QueryEntries;
+    body: unknown;
+  }>,
+): InstalledHttpContract<unknown, unknown, unknown> {
+  return Object.freeze({
+    contract: Object.freeze({
+      operationId,
+      method,
+      pathTemplate,
+      inputValidator: passthroughInput(`${operationId}Input`),
+      outputValidator: envelopeData(`${operationId}Output`),
+      problemValidator: PROBLEM,
+      acceptedStatuses: Object.freeze([...options.acceptedStatuses]),
+      emptyBodyStatuses: Object.freeze([...(options.emptyBodyStatuses ?? [])]),
+      // 생성은 재생 보호가 없으므로 NEVER 다. 수정·삭제는 expectedVersion 이 두 번째
+      // 적용을 409 로 막으므로 IDEMPOTENT 로 둘 수 있지만, 세 경우를 한 헬퍼가 만들고
+      // 있어 가장 보수적인 값으로 통일한다 — 재시도 예산도 0 이라 실제 차이는 없다.
+      retrySemantics: "NEVER" as const,
+      requestBody: "JSON" as const,
+      responseBody:
+        (options.emptyBodyStatuses ?? []).length > 0
+          ? ("OPTIONAL_JSON" as const)
+          : ("REQUIRED_JSON" as const),
+      commandRecovery: null,
+      commandEffect: COMMAND_EFFECT,
+      projectRequest(input: never) {
+        return Object.freeze(project(input));
+      },
+    }),
+    frontend: Object.freeze({
+      policyId: `${operationId}_V1`,
+      requestByteLimit: options.requestByteLimit,
+      responseByteLimit: options.responseByteLimit,
+      totalDeadlineMs: 15_000,
+      retryBudget: 0 as const,
+      authProfileId: TECH_LOG_STUDIO_SESSION_AUTH_PROFILE_ID,
+      diagnosticsOperation: `techLog.management.${operationId}`,
+    }),
+    // read 쪽과 달리 여기서만 unknown 을 거친다: `emptyBodyStatuses` 유무로 responseBody 가
+    // 갈리는 삼항이 union 타입을 만들어, 컴파일러가 리터럴을 대상 타입과 겹친다고 보지 않는다.
+  }) as unknown as InstalledHttpContract<unknown, unknown, unknown>;
+}
+
+const byId = (input: never) => {
+  const value = input as unknown as Readonly<{ id: string }>;
+  return Object.freeze({ pathValues: Object.freeze({ id: value.id }), queryEntries: NO_QUERY });
+};
+
+const T = "/api/v1/studio/topics";
+const P = "/api/v1/studio/projects";
+
+const HTTP_CONTRACTS = Object.freeze([
+  readOperation("listStudioTopics", T, 131_072),
+  writeOperation(
+    "createTopic",
+    "POST",
+    T,
+    { acceptedStatuses: [201], requestByteLimit: 16_384, responseByteLimit: 16_384 },
+    (input: never) =>
+      Object.freeze({ pathValues: NO_PATH, queryEntries: NO_QUERY, body: input }),
+  ),
+  writeOperation(
+    "updateTopic",
+    "PUT",
+    `${T}/{id}`,
+    { acceptedStatuses: [200], requestByteLimit: 16_384, responseByteLimit: 16_384 },
+    (input: never) => {
+      const value = input as unknown as Readonly<{ id: string; body: unknown }>;
+      return Object.freeze({
+        pathValues: Object.freeze({ id: value.id }),
+        queryEntries: NO_QUERY,
+        body: value.body,
+      });
+    },
+  ),
+  writeOperation(
+    "deleteTopic",
+    "DELETE",
+    `${T}/{id}`,
+    {
+      acceptedStatuses: [204],
+      emptyBodyStatuses: [204],
+      requestByteLimit: 1_024,
+      responseByteLimit: 1_024,
+    },
+    (input: never) => {
+      const value = input as unknown as Readonly<{ id: string; expectedVersion: number }>;
+      return Object.freeze({
+        pathValues: Object.freeze({ id: value.id }),
+        queryEntries: NO_QUERY,
+        body: { expectedVersion: value.expectedVersion },
+      });
+    },
+  ),
+  readOperation("listStudioProjects", P, 262_144, (input: never) => {
+    const value = input as unknown as Readonly<{ page?: number; size?: number }> | undefined;
+    const entries: (readonly [string, string])[] = [];
+    if (value?.page !== undefined) entries.push(["page", String(value.page)]);
+    if (value?.size !== undefined) entries.push(["size", String(value.size)]);
+    return Object.freeze({ pathValues: NO_PATH, queryEntries: Object.freeze(entries) });
+  }),
+  readOperation("getProjectForEdit", `${P}/{id}`, 262_144, byId),
+  writeOperation(
+    "createProject",
+    "POST",
+    P,
+    { acceptedStatuses: [201], requestByteLimit: 4_096, responseByteLimit: 8_192 },
+    (input: never) =>
+      Object.freeze({ pathValues: NO_PATH, queryEntries: NO_QUERY, body: input }),
+  ),
+  writeOperation(
+    "updateProject",
+    "PUT",
+    `${P}/{id}`,
+    { acceptedStatuses: [200], requestByteLimit: 131_072, responseByteLimit: 262_144 },
+    (input: never) => {
+      const value = input as unknown as Readonly<{ id: string; body: unknown }>;
+      return Object.freeze({
+        pathValues: Object.freeze({ id: value.id }),
+        queryEntries: NO_QUERY,
+        body: value.body,
+      });
+    },
+  ),
+  writeOperation(
+    "deleteProject",
+    "DELETE",
+    `${P}/{id}`,
+    {
+      acceptedStatuses: [204],
+      emptyBodyStatuses: [204],
+      requestByteLimit: 1_024,
+      responseByteLimit: 1_024,
+    },
+    (input: never) => {
+      const value = input as unknown as Readonly<{ id: string; expectedVersion: number }>;
+      return Object.freeze({
+        pathValues: Object.freeze({ id: value.id }),
+        queryEntries: NO_QUERY,
+        body: { expectedVersion: value.expectedVersion },
+      });
+    },
+  ),
+]);
+
+export const TECH_LOG_MANAGEMENT_OPERATION_IDS = Object.freeze(
+  HTTP_CONTRACTS.map((entry) => entry.contract.operationId),
+);
+
+export const TECH_LOG_MANAGEMENT_CONTRIBUTION: InstalledContractContribution = Object.freeze({
+  contributionId: "tech-log-management-http-v1",
+  featureId: TECH_LOG_FEATURE_ID,
+  source: Object.freeze({
+    kind: "EXTERNAL_PACKAGE" as const,
+    package: Object.freeze({
+      packageId: canonicalSource.packageId,
+      version: canonicalSource.version,
+      digest: canonicalSource.digest as `sha256:${string}`,
+      runtimeProtocolVersion: 1 as const,
+      sourceRevision: canonicalSource.sourceRevision,
+    }),
+  }),
+  http: HTTP_CONTRACTS,
+  events: Object.freeze([]),
+});
@@ -48,6 +48,7 @@ const TECH_LOG_ROUTE_SPECS = [
  defineSpec({ routeId: "TECH_LOG_STUDIO_PUBLICATIONS", path: "/studio/publications", layoutGroup: "STUDIO", paramsSchema: null, searchSchema: null, title: "게시 기록", navigationLabel: "게시 기록", navigationOrder: 20 }),
  defineSpec({ routeId: "TECH_LOG_STUDIO_PUBLICATION_PREVIEW", path: "/studio/publications/:publicationEventId/preview", layoutGroup: "STUDIO", paramsSchema: "TechLogPublicationEventIdParams", searchSchema: null, title: "게시 Snapshot", navigationLabel: null, navigationOrder: null }),
  defineSpec({ routeId: "TECH_LOG_STUDIO_ASSETS", path: "/studio/assets", layoutGroup: "STUDIO", paramsSchema: null, searchSchema: null, title: "Asset", navigationLabel: null, navigationOrder: null }),
+  defineSpec({ routeId: "TECH_LOG_STUDIO_TAXONOMY", path: "/studio/taxonomy", layoutGroup: "STUDIO", paramsSchema: null, searchSchema: null, title: "주제와 프로젝트", navigationLabel: "주제·프로젝트", navigationOrder: 40 }),
  defineSpec({ routeId: "TECH_LOG_STUDIO_NOT_FOUND", path: "/studio/*", layoutGroup: "STUDIO", paramsSchema: "TechLogStudioSplat", searchSchema: null, title: "Studio 화면을 찾을 수 없습니다", navigationLabel: null, navigationOrder: null }),
  defineSpec({ routeId: "NOT_FOUND", path: "*", layoutGroup: "PUBLIC", paramsSchema: "NotFoundSplat", searchSchema: null, title: "페이지를 찾을 수 없습니다.", navigationLabel: null, navigationOrder: null }),
 ] as const;
@@ -56,7 +56,11 @@ export function ExploreFilterForm({
      item.title.toLocaleLowerCase("ko-KR") === normalizedProject,
  )?.slug;
  const hasActiveFilter = Boolean((showType && kind) || topic || project);
-  const formKey = [kind, topic, project, showType].join(":");
+  // 선택지는 나중에 도착하는데 아래 select 들은 `defaultValue` 를 쓰는 비제어 요소다 —
+  // 첫 렌더에는 맞출 option 이 없어 값이 비어버린다. 도착 여부를 키에 넣어 그때 폼을
+  // 다시 마운트시키면 defaultValue 가 적용된다. 제어 요소로 바꾸지 않는 이유는 이 폼이
+  // submit 으로 URL 을 만드는 구조라 값의 주인이 URL 이기 때문이다.
+  const formKey = [kind, topic, project, showType, view.ready].join(":");

  function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
@@ -23,7 +23,7 @@ export function SearchDialog({
  // result list with a loading skeleton on every key, which is a worse dialog
  // than a stale-free local filter. The predicate is the same one the catalog
  // applies for a non-empty query, so the visible result set is unchanged.
-  const view = usePublicContent(["tech-log", "search", ""], async (queries) => ({
+  const view = usePublicContent(["tech-log", "search", "dialog"], async (queries) => ({
    entities: await queries.searchPublicContent(""),
  }));
  const results = (view.data?.entities ?? []).filter((entity) =>
@@ -13,7 +13,11 @@ export function SearchPage() {
  const navigate = useNavigate();
  const { search } = useRouteInput<"TECH_LOG_SEARCH">();
  const query = optionalString(search.q)?.trim() ?? "";
-  const view = usePublicContent(["tech-log", "search", query], async (queries) => ({
+  // 키의 마지막 조각이 화면을 구분한다. 헤더의 검색 다이얼로그도 같은 카탈로그를 읽고
+  // 빈 검색어일 때 앞 세 조각이 완전히 겹치는데, 두 화면이 담아 오는 모양이 다르다
+  // (여기는 `results`, 다이얼로그는 `entities`). 키가 같으면 react-query 가 한쪽 캐시를
+  // 다른 쪽에 돌려주고, 받는 쪽은 없는 필드를 읽다 렌더에서 죽는다.
+  const view = usePublicContent(["tech-log", "search", "page", query], async (queries) => ({
    results: await queries.searchPublicContent(query),
  }));

@@ -0,0 +1,276 @@
+import { useCallback, useEffect, useState, type FormEvent } from "react";
+
+import type { ProjectIndexItem, TopicEdit } from "../../../contracts/management/contract.ts";
+import { useStudio } from "../use-studio.ts";
+
+/**
+ * 주제와 프로젝트 관리.
+ *
+ * <p>이 화면이 존재하는 이유는 문서 발행이 주제를 요구하는데 주제를 만들 곳이 없었기 때문이다.
+ * 그래서 범위를 목록·생성·삭제로 끊었다 — 편집(이름 변경, 단계 전환, 공개 범위)은 계약에 있고
+ * 백엔드도 구현돼 있으나, 그 화면은 별도 설계가 필요하다.
+ *
+ * <p>새 CSS 를 만들지 않는다. 작업본 목록이 쓰는 클래스만 재사용하므로 이 화면은 Studio 의
+ * 나머지와 같은 간격·타이포·색을 그대로 따른다.
+ */
+export function TaxonomyManager() {
+  const { managementGateway, setRequestAnnouncement } = useStudio();
+  const [topics, setTopics] = useState<TopicEdit[] | null>(null);
+  const [projects, setProjects] = useState<ProjectIndexItem[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [pending, setPending] = useState(false);
+  const [generation, setGeneration] = useState(0);
+
+  const [topicName, setTopicName] = useState("");
+  const [topicSlug, setTopicSlug] = useState("");
+  const [projectTitle, setProjectTitle] = useState("");
+
+  const reload = useCallback(() => setGeneration((value) => value + 1), []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError("");
+    void Promise.all([managementGateway.listTopics(), managementGateway.listProjects(0, 50)]).then(
+      ([topicList, projectPage]) => {
+        if (cancelled) return;
+        setTopics(topicList);
+        setProjects(projectPage.items ?? []);
+        setLoading(false);
+      },
+      () => {
+        if (cancelled) return;
+        setError("주제와 프로젝트를 불러오지 못했습니다.");
+        setLoading(false);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [managementGateway, generation]);
+
+  /**
+   * slug 를 비워 두면 이름에서 만든다. 한글 이름이 흔한데 slug 는 ASCII 만 받으므로, 비운 채로
+   * 저장하면 서버가 422 로 거절한다 — 사용자가 규칙을 몰라도 되도록 여기서 채운다.
+   */
+  const slugify = (value: string) =>
+    value
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/gu, "-")
+      .replace(/^-+|-+$/gu, "");
+
+  const submitTopic = async (event: FormEvent) => {
+    event.preventDefault();
+    if (pending) return;
+    const name = topicName.trim();
+    const slug = slugify(topicSlug || topicName);
+    if (!name || !slug) {
+      setError("주제 이름과 slug 를 입력해 주세요. slug 는 영문·숫자·하이픈만 가능합니다.");
+      return;
+    }
+    setPending(true);
+    setError("");
+    try {
+      await managementGateway.createTopic({ name, slug } as TopicEdit);
+      setTopicName("");
+      setTopicSlug("");
+      setRequestAnnouncement(`주제 ${name} 을(를) 만들었습니다.`);
+      reload();
+    } catch {
+      setError("주제를 만들지 못했습니다. 같은 이름이나 slug 가 이미 있을 수 있습니다.");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const submitProject = async (event: FormEvent) => {
+    event.preventDefault();
+    if (pending) return;
+    const title = projectTitle.trim();
+    if (!title) {
+      setError("프로젝트 이름을 입력해 주세요.");
+      return;
+    }
+    setPending(true);
+    setError("");
+    try {
+      await managementGateway.createProject(title);
+      setProjectTitle("");
+      setRequestAnnouncement(`프로젝트 ${title} 을(를) 만들었습니다.`);
+      reload();
+    } catch {
+      setError("프로젝트를 만들지 못했습니다.");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const removeTopic = async (topic: TopicEdit) => {
+    if (pending || topic.id === undefined || topic.version === undefined) return;
+    setPending(true);
+    setError("");
+    try {
+      await managementGateway.deleteTopic(topic.id, topic.version);
+      setRequestAnnouncement(`주제 ${topic.name} 을(를) 삭제했습니다.`);
+      reload();
+    } catch {
+      setError("주제를 삭제하지 못했습니다. 이 주제를 쓰는 기록이 있을 수 있습니다.");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const removeProject = async (project: ProjectIndexItem) => {
+    if (pending) return;
+    setPending(true);
+    setError("");
+    try {
+      await managementGateway.deleteProject(project.id, project.version);
+      setRequestAnnouncement(`프로젝트 ${project.name} 을(를) 삭제했습니다.`);
+      reload();
+    } catch {
+      setError("프로젝트를 삭제하지 못했습니다. 연결된 기록이 있을 수 있습니다.");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <div className="studio-page studio-documents-page">
+      <header className="studio-page-top">
+        <div className="studio-page-heading">
+          <p className="studio-eyebrow">TAXONOMY</p>
+          <h1>주제와 프로젝트</h1>
+          <p>문서를 게시하려면 주제가 필요합니다. 여기서 만들고 정리합니다.</p>
+        </div>
+      </header>
+
+      <section className="studio-document-tools" aria-label="주제 만들기">
+        <form onSubmit={submitTopic}>
+          <label htmlFor="taxonomy-topic-name">새 주제</label>
+          <div>
+            <input
+              id="taxonomy-topic-name"
+              type="text"
+              value={topicName}
+              placeholder="주제 이름"
+              onChange={(event) => setTopicName(event.target.value)}
+            />
+            <input
+              type="text"
+              value={topicSlug}
+              placeholder="slug (비우면 이름에서 생성)"
+              aria-label="주제 slug"
+              onChange={(event) => setTopicSlug(event.target.value)}
+            />
+            <button type="submit" disabled={pending}>
+              추가
+            </button>
+          </div>
+        </form>
+        <form onSubmit={submitProject}>
+          <label htmlFor="taxonomy-project-title">새 프로젝트</label>
+          <div>
+            <input
+              id="taxonomy-project-title"
+              type="text"
+              value={projectTitle}
+              placeholder="프로젝트 이름"
+              onChange={(event) => setProjectTitle(event.target.value)}
+            />
+            <button type="submit" disabled={pending}>
+              추가
+            </button>
+          </div>
+        </form>
+      </section>
+
+      {loading ? (
+        <p className="studio-loading" role="status">
+          주제와 프로젝트를 불러오는 중입니다.
+        </p>
+      ) : null}
+      {error ? (
+        <p className="studio-screen-error" role="alert">
+          {error}
+        </p>
+      ) : null}
+
+      {!loading && topics ? (
+        <>
+          <p className="studio-result-count">{topics.length}개의 주제</p>
+          {topics.length ? (
+            <div className="studio-document-list">
+              {topics.map((topic) => (
+                <article className="studio-document-row" key={topic.id ?? topic.slug}>
+                  <p className="studio-row-label">TOPIC</p>
+                  <div className="studio-document-title">
+                    <h2>{topic.name}</h2>
+                    <p>{topic.slug}</p>
+                  </div>
+                  <dl>
+                    <div>
+                      <dt>상태</dt>
+                      <dd>{topic.status === "ARCHIVED" ? "보관" : "사용 중"}</dd>
+                    </div>
+                  </dl>
+                  <button
+                    className="studio-secondary-button"
+                    type="button"
+                    disabled={pending}
+                    onClick={() => void removeTopic(topic)}
+                  >
+                    삭제
+                  </button>
+                </article>
+              ))}
+            </div>
+          ) : (
+            <p className="studio-empty">아직 주제가 없습니다. 위에서 하나 만들어 주세요.</p>
+          )}
+        </>
+      ) : null}
+
+      {!loading && projects ? (
+        <>
+          <p className="studio-result-count">{projects.length}개의 프로젝트</p>
+          {projects.length ? (
+            <div className="studio-document-list">
+              {projects.map((project) => (
+                <article className="studio-document-row" key={project.id}>
+                  <p className="studio-row-label">PROJECT</p>
+                  <div className="studio-document-title">
+                    <h2>{project.name}</h2>
+                    <p>{project.currentObjective ?? "목표 미지정"}</p>
+                  </div>
+                  <dl>
+                    <div>
+                      <dt>단계</dt>
+                      <dd>{project.phase}</dd>
+                    </div>
+                    <div>
+                      <dt>공개</dt>
+                      <dd>{project.targetVisibility}</dd>
+                    </div>
+                  </dl>
+                  <button
+                    className="studio-secondary-button"
+                    type="button"
+                    disabled={pending}
+                    onClick={() => void removeProject(project)}
+                  >
+                    삭제
+                  </button>
+                </article>
+              ))}
+            </div>
+          ) : (
+            <p className="studio-empty">아직 프로젝트가 없습니다.</p>
+          )}
+        </>
+      ) : null}
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+import { TaxonomyManager } from "../components/taxonomy-manager.tsx";
+
+export function TaxonomyPage() {
+  return <TaxonomyManager />;
+}
@@ -9,6 +9,7 @@ import {
 import { isStudioGatewayError } from "../../application/ports/studio-gateway-error.ts";
 import type { StudioAssetGateway } from "../../application/ports/studio-asset-gateway.ts";
 import type { StudioGateway } from "../../application/ports/studio-gateway.ts";
+import type { ManagementGateway } from "../../application/ports/management-gateway.ts";
 import type { ResolvePublishedLabel } from "../../domain/public-render-content.ts";
 import type {
  WorkingCopy,
@@ -29,6 +30,7 @@ type StudioProviderProps = Readonly<{
  // Optional so test harnesses that only exercise the document gateway keep
  // working unchanged. `StudioShell` always supplies one in the running app.
  createAssetGateway?: () => StudioAssetGateway;
+  createManagementGateway: () => ManagementGateway;
  resolvePublishedLabel?: ResolvePublishedLabel;
  now?: () => Date;
  navigate?: (href: string) => void;
@@ -53,6 +55,7 @@ export function StudioProvider({
  children,
  createGateway,
  createAssetGateway,
+  createManagementGateway,
  resolvePublishedLabel = missingPublishedLabel,
  now = () => new Date("2026-08-14T01:00:00.000Z"),
  navigate = defaultNavigate,
@@ -64,6 +67,7 @@ export function StudioProvider({
  const [assetGateway] = useState<StudioAssetGateway | null>(
    () => createAssetGateway?.() ?? null,
  );
+  const [managementGateway] = useState<ManagementGateway>(() => createManagementGateway());
  const [editor, setEditor] = useState<StudioEditorState | null>(null);
  const [pendingHref, setPendingHref] = useState<string | null>(null);
  const [requestAnnouncement, setRequestAnnouncement] = useState("");
@@ -159,6 +163,7 @@ export function StudioProvider({
  const value = useMemo<StudioContextValue>(
    () => ({
      gateway,
+      managementGateway,
      assetGateway,
      resolvePublishedLabel,
      now,
@@ -177,6 +182,7 @@ export function StudioProvider({
      clearEditor,
      editor,
      gateway,
+      managementGateway,
      navigateInternal,
      now,
      requestAnnouncement,
@@ -58,6 +58,10 @@ export function StudioShell({ children }: StudioShellProps) {
    () => application.features.get(TECH_LOG_FEATURE_ID).createStudioGateway(),
    [application],
  );
+  const createManagementGateway = useCallback(
+    () => application.features.get(TECH_LOG_FEATURE_ID).createManagementGateway(),
+    [application],
+  );
  const createAssetGateway = useCallback(
    () => application.features.get(TECH_LOG_FEATURE_ID).createStudioAssetGateway(),
    [application],
@@ -92,6 +96,7 @@ export function StudioShell({ children }: StudioShellProps) {
        key={generation}
        createGateway={createGateway}
        createAssetGateway={createAssetGateway}
+        createManagementGateway={createManagementGateway}
        resolvePublishedLabel={resolvePublishedLabel}
        navigate={navigateInternal}
      >
@@ -2,6 +2,7 @@ import { createContext, useContext, useMemo } from "react";

 import type { StudioAssetGateway } from "../../application/ports/studio-asset-gateway.ts";
 import type { StudioGateway } from "../../application/ports/studio-gateway.ts";
+import type { ManagementGateway } from "../../application/ports/management-gateway.ts";
 import type { ResolvePublishedLabel } from "../../domain/public-render-content.ts";
 import type {
  WorkingCopy,
@@ -23,6 +24,9 @@ export type StudioContextValue = Readonly<{
  // `createAssetGateway` prop. `StudioShell` — the real app path — always
  // supplies one, so production code sees this populated.
  assetGateway: StudioAssetGateway | null;
+  // 주제·프로젝트 관리. `assetGateway` 와 같은 이유로 nullable 이 아니다 — 이 표면은
+  // MOCK 소스가 없어 항상 HTTP 이고, 없는 경우가 존재하지 않는다.
+  managementGateway: ManagementGateway;
  resolvePublishedLabel: ResolvePublishedLabel;
  now(): Date;
  editor: StudioEditorState | null;
@@ -209,6 +209,13 @@ export const TECH_LOG_ROUTE_RUNTIME = Object.freeze({
      "AssetsPage",
    ),
  ),
+  TECH_LOG_STUDIO_TAXONOMY: runtime(
+    "TECH_LOG_STUDIO_TAXONOMY",
+    routeModule(
+      () => import("./studio/pages/taxonomy-page.tsx"),
+      "TaxonomyPage",
+    ),
+  ),
  TECH_LOG_STUDIO_NOT_FOUND: runtime(
    "TECH_LOG_STUDIO_NOT_FOUND",
    routeModule(
@@ -28,6 +28,7 @@ import { MOCK_STUDIO_INSTALL_CONTEXT } from "../../helpers/studio-install-contex
 import type { StudioAssetGateway } from "../../../src/features/tech-log/application/ports/studio-asset-gateway.ts";
 import { StudioGatewayError } from "../../../src/features/tech-log/application/ports/studio-gateway-error.ts";
 import type { Asset } from "../../../src/features/tech-log/contracts/studio/contract.ts";
+import { createManagementGatewayStub } from "../../helpers/management-gateway-stub.ts";

 // jsdom does not implement `<dialog>` -- same polyfill `studio-save-navigation.test.tsx`
 // and `studio-decision-authoring.test.tsx` already use for the other Studio dialogs.
@@ -433,7 +434,8 @@ test("inserts the directive at the saved cursor position and the live preview re

  render(
    <MemoryRouter initialEntries={[`/studio/documents/${FIXTURE_IDS.redisAdapterCase}/edit`]}>
-      <StudioProvider createGateway={() => gateway} createAssetGateway={() => assetGateway}>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} createAssetGateway={() => assetGateway}>
        <DocumentEditorScreen documentId={FIXTURE_IDS.redisAdapterCase} />
      </StudioProvider>
    </MemoryRouter>,
@@ -538,7 +540,8 @@ test("an asset uploaded through the mock composition previews live and passes mo

  render(
    <MemoryRouter initialEntries={[`/studio/documents/${created.id}/edit`]}>
-      <StudioProvider createGateway={() => gateway} createAssetGateway={() => assetGateway}>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} createAssetGateway={() => assetGateway}>
        <DocumentEditorScreen documentId={created.id} />
      </StudioProvider>
    </MemoryRouter>,
@@ -1259,7 +1262,8 @@ function caseDraft(bodyMarkdown: string) {
 function renderInstantPreview(bodyMarkdown: string, assets: readonly Asset[]) {
  render(
    <MemoryRouter>
-      <StudioProvider createGateway={() => createMockStudioGateway()}>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => createMockStudioGateway()}>
        <InstantPreview draft={caseDraft(bodyMarkdown)} catalog={PREVIEW_CATALOG} assets={assets} />
      </StudioProvider>
    </MemoryRouter>,
@@ -1479,7 +1483,8 @@ test("an asset uploaded with alt text inserts that alt and the document validate

  render(
    <MemoryRouter initialEntries={[`/studio/documents/${created.id}/edit`]}>
-      <StudioProvider createGateway={() => gateway} createAssetGateway={() => assetGateway}>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} createAssetGateway={() => assetGateway}>
        <DocumentEditorScreen documentId={created.id} />
      </StudioProvider>
    </MemoryRouter>,
@@ -1524,7 +1529,8 @@ test("a decorative upload inserts an empty alt and the document is still publish

  render(
    <MemoryRouter initialEntries={[`/studio/documents/${created.id}/edit`]}>
-      <StudioProvider createGateway={() => gateway} createAssetGateway={() => assetGateway}>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} createAssetGateway={() => assetGateway}>
        <DocumentEditorScreen documentId={created.id} />
      </StudioProvider>
    </MemoryRouter>,
@@ -1797,7 +1803,8 @@ test("a Picker search never drops an already-inserted asset out of Instant Previ

  render(
    <MemoryRouter initialEntries={[`/studio/documents/${FIXTURE_IDS.redisAdapterCase}/edit`]}>
-      <StudioProvider createGateway={() => gateway} createAssetGateway={() => assetGateway}>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} createAssetGateway={() => assetGateway}>
        <DocumentEditorScreen documentId={FIXTURE_IDS.redisAdapterCase} />
      </StudioProvider>
    </MemoryRouter>,
@@ -16,7 +16,10 @@ type Assert<Condition extends true> = Condition;
 type TechLogFeatureInputExposesNoMissingOrAdditionalKeys = Assert<
  Equal<
    keyof ApplicationFeatureInputs["tech-log"],
-    "publicContent" | "createStudioGateway" | "createStudioAssetGateway"
+    | "publicContent"
+    | "createStudioGateway"
+    | "createStudioAssetGateway"
+    | "createManagementGateway"
  >
 >;
 type TechLogFeatureInputRegistryValueMatchesFeatureContract = Assert<
@@ -28,6 +28,7 @@ describe("TechLog navigation derivation", () => {
      ["작업본", "/studio/documents"],
      ["게시 기록", "/studio/publications"],
      ["새 문서", "/studio/documents/new"],
+      ["주제·프로젝트", "/studio/taxonomy"],
    ]);
  });

@@ -34,6 +34,7 @@ import { ApplicationProvider } from "../../../src/presentation/providers/applica
 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";
+import { renderWithQueryProviders } from "../../helpers/query-providers.tsx";

 const routeCodecs = Object.freeze({
  ...PLATFORM_ROUTE_CODECS,
@@ -54,7 +55,7 @@ type DiscoveryRenderOptions = Readonly<{
  application?: ReturnType<typeof createTestApplication>;
 }>;

-function renderDiscoveryRoute<RouteId extends DiscoveryRouteId>(
+async function renderDiscoveryRoute<RouteId extends DiscoveryRouteId>(
  routeId: RouteId,
  initialEntry: string,
  options: DiscoveryRenderOptions = {},
@@ -93,6 +94,7 @@ function renderDiscoveryRoute<RouteId extends DiscoveryRouteId>(
  );
  const techLog = createTechLogFeatureInstalledInput(MOCK_STUDIO_INSTALL_CONTEXT).input;
  const view = render(
+    renderWithQueryProviders(
    <ApplicationProvider
      application={
        options.application ??
@@ -103,6 +105,13 @@ function renderDiscoveryRoute<RouteId extends DiscoveryRouteId>(
    >
      <RouterProvider router={router} />
    </ApplicationProvider>,
+    ));
+  // 포트가 async 가 되면서 첫 페인트에는 데이터가 없다. 화면이 정착한 뒤
+  // 단언하도록 여기서 한 번 기다린다 — 각 테스트에 흩어 놓으면 빠뜨린 곳이 생긴다.
+  // `main` 을 기다리지 않는다 — 이 파일에는 의도적으로 렌더에 실패하는 라우트도 있고,
+  // 그때는 main 이 아예 없다. 로딩 표면이 사라지는 것이 두 경우 모두에 맞는 기준이다.
+  await waitFor(() =>
+    expect(document.querySelector(".state-surface--loading")).toBeNull(),
  );
  return { ...view, router } satisfies ReturnType<typeof render> & {
    router: RouterProviderProps["router"];
@@ -122,7 +131,7 @@ afterEach(() => {

 describe("TechLog home discovery", () => {
  it("renders the exact identity, focus, latest ordering, and explore choices", async () => {
-    const { router } = renderDiscoveryRoute(
+    const { router } = await renderDiscoveryRoute(
      "TECH_LOG_HOME",
      "/?focus=invalid&focus=question",
    );
@@ -174,7 +183,7 @@ describe("TechLog home discovery", () => {

  it("moves linked tabs with arrows, Home, and End while synchronizing the URL", async () => {
    const user = userEvent.setup();
-    const { router } = renderDiscoveryRoute("TECH_LOG_HOME", "/?focus=question");
+    const { router } = await renderDiscoveryRoute("TECH_LOG_HOME", "/?focus=question");
    const question = screen.getByRole("tab", { name: "열린 질문" });
    question.focus();

@@ -195,7 +204,7 @@ describe("TechLog home discovery", () => {
  });

  it("treats external focus URL changes as authoritative without stealing focus", async () => {
-    const { router } = renderDiscoveryRoute(
+    const { router } = await renderDiscoveryRoute(
      "TECH_LOG_HOME",
      "/?focus=current&state=latest-empty#latest",
    );
@@ -250,14 +259,14 @@ describe("TechLog home discovery", () => {
    expect(screen.getAllByRole("tabpanel")).toHaveLength(1);
  });

-  it("preserves the source home empty and error states", () => {
-    const emptyView = renderDiscoveryRoute("TECH_LOG_HOME", "/?state=latest-empty");
+  it("preserves the source home empty and error states", async () => {
+    const emptyView = await renderDiscoveryRoute("TECH_LOG_HOME", "/?state=latest-empty");
    expect(screen.getByText("아직 공개된 기록이 없습니다.")).toHaveClass(
      "latest-state--empty",
    );
    emptyView.unmount();

-    const latestErrorView = renderDiscoveryRoute(
+    const latestErrorView = await renderDiscoveryRoute(
      "TECH_LOG_HOME",
      "/?state=latest-error",
    );
@@ -270,14 +279,14 @@ describe("TechLog home discovery", () => {
    );
    latestErrorView.unmount();

-    const errorView = renderDiscoveryRoute("TECH_LOG_HOME", "/?state=site-error");
+    const errorView = await renderDiscoveryRoute("TECH_LOG_HOME", "/?state=site-error");
    expect(
      screen.getByRole("heading", { name: "페이지를 불러오지 못했습니다." }),
    ).toBeVisible();
    expect(screen.getByText("PREVIEW-HOME-500")).toBeVisible();
    errorView.unmount();

-    renderDiscoveryRoute("TECH_LOG_HOME", "/?state=focus-empty");
+    await renderDiscoveryRoute("TECH_LOG_HOME", "/?state=focus-empty");
    expect(screen.queryByText("지금 집중하는 것")).not.toBeInTheDocument();
  });
 });
@@ -285,7 +294,7 @@ describe("TechLog home discovery", () => {
 describe("TechLog explore discovery", () => {
  it("filters by kind, topic, and project and keeps source result structure", async () => {
    const user = userEvent.setup();
-    const { router } = renderDiscoveryRoute(
+    const { router } = await renderDiscoveryRoute(
      "TECH_LOG_EXPLORE",
      "/explore?type=CASE&topic=JPA&project=backend-skeleton",
    );
@@ -294,9 +303,12 @@ describe("TechLog explore discovery", () => {
    expect(
      screen.getByText("유형과 기술 주제, 프로젝트를 조합해 공개 기록을 찾습니다."),
    ).toBeVisible();
-    expect(screen.getByLabelText("유형")).toHaveValue("CASE");
-    expect(screen.getByLabelText("주제")).toHaveValue("JPA");
-    expect(screen.getByLabelText("프로젝트")).toHaveValue("backend-skeleton");
+    // 필터의 선택지는 카탈로그가 도착한 뒤 채워지고, select 의 값도 그때 설정된다.
+    await waitFor(() => {
+      expect(screen.getByLabelText("유형")).toHaveValue("CASE");
+      expect(screen.getByLabelText("주제")).toHaveValue("JPA");
+      expect(screen.getByLabelText("프로젝트")).toHaveValue("backend-skeleton");
+    });
    expect(screen.getByText("1개의 공개 기록")).toBeVisible();
    expect(
      screen.getByRole("link", { name: /컬렉션 Fetch Join과 페이징은 왜 충돌하는가/ }),
@@ -337,8 +349,8 @@ describe("TechLog explore discovery", () => {
    ]);
  });

-  it("renders the distinct no-result state for an unmatched query filter", () => {
-    renderDiscoveryRoute("TECH_LOG_EXPLORE", "/explore?topic=missing");
+  it("renders the distinct no-result state for an unmatched query filter", async () => {
+    await renderDiscoveryRoute("TECH_LOG_EXPLORE", "/explore?topic=missing");

    expect(screen.getByText("0개의 공개 기록")).toBeVisible();
    expect(screen.getByText("조건에 맞는 공개 기록이 없습니다.")).toHaveClass(
@@ -351,8 +363,8 @@ describe("TechLog explore discovery", () => {
    );
  });

-  it("keeps kind-specific copy, filtering, count, ordering, and back navigation", () => {
-    renderDiscoveryRoute(
+  it("keeps kind-specific copy, filtering, count, ordering, and back navigation", async () => {
+    await renderDiscoveryRoute(
      "TECH_LOG_EXPLORE_KIND",
      "/explore/questions?topic=JPA&project=backend-skeleton",
    );
@@ -374,7 +386,7 @@ describe("TechLog explore discovery", () => {
  });

  it("keeps the unreachable unknown-kind client fallback accessible", async () => {
-    const { router, container } = renderDiscoveryRoute(
+    const { router, container } = await renderDiscoveryRoute(
      "TECH_LOG_EXPLORE_KIND",
      "/explore/unknown",
    );
@@ -425,7 +437,7 @@ describe("TechLog explore discovery", () => {
      },
      featureInputs: { "tech-log": techLog },
    });
-    const { router, container } = renderDiscoveryRoute(
+    const { router, container } = await renderDiscoveryRoute(
      "TECH_LOG_EXPLORE_KIND",
      "/explore/unknown",
      { NotFoundComponent: LazyNotFound, application },
@@ -473,7 +485,7 @@ describe("TechLog explore discovery", () => {
 describe("TechLog search discovery", () => {
  it("normalizes repeated queries, preserves result ordering, and navigates canonically", async () => {
    const user = userEvent.setup();
-    const { router } = renderDiscoveryRoute(
+    const { router } = await renderDiscoveryRoute(
      "TECH_LOG_SEARCH",
      "/search?q=%20JPA%20&q=Redis&unknown=drop",
    );
@@ -503,8 +515,8 @@ describe("TechLog search discovery", () => {

  it("submits from the keyboard and synchronizes the searchbox with URL changes", async () => {
    const user = userEvent.setup();
-    const { router } = renderDiscoveryRoute("TECH_LOG_SEARCH", "/search");
-    const input = screen.getByRole("searchbox", { name: "검색어" });
+    const { router } = await renderDiscoveryRoute("TECH_LOG_SEARCH", "/search");
+    const input = await screen.findByRole("searchbox", { name: "검색어" });

    await user.type(input, "Redis{Enter}");
    await waitFor(() => {
@@ -523,7 +535,7 @@ describe("TechLog search discovery", () => {
  });

  it("normalizes an explicitly empty first query and renders all canonical results", async () => {
-    const { router } = renderDiscoveryRoute(
+    const { router } = await renderDiscoveryRoute(
      "TECH_LOG_SEARCH",
      "/search?q=%20%20&q=JPA",
    );
@@ -531,13 +543,13 @@ describe("TechLog search discovery", () => {
    await waitFor(() => {
      expect(router.state.location.search).toBe("");
    });
-    expect(screen.getByRole("heading", { name: "전체 검색 결과" })).toBeVisible();
+    expect(await screen.findByRole("heading", { name: "전체 검색 결과" })).toBeVisible();
    expect(screen.getByText("9개의 검색 결과")).toBeVisible();
    expect(screen.getByRole("searchbox", { name: "검색어" })).toHaveValue("");
  });

-  it("renders the exact zero-result state without a result list", () => {
-    renderDiscoveryRoute("TECH_LOG_SEARCH", "/search?q=존재하지않음");
+  it("renders the exact zero-result state without a result list", async () => {
+    await renderDiscoveryRoute("TECH_LOG_SEARCH", "/search?q=존재하지않음");

    expect(screen.getByText("0개의 검색 결과")).toBeVisible();
    expect(screen.getByText("일치하는 공개 기록이 없습니다.")).toHaveClass(
@@ -548,7 +560,7 @@ describe("TechLog search discovery", () => {
 });

 describe("home focus domain", () => {
-  it("normalizes selection and wraps all supported keyboard movements", () => {
+  it("normalizes selection and wraps all supported keyboard movements", async () => {
    const keys = ["current", "question", "decision"] as const;

    expect(normalizeFocus(undefined, keys)).toBe("current");
@@ -26,6 +26,7 @@ import { ApplicationProvider } from "../../../src/presentation/providers/applica
 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";
+import { renderWithQueryProviders } from "../../helpers/query-providers.tsx";

 const routeCodecs = Object.freeze({
  ...PLATFORM_ROUTE_CODECS,
@@ -63,7 +64,7 @@ afterEach(() => {
  vi.unstubAllGlobals();
 });

-function renderDocumentRoute(routeId: DocumentRouteId, initialEntry: string) {
+async function renderDocumentRoute(routeId: DocumentRouteId, initialEntry: string) {
  const definition = TECH_LOG_ROUTE_REGISTRY[routeId];
  const runtime = TECH_LOG_ROUTE_RUNTIME_CONTRACT[routeId];
  const Component = routeComponents[routeId];
@@ -95,6 +96,7 @@ function renderDocumentRoute(routeId: DocumentRouteId, initialEntry: string) {
  );
  const techLog = createTechLogFeatureInstalledInput(MOCK_STUDIO_INSTALL_CONTEXT).input;
  const view = render(
+    renderWithQueryProviders(
    <ApplicationProvider
      application={createTestApplication({
        featureInputs: { "tech-log": techLog },
@@ -102,7 +104,10 @@ function renderDocumentRoute(routeId: DocumentRouteId, initialEntry: string) {
    >
      <RouterProvider router={router} />
    </ApplicationProvider>,
-  );
+    ));
+  // 포트가 async 가 되면서 첫 페인트에는 데이터가 없다. 화면이 정착한 뒤
+  // 단언하도록 여기서 한 번 기다린다 — 각 테스트에 흩어 놓으면 빠뜨린 곳이 생긴다.
+  await screen.findByRole("main");
  return { ...view, router };
 }

@@ -195,8 +200,8 @@ describe("TechLog canonical Public documents", () => {
    },
  ])(
    "renders $path with exact metadata, evidence, and ordered relations",
-    ({ routeId, path, title, kind, topic, project, published, evidence, relations }) => {
-      const { container } = renderDocumentRoute(routeId, path);
+    async ({ routeId, path, title, kind, topic, project, published, evidence, relations }) => {
+      const { container } = await renderDocumentRoute(routeId, path);
      const main = screen.getByRole("main");

      expect(within(main).getByRole("heading", { level: 1, name: title })).toBeVisible();
@@ -222,8 +227,8 @@ describe("TechLog canonical Public documents", () => {
    },
  );

-  it("preserves the specialized Fetch Join layout, TOC, rendered blocks, anchors, and evidence media", () => {
-    const { container } = renderDocumentRoute(
+  it("preserves the specialized Fetch Join layout, TOC, rendered blocks, anchors, and evidence media", async () => {
+    const { container } = await renderDocumentRoute(
      "TECH_LOG_CASE",
      "/cases/collection-fetch-join-pagination",
    );
@@ -253,8 +258,8 @@ describe("TechLog canonical Public documents", () => {
    expect(image).toHaveAttribute("loading", "lazy");
  });

-  it("uses the generic Case markup and omits source relations for the canonical empty state", () => {
-    const generic = renderDocumentRoute(
+  it("uses the generic Case markup and omits source relations for the canonical empty state", async () => {
+    const generic = await renderDocumentRoute(
      "TECH_LOG_CASE",
      "/cases/redis-adapter-ttl-boundary",
    );
@@ -264,7 +269,7 @@ describe("TechLog canonical Public documents", () => {
    );
    generic.unmount();

-    const empty = renderDocumentRoute(
+    const empty = await renderDocumentRoute(
      "TECH_LOG_CASE",
      "/cases/collection-fetch-join-pagination?state=relations-empty",
    );
@@ -273,8 +278,8 @@ describe("TechLog canonical Public documents", () => {
    expect(screen.queryByRole("heading", { name: "이 기록의 연결" })).not.toBeInTheDocument();
  });

-  it("preserves Reference rule order and resolved Question evidence and empty copy", () => {
-    const reference = renderDocumentRoute(
+  it("preserves Reference rule order and resolved Question evidence and empty copy", async () => {
+    const reference = await renderDocumentRoute(
      "TECH_LOG_REFERENCE",
      "/references/state-and-nonce-boundary",
    );
@@ -290,7 +295,7 @@ describe("TechLog canonical Public documents", () => {
    expect(screen.getByText("마지막 검증 2026.08.09")).toBeVisible();
    reference.unmount();

-    renderDocumentRoute(
+    await renderDocumentRoute(
      "TECH_LOG_QUESTION",
      "/questions/collection-fetch-join-with-pagination",
    );
@@ -311,16 +316,16 @@ describe("TechLog topics and Public not-found routing", () => {
    ["jpa", "JPA", "목록 조회, 연관 로딩과 페이지 경계를 함께 검증한 기록입니다.", "3개의 관련 기록"],
    ["authentication", "Authentication", "브라우저와 Edge, Resource Server 사이의 인증 책임과 신뢰 경계를 검증한 기록입니다.", "2개의 관련 기록"],
    ["redis", "Redis", "애플리케이션 정책과 Redis 저장 명령의 책임 경계를 검증한 기록입니다.", "1개의 관련 기록"],
-  ])("aggregates /topics/%s with exact copy and count", (slug, title, description, count) => {
-    renderDocumentRoute("TECH_LOG_TOPIC", `/topics/${slug}`);
+  ])("aggregates /topics/%s with exact copy and count", async (slug, title, description, count) => {
+    await renderDocumentRoute("TECH_LOG_TOPIC", `/topics/${slug}`);

    expect(screen.getByRole("heading", { level: 1, name: title })).toBeVisible();
    expect(screen.getByText(description)).toBeVisible();
    expect(screen.getByText(count)).toBeVisible();
  });

-  it("keeps JPA topic records in canonical published order", () => {
-    const { container } = renderDocumentRoute("TECH_LOG_TOPIC", "/topics/jpa");
+  it("keeps JPA topic records in canonical published order", async () => {
+    const { container } = await renderDocumentRoute("TECH_LOG_TOPIC", "/topics/jpa");

    expect(
      Array.from(container.querySelectorAll(".public-record-list > li > a"), (link) =>
@@ -339,7 +344,7 @@ describe("TechLog topics and Public not-found routing", () => {
    ["TECH_LOG_QUESTION" as const, "/questions/not-registered"],
    ["TECH_LOG_TOPIC" as const, "/topics/not-registered"],
  ])("keeps the unreachable client fallback accessible for %s", async (routeId, path) => {
-    const { container, router } = renderDocumentRoute(routeId, path);
+    const { container, router } = await renderDocumentRoute(routeId, path);

    expect(router.state.location.pathname).toBe(path);
    expect(
@@ -31,6 +31,7 @@ import { ApplicationProvider } from "../../../src/presentation/providers/applica
 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";
+import { renderWithQueryProviders } from "../../helpers/query-providers.tsx";

 const routeCodecs = Object.freeze({
  ...PLATFORM_ROUTE_CODECS,
@@ -52,7 +53,7 @@ const routeComponents = {

 type PublicIndexRouteId = keyof typeof routeComponents;

-function renderPublicRoute(routeId: PublicIndexRouteId, initialEntry: string) {
+async function renderPublicRoute(routeId: PublicIndexRouteId, initialEntry: string) {
  const routeIds = routeId === "NOT_FOUND" ? [routeId] : [routeId, "NOT_FOUND" as const];
  const registry = Object.fromEntries(
    routeIds.map((id) => [id, TECH_LOG_ROUTE_REGISTRY[id]]),
@@ -85,6 +86,7 @@ function renderPublicRoute(routeId: PublicIndexRouteId, initialEntry: string) {
  );
  const techLog = createTechLogFeatureInstalledInput(MOCK_STUDIO_INSTALL_CONTEXT).input;
  const view = render(
+    renderWithQueryProviders(
    <ApplicationProvider
      application={createTestApplication({
        featureInputs: { "tech-log": techLog },
@@ -92,7 +94,10 @@ function renderPublicRoute(routeId: PublicIndexRouteId, initialEntry: string) {
    >
      <RouterProvider router={router} />
    </ApplicationProvider>,
-  );
+    ));
+  // 포트가 async 가 되면서 첫 페인트에는 데이터가 없다. 화면이 정착한 뒤
+  // 단언하도록 여기서 한 번 기다린다 — 각 테스트에 흩어 놓으면 빠뜨린 곳이 생긴다.
+  await screen.findByRole("main");
  return { ...view, router };
 }

@@ -101,8 +106,8 @@ function projectNavigation() {
 }

 describe("TechLog project screens", () => {
-  it("renders the exact ordered project index and project links", () => {
-    const { container } = renderPublicRoute("TECH_LOG_PROJECTS", "/projects");
+  it("renders the exact ordered project index and project links", async () => {
+    const { container } = await renderPublicRoute("TECH_LOG_PROJECTS", "/projects");
    const main = screen.getByRole("main");

    expect(within(main).getByRole("heading", { level: 1, name: "프로젝트" })).toBeVisible();
@@ -145,8 +150,8 @@ describe("TechLog project screens", () => {
      stats: ["2공개 기록", "1설계 결정", "2활동 기록"],
      topics: ["Authentication", "OAuth 2.0", "OIDC", "Keycloak"],
    },
-  ])("renders $path overview with source counts and topics", ({ path, title, current, thesis, stats, topics }) => {
-    const { container } = renderPublicRoute("TECH_LOG_PROJECT", path);
+  ])("renders $path overview with source counts and topics", async ({ path, title, current, thesis, stats, topics }) => {
+    const { container } = await renderPublicRoute("TECH_LOG_PROJECT", path);
    const main = screen.getByRole("main");

    expect(within(main).getByRole("heading", { level: 1, name: title })).toBeVisible();
@@ -167,8 +172,8 @@ describe("TechLog project screens", () => {
    ["TECH_LOG_PROJECT_RECORDS" as const, "/projects/backend-skeleton/records", "기록"],
    ["TECH_LOG_PROJECT_DECISIONS" as const, "/projects/backend-skeleton/decisions", "결정"],
    ["TECH_LOG_PROJECT_ACTIVITY" as const, "/projects/backend-skeleton/activity", "활동"],
-  ])("derives the active project tab from %s location", (routeId, path, activeLabel) => {
-    renderPublicRoute(routeId, path);
+  ])("derives the active project tab from %s location", async (routeId, path, activeLabel) => {
+    await renderPublicRoute(routeId, path);

    expect(
      within(projectNavigation())
@@ -199,8 +204,8 @@ describe("TechLog project screens", () => {
        "/questions/validate-edge-token-again",
      ],
    },
-  ])("keeps $slug records filtered and published in source order", ({ slug, expected }) => {
-    const { container } = renderPublicRoute(
+  ])("keeps $slug records filtered and published in source order", async ({ slug, expected }) => {
+    const { container } = await renderPublicRoute(
      "TECH_LOG_PROJECT_RECORDS",
      `/projects/${slug}/records`,
    );
@@ -213,8 +218,8 @@ describe("TechLog project screens", () => {
    expect(screen.getByText(`${expected.length}개의 공개 기록`)).toBeVisible();
  });

-  it("keeps project decisions ordered with stable IDs and evidence links", () => {
-    const { container } = renderPublicRoute(
+  it("keeps project decisions ordered with stable IDs and evidence links", async () => {
+    const { container } = await renderPublicRoute(
      "TECH_LOG_PROJECT_DECISIONS",
      "/projects/backend-skeleton/decisions",
    );
@@ -240,8 +245,8 @@ describe("TechLog project screens", () => {
    ]);
  });

-  it("keeps project activity ordered and preserves self-fragment and record links", () => {
-    const { container } = renderPublicRoute(
+  it("keeps project activity ordered and preserves self-fragment and record links", async () => {
+    const { container } = await renderPublicRoute(
      "TECH_LOG_PROJECT_ACTIVITY",
      "/projects/backend-skeleton/activity",
    );
@@ -273,8 +278,8 @@ describe("TechLog project screens", () => {
 });

 describe("TechLog release and profile screens", () => {
-  it("renders the ordered release index and complete version link", () => {
-    const { container } = renderPublicRoute("TECH_LOG_RELEASES", "/releases");
+  it("renders the ordered release index and complete version link", async () => {
+    const { container } = await renderPublicRoute("TECH_LOG_RELEASES", "/releases");

    expect(screen.getByRole("heading", { level: 1, name: "변경 기록" })).toBeVisible();
    expect(
@@ -297,8 +302,8 @@ describe("TechLog release and profile screens", () => {
    ]);
  });

-  it("renders exact release sections and ordered cross-links", () => {
-    const { container } = renderPublicRoute("TECH_LOG_RELEASE", "/releases/0.1.0");
+  it("renders exact release sections and ordered cross-links", async () => {
+    const { container } = await renderPublicRoute("TECH_LOG_RELEASE", "/releases/0.1.0");
    const main = screen.getByRole("main");

    expect(
@@ -325,8 +330,8 @@ describe("TechLog release and profile screens", () => {
    ).toEqual(["/", "/explore", "/cases/collection-fetch-join-pagination"]);
  });

-  it("renders the grounded profile, principles, project links, and topics", () => {
-    const { container } = renderPublicRoute("TECH_LOG_PROFILE", "/profile");
+  it("renders the grounded profile, principles, project links, and topics", async () => {
+    const { container } = await renderPublicRoute("TECH_LOG_PROFILE", "/profile");
    const main = screen.getByRole("main");

    expect(within(main).getByRole("heading", { level: 1, name: "동현" })).toBeVisible();
@@ -362,7 +367,7 @@ describe("TechLog Public not-found runtime", () => {
    ["TECH_LOG_RELEASE" as const, "/releases/9.9.9"],
    ["TECH_LOG_CASE" as const, "/cases/not-registered"],
  ])("keeps the client-only fallback accessible for %s", async (routeId, path) => {
-    const { container, router } = renderPublicRoute(routeId, path);
+    const { container, router } = await renderPublicRoute(routeId, path);

    expect(router.state.location.pathname).toBe(path);
    expect(
@@ -374,8 +379,8 @@ describe("TechLog Public not-found runtime", () => {
    expect(container.querySelector(".site-frame")).not.toBeNull();
  });

-  it("keeps the client-only Public catch-all accessible", () => {
-    const { container, router } = renderPublicRoute(
+  it("keeps the client-only Public catch-all accessible", async () => {
+    const { container, router } = await renderPublicRoute(
      "NOT_FOUND",
      "/definitely-not-a-product-route",
    );
@@ -11,6 +11,7 @@ import { FatalErrorState } from "../../../src/features/tech-log/presentation/pub
 import { PublicShell } from "../../../src/features/tech-log/presentation/public/public-shell.tsx";
 import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
 import { createTestApplication } from "../../helpers/create-test-application.ts";
+import { renderWithQueryProviders } from "../../helpers/query-providers.tsx";

 const originalShowModal = HTMLDialogElement.prototype.showModal;
 const originalClose = HTMLDialogElement.prototype.close;
@@ -47,7 +48,7 @@ afterEach(() => {
  });
 });

-function renderShell(initialEntry = "/projects") {
+async function renderShell(initialEntry = "/projects") {
  const techLog = createTechLogFeatureInstalledInput(MOCK_STUDIO_INSTALL_CONTEXT).input;
  const router = createMemoryRouter(
    [
@@ -65,6 +66,7 @@ function renderShell(initialEntry = "/projects") {
    { initialEntries: [initialEntry] },
  );
  const view = render(
+    renderWithQueryProviders(
    <ApplicationProvider
      application={createTestApplication({
        featureInputs: { "tech-log": techLog },
@@ -72,13 +74,16 @@ function renderShell(initialEntry = "/projects") {
    >
      <RouterProvider router={router} />
    </ApplicationProvider>,
-  );
+    ));
+  // 포트가 async 가 되면서 첫 페인트에는 데이터가 없다. 화면이 정착한 뒤
+  // 단언하도록 여기서 한 번 기다린다 — 각 테스트에 흩어 놓으면 빠뜨린 곳이 생긴다.
+  await screen.findByRole("main");
  return { ...view, router };
 }

 describe("TechLog Public shell", () => {
-  it("preserves source landmark order, navigation copy, current state, and footer", () => {
-    const view = renderShell();
+  it("preserves source landmark order, navigation copy, current state, and footer", async () => {
+    const view = await renderShell();
    const frame = view.container.querySelector(".site-frame");

    expect(
@@ -127,7 +132,7 @@ describe("TechLog Public shell", () => {

  it("uses the canonical root route for brand navigation", async () => {
    const user = userEvent.setup();
-    const { router } = renderShell("/projects/backend-skeleton");
+    const { router } = await renderShell("/projects/backend-skeleton");

    await user.click(screen.getByRole("link", { name: "TechLog 홈" }));

@@ -136,7 +141,7 @@ describe("TechLog Public shell", () => {

  it("opens search by click, closes on Escape, and restores trigger focus", async () => {
    const user = userEvent.setup();
-    renderShell();
+    await renderShell();
    const trigger = screen.getByRole("button", { name: "TechLog 검색 열기" });

    await user.click(trigger);
@@ -155,7 +160,7 @@ describe("TechLog Public shell", () => {

  it("opens the native search trigger from the keyboard", async () => {
    const user = userEvent.setup();
-    renderShell();
+    await renderShell();
    const trigger = screen.getByRole("button", { name: "TechLog 검색 열기" });
    trigger.focus();

@@ -169,7 +174,7 @@ describe("TechLog Public shell", () => {

  it("returns source-equivalent results and navigates to their canonical route", async () => {
    const user = userEvent.setup();
-    const { router } = renderShell();
+    const { router } = await renderShell();
    await user.click(
      screen.getByRole("button", { name: "TechLog 검색 열기" }),
    );
@@ -191,7 +196,7 @@ describe("TechLog Public shell", () => {

  it("navigates the full-search action with its canonical query intact", async () => {
    const user = userEvent.setup();
-    const { router } = renderShell();
+    const { router } = await renderShell();
    await user.click(
      screen.getByRole("button", { name: "TechLog 검색 열기" }),
    );
@@ -210,7 +215,7 @@ describe("TechLog Public shell", () => {

  it("uses native mobile disclosure activation and closes it after selection", async () => {
    const user = userEvent.setup();
-    const view = renderShell();
+    const view = await renderShell();
    const details = view.container.querySelector<HTMLDetailsElement>(
      "details.mobile-nav",
    );
@@ -236,7 +241,7 @@ describe("TechLog Public shell", () => {

  it("closes a natively opened mobile disclosure before opening one search dialog", async () => {
    const user = userEvent.setup();
-    const view = renderShell();
+    const view = await renderShell();
    const details = view.container.querySelector<HTMLDetailsElement>(
      "details.mobile-nav",
    );
@@ -38,6 +38,7 @@ const expectedRoutes = [
  ["TECH_LOG_STUDIO_PUBLICATIONS", "/studio/publications", "STUDIO", null, null],
  ["TECH_LOG_STUDIO_PUBLICATION_PREVIEW", "/studio/publications/:publicationEventId/preview", "STUDIO", "TechLogPublicationEventIdParams", null],
  ["TECH_LOG_STUDIO_ASSETS", "/studio/assets", "STUDIO", null, null],
+  ["TECH_LOG_STUDIO_TAXONOMY", "/studio/taxonomy", "STUDIO", null, null],
  ["TECH_LOG_STUDIO_NOT_FOUND", "/studio/*", "STUDIO", "TechLogStudioSplat", null],
  ["NOT_FOUND", "*", "PUBLIC", "NotFoundSplat", null],
 ] as const;
@@ -69,6 +70,7 @@ const expectedTitles = {
  TECH_LOG_STUDIO_PUBLICATIONS: "게시 기록",
  TECH_LOG_STUDIO_PUBLICATION_PREVIEW: "게시 Snapshot",
  TECH_LOG_STUDIO_ASSETS: "Asset",
+  TECH_LOG_STUDIO_TAXONOMY: "주제와 프로젝트",
  TECH_LOG_STUDIO_NOT_FOUND: "Studio 화면을 찾을 수 없습니다",
  NOT_FOUND: "페이지를 찾을 수 없습니다.",
 } as const;
@@ -142,12 +144,13 @@ describe("TechLog route boundary contract", () => {
      ["TECH_LOG_STUDIO_DOCUMENTS", "STUDIO", "작업본", 10],
      ["TECH_LOG_STUDIO_DOCUMENT_NEW", "STUDIO", "새 문서", 30],
      ["TECH_LOG_STUDIO_PUBLICATIONS", "STUDIO", "게시 기록", 20],
+      ["TECH_LOG_STUDIO_TAXONOMY", "STUDIO", "주제·프로젝트", 40],
    ]);

    for (const locale of ["ko-KR", "en-US"] as const) {
      const catalog: Readonly<Record<string, string>> =
        TECH_LOG_MESSAGE_CATALOGS[locale];
-      expect(Object.keys(catalog)).toHaveLength(56);
+      expect(Object.keys(catalog)).toHaveLength(58);
      for (const [routeId, title] of Object.entries(expectedTitles)) {
        expect(catalog[`route.${routeId}.title`]).toBe(title);
        expect(catalog[`route.${routeId}.navigation`]).toBe(title);
@@ -60,6 +60,7 @@ test("installs TechLog beside the retained reference feature through application

  assert.deepEqual(Object.keys(installed), ["reference-feature", "tech-log"]);
  assert.deepEqual(Object.keys(installed["tech-log"]).sort(), [
+    "createManagementGateway",
    "createStudioAssetGateway",
    "createStudioGateway",
    "publicContent",
@@ -14,6 +14,7 @@ import type { WorkingCopyInput } from "../../../src/features/tech-log/contracts/
 import { DocumentEditorScreen } from "../../../src/features/tech-log/presentation/studio/components/document-editor-screen.tsx";
 import { NewDocumentForm } from "../../../src/features/tech-log/presentation/studio/components/new-document-form.tsx";
 import { StudioProvider } from "../../../src/features/tech-log/presentation/studio/studio-provider.tsx";
+import { createManagementGatewayStub } from "../../helpers/management-gateway-stub.ts";

 type DecisionInput = Extract<WorkingCopyInput, { kind: "PROJECT_DECISION" }>;

@@ -54,6 +55,7 @@ function RouterStudioProvider({
  const navigate = useNavigate();
  return (
    <StudioProvider
+      createManagementGateway={createManagementGatewayStub}
      createGateway={() => gateway}
      navigate={(href) => { void navigate(href); }}
    >
@@ -140,7 +142,8 @@ describe("TechLog Studio project decision authoring", () => {
    });
    render(
      <MemoryRouter initialEntries={[`/studio/documents/${document.id}/edit`]}>
-        <StudioProvider createGateway={() => gateway}>
+        <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway}>
          <DocumentEditorScreen documentId={document.id} />
        </StudioProvider>
      </MemoryRouter>,
@@ -12,6 +12,7 @@ import { FIXTURE_IDS } from "../../../src/features/tech-log/adapters/mock/fixtur
 import type { StudioGateway } from "../../../src/features/tech-log/application/ports/studio-gateway.ts";
 import { DocumentEditorScreen } from "../../../src/features/tech-log/presentation/studio/components/document-editor-screen.tsx";
 import { StudioProvider } from "../../../src/features/tech-log/presentation/studio/studio-provider.tsx";
+import { createManagementGatewayStub } from "../../helpers/management-gateway-stub.ts";

 afterEach(() => vi.restoreAllMocks());

@@ -26,7 +27,8 @@ function renderEditor(
    .input.createStudioAssetGateway();
  return render(
    <MemoryRouter initialEntries={[`/studio/documents/${documentId}/edit`]}>
-      <StudioProvider createGateway={() => gateway} createAssetGateway={() => assetGateway}>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} createAssetGateway={() => assetGateway}>
        <DocumentEditorScreen documentId={documentId} />
      </StudioProvider>
    </MemoryRouter>,
@@ -24,6 +24,7 @@ import { PublicationEventPreviewScreen } from "../../../src/features/tech-log/pr
 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";
+import { createManagementGatewayStub } from "../../helpers/management-gateway-stub.ts";

 const originalShowModal = HTMLDialogElement.prototype.showModal;
 const originalClose = HTMLDialogElement.prototype.close;
@@ -85,7 +86,8 @@ function renderInStudio(
 ) {
  return render(
    <MemoryRouter initialEntries={["/studio"]}>
-      <StudioProvider createGateway={() => gateway} navigate={navigate}>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} navigate={navigate}>
        {node}
      </StudioProvider>
    </MemoryRouter>,
@@ -23,6 +23,7 @@ import {
  useStudio,
  useStudioEditorSession,
 } from "../../../src/features/tech-log/presentation/studio/use-studio.ts";
+import { createManagementGatewayStub } from "../../helpers/management-gateway-stub.ts";

 const originalShowModal = HTMLDialogElement.prototype.showModal;
 const originalClose = HTMLDialogElement.prototype.close;
@@ -86,7 +87,8 @@ function renderEditor(documentId: string, gateway: StudioGateway) {
    .input.createStudioAssetGateway();
  return render(
    <MemoryRouter initialEntries={[`/studio/documents/${documentId}/edit`]}>
-      <StudioProvider createGateway={() => gateway} createAssetGateway={() => assetGateway}>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} createAssetGateway={() => assetGateway}>
        <DocumentEditorScreen documentId={documentId} />
        <Announcement />
      </StudioProvider>
@@ -214,7 +216,8 @@ describe("TechLog Studio dirty navigation", () => {
    const saved = await getSavedDocument(gateway);
    render(
      <MemoryRouter initialEntries={[`/studio/documents/${saved.id}/edit`]}>
-        <StudioProvider createGateway={() => gateway} navigate={(href) => destinations.push(href)}>
+        <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} navigate={(href) => destinations.push(href)}>
          <DirtyNavigationProbe saved={saved} />
        </StudioProvider>
      </MemoryRouter>,
@@ -251,7 +254,8 @@ describe("TechLog Studio dirty navigation", () => {
    const saved = await getSavedDocument(gateway);
    render(
      <MemoryRouter initialEntries={[`/studio/documents/${saved.id}/edit`]}>
-        <StudioProvider createGateway={() => gateway} navigate={(href) => destinations.push(href)}>
+        <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} navigate={(href) => destinations.push(href)}>
          <DirtyNavigationProbe saved={saved} />
        </StudioProvider>
      </MemoryRouter>,
@@ -283,7 +287,8 @@ describe("TechLog Studio dirty navigation", () => {
    const saved = await getSavedDocument(base);
    render(
      <MemoryRouter initialEntries={[`/studio/documents/${saved.id}/edit`]}>
-        <StudioProvider createGateway={() => gateway} navigate={(href) => destinations.push(href)}>
+        <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway} navigate={(href) => destinations.push(href)}>
          <DirtyNavigationProbe saved={saved} />
        </StudioProvider>
      </MemoryRouter>,
@@ -16,6 +16,7 @@ import { StudioDashboard } from "../../../src/features/tech-log/presentation/stu
 import { StudioProvider } from "../../../src/features/tech-log/presentation/studio/studio-provider.tsx";
 import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
 import { createTestApplication } from "../../helpers/create-test-application.ts";
+import { createManagementGatewayStub } from "../../helpers/management-gateway-stub.ts";

 afterEach(() => vi.restoreAllMocks());

@@ -30,6 +31,7 @@ function RouterStudioProvider({
  const navigate = useNavigate();
  return (
    <StudioProvider
+      createManagementGateway={createManagementGatewayStub}
      createGateway={() => gateway}
      navigate={(href) => {
        void navigate(href);
@@ -15,10 +15,11 @@ import { createExternalAuthSessionAdapter } from "../../../src/adapters/auth/ext
 import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
 import { SessionProvider } from "../../../src/presentation/providers/session-provider.tsx";
 import { createTestApplication } from "../../helpers/create-test-application.ts";
+import { renderWithQueryProviders } from "../../helpers/query-providers.tsx";

 afterEach(() => vi.restoreAllMocks());

-function renderStudio(
+async function renderStudio(
  initialEntry: string,
  createStudioGateway: () => StudioGateway,
 ) {
@@ -62,12 +63,16 @@ function renderStudio(
    },
  });
  const view = render(
+    renderWithQueryProviders(
    <ApplicationProvider application={application}>
      <SessionProvider>
      <RouterProvider router={router} />
      </SessionProvider>
    </ApplicationProvider>,
-  );
+    ));
+  // 포트가 async 가 되면서 첫 페인트에는 데이터가 없다. 화면이 정착한 뒤
+  // 단언하도록 여기서 한 번 기다린다 — 각 테스트에 흩어 놓으면 빠뜨린 곳이 생긴다.
+  await screen.findByRole("main");
  return { ...view, router };
 }

@@ -77,7 +82,7 @@ describe("TechLog Studio shell", () => {
    const gateway = createTechLogFeatureInstalledInput(MOCK_STUDIO_INSTALL_CONTEXT).input.createStudioGateway();
    const createGateway = vi.fn(() => gateway);

-    const { container, router } = renderStudio("/studio", createGateway);
+    const { container, router } = await renderStudio("/studio", createGateway);

    expect(await screen.findByRole("heading", { level: 1, name: "작업 흐름" })).toBeVisible();
    expect(createGateway).toHaveBeenCalledTimes(1);
@@ -90,6 +95,7 @@ describe("TechLog Studio shell", () => {
      ["작업본", "/studio/documents"],
      ["게시 기록", "/studio/publications"],
      ["새 문서", "/studio/documents/new"],
+      ["주제·프로젝트", "/studio/taxonomy"],
      ["공개 사이트 보기", "/"],
    ]);
    expect(screen.getByRole("link", { name: "공개 사이트 보기" })).toHaveAttribute("href", "/");
@@ -117,7 +123,7 @@ describe("TechLog Studio shell", () => {
      .mockReturnValueOnce(first)
      .mockReturnValueOnce(second);

-    renderStudio("/studio", createGateway);
+    await renderStudio("/studio", createGateway);
    await waitFor(() => expect(firstSignal).toBeDefined());
    await user.click(screen.getByRole("button", { name: "Studio 메뉴 열기" }));
    expect(screen.getByRole("button", { name: "Studio 메뉴 닫기" })).toBeVisible();
@@ -131,12 +137,12 @@ describe("TechLog Studio shell", () => {
    expect(secondDashboard).toHaveBeenCalledTimes(1);
  });

-  it("keeps unknown Studio routes inside the Studio shell without authentication UI", () => {
+  it("keeps unknown Studio routes inside the Studio shell without authentication UI", async () => {
    const createGateway = vi.fn(
      () => createTechLogFeatureInstalledInput(MOCK_STUDIO_INSTALL_CONTEXT).input.createStudioGateway(),
    );

-    renderStudio("/studio/does-not-exist", createGateway);
+    await renderStudio("/studio/does-not-exist", createGateway);

    expect(screen.getByRole("banner")).toHaveClass("studio-header");
    expect(screen.getByRole("heading", { level: 1, name: "Studio 화면을 찾을 수 없습니다" })).toBeVisible();
@@ -13,6 +13,7 @@ import { DocumentEditorScreen } from "../../../src/features/tech-log/presentatio
 import { PublicPreviewScreen } from "../../../src/features/tech-log/presentation/studio/components/public-preview-screen.tsx";
 import { ValidationScreen } from "../../../src/features/tech-log/presentation/studio/components/validation-screen.tsx";
 import { StudioProvider } from "../../../src/features/tech-log/presentation/studio/studio-provider.tsx";
+import { createManagementGatewayStub } from "../../helpers/management-gateway-stub.ts";

 class NoopIntersectionObserver implements IntersectionObserver {
  readonly root = null;
@@ -44,7 +45,8 @@ function renderStudio(
 ) {
  return render(
    <MemoryRouter initialEntries={["/studio"]}>
-      <StudioProvider createGateway={() => gateway}>{child}</StudioProvider>
+      <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway}>{child}</StudioProvider>
    </MemoryRouter>,
  );
 }
@@ -130,7 +132,8 @@ describe("TechLog Studio validation workflow", () => {

    view.rerender(
      <MemoryRouter initialEntries={["/studio"]}>
-        <StudioProvider createGateway={() => gateway}>
+        <StudioProvider
+      createManagementGateway={createManagementGatewayStub} createGateway={() => gateway}>
          <ValidationScreen documentId={FIXTURE_IDS.stateNonceReference} />
        </StudioProvider>
      </MemoryRouter>,
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom

-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
@@ -14,6 +14,7 @@ import { FatalErrorState } from "../../../src/features/tech-log/presentation/pub
 import { PublicShell } from "../../../src/features/tech-log/presentation/public/public-shell.tsx";
 import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
 import { createTestApplication } from "../../helpers/create-test-application.ts";
+import { renderWithQueryProviders } from "../../helpers/query-providers.tsx";

 let styleElement: HTMLStyleElement;

@@ -33,7 +34,7 @@ afterAll(() => {
  styleElement.remove();
 });

-function renderPublicSurface(node: React.ReactNode) {
+async function renderPublicSurface(node: React.ReactNode) {
  const techLog = createTechLogFeatureInstalledInput(MOCK_STUDIO_INSTALL_CONTEXT).input;
  const shell = createElement(PublicShell, { children: node });
  const router = createElement(
@@ -41,19 +42,24 @@ function renderPublicSurface(node: React.ReactNode) {
    { initialEntries: ["/projects"] },
    shell,
  );
-  return render(
-    createElement(ApplicationProvider, {
-      application: createTestApplication({
-        featureInputs: { "tech-log": techLog },
+  const view = render(
+    renderWithQueryProviders(
+      createElement(ApplicationProvider, {
+        application: createTestApplication({
+          featureInputs: { "tech-log": techLog },
+        }),
+        children: router,
      }),
-      children: router,
-    }),
+    ),
  );
+  // 포트가 async 가 되면서 첫 페인트에는 데이터가 없다. 화면이 정착한 뒤 단언한다.
+  await screen.findByRole("main");
+  return view;
 }

 describe("TechLog consumer-visible style contract", () => {
-  it("applies the source typography, palette, shell width, and header spacing", () => {
-    const view = renderPublicSurface(
+  it("applies the source typography, palette, shell width, and header spacing", async () => {
+    const view = await renderPublicSurface(
      createElement(
        "main",
        { id: "main-content", className: "shell" },
@@ -97,8 +103,8 @@ describe("TechLog consumer-visible style contract", () => {
    expect(getComputedStyle(wordmark).fontWeight).toBe("680");
  });

-  it("aligns code, table, and evidence widths with the article body", () => {
-    const view = renderPublicSurface(
+  it("aligns code, table, and evidence widths with the article body", async () => {
+    const view = await renderPublicSurface(
      createElement(
        "main",
        { id: "main-content", className: "shell" },
@@ -152,7 +158,7 @@ describe("TechLog consumer-visible style contract", () => {

  it("preserves keyboard focus and the real search-field focus style", async () => {
    const user = userEvent.setup();
-    const view = renderPublicSurface(
+    const view = await renderPublicSurface(
      createElement(
        "main",
        { id: "main-content", className: "shell" },
@@ -181,8 +187,8 @@ describe("TechLog consumer-visible style contract", () => {
    );
  });

-  it("keeps every header and dialog control at the source minimum target size", () => {
-    const view = renderPublicSurface(
+  it("keeps every header and dialog control at the source minimum target size", async () => {
+    const view = await renderPublicSurface(
      createElement(
        "main",
        { id: "main-content", className: "shell" },
@@ -218,8 +224,8 @@ describe("TechLog consumer-visible style contract", () => {
    expect(getComputedStyle(dialogInner!).padding).toBe("27px 28px 22px");
  });

-  it("preserves footer spacing and fatal-action sizing", () => {
-    const view = renderPublicSurface(
+  it("preserves footer spacing and fatal-action sizing", async () => {
+    const view = await renderPublicSurface(
      createElement(FatalErrorState, {
        traceId: "PUBLIC-500",
        retryHref: "/",
@@ -26,6 +26,8 @@ function contextValue(
  return {
    gateway: {} as never,
    assetGateway,
+    // 이 테스트는 Asset 접근자만 고정한다 — 관리 게이트웨이는 쓰이지 않으므로 자리만 채운다.
+    managementGateway: {} as never,
    resolvePublishedLabel: () => undefined,
    now: () => new Date("2026-08-14T01:00:00.000Z"),
    editor: null,
@@ -0,0 +1,28 @@
+import type { ManagementGateway } from "../../src/features/tech-log/application/ports/management-gateway.ts";
+
+/**
+ * Studio 화면 테스트가 `StudioProvider` 를 렌더할 때 필요한 최소 관리 게이트웨이.
+ *
+ * <p>기본값은 "아무것도 없음" 이다. 이 하네스들은 문서·Asset 흐름을 검증하지 아니 주제·프로젝트
+ * 관리를 검증하지 않으므로, 호출되면 빈 목록을 주고 쓰기는 거부한다 — 조용히 성공시키면 관리
+ * 표면을 실수로 건드리는 테스트가 통과해 버린다.
+ */
+export function createManagementGatewayStub(
+  overrides: Partial<ManagementGateway> = {},
+): ManagementGateway {
+  const unused = (name: string) => async (): Promise<never> => {
+    throw new Error(`management gateway ${name} was not stubbed for this test`);
+  };
+  return Object.freeze({
+    listTopics: async () => [],
+    listProjects: async () => ({ items: [], page: {} }) as never,
+    createTopic: unused("createTopic"),
+    updateTopic: unused("updateTopic"),
+    deleteTopic: unused("deleteTopic"),
+    getProject: unused("getProject"),
+    createProject: unused("createProject"),
+    updateProject: unused("updateProject"),
+    deleteProject: unused("deleteProject"),
+    ...overrides,
+  }) as ManagementGateway;
+}
@@ -200,8 +200,8 @@ describe("CI gate contract", () => {
    // than taking either side's number.
    // Task 11 added TECH_LOG_STUDIO_ASSETS's manual accessibility evidence.
    // Alignment follow-up item 2 added the TechLog junit report.
-    expect(contract.gates.reduce((total, gate) => total + gate.evidenceArtifactIds.length, 0)).toBe(109);
-    expect(contract.artifacts).toHaveLength(130);
+    expect(contract.gates.reduce((total, gate) => total + gate.evidenceArtifactIds.length, 0)).toBe(110);
+    expect(contract.artifacts).toHaveLength(131);
    expect(contract.stages).toHaveLength(5);
    expect(contract.retention.classes).toHaveLength(5);
    expect(index.gates.get("FE-GATE-015")?.commandIds).toHaveLength(2);
@@ -192,7 +192,7 @@ describe("selective Task 3 contract closure", () => {
    expect(canonical.gates).toHaveLength(27);
    expect(canonical.commands).toHaveLength(85);
    expect(canonical.gates.reduce((sum, gate) => sum + gate.commandIds.length, 0)).toBe(97);
-    expect(canonical.artifacts).toHaveLength(130);
+    expect(canonical.artifacts).toHaveLength(131);
    expect(canonical.stages).toHaveLength(5);
    expect(canonical.retention.classes).toHaveLength(5);

@@ -34,6 +34,7 @@ describe("TechLog production serving contract", () => {
    expect(contract.studioSpaPathPatterns).toEqual([
      "^/studio$",
      "^/studio/assets$",
+      "^/studio/taxonomy$",
      "^/studio/documents$",
      "^/studio/documents/new$",
      "^/studio/documents/[^/]+/(edit|validation|preview|publish)$",
@@ -31,6 +31,7 @@ const techLogRouteChunks = Object.freeze({
  "/studio/pages/publications-page.tsx": "route-tech-log-studio-publications",
  "/studio/pages/publication-preview-page.tsx": "route-tech-log-studio-publication-preview",
  "/studio/pages/assets-page.tsx": "route-tech-log-studio-assets",
+  "/studio/pages/taxonomy-page.tsx": "route-tech-log-studio-taxonomy",
  "/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);