feat: add form and page platform
This commit is contained in:
donghyeon-ka
@@ -0,0 +1,90 @@
|
||||
import { useId, type FormHTMLAttributes, type ReactNode } from "react";
|
||||
|
||||
import { TextField } from "../components/ui/text-field.jsx";
|
||||
import type {
|
||||
FieldErrors,
|
||||
FieldName,
|
||||
FormValues,
|
||||
} from "./form-contracts.js";
|
||||
|
||||
export function Form(
|
||||
props: FormHTMLAttributes<HTMLFormElement> & Readonly<{ pending?: boolean }>,
|
||||
) {
|
||||
const { pending = false, children, ...formProps } = props;
|
||||
return (
|
||||
<form {...formProps} noValidate aria-busy={pending || undefined}>
|
||||
{children}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export function FormField(
|
||||
props: React.ComponentProps<typeof TextField>,
|
||||
) {
|
||||
return <TextField {...props} />;
|
||||
}
|
||||
|
||||
export function ErrorSummary<Values extends FormValues>(props: Readonly<{
|
||||
fieldErrors: FieldErrors<Values>;
|
||||
formErrors?: readonly string[];
|
||||
fieldLabels: Readonly<Record<FieldName<Values>, string>>;
|
||||
fieldId(name: FieldName<Values>): string;
|
||||
onFocusField?(name: FieldName<Values>): void;
|
||||
}>) {
|
||||
const {
|
||||
fieldErrors,
|
||||
formErrors = [],
|
||||
fieldLabels,
|
||||
fieldId,
|
||||
onFocusField,
|
||||
} = props;
|
||||
const headingId = useId();
|
||||
const entries = Object.entries(fieldErrors) as [
|
||||
FieldName<Values>,
|
||||
string,
|
||||
][];
|
||||
if (entries.length === 0 && formErrors.length === 0) return null;
|
||||
return (
|
||||
<section
|
||||
className="form-error-summary"
|
||||
role="alert"
|
||||
aria-labelledby={headingId}
|
||||
>
|
||||
<h2 id={headingId}>입력 내용을 확인해 주세요.</h2>
|
||||
{entries.length > 0 ? (
|
||||
<ul>
|
||||
{entries.map(([name, message]) => (
|
||||
<li key={name}>
|
||||
<a
|
||||
href={`#${fieldId(name)}`}
|
||||
onClick={(event) => {
|
||||
if (!onFocusField) return;
|
||||
event.preventDefault();
|
||||
onFocusField(name);
|
||||
}}
|
||||
>
|
||||
{fieldLabels[name]}: {message}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
{formErrors.map((message) => (
|
||||
<p key={message}>{message}</p>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function FormActions(props: Readonly<{
|
||||
children: ReactNode;
|
||||
sticky?: boolean;
|
||||
}>) {
|
||||
return (
|
||||
<div
|
||||
className={`form-actions${props.sticky ? " form-actions--sticky" : ""}`}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import type { ApiFailure } from "../../contracts/errors.js";
|
||||
|
||||
export type FormValues = Readonly<Record<string, unknown>>;
|
||||
export type FieldName<Values extends FormValues> = Extract<keyof Values, string>;
|
||||
export type FieldErrors<Values extends FormValues> = Readonly<
|
||||
Partial<Record<FieldName<Values>, string>>
|
||||
>;
|
||||
|
||||
export type FormResult<Value> =
|
||||
| Readonly<{ ok: true; value: Value }>
|
||||
| Readonly<{ ok: false; error: ApiFailure }>;
|
||||
|
||||
export type FormResultState =
|
||||
| "idle"
|
||||
| "success"
|
||||
| "validation-error"
|
||||
| "conflict"
|
||||
| "unavailable";
|
||||
|
||||
export type MappedValidationFailure<Values extends FormValues> = Readonly<{
|
||||
fieldErrors: FieldErrors<Values>;
|
||||
formErrors: readonly string[];
|
||||
}>;
|
||||
|
||||
const VALIDATION_COPY = Object.freeze({
|
||||
REQUIRED: "필수 입력값입니다.",
|
||||
too_small: "입력값이 너무 짧습니다.",
|
||||
too_big: "입력값이 너무 깁니다.",
|
||||
invalid_type: "입력 형식을 확인해 주세요.",
|
||||
invalid_format: "입력 형식을 확인해 주세요.",
|
||||
invalid_value: "허용된 값을 선택해 주세요.",
|
||||
});
|
||||
|
||||
export function validationMessage(code: string): string {
|
||||
return (
|
||||
VALIDATION_COPY[code as keyof typeof VALIDATION_COPY] ??
|
||||
"입력값을 확인해 주세요."
|
||||
);
|
||||
}
|
||||
|
||||
export function mapValidationFailureToFields<Values extends FormValues>(
|
||||
failure: ApiFailure,
|
||||
allowedFields: readonly FieldName<Values>[],
|
||||
): MappedValidationFailure<Values> {
|
||||
if (failure.kind !== "VALIDATION_REJECTED") {
|
||||
return Object.freeze({ fieldErrors: Object.freeze({}), formErrors: [] });
|
||||
}
|
||||
const allowed = new Set<string>(allowedFields);
|
||||
const fieldErrors: Partial<Record<FieldName<Values>, string>> = {};
|
||||
const formErrors: string[] = [];
|
||||
const issues = failure.validationIssues ?? [];
|
||||
|
||||
if (issues.length === 0) {
|
||||
formErrors.push("입력값을 다시 확인해 주세요.");
|
||||
}
|
||||
for (const issue of issues) {
|
||||
const field = issue.path.split(".").at(0) ?? "";
|
||||
if (allowed.has(field)) {
|
||||
const name = field as FieldName<Values>;
|
||||
fieldErrors[name] ??= validationMessage(issue.code);
|
||||
} else {
|
||||
formErrors.push("서버가 확인하지 못한 입력 항목이 있습니다.");
|
||||
}
|
||||
}
|
||||
return Object.freeze({
|
||||
fieldErrors: Object.freeze(fieldErrors),
|
||||
formErrors: Object.freeze([...new Set(formErrors)]),
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from "./form-components.js";
|
||||
export * from "./form-contracts.js";
|
||||
export * from "./use-app-form.js";
|
||||
export * from "./use-dirty-navigation-guard.js";
|
||||
@@ -0,0 +1,244 @@
|
||||
import {
|
||||
useCallback,
|
||||
useId,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type ChangeEvent,
|
||||
type FormEvent,
|
||||
} from "react";
|
||||
import type { ZodType, ZodIssue } from "zod";
|
||||
|
||||
import {
|
||||
mapValidationFailureToFields,
|
||||
validationMessage,
|
||||
type FieldErrors,
|
||||
type FieldName,
|
||||
type FormResult,
|
||||
type FormResultState,
|
||||
type FormValues,
|
||||
} from "./form-contracts.js";
|
||||
|
||||
type AppFormOptions<
|
||||
Values extends FormValues,
|
||||
Command,
|
||||
Output,
|
||||
> = Readonly<{
|
||||
schema: ZodType<Values>;
|
||||
defaultValues: Values;
|
||||
allowedServerFields: readonly FieldName<Values>[];
|
||||
mapToCommand(values: Values): Command;
|
||||
submit(command: Command): Promise<FormResult<Output>>;
|
||||
resetOnSuccess?: boolean;
|
||||
}>;
|
||||
|
||||
export function useAppForm<
|
||||
Values extends FormValues,
|
||||
Command,
|
||||
Output,
|
||||
>(options: AppFormOptions<Values, Command, Output>) {
|
||||
const {
|
||||
schema,
|
||||
defaultValues,
|
||||
allowedServerFields,
|
||||
mapToCommand,
|
||||
submit,
|
||||
resetOnSuccess = true,
|
||||
} = options;
|
||||
const generatedId = useId().replaceAll(":", "");
|
||||
const formId = `app-form-${generatedId}`;
|
||||
const [values, setValues] = useState<Values>(defaultValues);
|
||||
const [initialValues, setInitialValues] = useState<Values>(defaultValues);
|
||||
const [touched, setTouched] = useState<ReadonlySet<FieldName<Values>>>(
|
||||
() => new Set(),
|
||||
);
|
||||
const [fieldErrors, setFieldErrors] = useState<FieldErrors<Values>>(
|
||||
() => ({} as FieldErrors<Values>),
|
||||
);
|
||||
const [formErrors, setFormErrors] = useState<readonly string[]>([]);
|
||||
const [pending, setPending] = useState(false);
|
||||
const [result, setResult] = useState<FormResultState>("idle");
|
||||
const pendingRef = useRef<Promise<FormResult<Output>> | null>(null);
|
||||
|
||||
const dirty = useMemo(
|
||||
() => JSON.stringify(values) !== JSON.stringify(initialValues),
|
||||
[initialValues, values],
|
||||
);
|
||||
|
||||
const fieldId = useCallback(
|
||||
(name: FieldName<Values>) => `${formId}-${name}`,
|
||||
[formId],
|
||||
);
|
||||
|
||||
const focusField = useCallback(
|
||||
(name: FieldName<Values>) => {
|
||||
const field = document.getElementById(fieldId(name));
|
||||
if (field instanceof HTMLElement) field.focus();
|
||||
},
|
||||
[fieldId],
|
||||
);
|
||||
|
||||
const focusFirstError = useCallback(
|
||||
(errors: FieldErrors<Values>) => {
|
||||
const first = allowedServerFields.find((name) => Boolean(errors[name]));
|
||||
if (first) focusField(first);
|
||||
},
|
||||
[allowedServerFields, focusField],
|
||||
);
|
||||
|
||||
const setValue = useCallback(
|
||||
(name: FieldName<Values>, value: Values[FieldName<Values>]) => {
|
||||
setValues((current) => ({ ...current, [name]: value }) as Values);
|
||||
setFieldErrors((current) => {
|
||||
if (!current[name]) return current;
|
||||
const next = { ...current };
|
||||
delete next[name];
|
||||
return next;
|
||||
});
|
||||
setFormErrors([]);
|
||||
setResult("idle");
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const field = useCallback(
|
||||
(name: FieldName<Values>) => ({
|
||||
id: fieldId(name),
|
||||
name,
|
||||
value: String(values[name] ?? ""),
|
||||
onChange(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
|
||||
setValue(name, event.currentTarget.value as Values[FieldName<Values>]);
|
||||
},
|
||||
onBlur() {
|
||||
setTouched((current) => new Set(current).add(name));
|
||||
},
|
||||
error: fieldErrors[name],
|
||||
"aria-invalid": fieldErrors[name] ? ("true" as const) : undefined,
|
||||
}),
|
||||
[fieldErrors, fieldId, setValue, values],
|
||||
);
|
||||
|
||||
const reset = useCallback(
|
||||
(nextValues: Values = defaultValues) => {
|
||||
setValues(nextValues);
|
||||
setInitialValues(nextValues);
|
||||
setTouched(new Set());
|
||||
setFieldErrors({} as FieldErrors<Values>);
|
||||
setFormErrors([]);
|
||||
setResult("idle");
|
||||
},
|
||||
[defaultValues],
|
||||
);
|
||||
|
||||
const submitForm = useCallback(
|
||||
async (event?: FormEvent<HTMLFormElement>): Promise<FormResult<Output> | null> => {
|
||||
event?.preventDefault();
|
||||
if (pendingRef.current) return pendingRef.current;
|
||||
setFieldErrors({} as FieldErrors<Values>);
|
||||
setFormErrors([]);
|
||||
|
||||
const parsed = await schema.safeParseAsync(values);
|
||||
if (!parsed.success) {
|
||||
const errors = issuesToFieldErrors<Values>(
|
||||
parsed.error.issues,
|
||||
allowedServerFields,
|
||||
);
|
||||
setFieldErrors(errors);
|
||||
setFormErrors(
|
||||
parsed.error.issues.some(
|
||||
(issue) => !allowedServerFields.includes(issue.path[0] as FieldName<Values>),
|
||||
)
|
||||
? ["입력 구성을 다시 확인해 주세요."]
|
||||
: [],
|
||||
);
|
||||
setTouched(new Set(allowedServerFields));
|
||||
setResult("validation-error");
|
||||
focusFirstError(errors);
|
||||
return null;
|
||||
}
|
||||
|
||||
const command = mapToCommand(parsed.data);
|
||||
setPending(true);
|
||||
const execution = submit(command);
|
||||
pendingRef.current = execution;
|
||||
try {
|
||||
const outcome = await execution;
|
||||
if (outcome.ok) {
|
||||
setResult("success");
|
||||
if (resetOnSuccess) {
|
||||
setValues(defaultValues);
|
||||
setInitialValues(defaultValues);
|
||||
setTouched(new Set());
|
||||
} else {
|
||||
setInitialValues(parsed.data);
|
||||
}
|
||||
return outcome;
|
||||
}
|
||||
if (outcome.error.kind === "VALIDATION_REJECTED") {
|
||||
const mapped = mapValidationFailureToFields<Values>(
|
||||
outcome.error,
|
||||
allowedServerFields,
|
||||
);
|
||||
setFieldErrors(mapped.fieldErrors);
|
||||
setFormErrors(mapped.formErrors);
|
||||
setResult("validation-error");
|
||||
focusFirstError(mapped.fieldErrors);
|
||||
} else if (outcome.error.kind === "CONFLICT") {
|
||||
setFormErrors([
|
||||
"다른 변경과 충돌했습니다. 입력은 유지되었으니 최신 상태를 확인해 주세요.",
|
||||
]);
|
||||
setResult("conflict");
|
||||
} else {
|
||||
setFormErrors(["저장하지 못했습니다. 잠시 후 다시 시도해 주세요."]);
|
||||
setResult("unavailable");
|
||||
}
|
||||
return outcome;
|
||||
} finally {
|
||||
pendingRef.current = null;
|
||||
setPending(false);
|
||||
}
|
||||
},
|
||||
[
|
||||
allowedServerFields,
|
||||
defaultValues,
|
||||
focusFirstError,
|
||||
mapToCommand,
|
||||
resetOnSuccess,
|
||||
schema,
|
||||
submit,
|
||||
values,
|
||||
],
|
||||
);
|
||||
|
||||
return Object.freeze({
|
||||
formId,
|
||||
values,
|
||||
dirty,
|
||||
touched,
|
||||
fieldErrors,
|
||||
formErrors,
|
||||
pending,
|
||||
result,
|
||||
field,
|
||||
fieldId,
|
||||
focusField,
|
||||
setValue,
|
||||
submitForm,
|
||||
reset,
|
||||
});
|
||||
}
|
||||
|
||||
function issuesToFieldErrors<Values extends FormValues>(
|
||||
issues: readonly ZodIssue[],
|
||||
allowedFields: readonly FieldName<Values>[],
|
||||
): FieldErrors<Values> {
|
||||
const allowed = new Set<PropertyKey>(allowedFields);
|
||||
const errors: Partial<Record<FieldName<Values>, string>> = {};
|
||||
for (const issue of issues) {
|
||||
const field = issue.path[0];
|
||||
if (!allowed.has(field)) continue;
|
||||
const name = field as FieldName<Values>;
|
||||
errors[name] ??= validationMessage(issue.code);
|
||||
}
|
||||
return Object.freeze(errors);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useCallback } from "react";
|
||||
import { useBeforeUnload, useBlocker } from "react-router-dom";
|
||||
|
||||
import { Button } from "../components/ui/button.jsx";
|
||||
import { Dialog } from "../components/ui/dialog.jsx";
|
||||
|
||||
export function useDirtyNavigationGuard(when: boolean) {
|
||||
const blocker = useBlocker(when);
|
||||
|
||||
useBeforeUnload(
|
||||
useCallback(
|
||||
(event) => {
|
||||
if (!when) return;
|
||||
event.preventDefault();
|
||||
event.returnValue = "";
|
||||
},
|
||||
[when],
|
||||
),
|
||||
{ capture: true },
|
||||
);
|
||||
|
||||
return Object.freeze({
|
||||
blocked: blocker.state === "blocked",
|
||||
stay() {
|
||||
blocker.reset?.();
|
||||
},
|
||||
leave() {
|
||||
blocker.proceed?.();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function DirtyNavigationDialog(props: Readonly<{
|
||||
guard: ReturnType<typeof useDirtyNavigationGuard>;
|
||||
}>) {
|
||||
return (
|
||||
<Dialog
|
||||
open={props.guard.blocked}
|
||||
onClose={props.guard.stay}
|
||||
title="저장하지 않은 변경이 있습니다."
|
||||
description="이 화면을 떠나면 입력한 내용이 사라집니다."
|
||||
actions={
|
||||
<>
|
||||
<Button variant="secondary" onClick={props.guard.stay}>
|
||||
계속 작성
|
||||
</Button>
|
||||
<Button variant="danger" onClick={props.guard.leave}>
|
||||
변경 버리고 이동
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -590,6 +590,141 @@
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.page-template {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page-template__breadcrumb {
|
||||
padding-block-start: 1rem;
|
||||
color: var(--color-content-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.page-template__heading {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-template__heading .page-header {
|
||||
grid-row: span 2;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page-template__status,
|
||||
.page-template__actions,
|
||||
.status-page__actions,
|
||||
.form-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-template__layout {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.page-template__layout[data-has-aside="true"] {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
|
||||
}
|
||||
|
||||
.page-template__content,
|
||||
.page-template__aside,
|
||||
.collection-page__results,
|
||||
.detail-page__sections,
|
||||
.form-page__fields {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page-template__aside,
|
||||
.detail-page__metadata,
|
||||
.collection-page__toolbar,
|
||||
.form-error-summary {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-surface);
|
||||
padding: 1rem;
|
||||
background: var(--color-panel);
|
||||
}
|
||||
|
||||
.collection-page__toolbar,
|
||||
.collection-page__active-filters,
|
||||
.collection-page__bulk-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.collection-page__result-count {
|
||||
color: var(--color-content-muted);
|
||||
}
|
||||
|
||||
.collection-page__results,
|
||||
.detail-page__sections,
|
||||
.form-page__fields,
|
||||
.form-page__error-summary {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.collection-page__pagination {
|
||||
margin-block-start: 1.25rem;
|
||||
}
|
||||
|
||||
.detail-page__danger {
|
||||
margin-block-start: 2rem;
|
||||
border-top: 1px solid var(--color-danger-border);
|
||||
padding-block-start: 1rem;
|
||||
}
|
||||
|
||||
.form-error-summary {
|
||||
border-color: var(--color-danger-border);
|
||||
background: var(--color-danger-surface);
|
||||
}
|
||||
|
||||
.form-error-summary h2 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.form-error-summary p,
|
||||
.form-error-summary ul {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
padding-block-start: 1rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.form-actions--sticky {
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
padding: 0.75rem;
|
||||
background: color-mix(in oklch, var(--color-panel) 94%, transparent);
|
||||
}
|
||||
|
||||
.status-page {
|
||||
max-width: 48rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
|
||||
.status-page__actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.status-page__support {
|
||||
color: var(--color-content-muted);
|
||||
}
|
||||
|
||||
.readiness-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -832,6 +967,24 @@
|
||||
.component-grid--three {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.page-template__heading,
|
||||
.page-template__layout[data-has-aside="true"] {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.page-template__heading .page-header {
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.page-template__actions,
|
||||
.page-template__status {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.form-actions--sticky {
|
||||
margin-inline: calc(var(--spacing-page) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./page-templates.js";
|
||||
@@ -0,0 +1,246 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import { PageHeader } from "../components/page-header.jsx";
|
||||
import { Button } from "../components/ui/button.jsx";
|
||||
|
||||
export type PageHeading = Readonly<{
|
||||
title: string;
|
||||
description?: string;
|
||||
eyebrow?: string;
|
||||
}>;
|
||||
|
||||
export type PageActionDefinition =
|
||||
| Readonly<{
|
||||
kind: "button";
|
||||
label: string;
|
||||
onAction(): void;
|
||||
disabled?: boolean;
|
||||
variant?: "primary" | "secondary" | "danger" | "ghost";
|
||||
}>
|
||||
| Readonly<{
|
||||
kind: "link";
|
||||
label: string;
|
||||
href: string;
|
||||
variant?: "primary" | "secondary" | "danger" | "ghost";
|
||||
}>;
|
||||
|
||||
export type PageTemplateSlots = Readonly<{
|
||||
heading: PageHeading;
|
||||
breadcrumb?: ReactNode;
|
||||
status?: ReactNode;
|
||||
actions?: readonly PageActionDefinition[];
|
||||
notices?: ReactNode;
|
||||
children?: ReactNode;
|
||||
aside?: ReactNode;
|
||||
feedback?: ReactNode;
|
||||
}>;
|
||||
|
||||
export function StandardPage(props: PageTemplateSlots) {
|
||||
return (
|
||||
<article className="ui-page page-template page-template--standard">
|
||||
{props.breadcrumb ? (
|
||||
<nav className="page-template__breadcrumb" aria-label="현재 위치">
|
||||
{props.breadcrumb}
|
||||
</nav>
|
||||
) : null}
|
||||
<div className="page-template__heading">
|
||||
<PageHeader {...props.heading} />
|
||||
{props.status ? (
|
||||
<div className="page-template__status">{props.status}</div>
|
||||
) : null}
|
||||
{props.actions?.length ? (
|
||||
<PageActionBar actions={props.actions} />
|
||||
) : null}
|
||||
</div>
|
||||
{props.notices ? (
|
||||
<div className="page-template__notices">{props.notices}</div>
|
||||
) : null}
|
||||
{props.feedback ? (
|
||||
<div className="page-template__feedback">{props.feedback}</div>
|
||||
) : null}
|
||||
<div
|
||||
className="page-template__layout"
|
||||
data-has-aside={props.aside ? "true" : "false"}
|
||||
>
|
||||
<div className="page-template__content">{props.children}</div>
|
||||
{props.aside ? (
|
||||
<aside className="page-template__aside" aria-label="관련 정보">
|
||||
{props.aside}
|
||||
</aside>
|
||||
) : null}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export function CollectionPage(
|
||||
props: PageTemplateSlots &
|
||||
Readonly<{
|
||||
toolbar?: ReactNode;
|
||||
activeFilters?: ReactNode;
|
||||
resultCount?: ReactNode;
|
||||
bulkActions?: ReactNode;
|
||||
pagination?: ReactNode;
|
||||
}>,
|
||||
) {
|
||||
return (
|
||||
<StandardPage
|
||||
{...props}
|
||||
notices={
|
||||
<>
|
||||
{props.notices}
|
||||
{props.toolbar ? (
|
||||
<section
|
||||
className="collection-page__toolbar"
|
||||
aria-label="검색과 필터"
|
||||
>
|
||||
{props.toolbar}
|
||||
</section>
|
||||
) : null}
|
||||
{props.activeFilters ? (
|
||||
<div className="collection-page__active-filters">
|
||||
{props.activeFilters}
|
||||
</div>
|
||||
) : null}
|
||||
{props.resultCount ? (
|
||||
<div className="collection-page__result-count" role="status">
|
||||
{props.resultCount}
|
||||
</div>
|
||||
) : null}
|
||||
{props.bulkActions ? (
|
||||
<div className="collection-page__bulk-actions">
|
||||
{props.bulkActions}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="collection-page__results">{props.children}</div>
|
||||
{props.pagination ? (
|
||||
<nav className="collection-page__pagination" aria-label="페이지 탐색">
|
||||
{props.pagination}
|
||||
</nav>
|
||||
) : null}
|
||||
</StandardPage>
|
||||
);
|
||||
}
|
||||
|
||||
export function DetailPage(
|
||||
props: PageTemplateSlots &
|
||||
Readonly<{
|
||||
metadata?: ReactNode;
|
||||
destructiveAction?: ReactNode;
|
||||
}>,
|
||||
) {
|
||||
return (
|
||||
<StandardPage {...props}>
|
||||
{props.metadata ? (
|
||||
<section className="detail-page__metadata" aria-label="요약 정보">
|
||||
{props.metadata}
|
||||
</section>
|
||||
) : null}
|
||||
<div className="detail-page__sections">{props.children}</div>
|
||||
{props.destructiveAction ? (
|
||||
<section className="detail-page__danger" aria-label="위험 작업">
|
||||
{props.destructiveAction}
|
||||
</section>
|
||||
) : null}
|
||||
</StandardPage>
|
||||
);
|
||||
}
|
||||
|
||||
export function FormPage(
|
||||
props: PageTemplateSlots &
|
||||
Readonly<{
|
||||
errorSummary?: ReactNode;
|
||||
fields?: ReactNode;
|
||||
formActions?: ReactNode;
|
||||
guard?: ReactNode;
|
||||
}>,
|
||||
) {
|
||||
return (
|
||||
<StandardPage {...props}>
|
||||
{props.errorSummary ? (
|
||||
<div className="form-page__error-summary">{props.errorSummary}</div>
|
||||
) : null}
|
||||
<div className="form-page__fields">{props.fields ?? props.children}</div>
|
||||
{props.formActions ? (
|
||||
<div className="form-page__actions">{props.formActions}</div>
|
||||
) : null}
|
||||
{props.guard}
|
||||
</StandardPage>
|
||||
);
|
||||
}
|
||||
|
||||
export type StatusPageVariant =
|
||||
| "unauthenticated"
|
||||
| "forbidden"
|
||||
| "not-found"
|
||||
| "unavailable"
|
||||
| "offline"
|
||||
| "maintenance"
|
||||
| "unexpected";
|
||||
|
||||
export function StatusPage(
|
||||
props: Readonly<{
|
||||
variant: StatusPageVariant;
|
||||
heading: PageHeading;
|
||||
primaryAction?: PageActionDefinition;
|
||||
secondaryAction?: PageActionDefinition;
|
||||
supportReference?: string;
|
||||
}>,
|
||||
) {
|
||||
return (
|
||||
<section
|
||||
className={`ui-page page-template status-page status-page--${props.variant}`}
|
||||
data-status-variant={props.variant}
|
||||
>
|
||||
<PageHeader {...props.heading} />
|
||||
{props.primaryAction || props.secondaryAction ? (
|
||||
<PageActionBar
|
||||
className="status-page__actions"
|
||||
actions={
|
||||
[props.primaryAction, props.secondaryAction].filter(
|
||||
Boolean,
|
||||
) as PageActionDefinition[]
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
{props.supportReference ? (
|
||||
<p className="status-page__support">
|
||||
지원 참조: <code>{props.supportReference}</code>
|
||||
</p>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function PageActionBar(props: Readonly<{
|
||||
actions: readonly PageActionDefinition[];
|
||||
className?: string;
|
||||
}>) {
|
||||
return (
|
||||
<div className={props.className ?? "page-template__actions"}>
|
||||
{props.actions.map((action) =>
|
||||
action.kind === "link" ? (
|
||||
<a
|
||||
className={`ui-button ui-button--${action.variant ?? "primary"}`}
|
||||
href={action.href}
|
||||
key={`${action.kind}:${action.label}`}
|
||||
>
|
||||
{action.label}
|
||||
</a>
|
||||
) : (
|
||||
<Button
|
||||
disabled={action.disabled}
|
||||
key={`${action.kind}:${action.label}`}
|
||||
onClick={action.onAction}
|
||||
variant={action.variant}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user