@farmzone/fz-template-react 1.0.5 → 1.0.7

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

@@ -1,115 +1,188 @@
-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>
-  );
-}
+import { useEffect, useRef } from "react";
+import { useFormContext } from "react-hook-form";
+import {
+  Button,
+  FileUploader,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalIconHeader,
+  SubmitForm,
+} from "@farmzone/fz-react-ui";
+import { Paperclip, X } from "lucide-react";
+import { z } from "zod";
+
+import { checkSampleNameAvailable } from "@/app/api/queries";
+import type { FileResponse } from "@/types";
+
+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, formState } = useFormContext();
+  const name = watch("name") as string;
+  const isDuplicateRef = useRef(false);
+
+  useEffect(() => {
+    if (!name || name === originalName) {
+      isDuplicateRef.current = false;
+      clearErrors("name");
+      return;
+    }
+    const timer = setTimeout(async () => {
+      const isDuplicate = await checkSampleNameAvailable(name);
+      isDuplicateRef.current = isDuplicate;
+      if (isDuplicate) {
+        setError("name", { type: "manual", message: "이미 사용 중인 샘플명입니다." });
+      } else {
+        clearErrors("name");
+      }
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [name, originalName, setError, clearErrors]);
+
+  useEffect(() => {
+    if (isDuplicateRef.current && !formState.errors.name) {
+      setError("name", { type: "manual", message: "이미 사용 중인 샘플명입니다." });
+    }
+  }, [formState.errors.name, setError]);
+
+  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;
+  pendingFiles: Array<File>;
+  onPendingFilesChange: (files: Array<File>) => void;
+  existingFiles?: Array<FileResponse>;
+  onDeleteExistingFile?: (id: number) => void;
+}
+
+export function SampleFormModal({
+  mode,
+  isOpen,
+  onClose,
+  defaultValues,
+  onSubmit,
+  isPending,
+  formKey,
+  originalName,
+  pendingFiles,
+  onPendingFilesChange,
+  existingFiles,
+  onDeleteExistingFile,
+}: 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="space-y-4">
+          <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>
+
+          <div>
+            <p className="mb-1.5 text-sm font-medium text-gray-700">첨부파일</p>
+            {existingFiles && existingFiles.length > 0 && (
+              <ul className="mb-3 space-y-1.5">
+                {existingFiles.map((file) => (
+                  <li
+                    key={file.id}
+                    className="flex items-center justify-between rounded-md border border-gray-200 bg-gray-50 px-3 py-2"
+                  >
+                    <span className="flex items-center gap-1.5 truncate text-sm text-gray-700">
+                      <Paperclip size={13} className="shrink-0 text-gray-400" />
+                      {file.fileName}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => onDeleteExistingFile?.(file.id)}
+                      className="ml-2 shrink-0 rounded p-0.5 text-gray-400 hover:bg-red-50 hover:text-red-500"
+                      aria-label="파일 삭제"
+                    >
+                      <X size={14} />
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+            <FileUploader files={pendingFiles} onChange={onPendingFilesChange} multiple />
+          </div>
+        </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>
+  );
+}