@farmzone/fz-template-react 1.0.3 → 1.0.5

package/template/src/pages/sample/SampleFormModal.tsx

@@ -1,77 +1,115 @@
-import { Button, Modal, ModalBody, ModalFooter, ModalIconHeader, SubmitForm } from "@farmzone/fz-react-ui";
-import { z } from "zod";
-
-export const sampleFormSchema = z.object({
-  name: z.string().min(1, "이름을 입력해 주세요."),
-  description: z.string().min(1, "설명을 입력해 주세요."),
-  category: z.string(),
-  active: z.boolean(),
-});
-
-export type SampleFormData = z.infer<typeof sampleFormSchema>;
-
-export const SAMPLE_FORM_DEFAULT_VALUES: SampleFormData = {
-  name: "",
-  description: "",
-  category: "BASIC",
-  active: true,
-};
-
-const CATEGORY_OPTIONS = [
-  { label: "기본", value: "BASIC" },
-  { label: "고급", value: "ADVANCED" },
-];
-
-interface SampleFormModalProps {
-  mode: "create" | "edit";
-  isOpen: boolean;
-  onClose: () => void;
-  defaultValues?: SampleFormData;
-  onSubmit: (data: SampleFormData) => Promise<void>;
-  isPending: boolean;
-  formKey?: string | number;
-}
-
-export function SampleFormModal({
-  mode,
-  isOpen,
-  onClose,
-  defaultValues,
-  onSubmit,
-  isPending,
-  formKey,
-}: SampleFormModalProps) {
-  const formId = mode === "create" ? "sample-create-form" : "sample-edit-form";
-  const title = mode === "create" ? "샘플 등록" : "샘플 수정";
-  const submitLabel = mode === "create" ? "등록" : "수정";
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} contentClassName="max-w-3xl rounded-xl bg-white">
-      <ModalIconHeader type={mode} title={title} onClose={onClose} />
-      <ModalBody className="px-6 py-5">
-        <div className="overflow-hidden rounded-lg border border-gray-200">
-          <SubmitForm
-            key={formKey}
-            formId={formId}
-            schema={sampleFormSchema}
-            defaultValues={defaultValues ?? SAMPLE_FORM_DEFAULT_VALUES}
-            onSubmit={onSubmit}
-          >
-            <SubmitForm.Row formKey="name" label="이름" required maxLength={100} />
-            <SubmitForm.Row formKey="description" formType="textarea" label="설명" required maxLength={500} />
-            <SubmitForm.Row formKey="category" formType="radio" label="카테고리" options={CATEGORY_OPTIONS} />
-            <SubmitForm.Row formKey="active" formType="switch" label="사용 여부" />
-          </SubmitForm>
-        </div>
-      </ModalBody>
-      <ModalFooter className="flex justify-end gap-2 border-t border-gray-200 bg-neutral-50 px-5 py-3">
-        <Button type="submit" form={formId} variant="save" disabled={isPending}>
-          {isPending ? `${submitLabel} 중...` : submitLabel}
-        </Button>
-        <Button variant="outline" onClick={onClose}>
-          취소
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
+import { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import { Button, Modal, ModalBody, ModalFooter, ModalIconHeader, SubmitForm } from "@farmzone/fz-react-ui";
+import { z } from "zod";
+
+import { checkSampleNameAvailable } from "@/app/api/queries";
+
+export const sampleFormSchema = z.object({
+  name: z.string().min(1, "이름을 입력해 주세요."),
+  description: z.string().min(1, "설명을 입력해 주세요."),
+  category: z.string(),
+  priority: z.coerce.number().min(1).max(10),
+  active: z.boolean(),
+});
+
+export type SampleFormData = z.infer<typeof sampleFormSchema>;
+
+export const SAMPLE_FORM_DEFAULT_VALUES: SampleFormData = {
+  name: "",
+  description: "",
+  category: "BASIC",
+  priority: 1,
+  active: true,
+};
+
+const CATEGORY_OPTIONS = [
+  { label: "기본", value: "BASIC" },
+  { label: "고급", value: "ADVANCED" },
+];
+
+const PRIORITY_OPTIONS = Array.from({ length: 10 }, (_, i) => ({
+  label: String(i + 1),
+  value: String(i + 1),
+}));
+
+function SampleNameChecker({ originalName }: { originalName?: string }) {
+  const { watch, setError, clearErrors } = useFormContext();
+  const name = watch("name") as string;
+
+  useEffect(() => {
+    if (!name || name === originalName) {
+      clearErrors("name");
+      return;
+    }
+    const timer = setTimeout(async () => {
+      const available = await checkSampleNameAvailable(name);
+      if (available) {
+        clearErrors("name");
+      } else {
+        setError("name", { type: "manual", message: "이미 사용 중인 샘플명입니다." });
+      }
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [name, originalName, setError, clearErrors]);
+
+  return null;
+}
+
+interface SampleFormModalProps {
+  mode: "create" | "edit";
+  isOpen: boolean;
+  onClose: () => void;
+  defaultValues?: SampleFormData;
+  onSubmit: (data: SampleFormData) => Promise<void>;
+  isPending: boolean;
+  formKey?: string | number;
+  originalName?: string;
+}
+
+export function SampleFormModal({
+  mode,
+  isOpen,
+  onClose,
+  defaultValues,
+  onSubmit,
+  isPending,
+  formKey,
+  originalName,
+}: SampleFormModalProps) {
+  const formId = mode === "create" ? "sample-create-form" : "sample-edit-form";
+  const title = mode === "create" ? "샘플 등록" : "샘플 수정";
+  const submitLabel = mode === "create" ? "등록" : "수정";
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} contentClassName="max-w-3xl rounded-xl bg-white">
+      <ModalIconHeader type={mode} title={title} onClose={onClose} />
+      <ModalBody className="px-6 py-5">
+        <div className="overflow-hidden rounded-lg border border-gray-200">
+          <SubmitForm
+            key={formKey}
+            formId={formId}
+            schema={sampleFormSchema}
+            defaultValues={defaultValues ?? SAMPLE_FORM_DEFAULT_VALUES}
+            onSubmit={onSubmit}
+          >
+            <SampleNameChecker originalName={originalName} />
+            <SubmitForm.Row formKey="name" label="이름" required maxLength={100} />
+            <SubmitForm.Row formKey="description" formType="textarea" label="설명" required maxLength={500} />
+            <SubmitForm.Row formKey="category" formType="radio" label="카테고리" options={CATEGORY_OPTIONS} />
+            <SubmitForm.Row formKey="priority" formType="select" label="우선순위" options={PRIORITY_OPTIONS} />
+            <SubmitForm.Row formKey="active" formType="switch" label="사용 여부" />
+          </SubmitForm>
+        </div>
+      </ModalBody>
+      <ModalFooter className="flex justify-end gap-2 border-t border-gray-200 bg-neutral-50 px-5 py-3">
+        <Button type="submit" form={formId} variant="save" disabled={isPending}>
+          {isPending ? `${submitLabel} 중...` : submitLabel}
+        </Button>
+        <Button variant="outline" onClick={onClose}>
+          취소
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}