feat: add form and page platform

2026-07-26 15:22:52 +09:00
parent fdcf0de5bf
commit b327d7370b
54 changed files with 2036 additions and 122 deletions
@@ -0,0 +1,47 @@
+import { Link } from "react-router-dom";
+
+import { AsyncSurface } from "../../../presentation/components/async-surface.jsx";
+import { DetailPage } from "../../../presentation/templates/index.js";
+import { useRouteInput } from "../../../presentation/routes/app-router.js";
+import { useReferenceDetail } from "./use-reference-feature.js";
+
+export default function ReferenceResourceDetailPage() {
+  const route = useRouteInput();
+  const resourceId = String(route.params.resourceId);
+  const { query } = useReferenceDetail(resourceId);
+  const resource = query.data;
+
+  return (
+    <DetailPage
+      key={resourceId}
+      breadcrumb={
+        <Link to="/examples/reference-resources">Reference resources</Link>
+      }
+      heading={{
+        eyebrow: "DetailPage",
+        title: resource?.title ?? "Reference detail",
+        description: "route param과 detail query의 reset 경계를 확인합니다.",
+      }}
+      metadata={
+        resource ? (
+          <dl>
+            <dt>Resource ID</dt>
+            <dd>{resource.resourceId}</dd>
+            <dt>Created</dt>
+            <dd>{resource.createdAtLabel ?? "표시 정보 없음"}</dd>
+          </dl>
+        ) : (
+          <p>요약 정보를 준비하고 있습니다.</p>
+        )
+      }
+      feedback={
+        <AsyncSurface state={query.state} onRetry={query.retry}>
+          {resource ? (
+            <p>이 영역에는 제품별 상세 section을 조립할 수 있습니다.</p>
+          ) : null}
+        </AsyncSurface>
+      }
+      aside={<p>상세 페이지의 관련 정보 slot입니다.</p>}
+    />
+  );
+}