Alert

사용자에게 중요한 메시지를 전달하는 인라인 알림 컴포넌트

개요

Alert 컴포넌트는 페이지 내에서 사용자의 주의가 필요한 메시지를 표시하는 컴포넌트입니다. role="alert"가 자동 적용되어 스크린 리더에 즉시 알림이 전달됩니다.

주요 특징

• ✅ Variants: default, destructive 스타일 지원
• ✅ Compound 구조: AlertTitle, AlertDescription 서브컴포넌트 조합
• ✅ 아이콘 지원: 첫 번째 자식으로 SVG 아이콘을 두면 자동으로 레이아웃 정렬
• ✅ 시맨틱 마크업: role="alert" 자동 적용으로 접근성 보장
• ✅ 디자인 토큰: CSS 변수 기반 테마 커스터마이징 지원

Variants

Alert는 2가지 variant를 지원합니다.

<Alert>
  <Info />
  <AlertTitle>알림</AlertTitle>
  <AlertDescription>
    새로운 업데이트가 있습니다. 확인해 보세요.
  </AlertDescription>
</Alert>
 
<Alert variant="destructive">
  <CircleAlert />
  <AlertTitle>오류 발생</AlertTitle>
  <AlertDescription>
    작업을 완료할 수 없습니다. 다시 시도해 주세요.
  </AlertDescription>
</Alert>

Variant 설명

사용 예시

아이콘 없이 사용

아이콘 없이 제목과 설명만으로 구성할 수 있습니다.

<Alert>
  <AlertTitle>저장 완료</AlertTitle>
  <AlertDescription>
    변경 사항이 성공적으로 저장되었습니다.
  </AlertDescription>
</Alert>

긴 설명 텍스트

AlertDescription은 여러 줄의 텍스트를 균형 있게 줄바꿈합니다.

<Alert>
  <CheckCircle2 />
  <AlertTitle>결제가 완료되었습니다</AlertTitle>
  <AlertDescription>
    주문하신 상품의 결제가 정상적으로 처리되었습니다. 영수증은 등록된
    이메일로 발송되며, 배송 현황은 마이페이지에서 확인하실 수 있습니다.
  </AlertDescription>
</Alert>

API Reference

Alert Props

div 요소의 모든 HTML 속성을 지원합니다.

AlertTitle Props

AlertDescription Props

기본 사용법

import { Alert, AlertTitle, AlertDescription } from "@vortex/ui-foundation"
 
<Alert>
  <AlertTitle>제목</AlertTitle>
  <AlertDescription>설명 텍스트</AlertDescription>
</Alert>
 
<Alert variant="destructive">
  <AlertTitle>오류</AlertTitle>
  <AlertDescription>오류 설명</AlertDescription>
</Alert>

접근성

시맨틱 마크업

• role="alert"가 자동 적용되어 콘텐츠 변경 시 스크린 리더에 즉시 전달됩니다
• Alert 내부의 링크(<a>)에는 밑줄 스타일이 자동 적용됩니다

권장 사항

• ✅ 중요하고 즉각적인 주의가 필요한 메시지에 사용
• ✅ 아이콘은 장식용이므로 텍스트로 의미를 충분히 전달할 것
• ❌ 일반적인 정보성 콘텐츠를 남용하지 않기
• ❌ 사용자 확인이 필요한 작업에는 AlertDialog 사용

관련 컴포넌트

• AlertDialog: 사용자 확인이 필요한 중요 작업의 모달 다이얼로그
• Badge: 상태를 나타내는 작은 시각적 표시기
• Modal: 일반적인 모달 다이얼로그