이로울 | 포트폴리오

Button Input Textarea Checkbox Radio Badge Select Toast Alert Modal Feedback RichTextEditor SideListMenu Pagination Calendar ApiHealthBadge TechBadge ButtonLink Icons AppSwiper

Toast

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

Toast

화면 하단에서 위로 올라오는 애니메이션이 적용된 토스트 팝업입니다.
첫 번째 토스트가 나타날 때 컨테이너가 생성되고, 이후에는 그 안에 순서대로 쌓입니다.
각 토스트는 duration(초) 이후 자동으로 사라지며, 지정하지 않으면 기본 3초 동안 유지됩니다.

기본 토스트 (3초 유지)

duration을 지정하지 않으면 기본 3초 동안 표시됩니다.

Source Code

          const [toasts, setToasts] = useState<ToastItem[]>([]);

          const pushToast = (message: string) => {
            setToasts(prev => [
              ...prev,
              { id: Date.now(), message },
            ]);
          };

          <Button onClick={() => pushToast('기본 토스트입니다.')}>토스트 띄우기</Button>
          <ToastStack toasts={toasts} onRemove={id => setToasts(prev => prev.filter(t => t.id !== id))} />

Live Preview

용도별 유지 시간 (duration)

duration(초)을 props로 넘겨 상황에 맞는 유지 시간을 가질 수 있습니다.

5 Seconds

pushToast('5초 동안 유지되는 토스트입니다.', { duration: 5 });

Live Preview

1 Second

pushToast('1초만 깜빡이는 토스트입니다.', { duration: 1 });

Live Preview

상황별 Variant 토스트

성공 / 에러 / 경고 / 정보 등 상황에 따라 색상과 아이콘이 달라지는 토스트입니다.

Success

pushToast('성공적으로 처리되었습니다.', { variant: 'success' });

Live Preview

Error

pushToast('오류가 발생했습니다.', { variant: 'error' });

Live Preview

Warning

pushToast('주의가 필요한 상태입니다.', { variant: 'warning' });

Live Preview

Info

pushToast('안내 메시지입니다.', { variant: 'info' });

Live Preview

클릭 가능한 토스트

토스트를 클릭했을 때 추가 동작(onClick)을 수행할 수 있습니다.

Source Code

          pushToast('클릭 가능한 토스트입니다.', {
            clickable: true,
          });

Live Preview