64 lines
2.5 KiB
Markdown
64 lines
2.5 KiB
Markdown
# 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) — 실행 방법 및 전체 캡처 목록
|