# 2026-06-30 스크린샷 가이드 — 인증 후 세부 화면 캡처 추가

**세션**: sid 20260630-141415
**브랜치**: feat/v2
**커밋**: `5dd639f`, `6e6d6b2`, `872f51c`

## 요약

`docs/development/screenshot-guide.py`를 전체 재작성해 인증 흐름을 추가했다.
기존 비인증 정적 페이지 7장 캡처에서 인증 후 세부 화면 7장을 추가로 캡처할 수 있게 됐다.

---

## 변경 전후 비교

| 항목 | 변경 전 | 변경 후 |
|---|---|---|
| 캡처 장수 | 7장 (비인증 정적 페이지) | 최대 14장 (비인증 7 + 인증 후 7) |
| 로그인 흐름 | 없음 | AJAX fetch + `expect_navigation` |
| 실행 분기 | 단일 | `SCREENSHOT_EMAIL` / `SCREENSHOT_PASSWORD` env var 존재 여부 |
| 리뷰/댓글 composer | 캡처 불가 (`hidden` 상태) | 5초 대기 후 `removeAttribute('hidden')` 폴백 |
| 테스트 계정 | 미문서화 | `tester@bibimbap.local` / `test1234!` (seed-dev.sql user3) |

---

## 추가된 인증 후 캡처 목록

| 파일 | 화면 |
|---|---|
| `08-home-loggedin.png` | 홈 (로그인 후 — 내비게이션 변경) |
| `09-profile.png` | 프로필 페이지 |
| `10-posts-form.png` | 게시글 작성 폼 |
| `11-recruit-form.png` | 모집 작성 폼 |
| `12-game-detail-loggedin.png` | 게임 상세 (로그인 후 전체 뷰) |
| `13-game-review-form.png` | 리뷰 작성 폼 (노출 상태) |
| `14-game-comment-form.png` | 댓글 작성 폼 (노출 상태, 섹션 포커스) |

---

## 구현 상세

### 로그인 인증 흐름

Playwright AJAX fetch 방식으로 `/auth/login` 엔드포인트에 `application/x-www-form-urlencoded` POST 후 `expect_navigation`으로 리다이렉트 완료를 감지한다. 기존 `wait_for_navigation()`은 타이밍 경합이 있어 `expect_navigation` 컨텍스트 매니저로 교체했다.

### hidden 요소 강제 노출 전략

리뷰/댓글 composer는 서버 API 응답(로그인 상태, 기존 리뷰 여부) 이후 JS가 `hidden` 속성을 제거한다. 스크립트는 최대 5초 자연 노출을 대기하고, 실패하면 `page.evaluate("el => el.removeAttribute('hidden')")` 폴백으로 강제 노출해 캡처한다.

---

## 수정된 파일

| 파일 | 변경 유형 |
|---|---|
| `docs/development/screenshot-guide.py` | 전체 재작성 |
| `docs/development/screenshot-guide.md` | 업데이트 (테스트 계정, 전체 실행 명령 추가) |

---

## 관련 문서

- [docs/development/screenshot-guide.md](../development/screenshot-guide.md) — 실행 방법 및 전체 캡처 목록