@farmzone/fz-template-react 1.0.4 → 1.0.5

package/README.md

@@ -24,68 +24,58 @@ npx @farmzone/fz-template-react
 # 프로젝트 이름을 입력하세요: my-app
 ```
 
-## 생성되는 프로젝트 구조
-
-```
-my-app/
-├── src/
-│   ├── app/
-│   │   ├── layout/
-│   │   │   ├── Layout.tsx       # 사이드바 + Outlet 레이아웃
-│   │   │   ├── Sidebar.tsx      # 사이드바 컴포넌트
-│   │   │   └── menu.ts          # 메뉴 설정
-│   │   ├── router/
-│   │   │   └── Router.tsx
-│   │   └── App.tsx              # QueryClientProvider 루트
-│   ├── pages/
-│   │   ├── dashboard/
-│   │   │   └── index.tsx
-│   │   └── error/
-│   │       ├── Error.tsx
-│   │       └── NotFound.tsx
-│   └── index.tsx
-├── .gitignore
-├── index.html
-├── index.css
-├── vite.config.ts
-├── tsconfig.json
-└── package.json
-```
-
 ## 포함된 기술 스택
 
-| 항목                  | 버전   |
-| --------------------- | ------ |
-| React                 | ^19    |
-| Vite                  | ^7     |
-| TypeScript            | ~5.9   |
-| Tailwind CSS          | v4     |
-| React Router          | ^7     |
-| TanStack Query        | ^5     |
-| @farmzone/fz-react-ui | latest |
-| react-hook-form + zod | 최신   |
+| 항목                  | 버전    |
+| --------------------- | ------- |
+| React                 | ^19     |
+| Vite                  | ^7      |
+| TypeScript            | ~5.9    |
+| Tailwind CSS          | ^4      |
+| React Router          | ^7      |
+| TanStack Query        | ^5      |
+| @farmzone/fz-react-ui | ^0.0.6  |
+| react-hook-form       | ^7      |
+| zod                   | ^3      |
+| Zustand               | ^5      |
+| axios                 | ^1      |
+| dayjs                 | ^1      |
+| MSW                   | ^2      |
+| lucide-react          | ^1      |
 
 ## 메뉴 추가
 
-`src/app/layout/menu.ts` 수정:
+`src/app/layout/menu.ts`의 `MENU_SECTIONS` 배열에 추가:
 
 ```ts
-import { LayoutDashboard, Users, ScrollText } from "lucide-react";
+import type { MenuSection } from "@farmzone/fz-react-ui";
+import { LayoutDashboard, Users, FileText, ScrollText } from "lucide-react";
 
