# Pre QA Gate

> QA 착수 전 사전 점검 — Smoke(메뉴·탭·에러) + Figma 설계 대조(PASS/GAP/미검증)를 한번에 수행하고 GAP 비교 이미지까지 생성. Use when the user says QA 사전 점검, pre-qa, 착수 전 확인, smoke + figma, 설계 대조, or wants a pre-QA gate check before full testing begins.

- Skill: `yol-mu/pre-qa-gate` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add yol-mu/pre-qa-gate`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yol-mu/pre-qa-gate/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: yol-mu (https://skillmd.com/u/yol-mu)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/yol-mu/pre-qa-gate

---


# Pre-QA Gate (착수 전 점검)

본격 QA 전 **Smoke + Figma 설계 대조**를 한 패스로 돌려
"진입해도 되는 상태인가?"를 판별한다.

## 입력

| 항목 | 필수 | 기본값 |
|------|------|--------|
| Figma 링크 | ✅ | — |
| QA URL | — | `flower-qa-campaign-web.anypoint.tv` |
| 대상 메뉴/페이지 | — | Figma 페이지 기반 자동 판별 |
| ClickUp 티켓 | — | 있으면 체크리스트에 링크 |

## Workflow

### Phase 1 — Smoke (진입·로드·에러)

[flower-menu-smoke](../flower-menu-smoke/SKILL.md) 방식으로
대상 페이지들을 순회하며 기록:

1. 로그인 + 세션 확보
2. 대상 페이지 순회 (Figma 페이지 기준 or 사용자 지정)
3. 페이지마다:
   - URL, 제목, tabs, 주요 필터
   - table 행 수
   - 콘솔 에러 / 5xx / GENERAL_ERROR
4. 판정: Pass / Fail / Empty

**Fail이 있으면 즉시 보고** — Phase 2 진행 여부를 사용자에게 확인.

### Phase 2 — Figma 설계 대조

상세: [references/phase2-figma-compare.md](references/phase2-figma-compare.md)

1. **Figma 인벤토리** — Playwright로 Figma URL → Pages/Frames/Layers 텍스트 수집
2. **QA 캡처 + 구조 추출** — Playwright로 대상 페이지 순회
   - 스크린샷 + tabs/filters/toggle/error 텍스트
   - `findings.json` (`id`, `area`, `figma`, `qa`, `result`, `detail`)
3. **체크리스트** — `figma-vs-qa-checklist.md` (§0 Figma Pages + 영역별 표 + 종합 판정)
4. **GAP 이미지** — **실제 Figma·QA 스크린샷** side-by-side (GAP만)
   - `gap-compare/gap-board.html` + `_build_gap_board.mjs`
   - 출력: `gap-compare/gap-figma-vs-qa-comparison.png`
   - ❌ AI 와이어프레임(GenerateImage) 사용 금지

참고 예시: `.canvas/_compare_am29658_figma.mjs`, `.canvas/reviews/am-29658-figma-compare/`

### Phase 3 — Gate 판정

1. Smoke Pass/Fail/Empty + PASS/GAP/미검증 건수 집계
2. 산출물 경로 안내 (체크리스트, findings, GAP PNG, smoke 요약)
3. Gate 결론 표기 (아래 §Gate 판정)

## 출력물

```
.canvas/reviews/{ticket}/
├── figma-vs-qa-checklist.md
├── findings.json
├── smoke-summary.md
├── 01-*.png …                  # QA 캡처 (또는 screenshots/)
└── gap-compare/
    ├── gap-board.html
    ├── _build_gap_board.mjs
    ├── figma-gap*.png          # Figma 캡처
    ├── qa-gap*.png             # QA 캡처
    └── gap-figma-vs-qa-comparison.png   # GAP만 합성 보드
```

## 판정 기준

### Smoke

| 결과 | 기준 |
|------|------|
| Pass | 로드됨, 골격 정상, 5xx/권한 에러 없음 |
| Fail | 500/GENERAL_ERROR/권한 오류/흰 페이지 |
| Empty | 로드 되나 no data — 시드·플랫폼 이슈 |

### Figma 대조

| 결과 | 기준 |
|------|------|
| PASS | Figma 설계와 QA 구현 일치 |
| GAP | Figma와 QA가 다름 — 이슈 후보 |
| 미검증 | 모달/시드/진입 경로 부족으로 확인 불가 |

## Gate 판정

| 조건 | 결론 |
|------|------|
| Smoke 전체 Pass + GAP 0건 | ✅ QA 착수 가능 |
| Smoke Fail 있음 | ❌ 환경/빌드 이슈 선 해결 |
| GAP 있음 | ⚠️ GAP 이슈 등록 후 QA 착수 판단 |
| 미검증 다수 | ℹ️ 추가 시드/진입 확보 후 재점검 |

## 연계 스킬

| 상황 | 스킬 |
|------|------|
| GAP → 이슈 등록 | [bug-report](../bug-report/SKILL.md) |
| Smoke Fail 심층 | [flower-menu-smoke](../flower-menu-smoke/SKILL.md) |
| 지표 교차 검증 | [flower-metric-crosscheck](../flower-metric-crosscheck/SKILL.md) |
| 권한 매트릭스 | [flower-authz-matrix](../flower-authz-matrix/SKILL.md) |
| 설계 리뷰 심층 | [design-review](../../.claude/skills/design-review/SKILL.md) |

## 하지 말 것

- Figma Export/픽셀 diff 불가 시 억지로 시도하지 않음 → 구조 대조로 대체
- Empty를 GAP으로 잘못 판정
- 비밀번호·토큰 커밋
- 미검증을 PASS로 처리