toastify 활용하기

참고:
https://fkhadra.github.io/react-toastify/introduction

https://fkhadra.github.io/react-toastify/how-to-style/

 

Css classes as function

You can also provide a function. This is what it looks like with tailwind css

  const contextClass = {
    success: "bg-blue-600",
    error: "bg-red-600",
    info: "bg-gray-600",
    warning: "bg-orange-400",
    default: "bg-indigo-600",
    dark: "bg-white-600 font-gray-300"
  };
  return (
    <>
      <ToastContainer
        position="bottom-center"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        toastClassName={({ type }) =>
          contextClass[type] +
          " relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"
        }
        bodyClassName={() =>
          "w-full flex justify-center items-center rounded-full"
        }
      />
      </>
      )

      //type이 있을경우
      toast.error("비밀번호를 다시 확인해주세요.", {
        position: "bottom-center",
        autoClose: 3000,
        hideProgressBar: true,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined
      });
      //type이 없을 경우
            toast("비밀번호를 다시 확인해주세요.", {
        position: "bottom-center",
        autoClose: 3000,
        hideProgressBar: true,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined
      });