컴포넌트
Modal
열림 시 백드롭이 페이드 인되고 카드가 스케일업/슬라이드 인하며 등장하는 접근성 모달. ESC 키·백드롭 클릭·닫기 버튼으로 닫히며, 포커스 트랩(Tab 순환)·body 스크롤 잠금·포커스 복원을 지원한다. role=dialog, aria-modal, aria-labelledby로 스크린리더 대응하고 useReducedMotion으로 모션 최소화 설정을 존중한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Modal-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| open | boolean | — | 모달 표시 여부 |
| onClose | () => void | — | 닫기 요청 콜백 (ESC · 백드롭 · 닫기 버튼) |
| title | string | undefined | 모달 제목 (aria-labelledby로 연결) |
| children | ReactNode | undefined | 본문 콘텐츠 |
| closeOnBackdrop | boolean | true | 백드롭 클릭 시 닫힘 여부 |
| closeOnEsc | boolean | true | ESC 키로 닫힘 여부 |
| maxWidth | number | 440 | 카드 최대 너비(px) |