@farmzone/fz-template-react 1.0.3 → 1.0.5

package/template/src/pages/post/PostFormModal.tsx

@@ -1,128 +1,128 @@
-import {
-  Button,
-  FileUploader,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalIconHeader,
-  SubmitForm,
-} from "@farmzone/fz-react-ui";
-import { Paperclip, X } from "lucide-react";
-import { z } from "zod";
-
-import type { FileResponse } from "@/types";
-
-export const postFormSchema = z.object({
-  title: z.string().min(1, "제목을 입력해 주세요."),
-  content: z.string().min(1, "내용을 입력해 주세요."),
-  noticeCategory: z.string(),
-  visible: z.boolean(),
-});
-
-export type PostFormData = z.infer<typeof postFormSchema>;
-
-export const POST_FORM_DEFAULT_VALUES: PostFormData = {
-  title: "",
-  content: "",
-  noticeCategory: "NOTICE",
-  visible: true,
-};
-
-const NOTICE_CATEGORY_OPTIONS = [{ label: "공지", value: "NOTICE" }];
-
-interface PostFormModalProps {
-  mode: "create" | "edit";
-  isOpen: boolean;
-  onClose: () => void;
-  defaultValues?: PostFormData;
-  onSubmit: (data: PostFormData) => Promise<void>;
-  isPending: boolean;
-  pendingFiles: Array<File>;
-  onPendingFilesChange: (files: Array<File>) => void;
-  existingFiles?: Array<FileResponse>;
-  onDeleteExistingFile?: (id: number) => void;
-  formKey?: string | number;
-}
-
-export function PostFormModal({
-  mode,
-  isOpen,
-  onClose,
-  defaultValues,
-  onSubmit,
-  isPending,
-  pendingFiles,
-  onPendingFilesChange,
-  existingFiles,
-  onDeleteExistingFile,
-  formKey,
-}: PostFormModalProps) {
-  const formId = mode === "create" ? "post-create-form" : "post-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={postFormSchema}
-              defaultValues={defaultValues ?? POST_FORM_DEFAULT_VALUES}
-              onSubmit={onSubmit}
-            >
-              <SubmitForm.Row formKey="title" label="제목" required maxLength={200} />
-              <SubmitForm.Row formKey="content" formType="textarea" label="내용" required maxLength={2000} />
-              <SubmitForm.Row
-                formKey="noticeCategory"
-                formType="radio"
-                label="카테고리"
-                options={NOTICE_CATEGORY_OPTIONS}
-              />
-              <SubmitForm.Row formKey="visible" 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>
-  );
-}
+import {
+  Button,
+  FileUploader,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalIconHeader,
+  SubmitForm,
+} from "@farmzone/fz-react-ui";
+import { Paperclip, X } from "lucide-react";
+import { z } from "zod";
+
+import type { FileResponse } from "@/types";
+
+export const postFormSchema = z.object({
+  title: z.string().min(1, "제목을 입력해 주세요."),
+  content: z.string().min(1, "내용을 입력해 주세요."),
+  noticeCategory: z.string(),
+  visible: z.boolean(),
+});
+
+export type PostFormData = z.infer<typeof postFormSchema>;
+
+export const POST_FORM_DEFAULT_VALUES: PostFormData = {
+  title: "",
+  content: "",
+  noticeCategory: "NOTICE",
+  visible: true,
+};
+
+const NOTICE_CATEGORY_OPTIONS = [{ label: "공지", value: "NOTICE" }];
+
+interface PostFormModalProps {
+  mode: "create" | "edit";
+  isOpen: boolean;
+  onClose: () => void;
+  defaultValues?: PostFormData;
+  onSubmit: (data: PostFormData) => Promise<void>;
+  isPending: boolean;
+  pendingFiles: Array<File>;
+  onPendingFilesChange: (files: Array<File>) => void;
+  existingFiles?: Array<FileResponse>;
+  onDeleteExistingFile?: (id: number) => void;
+  formKey?: string | number;
+}
+
+export function PostFormModal({
+  mode,
+  isOpen,
+  onClose,
+  defaultValues,
+  onSubmit,
+  isPending,
+  pendingFiles,
+  onPendingFilesChange,
+  existingFiles,
+  onDeleteExistingFile,
+  formKey,
+}: PostFormModalProps) {
+  const formId = mode === "create" ? "post-create-form" : "post-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={postFormSchema}
+              defaultValues={defaultValues ?? POST_FORM_DEFAULT_VALUES}
+              onSubmit={onSubmit}
+            >
+              <SubmitForm.Row formKey="title" label="제목" required maxLength={200} />
+              <SubmitForm.Row formKey="content" formType="textarea" label="내용" required maxLength={2000} />
+              <SubmitForm.Row
+                formKey="noticeCategory"
+                formType="radio"
+                label="카테고리"
+                options={NOTICE_CATEGORY_OPTIONS}
+              />
+              <SubmitForm.Row formKey="visible" 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>
+  );
+}