토스트 사용 예제

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

`toaster` 싱글턴 (`@/utils`)

앱 전역에서 공유하는 토스트 스토어 — duration을 개별 지정하지 않으면 기본값(3초) 뒤 자동으로 사라진다.
utils/toaster.ts
```
export const toaster = createToaster({
  placement: 'top-end',
  pauseOnPageIdle: true,
  duration: 3000,
})
```

기본 사용법

toaster.success({title: '등록되었습니다', description: '도메인이 등록됐습니다.'})
toaster.error({title: '등록 실패', description: getErrorMessage(error)})
toaster.info({title: '안내', description: '변경 사항이 없습니다.'})
toaster.loading({title: '처리 중...'})

전역 렌더러 (`Toaster`)

App 루트에 한 번만 마운트해두면, 이후 어디서든 toaster.success({...})를 호출하는 것만으로 화면에 토스트가 그려진다.

export const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <RouteConfig />
      <Toaster />
      <ActionDialog />
      <GlobalSpinner />
    </QueryClientProvider>
  )
}

기본 Toast.Indicator는 success/error/warning 아이콘만 제공하므로, info는 아이콘을, loading은 스피너를 직접 그려준다.

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`로 색상/스피너 커스터마이즈

loading 토스트의 강조 색을 지정한다 — 기본값은 gray.

toaster.loading({title: '내보내는 중...', meta: {colorPalette: 'blue'}})

success 배경색을 유지한 채 스피너를 함께 보여준다 — “진행 중인 성공” 같은 중간 상태 표현에 쓴다.
```
toaster.success({title: '저장 중', meta: {spinner: true}})
```

뮤테이션의 onSuccess/onError에서 결과에 맞춰 호출하는 것이 가장 흔한 패턴이다.

const {mutateAsync: saveDomain} = useMutation({
  mutationFn: (payload: DomainCreateRequestDto) => create(payload),
  onSuccess: () => {
    toaster.success({title: '등록되었습니다', description: '도메인이 등록됐습니다.'})
  },
  onError: (error) => {
    toaster.error({title: '등록 실패', description: getErrorMessage(error)})
  },
})

토스트 사용 예제

toaster 싱글턴 (@/utils)

전역 렌더러 (Toaster)

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

`toaster` 싱글턴 (`@/utils`)

전역 렌더러 (`Toaster`)

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