Skip to Content
ComponentsCalsFeedbackAlert

Alert

개요

Alert는 사용자에게 중요한 정보나 경고를 전달하는 컴포넌트입니다. Cals에서는 예약 확정, 취소, 승인 대기 등 예약 관련 알림 메시지를 표시하는 데 사용됩니다.

언제 사용하는가

  • 예약 확정/취소 알림
  • 예약 승인 대기 안내
  • 예약 가능 시간대 안내
  • 시스템 공지사항 표시
  • 오류 및 경고 메시지 전달

언제 사용하지 말아야 하는가

  • 일시적인 상태 업데이트 → Toast 사용
  • 사용자 액션 필요 → Dialog 사용
  • 짧은 설명 텍스트 → Tooltip 사용
  • 인터랙티브한 정보 → Popover 사용

설치

npx @vortex/cli add alert

기본 사용법

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { CheckCircle2 } from "lucide-react";
 
export default function AlertDemo() {
  return (
    <Alert>
      <CheckCircle2 className="h-4 w-4" />
      <AlertTitle>예약 확정</AlertTitle>
      <AlertDescription>
        2024년 1월 15일 14:00 예약이 확정되었습니다.
      </AlertDescription>
    </Alert>
  );
}

Variants

Default (Info)

일반적인 정보 메시지를 표시합니다.

<Alert>
  <Info className="h-4 w-4" />
  <AlertTitle>예약 가능</AlertTitle>
  <AlertDescription>선택하신 시간대에 예약이 가능합니다.</AlertDescription>
</Alert>

Destructive (Error)

오류나 중요한 경고를 표시합니다.

<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>예약 취소</AlertTitle>
  <AlertDescription>
    예약이 취소되었습니다. 환불은 3-5 영업일 내에 처리됩니다.
  </AlertDescription>
</Alert>

Cals 브랜딩

브랜드 컬러

Cals의 Primary Pink를 활용한 브랜드 Alert 스타일입니다.

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        cals: {
          primary: "#e91e63",
          secondary: "#03a9f4",
          accent: "#9c27b0",
        },
      },
    },
  },
};
<Alert className="border-cals-primary bg-cals-primary/10 text-cals-primary">
  <Calendar className="h-4 w-4" />
  <AlertTitle>Cals 예약 시스템</AlertTitle>
  <AlertDescription>새로운 예약 요청이 도착했습니다.</AlertDescription>
</Alert>

예약 상태 컬러

예약 상태별 Alert 스타일을 제공합니다.

// Available - 예약 가능
<Alert className="border-green-500 bg-green-50 text-green-900">
  <CheckCircle2 className="h-4 w-4" />
  <AlertTitle>예약 가능</AlertTitle>
  <AlertDescription>
    해당 시간대에 예약하실 수 있습니다.
  </AlertDescription>
</Alert>
 
// Pending - 승인 대기
<Alert className="border-orange-500 bg-orange-50 text-orange-900">
  <Clock className="h-4 w-4" />
  <AlertTitle>승인 대기</AlertTitle>
  <AlertDescription>
    예약 요청이 접수되었습니다. 승인까지 최대 24시간 소요됩니다.
  </AlertDescription>
</Alert>
 
// Confirmed - 예약 확정
<Alert className="border-blue-500 bg-blue-50 text-blue-900">
  <CheckCircle2 className="h-4 w-4" />
  <AlertTitle>예약 확정</AlertTitle>
  <AlertDescription>
    2024년 1월 15일 14:00 예약이 확정되었습니다.
  </AlertDescription>
</Alert>
 
// Cancelled - 예약 취소
<Alert className="border-red-500 bg-red-50 text-red-900">
  <XCircle className="h-4 w-4" />
  <AlertTitle>예약 취소</AlertTitle>
  <AlertDescription>
    예약이 취소되었습니다. 취소 수수료가 부과될 수 있습니다.
  </AlertDescription>
</Alert>
 
// Completed - 예약 완료
<Alert className="border-purple-500 bg-purple-50 text-purple-900">
  <CheckCircle2 className="h-4 w-4" />
  <AlertTitle>예약 완료</AlertTitle>
  <AlertDescription>
    서비스가 정상적으로 완료되었습니다. 이용해주셔서 감사합니다.
  </AlertDescription>
