Toast
Toast (토스트)
사용자에게 일시적인 메시지를 표시하는 컴포넌트예요. 성공·오류·로딩 같은 알림을 화면에 띄울 때 유용해요.
출처: 문서
본문
Toast는 사용자에게 일시적인 메시지를 보여 주는 컴포넌트예요. <ExampleTabs name="toaster-basic" />
설정 (Setup)
아직 스니펫이 없다면 다음 명령으로 toaster 스니펫을 추가해요.
npx @chakra-ui/cli snippet add toaster
이 스니펫은 Toast 컴포넌트의 닫힌(closed) 컴포넌트 구성을 포함해요.
사용법 (Usage)
import { Toaster, toaster } from "@/components/ui/toaster"
먼저 앱에 Toaster 컴포넌트를 렌더링해요.
<Toaster />
그런 다음 toaster 함수를 호출해 토스트를 만들어요.
toaster.create({
title: "Toast Title",
description: "Toast Description",
})
예시 (Examples)
닫기 가능한 토스트 (Closable Toast)
closable prop을 true로 설정하면 닫기 가능한 토스트를 만들 수 있어요.
외부 닫기 (External Close)
toaster.dismiss 메서드로 토스트를 닫을 수 있어요.
toaster.dismiss(id): id로 특정 토스트를 닫아요.toaster.dismiss(): 모든 토스트를 닫아요.
유형 (Types)
각 유형의 토스트 예시예요.
액션 포함 (With Action)
action과 actionLabel prop으로 토스트에 액션을 추가할 수 있어요.
액션 트리거를 클릭하면 토스트가 닫혀요.
영구 토스트 (Persistent Toast)
type prop을 "loading"으로 설정하면 영구 토스트를 만들 수 있어요.
프로미스 (Promise)
toaster.promise를 사용하면 프로미스가 해결(resolve)될 때 해결되는 토스트를 만들 수 있어요. 프로미스의 각 상태에 맞는 토스트 옵션(제목, 설명 등)을 정의할 수 있어요.
업데이트 (Update)
toaster.update(...)로 표시 중인 토스트를 수정할 수 있어요.
커스텀 지속 시간 (Custom Duration)
duration prop으로 토스트의 지속 시간을 설정할 수 있어요.
일시 정지·재생 (Pause and Play)
toaster 객체의 pause와 resume 메서드로 토스트를 일시 정지하고 재생할 수 있어요. 토스트를 일시 정지하면 타임아웃이 멈추고, 재생하면 남은 시간으로 타임아웃이 다시 활성화돼요.
생명주기 (Lifecycle)
toaster 함수의 onStatusChange prop으로 토스트 상태의 변화를 감지할 수 있어요.
최대 표시 토스트 수 (Maximum Visible Toasts)
createToaster 함수의 max prop으로 한 번에 렌더링할 수 있는 최대 토스트 수를 정의할 수 있어요. 추가 토스트는 대기열에 들어갔다가 토스트가 닫히면 표시돼요.
const toaster = createToaster({
max: 3,
})
배치 (Placement)
토스트는 페이지의 네 모서리 모두에 표시할 수 있어요. 원하는 위치 하나를 골라 createToaster 함수에서 설정하는 것을 권장해요.
const toaster = createToaster({
placement: "top-end",
})
겹치는 토스트 (Overlapping Toasts)
기본적으로 토스트는 위아래로 쌓여요. 토스트가 서로 겹치게 하려면 createToaster 함수에서 overlap prop을 true로 설정해요.
const toaster = createToaster({
placement: "top-end",
overlap: true,
})
페이지 유휴 동작 (Page Idle Behavior)
페이지가 유휴(idle)/숨김 상태일 때 토스트 타이머를 일시 정지해요.
const toaster = createToaster({
pauseOnPageIdle: true,
})
오프셋 (Offset)
createToaster 함수의 offsets prop으로 토스트를 화면 가장자리에서부터 밀어낼 수 있어요.
const toaster = createToaster({
offsets: "20px",
})
또는 offsets prop으로 화면의 각 가장자리별 오프셋을 설정할 수도 있어요.
const toaster = createToaster({
offsets: { left: "20px", top: "20px", right: "20px", bottom: "20px" },
})
Props
Toaster, Toast의 Root, Title, Description, ActionTrigger, CloseTrigger 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.