Alert

정보를 전달하는 알림 메시지 컴포넌트입니다.

개요

Alert는 사용자에게 중요한 정보를 전달하는 컴포넌트입니다. iCignal Alert는 iCignal 브랜드 컬러가 적용되어 있으며, 분석 프로세스와 데이터 처리 상태를 명확하게 전달합니다. Foundation Alert의 모든 기능을 상속합니다.

주요 특징:

4가지 Variant (success, warning, danger, info)
닫기 버튼
아이콘 지원
제목 + 설명
iCignal 브랜드 컬러 적용

사용 사례:

iCignal 분석 완료 알림
데이터 처리 상태 안내
리포트 생성 결과
캠페인 설정 경고

설치


npx @vortex/cli add alert --package icignal

기본 사용법


import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import { Alert, AlertTitle, AlertDescription } from "@vortex/ui-icignal";
 
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>리포트 생성에는 약 5분이 소요됩니다.</AlertDescription>
</Alert>

닫기 버튼


<Alert closable onClose={() => console.log("closed")}>
  <AlertDescription>닫을 수 있는 알림</AlertDescription>
</Alert>

iCignal 브랜딩

브랜드 컬러

iCignal Alert는 다음 브랜드 컬러를 사용합니다:

Info (Blue): #2196f3 - 일반 정보 안내
Success (Green): #4caf50 - 성공, 완료 알림
Warning (Orange): #ff9800 - 경고, 주의 필요
Danger (Red): #f44336 - 오류, 실패 알림

iCignal 특화 사용 가이드

데이터 분석 완료 알림:


import { CheckCircle, BarChart } from "lucide-react";
 
<Alert variant="success">
  <CheckCircle size={20} className="mr-sm" />
  <div>
    <AlertTitle>분석 완료</AlertTitle>
    <AlertDescription>
      월간 트래픽 분석이 완료되었습니다. 총 45,231건의 데이터를 분석했습니다.
    </AlertDescription>
  </div>
</Alert>;

리포트 생성 진행 중:


import { Info, FileText } from "lucide-react";
 
<Alert variant="info">
  <Info size={20} className="mr-sm" />
  <div>
    <AlertTitle>리포트 생성 중</AlertTitle>
    <AlertDescription>
      리포트를 생성하고 있습니다. 완료되면 이메일로 알려드리겠습니다.
    </AlertDescription>
  </div>
</Alert>;

데이터 경고:


import { AlertTriangle, Database } from "lucide-react";
 
<Alert variant="warning">
  <AlertTriangle size={20} className="mr-sm" />
  <div>
    <AlertTitle>데이터 품질 경고</AlertTitle>
    <AlertDescription>
      일부 날짜의 데이터가 누락되었습니다. 분석 결과가 부정확할 수 있습니다.
    </AlertDescription>
  </div>
</Alert>;

처리 오류:


import { XCircle, AlertCircle } from "lucide-react";
 
<Alert variant="danger" closable>
  <XCircle size={20} className="mr-sm" />
  <div>
    <AlertTitle>분석 실패</AlertTitle>
    <AlertDescription>
      데이터베이스 연결 오류로 분석을 완료하지 못했습니다. 잠시 후 다시
      시도해주세요.
    </AlertDescription>
  </div>
</Alert>;

Foundation과의 차이점

속성	Foundation	iCignal
Info Color	중립 블루	iCignal Blue (`#2196f3`)
브랜드 적용	없음	iCignal 분석 프로세스 맥락
사용 맥락	범용	Analytics/Reports 특화
아이콘	기본	데이터 관련 아이콘 권장
테마	중립적 테마	iCignal 테마 (`@vortex/ui-icignal/theme`)

import 경로 차이:


// Foundation
import { Alert } from "@vortex/ui-foundation";
 
// iCignal
import "@vortex/ui-icignal/theme"; // 테마 import 필수
import { Alert } from "@vortex/ui-icignal";

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: iCignal 분석 대시보드 상태 알림


import "@vortex/ui-icignal/theme";
import { Alert, AlertTitle, AlertDescription } from "@vortex/ui-icignal";
import { CheckCircle, AlertTriangle, Info } from "lucide-react";
import { useState } from "react";
 
