@farmzone/fz-template-react 1.0.3 → 1.0.4

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

@@ -1,267 +1,267 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { useQueryClient } from "@tanstack/react-query";
-import { Badge, Button, confirmModal, PageFilter, Select, Table, toast } from "@farmzone/fz-react-ui";
-
-import { useGetPosts, useDeletePosts } from "@/app/api/queries";
-import type { Post } from "@/types";
-import { useUserStore } from "@/app/store";
-import { apiFormDataInstance } from "@/app/api/api";
-import { POST_QUERY_KEY } from "@/app/api/queryKey";
-import ListContents from "@/app/layout/ListContents";
-import ListHeader from "@/app/layout/ListHeader";
-import { COMMON_MESSAGES } from "@/shared/config/text";
-import { formatDateTime } from "@/shared/utils/format";
-import { PostFormModal, POST_FORM_DEFAULT_VALUES } from "./PostFormModal";
-import type { PostFormData } from "./PostFormModal";
-
-const PAGE_SIZE_OPTIONS = [
-  { label: "15", value: "15" },
-  { label: "30", value: "30" },
-  { label: "60", value: "60" },
-  { label: "100", value: "100" },
-];
-
-interface PostFilterParams {
-  title: string;
-  noticeCategory: string;
-}
-
-const EMPTY_FILTER: PostFilterParams = { title: "", noticeCategory: "" };
-
-const FILTER_CATEGORY_OPTIONS = [
-  { label: "일반", value: "BASIC" },
-  { label: "공지", value: "NOTICE" },
-];
-
-export default function PostPage() {
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-  const currentUser = useUserStore((s) => s.user);
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(15);
-  const [filterParams, setFilterParams] = useState<PostFilterParams>(EMPTY_FILTER);
-  const [submittedFilter, setSubmittedFilter] = useState<PostFilterParams>(EMPTY_FILTER);
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  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 } = useGetPosts({
-    page,
-    size: pageSize,
-    title: submittedFilter.title || undefined,
-    noticeCategory: submittedFilter.noticeCategory || undefined,
-    sortKey: sortOption?.sortKey,
-    sortOrder: sortOption?.sortOrder,
-  });
-
-  const columns = [
-    {
-      key: "id",
-      title: "No",
-      width: "30px",
-      align: "center" as const,
-      render: (_: unknown, record: Post) => record.id,
-    },
-    {
-      key: "title",
-      title: "제목",
-      minWidth: 200,
-      sortable: true,
-      sort: (sortOption?.sortKey === "title" ? sortOption.sortOrder : null) as "asc" | "desc" | null,
-    },
-    {
-      key: "visible",
-      title: "노출 여부",
-      align: "center" as const,
-      width: "40px",
-      render: (_: unknown, record: Post) => (
-        <Badge
-          text={record.visible ? "O" : "X"}
-          className={`scale-90 ${record.visible ? "bg-green-100 text-green-700 border-green-100" : "bg-red-100 text-red-500 border-red-100"}`}
-        />
-      ),
-    },
-    {
-      key: "viewCount",
-      title: "조회수",
-      align: "center" as const,
-      width: "40px",
-    },
-    {
-      key: "createdAt",
-      title: "등록일시",
-      align: "center" as const,
-      width: "80px",
-      render: (_: unknown, record: Post) => formatDateTime(record.createdAt),
-    },
-    {
-      key: "updatedAt",
-      title: "수정일시",
-      align: "center" as const,
-      width: "80px",
-      render: (_: unknown, record: Post) => formatDateTime(record.updatedAt),
-    },
-  ];
-
-  const [selectedKeys, setSelectedKeys] = useState<Array<string | number>>([]);
-
-  const { mutateAsync: deletePosts } = useDeletePosts();
-
-  const totalElements = data?.totalElements ?? 0;
-  const totalPages = data?.totalPages ?? 0;
-  const content = data?.content ?? [];
-
-  const closeCreateModal = () => {
-    setIsCreateOpen(false);
-    setPendingFiles([]);
-  };
-
-  const handleCreateFormSubmit = async (data: PostFormData) => {
-    setIsUploading(true);
-    try {
-      const request = {
-        title: data.title,
-        content: data.content,
-        noticeCategory: data.noticeCategory,
-        visible: data.visible,
-        writer: currentUser?.userId ?? "",
-      };
-      const formData = new FormData();
-      formData.append("request", JSON.stringify(request));
-      pendingFiles.forEach((f) => formData.append("files", f));
-      await apiFormDataInstance.post("/posts", formData);
-      toast.success(COMMON_MESSAGES.SAVE_SUCCESS);
-      void queryClient.invalidateQueries({ queryKey: [POST_QUERY_KEY] });
-      closeCreateModal();
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  return (
-    <div className="p-6">
-      <ListHeader
-        title="게시글 관리"
-        rightArea={
-          <div className="flex items-center gap-2">
-            <Button variant="save" onClick={() => setIsCreateOpen(true)}>
-              등록
-            </Button>
-            <Button
-              variant="delete"
-              disabled={selectedKeys.length === 0}
-              onClick={() => {
-                confirmModal({
-                  content: `선택한 ${selectedKeys.length}개 항목을 삭제하시겠습니까?`,
-                  onOk: async () => {
-                    await deletePosts(selectedKeys.map(Number));
-                    setSelectedKeys([]);
-                  },
-                  onCancel: () => {},
-                  className: "max-w-100",
-                });
-              }}
-            >
-              삭제
-            </Button>
-          </div>
-        }
-      />
-      <ListContents>
-        <PageFilter
-          values={filterParams}
-          onChange={(updates: Partial<PostFilterParams>) =>
-            setFilterParams((prev) => ({ ...prev, ...updates }))
-          }
-          onSubmit={() => {
-            setPage(0);
-            setSelectedKeys([]);
-            setSubmittedFilter(filterParams);
-          }}
-          onReset={() => {
-            setFilterParams(EMPTY_FILTER);
-            setSubmittedFilter(EMPTY_FILTER);
-            setPage(0);
-            setPageSize(15);
-            setSelectedKeys([]);
-          }}
-          rows={[
-            {
-              options: [
-                {
-                  type: "select",
-                  key: "noticeCategory",
-                  label: "카테고리",
-                  placeholder: "전체",
-                  options: FILTER_CATEGORY_OPTIONS,
-                },
-                { type: "input", key: "title", label: "제목", placeholder: "제목 검색" },
-              ],
-            },
-          ]}
-        />
-        <Table
-          columns={columns}
-          data={content}
-          isLoading={isLoading}
-          rowKey="id"
-          sortVisibleType={"hovered"}
-          sortOption={sortOption}
-          onSortChange={(sortKey: string, sortOrder: "asc" | "desc") => {
-            setSortOption({ sortKey, sortOrder });
-            setPage(0);
-          }}
-          onRowClick={(post: Post) => navigate(`/post/${post.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>
-
-      <PostFormModal
-        mode="create"
-        isOpen={isCreateOpen}
-        onClose={closeCreateModal}
-        defaultValues={POST_FORM_DEFAULT_VALUES}
-        onSubmit={handleCreateFormSubmit}
-        isPending={isUploading}
-        pendingFiles={pendingFiles}
-        onPendingFilesChange={setPendingFiles}
-      />
-    </div>
-  );
-}
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { Badge, Button, confirmModal, PageFilter, Select, Table, toast } from "@farmzone/fz-react-ui";
+
+import { useGetPosts, useDeletePosts } from "@/app/api/queries";
+import type { Post } from "@/types";
+import { useUserStore } from "@/app/store";
+import { apiFormDataInstance } from "@/app/api/api";
+import { POST_QUERY_KEY } from "@/app/api/queryKey";
+import ListContents from "@/app/layout/ListContents";
+import ListHeader from "@/app/layout/ListHeader";
+import { COMMON_MESSAGES } from "@/shared/config/text";
+import { formatDateTime } from "@/shared/utils/format";
+import { PostFormModal, POST_FORM_DEFAULT_VALUES } from "./PostFormModal";
+import type { PostFormData } from "./PostFormModal";
+
+const PAGE_SIZE_OPTIONS = [
+  { label: "15", value: "15" },
+  { label: "30", value: "30" },
+  { label: "60", value: "60" },
+  { label: "100", value: "100" },
+];
+
+interface PostFilterParams {
+  title: string;
+  noticeCategory: string;
+}
+
+const EMPTY_FILTER: PostFilterParams = { title: "", noticeCategory: "" };
+
+const FILTER_CATEGORY_OPTIONS = [
+  { label: "일반", value: "BASIC" },
+  { label: "공지", value: "NOTICE" },
+];
+
+export default function PostPage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const currentUser = useUserStore((s) => s.user);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(15);
+  const [filterParams, setFilterParams] = useState<PostFilterParams>(EMPTY_FILTER);
+  const [submittedFilter, setSubmittedFilter] = useState<PostFilterParams>(EMPTY_FILTER);
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  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 } = useGetPosts({
+    page,
+    size: pageSize,
+    title: submittedFilter.title || undefined,
+    noticeCategory: submittedFilter.noticeCategory || undefined,
+    sortKey: sortOption?.sortKey,
+    sortOrder: sortOption?.sortOrder,
+  });
+
+  const columns = [
+    {
+      key: "id",
+      title: "No",
+      width: "30px",
+      align: "center" as const,
+      render: (_: unknown, record: Post) => record.id,
+    },
+    {
+      key: "title",
+      title: "제목",
+      minWidth: 200,
+      sortable: true,
+      sort: (sortOption?.sortKey === "title" ? sortOption.sortOrder : null) as "asc" | "desc" | null,
+    },
+    {
+      key: "visible",
+      title: "노출 여부",
+      align: "center" as const,
+      width: "40px",
+      render: (_: unknown, record: Post) => (
+        <Badge
+          text={record.visible ? "O" : "X"}
+          className={`scale-90 ${record.visible ? "bg-green-100 text-green-700 border-green-100" : "bg-red-100 text-red-500 border-red-100"}`}
+        />
+      ),
+    },
+    {
+      key: "viewCount",
+      title: "조회수",
+      align: "center" as const,
+      width: "40px",
+    },
+    {
+      key: "createdAt",
+      title: "등록일시",
+      align: "center" as const,
+      width: "80px",
+      render: (_: unknown, record: Post) => formatDateTime(record.createdAt),
+    },
+    {
+      key: "updatedAt",
+      title: "수정일시",
+      align: "center" as const,
+      width: "80px",
+      render: (_: unknown, record: Post) => formatDateTime(record.updatedAt),
+    },
+  ];
+
+  const [selectedKeys, setSelectedKeys] = useState<Array<string | number>>([]);
+
+  const { mutateAsync: deletePosts } = useDeletePosts();
+
+  const totalElements = data?.totalElements ?? 0;
+  const totalPages = data?.totalPages ?? 0;
+  const content = data?.content ?? [];
+
+  const closeCreateModal = () => {
+    setIsCreateOpen(false);
+    setPendingFiles([]);
+  };
+
+  const handleCreateFormSubmit = async (data: PostFormData) => {
+    setIsUploading(true);
+    try {
+      const request = {
+        title: data.title,
+        content: data.content,
+        noticeCategory: data.noticeCategory,
+        visible: data.visible,
+        writer: currentUser?.userId ?? "",
+      };
+      const formData = new FormData();
+      formData.append("request", JSON.stringify(request));
+      pendingFiles.forEach((f) => formData.append("files", f));
+      await apiFormDataInstance.post("/posts", formData);
+      toast.success(COMMON_MESSAGES.SAVE_SUCCESS);
+      void queryClient.invalidateQueries({ queryKey: [POST_QUERY_KEY] });
+      closeCreateModal();
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <div className="p-6">
+      <ListHeader
+        title="게시글 관리"
+        rightArea={
+          <div className="flex items-center gap-2">
+            <Button variant="save" onClick={() => setIsCreateOpen(true)}>
+              등록
+            </Button>
+            <Button
+              variant="delete"
+              disabled={selectedKeys.length === 0}
+              onClick={() => {
+                confirmModal({
+                  content: `선택한 ${selectedKeys.length}개 항목을 삭제하시겠습니까?`,
+                  onOk: async () => {
+                    await deletePosts(selectedKeys.map(Number));
+                    setSelectedKeys([]);
+                  },
+                  onCancel: () => {},
+                  className: "max-w-100",
+                });
+              }}
+            >
+              삭제
+            </Button>
+          </div>
+        }
+      />
+      <ListContents>
+        <PageFilter
+          values={filterParams}
+          onChange={(updates: Partial<PostFilterParams>) =>
+            setFilterParams((prev) => ({ ...prev, ...updates }))
+          }
+          onSubmit={() => {
+            setPage(0);
+            setSelectedKeys([]);
+            setSubmittedFilter(filterParams);
+          }}
+          onReset={() => {
+            setFilterParams(EMPTY_FILTER);
+            setSubmittedFilter(EMPTY_FILTER);
+            setPage(0);
+            setPageSize(15);
+            setSelectedKeys([]);
+          }}
+          rows={[
+            {
+              options: [
+                {
+                  type: "select",
+                  key: "noticeCategory",
+                  label: "카테고리",
+                  placeholder: "전체",
+                  options: FILTER_CATEGORY_OPTIONS,
+                },
+                { type: "input", key: "title", label: "제목", placeholder: "제목 검색" },
+              ],
+            },
+          ]}
+        />
+        <Table
+          columns={columns}
+          data={content}
+          isLoading={isLoading}
+          rowKey="id"
+          sortVisibleType={"hovered"}
+          sortOption={sortOption}
+          onSortChange={(sortKey: string, sortOrder: "asc" | "desc") => {
+            setSortOption({ sortKey, sortOrder });
+            setPage(0);
+          }}
+          onRowClick={(post: Post) => navigate(`/post/${post.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>
+
+      <PostFormModal
+        mode="create"
+        isOpen={isCreateOpen}
+        onClose={closeCreateModal}
+        defaultValues={POST_FORM_DEFAULT_VALUES}
+        onSubmit={handleCreateFormSubmit}
+        isPending={isUploading}
+        pendingFiles={pendingFiles}
+        onPendingFilesChange={setPendingFiles}
+      />
+    </div>
+  );
+}