88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
import { routePath } from "../../features/installed-feature-contracts.ts";
|
|
import { PageHeader } from "../design-system/index.ts";
|
|
import { useApplication } from "../providers/application-provider.tsx";
|
|
|
|
const READINESS_ITEMS = Object.freeze([
|
|
{
|
|
title: "실행 계약",
|
|
description: "런타임 설정, 릴리스 정합성, 오류 경계가 마운트 전에 검증됩니다.",
|
|
},
|
|
{
|
|
title: "교체 가능한 연동",
|
|
description: "인증, HTTP, 캐시, 저장소, 텔레메트리가 포트 뒤에 분리되어 있습니다.",
|
|
},
|
|
{
|
|
title: "접근 가능한 화면",
|
|
description: "키보드 탐색, 포커스 이동, 반응형 앱 셸의 기본 동작이 준비되어 있습니다.",
|
|
},
|
|
]);
|
|
|
|
export default function HomePage() {
|
|
const { runtime } = useApplication();
|
|
const [release, setRelease] = useState<
|
|
Awaited<ReturnType<typeof runtime.getReleaseSummary>> | null
|
|
>(null);
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
void runtime.getReleaseSummary().then((summary) => {
|
|
if (active) setRelease(summary);
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [runtime]);
|
|
|
|
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>
|
|
<p className="ui-runtime-summary" aria-live="polite">
|
|
{release
|
|
? `빌드 ${release.buildId} · 릴리스 ${release.releaseId}`
|
|
: "검증된 런타임 정보를 확인하고 있습니다."}
|
|
</p>
|
|
<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_PLATFORM")}>
|
|
플랫폼 구성 보기
|
|
</Link>
|
|
<Link
|
|
className="ui-button ui-button--secondary"
|
|
to={routePath("EXAMPLES_UI")}
|
|
>
|
|
UI 구성요소 보기
|
|
</Link>
|
|
<Link
|
|
className="ui-button ui-button--secondary"
|
|
to={routePath("EXAMPLES_STATES")}
|
|
>
|
|
화면 상태 보기
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
);
|
|
}
|