@axboot-mcp/mcp-server 1.0.0

package/MCP_TOOL_PLAN.md

@@ -0,0 +1,710 @@
+# MCP 3대 핵심 툴 생성 계획
+
+## 개요
+
+NH-FE-B 프로젝트 패턴 기반의 대화형 코드 생성 툴 3종을 개발합니다.
+
+```
+Repository 분석 → 패턴 추천 → 사용자 선택 → 코드 생성
+```
+
+---
+
+## 1. generate_search_params_interactive
+
+검색 폼(SearchParams)을 대화형으로 생성합니다.
+
+### 입력
+- `repositoryPath`: Repository 파일 경로 (절대 경로)
+- `dtoPath`: DTO 파일 경로 (선택, 없으면 자동 검색)
+
+### 처리 흐름
+```
+1. Repository의 List API 메서드 찾기
+2. Request 타입 분석 → 필드 목록 추출
+3. 필드별로 패턴 선택 (대화형)
+4. SearchParams JSX 코드 생성
+```
+
+### 대화형 예시
+
+#### 일반 필드
+```
+[MCP] usrNm (회원명) 필드를 발견했습니다.
+      어떤 검색 컴포넌트를 사용할까요?
+
+┌─────────────────────────────────────────────┐
+│ 1. 📝 일반 텍스트 입력 (INPUT)               │
+├─────────────────────────────────────────────┤
+│ 2. 🔍 검색구분 + 텍스트 (SEARCH_TYPE)       │
+└─────────────────────────────────────────────┘
+
+번호를 입력하세요:
+```
+
+#### 코드/SELECT 필드
+```
+[MCP] statusCd (상태코드) 필드입니다.
+      어떤 방식으로 옵션을 제공할까요?
+
+┌─────────────────────────────────────────────┐
+│ 1. 📦 Code Store 사용 (codeVar)             │
+│    → USE_YN, STATUS_CD 등                   │
+├─────────────────────────────────────────────┤
+│ 2. ✏️ 직접 옵션 입력 (options 배열)         │
+│    → [{ label: '이름', value: 'name' }]     │
+└─────────────────────────────────────────────┘
+
+번호를 입력하세요:
+```
+
+**1번 선택 시 (Code Store)**
+```
+[MCP] "코드 변수명을 입력하세요:"
+사용자: "STATUS_CD"
+
+[MCP] "자동 추론: STATUS_CD (확인되었습니다)"
+```
+
+**2번 선택 시 (직접 옵션)**
+```
+[MCP] "옵션을 입력하세요.
+       형식: label,value (줄바리로 구분)"
+
+사용자:
+활성,active
+비활성,inactive
+대기,pending
+
+[MCP] "다음과 같이 변환됩니다:
+[
+  { label: '활성', value: 'active' },
+  { label: '비활성', value: 'inactive' },
+  { label: '대기', value: 'pending' },
+]
+
+확인되나요? (y/n)"
+```
+
+#### 그룹핑 설정
+```
+[MCP] "필드들을 그룹으로 묶을까요?
+      같은 줄에 표시할 필드들을 지정할 수 있습니다."
+
+사용자:
+- 그룹 1: usrNm, usrEmailAddr (한 줄)
+- 그룹 2: useYn, statusCd (한 줄)
+- joinDt (독립 줄)
+
+[MCP] "다음과 같이 그룹핑합니다:
+
+<SearchParams.Group>
+  <SearchParams.Input name='usrNm' />
+  <SearchParams.Input name='usrEmailAddr' />
+</SearchParams.Group>
+
+<SearchParams.Group>
+  <SearchParams.Select name='useYn' />
+  <SearchParams.Select name='statusCd' />
+</SearchParams.Group>
+
+<SearchParams.DatePicker name='joinDt' />
+
+확인되나요? (y/n)"
+```
+
+#### 줄바꿈 설정
+```
+[MCP] "각 필드 뒤에 줄바꿈을 추가할까요?
+
+┌─────────────────────────────────────────────┐
+│ 1. ✅ 줄바꿈 추가                            │
+├─────────────────────────────────────────────┤
+│ 2. ❌ 줄바꿈 없음 (한 줄에 표시)            │
+└─────────────────────────────────────────────┘
+
+번호를 입력하세요:"
+```
+
+### SearchParams 그룹핑 방식
+
+| 방식 | 설명 | 코드 예시 |
+|------|------|---------|
+| 한 줄 | 기본, 한 줄에 표시 | `<Params.Input />` |
+| 그룹 | 여러 필드를 같은 줄 | `<Params.Group>...</Params.Group>` |
+| 독립 줄 | 그룹 없이 독립 | `lineBreak: true` |
+
+### 대화형 흐름 (그룹핑 포함)
+
+```
+[MCP] "필드 그룹핑을 설정합니다.
+
+      형식 1 (줄바꿈):
+      - 필드명 (독립 줄)
+
+      형식 2 (그룹):
+      - 그룹명: 필드1, 필드2 (한 줄)
+
+      예시:
+      - usrNm, usrEmailAddr
+      - useYn, statusCd
+      - joinDt (줄바꿈)"
+```
+
+### 생성 코드 예시 (그룹핑)
+
+```tsx
+<SearchParams
+  form={searchForm}
+  params={[
+    // 그룹 1: 한 줄에 2개
+    { label: '이름', name: 'usrNm', type: SearchParamType.INPUT },
+    { label: '이메일', name: 'usrEmailAddr', type: SearchParamType.INPUT },
+
+    // 줄바꿈
+    null,
+
+    // 그룹 2: 한 줄에 2개
+    { label: '사용여부', name: 'useYn', type: SearchParamType.SELECT, codeVar: 'USE_YN' },
+    { label: '상태', name: 'statusCd', type: SearchParamType.SELECT, codeVar: 'STATUS_CD' },
+
+    // 줄바꿈
+    null,
+
+    // 독립 필드
+    { label: '가입일', name: 'joinDt', type: SearchParamType.DATE_PICKER },
+  ]}
+  paramsValue={listRequestValue}
+  onChangeParamsValue={setListRequestValue}
+  onSearch={handleSearch}
+  spinning={listSpinning}
+/>
+```
+
+### 줄바꿈 방식
+
+| 방식 | 설명 | 코드 |
+|------|------|------|
+| `null` | 줄바꿈 | params 배열에 `null` 추가 |
+| `lineBreak: true` | 명시적 줄바꿈 | params 옵션에 설정 |
+
+---
+
+## 2. generate_listdatagrid_interactive
+
+데이터 그리드(ListDataGrid)를 대화형으로 생성합니다.
+
+### 입력
+- `repositoryPath`: Repository 파일 경로 (절대 경로)
+- `dtoPath`: DTO 파일 경로 (선택, 없으면 자동 검색)
+
+### 처리 흐름
+```
+1. Repository의 List API 메서드 찾기
+2. Response 타입 분석 → 컬럼 목록 추출
+3. 컬럼별로 패턴 선택 (대화형)
+4. ListDataGrid.tsx 코드 생성
+```
+
+### 대화형 예시
+```
+[MCP] bassExpsrYn (노출여부) 컬럼입니다.
+      어떻게 표시할까요?
+
+┌─────────────────────────────────────────────┐
+│ 1. 🏷️ 태그 (초록색: 사용, 빨간색: 사용안함)  │
+├─────────────────────────────────────────────┤
+│ 2. ✓ 체크박스                                │
+├─────────────────────────────────────────────┤
+│ 3. ● 라디오 버튼 (사용/사용안함)             │
+├─────────────────────────────────────────────┤
+│ 4. 📝 텍스트 (Y/N)                           │
+└─────────────────────────────────────────────┘
+
+번호를 입력하세요:
+```
+
+---
+
+## 3. generate_form_modal_interactive
+
+폼 모달(FormModal)을 대화형으로 생성합니다.
+
+### 입력
+- `repositoryPath`: Repository 파일 경로 (절대 경로)
+- `dtoPath`: DTO 파일 경로 (선택, 없으면 자동 검색)
+
+### 처리 흐름
+```
+1. Repository의 Save API 메서드 찾기
+2. Request 타입 분석 → 필드 목록 추출
+3. 필드별로 컴포넌트 선택 (대화형)
+4. FormModal.tsx 코드 생성
+```
+
+### 대화형 예시
+```
+[MCP] useYn (사용여부) 필드입니다.
+      어떤 컴포넌트를 사용할까요?
+
+┌─────────────────────────────────────────────┐
+│ 1. ● 라디오 그룹 (Radio.Group)              │
+├─────────────────────────────────────────────┤
+│ 2. 🔽 드롭다운 (Select)                      │
+├─────────────────────────────────────────────┤
+│ 3. ✓ 스위치 (Switch)                         │
+├─────────────────────────────────────────────┤
+│ 4. 📝 텍스트 (Input)                         │
+└─────────────────────────────────────────────┘
+
+번호를 입력하세요:
+```
+
+---
+
+## 패턴 카탈로그 구조
+
+### SearchParams 컴포넌트 패턴
+
+| 필드 패턴 | 컴포넌트 | 옵션 |
+|-----------|----------|------|
+| 일반 텍스트 | INPUT | - |
+| 검색어 | SEARCH_TYPE | 검색구분 포함 |
+| 날짜 | DATE_PICKER | 단일 날짜 |
+| 날짜 범위 | DATE_RANGE | 기간 선택 |
+| 코드 | SELECT | 코드 변수명 |
+| Y/N | SELECT | USE_YN |
+
+### GridList 컬럼 패턴
+
+| 필드 패턴 | 타입 | 미리보기 |
+|-----------|------|---------|
+| ~No, ~Num | rowNo | 1, 2, 3... |
+| ~Nm, ~Name | title | 텍스트 (왼쪽 정렬) |
+| 금액 | money | 1,000,000 |
+| 날짜 | date | 2024-01-15 |
+| 날짜시간 | dateTime | 2024-01-15 14:30 |
+| Y/N | Tag | 🏷️ 사용/사용안함 |
+| 코드 | 코드명 | 활성 (code → name) |
+| 비율 | percent | 50% |
+
+### FormModal 컴포넌트 패턴
+
+| 필드 패턴 | 컴포넌트 | 미리보기 |
+|-----------|----------|---------|
+| 일반 텍스트 | Input | `[           ]` |
+| 긴 텍스트 | TextArea | `[           ]` |
+| 긴 내용 | Editor | 리치 에디터 |
+| Y/N | Radio.Group | ○ 사용 ○ 사용안함 |
+| 코드 | Select | 🔽 드롭다운 |
+| 날짜 | DatePicker | 📅 날짜 선택 |
+| 날짜 범위 | RangePicker | 📅 ~ 📅 |
+| 숫자 | InputNumber | [ 123      ] |
+| 주소 | 주소검색 | [주소] [검색] |
+| 파일 | ImageUpload | 📤 업로드 |
+
+### 특수 패턴 (FormModal 전용)
+
+| 패턴 | 설명 |
+|------|------|
+| 행 추가/삭제 | Form.List 기반 동적 목록 |
+| 행 정렬 | ReactSortable 기반 드래그 |
+| 주소 검색 | openDeliveryOriginModal |
+| 파일 업로드 | ImageUpload, FileUpload |
+| 중복 확인 | 중복 체크 API 호출 |
+
+---
+
+## 연동 선택박스 설정 (Cascading Select)
+
+여러 필드가 계층적으로 연동되는 경우를 처리합니다.
+
+### 연동 그룹 종류
+
+| 구분 | 설명 | 예시 |
+|------|------|------|
+| 2단계 연동 | 부모 → 자식 | 배송사 → 배송비 방식 |
+| 3단계 연동 | 부모 → 자식 → 손자 | 대분류 → 중분류 → 소분류 |
+
+### 연동 그룹 설정 프롬프트
+
+사용자는 다음 형식으로 연동을 제시합니다:
+
+```
+연동 그룹 1:
+- 단계: 2단계
+- 필드: dlvyClTpcd → dlcstMthdCd
+- 훅: useCodeStore
+- 코드: DLCMPY_TPCD
+- 필터: uprDtlCd
+
+연동 그룹 2:
+- 단계: 3단계
+- 필드: lrgClCd → mdmClCd → smlClCd
+- 훅: useCodeStore
+- 코드: CATEGORY_CD
+- 필터: uprDtlCd
+```
+
+### 대화형 흐름
+
+#### 1단계: 연동 설정 질문
+```
+[MCP] 모든 필드 설정이 완료되었습니다.
+      연동된 선택박스가 있나요?
+
+┌─────────────────────────────────────────────┐
+│ 1. 🔗 연동 설정이 있다                       │
+├─────────────────────────────────────────────┤
+│ 2. ✅ 연동 없음, 다음 단계로                 │
+└─────────────────────────────────────────────┘
+```
+
+#### 2단계: 연동 그룹 입력
+```
+[MCP] "연동 그룹을 입력해주세요.
+      형식:
+
+      연동 그룹 N:
+      - 단계: 2단계 또는 3단계
+      - 필드: 부모 → 자식 (→ 손자)
+      - 훅: useCodeStore
+      - 코드: CODE_NAME
+      - 필터: 필터링 필드명
+
+      여러 그룹은 줄바꿈으로 구분:"
+
+사용자:
+연동 그룹 1:
+- 단계: 2단계
+- 필드: dlvyClTpcd → dlcstMthdCd
+- 훅: useCodeStore
+- 코드: DLCMPY_TPCD
+- 필터: uprDtlCd
+
+연동 그룹 2:
+- 단계: 3단계
+- 필드: lrgClCd → mdmClCd → smlClCd
+- 훅: useCodeStore
+- 코드: CATEGORY_CD
+- 필터: uprDtlCd
+```
+
+#### 3단계: 코드 미리보기
+```
+[MCP] "다음과 같이 연동 코드를 생성합니다:
+
+// 연동 그룹 1: 2단계
+const DLCMPY_TPCD = useCodeStore((s) => s.DLCMPY_TPCD);
+
+const DLCMPY_TPCD_OPTS = useMemo(() => {
+  const selected = form.getFieldValue('dlvyClTpcd');
+  return DLCMPY_TPCD?.options.filter(
+    (o) => o.uprDtlCd === selected
+  );
+}, [form.getFieldValue('dlvyClTpcd')]);
+
+// 연동 그룹 2: 3단계
+const CATEGORY_CD = useCodeStore((s) => s.CATEGORY_CD);
+
+const LRG_OPTS = CATEGORY_CD?.options || [];
+
+const MDM_OPTS = useMemo(() => {
+  const selected = form.getFieldValue('lrgClCd');
+  return CATEGORY_CD?.options.filter(
+    (o) => o.uprDtlCd === selected
+  );
+}, [form.getFieldValue('lrgClCd')]);
+
+const SML_OPTS = useMemo(() => {
+  const selected = form.getFieldValue('mdmClCd');
+  return CATEGORY_CD?.options.filter(
+    (o) => o.uprDtlCd === selected
+  );
+}, [form.getFieldValue('mdmClCd')]);
+
+확인되나요? (y/n)"
+```
+
+### 여러 연동 그룹 예시
+
+```
+검색 폼에 2개의 독립적인 연동 그룹이 있는 경우:
+
+┌─────────────────┬─────────────────┐
+│ 연동 그룹 1      │ 연동 그룹 2      │
+│ (지역별)        │ (카테고리별)    │
+├─────────────────┼─────────────────┤
+│ 시/도 → 시/군/구 │ 대분류 → 중분류 │
+│ 2단계           │ 2단계           │
+│ REGION_CD       │ CATEGORY_CD     │
+└─────────────────┴─────────────────┘
+
+두 연동은 서로 독립적으로 동작합니다.
+```
+
+### 연동 필드 매핑
+
+| 부모 필드 | 자식 필드 | 손자 필드 | 코드 변수 | 필터링 |
+|-----------|-----------|-----------|-----------|---------|
+| dlvyClTpcd | dlcstMthdCd | - | DLCMPY_TPCD | uprDtlCd |
+| lrgClCd | mdmClCd | smlClCd | CATEGORY_CD | uprDtlCd |
+| areaCd | cityCd | - | REGION_CD | uprAreaCd |
+
+---
+
+## 기본값 처리
+
+필드의 초기값 설정을 처리합니다.
+
+### 기본값 설정 방식
+
+| 방식 | 설명 | 예시 |
+|------|------|------|
+| 고정값 | 항상 같은 값 | `useYn: 'Y'` |
+| 동적값 | 실행 시 계산 | `joinDt: new Date()` |
+| 코드 첫번째 | 코드 옵션의 첫 값 | `statusCd: CODE.options[0]?.value` |
+| 빈값 | 초기에 비워둠 | `searchText: ''` |
+
+### 대화형 흐름
+
+```
+[MCP] "각 필드의 기본값을 설정합니다.
+      기본값이 필요한 필드를 말씀해주세요:"
+
+사용자:
+- useYn: 'Y'
+- joinDt: 오늘 날짜
+- statusCd: 첫번째 코드
+
+[MCP] "다음과 같이 설정합니다:
+
+const initialSearchValues = {
+  useYn: 'Y',
+  joinDt: dayjs(),
+  statusCd: STATUS_CD?.options[0]?.value,
+};
+
+확인되나요? (y/n)"
+```
+
+### 기본값 입력 형식
+
+```
+필드명: 값
+
+예시:
+- useYn: 'Y'           // 문자열
+- pageNumber: 1       // 숫자
+- joinDt: 오늘날짜     // 동적 값
+- statusCd: 첫번째코드 // 코드 첫 값
+- searchText: ''       // 빈값 (명시)
+```
+
+---
+
+## 필수 값 검증
+
+필수 필드의 유효성 검증을 설정합니다.
+
+### 검증 방식
+
+| 방식 | 설명 | 예시 |
+|------|------|------|
+| required | 필수 입력 | `rules: [{ required: true }]` |
+| custom | 커스텀 검증 | 이메일 형식, 전화번호 등 |
+| dependent | 다른 필드 의존 | A 선택 시 B 필수 |
+
+### 대화형 흐름 (FormModal)
+
+```
+[MCP] "필수 입력 필드를 설정합니다.
+      필수로 처리할 필드를 말씀해주세요:"
+
+사용자:
+- usrNm (회원명) - 필수
+- usrEmailAddr (이메일) - 필수, 이메일 형식
+- usrHpNo (휴대폰) - 선택
+
+[MCP] "다음과 같이 검증을 설정합니다:
+
+<Form.Item
+  name='usrNm'
+  label='회원명'
+  rules={[{ required: true, message: '회원명은 필수입니다.' }]}
+>
+
+<Form.Item
+  name='usrEmailAddr'
+  label='이메일'
+  rules={[
+    { required: true, message: '이메일은 필수입니다.' },
+    { type: 'email', message: '이메일 형식이 아닙니다.' }
+  ]}
+>
+
+확인되나요? (y/n)"
+```
+
+### 필수 검증 입력 형식
+
+```
+필드명: 조건
+
+예시:
+- usrNm: 필수
+- usrEmailAddr: 필수, 이메일형식
+- usrHpNo: 선택
+- age: 필수, 숫자, 18이상
+```
+
+### 검증 타입
+
+| 타입 | 설명 | 키워드 |
+|------|------|--------|
+| 필수 | 반드시 입력 | 필수, required |
+| 이메일 | 이메일 형식 | 이메일, email |
+| 전화번호 | 전화번호 형식 | 전화번호, phone |
+| 숫자 | 숫자만 | 숫자, number |
+| 날짜 | 날짜 형식 | 날짜, date |
+| URL | URL 형식 | url, 링크 |
+| 최소/최대 | 범위 제한 | N이상, N이하 |
+
+---
+
+## 대화형 생성 절차 (수정)
+
+### 1단계: 필드 분석
+```
+[MCP] "N개의 필드를 발견했습니다.
+       하나씩 어떻게 처리할지 물어볼게요."
+```
+
+### 2단계: 필드별 선택
+```
+[MCP] "fieldName (한글명) 필드입니다.
+      다음 중 선택해주세요:"
+
+[패턴 카탈로그 표시]
+
+사용자: "1"
+```
+
+### 3단계: 추가 질문 (필요시)
+```
+[MCP] "코드 변수명이 필요합니다.
+      USE_YN, STATUS_CD 등:"
+```
+
+### 4단계: 기본값 설정
+```
+[MCP] "기본값이 필요한 필드가 있나요?
+      형식: 필드명: 값
+
+      예: useYn: 'Y', joinDt: 오늘날짜"
+```
+
+### 5단계: 필수 검증 설정 (FormModal)
+```
+[MCP] "필수 입력 필드가 있나요?
+      형식: 필드명: 조건
+
+      예: usrNm: 필수, email: 필수,이메일형식"
+```
+
+### 6단계: 연동 설정
+```
+[MCP] "연동된 선택박스가 있나요?
+      연동 그룹을 입력해주세요."
+```
+
+### 7단계: 확인 및 생성
+```
+[MCP] "모든 설정 완료!
+       다음과 같이 생성합니다:"
+
+[요약 표시]
+
+생성할까요? (y/n)
+```
+
+---
+
+## 출력 파일 구조
+
+### SearchParams
+```tsx
+// App.tsx에 추가할 SearchParams JSX
+<SearchParams
+  form={searchForm}
+  params={[...]}
+  paramsValue={listRequestValue}
+  onChangeParamsValue={setListRequestValue}
+  onSearch={handleSearch}
+  spinning={listSpinning}
+/>
+```
+
+### ListDataGrid
+```tsx
+// ListDataGrid.tsx 전체 파일
+import { DataGrid } from "@core/components/DataGrid";
+// ... imports
+
+const { columns } = useDataGridColumns<DtoItem>([
+  // 컬럼 정의
+], ...);
+
+export function ListDataGrid() {
+  // ... 구현
+}
+```
+
+### FormModal
+```tsx
+// FormModal.tsx 전체 파일
+import { Form } from "antd";
+// ... imports
+
+export function FormModal() {
+  // Form.Item들
+  return (
+    <AXModal>
+      <FormModal.Header />
+      <FormModal.Body>
+        {/* Form.Items */}
+      </FormModal.Body>
+      <FormModal.Footer />
+    </AXModal>
+  );
+}
+```
+
+---
+
+## 파일 명명 규칙
+
+| 툴 | 출력 파일명 | 위치 |
+|-----|------------|------|
+| SearchParams | (App.tsx에 삽입) | 해당 페이지 폴더 |
+| ListDataGrid | ListDataGrid.tsx | 해당 페이지 폴더 |
+| FormModal | FormModal.tsx | 해당 페이지 폴더 또는 modal/ 하위 |
+
+---
+
+## 개발 순서
+
+1. **패턴 카탈로그 데이터 구축**
+   - NH 프로젝트에서 실제 패턴 수집
+   - JSON/TS로 정의
+
+2. **핸들러 구현**
+   - `generate-search-params-interactive.ts`
+   - `generate-listdatagrid-interactive.ts`
+   - `generate-form-modal-interactive.ts`
+
+3. **MCP 툴 등록**
+   - `index.ts`에 3개 툴 등록
+
+4. **테스트**
+   - 실제 Repository로 테스트