feat: assemble responsive app shell navigation

2026-07-25 23:52:34 +09:00
parent 0925d252d9
commit baeda39057
17 changed files with 1238 additions and 60 deletions
@@ -0,0 +1,56 @@
+import { Link } from "react-router-dom";
+
+import { routePath } from "../../contracts/routes.js";
+import { PageHeader } from "../components/page-header.jsx";
+
+const READINESS_ITEMS = Object.freeze([
+  {
+    title: "실행 계약",
+    description: "런타임 설정, 릴리스 정합성, 오류 경계가 마운트 전에 검증됩니다.",
+  },
+  {
+    title: "교체 가능한 연동",
+    description: "인증, HTTP, 캐시, 저장소, 텔레메트리가 포트 뒤에 분리되어 있습니다.",
+  },
+  {
+    title: "접근 가능한 화면",
+    description: "키보드 탐색, 포커스 이동, 반응형 앱 셸의 기본 동작이 준비되어 있습니다.",
+  },
+]);
+
+export default function HomePage() {
+  return (
+    <section className="ui-page">
+      <PageHeader
+        eyebrow="프로젝트 시작점"
+        title="Clean Architecture Frontend"
+        description="도메인을 추가하기 전에 실행 구조와 범용 사용자 경험을 확인할 수 있는 중립적인 스켈레톤입니다."
+      />
+      <div className="readiness-grid" aria-label="구현 준비 상태">
+        {READINESS_ITEMS.map((item) => (
+          <article className="ui-panel" key={item.title}>
+            <h2>{item.title}</h2>
+            <p>{item.description}</p>
+          </article>
+        ))}
+      </div>
+      <section className="ui-panel starter-actions" aria-labelledby="starter-title">
+        <div>
+          <h2 id="starter-title">준비된 화면 살펴보기</h2>
+          <p>공통 구성요소와 비동기 화면 상태를 예제 라우트에서 확인하세요.</p>
+        </div>
+        <div className="button-row">
+          <Link className="ui-button" to={routePath("EXAMPLES_UI")}>
+            UI 구성요소 보기
+          </Link>
+          <Link
+            className="ui-button ui-button--secondary"
+            to={routePath("EXAMPLES_STATES")}
+          >
+            화면 상태 보기
+          </Link>
+        </div>
+      </section>
+    </section>
+  );
+}
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+import { routePath } from "../../contracts/routes.js";
+import { PageHeader } from "../components/page-header.jsx";
+
+export default function NotFoundPage() {
+  return (
+    <section className="ui-page">
+      <PageHeader
+        title="페이지를 찾을 수 없습니다."
+        description="주소를 확인하거나 준비된 시작 화면으로 돌아가세요."
+      />
+      <div>
+        <Link className="ui-button" to={routePath("APP_HOME")}>
+          홈으로 이동
+        </Link>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,23 @@
+import { PageHeader } from "../components/page-header.jsx";
+import { useSession } from "../providers/session-provider.jsx";
+
+export default function SampleContractPage() {
+  const { sessionState } = useSession();
+
+  return (
+    <section className="ui-page">
+      <PageHeader
+        eyebrow="보호 라우트"
+        title="보호된 연동 지점"
+        description="실제 도메인 기능이 인증된 세션과 연결되는 위치를 보여주는 중립적인 계약 화면입니다."
+      />
+      <section className="ui-panel" aria-labelledby="protected-state-title">
+        <h2 id="protected-state-title">라우트 접근 허용</h2>
+        <p>
+          현재 세션 상태는 <strong>{sessionState}</strong>입니다. 서버의
+          권한 검증은 이 클라이언트 라우트 정책과 별도로 유지해야 합니다.
+        </p>
+      </section>
+    </section>
+  );
+}