</Alert>

브랜드 비교표

속성FoundationiCignalCals
Primary ColorNeutral GrayCorporate Blue #0066ccPrimary Pink #e91e63
Use Case범용 알림기업 공지사항예약 상태 알림
Status ColorsSemantic (success/error)Corporate Blue 기반5가지 예약 상태 컬러
IconOptionalRequired (기업용)Required (예약 상태 표시)
ActionOptionalOptionalOptional (예약 관리 링크)

Props API

Alert

PropTypeDefaultDescription
variant"default" | "destructive""default"Alert 스타일 변형
classNamestring-커스텀 CSS 클래스

AlertTitle

PropTypeDefaultDescription
classNamestring-커스텀 CSS 클래스

AlertDescription

PropTypeDefaultDescription
classNamestring-커스텀 CSS 클래스

접근성

  • Role: role="alert" 자동 적용
  • ARIA: 중요도에 따라 aria-live="polite" 또는 aria-live="assertive" 사용
  • Color Contrast: WCAG AA 기준 충족 (4.5:1 이상)
  • Screen Reader: 아이콘 + 텍스트로 의미 전달
  • Keyboard: 포커스 가능한 액션 버튼 포함 가능

예제

예약 상태별 알림

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { CheckCircle2, Clock, XCircle, Calendar } from "lucide-react";
 
export default function ReservationAlerts() {
  return (
    <div className="space-y-4">
      {/* Available */}
      <Alert className="border-green-500 bg-green-50 text-green-900">
        <Calendar className="h-4 w-4" />
        <AlertTitle>예약 가능</AlertTitle>
        <AlertDescription>
          1월 15일 14:00-16:00 시간대에 예약하실 수 있습니다.
        </AlertDescription>
      </Alert>
 
      {/* Pending */}
      <Alert className="border-orange-500 bg-orange-50 text-orange-900">
        <Clock className="h-4 w-4" />
        <AlertTitle>승인 대기 중</AlertTitle>
        <AlertDescription>
          예약 요청이 접수되었습니다. 승인까지 최대 24시간 소요됩니다.
        </AlertDescription>
      </Alert>
 
      {/* Confirmed */}
      <Alert className="border-blue-500 bg-blue-50 text-blue-900">
        <CheckCircle2 className="h-4 w-4" />
        <AlertTitle>예약 확정</AlertTitle>
        <AlertDescription>
          2024년 1월 15일 14:00 예약이 확정되었습니다.
        </AlertDescription>
      </Alert>
 
      {/* Cancelled */}
      <Alert className="border-red-500 bg-red-50 text-red-900">
        <XCircle className="h-4 w-4" />
        <AlertTitle>예약 취소</AlertTitle>
        <AlertDescription>
          예약이 취소되었습니다. 취소 수수료 5,000원이 부과됩니다.
        </AlertDescription>
      </Alert>
    </div>
  );
}

액션 버튼 포함

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Clock } from "lucide-react";
 
export default function AlertWithAction() {
  return (
    <Alert className="border-orange-500 bg-orange-50 text-orange-900">
      <Clock className="h-4 w-4" />
      <div className="flex-1">
        <AlertTitle>승인 대기 중</AlertTitle>
        <AlertDescription>
          예약 요청이 접수되었습니다. 승인까지 최대 24시간 소요됩니다.
        </AlertDescription>
      </div>
      <Button variant="outline" size="sm" className="ml-auto">
        예약 내역 보기
      </Button>
    </Alert>
  );
}

Cals 브랜드 알림

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Calendar } from "lucide-react";
 
export default function CalsBrandAlert() {
  return (
    <Alert className="border-cals-primary bg-cals-primary/10 text-cals-primary">
      <Calendar className="h-4 w-4" />
      <AlertTitle>Cals 예약 시스템</AlertTitle>
      <AlertDescription>
        새로운 예약 요청이 3건 도착했습니다. 예약 관리 페이지에서 확인하세요.
      </AlertDescription>
    </Alert>
  );
}

관련 컴포넌트

  • Toast - 일시적인 상태 알림
  • Dialog - 사용자 액션 필요 시
  • Card - 정보 그룹핑
  • Badge - 상태 라벨 표시
Last updated on
TagDialog