Alert
중요한 정보나 피드백을 사용자에게 전달하는 Next.js Client Component입니다.
기본
공통 color_* 클래스로 info · success · warning · error 네 가지 의미를 표현합니다.
변경 사항이 저장되었습니다.
요청이 성공적으로 처리되었습니다.
세션이 곧 만료됩니다. 저장해 주세요.
네트워크 연결을 확인해 주세요.
설명만
제목 없이 alert_desc만으로 짧은 메시지를 표시합니다.
새 기능이 추가되었습니다. 설정에서 확인해 보세요.
프로필이 업데이트되었습니다.
아이콘 없음
alert_icon을 생략해 텍스트만 표시합니다. 간단한 안내에 적합합니다.
오늘 02:00~04:00 서비스 점검이 예정되어 있습니다.
이 페이지는 데모 목적으로만 사용됩니다.
크기
alert_sm · alert_lg로 스케일을 조절합니다.
폼 필드 아래 등 좁은 영역에 사용합니다.
기본 크기입니다.
페이지 상단 등 눈에 띄는 안내에 사용합니다.
닫기 가능
alert_close 버튼으로 사용자가 알림을 닫을 수 있습니다. aria-label로 닫기 동작을 설명합니다.
대시보드가 새롭게 개편되었습니다.
브라우저가 오래되었습니다. 최신 버전으로 업데이트해 주세요.
액션
alert_actions로 확인·취소 등 후속 동작 버튼을 배치합니다.
변경 사항을 저장하지 못했습니다. 다시 시도해 주세요.
배너
alert_banner로 페이지 상단 전체 너비 알림을 표시합니다. 좌우 테두리와 모서리 반경을 제거합니다.
문맥 속 사용
폼·카드 등 다른 컴포넌트와 함께 사용합니다. 설명 안에 링크를 포함할 수 있습니다.
새 버전이 출시되었습니다. 릴리스 노트 보기
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
color | 'info' | 'success' | 'warning' | 'danger' | info | 의미 색상. danger는 color_error |
title | string | — | 알림 제목 (alert_title) |
description | string | — | 본문. children으로 대체 |
closable | boolean | false | 닫기 버튼 (alert_close) |
showIcon | boolean | true | 기본 아이콘 표시 |
size | 'sm' | 'md' | 'lg' | md | alert_sm · alert_lg |
role | string | alert | 루트 role (alert · status 등) |
icon | ReactNode | — | 커스텀 아이콘 |
actions | ReactNode | — | 본문 아래 alert_actions 영역에 렌더링 |
className | string | — | alert 루트에 추가 클래스 |
ripple | boolean | true | 클릭 파장(ripple). 닫기·트리거 버튼에 적용 · true 활성 · false 비활성 |
API · Children
| Children | 설명 |
|---|---|
children | 본문 (description prop 대체, Vue default 슬롯 대응) |
icon | 커스텀 아이콘 (alert_icon) |
actions | 본문 아래 액션 버튼·링크 (alert_actions 래퍼 자동 생성) |
API · Events
| 이벤트 | 설명 |
|---|---|
onClose | 닫기 버튼 클릭 시 |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
alert | 알림 루트 |
alert_sm · alert_lg | 크기 |
alert_icon · alert_body · alert_title · alert_desc | 구조 파트 |
alert_close | 닫기 버튼 |
color_info · color_success · color_warning · color_error | 의미 색상 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--alert-padding-y · --alert-padding-x · --alert-gap | var(--space-md) · var(--space-lg) · var(--space-md) | 기본(md) 패딩·간격 |
--alert-font-size · --alert-line-height | var(--text-size-base) · 1.5 | 본문 타이포 |
--alert-title-weight · --alert-title-gap | 600 · var(--space-xs) | 제목 두께·간격 |
--alert-desc-opacity | 0.85 | 설명 텍스트 불투명도 |
--alert-icon-size · --alert-icon-offset | 1.25rem · 0.1rem | 아이콘 크기·정렬 |
--alert-close-size | 1.25rem | 닫기 버튼 크기 |
--alert-actions-gap · --alert-actions-margin-top | var(--space-sm) · var(--space-sm) | 액션 영역 |
--alert-padding-y-sm · --alert-padding-x-sm · --alert-font-size-sm | var(--space-sm) · var(--space-md) · var(--text-size-sm) | sm 크기 |
--alert-icon-size-sm · --alert-close-size-sm | 1rem · 1rem | sm 아이콘·닫기 |
--alert-padding-y-lg · --alert-padding-x-lg | var(--space-lg) · var(--space-xl) | lg 패딩 |
--alert-icon-size-lg · --alert-close-size-lg | 1.5rem · 1.5rem | lg 아이콘·닫기 |