Toaster

작업을 막지 않는 짧은 결과 알림의 표시 영역을 제공합니다.

목적

Toaster는 저장 완료, 복사 성공, 일시적인 실패처럼 사용자의 흐름을 막지 않아도 되는 짧은 결과를 화면의 일관된 위치에 표시한다. 방금 실행한 행동과 다음 작업을 연결하되 현재 콘텐츠보다 강하게 주의를 빼앗지 않는다.

선택 기준

사용자가 이미 맥락을 알고 있고 결과만 잠깐 확인하면 될 때 사용한다.
field 오류처럼 바로 고쳐야 하는 문제는 해당 control 가까이에 표시한다.
작업을 계속할 수 없는 page 오류는 page frame 안에서 설명한다.
확인 전에는 진행할 수 없는 결정에 toast를 사용하지 않는다.

구조

앱의 DotTheme 경계 안에 Toaster를 한 번 배치한다. 개별 알림을 만드는 함수는 이 package가 export하지 않는다. 소비 제품이 사용하는 알림 event API가 같은 renderer를 향하도록 연결해야 한다.

기본 toast는 제목, 선택적 description, action, cancel, close control을 표현할 수 있는 스타일을 가진다. 중요한 복구 action은 짧고 하나만 제공한다.

변형과 크기

기본 theme는 light, 위치는 top-right, close button은 활성화되어 있다. toast 표면은 card semantic 색, border, radius, shadow를 사용한다. Toaster에 전달한 props가 기본값 뒤에 적용되므로 position, theme, closeButton, toastOptions 등을 override할 수 있다.

제품마다 임의 위치와 색을 바꾸기보다 한 앱에서 일관된 설정을 유지한다.

상태와 동작

Toaster는 알림을 화면에 렌더하는 host이며 알림 생성 상태를 직접 관리하는 public helper는 제공하지 않는다. 여러 결과가 빠르게 생길 때 같은 메시지를 무분별하게 쌓지 않는다. action이 성공한 뒤에는 완료 문구를, 실패했을 때는 무엇을 끝내지 못했고 어떻게 복구할지 보여준다.

자동 닫힘 시간이나 promise 상태는 소비 제품의 알림 호출 계층에서 결정한다.

콘텐츠

제목은 초안을 저장했어요, 링크를 복사하지 못했어요처럼 결과부터 쓴다. Description은 추가 영향이나 복구 방법이 있을 때만 사용한다. 성공, 오류 같은 상태 단어만 쓰지 않고 실제 대상과 결과를 포함한다.

접근성

결과 변화가 보조 기술에 전달되는지 제품의 알림 호출 계층과 함께 확인한다. toast만으로 focus를 이동시키지 않는다. action은 keyboard로 사용할 수 있어야 하고 문구만으로 결과를 이해할 수 있어야 한다. 색과 아이콘만으로 성공·실패를 구분하지 않는다.

좁은 화면과 긴 콘텐츠

좁은 화면에서 알림이 핵심 navigation과 주 행동을 가리지 않는 위치를 확인한다. 제목과 description을 짧게 유지하고 긴 오류 진단이나 여러 action은 inline error나 Dialog로 옮긴다. 연속 알림이 viewport를 채우지 않게 중복을 줄인다.

공개 API

Toaster: renderer props를 받아 기본 theme, 위치, close control, class mapping을 제공한다.

개별 toast를 생성하는 함수나 hook은 @classum/dot-design-system/ui에서 export하지 않는다.

예제

import { DotTheme, Toaster } from '@classum/dot-design-system/ui';

export function AppFrame({ children }: { children: React.ReactNode }) {
  return (
    <DotTheme>
      {children}
      <Toaster position="top-right" />
    </DotTheme>
  );
}

피해야 할 사용

form 오류를 toast로만 알려 field와의 연결을 끊지 않는다.
사용자가 읽고 결정해야 하는 긴 내용을 자동으로 사라지게 하지 않는다.
동일한 성공 메시지를 반복해서 쌓지 않는다.
오류가 발생했습니다처럼 대상과 복구 방법이 없는 문구를 사용하지 않는다.
일반 결과 알림에 캐릭터, gradient, 과도한 motion을 넣지 않는다.

목적