대화상자 옵션

개별 대화상자는 다양한 옵션을 통해 동작과 외형을 커스터마이징할 수 있습니다. 모든 옵션은 선택사항이며, 지정하지 않으면 Provider의 기본값을 사용합니다.

position#

대화상자가 표시될 화면상의 위치를 지정합니다. 9분할 그리드 시스템을 사용합니다:

grunfeld.add(() => ({
  element: <div>Alert message</div>,
  position: "top-right",
}));

각 위치는 CSS flexbox를 사용하여 정확하게 배치됩니다.

lightDismiss#

백드롭(배경)을 클릭했을 때 대화상자를 닫을지 여부를 결정합니다:

grunfeld.add(() => ({
  element: <div>Important dialog</div>,
  lightDismiss: false, // Cannot close by clicking backdrop
}));

false로 설정하면 사용자는 명시적으로 버튼을 클릭하거나 ESC 키를 눌러야 대화상자를 닫을 수 있습니다.

renderMode#

대화상자를 렌더링하는 방식을 결정합니다:

• inline: z-index 기반 렌더링 (기본값, 모든 브라우저 지원)
• top-layer: HTML <dialog> 요소 사용 (최신 브라우저만 지원)

top-layer 모드는 z-index 충돌 문제가 없고 브라우저 네이티브 기능을 활용하지만, 브라우저 지원 범위가 제한적입니다.

backdropStyle#

백드롭의 CSS 스타일을 커스터마이징합니다:

grunfeld.add(() => ({
  element: <div>Styled dialog</div>,
  backdropStyle: {
    backgroundColor: "rgba(102, 126, 234, 0.1)",
    backdropFilter: "blur(8px)",
  },
}));

모든 유효한 React CSS 속성을 사용할 수 있습니다.

dismissCallback#

대화상자가 닫힐 때 실행되는 콜백 함수입니다:

grunfeld.add(() => ({
  element: <div>Dialog</div>,
  dismissCallback: () => {
    console.log("Dialog has been closed");
    // Analytics, logging, cleanup, etc.
  },
}));

⚠️ 주의: 이 콜백 내에서 grunfeld.remove()나 grunfeld.clear()를 호출하면 안 됩니다. 대화상자가 이미 제거되는 중이기 때문에 무한 루프나 예기치 않은 동작이 발생할 수 있습니다.