와이어프레임 / 35-화면설계 / wireframes / 화면-05-02 결제 내역

화면 05-02 · 결제 내역 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · 신설 구획(디자인 우선) · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · node 4104:7425(05_02 결제 내역, 신설) · 허브 노트: 화면-05-02-결제내역.md
2개 섹션 · 6개 상태 프레임 · 기기 375×812 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다) · FE 미구현(arwen_docs#167 2·3단계 분기)

▶ 흐름 모드: 요소를 눌러 화면 이동 ▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤 ①②③ 요소 번호 = 아래 주석 동작·이동·데이터·규칙·상태 유형 태그

05_02_01 · 결제 내역 — 목록

결제 내역을 시간 역순(최신 먼저)으로 늘어놓는다. 한 건은 카드 한 줄(유형 아이콘·상품명·결제일·금액·상태 배지). 한 행을 누르면 상태별 상세로 들어간다. 내역이 없으면 빈 상태를 보여준다.

목록 · default
결제 내역

결제 내역

구매·구독·환불 기록

M1
Oruli Premium 2
2026.06.01
$9.99 3
Paid 4
C
Credit 100
2026.05.20
$4.99
Paid
C
Credit 50
2026.05.10
$4.99
Refunded
M
Oruli Premium
2026.04.30
$9.99
Failed
C
Credit 100
2026.04.01
$4.99
Paid
  • 주석 · 결제 내역 목록
  • 1요소유형 아이콘. 멤버십(M)·크레딧(C) 결제를 서로 다른 글리프로 가른다. 근거: [[DSG-Icons]].
  • 2요소상품명 + 결제일. 상품명이 길면 두 줄로 접힌다.
  • 3요소결제 금액. 환불·실패 건은 회색(amount-disabled)으로 눌러 비활성으로 보인다. 환불 건은 금액에 취소선을 긋는다.
  • 4요소상태 배지. 완료(Paid)·환불(Refunded)은 같은 중립 회색. 실패(Failed)만 강조(실제 디자인=빨강 배지). 상태색이 Red뿐이라 색이 아니라 명도·모양으로 가른다. 근거: [[토큰-color]]·[[부채-디자인토큰-정합성]]·[[DSG-Icons]](arwen_docs#139).
  • ·이동행 탭 → 결제 상세(상태별로 지불/환불/실패 상세로 분기).
  • ·데이터표시 항목 출처는 [[Payment]]·[[CreditProduct]]. 시간 역순 정렬. 사용자용 결제 내역 조회 API는 미확정(arwen_docs#167에서 분기, CMS 조회는 별건 [[부채-CMS-payments-미구현]]). #needs-verification
  • ·규칙금액은 달러($)로 표기하나 [[Payment]]currency 기본값은 KRW(원화)다. 실제 과금 통화는 별도 확인 필요. #needs-verification
  • ·이동뒤로 → 마이페이지([[화면-05-01-내정보-및-설정]], 이 화면군 밖).
목록 · loading
결제 내역

결제 내역

구매·구독·환불 기록

  • ·상태추정 UI 상태(로딩 스켈레톤) — KB 상태목록에는 5프레임만 명시돼 이 로딩은 근거 없이 보강한 상태다. 조회 응답 대기(스켈레톤 + 하단 스피너). 이 화면이 호출할 사용자용 조회 API는 아직 확정되지 않았다(arwen_docs#167). #needs-verification
  • ·이동본문 탭 = 로드 완료 시뮬 → 목록 default.
목록 · empty (내역 없음)
결제 내역

No purchase history found. 1

Your purchases and refunds
will appear here.

  • 주석 · 빈 상태
  • 1요소빈 영수증 일러스트 + "No purchase history found." + 안내 "Your purchases and refunds will appear here."
  • ·규칙결제 이력이 0건인 사용자에게만 보인다. 하단 CTA 없음.
  • ·이동뒤로 → 마이페이지(이 화면군 밖).

05_02_02 · 결제 내역 — 상세

목록에서 한 건을 누르면 보는 상세다. 위쪽 히어로(상품명·상태 배지·큰 금액) + 아래쪽 카드(항목명/값 두 열). 결제 상태에 따라 지불·환불·결제실패 세 벌로 그린다. 표시 항목은 [[Payment]] 엔티티를 출처로 삼는다.

상세 · 지불 (Paid)
결제 상세
Oruli Premium
Paid
$9.99 1
ProductOruli Premium 2
Paid at2026.06.01 14:32
Amount$9.99
StatusPaid
TypeCredit card
  • 주석 · 상세 (지불)
  • 1요소히어로 — 상품명·상태 배지(Paid, 중립 회색)·금액을 크게 보여준다.
  • 2데이터항목 카드 ↔ [[Payment]]: Product(creditProductIdx[[CreditProduct]] 상품명) · Paid at(paidAt) · Amount(amount) · Status(status=PAID) · Type(payMethodDetail, 예 "Credit card"; 값 없으면 "-"). Type 바인딩은 arwen_docs#323에서 methodpayMethodDetail로 확정.
  • 3요소Figma에 btn-text 컴포넌트(용도 미기재)가 있으나 이 노트에 용도 기재가 없다. #needs-verification
  • ·이동뒤로 → 목록.
  • ·규칙금액 $ 표기 vs 데이터 currency 기본 KRW — 실제 과금 통화 확인 필요. 사용자용 조회 API 미확정(arwen_docs#167). #needs-verification
상세 · 환불 (Refunded)
결제 상세
Credit 50
Refunded
$4.99
ProductCredit 50
Paid at2026.05.10 09:15
Amount$4.99
StatusRefunded
Refunded amount$3.25 1
Refunded at2026.05.12 11:00
TypeKakaopay 2
  • 주석 · 상세 (환불)
  • ·상태Status=REFUNDED. 지불 항목에 환불 전용 두 행이 더해진다.
  • 1데이터Refunded amount(cancelledAmount, 환불·취소 누계) · Refunded at(refundedAt). 부분 환불이면 결제액보다 작다(예: $4.99 중 $3.25). 이 두 행은 환불 건에만 나타난다 — 환불 전에는 두 필드가 비어 있다(arwen_docs#77). 근거: [[환불정책]]·[[결정-결제취소-크레딧회수]].
  • 2요소Type=payMethodDetail "Kakaopay"(대문자 KakaoPay가 아닌 표기 그대로, arwen_docs#323). 정기결제라도 "정기결제" 표시를 덧붙이지 않는다.
  • ·이동뒤로 → 목록.
상세 · 결제실패 (Failed)
결제 상세
Oruli Premium
Failed 1
$9.99
ProductOruli Premium
Paid at2026.04.30 08:00
Amount$9.99
StatusFailed
Type- 2
  • 주석 · 상세 (결제실패)
  • 1상태Status=Failed. 실제 디자인은 빨강 배지(상태색이 Red뿐이라 실패만 빨강; 완료·환불은 회색). 와이어프레임은 회색이라 테두리로 구분. 근거: [[토큰-color]]·[[부채-디자인토큰-정합성]]·[[DSG-Icons]].
  • 2요소Type=payMethodDetail "-"(값 없음 그대로 표기, arwen_docs#323). 환불 행(환불액·환불 일시)은 두지 않는다.
  • ·규칙실패 내역은 정보 표시 전용. 하단 액션 버튼 없음. 구 디자인의 "Check Payment Method"(결제 수단 확인) CTA는 제거(이동처 미정 해소). 결제수단 재등록·변경은 [내 정보·설정 > 결제수단 관리] 전용 메뉴에서 한다(이 화면군 밖). 근거: [[결정-결제실패-복구-결제수단관리-일원화]](arwen_docs#295·#321).
  • ·규칙실패 사유 표기는 정책 미확정으로 이번 디자인에서 제외. 실패 건의 결제일 필드 성격도 노트에 미기재. #needs-verification
  • ·이동뒤로 → 목록.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(요소·이동·엔드포인트·규칙)이다. 이 구획은 신설 디자인(디자인 우선, FE 미구현)이라 사용자용 조회 API·과금 통화·실패 사유 표기는 아직 확정 전(#needs-verification, arwen_docs#167). 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-05-02-결제내역.mdwireframe: 필드가 이 파일을 가리킨다.