@farmzone/fz-template-react 1.0.3 → 1.0.5

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

@@ -1,269 +1,278 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { Badge, Button, confirmModal, PageFilter, Select, Table } from "@farmzone/fz-react-ui";
-
-import { 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 [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);
-  };
-
-  const handleSubmit = async (data: SampleFormData) => {
-    if (modalMode === "create") {
-      await postSample({
-        name: data.name,
-        description: data.description,
-        category: data.category as "BASIC" | "ADVANCED",
-        active: data.active,
-      });
-    } else if (modalMode === "edit" && selectedSample) {
-      await putSample({
-        id: selectedSample.id,
-        data: {
-          name: data.name,
-          description: data.description,
-          category: data.category as "BASIC" | "ADVANCED",
-          active: data.active,
-        },
-      });
-    }
-    closeModal();
-  };
-
-  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 ? "O" : "X"}
-          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}
-        formKey={selectedSample?.id}
-      />
-    </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 [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);
+  };
+
+  const handleSubmit = async (data: SampleFormData) => {
+    if (modalMode === "create") {
+      const available = await checkSampleNameAvailable(data.name);
+      if (!available) return;
+      await postSample({
+        name: data.name,
+        description: data.description,
+        category: data.category as "BASIC" | "ADVANCED",
+        priority: data.priority,
+        active: data.active,
+      });
+    } else if (modalMode === "edit" && selectedSample) {
+      if (data.name !== selectedSample.name) {
+        const available = await checkSampleNameAvailable(data.name);
+        if (!available) 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,
+        },
+      });
+    }
+    closeModal();
+  };
+
+  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 ? "O" : "X"}
+          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}
+        formKey={selectedSample?.id}
+        originalName={selectedSample?.name}
+      />
+    </div>
+  );
+}