Alert

사용자에게 중요한 정보를 표시하는 정적 알림 컴포넌트입니다.

설치

Terminal

npx @msub-core/ui-cli add alert

사용법

TSX

import {
  Alert,
  AlertTitle,
  AlertDescription,
  AlertAction,
} from "@msub-core/ui/components/alert"

function MyComponent() {
  return (
    <Alert variant="info" icon={<Info className="h-4 w-4" />}>
      <AlertTitle>알림</AlertTitle>
      <AlertDescription>
        이것은 정보성 알림 메시지입니다.
      </AlertDescription>
    </Alert>
  )
}

기본

기본 알림

이것은 기본 스타일의 알림 메시지입니다.

Prop	Type	Default	Required	Description
variant	"default" \| "info" \| "success" \| "warning" \| "error"	"default"	No	알림 색상 변형
icon	ReactNode	-	No	왼쪽 아이콘

Variants

정보

이것은 정보성 알림입니다.

성공

작업이 성공적으로 완료되었습니다.

경고

주의가 필요한 상황입니다.

오류

문제가 발생했습니다.

아이콘만 있는 경우

아이콘과 설명만 있는 간단한 알림입니다.

액션 버튼

업데이트 필요

새로운 버전이 출시되었습니다. 최신 기능을 사용하려면 업데이트하세요.

실제 사용 예시

결제 완료

주문이 성공적으로 처리되었습니다. 확인 이메일을 보내드렸습니다.

연결 실패

서버에 연결할 수 없습니다. 네트워크 연결을 확인해주세요.

새로운 기능

이제 다크 모드를 사용할 수 있습니다! 설정에서 활성화하세요.

개발자 모드

개발자 도구가 활성화되어 있습니다. 프로덕션에서는 비활성화하세요.

AlertTitle Props

Prop	Type	Default	Required	Description
children	ReactNode	-	Yes	제목 텍스트
className	string	-	No	추가 스타일 클래스

AlertDescription Props

Prop	Type	Default	Required	Description
children	ReactNode	-	Yes	설명 텍스트
className	string	-	No	추가 스타일 클래스

AlertAction Props

Prop	Type	Default	Required	Description
children	ReactNode	-	Yes	액션 버튼들
className	string	-	No	추가 스타일 클래스