배출자 App - 비정기 배출 신청 UX Flow

배출자 홈의 배출 신청 버튼으로 진입하는 4단계 wizard 상세 리포트입니다. 테스트가 같은 파일명으로 screenshot을 덮어쓰면 이 문서는 새 화면을 자동으로 다시 읽습니다.

전체 UX Flow

Entry Point

이 상세 화면은 단독 screen이 아니라 배출자 App 홈에서 시작되는 하위 UX입니다. 루트 리포트에서는 Emitter lane - 비정기 배출 신청 노드를 클릭하면 이 문서가 열립니다.

앱 실행 역할 선택 배출자 선택 배출자 홈 배출 신청 버튼 신청 타입 선택 운반 업체 선택 조건/일정 확인 완료 홈 또는 배출 현황으로 복귀
Device
Android emulator-5554
Maestro
2.6.1 / status ok
agent-device
clean Maestro screenshots
Updated
2026-07-03 11:16 KST

Flow Chart

현재 HTML은 artifact prototype입니다. 다음 단계에서는 Maestro/agent-device 실행 후 manifest를 읽어 이 노드들을 자동 갱신하는 generator로 승격하면 됩니다.

0
배출자 홈
배출 신청 CTA 진입
1
신청 타입
비정기 전용 안내, 올바로 신고/미신고 선택
2
운반 업체 직접 검색
빈 검색 안내, 검색 결과, 무결과
3
선택 상태 검증
숨은 카드 선택 방지
4
조건 확인
계약 조건 확인
5
일정 선택
희망일/희망 시간 필수 선택
6
완료
요약 카드, 홈/배출 현황 landing CTA
직접 검색 빈 상태 안내

1. 직접 검색 빈 상태 안내

agent-device capture testID: emitter.request.transporter.search.empty-prompt

직접 검색 탭으로 전환했지만 아직 검색어가 없는 상태입니다. 즐겨찾기 목록이 그대로 남지 않고 “검색하고자 하는 업체명을 입력해 주세요” 안내만 보여서, 사용자가 검색 행동을 이해하기 쉽습니다.

  • 탭: emitter.request.transporter.search.tab
  • 입력: emitter.request.transporter.search.input
  • 빈 상태: emitter.request.transporter.search.empty-prompt
숨은 선택 상태 검증 메시지

2. 숨은 선택 상태 검증

agent-device capture testID: emitter.request.validation.message

즐겨찾기에서 선택한 운반 업체가 직접 검색 탭으로 이동하면서 보이지 않게 된 경우, 다음 단계로 넘어가지 않도록 막습니다. 현재 화면에서 선택 가능한 카드만 유효한 선택으로 인정합니다.

  • 선택 warning: emitter.request.transporter.selected.hidden-warning
  • 숨은 선택 guard: 현재 visible contract 목록 기준으로 재검증
  • 메시지: 운반 업체를 선택해 주세요.
검색 결과 없음 상태

3. 검색 결과 없음

agent-device capture testID: emitter.request.transporter.search.no-results

매칭되는 업체가 없을 때 빈 카드 영역 대신 명시적인 결과 없음 문구를 표시합니다. 이 노드는 검색 입력이 실제로 filter state를 바꾸는지 확인하는 최소 UX 증거입니다.

  • 무결과: emitter.request.transporter.search.no-results
  • 현재 캡쳐는 한글 IME가 켜진 상태의 agent-device 입력 artifact입니다.
수집운반3 검색 결과 카드

4. 검색 결과 카드

Maestro capture testID: emitter.request.transporter.collector-3.cta input proof follow-up

직접 검색 결과로 수집운반3 계약 카드가 노출됩니다. 계약명, 운반/처리자, 올바로 품목명, 폐기물 종류, 계약 기간, 태그가 한 카드에서 확인됩니다.

  • Maestro flow: capture-search-result.yaml
  • 검색 결과 assert: emitter.request.transporter.collector-3.cta
  • 관찰: emulator 입력창에는 3만 남습니다. 정확한 한글 검색어 표시 검증은 별도 보강 대상입니다.
올바로 미신고 배출 신청 완료 요약

5. 올바로 미신고 신청 완료

Maestro capture testID: emitter.request.complete.screen

신청 타입과 선택한 운반 업체가 완료 요약까지 도달합니다. “올바로 미신고” badge와 수집운반3 계약명이 함께 보여 mock domain result가 UI에 반영된 것을 확인할 수 있습니다.

  • 완료 화면: emitter.request.complete.screen
  • 계약명: emitter.request.complete.contract-name
  • 신청 타입: emitter.request.complete.type-label
  • 배출 현황 landing: emitter.request.complete.history.cta
수집 운반 조건 확인

6. 수집/운반 조건 확인

Maestro capture testID: emitter.request.conditions.screen

선택한 운반 계약의 수집/운반 조건을 별도 단계에서 확인합니다. Figma `118:4105`와 대응되는 화면이며, 사용자는 조건을 확인한 뒤 일정 선택으로 이동합니다.

  • 조건 화면: emitter.request.conditions.screen
  • Maestro screenshot: emitter-request-conditions-clean.png
  • Figma exact: 118:4105
배출 희망일 선택

7. 배출 희망일 선택

Maestro capture testID: emitter.request.schedule.screen

배출 희망일과 희망 시간 선택을 요구하는 마지막 입력 단계입니다. Figma `118:4268`과 대응되며, 시간 미선택 validation과 완료 submit flow가 같은 Maestro 경로에서 검증됩니다.

  • 일정 화면: emitter.request.schedule.screen
  • 선택 summary: emitter.request.schedule.selection.summary
  • Maestro screenshot: emitter-request-schedule-clean.png
  • Figma exact: 118:4268

자동 갱신 구조

  • 각 UX 노드는 고정 screenshot 파일명을 갖습니다.
  • Maestro/agent-device 테스트가 같은 파일을 덮어쓰면 HTML은 refresh 시 최신 이미지를 읽습니다.
  • 이 HTML은 15초마다 image cache-busting을 수행합니다.
  • 다음 승격 대상은 scripts/generate-ux-flow-report.mjs 형태의 manifest 기반 생성기입니다.

주의 사항

  • 이 report의 primary screenshot은 Maestro clean capture를 사용합니다. 과거 agent-device overlay capture는 debug proof로만 봅니다.
  • Maestro와 agent-device는 동시에 실행하지 않습니다. 둘 다 Android UiAutomation을 사용합니다.
  • 한글 검색어가 입력 필드에 그대로 남는지까지는 아직 별도 proof가 필요합니다.