🎯
Preview
Usage
🎯
Modal Examples
📱
Basic Modal
기본적인 모달 컴포넌트입니다. 버튼을 클릭해서 열고 닫을 수 있습니다.
상태: 닫힘
주요 기능
- 버튼으로 열기/닫기
- 중앙 정렬
- 딤 배경
- 애니메이션
🎲
Conditional Modal
조건부 렌더링이 가능한 모달입니다. 랜덤하게 1번/2번 팝업을 보여줍니다.
상태: 닫힘
주요 기능
- 조건부 렌더링
- 랜덤 상태
- 자동 닫기
- 상태 표시
⚙️
Advanced Modal
고급 기능이 포함된 모달입니다. 외부 클릭 비활성화, 컨테이너 패딩, 복잡한 컴포넌트를 포함합니다.
상태: 닫힘
주요 기능
- 외부 클릭 비활성화
- 컨테이너 패딩
- 복잡한 UI
- 중앙 정렬
- 2중 모달 예제
🎯
useModal Hook API
🎣
useModal 반환값
Method | Type | Description |
---|---|---|
open | (modal: ModalConfig) => string | 모달을 열고 모달 이름을 반환 |
close | (name: string) => Promise<void> | 특정 이름의 모달을 닫음 |
closeAll | () => Promise<void> | 모든 모달을 닫음 |
isOpen | (name: string) => boolean | 특정 모달의 열림 상태를 확인 |
⚙️
ModalConfig
Property | Type | Required | Description |
---|---|---|---|
component | (closeModal: () => Promise<void>) => JSX.Element | Required | 모달 안에 렌더링될 컴포넌트 |
name | string | Optional | 모달 식별자 (자동 생성됨) |
dim | string | Optional | 배경 딤 색상 (예: 'rgba(0, 0, 0, 0.8)') |
centerMode | boolean | Optional | 모달을 화면 중앙에 배치할지 여부 (기본값: false) |
animation | { className?: string; duration: number } | Optional | 애니메이션 설정 |
containerPadding | string | Optional | 모달 컨테이너 패딩 |
disabledScrollLock | boolean | Optional | 스크롤 잠금 비활성화 여부 (기본값: false) |
disabledOutsideClose | boolean | Optional | 외부 클릭으로 닫기 비활성화 여부 (기본값: false) |
onClose | () => void | Optional | 모달 닫힐 때 호출되는 콜백 |
🎯
사용 예제
📝 Usage
🔥 주요 특징:
- • ModalProvider로 앱을 감싸면 어디서든 useModal 사용 가능
- • 개별 상태 관리가 필요 없음 (내부적으로 관리됨)
- • 여러 모달을 동시에 열고 관리할 수 있음
- • 라우팅 변경 시 모든 모달이 자동으로 닫힘