오버레이 · SINCE v0.1.0
DialogPanel — 제목과 본문, footer를 담는 DialogPanel
최대 폭 550의 표면 안에 title, description, leading, children과 footer를 정렬하는 React Native 다이얼로그 패널입니다.
DialogPanel 사용 시점과 역할
DialogPanel은 Modal을 직접 소유하지 않는 시각적 패널 조각입니다. 필수 title과 선택적 description, leading, footer를 제공해 확인 창부터 복합 폼까지 앱의 Dialog 안에서 조합할 수 있습니다.
- 필수 title과 선택적 description·leading·footer
- 모바일과 데스크톱에 공통으로 쓰는 최대 폭 550
- 테마 surface, line, radius, spacing 기반 패널
설치와 최소 예제
DialogPanel: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { DialogPanel } from '@gj-kit/expo-ui';
<DialogPanel title="기록을 삭제할까요?" description="삭제한 기록은 복구할 수 없습니다." footer={<ConfirmActionRow {...actions} />} />접근성과 플랫폼 동작
제목과 설명은 실제 텍스트로 렌더링되지만 DialogPanel 자체가 modal 역할이나 포커스 관리를 가장하지 않습니다. 해당 정책은 Dialog와 앱의 오버레이 구조에서 제공합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.