[DOCS] Snackbar 알림을 띄워보자

[SaltySalt77]

Snackbar?

현재 저희 웹 페이지에서 제공하고 있는 노티 형식입니다. 경고를 위해서는 모달을, 단순 주의 및 알림을 위해서는 스낵바를 띄우고 있습니다.

사용 방법?

이번 작업으로 인하여 스낵바 알림을 전역으로 제공하게 되었습니다. 편리성을 넘어서, 한 페이지에서 스낵바 알림을 띄우고 다른 페이지에서도 보여줘야하는 상황이 있어 이렇게 리팩토링하게되었습니다.

예를 들어 토큰 훼손 및 토큰 만료로 인하여 Login 페이지로 돌아갈 때, 로그인이 필요하다는 알림이 필요합니다. 이때 기존의 방식대로 진행했다면 기존 페이지에서 스낵바 알림이 뜨거나, 쿼리를 통해 로그인 페이지에서 스낵바 알림이 떴을 겁니다.
하지만 이제는 단순하게 토스트를 사용하고 싶은 상황에서 useSnackbarStore()로 setSnackbarOpen()을 불러와서 다음과 같이 사용해주면 됩니다.

import { useSnacbarStore } from '@/stores/useSnackbarStore()';
...
  const { setSnackbarOpen } = useSnackbarStore();

  const handleError() => {
    setSnackbarOpen({ severity: 'error', text: "에러가 발생했습니다." });
  }
...

severity?

심각성이라는 뜻의 단어입니다. 각각의 상황에 맞추어 해당 프롭을 설정해주시면 됩니다.

severity	뜨는 이모지
warning	❗
error	❌
success	✅