Skip to content
Dictionary Guide

토스트 사용 예제

dictionary-app은 Chakra UI의 createToaster로 만든 전역 싱글턴 toaster를 어디서든 호출해 토스트를 띄운다.

toaster 싱글턴 (@/utils)

Section titled “toaster 싱글턴 (@/utils)”
  1. 앱 전역에서 공유하는 토스트 스토어 — duration을 개별 지정하지 않으면 기본값(3초) 뒤 자동으로 사라진다.
    utils/toaster.ts
    import {createToaster} from '@chakra-ui/react'
    

    export const toaster = createToaster({
      placement: 'top-end',
      pauseOnPageIdle: true,
      duration: 3000,
    })
  2. 기본 사용법 
    toaster.success({title: '등록되었습니다', description: '도메인이 등록됐습니다.'})
    toaster.error({title: '등록 실패', description: getErrorMessage(error)})
    toaster.info({title: '안내', description: '변경 사항이 없습니다.'})
    toaster.loading({title: '처리 중...'})

전역 렌더러 (Toaster)

Section titled “전역 렌더러 (Toaster)”
  1. App 루트에 한 번만 마운트해두면, 이후 어디서든 toaster.success({...})를 호출하는 것만으로 화면에 토스트가 그려진다.
    App.tsx
    import {QueryClientProvider} from '@tanstack/react-query'
    

    import {ActionDialog, GlobalSpinner, Toaster} from '@/components'
    import {queryClient} from '@/utils'
    

    import {RouteConfig} from './routes'
    

    export const App = () => {
      return (
        <QueryClientProvider client={queryClient}>
          <RouteConfig />
          <Toaster />
          <ActionDialog />
          <GlobalSpinner />
        </QueryClientProvider>
      )
    }
  2. 기본 Toast.Indicator는 success/error/warning 아이콘만 제공하므로, info는 아이콘을, loading은 스피너를 직접 그려준다.
    components/organisms/toaster/Toaster.tsx
    10 collapsed lines
    import {
      Portal,
      Spinner,
      Stack,
      Toast,
      Toaster as ChakraToaster,
    } from '@chakra-ui/react'
    import {InformationCircleIcon} from '@heroicons/react/24/outline'
    

    import {toaster} from '@/utils'
    

    export const Toaster = () => {
      return (
        <Portal>
          <ChakraToaster toaster={toaster} insetInline={{mdDown: '4'}}>
            {(toast) => (
              <Toast.Root
                colorPalette={
                  toast.type === 'loading'
                    ? (toast.meta?.colorPalette ?? DEFAULT_LOADING_COLOR_PALETTE)
                    : undefined
                }
              >
                {toast.type === 'loading' || toast.meta?.spinner === true ? (
                  <Spinner size="md" flexShrink="0" />
                ) : toast.type === 'info' ? (
                  <InformationCircleIcon width={20} height={20} />
                ) : (
                  <Toast.Indicator />
                )}
                <Stack gap="1" flex="1">
                  {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
                  {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
                </Stack>
                <Toast.CloseTrigger />
              </Toast.Root>
            )}
          </ChakraToaster>
        </Portal>
      )
    }

사용 예: meta로 색상/스피너 커스터마이즈

Section titled “사용 예: meta로 색상/스피너 커스터마이즈”
  1. loading 토스트의 강조 색을 지정한다 — 기본값은 gray. 
    toaster.loading({title: '내보내는 중...', meta: {colorPalette: 'blue'}})
  2. success 배경색을 유지한 채 스피너를 함께 보여준다 — “진행 중인 성공” 같은 중간 상태 표현에 쓴다. 
    toaster.success({title: '저장 중', meta: {spinner: true}})
  3. 뮤테이션의 onSuccess/onError에서 결과에 맞춰 호출하는 것이 가장 흔한 패턴이다.
    pages/word/domain/mutations/useDomainSaveMutation.ts
    const {mutateAsync: saveDomain} = useMutation({
      mutationFn: (payload: DomainCreateRequestDto) => create(payload),
      onSuccess: () => {
        toaster.success({title: '등록되었습니다', description: '도메인이 등록됐습니다.'})
      },
      onError: (error) => {
        toaster.error({title: '등록 실패', description: getErrorMessage(error)})
      },
    })