73 lines
1.9 KiB
React
73 lines
1.9 KiB
React
/** @param {{ label?: string }} props */
|
|
export function LoadingSurface({ label = "불러오는 중" }) {
|
|
return (
|
|
<section aria-busy="true" aria-label={label}>
|
|
<div className="ui-skeleton" aria-hidden="true" />
|
|
<span className="sr-only">{label}</span>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/** @param {{ title?: string, action?: React.ReactNode }} props */
|
|
export function EmptySurface({ title = "표시할 항목이 없습니다.", action }) {
|
|
return (
|
|
<section>
|
|
<p>{title}</p>
|
|
{action}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @param {{
|
|
* userMessageKey: string,
|
|
* action: "retry" | "reauth" | "navigate" | "reload-once" |
|
|
* "contact-support" | "none",
|
|
* onAction?: () => void
|
|
* }} props
|
|
*/
|
|
export function TerminalErrorSurface({ userMessageKey, action, onAction }) {
|
|
return (
|
|
<section role="alert" aria-labelledby="terminal-error-message">
|
|
<p id="terminal-error-message">{userMessageKey}</p>
|
|
{action !== "none" && (
|
|
<button type="button" onClick={onAction}>
|
|
{action}
|
|
</button>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @param {{
|
|
* state: ReturnType<typeof import("../../application/view-models/async-state.js").deriveAsyncState>,
|
|
* children?: React.ReactNode,
|
|
* onAction?: () => void
|
|
* }} props
|
|
*/
|
|
export function AsyncSurface({ state, children, onAction }) {
|
|
if (state.base === "initial-loading") return <LoadingSurface />;
|
|
if (state.base === "empty") return <EmptySurface />;
|
|
if (state.base === "terminal-error" && state.failure) {
|
|
return (
|
|
<TerminalErrorSurface
|
|
userMessageKey={state.failure.userMessageKey}
|
|
action={state.failure.action}
|
|
onAction={onAction}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section aria-busy={state.overlay.refreshing || state.overlay.mutationPending}>
|
|
{state.indicator && (
|
|
<p role="status" aria-live="polite">
|
|
{state.indicator}
|
|
</p>
|
|
)}
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|