Skip to main content

Sonner

mfe-lib-shared에서 제공하는 토스트(일시 알림) UI입니다.
작업 결과·오류·진행 상태를 화면 한쪽에 짧게 띄울 때 쓰입니다. 저장 완료, 네트워크 실패, 비동기 작업 성공/실패 등 사용자에게 피드백을 주고 싶을 때 자주 사용합니다.
구현·패턴은 shadcn/ui Sonner (Base UI) 및 Sonner 공식 사이트와 맞추어 두었으므로, 세부 API·예제는 아래 공식 문서를 참고하면 됩니다.

shadcn/ui · Sonner 참고​

상세 설치·예제·API는 공식 문서를 참고하세요.

문서에서 다루는 내용 예시

  • 설치 (shadcn CLI): pnpm dlx shadcn@latest add sonner 등으로 sonner 및 UI 래퍼 추가
  • 설치 (패키지 직접): pnpm i sonner 후 프로젝트의 Toaster 컴포넌트(예: @/components/ui/sonner)를 레이아웃에 배치
  • 루트에 Toaster: app/layout.tsx(또는 루트 레이아웃)의 <body> 안에 <Toaster />를 두어 전역에서 토스트가 보이게 함 — Sonner 시작 가이드 참고
  • 호출: import { toast } from "sonner" 후 toast("메시지")로 기본 토스트 표시
  • 타입: 성공·정보·경고·오류·기본 등 variant 스타일 (shadcn Sonner 페이지 Types 예제)
  • 설명 줄: 제목 외 부가 설명(description)을 붙이는 패턴 (shadcn Description 예제)
  • 위치: Toaster의 position prop으로 상·하·좌·우·중앙 조합 (예: top-left, bottom-center 등) — shadcn Sonner — Position
  • Promise: 비동기 작업 로딩·성공·실패를 한 흐름으로 보여주는 toast.promise 등 — Sonner API 문서의 toast() 항목 참고

세부 prop·전체 옵션은 Sonner API Reference와 shadcn 페이지 하단 API Reference 링크를 따라가면 됩니다.

Sonner 인터랙티브 예제​