@farmzone/fz-template-react 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +46 -50
  2. package/package.json +1 -1
  3. package/template/.env.example +5 -5
  4. package/template/package.json +55 -55
  5. package/template/pnpm-lock.yaml +4214 -4214
  6. package/template/public/mockServiceWorker.js +349 -349
  7. package/template/src/app/api/api.ts +178 -178
  8. package/template/src/app/api/queries.ts +326 -321
  9. package/template/src/app/api/queryKey.ts +7 -7
  10. package/template/src/app/api/token.ts +7 -7
  11. package/template/src/app/layout/Layout.tsx +33 -33
  12. package/template/src/app/layout/ListContents.tsx +9 -9
  13. package/template/src/app/layout/ListHeader.tsx +41 -41
  14. package/template/src/app/layout/MultiTabNav.tsx +101 -101
  15. package/template/src/app/layout/Sidebar.tsx +33 -33
  16. package/template/src/app/layout/UserInfo.tsx +94 -94
  17. package/template/src/app/layout/tabSwitchStore.ts +11 -11
  18. package/template/src/app/router/Router.tsx +56 -56
  19. package/template/src/app/store/index.ts +26 -26
  20. package/template/src/index.tsx +21 -21
  21. package/template/src/mocks/browser.ts +17 -17
  22. package/template/src/mocks/handlers.ts +43 -43
  23. package/template/src/mocks/scenarios.ts +57 -57
  24. package/template/src/pages/dashboard/index.tsx +541 -541
  25. package/template/src/pages/error/Error.tsx +29 -29
  26. package/template/src/pages/error/NotFound.tsx +27 -27
  27. package/template/src/pages/login/index.tsx +317 -317
  28. package/template/src/pages/post/PostFormModal.tsx +128 -128
  29. package/template/src/pages/post/detail/index.tsx +548 -548
  30. package/template/src/pages/post/index.tsx +266 -267
  31. package/template/src/pages/sample/SampleFormModal.tsx +115 -77
  32. package/template/src/pages/sample/detail/index.tsx +400 -424
  33. package/template/src/pages/sample/index.tsx +278 -269
  34. package/template/src/pages/sample/modal/index.tsx +300 -253
  35. package/template/src/pages/system/log/index.tsx +173 -173
  36. package/template/src/pages/user/config/columns.tsx +102 -109
  37. package/template/src/pages/user/config/schema.ts +54 -54
  38. package/template/src/pages/user/index.tsx +641 -641
  39. package/template/src/shared/components/CommentInput.tsx +243 -243
  40. package/template/src/shared/config/text.ts +27 -27
  41. package/template/src/shared/utils/format.ts +11 -11
  42. package/template/src/types/auth.ts +10 -10
  43. package/template/src/types/comment.ts +33 -33
  44. package/template/src/types/common.ts +19 -19
  45. package/template/src/types/dashboard.ts +53 -53
  46. package/template/src/types/index.ts +16 -16
  47. package/template/src/types/log.ts +21 -21
  48. package/template/src/types/post.ts +32 -32
  49. package/template/src/types/sample.ts +29 -28
  50. package/template/src/types/user.ts +51 -51
  51. package/template/src/vite-env.d.ts +10 -10
package/README.md CHANGED
@@ -24,68 +24,58 @@ npx @farmzone/fz-template-react
24
24
  # 프로젝트 이름을 입력하세요: my-app
25
25
  ```
26
26
 
27
- ## 생성되는 프로젝트 구조
28
-
29
- ```
30
- my-app/
31
- ├── src/
32
- │ ├── app/
33
- │ │ ├── layout/
34
- │ │ │ ├── Layout.tsx # 사이드바 + Outlet 레이아웃
35
- │ │ │ ├── Sidebar.tsx # 사이드바 컴포넌트
36
- │ │ │ └── menu.ts # 메뉴 설정
37
- │ │ ├── router/
38
- │ │ │ └── Router.tsx
39
- │ │ └── App.tsx # QueryClientProvider 루트
40
- │ ├── pages/
41
- │ │ ├── dashboard/
42
- │ │ │ └── index.tsx
43
- │ │ └── error/
44
- │ │ ├── Error.tsx
45
- │ │ └── NotFound.tsx
46
- │ └── index.tsx
47
- ├── .gitignore
48
- ├── index.html
49
- ├── index.css
50
- ├── vite.config.ts
51
- ├── tsconfig.json
52
- └── package.json
53
- ```
54
-
55
27
  ## 포함된 기술 스택
56
28
 
57
- | 항목 | 버전 |
58
- | --------------------- | ------ |
59
- | React | ^19 |
60
- | Vite | ^7 |
61
- | TypeScript | ~5.9 |
62
- | Tailwind CSS | v4 |
63
- | React Router | ^7 |
64
- | TanStack Query | ^5 |
65
- | @farmzone/fz-react-ui | latest |
66
- | react-hook-form + zod | 최신 |
29
+ | 항목 | 버전 |
30
+ | --------------------- | ------- |
31
+ | React | ^19 |
32
+ | Vite | ^7 |
33
+ | TypeScript | ~5.9 |
34
+ | Tailwind CSS | ^4 |
35
+ | React Router | ^7 |
36
+ | TanStack Query | ^5 |
37
+ | @farmzone/fz-react-ui | ^0.0.6 |
38
+ | react-hook-form | ^7 |
39
+ | zod | ^3 |
40
+ | Zustand | ^5 |
41
+ | axios | ^1 |
42
+ | dayjs | ^1 |
43
+ | MSW | ^2 |
44
+ | lucide-react | ^1 |
67
45
 
68
46
  ## 메뉴 추가
69
47
 
70
- `src/app/layout/menu.ts` 수정:
48
+ `src/app/layout/menu.ts`의 `MENU_SECTIONS` 배열에 추가:
71
49
 
72
50
  ```ts
