@farmzone/fz-template-react 1.0.0 → 1.0.1

package/template/src/pages/system/log/index.tsx

@@ -0,0 +1,173 @@
+import { useState } from "react";
+import { PageFilter, Select, Table } from "@farmzone/fz-react-ui";
+import type { Column } from "@farmzone/fz-react-ui";
+
+import { useGetLogs } from "@/app/api/queries";
+import type { ActionLog } from "@/types";
+import ListContents from "@/app/layout/ListContents";
+import ListHeader from "@/app/layout/ListHeader";
+import { formatDateTime } from "@/shared/utils/format";
+
+const PAGE_SIZE_OPTIONS = [
+  { label: "15", value: "15" },
+  { label: "30", value: "30" },
+  { label: "60", value: "60" },
+  { label: "100", value: "100" },
+];
+
+const ROLE_OPTIONS = [
+  { label: "관리자", value: "ADMIN" },
+  { label: "사용자", value: "USER" },
+];
+
+const KEYWORD_TYPE_OPTIONS = [
+  { label: "아이디", value: "userId" },
+  { label: "이름", value: "userName" },
+];
+
+interface LogFilterParams {
+  role: string;
+  pageOption: string;
+  keywordType: string;
+  keyword: string;
+  startDate: string;
+  endDate: string;
+}
+
+const EMPTY_FILTER: LogFilterParams = {
+  role: "",
+  pageOption: "",
+  keywordType: "userId",
+  keyword: "",
+  startDate: "",
+  endDate: "",
+};
+
+const columns: Array<Column<ActionLog>> = [
+  {
+    key: "id",
+    title: "No",
+    width: "40px",
+    align: "center",
+    render: (_, record) => record.id,
+  },
+  { key: "userId", title: "아이디", minWidth: 80 },
+  { key: "name", title: "이름", minWidth: 80 },
+  { key: "action", title: "액션", width: "40px" },
+  { key: "pageOption", title: "대상", width: "40px" },
+  { key: "content", title: "상세 내용", minWidth: 300 },
+  {
+    key: "createdAt",
+    title: "발생일시",
+    align: "center",
+    width: "80px",
+    render: (_, record) => formatDateTime(record.createdAt),
+  },
+];
+
+export default function LogPage() {
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(15);
+  const [filterParams, setFilterParams] = useState<LogFilterParams>(EMPTY_FILTER);
+  const [submittedFilter, setSubmittedFilter] = useState<LogFilterParams>(EMPTY_FILTER);
+
+  const { data, isLoading } = useGetLogs({
+    page,
+    size: pageSize,
+    userRole: submittedFilter.role || undefined,
+    pageOption: submittedFilter.pageOption || undefined,
+    keywordType: submittedFilter.keyword ? submittedFilter.keywordType : undefined,
+    keyword: submittedFilter.keyword || undefined,
+    startDate: submittedFilter.startDate || undefined,
+    endDate: submittedFilter.endDate || undefined,
+  });
+
+  const totalElements = data?.totalElements ?? 0;
+  const totalPages = data?.totalPages ?? 0;
+  const content = data?.content ?? [];
+
+  return (
+    <div className="p-6">
+      <ListHeader title="로그 관리" />
+      <ListContents>
+        <PageFilter
+          values={filterParams}
+          onChange={(updates) => setFilterParams((prev) => ({ ...prev, ...updates }))}
+          onSubmit={() => {
+            setPage(0);
+            setSubmittedFilter(filterParams);
+          }}
+          onReset={() => {
+            setFilterParams(EMPTY_FILTER);
+            setSubmittedFilter(EMPTY_FILTER);
+            setPage(0);
+            setPageSize(15);
+          }}
+          rows={[
+            {
+              options: [
+                {
+                  type: "select",
+                  key: "role",
+                  label: "구분",
+                  placeholder: "전체",
+                  options: ROLE_OPTIONS,
+                },
+                {
+                  type: "date-range",
+                  key: "startDate",
+                  endKey: "endDate",
+                  label: "기간",
+                },
+              ],
+            },
+            {
+              options: [
+                {
+                  type: "select",
+                  key: "keywordType",
+                  label: "검색",
+                  options: KEYWORD_TYPE_OPTIONS,
+                },
+                { type: "input", key: "keyword", placeholder: "검색어 입력" },
+              ],
+            },
+          ]}
+        />
+        <div className="[&_.table-item]:!cursor-default [&_tr]:!cursor-default">
+          <Table
+            columns={columns}
+            data={content}
+            isLoading={isLoading}
+            rowKey="id"
+            paginationInfo={{
+              page,
+              totalPages,
+              onPageChange: setPage,
+            }}
+            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) => {
+                      setPageSize(Number(val));
+                      setPage(0);
+                    }}
+                  />
+                </div>
+              ),
+            }}
+          />
+        </div>
+      </ListContents>
+    </div>
+  );
+}

