Files
tech-log-frontend/src/features/tech-log/presentation/public/pages/topic-page.tsx
T

60 lines
1.8 KiB
TypeScript

import { TECH_LOG_FEATURE_ID } from "../../../application/tech-log-feature-input.ts";
import { useApplication } from "../../../../../presentation/providers/application-provider.tsx";
import {
RegisteredNotFoundRoute,
useRouteInput,
} from "../../../../../presentation/routes/route-input.tsx";
import { PublicRecordList } from "../components/public-record-list.tsx";
const topics = {
jpa: {
title: "JPA",
description: "목록 조회, 연관 로딩과 페이지 경계를 함께 검증한 기록입니다.",
},
authentication: {
title: "Authentication",
description:
"브라우저와 Edge, Resource Server 사이의 인증 책임과 신뢰 경계를 검증한 기록입니다.",
},
redis: {
title: "Redis",
description:
"애플리케이션 정책과 Redis 저장 명령의 책임 경계를 검증한 기록입니다.",
},
} as const;
function topicConfig(value: unknown) {
if (
value === "jpa" ||
value === "authentication" ||
value === "redis"
) {
return topics[value];
}
return undefined;
}
export function TopicPage() {
const { params } = useRouteInput<"TECH_LOG_TOPIC">();
const topic = topicConfig(params.slug);
const { publicContent } = useApplication().features.get(TECH_LOG_FEATURE_ID);
if (!topic) return <RegisteredNotFoundRoute />;
const records = publicContent.listRecords({ topic: topic.title });
return (
<main id="main-content" className="shell public-index-page">
<header className="public-page-header">
<p className="section-kicker">Topic</p>
<h1>{topic.title}</h1>
<p>{topic.description}</p>
</header>
<div className="public-result-heading">
<h2>관련 기록</h2>
<p>{records.length}개의 관련 기록</p>
</div>
<PublicRecordList records={records} />
</main>
);
}