React toastify 라이브러리 style custom 하기 (with Styled-Components)

개요

토스트 기능을 간단히 구현할 수 있는 리액트 라이브러리 toastify를 사용할 기회가 있었는데,
전체 프로젝트에서 커스텀한 토스트를 불러와서 사용해야하고 커스텀 디자인을 적용해야한다는 점에서 약간 헤맸어서 블로그로 정리하고자 한다.

Toast 컴포넌트 만들기!

import { Container } from './Toast.styles';
import { toast, ToastOptions } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';


interface ToastProps {
  // 코드 리뷰 -> type은 enum으로 따로 빼기
  type: 'success' | 'error' | 'info' | 'action';
  message?: string;
  action?: string;
}

const toastOptions: ToastOptions = {
  position: 'bottom-center',
  autoClose: 2000,
  hideProgressBar: true,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  pauseOnFocusLoss: true,
  closeButton: false,
};

• 토스트를 사용할 때 props를 받아서 재사용성 높이기
• toastOptions는 라이브러리에서 제공하는 기본 속성들 사용
  - 참고: https://fkhadra.github.io/react-toastify/api/toast-container/
  

export function showToast({ type, message, action = '바로가기' }: ToastProps) {
  switch (type) {
    case 'success':
      // enum으로 타입 지정했을 때 가독성 상승 -> case ToastType.success:
      toast.success(message || '성공적으로 완료되었습니다', {
        ...toastOptions,
        icon: <img src="/svgs/toast_success.svg" alt="success" />,
      });
      return;
    case 'error':
      toast.error(message || '다시 한번 시도해주세요', {
        ...toastOptions,
        icon: <img src="/svgs/toast_error.svg" alt="error" />,
      });

       //... 생략
  }
}

export default function Toast() {
  return <Container />;
}

• switch/case 문을 사용하여 type을 props로 받고 해당하는 토스트가 보여지게 한다.
• icon 커스텀 방법 공식문서 참조
• Toast 함수 안에는 Container를 내보내는데 커스텀 스타일 파일이다.

스타일 커스텀

import { ToastContainer } from 'react-toastify';
import styled from 'styled-components';

export const Container = styled(ToastContainer)`
  .Toastify__toast {
    font-size: 16px;
    border-radius: 50px;
    padding: 16px 28px;
    color: #fff;
    background: rgba(107, 115, 135, 0.8);
  }

  .Toastify__toast-icon {
    width: 22px;
    height: 22px;
  }

  .Toastify__toast--info {
    background: rgba(107, 115, 135, 0.8);
  }

  .Toastify__toast--success {
    background: rgba(48, 173, 120, 0.8);
  }

  .Toastify__toast--error {
    background: rgba(224, 72, 82, 0.8);
  }
`;

• styled-components 사용
• import { ToastContainer } from 'react-toastify'; 를 꼭 불러와야지 토스트를 사용할 수 있다. styled-components 사용하지 않는다면, toast를 사용할 곳에서(e.g. App.ts) 불러오면 된다.
• CSS 태그 공식문서 참조

전역 적용하기

import Toast from '@src/components/popup/Toast';

function MyApp(props: AppProps) {
  return (
    <div>
      <Toast />
    </div>
  );
}

export default MyApp;