화면 08-06 · 청소년보호정책 (Youth Protection Policy) — 와이어프레임

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

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

08-06 · 청소년보호정책

서버에서 받은 약관 HTML 한 벌을 스크롤 카드 안에 렌더하는 정적 고지 화면. 공용 컴포넌트 TermsContent가 로딩·오류·내용없음·본문 네 상태를 배타적으로 가른다. 08-03·08-04·08-05와 구조가 완전히 동일하다 — 차이는 termsId 값(YOUTH_PROTECTION)과 헤더 제목뿐이다.

📡 호출 엔드포인트 (선택적 인증)
APIGET /terms/YOUTH_PROTECTION (진입 onMounted 1회 + 로케일 변경 시 재호출) — 게시 중인 청소년보호정책 1건 조회. 응답 { status, code, value? }. value 부재는 오류가 아니라 내용없음 정상 케이스. 서버에 YOUTH_PROTECTION 종류가 아직 없어 현재는 오류 또는 내용없음만 보인다(#1557).

청소년보호정책 · 본문(기본)

‹청소년보호정책 1

주석 · 본문(기본)
1요소헤더 back-title — 제목 "청소년보호정책"(common.headerTitles.youthProtection) + 뒤로가기. 이동뒤로가기 → 직전 화면(이 화면군 밖).
2요소테두리 카드 안의 내부 스크롤 영역. 긴 약관 본문을 여기서만 스크롤한다. 규칙페이지 자체는 스크롤 잠금(useScrollLock({ alwaysLock: true })).
·데이터본문은 응답의 content 한 필드만 쓴다. DOMPurify.sanitize(content, { ADD_ATTR: ['target','rel'] })로 소독 후 v-html 렌더.
·규칙진입점 2곳(둘 다 풋터 링크): 국문 풋터 "청소년보호정책"(LayoutFooter.vue:43) · 영문 풋터 "Youth Protection Policy"(LayoutFooter.vue:90).

청소년보호정책 · 로딩

‹청소년보호정책

회전 스피너 3

주석 · 로딩
3상태isLoading 동안 24px 원형 스피너만 보인다. 규칙재조회할 때마다 오류·본문을 먼저 비우고 시작한다.

청소년보호정책 · 내용없음

‹청소년보호정책

등록된 약관이 없습니다. 4

주석 · 내용없음
4상태응답은 성공(200)인데 활성 약관이 없는 경우. i18n legal.terms.noContent. 규칙오류가 아니다 — 오류 화면으로 가지 않는다.

청소년보호정책 · 오류

‹청소년보호정책

약관을 불러올 수 없습니다. 5

주석 · 오류
5상태호출 실패(catch) 시 i18n legal.terms.loadError. 규칙재시도 버튼이 없다 — 로케일을 바꾸거나 화면에 다시 들어와야 재호출된다.

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