# AI 생성 품질 실험 신규 React 화면 10개. 같은 Codex 세션에서 작성한 공통 composition을 사용한다. 이전 실험 소스를 정답으로 사용하지 않았다. `requirements.json`에 난이도·Navigation·허용 액션·Pattern·모델·추론/Seed 가용성을 기록한다. 이전 실험 또는 독립 모델 비교와 NON-COMPARABLE이다. ```sh node scripts/prepare-quality-experiments.mjs npm run build:packages node node_modules/typescript/bin/tsc -p examples/ai-quality/tsconfig.json node node_modules/vite/bin/vite.js build --config examples/ai-quality/vite.config.ts node node_modules/vite/bin/vite.js preview --config examples/ai-quality/vite.config.ts --host 127.0.0.1 --port 6321 ``` `http://127.0.0.1:6321/01/index.html`부터 `10/index.html`까지 각각 독립 React bootstrap이다. 신규 Story·추가 운영 메뉴는 없다. 생성 스크립트는 entry·요구사항만 재생성하며 공통 화면 소스는 덮어쓰지 않는다. 브라우저 검사는 설치된 Playwright 모듈과 Chrome 실행 경로를 `HM_PLAYWRIGHT_DIR`, `HM_CHROME_PATH` 환경 변수로 제공한 뒤 `node scripts/verify-quality-runtime.mjs`를 실행한다. 결과·원본 Guard·40개 캡처는 `_local/quality-20261010`에 기록된다. 실패한 화면만 재검사할 때는 `node scripts/verify-quality-runtime.mjs 03 04`처럼 ID를 전달한다. 미검증 환경에는 임의 PASS를 기록하지 않는다. | ID | 화면 | 난이도 | Navigation | 선택 이유 | |---|---|---|---|---| | 01 | 사용자 목록 | Easy | GNB | 서비스 헤더 + FilterBar/DataTable | | 02 | 현장 업무 | Medium | GNB | FilterBar + 카드 결과, Table 불필요 | | 03 | 승인 결재 | Hard | GNB | FilterBar/DataTable + Dialog 확인 | | 04 | 채용 관리 | Hard | GNB | FilterBar/DataTable + Sheet 상세 | | 05 | 업무 요청 | Medium | GNB | 별도 Form Pattern 없음, Label/Input/Checkbox composition | | 06 | 권한 설정 | Medium | LNB | 설정 영역 단일 메뉴, Checkbox/Switch composition | | 07 | 업무 Dashboard | Medium | Dashboard | 전용 48px Header·960px frame·기간별 지표 | | 08 | 통계 Dashboard | Medium | Dashboard | Tabs/Progress 지표 + DataTable 분류별 집계, 공개 Chart API 없음 | | 09 | 작업 변경 | Hard | GNB | Drawer 확인·적용 | | 10 | 처리 상태 | Easy | LNB | Skeleton/Alert/빈 결과 composition, 검색 요구 없음 | Navigation은 실험 요구사항에서 명시한 모드이며 하나의 화면 제목만 메뉴로 제공한다. 이 선택을 일반 업무 화면의 기본 모드로 일반화하지 않는다. DataTable의 페이지 크기·페이지 이동, 검색 Clear, Overlay Close는 선택한 공개 API의 기본 기능이며 새로운 업무 메뉴/CSV가 아니다. Dashboard Status는 해당 도메인 상태 필터 요청이 없으므로 강제하지 않는다. 공통 HM 토큰·기존 CSS entry를 소비하며 임의 token은 없다. 스크린리더 발화, 실기기 touch/drag, 실제 backend, 교차 모델과 모든 상태 조합은 NOT VERIFIED다. 점수 rubric을 실행하지 않았으므로 디자인 점수는 NOT VERIFIED이며 PASS 비율과 혼용하지 않는다.