[Knoticle] 좋은 UX를 위한 기능&도전 1 (Toast 메세지)

Knoticle 서비스에 좋은 UX를 제공하기 위한 방법으로 토스트메세지를 적용했다.

많은 Api요청에서 에러가 발생했을때와 회원가입, 책 생성등 동작의 성공을 알려주기 위한 방법으로 토스트메세지를 사용하고 있다.

 

이러한 과정에서 고민했던 내용을 기록하려고 한다.

 

1. Toast 메세지

팀 내부 회의를 통해 토스트 메세지를 구현하기로 결정하고, 적용하면서 고민했던 부분은 두가지이다.

1. 라이브러리를 사용할지, 직접 구현할지?
2. 어느 시점에 토스트메세지를 띄워주는게 UX적으로 좋을지?

우선, 토스트 메세지는 라이브러리를 사용하기로 결정했다.

Knoticle팀에서는 react-tostify 라이브러리를 사용했는데 선정 이유는 하기와 같다.

1. 우리는 6주라는 짧은 시간동안 기획,설계,구현을 진행해야하며, 완결성있는 프로젝트를 완성해야한다.
2. react-toastify는 공식문서가 잘 정리되어 있고, 커스텀해서 사용하기 좋다.

react-toastify 적용하기

_app.tsx

reatct-roastify를 Next에 적용하기 위해서는 _app.tsx에 ToastContainer를 넣어줘야 한다.

_app.tsx는 Next에서 최초로 실행되며 렌더링하는 값은 모든 페이지에 영향을 준다.

따라서, Recoil, Globalstyle, ToastContainer 등 모든 페이지에 영향을 주는 것을 설정해준다.

limit 설정은 최대로 표시할 수 있는 토스트메세지 개수의 제한이다.

import type { AppProps } from 'next/app';

import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer } from 'react-toastify';

import { RecoilRoot } from 'recoil';

import CheckSignInByToken from '@components/CheckSignInByToken';
import GlobalStyle from '@styles/GlobalStyle';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <CheckSignInByToken>
        <GlobalStyle />
        <Component {...pageProps} />
        <ToastContainer limit={3} />
      </CheckSignInByToken>
    </RecoilRoot>
  );
}

toast.ts

에러메세지와 성공메세지를 사용하기 위한 함수를 추상화하여 utils에 따로 파일을 분리했다.

import { toast } from 'react-toastify';

export const toastError = (message: string) => {
  toast.error(message, {
    position: 'top-right',
    autoClose: 3000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    theme: 'light',
  });
};

export const toastSuccess = (message: string) => {
  toast.success(message, {
    position: 'top-right',
    autoClose: 3000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    theme: 'light',
  });
};

실제 사용 예시

회원가입 성공

// 회원가입 성공 -> useEffet로 함수 실행
useEffect(() => {
    if (createUserData === undefined) return;
    handleModalClose();
    toastSuccess('Knoticle 가입을 축하합니다!');
  }, [createUserData]);

 

 

 

api 에러 핸들링

import { useCallback, useState } from 'react';

import { toastError } from '@utils/toast';

const useFetch = <T>(api: (...args: any[]) => Promise<T>) => {
  const [data, setData] = useState<T>();

  const execute = useCallback(async (...args: any[]) => {
    try {
      setData(await api(...args));
    } catch (error: any) {
      const { message } = error.response.data;

      toastError(message);
    }
  }, []);

  return { data, execute };
};

export default useFetch;

 

 

정리

간단하게 react-toastify를 적용해서 토스트메세지를 구현할 수 있었다.

UX 향상을 위한 첫 작업으로 사용자에게 좋은 방법으로 정보와 상태를 전달할 수 있었다.

현재는 에러핸들링과 책 발행,수정 회원가입 성공에 토스트메세지를 적용하고 있다.

무분별한 사용은 오히려 UX를 저하시킬 수 있기 때문에 적절한 사용방법을 더 고민해보고 있다.

Reference

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