Toast

사용자에게 짧은 알림 메시지를 표시하는 토스트 컴포넌트입니다.

Default

설치

Terminal

npx @msub-core/ui-cli add toast

사용법

TSX

// 1. layout.tsx에 Toaster 추가
import { Toaster } from "@msub-core/ui/components/toast"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

// 2. 컴포넌트에서 useToast 훅 사용
import { useToast } from "@msub-core/ui/components/toast"

function MyComponent() {
  const { toast } = useToast()

  return (
    <Button onClick={() => toast({ title: "알림", description: "메시지 내용" })}>
      토스트 표시
    </Button>
  )
}

Toaster Props

Prop	Type	Default	Required	Description
stack	boolean	true	No	토스트를 스택 형태로 쌓을지 여부
maxVisible	number	5	No	표시할 최대 토스트 개수
duration	number	5000	No	자동 dismiss 시간 (ms)

toast() API

Prop	Type	Default	Required	Description
title	ReactNode	-	No	토스트 제목
description	ReactNode	-	No	토스트 본문 내용
variant	"default" \| "destructive" \| "success" \| "warning" \| "info"	"default"	No	토스트 스타일
action	ReactNode	-	No	액션 버튼 컴포넌트

Variants

액션 버튼

스택 모드

여러 토스트가 쌓일 때 스택 형태로 표시됩니다. 상단의 Stack Mode 버튼으로 전환해보세요.

Sonner 호환 API

TSX

// sonner 라이브러리와 동일한 API 제공
import { sonnerToast as toast } from "@msub-core/ui/components/toast"

// 기본 사용
toast("Hello World")
toast.success("저장되었습니다")
toast.error("오류가 발생했습니다")
toast.warning("주의하세요")
toast.info("정보입니다")
toast.loading("로딩 중...")

// Promise 지원
toast.promise(fetchData(), {
  loading: "로딩 중...",
  success: "완료!",
  error: "실패",
})

// 옵션
toast.success("저장됨", {
  description: "파일이 저장되었습니다",
  action: {
    label: "되돌리기",
    onClick: () => undo(),
  },
})

// 닫기
toast.dismiss(id)
toast.dismiss() // 전체 닫기

sonnerToast API

Prop	Type	Default	Required	Description
toast(message)	string \| object	-	No	기본 토스트 표시
toast.success(message)	string \| object	-	No	성공 토스트
toast.error(message)	string \| object	-	No	에러 토스트
toast.warning(message)	string \| object	-	No	경고 토스트
toast.info(message)	string \| object	-	No	정보 토스트
toast.loading(message)	string \| object	-	No	로딩 토스트
toast.promise(promise, opts)	Promise	-	No	Promise 상태에 따라 자동 변경
toast.dismiss(id?)	string?	-	No	토스트 닫기 (id 없으면 전체)