---
{"id":"invoice-summary","title":"청구 요약·금액 구성","category":"컴포넌트","order":71.17,"summary":"기본액·할인·세금·총액·주기를 나눠 보여주는 설명용 요약입니다.","status":"문서용 동작 예제 · 운영 이식 미검증","references":[]}
---

# 청구 요약·금액 구성

## 목적과 사용

기본액·할인·세금·총액·주기를 나눠 보여주는 설명용 요약입니다. WickedHost 제품군의 업무 패턴입니다. TeamWicked 자체 체계에는 노출하지 않습니다.

## 구성과 변형

- 월
- 년
- 할인 없음
- 할인 있음
- 합계

보여 주는 형태는 해당 제품 토큰으로 구성한 문서용 예제입니다. 별도 원본 연결 표시가 없으면 운영 컴포넌트를 그대로 복제했다는 의미가 아닙니다.

## 동작 규칙

- IVS-01 MUST: 예제 금액을 실제 판매 가격·청구 확정액으로 표시하지 않습니다.
- IVS-02 MUST: 금액의 주기·통화·반올림 위치를 계산과 표시에 일치시킵니다.
- IVS-03 MUST: 할인·세금·최종 합계를 별도 행에서 검토할 수 있게 합니다.
- IVS-04 MUST: 청구 미리보기와 결제 완료를 같은 성공 상태로 표시하지 않습니다.

## 접근성

컨트롤은 보이는 목적과 같은 접근 가능한 이름을 가집니다. 키보드로 진입·조작·이탈할 수 있어야 하며 오류와 현재 상태를 텍스트로 설명합니다. [접근성 기준](accessibility.md)과 [읽기 전용·권한](disabled-readonly.md)을 함께 적용합니다.

## 콘텐츠 예시

예제 이름·주소·금액은 실제 고객 데이터가 아닙니다. 금액은 계산 구조 설명용으로 고정했으며 구매·결제 동작은 제공하지 않습니다. 실제 권한·저장·전송이 완료되었다고 오해할 문구는 사용하지 않습니다.

## 우리 구현과 연결

web/expanded-specimens.tsx의 실행 코드와 이 페이지의 구현 코드 탭이 같은 함수를 사용합니다. 공통 요소는 web/primitives.tsx, 스타일은 web/expanded-specimens.css에서 관리합니다. WickedHost의 [제품 구현 지도](product-panel.md)를 연결하되 실제 패널·청구·서버 API는 호출하지 않습니다.

## 상태와 검증

주기·할인 변경에 따른 항목 합계와 총액을 비교합니다. 가상 계산이며 재무·세무 자문이 아닙니다.

라이트·다크 / desktop·mobile / 키보드 / 빈 값·긴 값 / 권한·실패 / 데이터 변경 요청 없음에 대한 증거를 기록합니다. 제품의 실제 업무 성공이나 전체 WCAG 준수 여부는 별도 검증입니다.