6.1 KiB

Raw Blame History

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

테스트 대상

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

7개 필드 타입 카드

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

테스트 절차

1단계: 로그인

브라우저에서 http://localhost:9771/login 접속
로그인 정보:
- User ID: admin
- Password: wace1234!
"로그인" 버튼 클릭
페이지 로드 완료까지 대기 (약 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열 그리드로 표시되는지 확인:

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

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

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

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

텍스트 선택 시 표시:

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

셀렉트 선택 시 표시:

"옵션 목록" 섹션
"추가" 버튼
"아직 옵션이 없어요" 또는 옵션 목록
"기본 선택값" 드롭다운

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

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

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

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

예상 결과 요약

정상 동작

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

오류 상황

"로드 실패" 메시지: 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)

스크린샷 체크리스트

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

문제 발생 시 디버깅

Console 확인

// 선택된 컴포넌트 타입 확인
// 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개 카드 (텍스트, 숫자, 여러 줄, 셀렉트, 카테고리, 테이블 참조, 채번)

6.1 KiB Raw Blame History