Toast - OLUN. Design System

Provider: ToastProvider가 viewport와 목록 상태를 소유합니다.
helper: toast.success, toast.error, toast.info, toast.warning으로 알림을 생성합니다.
duration: 기본 3000ms, error는 7000ms이며 duration으로 직접 지정할 수 있습니다.
action: 재시도처럼 하나의 보조 action이 필요할 때 ToastAction을 제공합니다.

상태별 토스트

성공, 오류, 안내, 경고 토스트의 시각 상태 비교

저장되었습니다

저장에 실패했습니다

새 알림이 도착했습니다

마감 시간이 가까워졌습니다

코드 보기tsx

import { ToastProvider, ToastRoot } from "@olundot/ui";

export function ToastStaticVariants() {
  return (
    <ToastProvider>
      <div style={{ display: "grid", gap: "8px" }}>
        <ToastRoot id="toast-success" variant="success" message="저장되었습니다" />
        <ToastRoot id="toast-error" variant="error" message="저장에 실패했습니다" />
        <ToastRoot id="toast-info" variant="info" message="새 알림이 도착했습니다" />
        <ToastRoot id="toast-warning" variant="warning" message="마감 시간이 가까워졌습니다" />
      </div>
    </ToastProvider>
  );
}

Provider 트리거

Provider 안에서 helper를 호출해 토스트를 생성

코드 보기tsx

import { Button, ToastProvider, toast } from "@olundot/ui";

export function ToastLiveTriggers() {
  return (
    <ToastProvider maxToasts={3}>
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <Button size="sm" onClick={() => toast.success("저장되었습니다")}>성공</Button>
        <Button size="sm" variant="outline" onClick={() => toast.info("검토 요청을 보냈습니다")}>안내</Button>
        <Button size="sm" variant="outline" onClick={() => toast.warning("마감 시간이 가까워졌습니다")}>경고</Button>
        <Button
          size="sm"
          variant="destructive"
          onClick={() =>
            toast.error("저장에 실패했습니다", {
              action: { label: "재시도", onClick: () => toast.info("재시도 요청됨") },
            })
          }
        >
          오류
        </Button>
      </div>
    </ToastProvider>
  );
}

지속 시간과 action

긴 확인 시간이 필요한 알림과 보조 action

동기화가 중단되었습니다

코드 보기tsx

import { ToastProvider, ToastRoot } from "@olundot/ui";

export function ToastDurationAction() {
  return (
    <ToastProvider>
      <ToastRoot
        id="toast-duration-action"
        variant="error"
        message="동기화가 중단되었습니다"
        duration={9000}
        action={{ label: "재시도", onClick: () => undefined }}
      />
    </ToastProvider>
  );
}