Modal

@hua-labs/ui

v1.1.0

백드롭, ESC 키 지원, ARIA 접근성이 포함된 다이얼로그 오버레이 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Modal } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 모달

제목과 설명 포함

다양한 크기

폼 모달

Props

이름	타입	기본값	설명
`isOpen*`	`boolean`	-	Controls whether the modal is visible
`onClose*`	`() => void`	-	Callback when modal should close
`title`	`string`	-	모달 헤더 제목
`description`	`string`	-	모달 헤더 설명
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"md"`	모달 너비 크기
`closable`	`boolean`	`true`	Show close button (recommended)
`closeOnOverlayClick`	`boolean`	`true`	Close modal when clicking overlay
`showBackdrop`	`boolean`	`true`	Show backdrop overlay
`centered`	`boolean`	`true`	모달을 화면 중앙에 배치
`backdropDot`	`string`	-	백드롭 오버레이 dot 스타일 문자열

코드 예시

기본 사용법tsx

1// Via framework (recommended)
2import { Modal } from '@hua-labs/ui';
3import { Button } from '@hua-labs/ui';
4// Or direct import
5// import { Modal } from '@hua-labs/ui/overlay';
6 
7const [isOpen, setIsOpen] = useState(false);
8 
9<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
10 
11<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
12  <p>Modal content goes here</p>
13</Modal>

제목 포함tsx

1<Modal
2  isOpen={isOpen}
3  onClose={() => setIsOpen(false)}
4  title="Confirm Action"
5  description="Are you sure you want to continue?"
6>
7  <div className="flex gap-2 mt-4">
8    <Button variant="outline" onClick={() => setIsOpen(false)}>
9      Cancel
10    </Button>
11    <Button onClick={handleConfirm}>Confirm</Button>
12  </div>
13</Modal>

다양한 크기tsx

1<Modal
2  isOpen={isOpen}
3  onClose={() => setIsOpen(false)}
4  size="xl" // sm, md, lg, xl, 2xl, 3xl
5  title="Large Modal"
6>
7  <p>Large content area</p>
8</Modal>

접근성

•Role & ARIA: role='dialog', aria-modal='true', aria-labelledby, aria-describedby 사용
•키보드: ESC 키로 모달 닫기, 포커스 트랩 적용
•스크롤 잠금: 모달 열릴 때 body 스크롤 잠금

DotNav ConfirmModal