@farmzone/fz-template-react 1.0.6 → 1.0.8

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

@@ -1,298 +1,298 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { Badge, Button, confirmModal, PageFilter, Select, Table } from "@farmzone/fz-react-ui";
-
-import {
-  checkSampleNameAvailable,
-  useDeleteSamples,
-  useGetSamples,
-  usePostSample,
-  usePutSample,
-} from "@/app/api/queries";
-import type { Sample } from "@/types";
-import ListContents from "@/app/layout/ListContents";
-import ListHeader from "@/app/layout/ListHeader";
-import { formatDateTime } from "@/shared/utils/format";
-import { SampleFormModal, SAMPLE_FORM_DEFAULT_VALUES } from "./SampleFormModal";
-import type { SampleFormData } from "./SampleFormModal";
-
-const PAGE_SIZE_OPTIONS = [
-  { label: "15", value: "15" },
-  { label: "30", value: "30" },
-  { label: "60", value: "60" },
-  { label: "100", value: "100" },
-];
-
-interface SampleFilterParams {
-  name: string;
-  category: string;
-}
-
-const FILTER_RESET: SampleFilterParams = { name: "", category: "" };
-
-const CATEGORY_FILTER_OPTIONS = [
-  { label: "기본", value: "BASIC" },
-  { label: "고급", value: "PREMIUM" },
-];
-
-export default function SamplePage() {
-  const navigate = useNavigate();
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(15);
-  const [filterParams, setFilterParams] = useState<SampleFilterParams>(FILTER_RESET);
-  const [submittedFilter, setSubmittedFilter] = useState<SampleFilterParams>(FILTER_RESET);
-
-  const [modalMode, setModalMode] = useState<"create" | "edit" | null>(null);
-  const [selectedSample, setSelectedSample] = useState<Sample | null>(null);
-  const [editDefaultValues, setEditDefaultValues] = useState<SampleFormData | undefined>(undefined);
-  const [selectedKeys, setSelectedKeys] = useState<Array<string | number>>([]);
-  const [pendingFiles, setPendingFiles] = useState<Array<File>>([]);
-  const [isUploading, setIsUploading] = useState(false);
-  const [sortOption, setSortOption] = useState<{ sortKey: string; sortOrder: "asc" | "desc" } | undefined>(
-    undefined,
-  );
-
-  const { data, isLoading } = useGetSamples({
-    page,
-    size: pageSize,
-    name: submittedFilter.name || undefined,
-    category: submittedFilter.category || undefined,
-    sortKey: sortOption?.sortKey,
-    sortOrder: sortOption?.sortOrder,
-  });
-
-  const { mutateAsync: postSample, isPending: isCreating } = usePostSample();
-  const { mutateAsync: putSample, isPending: isUpdating } = usePutSample();
-  const { mutateAsync: deleteSamples } = useDeleteSamples();
-
-  const totalElements = data?.totalElements ?? 0;
-  const totalPages = data?.totalPages ?? 0;
-  const content = data?.content ?? [];
-
-  const openCreate = () => {
-    setEditDefaultValues(undefined);
-    setSelectedSample(null);
-    setModalMode("create");
-  };
-
-  const closeModal = () => {
-    setModalMode(null);
-    setSelectedSample(null);
-    setEditDefaultValues(undefined);
-    setPendingFiles([]);
-  };
-
-  const handleSubmit = async (data: SampleFormData) => {
-    setIsUploading(true);
-    try {
-      if (modalMode === "create") {
-        const isDuplicate = await checkSampleNameAvailable(data.name);
-        if (isDuplicate) return;
-        await postSample({
-          data: {
-            name: data.name,
-            description: data.description,
-            category: data.category as "BASIC" | "ADVANCED",
-            priority: data.priority,
-            active: data.active,
-          },
-          files: pendingFiles.length > 0 ? pendingFiles : undefined,
-        });
-      } else if (modalMode === "edit" && selectedSample) {
-        if (data.name !== selectedSample.name) {
-          const isDuplicate = await checkSampleNameAvailable(data.name);
-          if (isDuplicate) return;
-        }
-        await putSample({
-          id: selectedSample.id,
-          data: {
-            name: data.name,
-            description: data.description,
-            category: data.category as "BASIC" | "ADVANCED",
-            priority: data.priority,
-            active: data.active,
-          },
-          files: pendingFiles.length > 0 ? pendingFiles : undefined,
-        });
-      }
-      closeModal();
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const columns = [
-    {
-      key: "index",
-      title: "No",
-      width: "30px",
-      align: "center" as const,
-      render: (_: unknown, __: unknown, index: number) => totalElements - page * pageSize - index,
-    },
-    {
-      key: "name",
-      title: "이름",
-      sortable: true,
-      sort: sortOption?.sortKey === "name" ? sortOption.sortOrder : null,
-    },
-    { key: "description", title: "설명", minWidth: 200 },
-    {
-      key: "category",
-      title: "카테고리",
-      align: "center" as const,
-      width: "40px",
-      render: (_: unknown, record: Sample) => (
-        <Badge
-          text={record.category === "BASIC" ? "기본" : "고급"}
-          className={`scale-90 ${record.category === "BASIC" ? "bg-blue-100 text-blue-700 border-blue-100" : "bg-purple-100 text-purple-700 border-purple-100"}`}
-        />
-      ),
-    },
-    {
-      key: "priority",
-      title: "우선순위",
-      align: "center" as const,
-      width: "30px",
-      render: (_: unknown, record: Sample) => (
-        <span className="text-sm font-medium text-gray-700">{record.priority}</span>
-      ),
-    },
-    {
-      key: "active",
-      title: "상태",
-      align: "center" as const,
-      width: "30px",
-      render: (_: unknown, record: Sample) => (
-        <Badge
-          text={record.active ? "활성" : "비활성"}
-          className={`scale-90 ${record.active ? "bg-green-100 text-green-700 border-green-100" : "bg-red-100 text-red-500 border-red-100"}`}
-        />
-      ),
-    },
-    {
-      key: "createdAt",
-      title: "등록일시",
-      align: "center" as const,
-      width: "80px",
-      render: (_: unknown, record: Sample) => formatDateTime(record.createdAt),
-    },
-  ];
-
-  return (
-    <div className="p-6">
-      <ListHeader
-        title="샘플 관리"
-        rightArea={
-          <div className="flex items-center gap-2">
-            <Button variant="save" onClick={openCreate}>
-              등록
-            </Button>
-            <Button
-              variant="delete"
-              disabled={selectedKeys.length === 0}
-              onClick={() => {
-                confirmModal({
-                  content: `선택한 ${selectedKeys.length}개 항목을 삭제하시겠습니까?`,
-                  onOk: async () => {
-                    await deleteSamples(selectedKeys.map(Number));
-                    setSelectedKeys([]);
-                  },
-                  onCancel: () => {},
-                  className: "max-w-100",
-                });
-              }}
-            >
-              삭제
-            </Button>
-          </div>
-        }
-      />
-      <ListContents>
-        <PageFilter
-          values={filterParams}
-          onChange={(updates: Partial<SampleFilterParams>) =>
-            setFilterParams((prev) => ({ ...prev, ...updates }))
-          }
-          onSubmit={() => {
-            setPage(0);
-            setSelectedKeys([]);
-            setSubmittedFilter(filterParams);
-          }}
-          onReset={() => {
-            setFilterParams(FILTER_RESET);
-            setSubmittedFilter(FILTER_RESET);
-            setPage(0);
-            setPageSize(15);
-            setSelectedKeys([]);
-          }}
-          rows={[
-            {
-              options: [
-                { type: "select", key: "category", label: "카테고리", options: CATEGORY_FILTER_OPTIONS },
-                { type: "input", key: "name", label: "이름", placeholder: "이름 검색" },
-              ],
-            },
-          ]}
-        />
-        <Table
-          rowKey="id"
-          columns={columns}
-          data={content}
-          isLoading={isLoading}
-          sortOption={sortOption}
-          onSortChange={(sortKey: string, sortOrder: "asc" | "desc") => {
-            setSortOption({ sortKey, sortOrder });
-            setPage(0);
-          }}
-          onRowClick={(record: Sample) => navigate(`/sample/${record.id}`)}
-          paginationInfo={{
-            page,
-            totalPages,
-            onPageChange: (newPage: number) => {
-              setPage(newPage);
-              setSelectedKeys([]);
-            },
-          }}
-          checkboxInfo={{
-            selectedKeys,
-            onSelectionChange: setSelectedKeys,
-          }}
-          renderFooter={{
-            renderLeft: (
-              <p className="text-sm text-gray-600">
-                총 <span className="font-semibold text-gray-900">{totalElements}</span>건
-              </p>
-            ),
-            renderRight: (
-              <div className="flex items-center gap-2.5 pr-5">
-                <p className="text-sm font-medium text-gray-700">페이지 개수</p>
-                <Select
-                  value={String(pageSize)}
-                  options={PAGE_SIZE_OPTIONS}
-                  onChange={(val: string) => {
-                    setPageSize(Number(val));
-                    setPage(0);
-                    setSelectedKeys([]);
-                  }}
-                />
-              </div>
-            ),
-          }}
-        />
-      </ListContents>
-
-      <SampleFormModal
-        mode={modalMode ?? "create"}
-        isOpen={modalMode !== null}
-        onClose={closeModal}
-        defaultValues={editDefaultValues ?? SAMPLE_FORM_DEFAULT_VALUES}
-        onSubmit={handleSubmit}
-        isPending={isCreating || isUpdating || isUploading}
-        formKey={selectedSample?.id}
-        originalName={selectedSample?.name}
-        pendingFiles={pendingFiles}
-        onPendingFilesChange={setPendingFiles}
-      />
-    </div>
-  );
-}
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { Badge, Button, confirmModal, PageFilter, Select, Table } from "@farmzone/fz-react-ui";
+
+import {
+  checkSampleNameAvailable,
+  useDeleteSamples,
+  useGetSamples,
+  usePostSample,
+  usePutSample,
+} from "@/app/api/queries";
+import type { Sample } from "@/types";
+import ListContents from "@/app/layout/ListContents";
+import ListHeader from "@/app/layout/ListHeader";
+import { formatDateTime } from "@/shared/utils/format";
+import { SampleFormModal, SAMPLE_FORM_DEFAULT_VALUES } from "./SampleFormModal";
+import type { SampleFormData } from "./SampleFormModal";
+
+const PAGE_SIZE_OPTIONS = [
+  { label: "15", value: "15" },
+  { label: "30", value: "30" },
+  { label: "60", value: "60" },
+  { label: "100", value: "100" },
+];
+
+interface SampleFilterParams {
+  name: string;
+  category: string;
+}
+
+const FILTER_RESET: SampleFilterParams = { name: "", category: "" };
+
+const CATEGORY_FILTER_OPTIONS = [
+  { label: "기본", value: "BASIC" },
+  { label: "고급", value: "PREMIUM" },
+];
+
+export default function SamplePage() {
+  const navigate = useNavigate();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(15);
+  const [filterParams, setFilterParams] = useState<SampleFilterParams>(FILTER_RESET);
+  const [submittedFilter, setSubmittedFilter] = useState<SampleFilterParams>(FILTER_RESET);
+
+  const [modalMode, setModalMode] = useState<"create" | "edit" | null>(null);
+  const [selectedSample, setSelectedSample] = useState<Sample | null>(null);
+  const [editDefaultValues, setEditDefaultValues] = useState<SampleFormData | undefined>(undefined);
+  const [selectedKeys, setSelectedKeys] = useState<Array<string | number>>([]);
+  const [pendingFiles, setPendingFiles] = useState<Array<File>>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [sortOption, setSortOption] = useState<{ sortKey: string; sortOrder: "asc" | "desc" } | undefined>(
+    undefined,
+  );
+
+  const { data, isLoading } = useGetSamples({
+    page,
+    size: pageSize,
+    name: submittedFilter.name || undefined,
+    category: submittedFilter.category || undefined,
+    sortKey: sortOption?.sortKey,
+    sortOrder: sortOption?.sortOrder,
+  });
+
+  const { mutateAsync: postSample, isPending: isCreating } = usePostSample();
+  const { mutateAsync: putSample, isPending: isUpdating } = usePutSample();
+  const { mutateAsync: deleteSamples } = useDeleteSamples();
+
+  const totalElements = data?.totalElements ?? 0;
+  const totalPages = data?.totalPages ?? 0;
+  const content = data?.content ?? [];
+
+  const openCreate = () => {
+    setEditDefaultValues(undefined);
+    setSelectedSample(null);
+    setModalMode("create");
+  };
+
+  const closeModal = () => {
+    setModalMode(null);
+    setSelectedSample(null);
+    setEditDefaultValues(undefined);
+    setPendingFiles([]);
+  };
+
+  const handleSubmit = async (data: SampleFormData) => {
+    setIsUploading(true);
+    try {
+      if (modalMode === "create") {
+        const isDuplicate = await checkSampleNameAvailable(data.name);
+        if (isDuplicate) return;
+        await postSample({
+          data: {
+            name: data.name,
+            description: data.description,
+            category: data.category as "BASIC" | "ADVANCED",
+            priority: data.priority,
+            active: data.active,
+          },
+          files: pendingFiles.length > 0 ? pendingFiles : undefined,
+        });
+      } else if (modalMode === "edit" && selectedSample) {
+        if (data.name !== selectedSample.name) {
+          const isDuplicate = await checkSampleNameAvailable(data.name);
+          if (isDuplicate) return;
+        }
+        await putSample({
+          id: selectedSample.id,
+          data: {
+            name: data.name,
+            description: data.description,
+            category: data.category as "BASIC" | "ADVANCED",
+            priority: data.priority,
+            active: data.active,
+          },
+          files: pendingFiles.length > 0 ? pendingFiles : undefined,
+        });
+      }
+      closeModal();
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const columns = [
+    {
+      key: "index",
+      title: "No",
+      width: "30px",
+      align: "center" as const,
+      render: (_: unknown, __: unknown, index: number) => totalElements - page * pageSize - index,
+    },
+    {
+      key: "name",
+      title: "이름",
+      sortable: true,
+      sort: sortOption?.sortKey === "name" ? sortOption.sortOrder : null,
+    },
+    { key: "description", title: "설명", minWidth: 200 },
+    {
+      key: "category",
+      title: "카테고리",
+      align: "center" as const,
+      width: "40px",
+      render: (_: unknown, record: Sample) => (
+        <Badge
+          text={record.category === "BASIC" ? "기본" : "고급"}
+          className={`scale-90 ${record.category === "BASIC" ? "bg-blue-100 text-blue-700 border-blue-100" : "bg-purple-100 text-purple-700 border-purple-100"}`}
+        />
+      ),
+    },
+    {
+      key: "priority",
+      title: "우선순위",
+      align: "center" as const,
+      width: "30px",
+      render: (_: unknown, record: Sample) => (
+        <span className="text-sm font-medium text-gray-700">{record.priority}</span>
+      ),
+    },
+    {
+      key: "active",
+      title: "상태",
+      align: "center" as const,
+      width: "30px",
+      render: (_: unknown, record: Sample) => (
+        <Badge
+          text={record.active ? "활성" : "비활성"}
+          className={`scale-90 ${record.active ? "bg-green-100 text-green-700 border-green-100" : "bg-red-100 text-red-500 border-red-100"}`}
+        />
+      ),
+    },
+    {
+      key: "createdAt",
+      title: "등록일시",
+      align: "center" as const,
+      width: "80px",
+      render: (_: unknown, record: Sample) => formatDateTime(record.createdAt),
+    },
+  ];
+
+  return (
+    <div className="p-6">
+      <ListHeader
+        title="샘플 관리"
+        rightArea={
+          <div className="flex items-center gap-2">
+            <Button variant="save" onClick={openCreate}>
+              등록
+            </Button>
+            <Button
+              variant="delete"
+              disabled={selectedKeys.length === 0}
+              onClick={() => {
+                confirmModal({
+                  content: `선택한 ${selectedKeys.length}개 항목을 삭제하시겠습니까?`,
+                  onOk: async () => {
+                    await deleteSamples(selectedKeys.map(Number));
+                    setSelectedKeys([]);
+                  },
+                  onCancel: () => {},
+                  className: "max-w-100",
+                });
+              }}
+            >
+              삭제
+            </Button>
+          </div>
+        }
+      />
+      <ListContents>
+        <PageFilter
+          values={filterParams}
+          onChange={(updates: Partial<SampleFilterParams>) =>
+            setFilterParams((prev) => ({ ...prev, ...updates }))
+          }
+          onSubmit={() => {
+            setPage(0);
+            setSelectedKeys([]);
+            setSubmittedFilter(filterParams);
+          }}
+          onReset={() => {
+            setFilterParams(FILTER_RESET);
+            setSubmittedFilter(FILTER_RESET);
+            setPage(0);
+            setPageSize(15);
+            setSelectedKeys([]);
+          }}
+          rows={[
+            {
+              options: [
+                { type: "select", key: "category", label: "카테고리", options: CATEGORY_FILTER_OPTIONS },
+                { type: "input", key: "name", label: "이름", placeholder: "이름 검색" },
+              ],
+            },
+          ]}
+        />
+        <Table
+          rowKey="id"
+          columns={columns}
+          data={content}
+          isLoading={isLoading}
+          sortOption={sortOption}
+          onSortChange={(sortKey: string, sortOrder: "asc" | "desc") => {
+            setSortOption({ sortKey, sortOrder });
+            setPage(0);
+          }}
+          onRowClick={(record: Sample) => navigate(`/sample/${record.id}`)}
+          paginationInfo={{
+            page,
+            totalPages,
+            onPageChange: (newPage: number) => {
+              setPage(newPage);
+              setSelectedKeys([]);
+            },
+          }}
+          checkboxInfo={{
+            selectedKeys,
+            onSelectionChange: setSelectedKeys,
+          }}
+          renderFooter={{
+            renderLeft: (
+              <p className="text-sm text-gray-600">
+                총 <span className="font-semibold text-gray-900">{totalElements}</span>건
+              </p>
+            ),
+            renderRight: (
+              <div className="flex items-center gap-2.5 pr-5">
+                <p className="text-sm font-medium text-gray-700">페이지 개수</p>
+                <Select
+                  value={String(pageSize)}
+                  options={PAGE_SIZE_OPTIONS}
+                  onChange={(val: string) => {
+                    setPageSize(Number(val));
+                    setPage(0);
+                    setSelectedKeys([]);
+                  }}
+                />
+              </div>
+            ),
+          }}
+        />
+      </ListContents>
+
+      <SampleFormModal
+        mode={modalMode ?? "create"}
+        isOpen={modalMode !== null}
+        onClose={closeModal}
+        defaultValues={editDefaultValues ?? SAMPLE_FORM_DEFAULT_VALUES}
+        onSubmit={handleSubmit}
+        isPending={isCreating || isUpdating || isUploading}
+        formKey={selectedSample?.id}
+        originalName={selectedSample?.name}
+        pendingFiles={pendingFiles}
+        onPendingFilesChange={setPendingFiles}
+      />
+    </div>
+  );
+}