> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Summary 블록

> Aftersell Cart Summary 블록: 총액, 절약 금액, 적용된 할인 코드.

> **Summary** 블록은 쇼핑객이 지불할 금액을 보여줘요: 선택적 절약 금액이 포함된 총액 행과 적용된 할인 태그들이에요. 체크아웃 버튼 바로 위에서 카트의 총액과 절약 금액을 요약하므로, 쇼핑객이 결정하기 전에 최종 금액을 볼 수 있어요.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=455f22040697c41fd1e02a870e9cccf8" alt="체크아웃 전 소계, 절약 금액, 적용된 할인을 표시하는 Summary 블록" width="1368" height="250" data-path="images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png" />
</Frame>

<div id="behavior">
  ## 동작
</div>

* **절약 토큰은 우아하게 접혀요.** 셀이 `{{savings}}`나 `{{pre_savings_price}}`를 참조하는데 카트에 절약이 없으면, 해당 셀은 `{{total_price}}`만으로 폴백되므로 쇼핑객이 "\$0.00 할인"이나 총액과 같은 취소선 가격을 보는 일이 없어요. 같은 셀에 `{{cart_item_count}}`와 `{{savings}}`를 함께 사용하면 절약이 없을 때의 폴백에서 상품 개수도 제거돼요 — 이를 피하려면 별도의 셀에 배치하세요.
* 할인 태그는 **Show discount codes**가 켜져 있고 *동시에* 카트에 나열할 할인이 있을 때만 나타나요. 여기에는 코드 기반 할인과 자동 할인이 모두 포함돼요.

<div id="settings">
  ## 설정
</div>

| 설정                      | 제어하는 것                                                                    | 기본값                |
| ----------------------- | ------------------------------------------------------------------------- | ------------------ |
| **Left text**           | 총액 행의 왼쪽 셀. 토큰이 포함된 서식 있는 텍스트. 예: `Subtotal ({{cart_item_count}} items)`. | `Subtotal`         |
| **Right text**          | 오른쪽 셀. 토큰(총액, 취소선 처리된 절약 전 가격, 절약 금액, 상품 개수)이 포함된 서식 있는 텍스트.              | 취소선 절약 마크업이 포함된 총액 |
| **Savings format**      | 절약을 전체 `percent`로 표시할지 `absolute` 금액으로 표시할지.                              | `percent`          |
| **Show discount codes** | 적용된 할인 태그의 표시 여부. 여기에는 코드 기반 할인과 자동 할인이 모두 포함돼요.                          | 켜짐                 |

텍스트 셀은 `{{cart_item_count}}`, `{{total_price}}`, `{{pre_savings_price}}`, `{{savings}}` 토큰을 지원해요.

<div id="placement-and-limits">
  ## 배치 및 제한
</div>

* **영역:** 하단(bottom).
* **최대:** 카트 상태당 2개 — 채워진 카트와 빈 카트가 각각 별도의 허용량을 가져요.
* **상태:** 채워진 카트와 빈 카트 모두.
* 새 카트에 기본으로 추가돼요. 잠겨 있지 않아 제거하거나 숨길 수 있어요.

<div id="custom-template">
  ## 커스텀 템플릿
</div>

Code 탭에서 [커스텀 템플릿](/ko/aftersell/cart/custom-templates)을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 다음은 블록이 받는 props예요.

| Prop                | 타입         | 용도                                                                 |
| ------------------- | ---------- | ------------------------------------------------------------------ |
| `leftHtml`          | `string`   | 토큰이 해석된, 정제된 HTML 형태의 왼쪽 셀.                                        |
| `rightHtml`         | `string`   | 토큰이 해석된, 정제된 HTML 형태의 오른쪽 셀.                                       |
| `discountCodes`     | `string[]` | 카트에 적용된 할인 제목들(코드 기반 및 자동). 없으면 `[]`.                              |
| `showDiscountCodes` | `boolean`  | 머천트가 할인 태그 목록 표시를 원하고 **동시에** 카트에 나열할 할인이 있는지 여부.                  |
| `hasSavings`        | `boolean`  | 카트에 절약이 있으면 `true`. 직접 만든 절약 행을 숨길 때 사용하세요.                        |
| `totalPrice`        | `string`   | 이미 포맷된 카트 총액.                                                      |
| `preSavingsPrice`   | `string`   | 이미 포맷된 절약 전 총액.                                                    |
| `savings`           | `string`   | 절약 금액. 머천트의 절약 형식 설정에 따라 이미 포맷된 금액 **또는 `15%` 같은 백분율**이에요.         |
| `itemCount`         | `number`   | 카트의 총 수량 — 표시되는 라인 수량의 합계로, 배송 보호 라인은 제외돼요.                        |
| `isLoading`         | `boolean`  | 여기서는 항상 `false`예요: 블록은 로드 중에 기본 스켈레톤을 렌더링하고 카트가 준비된 후에만 템플릿을 호출해요. |

<Warning>
  `savings`는 금액일 수도 백분율일 수도 있으므로, 한쪽을 가정한 문장을 직접 만들지 마세요. `{props.savings}` 단독은 안전하지만, `You saved ${props.savings}`는 안전하지 않아요.
</Warning>

<div id="design">
  ## 디자인
</div>

설정 패널의 **Design** 섹션에서 이 블록의 스타일을 지정하세요. 이는 전역 디자인 위에 적용되는 블록별 오버라이드이며, 비워 두면 전역 디자인으로 폴백돼요.

디자인 설정이 무엇인가요? 여기서 자세히 알아보세요: [디자인 설정](/ko/aftersell/cart/design-settings).