토스트 (Toast)

Usage

1import { Button, Toaster, toast } from "podo-ui/react";2import "podo-ui/styles.css";3
4export function App() {5  return (6    <>7      {/* 앱 루트에 한 번 */}8      <Toaster />9      <Button onPress={() => toast.success("저장됐어요")}>저장</Button>10    </>11  );12}

상태 (state)

토스트는 상황의 성격에 따라 다섯 가지 상태로 색과 톤을 나눠 전달해요. normal은 강조가 필요 없는 기본 안내에, success는 저장·전송처럼 작업이 정상 처리됐을 때, danger는 오류나 실패로 즉시 확인이 필요할 때 사용해요. info는 참고하면 좋은 부가 정보를 알릴 때, warning은 위험까지는 아니지만 사용자의 주의가 필요할 때 사용해요. 상태마다 색을 의미와 일관되게 맞춰, 메시지를 읽기 전에도 성격을 직관적으로 파악할 수 있게 해요.

응용 (composition)

메시지에 맥락과 동작을 더하기 위해 prefix-icon, suffix-text, suffix-icon, caption을 조합해 구성해요. prefix-icon은 상태 아이콘을 활용해 메시지 성격을 직관적으로 알리고, suffix-text와 suffix-icon은 실행 취소나 닫기 같은 후속 동작을 뒤에 배치해요. caption은 타이틀에서 다 전달하지 못한 추가적인 정보를 전달해요.

토스터 (toaster)

토스트를 화면에 쌓고 자동으로 정리하는 행동 레이어예요. 앱 루트에 Toaster를 한 번 두면 어디서든 toast()로 띄울 수 있어요. 기본값은 상단 중앙(top-center), 3초 자동 소멸, 최대 3개이며 위치는 여섯 모서리 중 선택할 수 있어요. 여러 개가 뜨면 최신 토스트가 앞에 원래 크기로 보이고 이전 것들은 살짝 작아지며 겹쳐 쌓여요. 스택에 마우스를 올리거나 포커스하면 모두 원래 크기로 펼쳐지고, 그동안은 자동 소멸이 멈춰서 손을 뗄 때까지 사라지지 않아요. 넘치면 오래된 것부터 정리되고, manual 토스트는 X를 눌러야 닫혀요. 아래 '3개 연속' 버튼으로 쌓임을, 스택에 호버해서 펼침을 확인해 보세요. 이 동작 규칙은 시안에 없어 기본값으로 구현돼 있어요.

Toast 속성 (props)

podo-ui/react의 Toast — 카드 하나의 생김새를 정하는 속성이에요. Toast를 직접 놓거나 web·hono·native에서 카드를 배치할 때 써요. danger일 때 role=alert, 나머지는 role=status로 안내되고 포커스를 뺏지 않아요. 시안의 suffix-icon 기본값은 닫기 X라 코드에서는 onClose로 표현돼요.

Toaster 속성 (props)

toast()로 띄운 알림이 화면에 쌓이는 방식을 정하는 전역 설정이에요. 앱 루트에 <Toaster /> 하나만 두면 돼요.

toast() 호출 API

알림을 띄우는 함수예요. 컴포넌트가 아니라 어디서든 부르면 돼요. 반환값은 알림 id로, toast.dismiss(id)에 넘겨 코드에서 특정 알림을 닫을 수 있어요.

options = { state?, caption?, duration?, manual? }