토스트

ToastProvider로 트리를 감싸고 useToast()의 addToast로 짧은 처리 결과를 화면 상단에 띄우는 전역 알림이다. duration이 지나면 진행 바와 함께 자동으로 사라지고, onUndo를 주면 되돌리기 버튼이 함께 나타난다. 토스트는 일시적·전역이라, 화면 맥락에 계속 남아야 하는 상태는 Alert로 지속 표시한다.

활용 방법

기본 토스트

저장·전송처럼 짧게 끝나는 액션의 결과를 알린다. duration이 지나면 자동으로 닫힌다.

Preview

tsx

<ToastProvider>
  <App />
</ToastProvider>

// 하위 컴포넌트 어디서든
const { addToast } = useToast();
addToast({ message: "저장했습니다", duration: 2500 });

실행 취소 (undo)

onUndo를 주면 토스트에 취소 버튼이 나타난다. 삭제처럼 되돌릴 여지를 주고 싶을 때 쓴다.

Preview

tsx

addToast({
  message: "항목을 삭제했습니다",
  duration: 4000,
  onUndo: () => restoreItem(id),
});

사용 지침

· 앱 루트 근처에 ToastProvider를 한 번만 두고, 이후 useToast()로 어디서든 addToast를 호출한다.
· 일시적·전역 알림 전용이다. 화면 맥락에 계속 남아야 하는 상태는 Alert를 쓴다.
· 여러 토스트를 연속 호출하면 위에서부터 순서대로 쌓인다.

속성

이름	타입	기본값	설명
children	ReactNode	-	ToastProvider가 감쌀 하위 트리: 내부 어디서든 useToast() 사용 가능
addToast(t)	(t: { message: string; duration: number; onUndo?: () => void }) => void	-	useToast()가 반환하는 토스트 추가 함수
message	string	-	토스트 본문 텍스트
duration	number	-	자동으로 닫히기까지 ms: 진행 바로 남은 시간을 표시
onUndo	() => void	-	주면 취소 버튼이 나타나고, 클릭 시 호출한 뒤 토스트가 닫힌다