토스트 메시지 커스텀

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

**utils/customToast.ts**를 가져와서 사용!

customToast(message, type, icon?, color?, backgroundColor?)

• message: 토스트메시지에 들어갈 값.
• type: 토스트메시지 타입으로, 다음 값이 올 수 있음.
  • 'success' | 'error' | 'warning' | 'info’ 중 하나 문자열로 적으면 됨.

나머지는 선택사항

• icon: 리액트 아이콘 추가 가능
• color: 원하는 글자 색상
• backgroundColor: 토스트메시지에 들어갈 값

사용 예시

원하는 곳에 다음과 같이 추가하면 됨!

• 기본 값만 사용

  customToast('안녕!', 'success');
  

  

• 아이콘만 변경해서 사용

  customToast(
    '안녕!',
    'success',
    <HiTrash className="text-[var(--color-main)]" />,
  );
  

  

• 아이콘은 기본 값으로, 색상만 전환

  customToast('안녕!', 'success', undefined, 'red', 'yellow');
  

  

• 아이콘은 제거, 색상만 전환

  customToast('안녕!', 'success', false, undefined, 'yellow');
  

  

• 모든 값을 사용

  customToast(
    '안녕!',
    'success',
    <HiTrash />,
    'white',
    'black',
  );
  

  

• alert창 커스텀 = utils/customToast.ts

  import { Slide, toast, ToastIcon, ToastPosition } from 'react-toastify';
  
  type ToastType = 'success' | 'error' | 'warning' | 'info';
  
  // 공통된 옵션 정의
  const commonOptions = {
    position: 'top-center' as ToastPosition,
    autoClose: 2000,
    hideProgressBar: true,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    theme: 'light',
    transition: Slide,
  };
  
  export const customToast = (
    message: string,
    type: ToastType,
    icon?: ToastIcon | false,
    color?: string,
    backgroundColor?: string,
  ) => {
    const toastFn = {
      success: toast.success,
      error: toast.error,
      warning: toast.warning,
      info: toast.info,
    }[type];
  
    toastFn(message, {
      ...commonOptions,
      icon,
      style: {
        color: color || '#000',
        backgroundColor: backgroundColor || '#fff',
        whiteSpace: 'pre-wrap',
      },
    });
  };