모달 구현 | Notion

프로젝트에서 모달을 사용하는 컴포넌트가 다수 존재하여 공통 컴포넌트로 구현하고 각 컴포넌트 내에서 모듈 컴포넌트를 삽입하는 방식으로 구현하였으나 다음과 같은 문제가 발생하여 개선이 필요했습니다.

문제점

모달이 컴포넌트마다 위치가 일관되지 않아 특정 컴포넌트 내에서 다른 요소들과 겹치거나 레이아웃이 깨지는 문제가 발생했습니다.
특정 컴포넌트 내에서 모달을 열었을 때 모달 뒤의 백그라운드 스크롤이 막히지 않는 이슈 발생했습니다.

문제 원인

모달을 일반 컴포넌트 내에서 직접 렌더링할 경우, 부모 요소의 CSS 스타일(overflow: hidden, z-index 등)과 충돌하여 디자인의 일관성을 지키지 못했습니다.

해결 방안

createPortal을 사용하여 modal을 DOM 트리 내에서 최상단으로 위치시켜 다른 컴포넌트와의 CSS 간섭을 제거하여 문제를 해결했습니다.

// 최상단
...
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
      </head>
      <body suppressHydrationWarning className={`${customFont.variable}`}>
        <DarkModeProvider>
          <ToastProvider>
            {children}
            <div id="modal-root" /> // 최상단에 있는 레이아웃에 Modal 컴포넌트 위치시킴
          </ToastProvider>
        </DarkModeProvider>
      </body>
    </html>
  );
}