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

# 할인 코드 블록

> Aftersell Cart 할인 코드 블록 — 구매자가 체크아웃 전에 할인 코드를 입력하고 적용할 수 있게 해요.

> **Discount code** 블록은 구매자가 장바구니에서 프로모 코드를 입력하고 적용할 수 있는 입력란으로, 체크아웃을 진행하기 전에 할인이 반영된 것을 확인할 수 있어요.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-discount-code-block-input-apply.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=ac5730766b756fdf99c2fc9f65ac202b" alt="장바구니 드로어의 입력 필드와 Apply 버튼이 있는 할인 코드 블록" width="1314" height="230" data-path="images/aftersell/cart-discount-code-block-input-apply.png" />
</Frame>

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

* 적용 시 코드는 공백이 제거되고 대문자로 변환되어 Shopify에 제출돼요. Shopify는 코드의 유효 여부와 관계없이 요청을 수락하므로, 블록이 장바구니를 다시 확인해 코드가 실제로 적용되었는지 검증해요.
  * **유효** → 필드가 지워지고 할인이 적용돼요.
  * **유효하지 않음** → 블록에 "Invalid discount code."가 표시돼요.
* 코드가 다른 할인(자동 할인, 다른 코드)과 중복 적용되는 방식은 전적으로 Shopify가 처리해요 — 블록은 코드만 적용해요.
* 적용된 코드는 여기가 아니라 [**Summary**](/ko/aftersell/cart/summary-block) 블록에 표시돼요.

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

| 설정              | 제어 대상                       | 기본값             |
| --------------- | --------------------------- | --------------- |
| **Placeholder** | 입력란의 플레이스홀더 텍스트예요. 번역 가능해요. | `Discount code` |
| **Button text** | 적용 버튼 라벨이에요. 번역 가능해요.       | `Apply`         |

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

* **영역:** 본문 또는 하단.
* **최대 개수:** 장바구니 상태당 1개 — 채워진 장바구니와 빈 장바구니에 각각 별도의 허용량이 있어요.
* **상태:** 채워진 상태와 빈 상태 모두.
* 기본으로 추가되지 않아요. 잠겨 있지 않으므로 제거하거나 숨길 수 있어요.

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

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

| Prop                   | 타입                        | 용도                                               |
| ---------------------- | ------------------------- | ------------------------------------------------ |
| `discountCodeInput`    | `string`                  | 입력란의 현재 값이에요.                                    |
| `placeholder`          | `string`                  | 빈 입력란에 표시되는 플레이스홀더예요.                            |
| `buttonText`           | `string`                  | 적용 버튼의 라벨이에요.                                    |
| `isValidating`         | `boolean`                 | 제출된 코드를 확인하는 동안 `true`예요. 이 값으로 제출 컨트롤을 비활성화하세요. |
| `isInvalid`            | `boolean`                 | 마지막으로 제출된 코드가 거부되었을 때 `true`예요.                  |
| `setDiscountCodeInput` | `(value: string) => void` | 입력 값을 업데이트해요.                                    |
| `handleSubmit`         | `(event: Event) => void`  | 현재 코드를 제출해요.                                     |
| `isLoading`            | `boolean`                 | 장바구니가 첫 데이터를 가져오는 동안 `true`예요.                   |

<Warning>
  `setDiscountCodeInput`과 `handleSubmit`을 모두 연결하세요. 첫 번째가 없으면 필드에 입력할 수 없고, 두 번째가 없으면 코드가 적용되지 않아요.
</Warning>

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

설정 패널의 **Design** 섹션에서 이 블록의 스타일을 지정하세요. 이는 전역 디자인 위에 적용되는 블록별 재정의이며, 비어 있으면 전역 디자인으로 대체돼요.

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