48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
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>}
|
|
/>
|
|
);
|
|
}
|