# 페이지 스크린샷 가이드

앱 실행 중 각 페이지를 파일로 저장하는 방법. Claude Design 등 외부 도구에 전달할 때 사용.

## 전제 조건

- 앱 실행 중 (`docker compose up`)
- Python 3 + playwright 설치됨

```bash
pip3 install playwright
# 브라우저 다운로드 불필요 — 로컬 Chrome 사용
```

## 테스트 계정

| 항목 | 값 |
|---|---|
| 이메일 | `tester@bibimbap.local` |
| 비밀번호 | `test1234!` |

seed: `db/seed-dev.sql` (tester = user3)

## 실행

### 비인증 페이지만 (로그인 불필요)

```bash
python3 docs/development/screenshot-guide.py
```

7장 캡처: 홈(비로그인), 로그인, 회원가입, 게시글 목록, 모집 목록, 게임 상세(비로그인), 이용약관

### 전체 캡처 (로그인 포함 세부 화면)

```bash
SCREENSHOT_EMAIL=tester@bibimbap.local SCREENSHOT_PASSWORD='test1234!' \
    python3 docs/development/screenshot-guide.py
```

추가 7장 캡처:

| 파일 | 화면 |
|---|---|
| `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` | 댓글 작성 폼 (노출 상태, 섹션 포커스) |

## 캡처 전략

**비인증 → 인증 비교**: 01·06번(비인증)과 08·12번(인증) 쌍으로 로그인 전후 차이를 비교할 수 있다.

**폼 상태 강제 노출**: 리뷰/댓글 composer는 서버 API 응답(로그인 상태, 기존 리뷰 여부) 후 JS가 제어한다. 스크립트는 3초 내 자연 노출을 기다리고, 실패하면 `removeAttribute('hidden')`으로 강제 노출해 캡처한다. 실제 동작과 동일한 HTML 구조를 캡처한다.

## 출력 위치

```
/tmp/bibimbap-screenshots/*.png
```

재부팅 시 삭제됨. 영구 저장 필요 시 `OUT_DIR` 변수 변경.

## 주의

- 헤드리스 모드는 다크 테마 미적용 (시스템 prefers-color-scheme 무시)
- Claude Design에 넘길 때 "다크 테마로 리디자인" 프롬프트에 명시
- 로그인 실패(잘못된 계정 정보) 시 인증 페이지는 건너뛰고 비인증 7장만 저장됨