Toast 데모

DS Toast는 showSuccessToast / showWarningToast로 호출합니다. 아래 버튼을 눌러 동작과 옵션을 확인한 뒤, 코드 블록을 그대로 참고해 주세요.

import

함수만 써도 되고, 객체형 Toast API를 써도 됩니다.

import {
  showSuccessToast,
  showWarningToast,
  type DsToastOptions,
} from "@/shared/components/ds/Toast/Toast";

// 또는
import { Toast } from "@/shared/components/ds/Toast/Toast";
// Toast.success("…"); Toast.warning("…");

기본 사용

첫 번째 인자는 제목(메인 메시지)입니다. 옵션 없으면 duration 4초, 위치는 우하단입니다.

showSuccessToast("저장되었습니다");
showWarningToast("다시 시도해 주세요");

옵션: description

제목 아래 보조 설명을 넣을 때 사용합니다.

showSuccessToast("결제가 완료되었습니다", {
  description: "영수증은 이메일로 발송됩니다.",
});

옵션: duration (ms)

표시 시간을 밀리초로 지정합니다. 기본값은 4000입니다.

showWarningToast("네트워크가 불안정합니다", {
  duration: 8000,
});

옵션: position

화면 모서리·중앙 기준 위치를 고를 수 있습니다.

showSuccessToast("업로드 완료", {
  position: "top-center",
});

옵션 조합 예시

여러 옵션을 한 번에 넘길 수 있습니다.

showWarningToast("세션이 곧 만료됩니다", {
  description: "작업 내용을 저장한 뒤 다시 로그인해 주세요.",
  duration: 10000,
  position: "top-right",
});