[fix] Webview 기기별 Safe Area 미적용 문제 해결 및 CSS 변수 기반 대응

[oesnuj]

#️⃣연관된 이슈

#1107

📝작업 내용

기존에 사용하던 constant(safe-area-inset-top) 및 env(safe-area-inset-top) 방식이 최신 기기나 특정 브라우저 환경, 특히 WebView 내에서 일관되게 동작하지 않아 상단 바가 노치 영역에 가려지는 문제가 발생했습니다.

이를 해결하기 위해 React Native에서 직접 주입하는 명시적 CSS 변수 방식을 도입했습니다.

변경 사유

문제점: env() 함수는 viewport-fit=cover 설정에도 불구하고 특정 안드로이드 기기나 iOS WebView에서 값을 0으로 반환하거나 무시하는 경우가 발생하여 레이아웃 파편화가 심함.

해결책: 신뢰할 수 있는 소스(Native App)에서 실시간으로 계산된 Safe Area 값을 CSS 변수로 주입받아 사용함으로써 모든 기기에서 동일한 여백 확보 가능.

Summary by CodeRabbit

릴리스 노트

• 개선 사항
  • 노치 및 디스플레이 컷아웃이 있는 기기에서의 레이아웃 처리 개선
  • 안전 영역 패딩 커스터마이제이션을 통한 UI 적응성 향상

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
moadong	Ready	Preview, Comment	Jan 25, 2026 10:02am

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

웹뷰의 안전 영역(Safe Area) 처리를 개선하기 위해 viewport 메타 태그에 viewport-fit=cover 속성을 추가하고, ClubDetailTopBar의 padding-top을 표준 CSS 변수 기반 방식으로 변경했습니다.

Changes

Cohort / File(s)	변경 사항
뷰포트 설정 frontend/public/index.html	viewport 메타 태그의 content 속성에 viewport-fit=cover 추가하여 노치/특수 영역이 있는 디바이스 대응
안전 영역 스타일 frontend/src/pages/ClubDetailPage/components/ClubDetailTopBar/ClubDetailTopBar.styles.ts	TopBarWrapper의 padding-top을 safe-area-inset-top 상수에서 var(--rn-safe-top, 0px) CSS 변수 기반 방식으로 변경

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3분

Possibly related issues

• [fix] MOA-568 웹뷰 상단 안전 영역(Safe Area) 미적용 문제 해결 #1107: viewport-fit=cover 추가 및 TopBarWrapper padding 변경으로 웹뷰 상단 안전 영역(Safe Area) 미적용 문제를 해결합니다.

Possibly related PRs

• [feature] 상세 페이지 모바일 탑바 웹뷰로 이관 및 리액트 네이티브 API 연동 구조 도입 #1090: ClubDetailTopBar의 TopBarWrapper padding-top 스타일링과 관련하여 동일한 컴포넌트를 수정합니다.

Suggested labels

💻 FE, 🛠Fix

Suggested reviewers

• lepitaaar
• suhyun113
• seongwon030

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	코드 변경사항들이 연결된 이슈 MOA-568의 목표인 WebView 안전 영역 문제 해결을 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 WebView 안전 영역 처리 개선이라는 범위 내에 있으며, 무관한 변경은 없습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	PR 제목이 변경 사항의 주요 목적을 명확히 반영하고 있으며, WebView Safe Area 문제 해결과 CSS 변수 기반 대응이라는 핵심 내용을 정확히 요약하고 있습니다.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[seongwon030]

수고하셨습니다!