<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

<script th:inline="javascript">
    //녹색 : backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    //파란색 : backgroundColor: "linear-gradient(to right, #FF0000, #FF7F50)",
    //빨간색 : backgroundColor: "linear-gradient(to right, #FF0000, #FF7F50)",
    $(document).ready(function() {
        const loginSuccess = '[[${loginSuccess}]]';
        if (loginSuccess === 'true') {
            Toastify({
                text: "로그인 되었습니다!",
                duration: 3000,
                close: true,
                gravity: "top",
                position: 'right',
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
        }


        const logoutSuccess = '[[${logoutSuccess}]]';
        if (logoutSuccess === 'true') {
            Toastify({
                text: "로그아웃 처리 되었습니다!",
                duration: 3000,
                close: true,
                gravity: "top",
                position: 'right',
                backgroundColor: "linear-gradient(to right, #007BFF, #00C4FF)",
            }).showToast();
        }
    });
</script>

리액트

import { Outlet, useLoaderData ,useSubmit} from 'react-router-dom'
//import Header from '../components/Header';
import React, { useEffect } from 'react'
import { getTokenDuration } from '../util/auth';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { css } from 'glamor';
import { injectStyle } from "react-toastify/dist/inject-style";


function RootLayout() {
  const token=useLoaderData();
  const submit=useSubmit();
  
  //자동 로그아웃
  useEffect(() => {
    if (!token) {
      return;
    }

    if (token === 'EXPIRED') {
      submit(null, { action: '/logout', method: 'post' });
      return;
    }

    const tokenDuration = getTokenDuration();
    console.log("토큰 만료시간" ,tokenDuration);

    if(tokenDuration<0){
      return;
    }

    setTimeout(() => {
      submit(null, { action: '/logout', method: 'post' });
    }, tokenDuration);
  }, [token, submit]);


  function notify() {
    //toast.dark("Hey ????, see how easy!");
    toast.success("Hey ????, see how easy!");
  }

  return (
    <>    
       
        <main>
            <Outlet />
        </main>  

        <button onClick={notify} className='button'>
        test
      </button>
        <ToastContainer
            position="top-center" // 알람 위치 지정
            autoClose={3000} // 자동 off 시간
            hideProgressBar={false} // 진행시간바 숨김
            closeOnClick // 클릭으로 알람 닫기
            rtl={false} // 알림 좌우 반전
            pauseOnFocusLoss // 화면을 벗어나면 알람 정지
            draggable // 드래그 가능
            pauseOnHover // 마우스를 올리면 알람 정지           
            //limit={1} // 알람 개수 제한
      
          />
    </>
  )
}

export default RootLayout

리액트 트

참조 :

https://velog.io/@ktw3577/react-toastify-%EC%A0%81%EC%9A%A9%EA%B8%B0

커스텀 스타일 변경

https://fkhadra.github.io/react-toastify/how-to-style/#override-existing-css-classes