알림 배너

처리 결과나 중요한 상태를 맥락 가까이에 지속 표시하는 배너다. Polaris Banner처럼 페이지나 섹션 헤더 아래에 두고, 토스트처럼 사라지면 안 되는 정보에 쓴다. 하나의 주제만 담고, 경고·위험 상태는 사용자가 다음 행동을 이해할 수 있게 설명한다.

상태

새 기능을 사용할 수 있어요

설정에서 팀 단위 알림을 켤 수 있습니다.

info

3건이 처리됐어요

선택한 항목의 상태가 업데이트됐습니다.

success

필수 값이 비어 있어요

누락된 항목을 입력한 뒤 다시 저장하세요.

warning

저장에 실패했어요

네트워크 상태를 확인한 뒤 다시 시도하세요.

critical

활용 방법

폼 제출 실패

긴 폼이나 복합 화면에서 제출 실패를 요약한다. 필드별 오류는 입력 필드 가까이에 별도로 표시한다.

Preview

저장할 수 없어요

2개 필수 항목이 비어 있습니다. 표시된 입력 필드를 확인하세요.

tsx

<Alert tone="critical" title="저장할 수 없어요">
  2개 필수 항목이 비어 있습니다. 표시된 입력 필드를 확인하세요.
</Alert>

성공 확인

처리 결과가 화면 맥락에 남아야 할 때 쓴다. 짧은 전역 피드백은 Toast 를 쓴다.

Preview

일괄 처리가 완료됐어요

선택한 12건이 승인 상태로 변경됐습니다.

tsx

<Alert tone="success" title="일괄 처리가 완료됐어요">
  선택한 12건이 승인 상태로 변경됐습니다.
</Alert>

행동 포함

해결 행동이 명확하면 action 과 secondaryAction 에 버튼이나 링크를 전달한다.

Preview

초대 링크가 곧 만료돼요

기존 링크는 오늘 자정까지만 사용할 수 있습니다.

tsx

<Alert
  tone="warning"
  title="초대 링크가 곧 만료돼요"
  action={<Button size="sm" variant="primary">새 링크 만들기</Button>}
  secondaryAction={<Button size="sm">나중에</Button>}
>
  기존 링크는 오늘 자정까지만 사용할 수 있습니다.
</Alert>

좁은 영역

작은 카드나 사이드 패널에서는 hideIcon 으로 아이콘을 줄일 수 있다.

Preview

검토가 필요해요

변경된 설정을 저장하기 전에 다시 확인합니다.

tsx

<Alert tone="info" title="검토가 필요해요" hideIcon>
  변경된 설정을 저장하기 전에 다시 확인합니다.
</Alert>

사용 지침

· 화면이나 섹션 전체에 영향을 주는 지속 메시지에 쓴다.
· 짧게 사라져도 되는 피드백은 Alert 가 아니라 Toast 를 쓴다.
· warning·critical 은 사용자가 해결할 수 있는 다음 행동을 함께 설명한다.
· 한 배너에는 하나의 주제만 담고, 주요 행동은 하나로 제한한다.

속성

이름	타입	기본값	설명
tone	"info" \| "success" \| "warning" \| "critical" \| "danger"	"info"	의미와 접근성 role. danger 는 critical 별칭
title	ReactNode	-	요약 제목
children	ReactNode	-	본문 설명
action	ReactNode	-	주요 행동
secondaryAction	ReactNode	-	보조 행동
icon	ReactNode	-	기본 상태 아이콘 대체
hideIcon	boolean	false	아이콘 숨김
onDismiss	() => void	-	닫기 버튼 표시 및 클릭 콜백
dismissLabel	string	"닫기"	닫기 버튼 aria-label
className	string	-	폭·여백 등 레이아웃 조절