Toast · Overview

스토리북 개발자들을 위한 내부 문서

Components

Toast

Overview

토스트는 사용자의 작업 흐름을 방해하지 않고 일시적으로 표시되는 알림 컴포넌트입니다. 화면 위에 떠 있다가 일정 시간이 지나면 자동으로 사라지며, 사용자가 별도로 조치하지 않아도 됩니다.

Variants

토스트의 의미와 긴급도를 나타냅니다. 상황에 맞는 상태를 선택해 메시지의 중요도를 빠르게 파악할 수 있도록 합니다.

  • Fail사용자가 인지해야하는 오류 상황에 사용합니다.
  • Warning사라져도 괜찮지만 인지하면 좋은 주의 메시지에 사용합니다.
  • Success비동기 작업 완료처럼 확인 없이 사라져도 무방한 상황에 사용합니다.
  • Info업데이트·시스템 변경·새 정보 안내에 사용합니다.

Fail

요청을 처리하지 못했습니다.

Warning

저장 공간이 얼마 남지 않았습니다.

Success

변경사항을 저장했습니다.

Info

새로운 업데이트가 있습니다.

Positions

토스트 스택이 화면에 표시되는 위치입니다. 서비스 레이아웃과 주요 콘텐츠 영역을 고려해 Provider에서 한 번 선택합니다.

  • Bottom Right가장 일반적인 위치로 콘텐츠 방해 없이 자연스럽게 인지됩니다.
  • Bottom Center모바일 환경이나 중앙 집중형 레이아웃에 적합합니다.
  • Top Right빠른 확인이 필요한 알림에 사용합니다.

Bottom Right

    Bottom Center

      Top Right

        Durations

        기본 표시 시간은 3초이며 브라우저 포커스와 무관하게 진행됩니다. 필요한 경우 개별 Toast에서 duration을 덮어쓸 수 있습니다.

        • 3초기본값으로 3초 동안 표시됩니다.
          Stacking

          스태킹은 자동으로 관리됩니다. 새 Toast가 전달되면 가장 위에 추가되고 최고 z-index를 가지며, 기존 Toast는 한 단계 아래로 내려갑니다.

          • 최대 6개초과 시 가장 오래된 Toast부터 제거됩니다.
          • 최신 → 최상단가장 최근 알림이 배열과 화면의 첫 번째에 표시되며, 가장 진하게 표시됩니다.

            여러 번 Toast 추가를 시도해서 최신 알림의 위치·밝기 차이를 확인하세요.