알림 라이브러리 도입 후기

팀 프로젝트를 하면서 로그인/회원가입이나 글 작성 같은 프로세스를 처리하면서 알림을 처리해야 될 때가 있었다.

브라우저에 내장되어 있는 alert 창으로 하기에는 UI/UX적으로 너무 안 좋아보인다고 생각했다. 물론 직접 만들 수도 있긴 했었지만 다른 기능 구현하기에도 바빴기 때문에 어쩔 수 없이 라이브러리를 사용했다.

우선 내가 작업한 로그인/회원가입에서는 react-toastify 라는 라이브러리를 썼다.

이러한 라이브러리를 쓴 이유는 알림에 관련된 패키지를 살펴보다가 사용하기도 쉽고 성공/실패 여부에 따라 색상을 달리 할 수도 있기 때문이었다.

import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css' // react-toastify 사용을 위한 css import

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <ToastContainer theme="colored" autoClose={3000} position="top-center" />
    </>
  )
}

nextjs로 작업을 했었고, _app.tsx에 ReactToastify.css 를 불러오고 따로 ToastContainer를 집어넣어서 다른 파일에서도 toast를 사용할 수 있도록 했다.

로그인 완료 후

위처럼 로그인이 완료가 되면 상단 중앙에 위치시켰다.(top-center)

앞서 사용하기 쉽다고 했던 이유는 error,success만 처리했기 때문에 그런거 같다.

공식 문서를 보니 info와 warning이 추가로 더 있었다. 이외에도 토스트 컨테이너를 드래그를 하거나 특정 상태가 업데이트가 되면 토스트 컨테이너 UI도 바뀌는 등 여러가지가 있었는데,

프로젝트를 할 때 적용해봤으면 어땠을까 하는 아쉬움도 있다.

그리고 또 하나 아쉬웠던 점은 작성글 삭제를 하기 전에 미리 depth를 더 줘서 실수로 삭제하는 일을 방지하도록 하는 기능을 구현할 때, 앞서 썼던 라이브러리를 적용하기가 애매했다.

이전에 썼던 토스트 컨테이너는 alert 창을 대체하기 위해 썼던 것이고, 작성글 삭제에 대해서는 confirm 용도로 사용하려고 했기 때문에 둘이 서로 성격이 달랐다.

그래서 또 다른 라이브러리인 react-confirm-alert라는 것을 도입했다.

 작성된 게시글을 삭제하려고 할 때

confirmAlert({
  message: '게시글을 삭제하시겠습니까?',
  buttons: [
    {
      label: 'YES',
      onClick: async () => {
        try {
          await ArticleApi.delete(articleId)
          toast.success('게시글이 삭제되었습니다.')
          router.replace(`/questions`)
        } catch (error) {
          toast.error('답변 삭제에 실패했습니다.')
        }
      },
    },
    {
      label: 'NO',
      onClick: () => {
        return
      },
    },
  ],
})

디자인 통일성을 위해 위 코드도 따로 커스텀해서 사용해보려고 했지만 생각보다 쉽지 않았다...

지금 보니까 confirmAlert 함수 내에 toast 컨테이너가 섞여서 존재해도 되나..? 싶다.

다음 프로젝트 때는 팝업과 모달에 대한 컴포넌트를 직접 구현해서 재사용 해봐야겠다.

Reference

https://github.com/fkhadra/react-toastify