[Epic] chore: staging 배포 시 화면별 에러 케이스 스크린샷 자동 캡쳐 및 디스코드 전송

[iOdiO89]

구현할 기능

staging 브랜치에 push(머지) 될 때마다, 각 화면에서 만날 수 있는 서버 호출 에러 케이스(해피케이스 포함)를 Playwright로 재현해 스크린샷을 일괄 캡쳐하고, 결과물을 GitHub Actions artifact 로 저장 + 디스코드 채널로 전송하는 자동화 파이프라인을 구축한다.

→ production promote 전에 전 화면의 정상/에러 상태를 스크린샷으로 확인하는 배포 QA 게이트 역할.

배경

• staging 배포 시점마다 주요 화면의 정상/에러 상태를 눈으로 일일이 확인하기 어렵다. production promote 여부를 결정하기 전에 한눈에 볼 수 있는 자료가 필요하다.
• 특히 에러 화면(4xx/5xx, 빈 상태)은 실서버로는 재현이 어렵지만, 기존 E2E 목킹 구조(api.error(), SSR 목 스텁)를 활용하면 결정적으로 재현할 수 있다.
• 기존 인프라 재사용: Playwright E2E 환경(chore: Playwright E2E 테스트 환경 구축 #319), CI e2e job, 디스코드 봇 토큰(DISCORD_BOT_TOKEN).

작업 상세 내용

• 1. 시나리오 매트릭스 정의 — 화면(라우트)별 호출 API 목록과 각 API의 에러 케이스(401/404/500, 빈 데이터 등)를 표로 정리하고 캡쳐 대상 확정
• 2. 스크린샷 전용 Playwright project 추가 — playwright.config.ts에 screenshots project 분리, 기존 E2E와 독립 실행 (--project=screenshots)
• 3. 화면별 스크린샷 spec 작성 — 시나리오 매트릭스 기준으로 목 등록 → 진입 → page.screenshot() 캡쳐. 파일명은 {화면}__{케이스}.png 규칙으로 디스코드에서 식별 가능하게
• 4. staging push 워크플로우 추가 — on: push: branches: [staging], 빌드 → 스크린샷 project 실행 → upload-artifact로 저장
• 5. 디스코드 전송 스텝 추가 — 봇 API로 스크린샷 첨부 전송 (메시지당 10파일 제한 → 분할 전송 또는 스레드 활용, artifact 링크 포함)

완료 조건

• staging push 시 워크플로우가 자동 실행되어 전 시나리오 스크린샷이 artifact 로 저장된다
• 디스코드 채널에 배포 커밋 정보와 함께 스크린샷이 전송되어, production promote 판단 자료로 쓸 수 있다
• 로컬에서도 playwright test --project=screenshots 로 동일하게 재현 가능하다

참고

• 목킹 구조 및 api.error() 사용법: apps/web/e2e/README.md
• 디스코드 봇 전송 패턴: .github/workflows/discord-pr-bot.yml
• 스크린샷은 목 데이터 기준(결정적 재현 목적) — 실서버 데이터 검증은 범위 외