[Notice] z Index 관련 안내

[Sh031224]

배경

아래 컴포넌트들은 모두 Portal을 사용합니다.

• Modal
• Toast
• SnackBar
• Alert
• Popover
• Tooltip

디자인 시스템을 도입할 때 위 컴포넌트들에서 zIndex 관련 문제가 발생할 수 있습니다.

이 때 Stacking Context 개념을 이해하고 넘어가야합니다.

<div id="app" style="z-index: 1">
  <div role="status" style="z-ndex: 9999" />
</div>

<div role="modal" style="z-index: 2" />

위 예시로 들면, 실제 렌더링 될 때 stacking은 아래와 같습니다.

<!-- z index 1 -->
<div id="app" style="z-index: 1">
  <!-- z index 1.9999 -->
  <div role="status" style="z-ndex: 9999" />
</div>

<!-- z index 2 -->
<div role="dialog" style="z-index: 2" />

그렇기 때문에 role="status" 요소는 role="dialog" 요소 위로 절대 올라올 수 없는 구조가 됩니다.

만약 프로덕트가 react나 next 구버전을 사용하는 경우

<div id="__next" />
<div id="app" />

위 두가지 형태로 앱이 렌더링 되기 때문에 Stacking 문제가 생길 확률이 높습니다.

해결방법

이를 해결하기 위해서는 아래 컴포넌트들에
disablePortal 혹은 container prop을 통해 해결해야합니다.

• Modal
• Alert
• Popover
• Tooltip

혹은 아래 요소에 대한 z-index 속성을 제거해야합니다.

<div id="__next" />
<div id="app" />

<!-- z index 설정 X -->
<div id="app" style="">
  <!-- z index 9999 -->
  <div role="status" style="z-ndex: 9999" />
</div>

<!-- z index 2 -->
<div role="dialog" style="z-index: 2" />