-export const MENU_SECTIONS: MenuSection[] = [
-  {
-    items: [{ icon: LayoutDashboard, label: "대시보드", path: "/" }],
-  },
+export const MENU_SECTIONS: Array<MenuSection> = [
   {
-    title: "관리",
     items: [
-      { icon: Users, label: "사용자 관리", path: "/user" },
-      { icon: ScrollText, label: "로그", path: "/log" },
+      { icon: LayoutDashboard, label: "대시보드", path: "/" },
+      {
+        icon: FileText,
+        label: "게시글 관리",
+        children: [{ label: "게시글 관리", path: "/post" }],
+      },
+      {
+        icon: Users,
+        label: "사용자 관리",
+        children: [{ label: "사용자 관리", path: "/user" }],
+      },
     ],
   },
+  {
+    title: "시스템",
+    items: [{ icon: ScrollText, label: "로그 관리", path: "/system/log" }],
+  },
 ];
 ```
 
+`children` 배열을 사용하면 아코디언 서브메뉴로 렌더링됩니다.
+
 ## 라우트 추가
 
 `src/app/router/Router.tsx`의 `children` 배열에 추가:
@@ -93,12 +83,18 @@ export const MENU_SECTIONS: MenuSection[] = [
 ```tsx
 children: [
   { index: true, element: <DashboardPage /> },
-  { path: "user", element: <UserListPage /> },
-  { path: "user/:id", element: <UserDetailPage /> },
-  { path: "log", element: <LogPage /> },
+  { path: "sample", element: <SamplePage /> },
+  { path: "sample/modal", element: <SampleModalPage /> },
+  { path: "sample/:id", element: <SampleDetailPage /> },
+  { path: "post", element: <PostPage /> },
+  { path: "post/:id", element: <PostDetailPage /> },
+  { path: "user", element: <UserPage /> },
+  { path: "system/log", element: <LogPage /> },
 ],
 ```
 
+`/login` 경로와 `authLoader`(토큰 미존재 시 `/login` 리다이렉트)는 Router.tsx에 이미 포함되어 있습니다.
+
 ## npm 배포
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farmzone/fz-template-react",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Farmzone React 프로젝트 보일러플레이트 생성 CLI",
   "type": "module",
   "bin": {

package/template/package.json

@@ -1,7 +1,7 @@
 {
   "name": "__PROJECT_NAME__",
   "private": true,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0 --port 5000",
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@farmzone/fz-react-ui": "^0.0.6",
+    "@farmzone/fz-react-ui": "^0.0.8",
     "@hookform/resolvers": "^5.2.2",
     "@tanstack/react-query": "^5.90.0",
     "axios": "^1.13.0",

package/template/pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@farmzone/fz-react-ui':
-        specifier: ^0.0.6
-        version: 0.0.6(@hookform/resolvers@5.4.0(react-hook-form@7.78.0(react@19.2.7)))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-daum-postcode@4.0.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react-hook-form@7.78.0(react@19.2.7))(react-router@7.17.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)(zod@3.25.76)
+        specifier: ^0.0.8
+        version: 0.0.8(@hookform/resolvers@5.4.0(react-hook-form@7.78.0(react@19.2.7)))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-daum-postcode@4.0.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react-hook-form@7.78.0(react@19.2.7))(react-router@7.17.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)(zod@3.25.76)
       '@hookform/resolvers':
         specifier: ^5.2.2
         version: 5.4.0(react-hook-form@7.78.0(react@19.2.7))
@@ -391,8 +391,8 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@farmzone/fz-react-ui@0.0.6':
-    resolution: {integrity: sha512-4BwWCXQBtjZf9Aj1CmnbulJQHMtUVX5EmjhRpNCYbnovD4o+hz/TUTuv3y+JmNqZFnq5TYNgB6zzytBhBpIZ5g==}
+  '@farmzone/fz-react-ui@0.0.8':
+    resolution: {integrity: sha512-atqHgWVSy0sy15P30i1jN3BMtZJQbfyoMwUk1K5Xpgrk4xXtN8lC8AK+LMV8ZHfq0hV0EX+SHJGVpee0PLeHNQ==}
     peerDependencies:
       '@hookform/resolvers': ^5.2.2
       react: '>=18'
@@ -2501,7 +2501,7 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
-  '@farmzone/fz-react-ui@0.0.6(@hookform/resolvers@5.4.0(react-hook-form@7.78.0(react@19.2.7)))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-daum-postcode@4.0.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react-hook-form@7.78.0(react@19.2.7))(react-router@7.17.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)(zod@3.25.76)':
+  '@farmzone/fz-react-ui@0.0.8(@hookform/resolvers@5.4.0(react-hook-form@7.78.0(react@19.2.7)))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-daum-postcode@4.0.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react-hook-form@7.78.0(react@19.2.7))(react-router@7.17.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)(zod@3.25.76)':
     dependencies:
       '@radix-ui/react-popover': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-radio-group': 1.4.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)

package/template/src/app/api/queries.ts

@@ -221,6 +221,11 @@ export const useDeleteComment = () => {
   });
 };
 
+// --- Sample check ---
+
+export const checkSampleNameAvailable = (name: string): Promise<boolean> =>
+  apiInstance.get<boolean>("/samples/check/name", { params: { name } }).then((r) => r.data);
+
 // --- User ---
 
 export const checkUserIdAvailable = (userId: string): Promise<boolean> =>

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

@@ -209,7 +209,6 @@ export default function PostPage() {
           data={content}
           isLoading={isLoading}
           rowKey="id"
-          sortVisibleType={"hovered"}
           sortOption={sortOption}
           onSortChange={(sortKey: string, sortOrder: "asc" | "desc") => {
             setSortOption({ sortKey, sortOrder });

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

@@ -1,10 +1,15 @@
+import { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
 import { Button, Modal, ModalBody, ModalFooter, ModalIconHeader, SubmitForm } from "@farmzone/fz-react-ui";
 import { z } from "zod";
 
+import { checkSampleNameAvailable } from "@/app/api/queries";
+
 export const sampleFormSchema = z.object({
   name: z.string().min(1, "이름을 입력해 주세요."),
   description: z.string().min(1, "설명을 입력해 주세요."),
   category: z.string(),
+  priority: z.coerce.number().min(1).max(10),
   active: z.boolean(),
 });
 
@@ -14,6 +19,7 @@ export const SAMPLE_FORM_DEFAULT_VALUES: SampleFormData = {
   name: "",
   description: "",
   category: "BASIC",
+  priority: 1,
   active: true,
 };
 
@@ -22,6 +28,34 @@ const CATEGORY_OPTIONS = [
   { label: "고급", value: "ADVANCED" },
 ];
 
+const PRIORITY_OPTIONS = Array.from({ length: 10 }, (_, i) => ({
+  label: String(i + 1),
+  value: String(i + 1),
+}));
+
+function SampleNameChecker({ originalName }: { originalName?: string }) {
+  const { watch, setError, clearErrors } = useFormContext();
+  const name = watch("name") as string;
+
+  useEffect(() => {
+    if (!name || name === originalName) {
+      clearErrors("name");
+      return;
+    }
+    const timer = setTimeout(async () => {
+      const available = await checkSampleNameAvailable(name);
+      if (available) {
+        clearErrors("name");
+      } else {
+        setError("name", { type: "manual", message: "이미 사용 중인 샘플명입니다." });
+      }
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [name, originalName, setError, clearErrors]);
+
+  return null;
+}
+
 interface SampleFormModalProps {
   mode: "create" | "edit";
   isOpen: boolean;
@@ -30,6 +64,7 @@ interface SampleFormModalProps {
   onSubmit: (data: SampleFormData) => Promise<void>;
   isPending: boolean;
   formKey?: string | number;
+  originalName?: string;
 }
 
 export function SampleFormModal({
@@ -40,6 +75,7 @@ export function SampleFormModal({
   onSubmit,
   isPending,
   formKey,
+  originalName,
 }: SampleFormModalProps) {
   const formId = mode === "create" ? "sample-create-form" : "sample-edit-form";
   const title = mode === "create" ? "샘플 등록" : "샘플 수정";
@@ -57,9 +93,11 @@ export function SampleFormModal({
             defaultValues={defaultValues ?? SAMPLE_FORM_DEFAULT_VALUES}
             onSubmit={onSubmit}
           >
+            <SampleNameChecker originalName={originalName} />
             <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="priority" formType="select" label="우선순위" options={PRIORITY_OPTIONS} />
             <SubmitForm.Row formKey="active" formType="switch" label="사용 여부" />
           </SubmitForm>
         </div>

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

@@ -58,6 +58,7 @@ export default function SampleDetailPage() {
         name: data.name,
         description: data.description,
         category: data.category as "BASIC" | "ADVANCED",
+        priority: data.priority,
         active: data.active,
       },
     });
@@ -140,7 +141,7 @@ export default function SampleDetailPage() {
   };
 
   const editDefaultValues: SampleFormData | undefined = sample
-    ? { name: sample.name, description: sample.description, category: sample.category, active: sample.active }
+    ? { name: sample.name, description: sample.description, category: sample.category, priority: sample.priority, active: sample.active }
     : undefined;
 
   return (
@@ -269,7 +270,6 @@ export default function SampleDetailPage() {
                       <ul className="border-t border-gray-50 bg-gray-50/60">
                         {depth2Replies.map((reply) => {
                           const depth3Replies = reply.replies ?? [];
-                          const isReplyingToReply = replyingToId === reply.id;
                           const isEditingReply = editingCommentId === reply.id;
 
                           return (
@@ -297,21 +297,9 @@ export default function SampleDetailPage() {
                                       onCancel={() => setEditingCommentId(null)}
                                     />
                                   ) : (
-                                    <>
-                                      <p className="whitespace-pre-wrap text-sm text-gray-600">
-                                        {reply.content}
-                                      </p>
-                                      {reply.content !== "삭제된 댓글입니다." && (
-                                        <button
-                                          type="button"
-                                          onClick={() => setReplyingToId(isReplyingToReply ? null : reply.id)}
-                                          className="mt-0.5 flex items-center gap-1 text-xs text-gray-400 transition-colors hover:text-blue-500"
-                                        >
-                                          <CornerDownRight size={11} />
-                                          {isReplyingToReply ? "취소" : "답글"}
-                                        </button>
-                                      )}
-                                    </>
+                                    <p className="whitespace-pre-wrap text-sm text-gray-600">
+                                      {reply.content}
+                                    </p>
                                   )}
                                 </div>
                                 {!isEditingReply && renderCommentActions(reply)}
@@ -364,18 +352,6 @@ export default function SampleDetailPage() {
                                 </ul>
                               )}
 
-                              {/* depth 2 답글 입력창 */}
-                              {isReplyingToReply && !isEditingReply && (
-                                <div className="border-t border-blue-50 bg-blue-50/30 py-3 pl-10 pr-5">
-                                  <CommentInput
-                                    targetType="SAMPLE"
-                                    targetId={sampleId}
-                                    parentCommentId={reply.id}
-                                    placeholder="답글을 입력하세요. @를 입력하면 사용자를 멘션할 수 있습니다."
-                                    onSuccess={() => setReplyingToId(null)}
-                                  />
-                                </div>
-                              )}
                             </li>
                           );
                         })}

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

@@ -2,7 +2,7 @@ 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 { 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";
@@ -75,19 +75,27 @@ export default function SamplePage() {
 
   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,
         },
       });
@@ -263,6 +271,7 @@ export default function SamplePage() {
         onSubmit={handleSubmit}
         isPending={isCreating || isUpdating}
         formKey={selectedSample?.id}
+        originalName={selectedSample?.name}
       />
     </div>
   );

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

@@ -1,6 +1,7 @@
 import { useState, type ReactNode } from "react";
 import { Button, Modal, Tab } from "@farmzone/fz-react-ui";
-import { ArrowRight, Clock, Maximize2, Minimize2, X } from "lucide-react";
+import { ArrowRight, Clock, Download, Maximize2, Minimize2, X } from "lucide-react";
+import { apiInstance } from "@/app/api/api";
 import ListHeader from "@/app/layout/ListHeader";
 
 const CATTLE = {
@@ -235,6 +236,27 @@ function CattleDetailModal({ isOpen, onClose }: { isOpen: boolean; onClose: () =
 
 export default function SampleModalPage() {
   const [isOpen, setIsOpen] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleExcelTemplateDownload = async (menuCode: string) => {
+    setIsDownloading(true);
+    try {
+      const res = await apiInstance.get<Blob>(`/excel/template?menuCode=${menuCode}`, {
+        responseType: "blob",
+      });
+      const disposition = (res.headers as Record<string, string>)["content-disposition"] ?? "";
+      const fileNameMatch = /filename\*?=['"]?(?:UTF-8'')?([^;'"]+)['"]?/i.exec(disposition);
+      const fileName = fileNameMatch ? decodeURIComponent(fileNameMatch[1]) : "엑셀_업로드_양식.xlsx";
+      const url = URL.createObjectURL(res.data);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = fileName;
+      anchor.click();
+      URL.revokeObjectURL(url);
+    } finally {
+      setIsDownloading(false);
+    }
+  };
 
   return (
     <div className="p-6">
@@ -247,6 +269,31 @@ export default function SampleModalPage() {
           </Button>
         </div>
       </div>
+      <div className="mt-6 flex items-center justify-center rounded-xl border border-dashed border-gray-300 bg-white p-16">
+        <div className="text-center">
+          <p className="mb-4 text-sm text-gray-500">
+            아래 버튼을 클릭하여 템플릿 다운로드 기능을 확인하세요.
+          </p>
+          <div className="flex flex-col gap-4">
+            <Button
+              variant="outline"
+              onClick={() => handleExcelTemplateDownload("SAMPLE")}
+              disabled={isDownloading}
+            >
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀 업로드 양식 다운로드 (SAMPLE)
+            </Button>
+            {/* <Button
+              variant="outline"
+              onClick={() => handleExcelTemplateDownload("POST")}
+              disabled={isDownloading}
+            >
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀 업로드 양식 다운로드 (POST)
+            </Button> */}
+          </div>
+        </div>
+      </div>
       <CattleDetailModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
     </div>
   );

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

@@ -1,5 +1,4 @@
-import { Badge, Button, type Column } from "@farmzone/fz-react-ui";
-import { Pencil, Trash2 } from "lucide-react";
+import { Badge, type Column } from "@farmzone/fz-react-ui";
 
 import type { User } from "@/types";
 import { formatDateTime } from "@/shared/utils/format";
@@ -17,13 +16,7 @@ interface ActionHandlers {
   pageSize: number;
 }
 
-export const getUserColumns = ({
-  onEdit,
-  onDelete,
-  totalElements,
-  page,
-  pageSize,
-}: ActionHandlers): Array<Column<User>> => [
+export const getUserColumns = ({ totalElements, page, pageSize }: ActionHandlers): Array<Column<User>> => [
   {
     key: "index",
     title: "No",

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

@@ -140,25 +140,25 @@ const USER_READ_FIELDS: Array<DetailField<UserViewData>> = [
   {
     key: "role",
     label: "구분",
-    render: ({ value }: { value: string }) => (
-      <span className="text-sm text-gray-900">{value === "ADMIN" ? "관리자" : "일반"}</span>
+    render: ({ value }) => (
+      <span className="text-sm text-gray-900">{(value as string) === "ADMIN" ? "관리자" : "일반"}</span>
     ),
   },
   {
     key: "active",
     label: "사용여부",
-    render: ({ value }: { value: boolean }) => (
+    render: ({ value }) => (
       <Badge
-        text={value ? "활성" : "비활성"}
-        className={`scale-90 ${value ? "bg-green-100 text-green-700 border-green-100" : "bg-gray-100 text-gray-500 border-gray-200"}`}
+        text={(value as boolean) ? "활성" : "비활성"}
+        className={`scale-90 ${(value as boolean) ? "bg-green-100 text-green-700 border-green-100" : "bg-gray-100 text-gray-500 border-gray-200"}`}
       />
     ),
   },
   {
     key: "gender",
     label: "성별",
-    render: ({ value }: { value: string }) => (
-      <span className="text-sm text-gray-900">{value === "M" ? "남" : value === "F" ? "여" : "-"}</span>
+    render: ({ value }) => (
+      <span className="text-sm text-gray-900">{(value as string) === "M" ? "남" : (value as string) === "F" ? "여" : "-"}</span>
     ),
   },
   { key: "birthday", label: "생년월일" },

package/template/src/types/sample.ts

@@ -24,5 +24,6 @@ export interface SampleForm {
   name: string;
   description: string;
   category: SampleCategory;
+  priority: number;
   active: boolean;
 }