24.7.30

 

shadcn toast 커스터마이징

 

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      'fixed bottom-[5.3rem] z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
      className
    )}
    {...props}
  />
));
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;

 

 

use-toast.ts에서 토스트 지속시간이 제대로 적용 안 되고 있어서

 

  //지속시간이 적용되지 않아 setTimeout 추가
  setTimeout(dismiss, TOAST_REMOVE_DELAY)

 

직접 추가 ....