Dialog
core모달 다이얼로그. 9-part anatomy: Root, Disclosure, Panel, Heading, Description, Dismiss, Header, Body, Footer.
컴포넌트 의존 관계
깊이
100%
기본 구조 — Header / Body / Footer
DialogDisclosure — 비제어 모드
DialogDisclosure를 사용하면 open/setOpen 상태 관리 없이 다이얼로그를 열고 닫을 수 있습니다.
사이즈 변형 — xs ~ full
접근성 — aria-labelledby / aria-describedby 자동 연결
DialogHeading은 자동으로 aria-labelledby를, DialogDescription은 aria-describedby를 다이얼로그에 연결합니다. 수동 ID 관리가 필요 없습니다.
스크롤 가능한 본문 — DialogBody overflow
다이얼로그 닫기 패턴
다이얼로그를 닫는 여러 방법을 확인할 수 있습니다. ESC, 배경 클릭, 또는 Button의 onClick으로 setOpen(false)을 호출합니다.
중첩 다이얼로그 — 다이얼로그 안에 다이얼로그
커스텀 레이아웃 — Header/Body/Footer 선택적 사용
Header, Body, Footer는 모두 선택적입니다. 필요한 부분만 사용할 수 있습니다.
테스트 커버리지
2026년 2월 4일3/3 통과
3성공
0실패
3전체
- open=true일 때 dialog role을 갖는다
- open=false일 때 dialog role이 없다
- DialogDismiss를 렌더링한다
DialogRoot Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
open | boolean | — | 제어 모드: 열림 상태 |
setOpen | (open: boolean) => void | — | 제어 모드: 상태 변경 핸들러 |
DialogDisclosure Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 트리거 버튼 내용 |
className | string | — | 기본 스타일 오버라이드 |
DialogPanel Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 다이얼로그 콘텐츠 |
size | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "md" | 최대 너비 프리셋 |
backdrop | ReactElement | <div> (반투명 배경) | 배경 오버레이 요소 |
className | string | — | 기본 스타일 오버라이드 |
DialogHeading Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 제목 텍스트 (자동 aria-labelledby 연결) |
DialogDescription Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 설명 텍스트 (자동 aria-describedby 연결) |
DialogDismiss Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children | ReactNode | — | 닫기 버튼 내용 |
DialogHeader Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | Heading, Description, Dismiss 등 헤더 콘텐츠 |
DialogBody Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 스크롤 가능한 본문 콘텐츠 |
DialogFooter Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 액션 버튼 영역 |
Import
tsx
import {
DialogRoot,
DialogDisclosure,
DialogPanel,
DialogHeading,
DialogDescription,
DialogDismiss,
DialogHeader,
DialogBody,
DialogFooter,
} from "@reopt-ai/opt-ui";키보드 동작
| 키 | 동작 |
|---|---|
| Esc | 다이얼로그 닫기 |
| Tab | 다이얼로그 내 포커스 이동 (트랩) |