Toast

앱을 ToastProvider로 감싼 뒤 useToast의 toast 함수로 알림을 전달합니다. 스태킹은 자동이며 사용자가 배열이나 z-index를 관리할 필요가 없습니다.

import { ToastProvider, useToast } from "@/components/toast";

function App() {
  return (
    <ToastProvider position="bottom-right" duration={3000}>
      <Page />
    </ToastProvider>
  );
}

function Page() {
  const { toast } = useToast();

  return (
    <button
      onClick={() =>
        toast({
          variant: "success",
          description: "저장이 완료되었습니다.",
        })
      }
    >
      저장
    </button>
  );
}