Toast 적용기

 

기획 단계에서 PM님과 디자이너님과 함께 상의할 때부터 사용자의 입장에서 플랫폼에서 사용성이 좋게 느껴지게 하려면 어떤 방식으로 제공할 수 있을까를 많이 고민할 수 있었다.

 

그 과정에서 유저가 어렵게 느껴질 수 있을 법한 부분에서 툴팁이나 토스트를 이용해서 방법을 적절히 제시해주기로 했는데, 문제는 다른 분들이 스낵바와 토스트, 툴팁 모두 혼용해서 워드를 쓰다보니 다 모르는 나는.. 이게 뭐지 😱 ??! 상태가 되었다.

그래서 공부했다.....

 

사용자 상호작용으로 제공할 수 있는 알림창의 종류는 이정도로 찾아봤다.

	설명	사용 예시
Dialog	사용자의 중요한 상호작용을 위한 웹 페이지 내부에서 생성되는 컴포넌트. 사용자가 처리하기 전까지는 사라지지 않는다.	정보 입력, 삭제 확인
Toast	사용자의 동작에 의한 피드백을 간단한 ui로 보여주고 사라지는 작은 pop-up 형태의 바.	전송 완료, N개 이상은 선택할 수 없습니다
Snackbar	Toast의 기능을 갖추고, 추가적인 상호작용을 할 수 있는 액션 기능 (버튼) 이 있는 바.	(웹사이트 접근시) 쿠키 정책 일부 쿠키 차단하기 모두 허용
Tooltip	특정 영역에 커서로 hover시 나타나는 해당 영역에 대한 정보 박스.	버튼 기능 설명
Alert	사용자에게 경고나 중요한 알림을 전달하는 시스템 또는 커스터마이징 박스.	오류 메세지

 

n년간의 쇼핑경력으로 이해하기 쉬웠다.

자라에서 나오는 쿠키 허용 정책 어쩌고가 스낵바구나... 웹사이트에서 알림 나왔다가 자동으로 사라지던 게 토스트였구나...

 

그렇게 기획을 마치고 토스트를 바로 적용할 수 있는 라이브러리를 찾아보니 대부분 react-toastify, 혹은 react-hot-toast를 사용했다.

그런데도 react-hot-toast를 사용한 이유는 react-toastify가 사용률이 높기는 했지만 나온 디자인이 react-hot-toast의 ui에 더 적합했기 때문이었다.

react-toastify를 사용한다고 하면 스낵바로 이용할 때 더 적합하다고 생각했는데, 이후 토스트의 기능이 확장될 가능성이 없어서 react-hot-toast로 결정했다. 

 

찾아보니 커스터마이징이나 사용하는 방법이 비슷해서, toastify를 사용한다고 해도 어렵지 않게 사용할 수 있을 것으로 보인다. 

 

 

 

다음과 같이 상위 페이지에서 <Toaster /> 선언하고 토스트를 부를 하위 컴포넌트에서 toast() 로 호출하면 된다. 

import { Toaster } from 'react-hot-toast'

export default function Page({
  params: { userId, type, messageId },
}: {
  params: { userId: string; type: MessageType; messageId: string }
}) {
  return (
    <div>
  //  <div> Header... </div>
      <ReactionPage messageType={type} userId={userId} messageId={messageId} />
      <Toaster
        position='bottom-center'
        containerStyle={{
          bottom: '100px',
        }}
      />
    </div>
  )
}

 

    toast('반응은 최대 5개 보낼 수 있어요', {
          icon: (
            <Image
              src='/toast_alert.svg'
              alt='toast_alert'
              width={18}
              height={18}
            />
          ),
          style: {
            borderRadius: '16px',
            backgroundColor: '#474747',
            width: '100%',
            height: '56px',
            paddingLeft: '3.8rem',
            paddingRight: '3.2rem',
          },
        })

 

 

그럼 다음과 같이 ui가 나온다.

 

그런데 갯수 제한처리 없이 이벤트만 걸어두면 

 

ㅎㅎ;; 이제 여기에 토스트 갯수 제한을 걸어준다. 

 

여기서 더 설정할 조건을 정리해보면 

- 5개 초과 선택되면 토스트

- 화면에는 최대 2개까지 보여진다.

- 5개 선택된 상태에서 이미 선택된 녀석을 누르면 set에서 delete만 되고 토스트에 영향을 끼치면 안된다.  

 

    const [selectedSet, setSelectedSet] = useState<Set<string>>(new Set())
    const [toastVisible, setToastVisible] = useState(false)

    const storedData = (templateId: string): Set<string> => {
      setToastVisible(false)
      setSelectedSet((prevSet) => {
        const newSet = new Set(prevSet)

        if (newSet.has(templateId)) {
          newSet.delete(templateId)
        } else {
          if (newSet.size < 5) {
            newSet.add(templateId)
          } else {
            setToastVisible(true)
          }
        }
        return newSet
      })

      return selectedSet
    }

    useEffect(() => {
      if (toastVisible) {
        toast('반응은 최대 5개 보낼 수 있어요', {
          icon: (
            <Image
              src='/toast_alert.svg'
              alt='toast_alert'
              width={18}
              height={18}
            />
          ),
          style: {
            borderRadius: '16px',
            backgroundColor: '#474747',
            width: '100%',
            height: '56px',
            paddingLeft: '3.8rem',
            paddingRight: '3.2rem',
          },
        })
      } else {
        setToastVisible(false)
      }
    }, [selectedSet, toastVisible])

 

선택된 이모지들을 set 타입으로 걸어서 사이즈로 갯수를 확인했고, 이후 이 set 데이터들을 post할 때는 array로 변환해서 보냈다.

 

그리고 고민이었던 것이 예상 되는 동작은 토스트가 하나씩 뜨는 거였는데 2개씩 뜨는 것이었다.

 

콘솔로 찍어보니 리액트의 렌더링 때문에 일어나는 것 같았는데, 상위 페이지에서 <Toaster /> 토스트의 리미트 갯수를 설정하고 useEffect로 이 리미트를 넘어가는 토스트들에 대해 toast.dismiss()를 수행하도록 했다.

dismiss 메소드는 react-hot-toast docs에서 찾아볼 수 있었다. 

 

그리고 다음과 같이 toastOptions에 style로 설정하면 하위 컴포넌트에서 적용되는 토스트의 중복되는 스타일들을 한번에 적용시킬 수 있었다.

 

import toast, { Toaster, useToasterStore } from 'react-hot-toast'

export default function Page({
  params: { userId, type, messageId },
}: {
  params: { userId: string; type: MessageType; messageId: string }
}) {
  const router = useRouter()
  const { toasts } = useToasterStore()
  const toastLimit = 1

  useEffect(() => {
    const visibleToasts = toasts.filter((t) => t.visible)
    if (visibleToasts.length > toastLimit) {
      visibleToasts.slice(toastLimit).forEach((t) => toast.dismiss(t.id))
    }
  }, [toasts])

  return (
    <div>
    ...
      <Toaster
        position='bottom-center'
        containerStyle={{
          bottom: '100px',
        }}
        toastOptions={{ //  <- !!
          style: {
            borderRadius: '16px',
            backgroundColor: '#474747',
            width: '100%',
            height: '56px',
          },
        }}
      />
    </div>
  )
}

 

 

적용 영상 > https://youtu.be/X5MTjK7DrEc