Toast

사용자 작업의 상태를 제공하기 위해 일시적으로 표시되는 자동 닫힘 메시지로 특정 상태 혹은 사용자의 액션에 대한 안내, 경고 등에 쓰입니다.

TypescriptWAI-ARIA

버튼을 구성하는 요소를 설명합니다.

Location
Toast 상단과 우측에 16px의 마진을 포함하여 배치합니다. Toast가 2개 이상 나오는 경우 16px 간격으로 Toast를 배치합니다. 중요도가 높은 Navbar가 존재하는 경우, 겹치지 않도록 그 아래에 Toast를 배치합니다.
Interaction
기본적으로 3초동안 노출된 후 자동으로 사라집니다. 버튼이 존재하는 경우, 사용자가 close 버튼을 누르기 전까지 사라지지 않습니다. Toast가 2개 이상 존재하는 경우, 첫번째 Toast가 사라지면 하단에 있는 토스트가 첫번째 Toast가 있던 자리로 이동합니다.
Usage
Primary 유저의 액션에 대한 결과가 성공적인 경우 플랫폼에서 의도한대로 액션이 성공적으로 수행된 경우 ex. 성공, 제출, 완료, 달성, 생성, 저장 중립적인 상태에 대한 알림 메시지 ex. 상태 변경(시작, 중지), 상태 안내(진행중, 취소, 삭제, 복사) Danger 유저의 액션에 대한 결과가 실패한 경우 작업으로 인해 발생한 오류나 문제가 발생한 경우 ex. 실행 실패, 오류, 시스템 에러 Default(fill button)로 Next action을 제안합니다. icon 사용을 지양합니다.
Button
Text button을 사용하는 경우 undo, 취소 등 진행한 액션을 취소할 경우 Text button으로 제안합니다. Fill button을 사용하는 경우 에러, 경고에 대해 대처할 수 있도록 Next action을 명확하게 제안합니다.

import { toast } from '@goorm-dev/vapor-components';

name	description	default
color	color primarydanger
msg	토스트 메시지를 설정합니다. string
options	토스트 옵션을 설정합니다. { type : 'danger' \| 'primary', className : string, closeButton : boolean, event : { type : 'none' \| 'button' \| 'text', onClick: function, msg : string, } }

name	description	default
closeButton	닫기 버튼을 표시합니다. boolean	true
className	Toast 컨테이너의 클래스명을 설정합니다.