feat: assemble responsive app shell navigation
This commit is contained in:
donghyeon-ka
@@ -0,0 +1,27 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* title: string,
|
||||
* description?: string,
|
||||
* eyebrow?: string
|
||||
* }} props
|
||||
*/
|
||||
export function PageHeader({ title, description, eyebrow }) {
|
||||
const headingRef = useRef(/** @type {HTMLHeadingElement | null} */ (null));
|
||||
|
||||
useEffect(() => {
|
||||
document.title = `${title} · Frontend Skeleton`;
|
||||
headingRef.current?.focus();
|
||||
}, [title]);
|
||||
|
||||
return (
|
||||
<header className="page-header">
|
||||
{eyebrow ? <p className="page-header__eyebrow">{eyebrow}</p> : null}
|
||||
<h1 ref={headingRef} tabIndex={-1} data-route-heading>
|
||||
{title}
|
||||
</h1>
|
||||
{description ? <p className="page-header__description">{description}</p> : null}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { useState } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
import { PageHeader } from "../components/page-header.jsx";
|
||||
import { useSession } from "../providers/session-provider.jsx";
|
||||
|
||||
export default function AuthExamplePage() {
|
||||
const location = useLocation();
|
||||
const { sessionState, beginSignIn, signOut, recover } = useSession();
|
||||
const [pending, setPending] = useState(false);
|
||||
const [failed, setFailed] = useState(false);
|
||||
|
||||
/** @param {() => Promise<unknown>} action */
|
||||
async function execute(action) {
|
||||
setPending(true);
|
||||
setFailed(false);
|
||||
try {
|
||||
await action();
|
||||
} catch {
|
||||
setFailed(true);
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="ui-page">
|
||||
<PageHeader
|
||||
eyebrow="예제"
|
||||
title="인증 연동"
|
||||
description="스켈레톤은 자격 증명을 소유하지 않고 외부 인증 구현이 연결될 포트와 화면 상태만 제공합니다."
|
||||
/>
|
||||
<section className="ui-panel auth-example" aria-labelledby="auth-state-title">
|
||||
<div>
|
||||
<h2 id="auth-state-title">현재 세션 상태</h2>
|
||||
<output className="session-status" data-state={sessionState}>
|
||||
{sessionState}
|
||||
</output>
|
||||
</div>
|
||||
<div className="button-row">
|
||||
<button
|
||||
className="ui-button"
|
||||
type="button"
|
||||
disabled={pending || sessionState === "integration-failed"}
|
||||
onClick={() =>
|
||||
void execute(() =>
|
||||
beginSignIn(`${location.pathname}${location.search}`),
|
||||
)
|
||||
}
|
||||
>
|
||||
로그인 시작
|
||||
</button>
|
||||
<button
|
||||
className="ui-button ui-button--secondary"
|
||||
type="button"
|
||||
disabled={pending || sessionState !== "authenticated"}
|
||||
onClick={() => void execute(signOut)}
|
||||
>
|
||||
로그아웃
|
||||
</button>
|
||||
<button
|
||||
className="ui-button ui-button--secondary"
|
||||
type="button"
|
||||
disabled={pending || sessionState !== "recovery-pending"}
|
||||
onClick={() => void execute(recover)}
|
||||
>
|
||||
세션 복구
|
||||
</button>
|
||||
</div>
|
||||
{sessionState === "integration-failed" ? (
|
||||
<p role="status">
|
||||
외부 인증 소유자가 연결되지 않았습니다. 런타임 호스트의 인증
|
||||
계약을 연결하세요.
|
||||
</p>
|
||||
) : null}
|
||||
{failed ? <p role="alert">인증 작업을 완료하지 못했습니다.</p> : null}
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { PageHeader } from "../components/page-header.jsx";
|
||||
|
||||
export default function StateGalleryPage() {
|
||||
return (
|
||||
<section className="ui-page">
|
||||
<PageHeader
|
||||
eyebrow="예제"
|
||||
title="화면 상태"
|
||||
description="로딩, 빈 화면, 오류, 인증 필요와 권한 없음 상태의 기본 표현을 확인합니다."
|
||||
/>
|
||||
<div className="readiness-grid">
|
||||
<section className="ui-skeleton" aria-label="로딩 상태 예제" />
|
||||
<section className="ui-empty">
|
||||
<h2>표시할 항목이 없습니다.</h2>
|
||||
<p>다음 행동이 있다면 이 위치에 명확한 안내를 제공합니다.</p>
|
||||
</section>
|
||||
<section className="ui-terminal-error" role="alert">
|
||||
<h2>요청을 완료하지 못했습니다.</h2>
|
||||
<p>안전한 재시도 또는 지원 참조 정보를 제공합니다.</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { PageHeader } from "../components/page-header.jsx";
|
||||
|
||||
export default function UiGalleryPage() {
|
||||
return (
|
||||
<section className="ui-page">
|
||||
<PageHeader
|
||||
eyebrow="예제"
|
||||
title="UI 구성요소"
|
||||
description="제품 도메인과 독립적인 공통 컨트롤과 표면을 확인하는 공간입니다."
|
||||
/>
|
||||
<section className="ui-panel" aria-labelledby="ui-gallery-status">
|
||||
<h2 id="ui-gallery-status">구성요소 계약</h2>
|
||||
<p>
|
||||
버튼, 입력창, 카드, 알림, 모달의 상호작용과 디자인 토큰을 이
|
||||
라우트에 조립합니다.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { NavLink, Outlet, useLocation } from "react-router-dom";
|
||||
|
||||
import { NAVIGATION_ROUTES, routePath } from "../../contracts/routes.js";
|
||||
import { useSession } from "../providers/session-provider.jsx";
|
||||
|
||||
const SESSION_LABELS = Object.freeze({
|
||||
authenticated: "인증됨",
|
||||
unauthenticated: "로그인 전",
|
||||
"recovery-pending": "복구 대기",
|
||||
"integration-failed": "연동 필요",
|
||||
});
|
||||
|
||||
export function AppShell() {
|
||||
const location = useLocation();
|
||||
const { sessionState, beginSignIn, signOut, recover } = useSession();
|
||||
const [navigationOpen, setNavigationOpen] = useState(false);
|
||||
const [sessionActionPending, setSessionActionPending] = useState(false);
|
||||
const [sessionActionFailed, setSessionActionFailed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setNavigationOpen(false);
|
||||
}, [location.pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!navigationOpen) return undefined;
|
||||
/** @param {KeyboardEvent} event */
|
||||
const closeOnEscape = (event) => {
|
||||
if (event.key === "Escape") setNavigationOpen(false);
|
||||
};
|
||||
window.addEventListener("keydown", closeOnEscape);
|
||||
return () => window.removeEventListener("keydown", closeOnEscape);
|
||||
}, [navigationOpen]);
|
||||
|
||||
async function runSessionAction() {
|
||||
setSessionActionPending(true);
|
||||
setSessionActionFailed(false);
|
||||
try {
|
||||
if (sessionState === "authenticated") {
|
||||
await signOut();
|
||||
} else if (sessionState === "recovery-pending") {
|
||||
await recover();
|
||||
} else {
|
||||
await beginSignIn(
|
||||
`${location.pathname}${location.search}${location.hash}`,
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
setSessionActionFailed(true);
|
||||
} finally {
|
||||
setSessionActionPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
const sessionActionLabel =
|
||||
sessionState === "authenticated"
|
||||
? "로그아웃"
|
||||
: sessionState === "recovery-pending"
|
||||
? "세션 복구"
|
||||
: "로그인";
|
||||
const integrationAvailable = sessionState !== "integration-failed";
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<a className="skip-link" href="#main-content">
|
||||
본문으로 건너뛰기
|
||||
</a>
|
||||
<header className="app-shell__header">
|
||||
<button
|
||||
className="app-shell__menu-button"
|
||||
type="button"
|
||||
aria-controls="primary-navigation"
|
||||
aria-expanded={navigationOpen}
|
||||
onClick={() => setNavigationOpen((open) => !open)}
|
||||
>
|
||||
<span aria-hidden="true">☰</span>
|
||||
<span>메뉴</span>
|
||||
</button>
|
||||
<NavLink className="app-shell__brand" to={routePath("APP_HOME")}>
|
||||
Frontend Skeleton
|
||||
</NavLink>
|
||||
<div className="app-shell__session">
|
||||
<span className="session-status" data-state={sessionState}>
|
||||
{SESSION_LABELS[sessionState]}
|
||||
</span>
|
||||
{integrationAvailable ? (
|
||||
<button
|
||||
className="ui-button ui-button--compact"
|
||||
type="button"
|
||||
disabled={sessionActionPending}
|
||||
onClick={() => void runSessionAction()}
|
||||
>
|
||||
{sessionActionPending ? "처리 중…" : sessionActionLabel}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
{sessionActionFailed ? (
|
||||
<p className="app-shell__session-error" role="alert">
|
||||
세션 작업을 완료하지 못했습니다.
|
||||
</p>
|
||||
) : null}
|
||||
</header>
|
||||
<aside
|
||||
className="app-shell__sidebar"
|
||||
data-open={navigationOpen}
|
||||
aria-label="사이드바"
|
||||
>
|
||||
<nav id="primary-navigation" aria-label="주요 탐색">
|
||||
<ul className="app-navigation">
|
||||
{NAVIGATION_ROUTES.map((definition) => (
|
||||
<li key={definition.routeId}>
|
||||
<NavLink
|
||||
className={({ isActive }) =>
|
||||
`app-navigation__link${isActive ? " is-active" : ""}`
|
||||
}
|
||||
end={definition.path === "/"}
|
||||
to={definition.path}
|
||||
>
|
||||
{definition.navigationLabel}
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
{navigationOpen ? (
|
||||
<button
|
||||
className="app-shell__scrim"
|
||||
type="button"
|
||||
aria-label="메뉴 닫기"
|
||||
onClick={() => setNavigationOpen(false)}
|
||||
/>
|
||||
) : null}
|
||||
<main className="app-shell__content" id="main-content" tabIndex={-1}>
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* sessionState: import("../../application/ports/auth-session-port.js").SessionState,
|
||||
* beginSignIn: import("../../application/ports/auth-session-port.js").AuthSessionPort["beginSignIn"],
|
||||
* signOut: import("../../application/ports/auth-session-port.js").AuthSessionPort["signOut"],
|
||||
* recover: import("../../application/ports/auth-session-port.js").AuthSessionPort["recover"]
|
||||
* }} SessionContextValue
|
||||
*/
|
||||
|
||||
const SessionContext = createContext(
|
||||
/** @type {SessionContextValue | null} */ (null),
|
||||
);
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* authSession: import("../../application/ports/auth-session-port.js").AuthSessionPort,
|
||||
* children: React.ReactNode
|
||||
* }} props
|
||||
*/
|
||||
export function SessionProvider({ authSession, children }) {
|
||||
const sessionState = useSyncExternalStore(
|
||||
authSession.subscribe,
|
||||
authSession.getState,
|
||||
authSession.getState,
|
||||
);
|
||||
const value = useMemo(
|
||||
() =>
|
||||
Object.freeze({
|
||||
sessionState,
|
||||
beginSignIn: authSession.beginSignIn,
|
||||
signOut: authSession.signOut,
|
||||
recover: authSession.recover,
|
||||
}),
|
||||
[authSession, sessionState],
|
||||
);
|
||||
|
||||
return (
|
||||
<SessionContext.Provider value={value}>{children}</SessionContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useSession() {
|
||||
const session = useContext(SessionContext);
|
||||
if (!session) {
|
||||
throw new Error("SessionProvider is required");
|
||||
}
|
||||
return session;
|
||||
}
|
||||
@@ -1,81 +1,267 @@
|
||||
import { lazy, Suspense, useState } from "react";
|
||||
import {
|
||||
BrowserRouter,
|
||||
Link,
|
||||
Route,
|
||||
Routes,
|
||||
useLocation,
|
||||
} from "react-router-dom";
|
||||
|
||||
import { routePath } from "../../contracts/routes.js";
|
||||
import { getRoute, routePath } from "../../contracts/routes.js";
|
||||
import { RouteBoundary } from "../boundaries/render-error-boundary.jsx";
|
||||
import { AppShell } from "../layouts/app-shell.jsx";
|
||||
import { PageHeader } from "../components/page-header.jsx";
|
||||
import { SessionProvider, useSession } from "../providers/session-provider.jsx";
|
||||
import { decideRouteAccess } from "./navigation-policy.js";
|
||||
|
||||
function HomePage() {
|
||||
const HomePage = lazy(() => import("../pages/home-page.jsx"));
|
||||
const UiGalleryPage = lazy(() => import("../examples/ui-gallery-page.jsx"));
|
||||
const StateGalleryPage = lazy(
|
||||
() => import("../examples/state-gallery-page.jsx"),
|
||||
);
|
||||
const AuthExamplePage = lazy(
|
||||
() => import("../examples/auth-example-page.jsx"),
|
||||
);
|
||||
const SampleContractPage = lazy(
|
||||
() => import("../pages/sample-contract-page.jsx"),
|
||||
);
|
||||
const NotFoundPage = lazy(() => import("../pages/not-found-page.jsx"));
|
||||
|
||||
/** @param {{ routeId: string }} props */
|
||||
function RouteLoadingSurface({ routeId }) {
|
||||
const definition = getRoute(routeId);
|
||||
return (
|
||||
<main className="ui-page">
|
||||
<h1>Clean Architecture Frontend</h1>
|
||||
<p>런타임 계약이 검증되었습니다.</p>
|
||||
<Link to={routePath("SAMPLE_RESOURCE_LIST")}>샘플 리소스</Link>
|
||||
</main>
|
||||
<section className="ui-page route-loading" aria-live="polite" aria-busy="true">
|
||||
<div className="ui-skeleton" aria-hidden="true" />
|
||||
<p>화면을 준비하고 있습니다.</p>
|
||||
<span className="visually-hidden">{definition.title} 로딩 중</span>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SamplePlaceholder() {
|
||||
function RouteFailureSurface() {
|
||||
return (
|
||||
<main className="ui-page">
|
||||
<h1>샘플 리소스</h1>
|
||||
<p>계약 fixture를 준비하고 있습니다.</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function NotFoundPage() {
|
||||
return (
|
||||
<main className="ui-page">
|
||||
<h1>페이지를 찾을 수 없습니다.</h1>
|
||||
<Link to={routePath("APP_HOME")}>홈으로 이동</Link>
|
||||
</main>
|
||||
<section className="ui-page">
|
||||
<PageHeader
|
||||
title="화면을 표시하지 못했습니다."
|
||||
description="잠시 후 페이지를 새로고침해 주세요. 문제가 계속되면 운영 지원 참조 정보를 확인하세요."
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* authSession: import("../../application/ports/auth-session-port.js").AuthSessionPort
|
||||
* routeId: string,
|
||||
* buildId: string,
|
||||
* telemetry?: import("../../application/ports/telemetry-port.js").TelemetryPort,
|
||||
* children: React.ReactNode
|
||||
* }} props
|
||||
*/
|
||||
function GuardedSampleRoute({ authSession }) {
|
||||
const decision = decideRouteAccess(
|
||||
"SAMPLE_RESOURCE_LIST",
|
||||
authSession.getState(),
|
||||
function RouteSurface({ routeId, buildId, telemetry, children }) {
|
||||
return (
|
||||
<RouteBoundary
|
||||
routeId={routeId}
|
||||
buildId={buildId}
|
||||
telemetry={telemetry}
|
||||
fallback={<RouteFailureSurface />}
|
||||
>
|
||||
<Suspense fallback={<RouteLoadingSurface routeId={routeId} />}>
|
||||
{children}
|
||||
</Suspense>
|
||||
</RouteBoundary>
|
||||
);
|
||||
if (!decision.allowed) {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* routeId: string,
|
||||
* children: React.ReactNode
|
||||
* }} props
|
||||
*/
|
||||
function ProtectedRoute({ routeId, children }) {
|
||||
const location = useLocation();
|
||||
const { sessionState, beginSignIn, recover } = useSession();
|
||||
const [pending, setPending] = useState(false);
|
||||
const [failed, setFailed] = useState(false);
|
||||
const decision = decideRouteAccess(routeId, sessionState);
|
||||
|
||||
async function continueSession() {
|
||||
setPending(true);
|
||||
setFailed(false);
|
||||
try {
|
||||
if (decision.action === "wait-for-session") {
|
||||
await recover();
|
||||
} else {
|
||||
await beginSignIn(
|
||||
`${location.pathname}${location.search}${location.hash}`,
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
setFailed(true);
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (decision.allowed) return children;
|
||||
|
||||
if (sessionState === "integration-failed") {
|
||||
return (
|
||||
<main className="ui-page">
|
||||
<h1>세션이 필요합니다.</h1>
|
||||
<button className="ui-button" type="button">
|
||||
로그인
|
||||
</button>
|
||||
</main>
|
||||
<section className="ui-page">
|
||||
<PageHeader
|
||||
title="로그인 연동이 필요합니다."
|
||||
description="외부 인증 소유자가 런타임에 연결되면 이 보호 라우트를 사용할 수 있습니다."
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
return <SamplePlaceholder />;
|
||||
|
||||
const recovering = decision.action === "wait-for-session";
|
||||
return (
|
||||
<section className="ui-page">
|
||||
<PageHeader
|
||||
title={recovering ? "세션을 복구하고 있습니다." : "세션이 필요합니다."}
|
||||
description={
|
||||
recovering
|
||||
? "기존 세션 확인을 계속하려면 복구를 실행하세요."
|
||||
: "이 화면은 인증 연동 지점을 확인하기 위한 보호 라우트입니다."
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<button
|
||||
className="ui-button"
|
||||
type="button"
|
||||
disabled={pending}
|
||||
onClick={() => void continueSession()}
|
||||
>
|
||||
{pending
|
||||
? "처리 중…"
|
||||
: recovering
|
||||
? "세션 복구"
|
||||
: "로그인 시작"}
|
||||
</button>
|
||||
</div>
|
||||
{failed ? (
|
||||
<p className="ui-terminal-error" role="alert">
|
||||
세션 작업을 완료하지 못했습니다.
|
||||
</p>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* routeId: string,
|
||||
* buildId: string,
|
||||
* telemetry?: import("../../application/ports/telemetry-port.js").TelemetryPort,
|
||||
* children: React.ReactNode
|
||||
* }} props
|
||||
*/
|
||||
function PublicRoute({ routeId, buildId, telemetry, children }) {
|
||||
return (
|
||||
<RouteSurface routeId={routeId} buildId={buildId} telemetry={telemetry}>
|
||||
{children}
|
||||
</RouteSurface>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* authSession: import("../../application/ports/auth-session-port.js").AuthSessionPort,
|
||||
* basename?: string
|
||||
* basename?: string,
|
||||
* buildId?: string,
|
||||
* telemetry?: import("../../application/ports/telemetry-port.js").TelemetryPort
|
||||
* }} props
|
||||
*/
|
||||
export function AppRouter({ authSession, basename = "/" }) {
|
||||
export function AppRouter({
|
||||
authSession,
|
||||
basename = "/",
|
||||
buildId = "local-build",
|
||||
telemetry,
|
||||
}) {
|
||||
return (
|
||||
<BrowserRouter basename={basename}>
|
||||
<Routes>
|
||||
<Route path={routePath("APP_HOME")} element={<HomePage />} />
|
||||
<Route
|
||||
path={routePath("SAMPLE_RESOURCE_LIST")}
|
||||
element={<GuardedSampleRoute authSession={authSession} />}
|
||||
/>
|
||||
<Route path={routePath("NOT_FOUND")} element={<NotFoundPage />} />
|
||||
</Routes>
|
||||
<SessionProvider authSession={authSession}>
|
||||
<Routes>
|
||||
<Route element={<AppShell />}>
|
||||
<Route
|
||||
index
|
||||
element={
|
||||
<PublicRoute
|
||||
routeId="APP_HOME"
|
||||
buildId={buildId}
|
||||
telemetry={telemetry}
|
||||
>
|
||||
<HomePage />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={routePath("EXAMPLES_UI")}
|
||||
element={
|
||||
<PublicRoute
|
||||
routeId="EXAMPLES_UI"
|
||||
buildId={buildId}
|
||||
telemetry={telemetry}
|
||||
>
|
||||
<UiGalleryPage />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={routePath("EXAMPLES_STATES")}
|
||||
element={
|
||||
<PublicRoute
|
||||
routeId="EXAMPLES_STATES"
|
||||
buildId={buildId}
|
||||
telemetry={telemetry}
|
||||
>
|
||||
<StateGalleryPage />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={routePath("EXAMPLES_AUTH")}
|
||||
element={
|
||||
<PublicRoute
|
||||
routeId="EXAMPLES_AUTH"
|
||||
buildId={buildId}
|
||||
telemetry={telemetry}
|
||||
>
|
||||
<AuthExamplePage />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={routePath("SAMPLE_RESOURCE_LIST")}
|
||||
element={
|
||||
<RouteSurface
|
||||
routeId="SAMPLE_RESOURCE_LIST"
|
||||
buildId={buildId}
|
||||
telemetry={telemetry}
|
||||
>
|
||||
<ProtectedRoute routeId="SAMPLE_RESOURCE_LIST">
|
||||
<SampleContractPage />
|
||||
</ProtectedRoute>
|
||||
</RouteSurface>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={routePath("NOT_FOUND")}
|
||||
element={
|
||||
<PublicRoute
|
||||
routeId="NOT_FOUND"
|
||||
buildId={buildId}
|
||||
telemetry={telemetry}
|
||||
>
|
||||
<NotFoundPage />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
</Routes>
|
||||
</SessionProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -24,6 +24,35 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 20rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
@@ -33,8 +62,165 @@
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-control);
|
||||
color: white;
|
||||
background: var(--color-content);
|
||||
transform: translateY(-200%);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
grid-template-rows: 4.5rem 1fr;
|
||||
grid-template-columns: 15rem minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"sidebar content";
|
||||
}
|
||||
|
||||
.app-shell__header {
|
||||
position: sticky;
|
||||
z-index: 30;
|
||||
top: 0;
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-bottom: 1px solid var(--color-surface-muted);
|
||||
background: color-mix(in oklch, white 92%, var(--color-surface));
|
||||
box-shadow: 0 1px 8px color-mix(in oklch, var(--color-content) 8%, transparent);
|
||||
}
|
||||
|
||||
.app-shell__brand {
|
||||
overflow: hidden;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-shell__menu-button {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
border: 1px solid var(--color-surface-muted);
|
||||
border-radius: var(--radius-control);
|
||||
padding: 0.55rem 0.75rem;
|
||||
color: var(--color-content);
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-shell__session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.app-shell__session-error {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.25rem);
|
||||
right: 1rem;
|
||||
padding: 0.5rem;
|
||||
color: var(--color-danger);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.session-status {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.65rem;
|
||||
color: var(--color-content-muted);
|
||||
background: var(--color-surface-muted);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.session-status[data-state="authenticated"] {
|
||||
color: oklch(0.35 0.12 155);
|
||||
background: oklch(0.93 0.05 155);
|
||||
}
|
||||
|
||||
.session-status[data-state="integration-failed"] {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.app-shell__sidebar {
|
||||
position: sticky;
|
||||
top: 4.5rem;
|
||||
grid-area: sidebar;
|
||||
height: calc(100vh - 4.5rem);
|
||||
padding: 1.25rem 0.75rem;
|
||||
border-right: 1px solid var(--color-surface-muted);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.app-navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.app-navigation__link {
|
||||
display: block;
|
||||
border-radius: var(--radius-control);
|
||||
padding: 0.75rem 0.9rem;
|
||||
color: var(--color-content-muted);
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-navigation__link:hover {
|
||||
color: var(--color-content);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.app-navigation__link.is-active {
|
||||
color: var(--color-action-hover);
|
||||
background: color-mix(in oklch, var(--color-action) 10%, white);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.app-shell__content {
|
||||
grid-area: content;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-page {
|
||||
@apply mx-auto flex min-h-screen max-w-4xl flex-col gap-6 p-page;
|
||||
@apply mx-auto flex max-w-6xl flex-col gap-6 p-page;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ui-panel {
|
||||
@@ -43,12 +229,41 @@
|
||||
|
||||
.ui-button {
|
||||
@apply rounded-control bg-action px-4 py-2 font-semibold text-white;
|
||||
display: inline-flex;
|
||||
min-height: 2.75rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-button:hover {
|
||||
@apply bg-action-hover;
|
||||
}
|
||||
|
||||
.ui-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.ui-button--secondary {
|
||||
border: 1px solid var(--color-surface-muted);
|
||||
color: var(--color-content);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.ui-button--secondary:hover {
|
||||
color: var(--color-action);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.ui-button--compact {
|
||||
min-height: 2.25rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.ui-skeleton {
|
||||
@apply h-24 animate-pulse rounded-surface bg-surface-muted;
|
||||
}
|
||||
@@ -57,6 +272,115 @@
|
||||
.ui-terminal-error {
|
||||
@apply rounded-surface border border-surface-muted p-6;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
max-width: 50rem;
|
||||
padding-block: clamp(1rem, 5vw, 3.5rem) 0.5rem;
|
||||
}
|
||||
|
||||
.page-header__eyebrow {
|
||||
margin-block-end: 0.75rem;
|
||||
color: var(--color-action);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-header__description {
|
||||
max-width: 45rem;
|
||||
color: var(--color-content-muted);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.readiness-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.readiness-grid p,
|
||||
.starter-actions p {
|
||||
margin-block-end: 0;
|
||||
color: var(--color-content-muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.starter-actions,
|
||||
.auth-example {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.route-loading {
|
||||
padding-block-start: 4rem;
|
||||
}
|
||||
|
||||
.app-shell__scrim {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 47.999rem) {
|
||||
.app-shell {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"content";
|
||||
}
|
||||
|
||||
.app-shell__header {
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
.app-shell__menu-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.app-shell__sidebar {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
top: 4.5rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: min(18rem, 85vw);
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 10px 0 30px color-mix(in oklch, var(--color-content) 15%, transparent);
|
||||
}
|
||||
|
||||
.app-shell__sidebar[data-open="true"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-shell__scrim {
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
inset: 4.5rem 0 0;
|
||||
display: block;
|
||||
border: 0;
|
||||
background: color-mix(in oklch, var(--color-content) 35%, transparent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-shell__session .session-status {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.readiness-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
Reference in New Issue
Block a user