모바일: 로그가 쌓이면 합본 결재 버튼이 화면 밖으로 밀리는 버그 수정

- .App 가운데 정렬(가로 flex) → 세로 flex + 화면 높이 고정. 내용이 넘칠 때
  상단 툴바가 잘리고 내부 스크롤이 동작하지 않던 근본 원인
- 책상바 sticky 상단 고정, html/body 스크롤 차단 + #root 100dvh
- 짧은 화면(≤760px)에서 로그 2줄 높이로 축소, 카드 min-height 해제·여백 축소
- 390×660 뷰포트에서 결재 12회(상점·의회 경유) 동안 합본 결재 버튼 노출·클릭 확인

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
kyoung5seo
2026-09-19 08:48:16 +09:00
co-authored by Claude Opus 5
parent 20207ff23c
commit 392a125125
6 changed files with 92 additions and 3 deletions
+21
View File
@@ -27,6 +27,27 @@
---
## 2026-09-19 — 모바일: 로그가 쌓이면 합본 결재 버튼이 화면 밖으로 밀리는 버그 수정
- **증상**: 폰에서 결재를 계속하면 하단 로그가 늘어나면서 화면 전체가 위로 밀려 올라가고,
상단 책상바의 "합본 결재" 버튼이 가려져 누를 수 없었다.
- **원인**: `.App`이 가로 flex + `align-items:center`(중앙 정렬)였다. 콘텐츠가 뷰포트보다
커지면 위아래로 균등하게 넘쳐 상단이 잘렸고, 자식 높이도 고정되지 않아 게임 화면 내부
스크롤이 동작하지 않았다.
- **수정**:
- `App.css` — 세로 flex + `flex:1; min-height:0`로 바꿔 높이를 뷰포트에 고정.
- `index.css` — html/body `overflow:hidden; overscroll-behavior:none`, `#root`에 `100dvh`.
- `CoreGameScreen.css` — 게임 화면 자체를 내부 스크롤 영역으로(안전 밸브). 세로가 짧은
화면(≤760px)에선 로그를 최근 2줄 높이로 줄인다.
- `DeskBar.css` — 책상바를 `position:sticky; top:0`으로 고정.
- `CoreSwipeCard.css` — 짧은 화면에서 카드 `min-height:320px` 해제, 여백 축소, 본문은 카드
안에서 스크롤.
- **검증**: 390×660 모바일 뷰포트 Playwright로 결재 12회(상점·의회를 거쳐 2라운드까지)
진행하면서 매번 합본 결재 버튼이 화면 안에 있고 실제로 눌리는지(elementFromPoint) 확인 —
전부 통과, 콘솔 에러 0건. 정산하기 버튼도 계속 화면 안에 있었다.
---
## 2026-09-18 — 외부 플레이테스트 배포 준비 (시놀로지 NAS) + 모바일 실기 대응
**무엇을 왜:** 이제부터 외부 테스터에게 링크를 공유해 피드백을 받기로 해서, "모바일에서 링크만