@axboot-mcp/mcp-server 1.0.0
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/CLAUDE.md +119 -0
- package/MCP_TOOL_PLAN.md +710 -0
- package/MCP_USAGE.md +914 -0
- package/README.md +168 -0
- package/REPOSITORY_CONVENTIONS.md +250 -0
- package/SEARCH_PARAMS_MCP_TOOL_COMPLETE_PLAN.md +646 -0
- package/SEARCH_PARAMS_PLAN.md +2570 -0
- package/STORE_PATTERNS.md +1178 -0
- package/debug-dto.js +72 -0
- package/generate-banner-store.js +62 -0
- package/generation-plan.json +2176 -0
- package/generation-results.json +1817 -0
- package/package.json +45 -0
- package/scripts/batch-generate-all.js +159 -0
- package/scripts/batch-generate-mcp.js +329 -0
- package/scripts/batch-generate-stores-v2.js +272 -0
- package/scripts/batch-generate-stores.js +179 -0
- package/scripts/batch-plan.json +3810 -0
- package/scripts/batch-process.py +90 -0
- package/scripts/batch-regenerate.js +356 -0
- package/scripts/direct-generate.js +227 -0
- package/scripts/execute-batches.js +1911 -0
- package/scripts/generate-all-stores.js +144 -0
- package/scripts/generate-stores-mcp.js +161 -0
- package/scripts/generate-stores-v2.js +450 -0
- package/scripts/generate-stores-v3.js +412 -0
- package/scripts/generate-stores-v4.js +521 -0
- package/scripts/generate-stores.js +382 -0
- package/scripts/repos-to-process.json +1899 -0
- package/src/config/nh-layout-patterns.ts +166 -0
- package/src/docs/HOOK_GENERATION_PLAN.md +2226 -0
- package/src/docs/NH_STORE_PATTERNS.md +297 -0
- package/src/docs/README.md +216 -0
- package/src/docs/index.ts +28 -0
- package/src/docs/loader.ts +568 -0
- package/src/docs/patterns.json +419 -0
- package/src/docs/practical-examples.md +732 -0
- package/src/docs/quick-start.md +257 -0
- package/src/docs/requirements-analysis-guide.md +364 -0
- package/src/docs/rules.json +321 -0
- package/src/docs/store-pattern-analysis.md +664 -0
- package/src/docs/store-patterns-rules.md +1168 -0
- package/src/docs/store-patterns-usage-guide.md +1835 -0
- package/src/docs/troubleshooting.md +544 -0
- package/src/docs/type-selection-guide.md +572 -0
- package/src/docs//354/202/254/354/232/251/353/262/225/AntD-/354/273/264/355/217/254/353/204/214/355/212/270-/354/202/254/354/232/251/353/262/225.md +1515 -0
- package/src/docs//354/202/254/354/232/251/353/262/225/DataGrid-/354/202/254/354/232/251/353/262/225.md +866 -0
- package/src/docs//354/202/254/354/232/251/353/262/225/FormItem-/354/202/254/354/232/251/353/262/225.md +903 -0
- package/src/docs//354/202/254/354/232/251/353/262/225/FormModal-/354/202/254/354/232/251/353/262/225.md +1155 -0
- package/src/docs//354/202/254/354/232/251/353/262/225/MCP-/353/260/224/354/235/264/353/270/214/354/275/224/353/224/251-/352/260/200/354/235/264/353/223/234.md +1133 -0
- package/src/docs//354/202/254/354/232/251/353/262/225/MSW-Mock-/353/215/260/354/235/264/355/204/260-/354/202/254/354/232/251/353/262/225.md +579 -0
- package/src/docs//354/202/254/354/232/251/353/262/225/Search-/354/273/264/355/217/254/353/204/214/355/212/270-/354/202/254/354/232/251/353/262/225.md +738 -0
- package/src/docs//354/202/254/354/232/251/353/262/225/Store-/355/214/250/355/204/264-/354/202/254/354/232/251/353/262/225.md +1135 -0
- package/src/docs//354/202/254/354/232/251/353/262/225//355/231/224/353/251/264/352/265/254/354/204/261-/355/203/200/354/236/205/353/263/204-/352/260/234/353/260/234/354/210/234/354/204/234.md +1805 -0
- package/src/docs//354/202/254/354/232/251/353/262/225//355/231/224/353/251/264/355/203/200/354/236/205/353/263/204-/352/260/234/353/260/234-/355/224/204/353/241/254/355/224/204/355/212/270-/352/260/200/354/235/264/353/223/234.md +946 -0
- package/src/docs//354/202/254/354/232/251/353/262/225//355/231/225/354/236/245/355/231/224/353/251/264/355/203/200/354/236/205/353/263/204-/354/203/201/354/204/270-/355/224/204/353/241/254/355/224/204/355/212/270/352/260/200/354/235/264/353/223/234.md +2422 -0
- package/src/features/store-features.ts +232 -0
- package/src/handlers/analyze-requirements.ts +403 -0
- package/src/handlers/analyze.ts +1373 -0
- package/src/handlers/generate-from-requirements.ts +250 -0
- package/src/handlers/generate-hook.ts +950 -0
- package/src/handlers/generate-interactive.ts +840 -0
- package/src/handlers/generate-listdatagrid.ts +521 -0
- package/src/handlers/generate-multi-stores.ts +577 -0
- package/src/handlers/generate-requirements-from-layout.ts +160 -0
- package/src/handlers/generate-search-params.ts +717 -0
- package/src/handlers/generate.ts +911 -0
- package/src/handlers/list-templates.ts +104 -0
- package/src/handlers/scan-metadata.ts +485 -0
- package/src/handlers/suggest-layout.ts +326 -0
- package/src/index.ts +959 -0
- package/src/prompts/search-params.md +793 -0
- package/src/templates/index.ts +107 -0
- package/src/templates/unified.ts +462 -0
- package/store-generation-error-patterns.md +225 -0
- package/test/useAgentStore.ts +136 -0
- package/test-server.js +78 -0
- package/tsconfig.json +20 -0
package/MCP_USAGE.md
ADDED
|
@@ -0,0 +1,914 @@
|
|
|
1
|
+
# MCP Axboot 사용 가이드
|
|
2
|
+
|
|
3
|
+
MCP Axboot는 NH-FE-B 프레임워크 기반 프로젝트에서 Zustand Store와 React Hook을 자동 생성하는 MCP 서버입니다.
|
|
4
|
+
|
|
5
|
+
## 설치 및 설정
|
|
6
|
+
|
|
7
|
+
### 1. MCP 서버 등록 (Claude Desktop)
|
|
8
|
+
|
|
9
|
+
Claude Desktop 설정 파일에 MCP 서버를 등록합니다.
|
|
10
|
+
|
|
11
|
+
**macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
|
|
12
|
+
**Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
|
|
13
|
+
|
|
14
|
+
```json
|
|
15
|
+
{
|
|
16
|
+
"mcpServers": {
|
|
17
|
+
"mcp-axboot": {
|
|
18
|
+
"command": "node",
|
|
19
|
+
"args": ["/Users/kyle/work/mcp-axboot/dist/index.js"]
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### 2. 빌드
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
cd /Users/kyle/work/mcp-axboot
|
|
29
|
+
npm run build
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## 사용 가능한 도구
|
|
35
|
+
|
|
36
|
+
| 도구 | 설명 |
|
|
37
|
+
|------|------|
|
|
38
|
+
| `generate_store_and_hook_interactive` | ⭐ 대화형 생성 (파일명 검색, 경로 제안) |
|
|
39
|
+
| `analyze_interface` | 인터페이스 Repository 파일 분석 |
|
|
40
|
+
| `generate_store` | Zustand Store 파일 생성 (통합 템플릿 사용) |
|
|
41
|
+
| `generate_hook` | React Hook 파일 생성 |
|
|
42
|
+
| `generate_store_and_hook` | Store와 Hook 동시 생성 |
|
|
43
|
+
| `analyze_requirements` | 자연어 요구사항 분석 |
|
|
44
|
+
| `generate_store_from_requirements` | 요구사항 기반 Store 자동 생성 |
|
|
45
|
+
| `generate_multi_stores` | 다중 리스트 통합 Store 생성 |
|
|
46
|
+
| `detect_multi_list_pattern` | 다중 리스트 패턴 감지 |
|
|
47
|
+
| `list_layouts` | NH 레이아웃 패턴 목록 조회 |
|
|
48
|
+
| `suggest_layout` | 적합한 레이아웃 패턴 추천 |
|
|
49
|
+
| `generate_requirements_from_layout` | 레이아웃 기반 요구사항 생성 |
|
|
50
|
+
| `generate_search_params` | SearchParams JSX 코드 생성 |
|
|
51
|
+
| `generate_listdatagrid` | ListDataGrid 컴포넌트 생성 |
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## Store 타입
|
|
56
|
+
|
|
57
|
+
| 타입 | 이름 | 설명 | 사용 사례 |
|
|
58
|
+
|------|------|------|-----------|
|
|
59
|
+
| 1 | 기본 리스트 + 상세 | 선택된 항목의 상세 정보 표시, 저장/수정 지원 | 회원 목록, 상품 목록 |
|
|
60
|
+
| 2 | 마스터-디테일 + 모달 + 삭제 | 왼쪽 리스트, 오른쪽 상세, 모달, 삭제 기능 | B2B 상품, 견적 상담 |
|
|
61
|
+
| 3 | 트리 기반 | 트리 구조 데이터, 펼치기/접기, 저장 지원 | 카테고리 관리, 메뉴 관리 |
|
|
62
|
+
| 4 | 대시보드 | 여러 개의 리스트와 요약 정보, 탭 전환 | 회원 대시보드, 주문 대시보드 |
|
|
63
|
+
| 5 | 단순 리스트 | 최소한의 기능만 있는 단순 리스트 | 참조 데이터 조회 |
|
|
64
|
+
| 6 | 재정렬 가능 리스트 | 드래그 앤 드롭으로 순서 변경 가능 | 팝업 메뉴, 배너 순서 |
|
|
65
|
+
| 7 | 마스터-디테일 + 모달 + 삭제 + 엑셀 | 왼쪽 리스트, 오른쪽 상세, 모달, 삭제, 엑셀 다운로드 | B2B 견적 상담, 주문 관리 |
|
|
66
|
+
| 8 | 리스트 + 선택 + 엑셀 다운로드 | 선택 아이템, 체크박스, 엑셀 다운로드 (상세 없음) | 주문 전체 조회, 결제 조회 |
|
|
67
|
+
| 9 | 마스터-디테일 + 모달 + 상세조회 API | 왼쪽 리스트, 오른쪽 상세, 모달, 상세 조회 API 호출 | 직배송 구독, 상담 내역 |
|
|
68
|
+
| 10 | 마스터-디테일 + 엑셀 다운로드 | 선택된 행 표시, 엑셀 다운로드 (상세/모달 없음) | 상품 그룹 마스터, 분류 관리 |
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 사용 예시
|
|
73
|
+
|
|
74
|
+
### ⭐ 대화형 생성 (추천) - 파일명만 입력
|
|
75
|
+
|
|
76
|
+
파일명만 말하면 자동으로 검색하고 경로를 제안합니다.
|
|
77
|
+
|
|
78
|
+
#### 예시 1: 한글 자연어 (회원리포)
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
👤 사용자: 회원리포로 Store랑 Hook 만들어줘.
|
|
82
|
+
|
|
83
|
+
🤖 Claude: [자연어 분석 중...]
|
|
84
|
+
|
|
85
|
+
🔍 자연어 분석:
|
|
86
|
+
"회원리포" → Member
|
|
87
|
+
|
|
88
|
+
📁 발견된 Repository:
|
|
89
|
+
1. MemberRepository.ts (Member, 5개 API)
|
|
90
|
+
|
|
91
|
+
📂 생성 경로 제안:
|
|
92
|
+
Store: src/stores/useMemberListStore.ts
|
|
93
|
+
Hook: src/hooks/useMemberService.ts
|
|
94
|
+
|
|
95
|
+
이 경로들로 생성할까요?
|
|
96
|
+
|
|
97
|
+
👤 사용자: 응
|
|
98
|
+
|
|
99
|
+
🤖 Claude: 네, 생성을 시작합니다.
|
|
100
|
+
|
|
101
|
+
✅ Store 생성 완료: src/stores/useMemberListStore.ts
|
|
102
|
+
✅ Hook 생성 완료: src/hooks/useMemberService.ts
|
|
103
|
+
|
|
104
|
+
타입 체크 통과!
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
#### 예시 2: 한글 자연어 (배너리포)
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
👤 사용자: 배너리포 분석해서 Store랑 Hook 생성해줘.
|
|
111
|
+
|
|
112
|
+
🤖 Claude: [자연어 분석 중...]
|
|
113
|
+
|
|
114
|
+
🔍 자연어 분석:
|
|
115
|
+
"배너리포" → Banner
|
|
116
|
+
|
|
117
|
+
📁 발견된 Repository:
|
|
118
|
+
1. BannerRepository.ts (Banner, 4개 API)
|
|
119
|
+
|
|
120
|
+
📂 생성 경로 제안:
|
|
121
|
+
Store: src/stores/useBannerListStore.ts
|
|
122
|
+
Hook: src/hooks/useBannerService.ts
|
|
123
|
+
|
|
124
|
+
이 경로들로 생성할까요?
|
|
125
|
+
|
|
126
|
+
👤 사용자: 확인
|
|
127
|
+
|
|
128
|
+
🤖 Claude: 네, 생성을 시작합니다.
|
|
129
|
+
|
|
130
|
+
✅ Store 생성 완료: src/stores/useBannerListStore.ts
|
|
131
|
+
✅ Hook 생성 완료: src/hooks/useBannerService.ts
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
#### 예시 3: 한글 자연어 (거래처리포)
|
|
135
|
+
|
|
136
|
+
```
|
|
137
|
+
👤 사용자: 거래처리포로 Store랑 Hook 만들어줘.
|
|
138
|
+
|
|
139
|
+
🤖 Claude: [자연어 분석 중...]
|
|
140
|
+
|
|
141
|
+
🔍 자연어 분석:
|
|
142
|
+
"거래처리포" → Customer 또는 Partner 또는 Client 또는 Supplier
|
|
143
|
+
|
|
144
|
+
📁 발견된 Repository:
|
|
145
|
+
1. CustomerRepository.ts (Customer, 6개 API)
|
|
146
|
+
2. PartnerRepository.ts (Partner, 3개 API)
|
|
147
|
+
|
|
148
|
+
어느 파일을 사용할까요?
|
|
149
|
+
|
|
150
|
+
👤 사용자: 1번
|
|
151
|
+
|
|
152
|
+
🤖 Claude: 1번 CustomerRepository.ts를 선택합니다.
|
|
153
|
+
|
|
154
|
+
📂 생성 경로 제안:
|
|
155
|
+
Store: src/stores/useCustomerListStore.ts
|
|
156
|
+
Hook: src/hooks/useCustomerService.ts
|
|
157
|
+
|
|
158
|
+
이 경로들로 생성할까요?
|
|
159
|
+
|
|
160
|
+
👤 사용자: Store는 src/stores/customer/store.ts로 바꿔줘
|
|
161
|
+
|
|
162
|
+
🤖 Claude: 네, 경로를 변경해서 생성합니다.
|
|
163
|
+
|
|
164
|
+
✅ Store 생성 완료: src/stores/customer/store.ts
|
|
165
|
+
✅ Hook 생성 완료: src/hooks/useCustomerService.ts
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
#### 예시 4: 한글 자연어 (제품리포)
|
|
169
|
+
|
|
170
|
+
```
|
|
171
|
+
👤 사용자: 제품리포 기반으로 Store랑 Hook 생성해줘.
|
|
172
|
+
|
|
173
|
+
🤖 Claude: [자연어 분석 중...]
|
|
174
|
+
|
|
175
|
+
🔍 자연어 분석:
|
|
176
|
+
"제품리포" → Product
|
|
177
|
+
|
|
178
|
+
📁 발견된 Repository:
|
|
179
|
+
1. ProductRepository.ts (Product, 7개 API)
|
|
180
|
+
|
|
181
|
+
📂 생성 경로 제안:
|
|
182
|
+
Store: src/stores/useProductListStore.ts
|
|
183
|
+
Hook: src/hooks/useProductService.ts
|
|
184
|
+
|
|
185
|
+
이 경로들로 생성할까요?
|
|
186
|
+
|
|
187
|
+
👤 사용자: 확인
|
|
188
|
+
|
|
189
|
+
🤖 Claude: 네, 생성을 시작합니다.
|
|
190
|
+
|
|
191
|
+
✅ Store 생성 완료: src/stores/useProductListStore.ts
|
|
192
|
+
✅ Hook 생성 완료: src/hooks/useProductService.ts
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
#### 예시 2: 다중 파일 선택
|
|
196
|
+
|
|
197
|
+
```
|
|
198
|
+
👤 사용자: Product Repository 분석해서 Store랑 Hook 만들어줘.
|
|
199
|
+
|
|
200
|
+
🤖 Claude: [파일 검색 중...]
|
|
201
|
+
|
|
202
|
+
📁 발견된 Repository:
|
|
203
|
+
1. ProductRepository.ts (src/services/repository/product/) - 6개 API
|
|
204
|
+
2. ProductRepositoryCustom.ts (src/services/repository/product/) - 9개 API
|
|
205
|
+
|
|
206
|
+
어느 파일을 사용할까요?
|
|
207
|
+
|
|
208
|
+
👤 사용자: 2번
|
|
209
|
+
|
|
210
|
+
🤖 Claude: 2번 ProductRepositoryCustom.ts를 선택합니다.
|
|
211
|
+
|
|
212
|
+
📂 생성 경로 제안:
|
|
213
|
+
Store: src/stores/useProductListStore.ts
|
|
214
|
+
Hook: src/hooks/useProductService.ts
|
|
215
|
+
|
|
216
|
+
이 경로들로 생성할까요?
|
|
217
|
+
|
|
218
|
+
👤 사용자: Store는 src/stores/product/store.ts로 바꿔줘
|
|
219
|
+
|
|
220
|
+
🤖 Claude: 네, 경로를 변경해서 생성합니다.
|
|
221
|
+
|
|
222
|
+
✅ Store 생성 완료: src/stores/product/store.ts
|
|
223
|
+
✅ Hook 생성 완료: src/hooks/useProductService.ts
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
#### 예시 3: 경로만 확인
|
|
227
|
+
|
|
228
|
+
```
|
|
229
|
+
👤 사용자: OrderRepository 기반으로 Store랑 Hook 생성해줘.
|
|
230
|
+
|
|
231
|
+
🤖 Claude: [파일 검색 중...]
|
|
232
|
+
|
|
233
|
+
📁 발견된 Repository:
|
|
234
|
+
1. OrderRepository.ts (src/services/repository/order/)
|
|
235
|
+
|
|
236
|
+
📂 생성 경로 제안:
|
|
237
|
+
Store: src/stores/useOrderListStore.ts
|
|
238
|
+
Hook: src/hooks/useOrderService.ts
|
|
239
|
+
|
|
240
|
+
이 경로들로 생성할까요?
|
|
241
|
+
|
|
242
|
+
👤 사용자: 확인
|
|
243
|
+
|
|
244
|
+
🤖 Claude: 네, 생성을 시작합니다.
|
|
245
|
+
|
|
246
|
+
✅ Store 생성 완료: src/stores/useOrderListStore.ts
|
|
247
|
+
✅ Hook 생성 완료: src/hooks/useOrderService.ts
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
---
|
|
251
|
+
|
|
252
|
+
### 자연어 기반 상세 예시
|
|
253
|
+
|
|
254
|
+
간단한 자연어 요구사항만 입력하면 Store와 Hook을 자동 생성합니다.
|
|
255
|
+
|
|
256
|
+
#### 예시 1: 단일 리스트 (기본)
|
|
257
|
+
|
|
258
|
+
**입력:**
|
|
259
|
+
```javascript
|
|
260
|
+
{
|
|
261
|
+
"interfacePath": "/path/to/ProductRepository.ts",
|
|
262
|
+
"requirements": "목록, 검색, 저장, 삭제"
|
|
263
|
+
}
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
**결과:**
|
|
267
|
+
```
|
|
268
|
+
✅ Store 생성 완료 (Type 2)
|
|
269
|
+
|
|
270
|
+
자동 분석:
|
|
271
|
+
- 목록(리스트), 검색, 저장, 삭제 감지
|
|
272
|
+
- 모달/상세 패턴 적용
|
|
273
|
+
|
|
274
|
+
생성된 파일:
|
|
275
|
+
- src/stores/useProductListStore.ts
|
|
276
|
+
✓ 목록 상태 (listData, listPage)
|
|
277
|
+
✓ 검색 기능 (listRequestValue, callListApi)
|
|
278
|
+
✓ 저장/삭제 (callSaveApi, callDeleteApi)
|
|
279
|
+
✓ 모달 상태 (modalOpen)
|
|
280
|
+
|
|
281
|
+
- src/hooks/useProductService.ts
|
|
282
|
+
✓ getList (목록 조회)
|
|
283
|
+
✓ getDetail (상세 조회)
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
#### 예시 2: 왼쪽 목록 + 오른쪽 상세
|
|
287
|
+
|
|
288
|
+
**입력:**
|
|
289
|
+
```javascript
|
|
290
|
+
{
|
|
291
|
+
"interfacePath": "/path/to/OrderRepository.ts",
|
|
292
|
+
"requirements": "왼쪽 목록, 오른쪽 상세, 저장, 삭제"
|
|
293
|
+
}
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
**결과:**
|
|
297
|
+
```
|
|
298
|
+
✅ 다중 리스트 Store 생성 완료
|
|
299
|
+
|
|
300
|
+
자동 분석:
|
|
301
|
+
- LEFT_DETAIL_LIST 패턴 감지
|
|
302
|
+
- 왼쪽: 목록 + 검색
|
|
303
|
+
- 오른쪽: 상세 + 저장 + 삭제
|
|
304
|
+
|
|
305
|
+
생성된 파일:
|
|
306
|
+
- src/stores/useOrderStore.ts
|
|
307
|
+
✓ leftListData, leftListPage (왼쪽 목록)
|
|
308
|
+
✓ detailData, detailSpinning (오른쪽 상세)
|
|
309
|
+
✓ modalOpen, saveSpinning (저장 모달)
|
|
310
|
+
|
|
311
|
+
- src/hooks/useOrderService.ts
|
|
312
|
+
✓ getList (왼쪽 목록)
|
|
313
|
+
✓ getDetail (오른쪽 상세)
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
#### 예시 3: 상단/하단 목록
|
|
317
|
+
|
|
318
|
+
**입력:**
|
|
319
|
+
```javascript
|
|
320
|
+
{
|
|
321
|
+
"interfacePath": "/path/to/CustomerRepository.ts",
|
|
322
|
+
"requirements": "상단 고객 목록, 하단 주문 내역, 각각 검색"
|
|
323
|
+
}
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
**결과:**
|
|
327
|
+
```
|
|
328
|
+
✅ 다중 리스트 Store 생성 완료
|
|
329
|
+
|
|
330
|
+
자동 분석:
|
|
331
|
+
- MULTI_PANEL 패턴 감지
|
|
332
|
+
- 상단: 고객 목록 + 검색
|
|
333
|
+
- 하단: 주문 내역 + 검색
|
|
334
|
+
|
|
335
|
+
생성된 파일:
|
|
336
|
+
- src/stores/useCustomerStore.ts
|
|
337
|
+
✓ topListData, topListPage (상단)
|
|
338
|
+
✓ bottomListData, bottomListPage (하단)
|
|
339
|
+
✓ topListRequestValue, bottomListRequestValue
|
|
340
|
+
|
|
341
|
+
- src/hooks/useCustomerService.ts
|
|
342
|
+
✓ getTopList (고객 목록)
|
|
343
|
+
✓ getBottomList (주문 내역)
|
|
344
|
+
```
|
|
345
|
+
|
|
346
|
+
#### 예시 4: 엑셀 다운로드 포함
|
|
347
|
+
|
|
348
|
+
**입력:**
|
|
349
|
+
```javascript
|
|
350
|
+
{
|
|
351
|
+
"interfacePath": "/path/to/MemberRepository.ts",
|
|
352
|
+
"requirements": "목록, 검색, 엑셀 다운로드"
|
|
353
|
+
}
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
**결과:**
|
|
357
|
+
```
|
|
358
|
+
✅ Store 생성 완료 (Type 8)
|
|
359
|
+
|
|
360
|
+
자동 분석:
|
|
361
|
+
- 목록, 검색, 엑셀 감지
|
|
362
|
+
- 선택 + 엑셀 패턴 적용
|
|
363
|
+
|
|
364
|
+
생성된 파일:
|
|
365
|
+
- src/stores/useMemberListStore.ts
|
|
366
|
+
✓ listData, listPage, checkedRowKeys
|
|
367
|
+
✓ callExcelDownloadApi
|
|
368
|
+
|
|
369
|
+
- src/hooks/useMemberService.ts
|
|
370
|
+
✓ getList (목록 조회)
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+
---
|
|
374
|
+
|
|
375
|
+
### 개별 도구 사용법
|
|
376
|
+
|
|
377
|
+
아래는 각 도구를 개별적으로 사용하는 방법입니다. (참고용)
|
|
378
|
+
|
|
379
|
+
---
|
|
380
|
+
|
|
381
|
+
### 1. 인터페이스 분석
|
|
382
|
+
|
|
383
|
+
Repository 파일을 분석하여 Service 메서드와 타입 정보를 추출합니다.
|
|
384
|
+
|
|
385
|
+
```javascript
|
|
386
|
+
// Claude 대화에서 입력
|
|
387
|
+
{
|
|
388
|
+
"interfacePath": "/Users/kyle/Desktop/nh-fe-bo/src/services/repository/member/MemberRepository.ts"
|
|
389
|
+
}
|
|
390
|
+
```
|
|
391
|
+
|
|
392
|
+
**결과:**
|
|
393
|
+
```json
|
|
394
|
+
{
|
|
395
|
+
"success": true,
|
|
396
|
+
"className": "MemberRepository",
|
|
397
|
+
"serviceName": "MemberService",
|
|
398
|
+
"methods": [
|
|
399
|
+
{
|
|
400
|
+
"name": "postMemberListMember",
|
|
401
|
+
"requestType": "PostMemberListMemberRequest",
|
|
402
|
+
"responseType": "PostMemberListMemberResponse",
|
|
403
|
+
"isListMethod": true,
|
|
404
|
+
"hasPage": true,
|
|
405
|
+
"comment": "/* 회원 목록 */"
|
|
406
|
+
}
|
|
407
|
+
]
|
|
408
|
+
}
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
---
|
|
412
|
+
|
|
413
|
+
### 2. Store 생성
|
|
414
|
+
|
|
415
|
+
통합 템플릿을 사용하여 Store를 생성합니다.
|
|
416
|
+
|
|
417
|
+
```javascript
|
|
418
|
+
{
|
|
419
|
+
"interfacePath": "/Users/kyle/Desktop/nh-fe-bo/src/services/repository/member/MemberRepository.ts",
|
|
420
|
+
"outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/stores/useMemberListStore.ts",
|
|
421
|
+
"storeName": "useMemberListStore"
|
|
422
|
+
}
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
**생성되는 파일:** `src/stores/useMemberListStore.ts`
|
|
426
|
+
|
|
427
|
+
---
|
|
428
|
+
|
|
429
|
+
### 3. Hook 생성
|
|
430
|
+
|
|
431
|
+
Repository 파일에서 "목록/조회" API만 추출하여 React Hook을 생성합니다.
|
|
432
|
+
|
|
433
|
+
```javascript
|
|
434
|
+
{
|
|
435
|
+
"interfacePath": "/Users/kyle/Desktop/nh-fe-bo/src/services/repository/member/MemberRepository.ts",
|
|
436
|
+
"outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/hooks/useMemberService.ts"
|
|
437
|
+
}
|
|
438
|
+
```
|
|
439
|
+
|
|
440
|
+
**특징:**
|
|
441
|
+
- 제외 키워드: "저장", "삭제", "수정", "엑셀", "업로드", "다운로드"
|
|
442
|
+
- 포함 키워드: "조회", "목록"
|
|
443
|
+
- 목록 API (`ds: Type[]`) → `list` 상태
|
|
444
|
+
- 단건 API (`rs: Type`) → `detail` 상태
|
|
445
|
+
- `hasPage` 있으면 `page`, `setPage` 생성
|
|
446
|
+
|
|
447
|
+
---
|
|
448
|
+
|
|
449
|
+
### 4. Store와 Hook 동시 생성
|
|
450
|
+
|
|
451
|
+
```javascript
|
|
452
|
+
{
|
|
453
|
+
"interfacePath": "/Users/kyle/Desktop/nh-fe-bo/src/services/repository/member/MemberRepository.ts",
|
|
454
|
+
"storeOutputPath": "/Users/kyle/Desktop/nh-fe-bo/src/stores/useMemberListStore.ts",
|
|
455
|
+
"hookOutputPath": "/Users/kyle/Desktop/nh-fe-bo/src/hooks/useMemberService.ts",
|
|
456
|
+
"storeName": "useMemberListStore"
|
|
457
|
+
}
|
|
458
|
+
```
|
|
459
|
+
|
|
460
|
+
**결과:**
|
|
461
|
+
```
|
|
462
|
+
✅ Store 및 Hook 생성 완료
|
|
463
|
+
|
|
464
|
+
엔티티: Member
|
|
465
|
+
|
|
466
|
+
생성된 파일:
|
|
467
|
+
- /Users/kyle/Desktop/nh-fe-bo/src/stores/useMemberListStore.ts (Store)
|
|
468
|
+
- /Users/kyle/Desktop/nh-fe-bo/src/hooks/useMemberService.ts (Hook)
|
|
469
|
+
|
|
470
|
+
Store: 타입 체크 통과
|
|
471
|
+
Hook: 타입 체크 통과
|
|
472
|
+
```
|
|
473
|
+
|
|
474
|
+
---
|
|
475
|
+
|
|
476
|
+
### 5. 요구사항 분석 (자연어)
|
|
477
|
+
|
|
478
|
+
자연어 요구사항을 분석하여 적합한 Store 타입과 피처를 추천합니다.
|
|
479
|
+
|
|
480
|
+
```javascript
|
|
481
|
+
{
|
|
482
|
+
"requirements": "왼쪽 목록, 오른쪽 상세, 모달로 저장, 삭제 가능, 엑셀 다운로드"
|
|
483
|
+
}
|
|
484
|
+
```
|
|
485
|
+
|
|
486
|
+
**결과:**
|
|
487
|
+
```json
|
|
488
|
+
{
|
|
489
|
+
"success": true,
|
|
490
|
+
"recommendedType": 7,
|
|
491
|
+
"recommendedTypeName": "마스터-디테일 + 모달 + 삭제 + 엑셀",
|
|
492
|
+
"detectedFeatures": ["LIST", "DETAIL_PANEL", "MODAL", "DELETE", "EXCEL_DOWNLOAD"]
|
|
493
|
+
}
|
|
494
|
+
```
|
|
495
|
+
|
|
496
|
+
---
|
|
497
|
+
|
|
498
|
+
### 6. 요구사항 기반 Store 자동 생성
|
|
499
|
+
|
|
500
|
+
```javascript
|
|
501
|
+
{
|
|
502
|
+
"interfacePath": "/Users/kyle/Desktop/nh-fe-bo/src/services/repository/order/OrderRepository.ts",
|
|
503
|
+
"outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/stores/useOrderStore.ts",
|
|
504
|
+
"requirements": "왼쪽 주문 목록, 상단 주문 상세 목록, 하단 주문 항목 목록, 각 목록은 검색과 엑셀 다운로드, 하단은 체크박스"
|
|
505
|
+
}
|
|
506
|
+
```
|
|
507
|
+
|
|
508
|
+
---
|
|
509
|
+
|
|
510
|
+
### 7. 다중 리스트 통합 Store 생성
|
|
511
|
+
|
|
512
|
+
```javascript
|
|
513
|
+
{
|
|
514
|
+
"interfacePath": "/Users/kyle/Desktop/nh-fe-bo/src/services/repository/order/OrderRepository.ts",
|
|
515
|
+
"outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/stores/useOrderStore.ts",
|
|
516
|
+
"requirements": "왼쪽 목록, 상단 디테일 목록, 하단 디테일 목록, 각 목록은 검색과 엑셀 다운로드, 하단은 체크박스",
|
|
517
|
+
"baseStoreName": "useOrderStore"
|
|
518
|
+
}
|
|
519
|
+
```
|
|
520
|
+
|
|
521
|
+
---
|
|
522
|
+
|
|
523
|
+
### 8. 다중 리스트 패턴 감지
|
|
524
|
+
|
|
525
|
+
```javascript
|
|
526
|
+
{
|
|
527
|
+
"requirements": "왼쪽 목록, 상단 디테일 목록, 하단 디테일 목록, 각 목록은 검색과 엑셀 다운로드, 하단은 체크박스"
|
|
528
|
+
}
|
|
529
|
+
```
|
|
530
|
+
|
|
531
|
+
**결과:**
|
|
532
|
+
```json
|
|
533
|
+
{
|
|
534
|
+
"success": true,
|
|
535
|
+
"isMultiList": true,
|
|
536
|
+
"pattern": {
|
|
537
|
+
"leftList": { "name": "목록", "features": ["LIST", "SEARCH", "EXCEL_DOWNLOAD"] },
|
|
538
|
+
"topDetail": { "name": "디테일 목록", "features": ["LIST", "SEARCH", "EXCEL_DOWNLOAD"] },
|
|
539
|
+
"bottomDetail": { "name": "디테일 목록", "features": ["LIST", "SEARCH", "CHECKBOX", "EXCEL_DOWNLOAD"] }
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
```
|
|
543
|
+
|
|
544
|
+
---
|
|
545
|
+
|
|
546
|
+
### 9. 레이아웃 패턴 기반 요구사항 생성
|
|
547
|
+
|
|
548
|
+
```javascript
|
|
549
|
+
{
|
|
550
|
+
"interfacePath": "/Users/kyle/Desktop/nh-fe-bo/src/services/repository/product/ProductRepository.ts",
|
|
551
|
+
"layoutType": "LEFT_DETAIL_LIST",
|
|
552
|
+
"additional": "상세는 체크박스 지원"
|
|
553
|
+
}
|
|
554
|
+
```
|
|
555
|
+
|
|
556
|
+
---
|
|
557
|
+
|
|
558
|
+
### 10. 레이아웃 패턴 목록 조회
|
|
559
|
+
|
|
560
|
+
```javascript
|
|
561
|
+
{}
|
|
562
|
+
```
|
|
563
|
+
|
|
564
|
+
**결과:**
|
|
565
|
+
```json
|
|
566
|
+
{
|
|
567
|
+
"success": true,
|
|
568
|
+
"layouts": [
|
|
569
|
+
{ "type": "LEFT_DETAIL_FORM", "name": "왼쪽 목록 + 오른쪽 폼", "description": "..." },
|
|
570
|
+
{ "type": "LEFT_DETAIL_LIST", "name": "왼쪽 목록 + 오른쪽 목록", "description": "..." },
|
|
571
|
+
{ "type": "MULTI_PANEL", "name": "다중 패널", "description": "..." }
|
|
572
|
+
]
|
|
573
|
+
}
|
|
574
|
+
```
|
|
575
|
+
|
|
576
|
+
---
|
|
577
|
+
|
|
578
|
+
### 11. 적합한 레이아웃 추천
|
|
579
|
+
|
|
580
|
+
```javascript
|
|
581
|
+
{
|
|
582
|
+
"interfacePath": "/Users/kyle/Desktop/nh-fe-bo/src/services/repository/product/ProductRepository.ts"
|
|
583
|
+
}
|
|
584
|
+
```
|
|
585
|
+
|
|
586
|
+
---
|
|
587
|
+
|
|
588
|
+
### 12. SearchParams 생성
|
|
589
|
+
|
|
590
|
+
```javascript
|
|
591
|
+
{
|
|
592
|
+
"appPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/product/App.tsx",
|
|
593
|
+
"searchParams": {
|
|
594
|
+
"dateRange": {
|
|
595
|
+
"withPeriodType": true,
|
|
596
|
+
"periodOptions": [
|
|
597
|
+
{ "label": "전체", "value": "" },
|
|
598
|
+
{ "label": "오늘", "value": "today" },
|
|
599
|
+
{ "label": "일주일", "value": "week" },
|
|
600
|
+
{ "label": "1개월", "value": "month" }
|
|
601
|
+
],
|
|
602
|
+
"name": "dateRange",
|
|
603
|
+
"label": "등록일",
|
|
604
|
+
"presetType": "all"
|
|
605
|
+
},
|
|
606
|
+
"codes": [
|
|
607
|
+
{ "name": "statusCd", "label": "상태", "codeVar": "STATUS_CODE", "width": 150 },
|
|
608
|
+
{ "name": "useYn", "label": "사용여부", "codeVar": "USE_YN", "width": 120 }
|
|
609
|
+
],
|
|
610
|
+
"search": {
|
|
611
|
+
"withSearchType": true,
|
|
612
|
+
"options": [
|
|
613
|
+
{ "label": "상품명", "value": "name" },
|
|
614
|
+
{ "label": "상품코드", "value": "code" }
|
|
615
|
+
],
|
|
616
|
+
"textName": "searchText",
|
|
617
|
+
"typeName": "searchType"
|
|
618
|
+
},
|
|
619
|
+
"ynFields": [
|
|
620
|
+
{ "name": "displayYn", "label": "전시여부" }
|
|
621
|
+
],
|
|
622
|
+
"lineBreak": true
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
```
|
|
626
|
+
|
|
627
|
+
---
|
|
628
|
+
|
|
629
|
+
### 13. ListDataGrid 컴포넌트 생성
|
|
630
|
+
|
|
631
|
+
```javascript
|
|
632
|
+
{
|
|
633
|
+
"outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/product/ProductListDataGrid.tsx",
|
|
634
|
+
"config": {
|
|
635
|
+
"storeName": "useProductListStore",
|
|
636
|
+
"dtoType": "ProductRes",
|
|
637
|
+
"rowKey": "prdCd",
|
|
638
|
+
"selectionMode": "multi",
|
|
639
|
+
"withFormHeader": true,
|
|
640
|
+
"withExcel": true,
|
|
641
|
+
"columns": [
|
|
642
|
+
{ "key": "rowNo", "label": "No.", "type": "rowNo", "align": "center", "width": 60 },
|
|
643
|
+
{ "key": "prdCd", "label": "상품코드", "type": "title", "align": "left", "width": 150 },
|
|
644
|
+
{ "key": "prdNm", "label": "상품명", "type": "title", "align": "left" },
|
|
645
|
+
{ "key": "prdPrc", "label": "판매가", "type": "money", "align": "right", "width": 120 },
|
|
646
|
+
{ "key": "regDt", "label": "등록일", "type": "dateTime", "align": "center", "width": 150 },
|
|
647
|
+
{ "key": "regUser", "label": "등록자", "type": "user", "align": "center", "width": 120 }
|
|
648
|
+
],
|
|
649
|
+
"onClickType": "modal"
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
```
|
|
653
|
+
|
|
654
|
+
---
|
|
655
|
+
|
|
656
|
+
## Hook 생성 상세
|
|
657
|
+
|
|
658
|
+
### API 필터링 규칙
|
|
659
|
+
|
|
660
|
+
| 구분 | 키워드 |
|
|
661
|
+
|------|--------|
|
|
662
|
+
| 포함 | "조회", "목록" |
|
|
663
|
+
| 제외 | "저장", "삭제", "수정", "엑셀", "업로드", "다운로드" |
|
|
664
|
+
|
|
665
|
+
### 네이밍 규칙
|
|
666
|
+
|
|
667
|
+
**목록 API:**
|
|
668
|
+
| 메서드명 | 변수명 | 함수명 |
|
|
669
|
+
|----------|--------|--------|
|
|
670
|
+
| `postMemberListMember` | `list` | `getList` |
|
|
671
|
+
| `postMemberListAdmin` | `adminList` | `getAdminList` |
|
|
672
|
+
| `postMemberListActive` | `activeList` | `getActiveList` |
|
|
673
|
+
|
|
674
|
+
**단건 API:**
|
|
675
|
+
| 메서드명 | 변수명 | 함수명 |
|
|
676
|
+
|----------|--------|--------|
|
|
677
|
+
| `postMemberDetail` | `detail` | `getDetail` |
|
|
678
|
+
| `postMemberInfo` | `info` | `getInfo` |
|
|
679
|
+
| `postMemberProfile` | `profile` | `getProfile` |
|
|
680
|
+
| `getMember` | `member` | `getMember` |
|
|
681
|
+
|
|
682
|
+
### 중복 처리
|
|
683
|
+
|
|
684
|
+
중복이 발생하면 자동으로 접두사를 추가합니다.
|
|
685
|
+
|
|
686
|
+
```typescript
|
|
687
|
+
// 중복 전
|
|
688
|
+
postMemberDetail → detail, getDetail
|
|
689
|
+
getMemberDetail → detail, getDetail
|
|
690
|
+
|
|
691
|
+
// 중복 후 (자동 처리)
|
|
692
|
+
postMemberDetail → postDetail, getPostDetail
|
|
693
|
+
getMemberDetail → detail, getDetail
|
|
694
|
+
```
|
|
695
|
+
|
|
696
|
+
### 가변 페이징 처리
|
|
697
|
+
|
|
698
|
+
`hasPage` 여부에 따라 `page`, `setPage`를 가변적으로 생성합니다.
|
|
699
|
+
|
|
700
|
+
```typescript
|
|
701
|
+
// hasPage: true인 경우
|
|
702
|
+
const [list, setList] = useState<MemberRes[]>([]);
|
|
703
|
+
const [page, setPage] = useState<AXDGPage>({...}); // ✅ 생성됨
|
|
704
|
+
|
|
705
|
+
// hasPage: false인 경우
|
|
706
|
+
const [adminList, setAdminList] = useState<AdminRes[]>([]);
|
|
707
|
+
// ❌ adminPage, setAdminPage 없음
|
|
708
|
+
```
|
|
709
|
+
|
|
710
|
+
---
|
|
711
|
+
|
|
712
|
+
## 타입 체크
|
|
713
|
+
|
|
714
|
+
생성된 파일은 자동으로 타입 체크를 수행합니다.
|
|
715
|
+
|
|
716
|
+
1. **프로젝트 구조 자동 분석** (tsconfig.json, package.json)
|
|
717
|
+
2. **적절한 명령으로 타입 체크** (npm run type-check 또는 npx tsc --noEmit)
|
|
718
|
+
3. **AI 자동 수정 시도** (1차 시도)
|
|
719
|
+
4. **결과 반환** (성공 또는 타입 오류)
|
|
720
|
+
|
|
721
|
+
---
|
|
722
|
+
|
|
723
|
+
## 대화형 도구 상세
|
|
724
|
+
|
|
725
|
+
### `generate_store_and_hook_interactive`
|
|
726
|
+
|
|
727
|
+
파일명 또는 한글 자연어로 입력하면 자동으로 Repository를 검색하고 생성 경로를 제안합니다.
|
|
728
|
+
|
|
729
|
+
#### AI 기반 검색 방식
|
|
730
|
+
|
|
731
|
+
하드코딩된 매핑 테이블을 사용하지 않고, AI가 입력값을 해석하여 유연한 검색 패턴을 생성합니다.
|
|
732
|
+
|
|
733
|
+
**작동 방식:**
|
|
734
|
+
1. 사용자가 "회원리포", "MemberRepository", "member" 등을 입력
|
|
735
|
+
2. AI가 입력값을 분석하여 여러 검색 패턴 생성
|
|
736
|
+
3. glob 패턴 매칭으로 프로젝트 전체에서 파일 검색
|
|
737
|
+
4. 발견된 파일을 사용자에게 제시
|
|
738
|
+
|
|
739
|
+
**검색 패턴 예시:**
|
|
740
|
+
```
|
|
741
|
+
입력: "회원리포"
|
|
742
|
+
→ 검색 패턴: **/*회원*.ts, **/MemberRepository.ts, **/*Member*.ts
|
|
743
|
+
|
|
744
|
+
입력: "MemberRepository"
|
|
745
|
+
→ 검색 패턴: **/MemberRepository.ts, **/*MemberRepository.ts
|
|
746
|
+
|
|
747
|
+
입력: "member"
|
|
748
|
+
→ 검색 패턴: **/MemberRepository.ts, **/*member*.ts
|
|
749
|
+
```
|
|
750
|
+
|
|
751
|
+
#### 입력 예시
|
|
752
|
+
|
|
753
|
+
```
|
|
754
|
+
회원리포 → 회원 관련 Repository 파일 검색
|
|
755
|
+
배너리포 → 배너 관련 Repository 파일 검색
|
|
756
|
+
거래처리포 → 거래처 관련 Repository 파일 검색
|
|
757
|
+
제품리포 → 제품 관련 Repository 파일 검색
|
|
758
|
+
```
|
|
759
|
+
|
|
760
|
+
#### 작동 단계
|
|
761
|
+
|
|
762
|
+
#### 작동 단계
|
|
763
|
+
|
|
764
|
+
**1단계: 파일 검색**
|
|
765
|
+
```javascript
|
|
766
|
+
{
|
|
767
|
+
"fileName": "MemberRepository"
|
|
768
|
+
}
|
|
769
|
+
```
|
|
770
|
+
|
|
771
|
+
→ 프로젝트 전체에서 `MemberRepository.ts` 파일 검색
|
|
772
|
+
|
|
773
|
+
**2단계: 파일 선택 (여러 파일 발견 시)**
|
|
774
|
+
```javascript
|
|
775
|
+
{
|
|
776
|
+
"fileName": "MemberRepository",
|
|
777
|
+
"userSelections": {
|
|
778
|
+
"fileIndex": 1
|
|
779
|
+
}
|
|
780
|
+
}
|
|
781
|
+
```
|
|
782
|
+
|
|
783
|
+
→ 1번 파일 선택
|
|
784
|
+
|
|
785
|
+
**3단계: 경로 확인**
|
|
786
|
+
```javascript
|
|
787
|
+
{
|
|
788
|
+
"fileName": "MemberRepository",
|
|
789
|
+
"userSelections": {
|
|
790
|
+
"fileIndex": 1,
|
|
791
|
+
"storePath": null, // 제안 경로 사용
|
|
792
|
+
"hookPath": null
|
|
793
|
+
}
|
|
794
|
+
}
|
|
795
|
+
```
|
|
796
|
+
|
|
797
|
+
→ 제안된 경로로 생성
|
|
798
|
+
|
|
799
|
+
#### 경로 변경 예시
|
|
800
|
+
|
|
801
|
+
```javascript
|
|
802
|
+
{
|
|
803
|
+
"fileName": "MemberRepository",
|
|
804
|
+
"userSelections": {
|
|
805
|
+
"fileIndex": 1,
|
|
806
|
+
"storePath": "src/stores/member/store.ts", // 직접 지정
|
|
807
|
+
"hookPath": null // 제안 경로 사용
|
|
808
|
+
}
|
|
809
|
+
}
|
|
810
|
+
```
|
|
811
|
+
|
|
812
|
+
#### 응답 상태
|
|
813
|
+
|
|
814
|
+
| 상태 | 설명 |
|
|
815
|
+
|------|------|
|
|
816
|
+
| `need_file_selection` | 여러 파일 발견, 선택 필요 |
|
|
817
|
+
| `need_path_confirmation` | 경로 제안 완료, 확인 필요 |
|
|
818
|
+
| `complete` | 생성 완료 |
|
|
819
|
+
| `error` | 오류 발생 |
|
|
820
|
+
|
|
821
|
+
---
|
|
822
|
+
|
|
823
|
+
---
|
|
824
|
+
|
|
825
|
+
## Auto CRUD 예시
|
|
826
|
+
|
|
827
|
+
전체 페이지 구조를 자동으로 생성하는 예시입니다.
|
|
828
|
+
|
|
829
|
+
### 1. Store 생성
|
|
830
|
+
|
|
831
|
+
```javascript
|
|
832
|
+
{
|
|
833
|
+
"interfacePath": "/path/to/ProductRepository.ts",
|
|
834
|
+
"outputPath": "/path/to/src/stores/useProductListStore.ts",
|
|
835
|
+
"storeName": "useProductListStore"
|
|
836
|
+
}
|
|
837
|
+
```
|
|
838
|
+
|
|
839
|
+
### 2. Hook 생성
|
|
840
|
+
|
|
841
|
+
```javascript
|
|
842
|
+
{
|
|
843
|
+
"interfacePath": "/path/to/ProductRepository.ts",
|
|
844
|
+
"outputPath": "/path/to/src/hooks/useProductService.ts"
|
|
845
|
+
}
|
|
846
|
+
```
|
|
847
|
+
|
|
848
|
+
### 3. SearchParams 생성
|
|
849
|
+
|
|
850
|
+
```javascript
|
|
851
|
+
{
|
|
852
|
+
"appPath": "/path/to/src/pages/product/App.tsx",
|
|
853
|
+
"searchParams": {
|
|
854
|
+
"dateRange": { "withPeriodType": true, "label": "등록일" },
|
|
855
|
+
"codes": [{ "name": "statusCd", "label": "상태", "codeVar": "STATUS_CODE" }],
|
|
856
|
+
"search": { "withSearchType": true }
|
|
857
|
+
}
|
|
858
|
+
}
|
|
859
|
+
```
|
|
860
|
+
|
|
861
|
+
### 4. ListDataGrid 생성
|
|
862
|
+
|
|
863
|
+
```javascript
|
|
864
|
+
{
|
|
865
|
+
"outputPath": "/path/to/src/pages/product/ProductListDataGrid.tsx",
|
|
866
|
+
"config": {
|
|
867
|
+
"storeName": "useProductListStore",
|
|
868
|
+
"dtoType": "ProductRes",
|
|
869
|
+
"rowKey": "prdCd",
|
|
870
|
+
"selectionMode": "multi",
|
|
871
|
+
"withFormHeader": true,
|
|
872
|
+
"withExcel": true,
|
|
873
|
+
"columns": [...]
|
|
874
|
+
}
|
|
875
|
+
}
|
|
876
|
+
```
|
|
877
|
+
|
|
878
|
+
---
|
|
879
|
+
|
|
880
|
+
## 파일 구조
|
|
881
|
+
|
|
882
|
+
```
|
|
883
|
+
src/
|
|
884
|
+
├── stores/
|
|
885
|
+
│ ├── useMemberListStore.ts # Store (생성됨)
|
|
886
|
+
│ └── index.ts # export 자동 추가
|
|
887
|
+
├── hooks/
|
|
888
|
+
│ ├── useMemberService.ts # Hook (생성됨)
|
|
889
|
+
│ └── index.ts # export 자동 추가
|
|
890
|
+
└── pages/
|
|
891
|
+
└── product/
|
|
892
|
+
├── App.tsx # SearchParams 추가됨
|
|
893
|
+
└── ProductListDataGrid.tsx # 컴포넌트 (생성됨)
|
|
894
|
+
```
|
|
895
|
+
|
|
896
|
+
---
|
|
897
|
+
|
|
898
|
+
## 주요 기능
|
|
899
|
+
|
|
900
|
+
- ✅ **자동 타입 체크**: 생성 후 자동으로 tsc 실행
|
|
901
|
+
- ✅ **AI 자동 수정**: 1차 시도로 �입 오류 자동 수정
|
|
902
|
+
- ✅ **Lint/Prettier**: 생성된 파일 자동 포맷팅
|
|
903
|
+
- ✅ **index.ts 자동 생성**: export 자동 추가
|
|
904
|
+
- ✅ **다중 리스트 지원**: 왼쪽/상단/하단 목록 통합
|
|
905
|
+
- ✅ **가변 페이징 처리**: hasPage 여부에 따른 page 생성
|
|
906
|
+
- ✅ **옵션 기능 주석 처리**: 자동 초기화, i18n 등
|
|
907
|
+
|
|
908
|
+
---
|
|
909
|
+
|
|
910
|
+
## 참고 자료
|
|
911
|
+
|
|
912
|
+
- NH-FE-B Store 패턴 가이드: `src/docs/store-patterns-usage-guide.md`
|
|
913
|
+
- Hook 생성 계획서: `src/docs/HOOK_GENERATION_PLAN.md`
|
|
914
|
+
- Store 타입 정의: `src/features/store-features.ts`
|