피드백 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
ToastViewport — FIFO 수명과 상호작용 일시 정지를 갖춘 ToastViewport
useToastQueue와 연결해 FIFO, maxVisible·maxQueued, dedupe, pause·resume, live region과 action·close를 제공하는 Expo·React Native ToastViewport입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
ToastViewport 사용 시점과 역할
ToastViewport는 고정 위치 렌더링만 소유하고 큐 상태는 useToastQueue가 관리합니다. hook은 visible과 queued 스냅샷, branded ToastId, show·update·dismiss·pause·resume을 제공합니다. queued toast는 보이기 전에는 시간을 소모하지 않으며, 중복 key는 같은 id와 위치에서 내용을 교체합니다. 창·탭이 숨겨지거나 native 앱이 background/inactive가 되면 visible toast의 남은 시간을 보존해 foreground에서 재개합니다. v0.4에서는 ToastViewport와 useToastQueue를 함께 import해 controller 콜백을 그대로 연결하세요.
- FIFO visible·queued 상태, maxVisible·maxQueued와 oldest queued overflow 이유
- duration null의 영속 알림, update·dedupe reset, hover·focus·touch와 window/AppState pause/resume
- top·bottom viewport, action과 close의 sibling button, status·alert·off announcement
설치와 최소 예제
ToastViewport: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { ToastViewport } from '@gj-kit/expo-ui';
import { Button, ToastViewport, useToastQueue } from '@gj-kit/expo-ui';
export function SaveToast() {
const queue = useToastQueue({ maxVisible: 2 });
return (
<>
<Button label="저장" onPress={() => queue.show({ message: '저장했습니다', variant: 'success' })} />
<ToastViewport toasts={queue.visibleToasts} onDismiss={queue.dismiss} onPause={queue.pause} onResume={queue.resume} />
</>
);
}접근성과 플랫폼 동작
메시지 copy에만 polite status 또는 assertive alert live region을 두어 viewport 전체와 버튼을 반복 공지하지 않습니다. action과 close는 44px 이상 독립 button이며, 내부 action·close 사이의 포커스 이동은 pause/resume을 왕복하지 않고 wrapper를 실제로 떠날 때만 타이머를 재개합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.