모바일: 로그가 쌓이면 합본 결재 버튼이 화면 밖으로 밀리는 버그 수정
- .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
co-authored by
Claude Opus 5
Claude Opus 5
parent
20207ff23c
commit
392a125125
+7
-2
@@ -1,8 +1,13 @@
|
||||
/* 세로 flex + stretch로 둔다. 예전엔 가로 flex + align-items:center(중앙 정렬)였는데,
|
||||
콘텐츠가 화면보다 커지면 위아래로 균등하게 넘쳐서 상단 툴바(합본 결재)가 화면 위로
|
||||
잘려 나갔다(모바일에서 로그가 쌓이면 실제로 발생). 또 그 구조에선 자식의 높이가 고정되지
|
||||
않아 CoreGameScreen의 내부 스크롤·sticky 툴바가 동작하지 않았다. */
|
||||
.App {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
|
||||
}
|
||||
|
||||
@@ -5,6 +5,11 @@
|
||||
min-height: 0;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
/* 안전 밸브: 규약·징벌 칩이 늘거나 등급 칩이 줄바꿈되며 콘텐츠가 뷰포트를 넘길 때,
|
||||
문서 전체가 밀리는 대신 이 영역 안에서만 스크롤되게 한다. 툴바는 아래 sticky로
|
||||
고정되므로 스크롤되더라도 합본 결재 버튼은 계속 보인다. */
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.core-loading {
|
||||
@@ -23,6 +28,7 @@
|
||||
font-size: 12px;
|
||||
opacity: 0.75;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.core-log {
|
||||
@@ -35,6 +41,23 @@
|
||||
opacity: 0.6;
|
||||
max-height: 110px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 세로가 짧은 화면(대부분의 폰) — 화면을 넘기지 않도록 우선순위가 낮은 것부터 줄인다.
|
||||
가장 덜 중요한 게 로그(플레이버·디버그 성격)라 제일 먼저 깎고, 그다음이 카드 여백이다.
|
||||
책상바(합본 결재)와 결재 카드·정산하기는 절대 희생하지 않는다. */
|
||||
@media (max-height: 760px) {
|
||||
.core-log {
|
||||
/* 최근 2줄만 — 더 보려면 이 영역 안에서 스크롤된다 */
|
||||
max-height: 30px;
|
||||
padding: 4px 16px 6px;
|
||||
}
|
||||
|
||||
.core-status-row {
|
||||
gap: 10px;
|
||||
padding: 6px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.core-log-line {
|
||||
|
||||
@@ -170,3 +170,32 @@
|
||||
}
|
||||
|
||||
.core-end-round-btn:hover { filter: brightness(1.15); }
|
||||
|
||||
/* 세로가 짧은 화면(대부분의 폰) — 카드가 차지하는 고정 높이를 줄여 전체가 뷰포트에
|
||||
들어오게 한다. min-height 320px는 폰에서 상단 툴바를 밀어내는 주 원인 중 하나였다.
|
||||
카드 본문은 내용만큼만 차지하고, 넘치면 카드 안에서 스크롤된다. */
|
||||
@media (max-height: 760px) {
|
||||
.core-card-container {
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.core-swipe-card {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.core-card-header {
|
||||
padding: 10px 16px 0;
|
||||
}
|
||||
|
||||
.core-card-body {
|
||||
padding: 8px 16px 14px;
|
||||
gap: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.core-choice {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,12 @@
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
font-family: var(--font-typewriter);
|
||||
/* 상단 고정 — 로그·규약 칩이 쌓여 콘텐츠가 넘쳐도 "합본 결재"·"족보표" 버튼이
|
||||
화면 밖으로 밀려나지 않게 한다. 모바일에서 실제로 버튼이 가려지는 문제가 있었다. */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.desk-bar-top {
|
||||
|
||||
@@ -36,13 +36,18 @@
|
||||
--font-ui: 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-ui);
|
||||
overflow: hidden; /* Prevent scrolling for swipe */
|
||||
/* 스와이프 제스처와 페이지 스크롤이 충돌하지 않게 문서 자체는 스크롤하지 않는다.
|
||||
html에도 걸어야 한다 — body만 걸면 모바일 브라우저가 html을 스크롤해서, 콘텐츠가
|
||||
넘칠 때 화면 전체가 밀려 올라가 상단 툴바(합본 결재)가 사라진다(실제로 겪음). */
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
#root {
|
||||
|
||||
@@ -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) + 모바일 실기 대응
|
||||
|
||||
**무엇을 왜:** 이제부터 외부 테스터에게 링크를 공유해 피드백을 받기로 해서, "모바일에서 링크만
|
||||
|
||||
Reference in New Issue
Block a user