> ## 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.

# Shipping protection 블록

> Aftersell Cart Shipping protection 블록: 선택 여부를 주문에 기록하는 옵트인 보호 애드온이에요.

> **Shipping protection** 블록은 쇼핑객이 카트에서 켤 수 있는 옵트인 배송 보호 애드온을 제공해요. 배송 중 파손, 분실 또는 도난에 대한 보호를 추가할 수 있게 하고, 그 선택을 주문에 기록해 풀필먼트나 클레임 도구에서 활용할 수 있어요.

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

* 보호를 추가하면 두 가지 일이 일어나요: 보호 상품에 대한 **실제 Shopify 상품 라인**이 추가되고, `_shipping_protected` 카트 속성이 `true`로 설정돼요.
* **그 속성은 체크아웃을 거쳐 주문에 도달**하여 주문 메모 속성(`_shipping_protected`)이 되므로, 풀필먼트나 클레임 도구가 어떤 주문이 보호되는지 알 수 있어요.
* 어떤 표시 유형을 선택하든, 쇼핑객은 컨트롤로 보호를 추가하고 제거할 수 있어요.
* **사용 가능한 보호 옵션(variant)이 없으면 블록은 아무것도 렌더링하지 않아요.** 클릭 시 오류가 발생할 컨트롤을 표시하는 대신에요.

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

| 설정               | 제어하는 것                                                                              | 기본값                                                               |
| ---------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Title**        | 서식 있는 텍스트 제목. `{{product_title}}`과 `{{price}}`를 지원해요.                               | `<strong>{{product_title}}</strong>`                              |
| **Price label**  | 제목 아래에 표시되는 가격 줄. `{{product_title}}`과 `{{price}}`를 지원해요. 이 필드를 비우면 가격 줄이 완전히 숨겨져요. | `{{price}}`                                                       |
| **Description**  | 보조 문구.                                                                              | `Protect your order from damage, loss, or theft during shipping.` |
| **Price**        | 보호 가격(숫자, 청구 금액을 설정해요).                                                             | `2.5`                                                             |
| **Product**      | 보호 상품(앱에서 제공).                                                                      | —                                                                 |
| **Display type** | 컨트롤 표시 방식: **Toggle** 또는 **Checkbox**.                                              | Toggle                                                            |

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

* **영역:** 본문(body) 또는 하단(bottom).
* **최대:** 카트 상태당 1개.
* **상태:** 채워진 카트에서만.
* 기본으로 추가되지 않아요. 잠겨 있지 않아 제거하거나 숨길 수 있어요.

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

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

| Prop              | 타입                                   | 용도                                                     |
| ----------------- | ------------------------------------ | ------------------------------------------------------ |
| `isEnabled`       | `boolean`                            | 배송 보호가 현재 카트에 있는지 여부.                                  |
| `isPending`       | `boolean`                            | 추가 또는 제거가 진행 중인 동안 `true`. 이 값으로 컨트롤을 비활성화하세요.         |
| `title`           | `string`                             | 일반 텍스트 제목. 서식 있는 텍스트 제목이 없을 때의 폴백.                     |
| `titleHtml`       | `string`                             | 정제된 서식 있는 텍스트 제목 HTML. 없으면 비어 있어요.                     |
| `descriptionHtml` | `string`                             | 정제된 서식 있는 텍스트 설명 HTML. 없으면 비어 있어요.                     |
| `priceHtml`       | `string \| null`                     | 전용 가격 필드의 정제된 서식 있는 텍스트 가격 HTML. 해당 필드가 비어 있으면 `null`. |
| `priceLabel`      | `string`                             | 포맷된 가격 레이블. 가격이 표시되지 않으면 비어 있어요.                       |
| `imageUrl`        | `string`                             | 보호 이미지. 없으면 비어 있어요.                                    |
| `ctaText`         | `string`                             | `button` 형식의 버튼 레이블.                                   |
| `format`          | `'button' \| 'checkbox' \| 'toggle'` | 구매자가 옵트인하는 방식. 이 값으로 마크업을 분기하세요.                       |
| `handleAdd`       | `() => void`                         | 카트에 보호를 추가해요. `button` 형식용.                            |
| `handleToggle`    | `() => void`                         | 카트에서 보호를 켜고 꺼요. `checkbox`와 `toggle`용.                 |
| `isLoading`       | `boolean`                            | 카트가 아직 첫 번째 fetch를 수행하는 동안 `true`.                     |

<Warning>
  `format`이 어떤 핸들러가 적용되는지 결정해요: `button`은 `handleAdd`, `checkbox`와 `toggle`은 `handleToggle`. 잘못된 것을 연결하면 다른 형식을 선택한 머천트에게는 컨트롤이 작동하지 않아요.
</Warning>

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

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

<div id="text">
  ### 텍스트
</div>

Design의 **Text** 섹션에서 세 요소의 타이포그래피를 제어할 수 있어요. **Text element** 선택기로 요소를 전환하세요.

**Title** — 보호 제목이에요. 커스텀 글꼴 패밀리도 지원해요. 굵기와 텍스트 색상은 (Settings 탭의) 위쪽 리치 텍스트 에디터에서 설정하며, 이곳에서 설정하지 않아요.

| 설정                 | 제어하는 것        | 기본값     |
| ------------------ | ------------- | ------- |
| **Font**           | 제목의 글꼴 패밀리예요. | 테마에서 상속 |
| **Size**           | 글꼴 크기예요.      | `15px`  |
| **Line height**    | 줄 높이 배수예요.    | `1.33`  |
| **Letter spacing** | 문자 간 간격이에요.   | Normal  |

**Price** — 가격 줄이에요. 굵기와 텍스트 색상은 위쪽 리치 텍스트 에디터에서 설정해요.

| 설정                 | 제어하는 것      | 기본값    |
| ------------------ | ----------- | ------ |
| **Size**           | 글꼴 크기예요.    | `15px` |
| **Line height**    | 줄 높이 배수예요.  | `1.33` |
| **Letter spacing** | 문자 간 간격이에요. | Normal |

**Description** — 보조 문구예요. 굵기와 텍스트 색상은 위쪽 리치 텍스트 에디터에서 설정해요.

| 설정                 | 제어하는 것      | 기본값    |
| ------------------ | ----------- | ------ |
| **Size**           | 글꼴 크기예요.    | `14px` |
| **Line height**    | 줄 높이 배수예요.  | `1.29` |
| **Letter spacing** | 문자 간 간격이에요. | Normal |

<Tip>
  카트 미리보기에서 텍스트 요소를 직접 클릭하면 해당 요소가 강조되고, 패널에서 해당 컨트롤이 자동으로 열려요.
</Tip>

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