Notification 알림

Message보다 무거운 피드백: 제목 / 본문 / 타입 아이콘을 가지고 네 모서리에서 팝업되며, 내용이 긴 시스템 알림에 적합합니다.

기본 사용법

기본 사용법

import { notification } from '@lh-ui/react'
import '@lh-ui/react/style/notification'

notification.success({ title: '저장 성공', content: '작품이 갤러리에 게시되었습니다.' })

// 문자열 약식 표기: 제목 줄만 렌더링
notification.info('시스템 알림')

notification 메서드

메서드	설명	반환값
info / success / warning / error / danger	알림 표시	{ close }
close	지정 알림 닫기 (먼저 퇴장 애니메이션 재생)	void
closeAll	모든 알림을 닫고 컨테이너 언마운트	void

const handle = notification.warning({ title: '저장 공간 부족' })
handle.close()

LhNotificationOptions

프로퍼티	설명	타입	기본값
title	제목 (미전달 시 content 사용)	string	—
content	본문 (title과 같은 값일 때 제목 줄만 렌더링)	string	—
duration	자동으로 닫히는 시간 (밀리초), 0이면 자동 닫기 안 함	number	4500
position	팝업 위치	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'
showClose	닫기 버튼 표시 여부	boolean	true
closeLabel	닫기 버튼의 aria-label	string	언어 팩 (zh-CN: 关闭通知)
onClick	클릭 콜백 (전달 후 카드 클릭 가능)	() => void	—
onClose	닫힐 때 콜백	() => void	—
sx	빠른 레이아웃 프로퍼티	SxProps	—

퇴장 애니메이션

React에는 transition-group이 없어, 항목이 스스로 퇴장을 관리합니다. 닫을 때 먼저 lh-notification-slide-leave-*를 재생하고 (280ms) 그 다음 기록을 제거합니다. FLIP 자리 바꿈 애니메이션은 미구현입니다: 큐가 늘거나 줄 때 형제 카드가 순간적으로 자리를 바꿔 표시되며, 쌓임 간격은 컨테이너의 flex gap이 담당합니다.

접근성

warning / danger는 role="alert" (즉시 읽기), info / success는 role="status" (순차 읽기)입니다. 컨테이너는 role="region" + aria-live="polite"입니다.

스타일

import '@lh-ui/react/style/notification'