Design Docs
Popup모달 팝업 컴포넌트입니다. Portal을 사용하여 화면 중앙에 표시되며, 오버레이 클릭 또는 ESC 키로 닫을 수 있습니다. text(title)에는 마침표(.)를 사용할 수 없고, subText에는 마침표(.)를 사용할 수 있습니다.
Basic Popup기본 팝업 사용 예시
Popup with Header and Footer헤더와 푸터가 있는 팝업
Small Size Popup작은 크기의 팝업
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| isOpen | boolean | false | Yes | 팝업 열림 상태 |
| onDismiss | string | undefined | - | 팝업이 닫힐 때 호출되는 콜백 함수 |
| beforeFocusRef | string | undefined | - | 팝업이 닫힌 후 포커스를 복원할 요소의 ref |
| isScrollYOverFlow | boolean | false | - | 세로 스크롤 오버플로우 허용 여부 |
Sub Components• Popup.Container - 팝업의 최상위 컨테이너• Popup.Contents - 일반 크기 컨텐츠 영역• Popup.SmallSizeContents - 작은 크기 컨텐츠 영역• Popup.FullSizeContents - 전체 화면 크기 컨텐츠 영역• Popup.NoSpaceContents - 여백 없는 컨텐츠 영역• Popup.SmallSizeNoSpaceContents - 작은 크기 + 여백 없는 컨텐츠 영역• Popup.Header - 헤더 영역• Popup.Footer - 푸터 버튼 영역 (ONE, TWO, TWO_REVERSE 타입 지원)• Popup.CloseIcon - 닫기 아이콘