핵심 요약
월급쟁이부자들 프론트엔드 팀은 모달 쌓임 맥락 문제를 해결하기 위해 두 가지 원칙을 도입했다. 첫째, z-index 대신 HTML 문서 등장 순서로 레이어를 결정하고 Radix UI Portal로 모달을 body 하위에 순차적으로 추가한다. 둘째, 쌓임 맥락을 격리해 자식 간 z-index 간섭을 막고 app 엘리먼트에 isolation: isolate를 적용하거나 position: relative로 새 쌓임 맥락을 만든다. 이로써 최상위 쌓임 맥락만 관리하게 되었고 이슈가 크게 줄었다. 타이밍 이슈는 부록에 간단히 다뤘다.
구현 방법
- Radix UI Portal로 모달을 body 하위에 순차적으로 추가
- 쌓임 맥락 격리: isolation: isolate 또는 position: relative로 새 맥락 생성
- 모달 간 z-index 대신 등장 순서에 따른 레이어 관리
주요 결과
- 모달 이슈가 크게 감소하고, z-index 관리 스트레스가 감소했습니다.
