feat: complete TechLog public screens

2026-08-15 23:19:04 +09:00
parent 4283e40bb2
commit 2b6fa42620
12 changed files with 987 additions and 0 deletions
@@ -0,0 +1,77 @@
+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>
+  );
+}