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,90 @@
+import { Link } from "react-router-dom";
+
+import { TECH_LOG_FEATURE_ID } from "../../../application/tech-log-feature-input.ts";
+import { publicSiteConfig } from "../../../contracts/public-site-config.ts";
+import { useApplication } from "../../../../../presentation/providers/application-provider.tsx";
+
+const principles = [
+  {
+    title: "관찰한 사실과 판단을 나눕니다",
+    description:
+      "측정값, 문서 근거, 아직 확인하지 못한 가정을 같은 문장에 섞지 않습니다.",
+  },
+  {
+    title: "결론보다 경계를 남깁니다",
+    description:
+      "어떤 조건에서 선택했고 어디까지 적용할 수 있는지 함께 기록합니다.",
+  },
+  {
+    title: "프로젝트 맥락으로 다시 연결합니다",
+    description:
+      "Case와 Reference, Question, Decision이 따로 흩어지지 않게 실제 작업과 연결합니다.",
+  },
+] as const;
+
+const currentProjectSlugs = ["backend-skeleton", "auth-lab"] as const;
+const topics = ["Backend Architecture", "JPA", "Authentication", "Redis"] as const;
+
+export function ProfilePage() {
+  const { publicContent } = useApplication().features.get(TECH_LOG_FEATURE_ID);
+  const currentProjects = currentProjectSlugs.flatMap((slug) => {
+    const project = publicContent.getProject(slug);
+    return project ? [project] : [];
+  });
+
+  return (
+    <main id="main-content" className="shell profile-page">
+      <header className="profile-header">
+        <p className="section-kicker">Profile</p>
+        <h1>{publicSiteConfig.operator}</h1>
+        <p>{publicSiteConfig.identityStatement}</p>
+      </header>
+      <section className="profile-principles" aria-labelledby="principles-title">
+        <div>
+          <p className="section-kicker">Principles</p>
+          <h2 id="principles-title">기록을 운영하는 원칙</h2>
+        </div>
+        <ol>
+          {principles.map((principle, index) => (
+            <li key={principle.title}>
+              <span>{String(index + 1).padStart(2, "0")}</span>
+              <div>
+                <h3>{principle.title}</h3>
+                <p>{principle.description}</p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </section>
+      <section className="profile-projects" aria-labelledby="profile-projects-title">
+        <div>
+          <p className="section-kicker">Current</p>
+          <h2 id="profile-projects-title">현재 프로젝트</h2>
+        </div>
+        <ul>
+          {currentProjects.map((project) => (
+            <li key={project.slug}>
+              <Link to={`/projects/${project.slug}`}>
+                <div>
+                  <strong>{project.title}</strong>
+                  <span>{project.stage}</span>
+                </div>
+                <p>{project.currentGoal}</p>
+                <span aria-hidden="true">↗</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section className="profile-topics" aria-labelledby="profile-topics-title">
+        <p className="section-kicker">Topics</p>
+        <h2 id="profile-topics-title">주요 관심 주제</h2>
+        <ul>
+          {topics.map((topic) => (
+            <li key={topic}>{topic}</li>
+          ))}
+        </ul>
+      </section>
+    </main>
+  );
+}