78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
|
|
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 { ProjectPageHeader } from "../components/project-page-header.tsx";
|
|
|
|
export function ProjectOverviewPage() {
|
|
const { params } = useRouteInput<"TECH_LOG_PROJECT">();
|
|
const slug = typeof params.slug === "string" ? params.slug : "";
|
|
const { publicContent } = useApplication().features.get(TECH_LOG_FEATURE_ID);
|
|
const project = publicContent.getProject(slug);
|
|
|
|
if (!project) return <RegisteredNotFoundRoute />;
|
|
|
|
const records = publicContent.getProjectRecords(slug);
|
|
const decisions = publicContent.getProjectDecisions(slug);
|
|
const activity = publicContent.getProjectActivity(slug);
|
|
return (
|
|
<main id="main-content" className="shell project-page">
|
|
<ProjectPageHeader project={project} title={project.title} />
|
|
<section className="project-thesis" aria-labelledby="thesis-title">
|
|
<p className="section-kicker">Thesis</p>
|
|
<h2 id="thesis-title">프로젝트가 지키는 기준</h2>
|
|
<p>{project.thesis}</p>
|
|
</section>
|
|
<dl className="project-status-grid">
|
|
<div>
|
|
<dt>단계</dt>
|
|
<dd>{project.stage}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>현재 목표</dt>
|
|
<dd>{project.currentGoal}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>다음 작업</dt>
|
|
<dd>{project.nextStep}</dd>
|
|
</div>
|
|
</dl>
|
|
<section
|
|
className="project-overview-section"
|
|
aria-labelledby="project-scope-title"
|
|
>
|
|
<div>
|
|
<p className="section-kicker">Scope</p>
|
|
<h2 id="project-scope-title">연결된 작업 맥락</h2>
|
|
</div>
|
|
<div className="project-stat-links">
|
|
<Link to={`/projects/${slug}/records`}>
|
|
<strong>{records.length}</strong>
|
|
<span>공개 기록</span>
|
|
</Link>
|
|
<Link to={`/projects/${slug}/decisions`}>
|
|
<strong>{decisions.length}</strong>
|
|
<span>설계 결정</span>
|
|
</Link>
|
|
<Link to={`/projects/${slug}/activity`}>
|
|
<strong>{activity.length}</strong>
|
|
<span>활동 기록</span>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
<section className="project-topics" aria-labelledby="project-topics-title">
|
|
<h2 id="project-topics-title">주요 주제</h2>
|
|
<ul>
|
|
{project.topics.map((topic) => (
|
|
<li key={topic}>{topic}</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|