Payment scaffoldP0 30/70

/payments

결제내역

Toss sandbox 연결 전 결제·환불·쿠폰 상태 화면

결제 성공/실패/환불/쿠폰·포인트 화면은 상태머신에 맞춰 먼저 나누고, 실제 결제키는 계정 수령 후 주입합니다.

ASBU서툰 우리의 옆자리

Concept C — Social Event

안전한 결제/혜택 흐름

결제 화면은 신뢰 우선, 쿠폰과 포인트는 이벤트 참여 혜택처럼 보조한다.

PDF 로고 반영 · 폰트/앱 아이콘 미확정

Route

/payments결제내역사용자 모바일 · P0

Template

paymentFlow시안 변경 시 family plan과 componentSet을 먼저 수정합니다.Guarded trust

Reusable components

ExtractedLogoSecurePaymentPanelAmountBreakdownBenefitChipsReceiptCard

Guardrails

검증된 오프라인 이벤트에 초대받는 밝고 설레는 경험투표/매칭 화면은 밝게, 인증/결제/관리자 화면은 절제한다실시간 채팅, AI 매칭, OCR, 구독/IAP처럼 보이는 UI를 만들지 않는다

Primary CTA

결제 상태 흐름 확인계약상 route action을 유지하고, 시각 표현만 Concept C 컴포넌트로 교체합니다.결제 상태 흐름 확인
ASBU
결제 내역검증된 오프라인 이벤트

결제 내역

결제 내역을 상태별로 봅니다

완료, 실패, 환불 요청 상태를 긴 설명 없이 구분합니다.

내역 확인공식 로고 반영카드 정보 보관 안 함
ASBU서툰 우리의 옆자리
최근 결제 금액79,000원ASBU 금요일 디너

03 결제 내역

결제 상태 모아보기

결제 완료와 환불 요청 흐름을 함께 보여 문의 전환을 줄입니다.

내역 확인서버 금액 대조카드 정보 미보관
완료환불 요청실패
결제 상세 보기

실제 결제창은 고객 결제 계정 연결 후 열립니다.

01

상태 구분

완료·실패·환불 요청을 한눈에 구분합니다.

02

상세 확인

필요한 결제건을 눌러 상세를 확인합니다.

03

환불 이동

환불이 필요하면 신청 화면으로 이어집니다.

ASBU TICKET최근 결제
최근 결제 금액79,000원
항목
ASBU 금요일 디너
상태
내역 확인

안전 결제 확인

최근 결제와 상태를 먼저 봅니다

결제 내역은 금액보다 상태 구분이 먼저 보이게 하고 상세 화면으로 이어집니다.

  • 완료 내역결제 흐름 확인 정보
  • 환불률 기준결제 흐름 확인 정보
  • 영수증 이동결제 흐름 확인 정보

입력 정보

내역 확인 항목

목록에서는 주문번호, 금액, 상태만 먼저 보여주고 영수증은 상세 화면에서 확인합니다.

  • 주문 ID비공개 · 필수
  • 결제 금액숫자 · 필수
fixture-only no-provider-call audit log preview

Template family

paymentFlow

Toss sandbox key 및 운영 정책 대기

01PaymentRow
02Amount summary
03Result state
04ConfirmDialog

UI primitives

공통 컴포넌트 슬롯

MobileShellPageHeaderPaymentRowSummaryCardStatusBadgeConfirmDialog

State contract

로딩·빈값·오류·차단·주요 행동

디자인과 실데이터를 기다리는 동안에도 모든 route가 같은 실패/대기/빈값 골격을 유지하도록 화면별 상태 계약을 고정합니다.

Loading

결제내역 불러오는 중

결제내역 화면은 사용자 데이터와 공통 primitive 계약을 동시에 기다리는 로딩 상태를 노출합니다.

Empty

결제내역에 표시할 항목이 없습니다

실제 사용자 데이터가 비어 있어도 레이아웃이 무너지지 않도록 안내문과 다음 행동을 유지합니다.

Error

결제내역 데이터를 확인하지 못했습니다

실제 계정·정책·결제 연동 전에는 외부 요청을 만들지 않고, 재시도·문의·뒤로가기 위치만 계약으로 고정합니다.

Blocked

결제내역 고객 입력 대기

brandSkin, tossAccount, pricePolicy, refundPolicy, firebaseProject 항목이 확정되기 전까지 디자인과 실데이터를 잠그지 않습니다.

Success

결제내역이 완료됐어요

