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,83 @@
+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";
+
+export function ReleasePage() {
+  const { params } = useRouteInput<"TECH_LOG_RELEASE">();
+  const version = typeof params.version === "string" ? params.version : "";
+  const { publicContent } = useApplication().features.get(TECH_LOG_FEATURE_ID);
+  const release = publicContent.getRelease(version);
+
+  if (!release) return <RegisteredNotFoundRoute />;
+
+  return (
+    <main id="main-content" className="shell release-page">
+      <header className="release-page-header">
+        <nav aria-label="변경 기록 경로">
+          <Link to="/releases">변경 기록</Link>
+          <span aria-hidden="true">/</span>v{release.version}
+        </nav>
+        <p className="section-kicker">Release v{release.version}</p>
+        <h1>{release.title}</h1>
+        <p>{release.summary}</p>
+        <time dateTime={release.publishedAt}>{release.publishedLabel}</time>
+      </header>
+      <div className="release-document">
+        <section aria-labelledby="release-changes">
+          <p className="release-section-number">01</p>
+          <div>
+            <h2 id="release-changes">무엇이 바뀌었나</h2>
+            <ul>
+              {release.changes.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </section>
+        <section aria-labelledby="release-reasons">
+          <p className="release-section-number">02</p>
+          <div>
+            <h2 id="release-reasons">왜 바꿨나</h2>
+            <ul>
+              {release.reasons.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </section>
+        <section aria-labelledby="release-impacts">
+          <p className="release-section-number">03</p>
+          <div>
+            <h2 id="release-impacts">영향</h2>
+            <ul>
+              {release.impacts.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </section>
+        <section aria-labelledby="release-related">
+          <p className="release-section-number">04</p>
+          <div>
+            <h2 id="release-related">연결된 화면</h2>
+            <ul className="release-related-links">
+              {release.related.map((item) => (
+                <li key={item.path}>
+                  <Link to={item.path}>
+                    {item.title}
+                    <span aria-hidden="true">↗</span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}