사용자에게 상황 알리기! 토스트 구현 (Next.js, react-toastify)

팔레트 웹을 사용하면서 아래와 같은 알림을 만난 적이 있으신가요?

 

팔레트에서 사용 중인 Toast 디자인

 

해당 기능은 '토스트' 라는 기능으로 사용자에게 특정 이벤트가 발생했거나, 어떠한 정보를 알려야 할 때, 사용하는 기능입니다. :)

 

기본적인 브라우저 기능으로 Alert 라는 기능이 존재하지만, 해당 기능은 알림창을 확인하기 전까지 사용자의 클릭과 같은 기본적인 인터랙션을 막아, 팔레트를 사용하는 과정에서는 불편이 존재할 수 있는데요..!

 

오늘은 팔레트에서 사용자에게 특정 기능의 이벤트나 정보가 필요할 때 알리는 토스트 기능 구현기를 정보로서 정리해보았습니다!

 

---

토스트 기능 구현 과정

React-toastify 라이브러리 이용

React-toastify | React-Toastify

React-toastify | React-Toastify

 

 

깃허브 페이지로 DOCS를 만들어 운영하고 있으며, 수많은 contribution을 통해 어느정도 완성된 라이브러리이자 가장 대중적인 라이브러리입니다.

 

여기서 Weekly Downloads는 일주일동안 해당 라이브러리를 다운로드 받아 사용한 횟수인데요, 해당 라이브러리를 팔레트에 적용할 때에는 140만의 다운로드를 기록했습니다.

 

글을 쓰고 있는 현재는 벌써 190만에 가까운 다운로드가 일주일 사이에 이뤄졌습니다.

신뢰성이 높은 라이브러리이자 라이브러리 계의 유명 인싸라고 볼 수 있겠네요!

 

 

설치

$ npm install --save react-toastify
$ yarn add react-toastify

 

현재 진행하고 있는 프로젝트에서는 yarn으로 패키지 설치를 진행하고 있기 때문에, yarn을 통해 install을 진행합니다.

 

 

실행

react-toastify를 사용하기 위해서는 modal portal을 이용할 때처럼 root단에 위치시켜야 전역적인 관리로 사용할 수 있습니다.

 

이게 무슨 의미냐...! 모두가 공용으로 사용할 수 있는 라이브러리로서, 접근이 가능하도록 미리 세팅이 필요하다는 것입니다.

 

현재 Nextjs에서 Page Router를 사용하고 있기 때문에, 스타일링 및 상태 유효성을 위해 Main 태그 내에 위치시켜주었습니다.

 

 

하지만 이대로 끝내면 개발단에서 원하는 결과를 얻을 수 없습니다.

 

 

팔레트 디자인 가이드에 맞춘 스타일링이 안되기 때문인데요, 해당 라이브러리에서는 자체 css가 포함되어있기 때문에, 이를 import 하여 스타일링을 적용해주어야 합니다.

 

import 'react-toastify/dist/ReactToastify.css';

 

위처럼 css 스타일링을 입히게 되면 아래와 같은 화면을 볼 수 있습니다.

 

 

물론 지금도 예쁘지만, 저희가 원하는 toast의 스타일링은 아래와 같은 형태입니다!

 

 

위와 같이 구성하기 위해서는 시간과 min, max width, height 등을 커스텀해야 합니다.

 

이를 위해, components 단에 Toast를 추가하여 해당 위치에서 커스텀을 진행합니다!

 

 

app 단에 직접 옵션을 작성하게 되는 경우, 추후 구조를 변경하는데 불편이 있을 수 있으며 Toast의 디자인이 변경되었을 때, 유동적으로 변경하는데 불편성이 있을 수 있습니다. (행여나 팔레트가 더 확장하게 되면 또 해당 컴포넌트를 가져다가 사용하는 것이 편리하겠죠?)

 

따라서, 우리 프로젝트에서 사용하는 Toast는 컴포넌트 단에서 커스텀을 진행합니다.

 

현재 팔레트는 Turborepo를 이용하여 Monorepo를 구성하였으며, 자체 ui package가 존재하고, 타 프로젝트에서도 toast를 사용할 계획이므로, 최종적으로는 packages/ui 에 위치시켜주었습니다.

