와이어프레임 / 35-화면설계 / wireframes / 화면-08-04 환불정책

화면 08-04 · 환불정책 (Refund Policy) — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · as-built(FE 코드 역추출 · Figma 없음)
출처: arwen-fe: src/views/legal/RefundPolicyView.vue (origin/dev) · 허브 노트: 화면설계-08-04-환불정책.md
1개 섹션 · 4개 상태 프레임 · 기기 375×812 · 공개(비로그인 접근) · 08(법적고지) 영역·번호 08-04 확정(arwen_docs#548)
정적 고지 화면이라 화면 안 이동이 없다 — 상태 4종은 같은 화면의 표시 전환이고, 밖으로 나가는 요소는 헤더 뒤로가기뿐이다.

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

08-04 · 환불정책

서버에서 받은 약관 HTML 한 벌을 스크롤 카드 안에 렌더하는 정적 고지 화면. 환불을 신청하는 화면이 아니다 — 신청은 06-01 환불 요청 소관이다. 공용 컴포넌트 TermsContent가 로딩·오류·내용없음·본문 네 상태를 배타적으로 가른다.

환불정책 · 본문(기본)
환불 정책 1
2
  • 주석 · 본문(기본)
  • 1요소헤더 back-title — 제목 "환불 정책"(common.headerTitles.refund) + 뒤로가기. 이동뒤로가기 → 직전 화면(이 화면군 밖).
  • 2요소테두리 카드 안의 내부 스크롤 영역. 긴 약관 본문을 여기서만 스크롤한다. 규칙페이지 자체는 스크롤 잠금(useScrollLock({ alwaysLock: true })).
  • ·데이터본문은 응답의 content 한 필드만 쓴다. DOMPurify.sanitize(content, { ADD_ATTR: ['target','rel'] })로 소독 후 v-html 렌더.
  • ·규칙진입점 1곳만 확인됨: 풋터 "환불정책"(LayoutFooter.vue:35·:78). 멤버십 안내문의 /legal/refund 인라인 링크는 이 화면으로 오지 않는다useTermsPopup이 가로채 약관 팝업으로 띄운다(useTermsPopup.ts:10~16).
  • ·규칙이 화면에는 환불 신청 폼·CTA가 없다. 신청 화면은 화면설계-06-01-환불요청이다.
환불정책 · 로딩
환불 정책
회전 스피너 3
  • 주석 · 로딩
  • 3상태isLoading 동안 24px 원형 스피너만 보인다. 규칙재조회할 때마다 오류·본문을 먼저 비우고 시작한다.
환불정책 · 내용없음
환불 정책
등록된 약관이 없습니다. 4
  • 주석 · 내용없음
  • 4상태응답은 성공(200)인데 활성 약관이 없는 경우. i18n legal.terms.noContent. 규칙오류가 아니다 — 오류 화면으로 가지 않는다.
환불정책 · 오류
환불 정책
약관을 불러올 수 없습니다. 5
  • 주석 · 오류
  • 5상태호출 실패(catch) 시 i18n legal.terms.loadError. 규칙재시도 버튼이 없다 — 로케일을 바꾸거나 화면에 다시 들어와야 재호출된다.

as-built 와이어프레임(FE 역추출) · 정본 스펙 화면설계-08-04-환불정책.md · 08-03 개인정보처리방침·08-05 쿠키정책과 구조가 동일하다(차이는 termsId·헤더 제목뿐) · Figma 디자인 미작성(조건부 후속).