export default function AnalysisStatus() {
  const [alerts, setAlerts] = useState([
    {
      id: 1,
      variant: "success",
      icon: CheckCircle,
      title: "데이터 동기화 완료",
      message: "최신 데이터로 업데이트되었습니다.",
      closable: true,
    },
    {
      id: 2,
      variant: "warning",
      icon: AlertTriangle,
      title: "데이터 지연",
      message: "일부 데이터 소스의 응답이 지연되고 있습니다.",
      closable: true,
    },
    {
      id: 3,
      variant: "info",
      icon: Info,
      title: "자동 새로고침",
      message: "5분마다 자동으로 데이터가 업데이트됩니다.",
      closable: false,
    },
  ]);
 
  const handleClose = (id) => {
    setAlerts(alerts.filter((alert) => alert.id !== id));
  };
 
  return (
    <div className="space-y-md p-lg">
      {alerts.map((alert) => (
        <Alert
          key={alert.id}
          variant={alert.variant}
          closable={alert.closable}
          onClose={() => handleClose(alert.id)}
        >
          <alert.icon size={20} className="mr-sm" />
          <div>
            <AlertTitle>{alert.title}</AlertTitle>
            <AlertDescription>{alert.message}</AlertDescription>
          </div>
        </Alert>
      ))}
    </div>
  );
}

예제 2: iCignal 리포트 생성 워크플로우


import "@vortex/ui-icignal/theme";
import { Alert, AlertTitle, AlertDescription } from "@vortex/ui-icignal";
import { Button } from "@vortex/ui-icignal";
import { FileText, Download, Mail } from "lucide-react";
import { useState, useEffect } from "react";
 
export default function ReportGeneration() {
  const [status, setStatus] = useState("processing"); // processing, success, error
 
  useEffect(() => {
    // Simulate report generation
    const timer = setTimeout(() => {
      setStatus("success");
    }, 3000);
 
    return () => clearTimeout(timer);
  }, []);
 
  return (
    <div className="max-w-2xl mx-auto p-lg">
      {status === "processing" && (
        <Alert variant="info">
          <FileText size={20} className="mr-sm animate-pulse" />
          <div>
            <AlertTitle>리포트 생성 중</AlertTitle>
            <AlertDescription>
              월간 분석 리포트를 생성하고 있습니다. 완료되면 알려드리겠습니다.
            </AlertDescription>
          </div>
        </Alert>
      )}
 
      {status === "success" && (
        <Alert variant="success">
          <Download size={20} className="mr-sm" />
          <div className="flex-1">
            <AlertTitle>리포트 생성 완료</AlertTitle>
            <AlertDescription>
              월간 분석 리포트가 준비되었습니다. 지금 다운로드하거나 이메일로
              받아보세요.
            </AlertDescription>
            <div className="flex gap-sm mt-md">
              <Button variant="primary" size="sm">
                <Download size={16} className="mr-xs" />
                다운로드
              </Button>
              <Button variant="outline" size="sm">
                <Mail size={16} className="mr-xs" />
                이메일 전송
              </Button>
            </div>
          </div>
        </Alert>
      )}
 
      {status === "error" && (
        <Alert variant="danger">
          <AlertTitle>리포트 생성 실패</AlertTitle>
          <AlertDescription>
            리포트 생성 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.
          </AlertDescription>
        </Alert>
      )}
    </div>
  );
}

예제 3: iCignal 캠페인 설정 검증


import "@vortex/ui-icignal/theme";
import { Alert, AlertTitle, AlertDescription } from "@vortex/ui-icignal";
import { AlertTriangle, CheckCircle, XCircle } from "lucide-react";
 
export default function CampaignValidation() {
  const validations = [
    { type: "success", message: "타겟 그룹이 올바르게 설정되었습니다." },
    { type: "warning", message: "예산이 권장 금액보다 낮습니다." },
    { type: "danger", message: "이메일 템플릿이 선택되지 않았습니다." },
  ];
 
  const icons = {
    success: CheckCircle,
    warning: AlertTriangle,
    danger: XCircle,
  };
 
  return (
    <div className="space-y-md p-lg max-w-2xl">
      <h3 className="text-lg font-semibold mb-md">캠페인 설정 검증</h3>
 
      {validations.map((validation, index) => {
        const Icon = icons[validation.type];
        return (
          <Alert key={index} variant={validation.type}>
            <Icon size={16} className="mr-sm" />
            <AlertDescription>{validation.message}</AlertDescription>
          </Alert>
        );
      })}
    </div>
  );
}