토스트 기능을 간단히 구현할 수 있는 리액트 라이브러리 toastify를 사용할 기회가 있었는데,
전체 프로젝트에서 커스텀한 토스트를 불러와서 사용해야하고 커스텀 디자인을 적용해야한다는 점에서 약간 헤맸어서 블로그로 정리하고자 한다.
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,
};
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 />;
}
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);
}
`;
import { ToastContainer } from 'react-toastify';
를 꼭 불러와야지 토스트를 사용할 수 있다. styled-components 사용하지 않는다면, toast를 사용할 곳에서(e.g. App.ts) 불러오면 된다.import Toast from '@src/components/popup/Toast';
function MyApp(props: AppProps) {
return (
<div>
<Toast />
</div>
);
}
export default MyApp;