# 통합 필드 타입 Config Panel 테스트 가이드

## 테스트 대상
- **컴포넌트:** V2FieldConfigPanel (통합 필드 설정 패널)
- **위치:** `frontend/components/v2/config-panels/V2FieldConfigPanel.tsx`
- **연결:** v2-input, v2-select 컴포넌트 선택 시 오른쪽 속성 패널에 표시

## 7개 필드 타입 카드
| 카드 | value | 설명 |
|------|-------|------|
| 텍스트 | text | 일반 텍스트 입력 |
| 숫자 | number | 숫자만 입력 |
| 여러 줄 | textarea | 긴 텍스트 입력 |
| 셀렉트 | select | 직접 옵션 선택 |
| 카테고리 | category | 등록된 선택지 |
| 테이블 참조 | entity | 다른 테이블 참조 |
| 채번 | numbering | 자동 번호 생성 |

---

## 테스트 절차

### 1단계: 로그인
1. 브라우저에서 `http://localhost:9771/login` 접속
2. 로그인 정보:
   - **User ID:** `admin`
   - **Password:** `wace1234!`
3. "로그인" 버튼 클릭
4. 페이지 로드 완료까지 대기 (약 3~5초)

**확인:** 로그인 성공 시 메인 대시보드 또는 홈 화면으로 이동

---

### 2단계: 화면 디자이너 열기

**경로 1 (권장):**
- 사이드바에서 **"화면 관리"** 또는 **"화면 설정"** 메뉴 클릭
- 화면 목록에서 기존 화면 선택 후 **"설계"** 또는 **"편집"** 버튼 클릭

**경로 2 (URL 직접):**
- `http://localhost:9771/admin/screenMng/screenMngList` 접속
- 화면 목록에서 화면 선택 후 설계 버튼 클릭

**경로 3 (특정 화면 직접):**
- `http://localhost:9771/admin/screenMng/screenMngList?openDesigner=60` 접속
- (60은 화면 ID - 존재하는 화면 ID로 변경)

**확인:** 화면 디자이너가 전체 화면으로 열림 (캔버스, 좌측 컴포넌트 목록, 오른쪽 속성 패널)

---

### 3단계: v2-input 컴포넌트 찾기 및 선택

**v2-input 컴포넌트 찾기:**
- v2-input은 주로 **테이블 컬럼을 캔버스로 드래그**할 때 자동 생성됨
- 또는 좌측 패널에서 "입력" 관련 컴포넌트를 드래그하여 배치
- 캔버스에 있는 **텍스트 입력 필드**를 클릭

**v2-input 식별:**
- 선택 시 오른쪽 패널에 "이 필드는 어떤 유형인가요?" 문구와 7개 카드가 보이면 v2-input
- 레거시 위젯은 "입력 타입", "세부 타입 선택" 등 다른 UI

**확인:** v2-input 선택 시 오른쪽 패널에 7개 카드 표시

---

### 4단계: 7개 카드 확인

오른쪽 속성 패널에서 다음 7개 카드가 **3열 그리드**로 표시되는지 확인:

1. **텍스트** - "일반 텍스트 입력"
2. **숫자** - "숫자만 입력"
3. **여러 줄** - "긴 텍스트 입력"
4. **셀렉트** - "직접 옵션 선택"
5. **카테고리** - "등록된 선택지"
6. **테이블 참조** - "다른 테이블 참조"
7. **채번** - "자동 번호 생성"

**확인:** 7개 카드 모두 표시, 선택된 카드에 파란색 테두리/배경

---

### 5단계: 셀렉트 카드 클릭 테스트

1. **텍스트** 카드가 선택된 상태에서 시작 (기본값)
2. **셀렉트** 카드 클릭
3. 아래 상세 설정이 **텍스트용**에서 **셀렉트용**으로 바뀌는지 확인

**텍스트 선택 시 표시:**
- "안내 텍스트" (placeholder) 입력 필드
- "입력 형식" (선택사항)
- "최대 길이" 등

**셀렉트 선택 시 표시:**
- "옵션 목록" 섹션
- "추가" 버튼
- "아직 옵션이 없어요" 또는 옵션 목록
- "기본 선택값" 드롭다운

**확인:** 카드 클릭 시 상세 설정 영역이 해당 타입에 맞게 전환됨

---

### 6단계: 기타 카드 전환 테스트

| 클릭 카드 | 예상 상세 설정 |
|-----------|----------------|
| 숫자 | 최소/최대값, 단위, 슬라이더 등 |
| 여러 줄 | 줄 수 설정 |
| 카테고리 | 테이블/컬럼 정보, 카테고리 값 목록 |
| 테이블 참조 | 참조 테이블 선택, 값/라벨 컬럼 |
| 채번 | 메뉴 선택, 채번 규칙 선택 |

**확인:** 각 카드 클릭 시 해당 타입의 상세 설정이 표시됨

---

## 예상 결과 요약

### 정상 동작
- [x] 로그인 성공
- [x] 화면 디자이너 접근 가능
- [x] v2-input 컴포넌트 선택 시 오른쪽 패널에 7개 카드 표시
- [x] "셀렉트" 카드 클릭 시 옵션 목록 관리 UI로 전환
- [x] 다른 카드 클릭 시 해당 타입의 상세 설정으로 전환

### 오류 상황
- **"로드 실패"** 메시지: ConfigPanel 동적 로드 실패
- **"설정 패널 없음"** 메시지: v2-input 매핑 누락
- **7개 카드 미표시:** V2FieldConfigPanel 대신 다른 패널이 렌더링됨
- **카드 클릭 무반응:** handleFieldTypeChange 미동작 또는 config 업데이트 실패

---

## 코드 흐름 (참고)

```
ScreenDesigner
  └─ V2PropertiesPanel (selectedComponent)
       └─ hasComponentConfigPanel("v2-input") === true
            └─ DynamicComponentConfigPanel (componentId="v2-input")
                 └─ getComponentConfigPanel("v2-input")
                      └─ import("@/components/v2/config-panels/V2FieldConfigPanel")
                           └─ V2FieldConfigPanel (7 cards + handleFieldTypeChange)
```

---

## 스크린샷 체크리스트

1. **로그인 화면** - 로그인 전
2. **화면 관리 목록** - 화면 디자이너 진입 전
3. **화면 디자이너** - v2-input 미선택 상태
4. **7개 카드 표시** - v2-input 선택 후 오른쪽 패널
5. **셀렉트 상세 설정** - 셀렉트 카드 클릭 후
6. **다른 타입 상세 설정** - 예: 채번 또는 테이블 참조

---

## 문제 발생 시 디버깅

### Console 확인
```javascript
// 선택된 컴포넌트 타입 확인
// React DevTools 또는 전역 상태에서
console.log(selectedComponent?.componentConfig?.type);
// "v2-input" 이어야 함
```

### Network 확인
- `/api/admin/webTypes` - 200 OK
- 화면 레이아웃 API - 200 OK

### 컴포넌트가 v2-input이 아닌 경우
- 테이블 컬럼을 캔버스로 드래그하면 v2-input 생성
- 기존 화면에 레거시 text-input 등이 있으면 V2InputConfigPanel(5개 카드)이 표시될 수 있음
- V2FieldConfigPanel은 **7개 카드** (텍스트, 숫자, 여러 줄, 셀렉트, 카테고리, 테이블 참조, 채번)