컴포넌트
Notification Badge
아이콘 위에 카운트 배지를 표시하고, 값이 변할 때 팝/바운스 애니메이션으로 강조하는 알림 배지 컴포넌트. 99+ 표기, dot 모드, 최초 등장 애니메이션, prefers-reduced-motion 존중을 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/NotificationBadge-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | — | 표시할 카운트 값 (필수). 음수는 0으로 클램프됨. |
| max | number | 99 | 이 값을 초과하면 "max+" 형태로 표기. |
| dot | boolean | false | dot 모드: 숫자 없이 작은 점으로만 표시. |
| showZero | boolean | false | count가 0일 때도 배지를 표시할지 여부. |
| children | ReactNode | 기본 벨 아이콘 | 배지를 감쌀 대상(아이콘 등). 미지정 시 자작 벨 아이콘 렌더. |
| placement | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | 배지가 아이콘에 붙는 위치. |
| size | number | 48 | 기본 아이콘 컨테이너 한 변 크기(px). 배지 크기·폰트 계산 기준. |
| label | string | "알림" | 접근성 레이블 (aria-label 기반, 스크린리더 안내). |
| className | string | undefined | 추가 CSS 클래스. |