@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.
- package/README.md +46 -50
- package/package.json +1 -1
- package/template/.env.example +5 -5
- package/template/package.json +55 -55
- package/template/pnpm-lock.yaml +4214 -4214
- package/template/public/mockServiceWorker.js +349 -349
- package/template/src/app/api/api.ts +178 -178
- package/template/src/app/api/queries.ts +326 -321
- package/template/src/app/api/queryKey.ts +7 -7
- package/template/src/app/api/token.ts +7 -7
- package/template/src/app/layout/Layout.tsx +33 -33
- package/template/src/app/layout/ListContents.tsx +9 -9
- package/template/src/app/layout/ListHeader.tsx +41 -41
- package/template/src/app/layout/MultiTabNav.tsx +101 -101
- package/template/src/app/layout/Sidebar.tsx +33 -33
- package/template/src/app/layout/UserInfo.tsx +94 -94
- package/template/src/app/layout/tabSwitchStore.ts +11 -11
- package/template/src/app/router/Router.tsx +56 -56
- package/template/src/app/store/index.ts +26 -26
- package/template/src/index.tsx +21 -21
- package/template/src/mocks/browser.ts +17 -17
- package/template/src/mocks/handlers.ts +43 -43
- package/template/src/mocks/scenarios.ts +57 -57
- package/template/src/pages/dashboard/index.tsx +541 -541
- package/template/src/pages/error/Error.tsx +29 -29
- package/template/src/pages/error/NotFound.tsx +27 -27
- package/template/src/pages/login/index.tsx +317 -317
- package/template/src/pages/post/PostFormModal.tsx +128 -128
- package/template/src/pages/post/detail/index.tsx +548 -548
- package/template/src/pages/post/index.tsx +266 -267
- package/template/src/pages/sample/SampleFormModal.tsx +115 -77
- package/template/src/pages/sample/detail/index.tsx +400 -424
- package/template/src/pages/sample/index.tsx +278 -269
- package/template/src/pages/sample/modal/index.tsx +300 -253
- package/template/src/pages/system/log/index.tsx +173 -173
- package/template/src/pages/user/config/columns.tsx +102 -109
- package/template/src/pages/user/config/schema.ts +54 -54
- package/template/src/pages/user/index.tsx +641 -641
- package/template/src/shared/components/CommentInput.tsx +243 -243
- package/template/src/shared/config/text.ts +27 -27
- package/template/src/shared/utils/format.ts +11 -11
- package/template/src/types/auth.ts +10 -10
- package/template/src/types/comment.ts +33 -33
- package/template/src/types/common.ts +19 -19
- package/template/src/types/dashboard.ts +53 -53
- package/template/src/types/index.ts +16 -16
- package/template/src/types/log.ts +21 -21
- package/template/src/types/post.ts +32 -32
- package/template/src/types/sample.ts +29 -28
- package/template/src/types/user.ts +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 |
|
|
63
|
-
| React Router | ^7
|
|
64
|
-
| TanStack Query | ^5
|
|
65
|
-
| @farmzone/fz-react-ui |
|
|
66
|
-
| react-hook-form
|
|
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 {
|
|
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:
|
|
83
|
-
{
|
|
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: "
|
|
97
|
-
{ path: "
|
|
98
|
-
{ path: "
|
|
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
package/template/.env.example
CHANGED
|
@@ -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
|
package/template/package.json
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "__PROJECT_NAME__",
|
|
3
|
-
"private": true,
|
|
4
|
-
"version": "1.0.
|
|
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.
|
|
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
|
+
}
|