@axboot-mcp/mcp-server 1.0.0 → 1.0.6

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.0",
+  "version": "1.0.6",
   "description": "Axboot MCP Server - Store 생성 및 다른 기능 확장 가능",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -27,6 +27,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@axboot-mcp/mcp-server": "^1.0.1",
     "@modelcontextprotocol/sdk": "^1.0.4",
     "chokidar": "^5.0.0",
     "glob": "^13.0.0",

package/src/docs/MCP_COMMANDS_GUIDE.md

@@ -0,0 +1,570 @@
+# MCP 명령어 사용 가이드
+
+이 문서는 NH-FE-B 프로젝트에서 MCP(Model Context Protocol)를 사용하여 SearchParams와 ListDataGrid를 자동 생성하는 방법을 안내합니다.
+
+---
+
+## 목차
+
+1. [케이스 1: SearchParams 생성 (검색 영역)](#케이스-1-searchparams-생성-검색-영역)
+2. [케이스 2: ListDataGrid 생성 (목록 테이블)](#케이스-2-listdatagrid-생성-목록-테이블)
+3. [케이스 3: 완전한 화면 생성 (검색 + 목록)](#케이스-3-완전한-화면-생성-검색-목록)
+
+---
+
+## 케이스 1: SearchParams 생성 (검색 영역)
+
+### 개요
+
+페이지 상단의 **검색 조건 영역**을 자동 생성합니다. App.tsx 파일을 수정하여 `<PageSearchBar>` 컴포넌트를 추가합니다.
+
+### 명령어
+
+```
+axboot_generate_search_params
+```
+
+### 파라미터
+
+| 파라미터 | 타입 | 필수 | 설명 |
+|---------|------|:----:|------|
+| `searchDtoPath` | string | ✓ | 검색용 DTO 파일 경로 (절대 경로) |
+| `appPath` | string | ✗ | App.tsx 경로 (자동 감지됨) |
+| `searchParams` | object | ✗ | 수동 설정 (DTO 사용 시 불필요) |
+
+---
+
+### 예시 1: 기본 검색 (날짜 범위)
+
+**DTO:** `BannerSearch.ts`
+```typescript
+export interface BannerSearch extends Request {
+  fromDate?: string;  // 등록일 시작
+  toDate?: string;    // 등록일 종료
+}
+```
+
+**요청:**
+```json
+{
+  "searchDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/BannerSearch.ts"
+}
+```
+
+**결과:** App.tsx에 날짜 범위 검색이 추가됨
+
+---
+
+### 예시 2: 코드 선택 포함
+
+**DTO:** `ProductSearch.ts`
+```typescript
+export interface ProductSearch extends Request {
+  categoryCd?: string;  // 카테고리 코드
+  useYn?: string;       // 사용여부
+}
+```
+
+**요청:**
+```json
+{
+  "searchDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/ProductSearch.ts"
+}
+```
+
+**결과:**
+- 카테고리 셀렉트박스 추가
+- 사용여부 라디오 버튼 추가
+- CodeModel에 `CATEGORYCD` 자동 추가
+
+---
+
+### 예시 3: 복합 검색 조건
+
+**DTO:** `OrderSearch.ts`
+```typescript
+export interface OrderSearch extends Request {
+  orderDateFrom?: string;   // 주문일 시작
+  orderDateTo?: string;     // 주문일 종료
+  orderStatusCd?: string;   // 주문상태 코드
+  paymentTypeCd?: string;   // 결제수단 코드
+  useYn?: string;           // 사용여부
+  searchText?: string;      // 검색어
+}
+```
+
+**요청:**
+```json
+{
+  "searchDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/OrderSearch.ts"
+}
+```
+
+**결과:**
+- 날짜 범위 (주문일)
+- 코드 선택 (주문상태, 결제수단)
+- Y/N 라디오 (사용여부)
+- 검색어 입력
+
+---
+
+### 예시 4: 수동 설정
+
+**요청:**
+```json
+{
+  "appPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/banner/App.tsx",
+  "searchParams": {
+    "dateRange": {
+      "label": "등록일",
+      "presetType": "all"
+    },
+    "codes": [
+      {
+        "name": "statusCd",
+        "label": "상태",
+        "codeVar": "STATUS_CODE",
+        "width": 150
+      }
+    ],
+    "search": {
+      "withSearchType": false,
+      "textName": "searchText"
+    }
+  }
+}
+```
+
+---
+
+### 자동 감지 필드 규칙
+
+| 필드 패턴 | 감지 결과 |
+|-----------|----------|
+| `fromDate`, `toDate`, `regDtFrom`, `regDtTo` | 날짜 범위 |
+| `xxxTpcd`, `xxxClcd`, `xxxCd` (2글자 이상) | 코드 선택 |
+| `xxxYn` | Y/N 라디오 |
+| `searchText`, `keyword`, `xxxText` | 검색어 입력 |
+
+---
+
+## 케이스 2: ListDataGrid 생성 (목록 테이블)
+
+### 개요
+
+목록 **테이블 컬럼**을 자동 생성합니다. `ListDataGrid.tsx` 파일을 새로 생성합니다.
+
+### 명령어
+
+```
+axboot_generate_listdatagrid
+```
+
+### 파라미터
+
+| 파라미터 | 타입 | 필수 | 설명 |
+|---------|------|:----:|------|
+| `outputPath` | string | ✓ | 생성할 파일 경로 (절대 경로) |
+| `responseDtoPath` | string | ✓ | 목록용 DTO 파일 경로 |
+| `storeName` | string | ✓ | Zustand Store 이름 |
+| `rowKey` | string | ✓ | 행 키 (예: uuid, id) |
+| `config` | object | ✗ | 수동 설정 (DTO 사용 시 불필요) |
+
+---
+
+### 예시 1: 기본 목록
+
+**DTO:** `BannerRes.ts`
+```typescript
+export interface BannerRes extends Response {
+  uuid: string;
+  title: string;
+  statusCd: string;
+  useYn: string;
+  regDt: string;
+  regUser: string;
+}
+```
+
+**요청:**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/banner/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/BannerRes.ts",
+  "storeName": "useBannerStore",
+  "rowKey": "uuid"
+}
+```
+
+**결과:**
+```typescript
+// 자동 생성된 컬럼
+{ key: "uuid", label: t("번호"), type: "rowNo" }
+{ key: "title", label: t("Title"), type: "title", align: "left", width: 200 }
+{ key: "statusCd", label: t("Status"), type: "custom", codeVar: "STATUSCD", width: 120 }
+{ key: "useYn", label: t("Use"), type: "selectable", align: "center", width: 80 }
+{ key: "regDt", label: t("Reg"), type: "date", align: "center", width: 100 }
+{ key: "regUser", label: t("RegUser"), type: "user", align: "left", width: 100 }
+```
+
+---
+
+### 예시 2: 금액/날짜 포함 목록
+
+**DTO:** `OrderRes.ts`
+```typescript
+export interface OrderRes extends Response {
+  orderNo: string;
+  orderDate: string;
+  customerName: string;
+  orderAmt: number;
+  paymentTypeCd: string;
+  orderStatusCd: string;
+  regDttm: string;
+}
+```
+
+**요청:**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/order/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/OrderRes.ts",
+  "storeName": "useOrderStore",
+  "rowKey": "orderNo"
+}
+```
+
+**결과:**
+- `orderDate` → `date` 타입 (날짜)
+- `orderAmt` → `money` 타입 (금액, 우측 정렬)
+- `regDttm` → `dateTime` 타입 (날짜시간)
+- `paymentTypeCd`, `orderStatusCd` → 코드 변환
+- `customerName` → `user` 타입
+
+---
+
+### 예시 3: 이미지 포함 목록
+
+**DTO:** `ProductRes.ts`
+```typescript
+export interface ProductRes extends Response {
+  prdCd: string;
+  prdName: string;
+  thumbImage: string;
+  listImage: string;
+  price: number;
+  displayYn: string;
+}
+```
+
+**요청:**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/product/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/ProductRes.ts",
+  "storeName": "useProductStore",
+  "rowKey": "prdCd"
+}
+```
+
+**결과:**
+- `thumbImage` → `ThumbPreview` (썸네일)
+- `listImage` → `ImagePreview` (이미지 프리뷰)
+- `price` → `money` 타입
+- `displayYn` → `selectable` 타입
+
+---
+
+### 예시 4: 게시판 스타일
+
+**DTO:** `BoardRes.ts`
+```typescript
+export interface BoardRes extends Response {
+  bbsNo: string;
+  bbsTitle: string;
+  bbsTypeCd: string;
+  noticeYn: string;
+  fileCount: number;
+  readCount: number;
+  regDt: string;
+  regUser: string;
+}
+```
+
+**요청:**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/board/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/BoardRes.ts",
+  "storeName": "useBoardStore",
+  "rowKey": "bbsNo"
+}
+```
+
+**결과:**
+- `bbsTitle` → `bbsTitle` 타입 (제목 + 파일 유형 표시)
+
+---
+
+### 예시 5: 옵션 추가 (엑셀, 삭제, 복사)
+
+**요청:**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/banner/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/BannerRes.ts",
+  "storeName": "useBannerStore",
+  "rowKey": "uuid",
+  "config": {
+    "withFormHeader": true,
+    "withExcel": true,
+    "withDelete": true,
+    "withCopy": true,
+    "selectionMode": "single",
+    "onClickType": "modal"
+  }
+}
+```
+
+---
+
+### 자동 감지 컬럼 타입
+
+| 필드 패턴 | 컬럼 타입 | 정렬 | 너비 |
+|-----------|----------|------|------|
+| `xxxDt`, `xxxDate` | `date` | center | 100 |
+| `xxxDttm`, `xxxDateTime` | `dateTime` | center | 140 |
+| `xxxAmt`, `xxxPrice`, `xxxCost` | `money` | right | 120 |
+| `xxxYn` | `selectable` | center | 80 |
+| `xxxNm`, `xxxName`, `xxxUser` | `user` | left | 100 |
+| `xxxTpcd`, `xxxClcd`, `xxxCd` | `custom` (코드) | - | 120 |
+| `title`, `subject`, `bbsTitle` | `title`/`bbsTitle` | left | 200 |
+| `xxxImg`, `xxxThumb` | `image` | center | 100 |
+| `content`, `description`, `remark` | `custom` | left | 300 |
+
+---
+
+## 케이스 3: 완전한 화면 생성 (검색 + 목록)
+
+### 개요
+
+검색 영역과 목록 테이블을 모두 생성하여 **완전한 화면**을 만듭니다. 두 명령어를 순서대로 실행합니다.
+
+---
+
+### 예시 1: 배너 관리 화면
+
+**Step 1: SearchParams 생성**
+```json
+{
+  "searchDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/BannerSearch.ts"
+}
+```
+
+**Step 2: ListDataGrid 생성**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/banner/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/BannerRes.ts",
+  "storeName": "useBannerStore",
+  "rowKey": "uuid"
+}
+```
+
+**Step 3: App.tsx에 import 추가**
+```typescript
+import { ListDataGrid } from "./ListDataGrid";
+```
+
+**결과:** 검색 + 목록 화면 완성
+
+---
+
+### 예시 2: 상품 관리 화면
+
+**DTO:**
+- `ProductSearch.ts` (검색용)
+- `ProductRes.ts` (목록용)
+
+**Step 1: SearchParams**
+```json
+{
+  "searchDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/ProductSearch.ts"
+}
+```
+
+**Step 2: ListDataGrid**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/product/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/ProductRes.ts",
+  "storeName": "useProductStore",
+  "rowKey": "prdCd",
+  "config": {
+    "withFormHeader": true,
+    "withExcel": true,
+    "selectionMode": "single",
+    "onClickType": "modal"
+  }
+}
+```
+
+---
+
+### 예시 3: 주문 관리 화면
+
+**DTO:**
+- `OrderSearch.ts`
+- `OrderRes.ts`
+
+**Step 1: SearchParams**
+```json
+{
+  "searchDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/OrderSearch.ts"
+}
+```
+
+**Step 2: ListDataGrid**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/order/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/OrderRes.ts",
+  "storeName": "useOrderStore",
+  "rowKey": "orderNo",
+  "config": {
+    "selectionMode": "multi",
+    "onClickType": "link"
+  }
+}
+```
+
+---
+
+### 예시 4: 게시판 화면
+
+**DTO:**
+- `BbsSearch.ts`
+- `BbsRes.ts`
+
+**Step 1: SearchParams**
+```json
+{
+  "searchDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/BbsSearch.ts"
+}
+```
+
+**Step 2: ListDataGrid**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/bbs/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/BbsRes.ts",
+  "storeName": "useBbsStore",
+  "rowKey": "bbsNo",
+  "config": {
+    "withFormHeader": true,
+    "withExcel": true,
+    "onClickType": "modal"
+  }
+}
+```
+
+---
+
+### 예시 5: 코드 관리 화면
+
+**DTO:**
+- `CodeSearch.ts`
+- `CodeRes.ts`
+
+**Step 1: SearchParams**
+```json
+{
+  "searchDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/CodeSearch.ts"
+}
+```
+
+**Step 2: ListDataGrid**
+```json
+{
+  "outputPath": "/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/code/ListDataGrid.tsx",
+  "responseDtoPath": "/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/CodeRes.ts",
+  "storeName": "useCodeStore",
+  "rowKey": "cd",
+  "config": {
+    "withFormHeader": true,
+    "withDelete": true,
+    "selectionMode": "single",
+    "onClickType": "modal"
+  }
+}
+```
+
+---
+
+## 파라미터 이름 구분
+
+| 핸들러 | 파라미터 | 용도 | DTO 예시 |
+|--------|---------|------|----------|
+| `axboot_generate_search_params` | `searchDtoPath` | 검색 조건 생성 | `BannerSearch` |
+| `axboot_generate_listdatagrid` | `responseDtoPath` | 목록 테이블 생성 | `BannerRes` |
+
+---
+
+## 추가 기능
+
+### ESLint 자동 실행
+
+모든 생성/수정 작업 후 ESLint가 자동으로 실행됩니다.
+
+### CodeModel 자동 업데이트
+
+코드 필드가 감지되면 `useCodeStore.ts`의 `CodeModel` 인터페이스에 자동 추가됩니다.
+
+---
+
+## 팁
+
+1. **DTO 네이밍 컨벤션 따르기**
+   - 검색용: `xxxSearch.ts` → `xxxSearch` 인터페이스
+   - 목록용: `xxxRes.ts` → `xxxRes` 인터페이스
+
+2. **주석 활용**
+   - DTO 필드에 주석을 달면 라벨로 사용됩니다
+   ```typescript
+   export interface BannerRes extends Response {
+     uuid: string;           // UUID
+     title: string;          // 배너 제목
+     statusCd?: string;      // 상태
+   }
+   ```
+
+3. **rowKey 선택**
+   - 주로 `uuid`, `id`, `code` 등 고유값 사용
+   - DB 기본키와 일치시키기
+
+4. **Store 생성 먼저**
+   - `axboot_generate_store_and_hook_interactive`로 Store 생성 후 사용
+
+---
+
+## 문제 해결
+
+### 문제: DTO를 찾을 수 없음
+**해결:** 절대 경로를 사용하세요
+```
+/Users/kyle/Desktop/nh-fe-bo/src/services/@interface/dto/BannerSearch.ts
+```
+
+### 문제: CodeModel 이미 존재
+**해결:** 이미 존재하는 코드는 건너뜁니다. 안심하세요.
+
+### 문제: App.tsx 경로 자동 감지 실패
+**해결:** `appPath` 파라미터로 직접 지정하세요.
+
+---
+
+## 참고
+
+- Store 생성: `axboot_generate_store_and_hook_interactive`
+- SearchParams 패턴: `src/prompts/search-params.md`
+- ListDataGrid 패턴: `src/prompts/listdatagrid-usage.md`