From 392a1251259f1528d4a5dbabbc6e4bf065252cb1 Mon Sep 17 00:00:00 2001 From: kyoung5seo Date: Sat, 19 Sep 2026 08:48:16 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC:=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EA=B0=80=20=EC=8C=93=EC=9D=B4=EB=A9=B4=20=ED=95=A9?= =?UTF-8?q?=EB=B3=B8=20=EA=B2=B0=EC=9E=AC=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=B0=96=EC=9C=BC=EB=A1=9C=20=EB=B0=80?= =?UTF-8?q?=EB=A6=AC=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .App 가운데 정렬(가로 flex) → 세로 flex + 화면 높이 고정. 내용이 넘칠 때 상단 툴바가 잘리고 내부 스크롤이 동작하지 않던 근본 원인 - 책상바 sticky 상단 고정, html/body 스크롤 차단 + #root 100dvh - 짧은 화면(≤760px)에서 로그 2줄 높이로 축소, 카드 min-height 해제·여백 축소 - 390×660 뷰포트에서 결재 12회(상점·의회 경유) 동안 합본 결재 버튼 노출·클릭 확인 Co-Authored-By: Claude Opus 5 --- client/src/App.css | 9 ++++-- client/src/core/components/CoreGameScreen.css | 23 +++++++++++++++ client/src/core/components/CoreSwipeCard.css | 29 +++++++++++++++++++ client/src/core/components/DeskBar.css | 6 ++++ client/src/index.css | 7 ++++- docs/DEVLOG.md | 21 ++++++++++++++ 6 files changed, 92 insertions(+), 3 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index 10dc9c7..a390f2d 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -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%); } diff --git a/client/src/core/components/CoreGameScreen.css b/client/src/core/components/CoreGameScreen.css index c9d5ef3..6d6ba42 100644 --- a/client/src/core/components/CoreGameScreen.css +++ b/client/src/core/components/CoreGameScreen.css @@ -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 { diff --git a/client/src/core/components/CoreSwipeCard.css b/client/src/core/components/CoreSwipeCard.css index d83d2a8..09d5074 100644 --- a/client/src/core/components/CoreSwipeCard.css +++ b/client/src/core/components/CoreSwipeCard.css @@ -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; + } +} diff --git a/client/src/core/components/DeskBar.css b/client/src/core/components/DeskBar.css index 3369c23..4024c5d 100644 --- a/client/src/core/components/DeskBar.css +++ b/client/src/core/components/DeskBar.css @@ -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 { diff --git a/client/src/index.css b/client/src/index.css index ac2f730..2826b4a 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -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 { diff --git a/docs/DEVLOG.md b/docs/DEVLOG.md index 23bc5d3..bf1e957 100644 --- a/docs/DEVLOG.md +++ b/docs/DEVLOG.md @@ -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) + 모바일 실기 대응 **무엇을 왜:** 이제부터 외부 테스터에게 링크를 공유해 피드백을 받기로 해서, "모바일에서 링크만