react-hot-toast

reference: https://react-hot-toast.com/docs/toast

1. useToast 컴포넌트를 만든다.

// useToast.jsx

import React, { useCallback } from 'react';
import toast, { Toaster } from 'react-hot-toast';

export function useAsyncToast() {
  const asyncToast = useCallback((resultPromise, data, messages) => {
    toast
      .promise(
        resultPromise,
        {
          loading: messages.loading,
          success: messages.success(data),
          error: (err) => messages.error(err),
        },
        {
          style: {
            marginLeft: '300px',
            minWidth: '250px',
          },
        }
      )
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return { asyncToast };
}

export function ToastContainer() {
  return <Toaster position="bottom-center" reverseOrder={true} />;
}

1. useAsyncToast를 사용하고자 하는 컴포넌트에 Import하고 비동기 함수를 변수로 지정하고 asyncToast의 인자로 보낸다.

import React, { useState } from 'react';
import { useCookies } from 'react-cookie';
...
import { useLogoutKakaoMutation } from '../../redux/features/kakaoLogin';
import { useAsyncToast } from '../../hooks/useToast';

function Sidebar({ isOpenLoginModal, setIsOpenLoginModal }) {
  const { asyncToast } = useAsyncToast();
  const [logoutKakao, { isLoading: isLoadingKakaoLogout }] = useLogoutKakaoMutation();

  const handleLogout = () => {
    const messages = {
      loading: '로그아웃 중...',
      success: () => '로그아웃 성공',
      error: () => '로그아웃 실패',
    };

    try {
      const logoutResult = logoutKakao(cookies?.airoverflow?.access_token).unwrap();
      console.log('logoutResult', logoutResult);

      asyncToast(logoutResult, null, messages);
      
    } catch (err) {
      console.log(err);
      throw err;
    }
  };


  return (
      ... 생략
  );
}

export default Sidebar;