비동기 작업 / 실행 상세

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

queued, running, cancel requested, canceled, partially failed, completed 상태를 구분합니다. 진행률은 완료된 검사 수로 표시합니다. 예상 시간을 약속하지 마세요. List의 각 단계 상태에 로그를 열고 복사하는 명시적 액션을 짝지으세요. 예시에서 업데이트를 수동으로 전달해 각 상태를 살펴보세요.

• 취소 요청을 완료된 취소나 롤백으로 보여주지 마세요. worker가 확인한 후에만 canceled로 보고하세요.
• 부분 실패를 성공으로 보고하지 마세요. 성공한 결과는 만료와 권한을 확인한 후에만 재사용하세요.
• 프리미티브가 작업을 시작하거나 서버 권한, 멱등성, 이벤트 순서, 재연결, 영속성을 처리하길 기대하지 마세요. 이들은 제품이 소유합니다.
• 예시는 고정 샘플을 사용하며 제품 요청을 보내지 않습니다.

구성

Preview inputs → start / cancel / deliver controls → run identity + environment snapshot + status → completed check count → step list → selected logs

키보드와 접근성

• 작업을 시작하면 포커스가 취소 요청 버튼으로 이동합니다. 취소를 요청하면 포커스가 확인 버튼으로 이동합니다.
• 작업이 끝나면 포커스가 요약 heading으로 이동합니다. 중간 업데이트와 로그 열기는 포커스를 이동시키지 않습니다.
• 별도 버튼이 로그를 복사합니다.
• 상태는 role=status에서 텍스트로 알려집니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Progress, StatusBadge, List } from '@surflane/ui'

<Progress.Root value={finishedChecks} max={totalChecks}>
  <Progress.Label>Finished checks</Progress.Label>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>
<StatusBadge tone='caution'>Cancellation requested</StatusBadge>

// Accept updates only for the current run and delivery version.
// Cancellation is acknowledged by the worker before reporting canceled.
// Retry creates a new run; reused results retain their original identity.

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