Skip to content

v1.33.0 — 갤러리가 조용히 성공하지 않습니다

Choose a tag to compare

@kh1012 kh1012 released this 05 Aug 09:47
· 2 commits to main since this release

조용히 성공하지 않습니다

되돌릴 수 없는 조작(삭제 · 복원)이 끝났다는 사실을 말할 자리가 갤러리에 없었습니다. 조용히 성공하면 사람은 눌린 건지 아닌지를 화면을 다시 읽어 확인해야 합니다.

import { toast } from "./lib/toast";

toast("페이지를 지웠습니다.");
toast("흐름이 손상돼 건너뛰었습니다.", { variant: "warning" });

왜 함수 호출이 아니라 이벤트인가

토스트를 띄우고 싶은 곳은 라우트 · lib · API 래퍼 어디든입니다. React 컨텍스트로 만들면 lib 에서 못 부르고, 싱글턴 객체로 만들면 그 모듈이 트리 밖에서 렌더러를 붙듭니다. 이벤트는 양쪽 다 피합니다 — 부르는 쪽은 window 만 알면 되고, 받는 쪽은 평범한 컴포넌트로 남습니다.

왜 라우트 밖에 다는가

삭제처럼 화면을 떠나게 만드는 조작의 결과가 이동 중에 사라지면 안 됩니다. 라우트 안에 있으면 언마운트와 함께 묻힙니다.

지속시간이 variant 마다 다릅니다

variant 지속 쓰임
default 2.2초 끝났다는 확인만
warning 4초 막혔거나 주의가 필요한 것
error 5초 실패한 것

뒤 둘이 더 오래 남는 이유는, 중립 토스트가 "끝났다"만 말하는 데 비해 저 둘은 읽고 판단할 내용을 담기 때문입니다. 같은 2.2초면 다 읽기 전에 사라집니다. warning·error 는 role="alert" 로 스크린리더에도 즉시 전달됩니다.

등장은 fade-up 이 아니라 제자리 pop-in 입니다 — 화면 하단 고정 위치라 이동해 들어오면 스크롤 중인 본문과 움직임이 섞여 읽힙니다.