feat: establish TypeScript-aware frontend tooling

tests/component/render-boundary.test.jsx

@@ -10,6 +10,7 @@ import { AsyncSurface } from "../../src/presentation/components/async-surface.js
 import { BootErrorShell } from "../../src/presentation/boundaries/boot-error-shell.jsx";
 import { FeatureBoundary } from "../../src/presentation/boundaries/render-error-boundary.jsx";
 
+/** @returns {import("react").ReactNode} */
 function Defect() {
   throw new Error("raw render stack");
 }

tests/component/router.test.jsx

@@ -30,7 +30,7 @@ describe("application router", () => {
     render(<AppRouter authSession={createAnonymousSessionAdapter()} />);
 
     await user.click(
-      await screen.findByRole("link", { name: "UI 구성요소", exact: true }),
+      await screen.findByRole("link", { name: "UI 구성요소" }),
     );
 
     expect(

tests/component/sample-resource-page.test.jsx

@@ -7,9 +7,10 @@ import { SampleResourcePage } from "../../src/sample/contract-fixture/sample-res
 
 describe("removable sample feature page", () => {
   it("renders the API-to-view-model result through AsyncSurface", async () => {
+    /** @type {Parameters<typeof SampleResourcePage>[0]["facade"]} */
     const facade = {
       listResources: async () => ({
-        ok: true,
+        ok: /** @type {const} */ (true),
         value: [
           {
             resourceId: "resource-1",
@@ -18,7 +19,14 @@ describe("removable sample feature page", () => {
           },
         ],
       }),
-      createResource: async () => ({ ok: true, value: {} }),
+      createResource: async () => ({
+        ok: /** @type {const} */ (true),
+        value: {
+          resourceId: "resource-created",
+          title: "Created",
+          createdAtLabel: null,
+        },
+      }),
     };
     render(<SampleResourcePage facade={facade} />);
 
@@ -27,9 +35,10 @@ describe("removable sample feature page", () => {
   });
 
   it("renders normalized terminal errors without raw DTO fields", async () => {
+    /** @type {Parameters<typeof SampleResourcePage>[0]["facade"]} */
     const facade = {
       listResources: async () => ({
-        ok: false,
+        ok: /** @type {const} */ (false),
         error: {
           kind: "SERVER_FAILURE",
           code: "SERVER_FAILURE",
@@ -40,7 +49,14 @@ describe("removable sample feature page", () => {
           action: "retry",
         },
       }),
-      createResource: async () => ({ ok: true, value: {} }),
+      createResource: async () => ({
+        ok: /** @type {const} */ (true),
+        value: {
+          resourceId: "resource-created",
+          title: "Created",
+          createdAtLabel: null,
+        },
+      }),
     };
     render(<SampleResourcePage facade={facade} />);
 

tests/component/typescript-tooling-smoke.test.tsx

@@ -0,0 +1,20 @@
+// @vitest-environment jsdom
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+type StatusProps = Readonly<{
+  label: string;
+  tone: "neutral" | "positive";
+}>;
+
+function Status({ label, tone }: StatusProps) {
+  return <output data-tone={tone}>{label}</output>;
+}
+
+describe("TSX test tooling", () => {
+  it("parses, lints, type-checks, and renders TSX", () => {
+    render(<Status label="ready" tone="positive" />);
+    expect(screen.getByText("ready")).toHaveAttribute("data-tone", "positive");
+  });
+});