From cbb3d47bfa2b41cc3c8d6a9d1ff15d44ed5a9eea Mon Sep 17 00:00:00 2001 From: sb Date: Sat, 4 Jul 2026 17:12:50 +0900 Subject: [PATCH] =?UTF-8?q?fix(ui):=20iOS=20safe-area=20=EA=B2=B9=EC=B9=A8?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=E2=80=94=20=ED=97=A4=EB=8D=94=C2=B7?= =?UTF-8?q?=ED=95=98=EB=8B=A8=20=EB=82=B4=EB=B9=84=20=EC=BD=98=ED=85=90?= =?UTF-8?q?=EC=B8=A0=20=EB=88=8C=EB=A6=BC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - border-box 전역에서 고정 height 가 safe-area 패딩을 포함해 콘텐츠 행이 눌리던 문제 - AppBottomNav: height = calc(56px + safe-area-inset-bottom) → 아이콘 행 온전한 56px + 홈인디케이터 분리 - AppHeader: height → min-height → layout-top 상단 safe-area 패딩만큼 헤더가 커지도록 Co-Authored-By: Claude Opus 4.8 --- src/components/layout/AppBottomNav.vue | 6 ++++-- src/components/layout/AppHeader.vue | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/layout/AppBottomNav.vue b/src/components/layout/AppBottomNav.vue index 90210ab..3e8f465 100644 --- a/src/components/layout/AppBottomNav.vue +++ b/src/components/layout/AppBottomNav.vue @@ -74,8 +74,10 @@ function goSettings() { display: flex; align-items: stretch; justify-content: space-around; - height: 56px; - /* 안드로이드 소프트키(시스템 내비게이션 바) 위에 위치 */ + /* 아이콘 행은 항상 56px 확보 + 그 아래로 홈 인디케이터(safe-area) 공간을 더한다. + (box-sizing:border-box 전역이라 height 에 인셋을 더해야 아이콘 행이 눌리지 않음) */ + height: calc(56px + env(safe-area-inset-bottom, 0)); + /* 안드로이드 소프트키·iOS 홈 인디케이터 영역 확보 */ padding-bottom: env(safe-area-inset-bottom, 0); background: var(--color-background-soft); border-top: 1px solid var(--color-border); diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue index cd9bc29..80c2f26 100644 --- a/src/components/layout/AppHeader.vue +++ b/src/components/layout/AppHeader.vue @@ -80,7 +80,9 @@ async function handleLogout() { display: flex; align-items: center; justify-content: space-between; - height: 56px; + /* height 대신 min-height — 네이티브에서 layout-top 이 상단 safe-area 패딩을 더하므로 + (box-sizing:border-box) 고정 height 면 콘텐츠가 눌린다. min-height 로 헤더가 커지게. */ + min-height: 56px; padding: 0 1.5rem; background: var(--color-background-soft); border-bottom: 1px solid var(--color-border);