63 lines
2.1 KiB
Markdown
63 lines
2.1 KiB
Markdown
# 페이지 스크린샷 가이드
|
|
|
|
앱 실행 중 각 페이지를 파일로 저장하는 방법. Claude Design 등 외부 도구에 전달할 때 사용.
|
|
|
|
## 전제 조건
|
|
|
|
- 앱 실행 중 (`docker compose up`)
|
|
- Python 3 + playwright 설치됨
|
|
|
|
```bash
|
|
pip3 install playwright
|
|
# 브라우저 다운로드 불필요 — 로컬 Chrome 사용
|
|
```
|
|
|
|
## 실행
|
|
|
|
### 비인증 페이지만 (로그인 불필요)
|
|
|
|
```bash
|
|
python3 docs/development/screenshot-guide.py
|
|
```
|
|
|
|
7장 캡처: 홈(비로그인), 로그인, 회원가입, 게시글 목록, 모집 목록, 게임 상세(비로그인), 이용약관
|
|
|
|
### 전체 캡처 (로그인 포함 세부 화면)
|
|
|
|
```bash
|
|
SCREENSHOT_EMAIL=user@example.com SCREENSHOT_PASSWORD=yourpw \
|
|
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장만 저장됨
|