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,34 @@
+import { Link, useLocation } from "react-router-dom";
+
+import type { Project } from "../../../application/ports/public-content-queries.ts";
+
+export type ProjectSection = "overview" | "records" | "decisions" | "activity";
+
+const sections = [
+  { key: "overview", label: "개요", suffix: "" },
+  { key: "records", label: "기록", suffix: "/records" },
+  { key: "decisions", label: "결정", suffix: "/decisions" },
+  { key: "activity", label: "활동", suffix: "/activity" },
+] as const;
+
+export function ProjectNavigation({ project }: { project: Project }) {
+  const { pathname } = useLocation();
+  const basePath = `/projects/${project.slug}`;
+  const current =
+    sections.find((section) => pathname === `${basePath}${section.suffix}`)?.key ??
+    "overview";
+
+  return (
+    <nav className="project-navigation" aria-label="프로젝트 탐색">
+      {sections.map((section) => (
+        <Link
+          key={section.key}
+          to={`${basePath}${section.suffix}`}
+          aria-current={current === section.key ? "page" : undefined}
+        >
+          {section.label}
+        </Link>
+      ))}
+    </nav>
+  );
+}
@@ -0,0 +1,25 @@
+import { Link } from "react-router-dom";
+
+import type { Project } from "../../../application/ports/public-content-queries.ts";
+import { ProjectNavigation } from "./project-navigation.tsx";
+
+export function ProjectPageHeader({
+  project,
+  title,
+}: {
+  project: Project;
+  title: string;
+}) {
+  return (
+    <header className="project-page-header">
+      <p className="project-breadcrumb">
+        <Link to="/projects">Projects</Link>
+        <span aria-hidden="true">/</span>
+        {project.title}
+      </p>
+      <h1>{title}</h1>
+      <p>{project.summary}</p>
+      <ProjectNavigation project={project} />
+    </header>
+  );
+}