Alert - OLUN. Design System

Alert: 블록 단위 메시지입니다. 제목, 본문, dismiss action을 가질 수 있습니다.
InlineAlert: 필드나 툴바 옆에 붙는 짧은 상태 문구입니다. 닫기 동작이 필요하면 Alert를 사용합니다.
variant: info · success · warning · error
live region: error는 assertive, 그 외 상태는 polite로 전달됩니다.

블록 알림

영역 전체에 적용되는 안내와 상태 원인 설명

CSV 검토 준비

업로드한 파일을 검토한 뒤 일괄 등록을 진행합니다.

코드 보기tsx

import { Alert } from "@olundot/ui";

export function AlertBlock() {
  return (
    <Alert variant="info" title="CSV 검토 준비">
      업로드한 파일을 검토한 뒤 일괄 등록을 진행합니다.
    </Alert>
  );
}

인라인 알림

폼 필드나 툴바 옆에 붙는 짧은 상태 문구

마감 10분 전에는 문항 편집이 제한됩니다.

코드 보기tsx

import { InlineAlert } from "@olundot/ui";

export function AlertInline() {
  return (
    <InlineAlert variant="warning" surface="plain">
      마감 10분 전에는 문항 편집이 제한됩니다.
    </InlineAlert>
  );
}

닫을 수 있는 알림

사용자가 확인한 뒤 닫을 수 있는 영역 알림

저장 완료

변경 사항이 임시 저장되었습니다.

코드 보기tsx

import { useState } from "react";
import { Alert, Button } from "@olundot/ui";

export function AlertDismissible() {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <Alert variant="success" title="저장 완료" onDismiss={() => setVisible(false)}>
      변경 사항이 임시 저장되었습니다.
    </Alert>
  ) : (
    <Button size="sm" variant="outline" onClick={() => setVisible(true)}>
      다시 보기
    </Button>
  );
}

오류 live region

오류는 assertive live region으로 즉시 전달

저장 실패

네트워크 오류가 발생했습니다. 연결을 확인한 뒤 다시 시도하세요.

코드 보기tsx

import { Alert } from "@olundot/ui";

export function AlertErrorLive() {
  return (
    <Alert variant="error" title="저장 실패">
      네트워크 오류가 발생했습니다. 연결을 확인한 뒤 다시 시도하세요.
    </Alert>
  );
}