핵심 개념

프로바이더 하나에 모달 스택 하나

ModalProvider는 오버레이 호스트를 마운트하고 모달 어댑터를 등록하며 공통 키프레임을 주입하고 스택 정책을 관리합니다. 최상단 모달만 Escape 키, 백드롭 클릭, 포커스 가두기에 반응합니다. 인라인 레이어는 쌓이는 순서에 따라 더 높은 z-index를 받습니다.

store를 지정하지 않은 프로바이더는 모듈 수준의 modal 퍼사드가 접근할 수 있도록 globalModalStore를 사용합니다. 이러한 기본 프로바이더는 하나만 마운트하세요. 독립된 트리가 필요하다면 @ilokesto/overlay의 createOverlayStore()로 스토어를 각각 만들어 각 프로바이더에 전달합니다.

표시, 닫기, 제거

display<TResult>()는 모달을 열고 Promise<TResult | undefined>를 반환합니다. render에 전달되는 범위 지정 close(result)는 모달 상태를 open에서 closing으로 바꿉니다. 어댑터는 종료 모션이 진행되는 동안 모달을 유지한 뒤 제거하며, Promise는 제거 시점에 처리됩니다.

reject(id, reason)도 같은 닫기 단계를 거치지만 모달이 제거될 때 Promise를 거부합니다. remove는 닫기 단계를 건너뛰고 즉시 제거합니다. clear는 모든 모달을 즉시 제거하고, closeAll은 열려 있는 모든 모달의 종료 모션을 시작합니다.

인라인과 최상위 레이어 전송 방식

기본값인 inline은 고정 위치 래퍼, 패키지 백드롭, 포커스 트랩, 위치 스타일을 렌더링합니다. top-layer는 네이티브 <dialog>.showModal(), 최상위 레이어 스택, 포커스 동작을 사용하면서 패키지의 닫기 라이프사이클을 유지합니다. 두 전송 방식은 프로바이더 내부의 최상단 모달 정책을 공유합니다.

표현 방식은 콘텐츠가 결정합니다

패키지는 전송 영역, 백드롭, 모션의 스타일을 지정합니다. 카드, 제목, 버튼, 디자인 토큰은 제공하지 않습니다. 콘텐츠는 사용자가 작성한 render 콜백에서 제공하며, 필요에 따라 className, style, backdropClassName, backdropStyle을 사용할 수 있습니다.

이 모달 정책이 필요 없다면 @ilokesto/overlay로 어댑터를 작성하세요. 정책이 필요하다면 저수준 런타임 위에서 포커스와 닫기 동작을 다시 구현하지 마세요.