핵심 요약
여기어때의 프런트엔드 팀은 웹과 웹뷰의 뒤로가기 처리 차이를 하나의 흐름으로 통합하기 위해 모달 기반의 히스토리 관리를 도입했다.
구현 방법
- ModalOverlayHistoryProps 타입으로 두 가지 뒤로가기 처리(interceptHistoryBack: true/false) 구분
- 전역 싱글톤 모듈로 registerModal/unregisterModal, requestBackOnClose, closeAllThenRun로 모달 상태와 히스토리 관리
- 해시 기반 모달 관리(BACK 해시)와 단일 popstate 리스너로 웹/웹뷰 뒤로가기 흐름 통일
- 모든 모달이 하나의 handleHistoryBack 콜백으로 동일 경로에 도달하도록 연결
- 웹뷰는 DOM 트리거를 활용해 모달 닫힘 순서를 순차적으로 처리
주요 결과
- 두 환경의 뒤로가기가 하나의 흐름으로 처리되어 UX 일관성 향상
- 해시/팝스테이트 관리의 중앙화로 버그 감소
- 디버깅 오버레이 도입으로 모달 엔트리 상태를 실시간 확인 가능
