---
name: web-verify
description: WACE PLM UI 검증 워크플로우. 화면 구현 후 스크린샷으로 시각적 확인이 필요할 때 사용.
disable-model-invocation: true
---

# UI 검증 워크플로우

## 로그인 정보 (자동 적용)

- URL: http://localhost:9771
- 아이디: wace
- 비밀번호: qlalfqjsgh11

## 절차

1. 로컬 서버 상태 확인 (9771, 9090)
2. browser-use subagent로 브라우저 실행
3. 위 계정으로 자동 로그인 → 요청된 화면으로 이동
4. 스크린샷 캡처 및 분석

## 화면별 접근 방법

### 리포트 관리 페이지
1. 좌측 메뉴 > 화면관리 > 리포트 관리 클릭
2. URL: `/admin/screenMng/reportList`

### 리포트 디자이너 진입
1. 리포트 관리 페이지에서 리포트 행의 "수정" 버튼(연필 아이콘) 클릭
2. 또는 리포트명 텍스트를 직접 클릭
3. URL: `/admin/screenMng/reportList/designer/{reportId}`

### 리포트 디자이너 — 컴포넌트 설정 모달 열기
캔버스 내부의 컴포넌트는 일반 클릭으로 선택되지 않을 수 있음. 아래 방법을 순서대로 시도할 것:

1. **방법 1: 캔버스 내 컴포넌트 더블클릭**
   - 캔버스 영역에서 텍스트/테이블 등 컴포넌트 위치를 더블클릭
   - 모달이 열리면 상단에 "{타입} 설정" 제목이 표시됨 (예: "텍스트 설정")
   - 탭: 기능 설정 / 데이터 소스 / 미리보기

2. **방법 2: 브라우저 콘솔에서 직접 모달 열기** (방법 1 실패 시)
   - 브라우저 콘솔에서 컴포넌트 ID를 찾아 `openComponentModal` 호출
   - 캔버스 내 요소의 `data-component-id` 속성 확인

3. **방법 3: 우측 패널 활용**
   - 캔버스에서 컴포넌트를 단일 클릭하면 우측 패널에 "스타일 편집" 표시
   - 우측 패널 상단의 컴포넌트명 확인으로 선택 여부 판단

### 리포트 디자이너 — 모달 탭 구조
- **기능 설정**: 데이터 바인딩(쿼리 Select + 필드 Select) + 컴포넌트별 설정
- **데이터 소스**: 비주얼 데이터 소스 빌더 (마스터-디테일 테이블 설정)
- **미리보기**: 컴포넌트 미리보기

## 검증 항목

### 리포트 목록
- 테이블 데이터 로딩
- CRUD 버튼 동작
- 검색/필터

### 리포트 디자이너
- 캔버스 렌더링
- 컴포넌트 더블클릭 → 설정 모달 열기
- 데이터 소스 탭: 마스터 테이블 선택, 컬럼 체크, 디테일 추가, FK 자동 감지
- 속성 패널
- 프리뷰 모달

### 공통
- 스크롤 정상
- 콘솔 에러 없음