결제, 환불, 쿠폰, 포인트 흐름을 이어서 확인할 수 있습니다. 다음 단계는 결제 상세/영수증에서 이어서 확인할 수 있어요.

Primary action

결제 상태 흐름 확인/payments/[paymentId]customer input required

Required data

paymentIntentpricePolicyrefundPolicyprimitive:MobileShellprimitive:PageHeaderprimitive:PaymentRowprimitive:SummaryCardprimitive:StatusBadgeprimitive:ConfirmDialog

Customer input

brandSkintossAccountpricePolicyrefundPolicyfirebaseProject

Next routes

/payments/[paymentId]/me

Action/Form contract

버튼·폼·상태전이 바인딩

`screen-action-contract.json` 기준 primary CTA, form field, 상태전이, provider 차단, audit requirement를 화면에 직접 표시합니다. 현재 경계는 fixture-only-no-provider-call이며 no provider calls before customer accounts 정책을 유지합니다.

Provider block

no-provider-call-before-customer-accounts

Firebase·Toss·Storage·Auth production call은 고객 계정 수령 전까지 차단합니다.

Toss PaymentsCloud Firestore

Audit requirement

audit log not required

none

none

Form preview

form-paymentsrequiredField · clientShapeOnly · noLiveProviderCredential · fixtureOnlySubmit
준비idle

결제 상태 흐름 확인을 누르면 결제 또는 혜택 확인으로 자연스럽게 이어집니다.

진행 중submitting

잠시만 기다리면 결제내역 상태가 화면에 정리됩니다.

완료success

결제, 환불, 쿠폰, 포인트 흐름을 이어서 확인할 수 있습니다. 다음 단계는 결제 상세/영수증에서 이어서 확인할 수 있어요.

다시 확인error

입력한 내용과 화면 안내를 확인한 뒤 결제 상태 흐름 확인을 다시 눌러 주세요.

확인 필요blocked

결제 정책과 혜택 운영 기준 확인이 필요합니다. 준비되면 결제 상태 흐름 확인을 다시 진행할 수 있습니다.

action-payments-primaryidlesubmitting

사용자가 primary action을 실행합니다.

fixtureSuccesssubmittingsuccess

외부 provider 호출 없이 fixture 성공 상태를 표시합니다.

fixtureErrorsubmittingerror

검증/fixture 오류 상태를 표시합니다.

customerInputMissingidleblocked

고객 로고/계정/정책 blocker가 남아 있으면 blocked 상태를 유지합니다.

customerInputResolvedblockedidle

필수 입력이 해결되면 기본 상태로 돌아갑니다.

Fixture interaction runner

role·CTA·form·provider·audit 시뮬레이션

실 provider 호출 없이 primary CTA, role decision, form submit, state transition, audit requirement를 fixture-only로 점검합니다.

Role access

user6 denied roles

Primary flow

결제 상태 흐름 확인/payments/demo-payment

Form submit

submitFixture2 required fields provided by fixture

Audit/provider

audit not required2 blocked providers, 0 calls

Mock navigation fixture

실데이터 없이 클릭 가능한 대표 흐름

Firebase·Toss·정책 원문을 호출하지 않는 fixture-only 링크입니다. 동적 segment는 demo id로 치환해 브라우저에서 바로 route reachability를 확인합니다.

Seed

결제내역 demo flowroute-payments-fixturefixture-only-no-provider-call

Mocked entities

fixture:paymentDraftfixture:refundRequestfixture:receiptPreviewprimitive:MobileShellprimitive:PageHeaderprimitive:PaymentRowprimitive:SummaryCardprimitive:StatusBadgeprimitive:ConfirmDialog

Fixture payload

화면별 최소 DTO preview

실제 Firebase/Toss/정책 원문 대신 사용할 최소 payload입니다. 화면 구조와 DTO 슬롯을 먼저 맞추고, 고객 계정·정책 수령 후 실제 데이터로 교체합니다.

Payload contract

paymentFlowpayload-paymentspayment

Summary

결제내역 화면에 표시할 최소 payment fixture payload입니다. 실제 provider 호출 없이 layout과 DTO 슬롯만 확인합니다.

route-payments-fixture
ready₩79,000 demo

금액

pendingcustomer pending

환불 정책

결제 준비

데모 결제건

Toss 실제 호출 전 금액/상태 표시

amount:79000method:fixtureprovider:no-call

Form fields

주문 ID · hidden · required결제 금액 · number · required

Table columns

이름 · title상태 · status

toss-sandbox-needed

idempotency planned

no raw card data