57 lines
2.0 KiB
React
57 lines
2.0 KiB
React
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>
|
|
);
|
|
}
|