73
- import { LayoutDashboard, Users, ScrollText } from "lucide-react";
51
+ import type { MenuSection } from "@farmzone/fz-react-ui";
52
+ import { LayoutDashboard, Users, FileText, ScrollText } from "lucide-react";
74
53
 
75
- export const MENU_SECTIONS: MenuSection[] = [
76
- {
77
- items: [{ icon: LayoutDashboard, label: "대시보드", path: "/" }],
78
- },
54
+ export const MENU_SECTIONS: Array<MenuSection> = [
79
55
  {
80
- title: "관리",
81
56
  items: [
82
- { icon: Users, label: "사용자 관리", path: "/user" },
83
- { icon: ScrollText, label: "로그", path: "/log" },
57
+ { icon: LayoutDashboard, label: "대시보드", path: "/" },
58
+ {
59
+ icon: FileText,
60
+ label: "게시글 관리",
61
+ children: [{ label: "게시글 관리", path: "/post" }],
62
+ },
63
+ {
64
+ icon: Users,
65
+ label: "사용자 관리",
66
+ children: [{ label: "사용자 관리", path: "/user" }],
67
+ },
84
68
  ],
85
69
  },
70
+ {
71
+ title: "시스템",
72
+ items: [{ icon: ScrollText, label: "로그 관리", path: "/system/log" }],
73
+ },
86
74
  ];
87
75
  ```
88
76
 
77
+ `children` 배열을 사용하면 아코디언 서브메뉴로 렌더링됩니다.
78
+
89
79
  ## 라우트 추가
90
80
 
91
81
  `src/app/router/Router.tsx`의 `children` 배열에 추가:
@@ -93,12 +83,18 @@ export const MENU_SECTIONS: MenuSection[] = [
93
83
  ```tsx
94
84
  children: [
95
85
  { index: true, element: <DashboardPage /> },
96
- { path: "user", element: <UserListPage /> },
97
- { path: "user/:id", element: <UserDetailPage /> },
98
- { path: "log", element: <LogPage /> },
86
+ { path: "sample", element: <SamplePage /> },
87
+ { path: "sample/modal", element: <SampleModalPage /> },
88
+ { path: "sample/:id", element: <SampleDetailPage /> },
89
+ { path: "post", element: <PostPage /> },
90
+ { path: "post/:id", element: <PostDetailPage /> },
91
+ { path: "user", element: <UserPage /> },
92
+ { path: "system/log", element: <LogPage /> },
99
93
  ],
100
94
  ```
101
95
 
96
+ `/login` 경로와 `authLoader`(토큰 미존재 시 `/login` 리다이렉트)는 Router.tsx에 이미 포함되어 있습니다.
97
+
102
98
  ## npm 배포
103
99
 
104
100
  ```bash
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farmzone/fz-template-react",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "Farmzone React 프로젝트 보일러플레이트 생성 CLI",
5
5
  "type": "module",
6
6
  "bin": {
@@ -1,5 +1,5 @@
1
- # API 서버 호스트 (예: http://localhost:8080)
2
- VITE_APP_API_HOST=http://localhost:8080
3
-
4
- # API 버전 (예: v1)
5
- VITE_APP_API_VERSION=v1
1
+ # API 서버 호스트 (예: http://localhost:8080)
2
+ VITE_APP_API_HOST=http://localhost:8080
3
+
4
+ # API 버전 (예: v1)
5
+ VITE_APP_API_VERSION=v1
@@ -1,55 +1,55 @@
1
- {
2
- "name": "__PROJECT_NAME__",
3
- "private": true,
4
- "version": "1.0.3",
5
- "type": "module",
6
- "scripts": {
7
- "dev": "vite --host 0.0.0.0 --port 5000",
8
- "build": "tsc -b && vite build",
9
- "lint": "eslint .",
10
- "preview": "vite preview"
11
- },
12
- "dependencies": {
13
- "@farmzone/fz-react-ui": "^0.0.6",
14
- "@hookform/resolvers": "^5.2.2",
15
- "@tanstack/react-query": "^5.90.0",
16
- "axios": "^1.13.0",
17
- "dayjs": "^1.11.21",
18
- "es-toolkit": "^1.47.0",
19
- "js-cookie": "^3.0.8",
20
- "lucide-react": "^1.16.0",
21
- "react": "^19.0.0",
22
- "react-daum-postcode": "^4.0.0",
23
- "react-dom": "^19.0.0",
24
- "react-hook-form": "^7.68.0",
25
- "react-router": "^7.11.0",
26
- "uuid": "^14.0.0",
27
- "zod": "^3.25.0",
28
- "zustand": "^5.0.14"
29
- },
30
- "devDependencies": {
31
- "@eslint/js": "^9.0.0",
32
- "@tailwindcss/vite": "^4.1.0",
33
- "@types/js-cookie": "^3.0.6",
34
- "@types/node": "^22.0.0",
35
- "@types/react": "^19.0.0",
36
- "@types/react-dom": "^19.0.0",
37
- "@types/uuid": "^11.0.0",
38
- "@vitejs/plugin-react": "^5.1.0",
39
- "eslint": "^9.0.0",
40
- "eslint-plugin-react-hooks": "^5.0.0",
41
- "eslint-plugin-react-refresh": "^0.4.0",
42
- "globals": "^16.0.0",
43
- "msw": "^2.14.6",
44
- "tailwindcss": "^4.0.0",
45
- "tw-animate-css": "^1.0.0",
46
- "typescript": "~5.9.0",
47
- "typescript-eslint": "^8.0.0",
48
- "vite": "^7.0.0"
49
- },
50
- "msw": {
51
- "workerDirectory": [
52
- "public"
53
- ]
54
- }
55
- }
1
+ {
2
+ "name": "__PROJECT_NAME__",
3
+ "private": true,
4
+ "version": "1.0.5",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite --host 0.0.0.0 --port 5000",
8
+ "build": "tsc -b && vite build",
9
+ "lint": "eslint .",
10
+ "preview": "vite preview"
11
+ },
12
+ "dependencies": {
13
+ "@farmzone/fz-react-ui": "^0.0.8",
14
+ "@hookform/resolvers": "^5.2.2",
15
+ "@tanstack/react-query": "^5.90.0",
16
+ "axios": "^1.13.0",
17
+ "dayjs": "^1.11.21",
18
+ "es-toolkit": "^1.47.0",
19
+ "js-cookie": "^3.0.8",
20
+ "lucide-react": "^1.16.0",
21
+ "react": "^19.0.0",
22
+ "react-daum-postcode": "^4.0.0",
23
+ "react-dom": "^19.0.0",
24
+ "react-hook-form": "^7.68.0",
25
+ "react-router": "^7.11.0",
26
+ "uuid": "^14.0.0",
27
+ "zod": "^3.25.0",
28
+ "zustand": "^5.0.14"
29
+ },
30
+ "devDependencies": {
31
+ "@eslint/js": "^9.0.0",
32
+ "@tailwindcss/vite": "^4.1.0",
33
+ "@types/js-cookie": "^3.0.6",
34
+ "@types/node": "^22.0.0",
35
+ "@types/react": "^19.0.0",
36
+ "@types/react-dom": "^19.0.0",
37
+ "@types/uuid": "^11.0.0",
38
+ "@vitejs/plugin-react": "^5.1.0",
39
+ "eslint": "^9.0.0",
40
+ "eslint-plugin-react-hooks": "^5.0.0",
41
+ "eslint-plugin-react-refresh": "^0.4.0",
42
+ "globals": "^16.0.0",
43
+ "msw": "^2.14.6",
44
+ "tailwindcss": "^4.0.0",
45
+ "tw-animate-css": "^1.0.0",
46
+ "typescript": "~5.9.0",
47
+ "typescript-eslint": "^8.0.0",
48
+ "vite": "^7.0.0"
49
+ },
50
+ "msw": {
51
+ "workerDirectory": [
52
+ "public"
53
+ ]
54
+ }
55
+ }