feat: enhance component configuration and rendering
- Updated the RealtimePreviewDynamic component to display selected component information more clearly. - Added dynamic field type labels in the RealtimePreviewDynamic component for better user understanding. - Introduced a table refresh counter in the ScreenDesigner component to handle table column updates effectively. - Improved the V2PropertiesPanel and V2SelectConfigPanel to support additional properties and enhance usability. - Refactored the DynamicComponentRenderer to better handle field types and improve component configuration merging. Made-with: Cursor
This commit is contained in:
DDD1542
@@ -0,0 +1,178 @@
|
||||
# 통합 필드 타입 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개 카드** (텍스트, 숫자, 여러 줄, 셀렉트, 카테고리, 테이블 참조, 채번)
|
||||
Reference in New Issue
Block a user