핵심 요약
여기어때가 항공 프론트엔드의 레이아웃 뼈대를 하나의 LayoutContainer로 통합하고, 웹/웹뷰/앱 간 환경 차이를 외부 훅으로 관리해 일관된 UI를 구현했다.
구현 방법
- LayoutContainer를 mode='fullPage'와 'modal' 두 가지로 구성
- 헤더/본문/하단 버튼 구조를 공통으로 재사용
- 높이 계산은 100dvh/100vh 차이를 고려하고 iOS 영향을 반영
- 환경 지식은 컨테이너 밖 훅에서 관리하고 스크롤 타겟을 mode에 따라 분기
주요 결과
- 크로스 플랫폼에서 레이아웃 쉬프트 제거와 화면 일관성 유지
- 환경 분기를 외부로 몰아 확장성과 유지보수성 향상