179 lines
6.1 KiB
Markdown
179 lines
6.1 KiB
Markdown
|
# 통합 필드 타입 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개 카드** (텍스트, 숫자, 여러 줄, 셀렉트, 카테고리, 테이블 참조, 채번)
|