문제상황
Toastify 라이브러리를 프로젝트에 적용하려고 시도햇는데, 알림 기본 스타일이 적용되지 않았다.
설정 부분
'use client';
import { ToastContainer } from 'react-toastify';
export default function ToastProvider({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
{children}
<ToastContainer />
</>
);
}// src/app/layout.tsx
...
...
export default function HTMLLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang='en'>
<body className={`${roboto.className} bg-[#DADADA]`}>
<ProvidersLayout>
<ToastProvider>
<Background>{children}</Background>
</ToastProvider>
</ProvidersLayout>
</body>
</html>
);
}// src/components/toast/toast.ts
import { Bounce, toast, ToastOptions } from 'react-toastify';
const defaultOptions: ToastOptions = {
position: 'top-center',
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: 'light',
transition: Bounce,
};
const showToast = {
success: (message: string) => {
toast.success(message, defaultOptions);
},
error: (message: string) => {
toast.error(message, defaultOptions);
},
info: (message: string) => {
toast.info(message, defaultOptions);
},
warning: (message: string) => {
toast.warning(message, defaultOptions);
},
};
export default showToast;사용 부분
const NewGuestBookLink = () => {
const [visitorName, setVisitorName] = useState('');
const [file, setFile] = useState<ImageFile | null>(null);
const router = useRouter();
const { mutate: createLink } = useMutation({
mutationFn: async (formData: FormData) =>
await api.guestbook.createLink(formData),
onSuccess: (data) => {
showToast.success('링크 생성에 성공했습니다.');
},
onError: (error) => {
showToast.error('링크 생성에 실패했습니다.');
},
...
}원인
메시지 표현이 되는 것으로 보았을 때 사용 부분 쪽의 문제보다는 설정에 문제가 있다고 판단했다.
React-Toastify 공식 문서에서 내 설정과 비교하며 다른 부분을 찾았는데 바로 이 부분이었다.
import 'react-toastify/dist/ReactToastify.css';react-toastify는 toast 알림을 표시하기 위한 기본 컴포넌트와 함께 미리 정의된 스타일을 제공하는데, 바로 '미리 정의된 스타일'이 'react-toastify/dist/ReactToastify.css' 파일에 정의되어 있었던 것이다.
생각해보면 따로 toastify용 커스텀 css 정의를 한 적이 없고, '보이는 것'에 문제가 있었으니.. 생각보다 쉽게 문제를 해결할 수 있었다.
해결
ToastProvider에 css 임포트문을 추가해서 해결했다.
'use client';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
export default function ToastProvider({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
{children}
<ToastContainer />
</>
);
}굿 👍
계속 읽고 싶은 글을 쓰고 싶어요 ☺