package/template/src/pages/user/config/columns.tsx

@@ -0,0 +1,109 @@
+import { Badge, Button, type Column } from "@farmzone/fz-react-ui";
+import { Pencil, Trash2 } from "lucide-react";
+
+import type { User } from "@/types";
+import { formatDateTime } from "@/shared/utils/format";
+
+const ROLE_LABEL: Record<string, string> = {
+  ADMIN: "관리자",
+  USER: "일반",
+};
+
+interface ActionHandlers {
+  onEdit: (user: User) => void;
+  onDelete: (user: User) => void;
+  totalElements: number;
+  page: number;
+  pageSize: number;
+}
+
+export const getUserColumns = ({
+  onEdit,
+  onDelete,
+  totalElements,
+  page,
+  pageSize,
+}: ActionHandlers): Array<Column<User>> => [
+  {
+    key: "index",
+    title: "No",
+    width: "30px",
+    align: "center",
+    render: (_, __, index) => totalElements - page * pageSize - index,
+  },
+  { key: "userId", title: "아이디", minWidth: 100 },
+  { key: "name", title: "이름", minWidth: 80 },
+  {
+    key: "role",
+    title: "권한",
+    align: "center",
+    width: "40px",
+    render: (_, record) => ROLE_LABEL[record.role] ?? record.role,
+  },
+  {
+    key: "active",
+    title: "사용여부",
+    align: "center",
+    width: "50px",
+    render: (_, record) => (
+      <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",
+    width: "80px",
+    render: (_, record) => formatDateTime(record.createdAt),
+  },
+  {
+    key: "lastLoginAt",
+    title: "최종 로그인",
+    align: "center",
+    width: "80px",
+    render: (_, record) => formatDateTime(record.lastLoginAt),
+  },
+  // {
+  //   key: "actions",
+  //   title: "관리",
+  //   align: "center",
+  //   width: "40px",
+  //   render: (_, record) => (
+  //     <div className="flex items-center justify-center gap-1">
+  //       <Button
+  //         type="button"
+  //         variant="ghost"
+  //         size="icon-sm"
+  //         className="cursor-pointer rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-blue-500"
+  //         onClick={(e) => {
+  //           e.stopPropagation();
+  //           onEdit(record);
+  //         }}
+  //         aria-label="수정"
+  //       >
+  //         <Pencil size={15} />
+  //       </Button>
+  //       <Button
+  //         type="button"
+  //         variant="ghost"
+  //         size="icon-sm"
+  //         className="cursor-pointer rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-red-500"
+  //         onClick={(e) => {
+  //           e.stopPropagation();
+  //           onDelete(record);
+  //         }}
+  //         aria-label="삭제"
+  //       >
+  //         <Trash2 size={15} />
+  //       </Button>
+  //     </div>
+  //   ),
+  // },
+];

package/template/src/pages/user/config/schema.ts

@@ -0,0 +1,54 @@
+import { z } from "zod";
+
+export const userCreateSchema = z
+  .object({
+    userId: z.string().min(1, "아이디를 입력해 주세요."),
+    name: z.string().min(1, "성명을 입력해 주세요."),
+    password: z.string().min(1, "비밀번호를 입력해 주세요."),
+    passwordCheck: z.string().min(1, "비밀번호 확인을 입력해 주세요."),
+    role: z.string(),
+    gender: z.enum(["M", "F", ""]).default(""),
+    birthday: z.string().default(""),
+    phone: z
+      .string()
+      .regex(/^[0-9\-]{0,20}$/, "숫자와 하이픈(-)만 입력 가능합니다.")
+      .default(""),
+  })
+  .superRefine((data, ctx) => {
+    if (data.password !== data.passwordCheck) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "비밀번호가 일치하지 않습니다.",
+        path: ["passwordCheck"],
+      });
+    }
+  });
+
+export type UserCreateFormData = z.infer<typeof userCreateSchema>;
+
+export const userEditSchema = z
+  .object({
+    userId: z.string().default(""),
+    name: z.string().min(1, "성명을 입력해 주세요."),
+    password: z.string().default(""),
+    passwordCheck: z.string().default(""),
+    active: z.boolean().default(true),
+    role: z.string(),
+    gender: z.enum(["M", "F", ""]).default(""),
+    birthday: z.string().default(""),
+    phone: z
+      .string()
+      .regex(/^[0-9\-]{0,20}$/, "숫자와 하이픈(-)만 입력 가능합니다.")
+      .default(""),
+  })
+  .superRefine((data, ctx) => {
+    if (data.password && data.password !== data.passwordCheck) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "비밀번호가 일치하지 않습니다.",
+        path: ["passwordCheck"],
+      });
+    }
+  });
+
+export type UserEditFormData = z.infer<typeof userEditSchema>;