@farmzone/fz-template-react 1.0.0 → 1.0.1

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +1,77 @@
+import { Button, Modal, ModalBody, ModalFooter, ModalIconHeader, SubmitForm } from "@farmzone/fz-react-ui";
+import { z } from "zod";
+
+export const sampleFormSchema = z.object({
+  name: z.string().min(1, "이름을 입력해 주세요."),
+  description: z.string().min(1, "설명을 입력해 주세요."),
+  category: z.string(),
+  active: z.boolean(),
+});
+
+export type SampleFormData = z.infer<typeof sampleFormSchema>;
+
+export const SAMPLE_FORM_DEFAULT_VALUES: SampleFormData = {
+  name: "",
+  description: "",
+  category: "BASIC",
+  active: true,
+};
+
+const CATEGORY_OPTIONS = [
+  { label: "기본", value: "BASIC" },
+  { label: "고급", value: "ADVANCED" },
+];
+
+interface SampleFormModalProps {
+  mode: "create" | "edit";
+  isOpen: boolean;
+  onClose: () => void;
+  defaultValues?: SampleFormData;
+  onSubmit: (data: SampleFormData) => Promise<void>;
+  isPending: boolean;
+  formKey?: string | number;
+}
+
+export function SampleFormModal({
+  mode,
+  isOpen,
+  onClose,
+  defaultValues,
+  onSubmit,
+  isPending,
+  formKey,
+}: 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}
+          >
+            <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="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>
+  );
+}