(앞으로 팔레트와 관련된 사이트에서는 통일된 디자인을 볼 수 있습니다!)

 

 

packages/ui/src/components/Toast/Toast.tsx

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

export const Toast = () => {
  return (
    <ToastContainer
      position="top-center" //상단 중앙 위치
      autoClose={3000} //3초 후 자동으로 닫힘
      hideProgressBar //프로그래스바 가리기
      closeOnClick //클릭시 닫기
      pauseOnHover //마우스 호버시 멈춤
      limit={3} //최대 3개까지
    />
  );
};

 

기본적으로 구성을 완료했다면, 우리가 사용할 두 가지 사용 방식으로 함수를 정의합니다.

export const Notify = {
  success: (message: ReactNode | string) => {
    toast.success(message);
  },
  error: (message: ReactNode | string) => {
    toast.error(message);
  },
};

Notify라는 이름을 통해 사용자에게 무언가를 알릴 때 사용할 수 있도록 명명하였습니다.

(해당 라이브러리에는 success와 error 외에도 다른 기능도 존재하니, 필요하신 분들은 유동적으로 사용하시면 될 듯 합니다!)

 

위와 같이 작성하게 되면 아래와 같이 작성하여 기능하게 만들 수 있습니다.

const onNotify = () => {
    Notify.success('토스트 메시지 테스트');
};

 

기본 옵션을 ToastContainer에 제공하였기 때문에, success와 error에 대한 css 부분을 수정해야 합니다.

 

react-toastify 라이브러리에서 수정 가능한 css 목록은 아래 링크에서 확인할 수 있습니다.

 

How to style | React-Toastify

How to style | React-Toastify

 

위 내용에 맞추어 오버라이딩하여 스타일링 해주면 간단하게 적용이 완료됩니다.

 

디자인 시스템에 맞추어 적용하기 위해 global.css에 아래와 같이 스타일링을 진행합니다.

글로벌 css 시스템에 맞추어 테스트한 이후에 컴포넌트 모듈 css 형태로 분리하면 관리가 편리하겠죠?

.Toastify__toast-container {
  width: fit-content;
  min-width: 240px;
  max-width: 1024px;
}

.Toastify__toast {
  border-radius: 50px;
  text-align: center;
  padding: 0 40px;
  min-height: 40px;
}

.Toastify__toast--success {
  background: linear-gradient(-45deg, #00CD3C 0%, #30DCE8 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
}

.Toastify__toast--error {
  background-color: #FC2E6C;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
}

• Success의 경우

 

• Error의 경우

위와 같이 라이브러리를 이용하여 쉽게 구현을 완료하였습니다 :)

 

---

이 외에도 구현할 수 있는 방법들?

 

1. EventEmitter를 이용하여 커스텀 이벤트를 제작하는 방법

 

EventEmitter란 ?

2. Functional Component, Custom Hook을 이용하여 Modal, Drawer와 같은 형태로 제작하는 방법

[React] 토스트팝업/스낵바(toast popup/snack bar)직접 구현하기

 

 

위와 같이 라이브러리를 사용하지 않고도 다양한 방법을 이용하여 토스트 버튼을 구현할 수 있습니다.

 

앞으로 팔레트가 고도화될수록, 라이브러리 의존성을 낮추어 사용자에게 자체적인 서비스 기능을 제공하고, 안정성을 높이기 위해서는 위와 같은 방식으로 직접 구현이 필요할지도 모릅니다. :)

 

 

팔레트에서는 다양한 편의성과 기능을 제공하기 위해 다양한 개발이 진행되고 있습니다.

 

앞으로도 팔레트에서 기능 개발 간, 알게되는 정보들과 내용들에 대해서 공유해드릴게요!

 

팔레트 개발단의 행보를 지켜봐주세요!!!

 

---

레퍼런스

[React] Toast 만들기

React Toastify 커스텀하기

EventEmitter란 ?

react-toastify/src/hooks/useToast.ts at main · fkhadra/react-toastify

 

---

음악은 누구나 향유하는 예술이다.

팔레트는 뮤지션 발굴, 음악 서비스 거래를 통해 신뢰성과 전문성 높은 협업 환경을 구축하고 있습니다.

 

이미지를 누르면 팔레트로 이동합니다.