feat: add form and page platform

2026-07-26 15:22:52 +09:00
parent fdcf0de5bf
commit b327d7370b
54 changed files with 2036 additions and 122 deletions
@@ -0,0 +1,131 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Button } from "../../../presentation/components/ui/button.jsx";
+import {
+  DirtyNavigationDialog,
+  ErrorSummary,
+  Form,
+  FormActions,
+  FormField,
+  useAppForm,
+  useDirtyNavigationGuard,
+} from "../../../presentation/forms/index.js";
+import { FormPage } from "../../../presentation/templates/index.js";
+import {
+  REFERENCE_FORM_DEFAULTS,
+  referenceResourceFormSchema,
+  toCreateReferenceCommand,
+  type ReferenceResourceFormValues,
+} from "./reference-resource-form.js";
+import { useReferenceCreate } from "./use-reference-feature.js";
+
+const FIELD_LABELS = Object.freeze({
+  name: "새 항목 이름",
+  note: "설명",
+}) satisfies Record<keyof ReferenceResourceFormValues, string>;
+
+export default function ReferenceResourceFormPage() {
+  const navigate = useNavigate();
+  const mutation = useReferenceCreate();
+  const submit = useCallback(
+    (command: ReturnType<typeof toCreateReferenceCommand>) =>
+      mutation.submit(command),
+    [mutation],
+  );
+  const form = useAppForm({
+    schema: referenceResourceFormSchema,
+    defaultValues: REFERENCE_FORM_DEFAULTS,
+    allowedServerFields: ["name", "note"],
+    mapToCommand: toCreateReferenceCommand,
+    submit,
+  });
+  const guard = useDirtyNavigationGuard(form.dirty && !form.pending);
+
+  return (
+    <Form
+      id={form.formId}
+      pending={form.pending}
+      onSubmit={(event) => void form.submitForm(event)}
+    >
+      <FormPage
+        breadcrumb={
+          <button
+            className="ui-button ui-button--ghost"
+            type="button"
+            onClick={() => navigate("/examples/reference-resources")}
+          >
+            목록으로 돌아가기
+          </button>
+        }
+        heading={{
+          eyebrow: "FormPage",
+          title: "Reference resource 만들기",
+          description:
+            "presentation schema, command mapper, 422/conflict와 dirty navigation 정책을 실행합니다.",
+        }}
+        errorSummary={
+          <ErrorSummary
+            fieldErrors={form.fieldErrors}
+            formErrors={form.formErrors}
+            fieldLabels={FIELD_LABELS}
+            fieldId={form.fieldId}
+            onFocusField={form.focusField}
+          />
+        }
+        fields={
+          <>
+            <FormField
+              {...form.field("name")}
+              label={FIELD_LABELS.name}
+              description="앞뒤 공백은 command mapper 전에 제거됩니다."
+              autoComplete="off"
+              required
+            />
+            <FormField
+              {...form.field("note")}
+              label={FIELD_LABELS.note}
+              description="선택 입력이며 비어 있으면 command에 포함되지 않습니다."
+              autoComplete="off"
+            />
+          </>
+        }
+        formActions={
+          <FormActions sticky>
+            <Button
+              variant="secondary"
+              onClick={() => navigate("/examples/reference-resources")}
+              disabled={form.pending}
+            >
+              취소
+            </Button>
+            <Button type="submit" disabled={form.pending}>
+              {form.pending ? "저장 중…" : "저장"}
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => form.reset()}
+              disabled={!form.dirty || form.pending}
+            >
+              초기화
+            </Button>
+          </FormActions>
+        }
+        feedback={
+          form.result === "success" ? (
+            <p role="status">저장했습니다.</p>
+          ) : form.result === "conflict" ? (
+            <p role="status">충돌을 해결한 뒤 다시 제출할 수 있습니다.</p>
+          ) : null
+        }
+        aside={
+          <p>
+            form value는 URL, storage, telemetry에 저장되지 않고 submit 시에만
+            application command로 변환됩니다.
+          </p>
+        }
+        guard={<DirtyNavigationDialog guard={guard} />}
+      />
+    </Form>
+  );
+}