@farmzone/fz-template-react 1.0.6 → 1.0.8

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

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

@@ -1,102 +1,102 @@
-import { Badge, type Column } from "@farmzone/fz-react-ui";
-
-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 = ({ 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>
-  //   ),
-  // },
-];
+import { Badge, type Column } from "@farmzone/fz-react-ui";
+
+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 = ({ 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

@@ -1,54 +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>;
+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>;