와이어프레임 / 35-화면설계 / wireframes / 화면-06-01 환불 요청

화면 06-01 · 환불 요청 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · as-built(FE 코드 역추출 · Figma 없음) · 클릭 가능(prototype)
출처: arwen-fe: src/views/membership/RefundView.vue (origin/dev) · 허브 노트: 화면설계-06-01-환불요청.md
1개 섹션 · 4개 상태 프레임 · 기기 375×812 · 화면번호 06-01 확정(arwen_docs#530)

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

06-01 · 환불 요청

본인 환불/청약철회 가능 결제건을 골라 신청한다. 산정값(예상 금액·회수 크레딧·근거)은 BE가 계산해 내려주고 화면은 읽기전용으로 표시만 한다. 환불 불가 항목을 고르면 CTA가 "멤버십 관리로 이동"으로 바뀐다.

환불 요청 · 기본(선택 전)
‹ 환불 신청
결제 일시
2026-07-10 14:32 ▾ 1
유형
멤버십 2
크레딧
유형 선택 후 대상 결제건 목록이 나타남 3
환불 금액은 환불 정책에 따라 결정되며… 11
환불 신청 (비활성) 12
  • 주석 · 환불 요청 기본
  • 1동작결제 일시 선택(FormSelect). 옵션 = eligible-payments의 paidAt 중복 제거. 바꾸면 유형·항목·사유·이메일 초기화.
  • 2동작유형 토글(멤버십/크레딧, BtnOption×2). productType과 대조.
  • 3상태결제 일시+유형이 모두 정해지면 그 조합 결제건 목록(filteredPayments) 표시. 조합에 없으면 목록 비어 보임(빈-상태 UI 없음). 규칙#needs-verification
  • 11요소환불 정책 안내(항상). 산정은 BE — [[환불정책]]·[[RefundService]].
  • 12규칙폼 유효(일시·항목 선택 && 진행중 아님 && 불가 아님 && 사유≥1 && 이메일≥1) 전엔 비활성.
환불 요청 · 항목 선택·산정
‹ 환불 신청
2026-07-10 14:32 ▾
30일 멤버쉽 - ₩9,900 4
40 크레딧 - ₩4,900 4a
전액 환불 가능(결제 후 7일 이내, 혜택 미사용). 5
결제 수단 · 카카오페이 6
예상 결제 금액 · ₩9,900 7
회수 크레딧 · −40 Credits 8
최종 환불 금액은 예상 금액과 다를 수 있습니다. 9
환불 사유
사유 입력… 10
환불 수단 · 카카오페이
name@email.com 10a
환불 신청 12
  • 주석 · 항목 선택·산정 (환불 가능 건)
  • 4동작대상 결제건 단일 선택(라디오, selectedPaymentIdx). 라벨=planName - 금액. 근거 [[결정-크레딧환불-단일선택]].
  • 4a상태hasInProgressRefund 항목은 흐리게(opacity .5)·클릭 무시 → "환불 진행 중" 오류 라벨.
  • 5데이터근거 안내 = basis별 문구(WITHDRAWAL_7DAYS·CREDIT_UNUSED·CREDIT_PARTIAL·PREPAID_PRORATA…). 불가 basis면 error 스타일.
  • 6규칙결제 수단 = refundMethod(원결제수단) 읽기전용, 변경 UI 없음. 근거 [[결정-환불화면-결제수단표시]].
  • 7데이터예상 결제 금액 = recommendedAmount(BE 산정) 읽기전용. 통화별 ₩/$ 동적.
  • 8규칙회수 크레딧 = recoverCredit. >0일 때만 −{n} Credits, 0이면 행 숨김. 근거 [[결정-환불화면-회수크레딧표시]].
  • 9요소금액 변동 안내(환불 가능 시). 실제 집행은 [[환불정책]] 따름.
  • 10동작환불 사유(FormTextarea, 필수 1자+). 항목 바꾸면 초기화.
  • 10a동작연락 이메일(type=email, 필수 1자+).
  • 12데이터신청 → POST /refund/request { paymentIdx, reason, contactEmail }. 금액·근거는 재전송 안 함(BE 재산정). 성공 → 접수 완료 팝업.
환불 요청 · 환불 불가 항목
‹ 환불 신청
2026-07-10 14:32 ▾
30일 멤버쉽 - ₩9,900
월단위 멤버십은 부분 환불이 불가합니다. 해지하면 현재 결제 주기까지 유지 후 자동 종료됩니다. 13
환불 사유
사유 입력…
멤버십 관리로 이동 14
  • 주석 · 환불 불가
  • 13상태isNotRefundable(refundable=false 또는 basis MONTHLY_NO_REFUND/NOT_REFUNDABLE)면 근거 error·금액 블록 숨김.
  • 14이동CTA가 "멤버십 관리로 이동"으로 바뀜 → membership-change-plan([[화면설계-06-멤버십-크레딧]] 계열, 이 화면군 밖). #needs-verification
환불 요청 · 접수 완료 팝업
‹ 환불 신청
…환불 신청 폼…
환불 신청
환불 신청이 접수되었습니다 15
월 환불 한도 경고(조건부) 16
확인 17
  • 주석 · 접수 완료
  • 15상태신청 성공 시 팝업(PopupBasic).
  • 16규칙응답 advisory monthlyLimitExceeded=true면 월 한도 경고 문구 덧붙임(접수는 막지 않음).
  • 17이동확인 → 결제 내역([[화면설계-05-02-결제내역]] payment-history, 이 화면군 밖).

as-built 와이어프레임(FE 역추출) · 정본 스펙 화면설계-06-01-환불요청.md · 화면번호·슬롯 DSN(@kh9622) 확정 완료(arwen_docs#530) · Figma 디자인 실재 확인 및 완성(arwen_docs#547, 노드 3841:1398).