Alert
정보를 전달하는 알림 메시지 컴포넌트입니다.
개요
Alert는 사용자에게 중요한 정보를 전달하는 컴포넌트입니다. 4가지 타입으로 메시지의 중요도를 시각적으로 구분합니다.
주요 특징:
- 4가지 Variant (success, warning, danger, info)
- 닫기 버튼
- 아이콘 지원
- 제목 + 설명
사용 사례:
- 성공/실패 메시지
- 경고 안내
- 정보 전달
- 에러 메시지
설치
npx @vortex/cli add alert --package foundation기본 사용법
import { Alert } from "@vortex/ui-foundation";
export default function Example() {
return (
<Alert>
<AlertTitle>알림</AlertTitle>
<AlertDescription>메시지 내용</AlertDescription>
</Alert>
);
}Variants (변형)
Success
<Alert variant="success">
<AlertTitle>성공</AlertTitle>
<AlertDescription>작업이 완료되었습니다.</AlertDescription>
</Alert>Warning
<Alert variant="warning">
<AlertTitle>경고</AlertTitle>
<AlertDescription>주의가 필요합니다.</AlertDescription>
</Alert>Danger
<Alert variant="danger">
<AlertTitle>오류</AlertTitle>
<AlertDescription>문제가 발생했습니다.</AlertDescription>
</Alert>Info
<Alert variant="info">
<AlertTitle>안내</AlertTitle>
<AlertDescription>추가 정보가 있습니다.</AlertDescription>
</Alert>닫기 버튼
<Alert closable onClose={() => console.log("closed")}>
<AlertDescription>닫을 수 있는 알림</AlertDescription>
</Alert>Props API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | ’success’ | ‘warning’ | ‘danger’ | ‘info' | 'info’ | 알림 타입 |
| closable | boolean | false | 닫기 버튼 표시 |
| onClose | () => void | - | 닫기 버튼 클릭 핸들러 |
| className | string | - | 추가 CSS 클래스 |
접근성
Alert 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.
ARIA 속성:
role="alert"(중요한 메시지)aria-live="polite"(상태 변화 안내)
예제
예제 1: 폼 검증 메시지
export default function FormValidation() {
const [error, setError] = useState("");
return (
<div className="space-y-md">
{error && (
<Alert variant="danger" closable onClose={() => setError("")}>
<AlertTitle>입력 오류</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<Input placeholder="이메일" />
<Button>제출</Button>
</div>
);
}관련 컴포넌트
Last updated on