> ## 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 블록 이해하기: 섹션과 하위 블록, 채워진 상태와 빈 상태, 제한, 잠긴 블록, 조건, 블록별 설정.

장바구니의 레이아웃은 **블록**의 스택이에요: 카트 에디터에서 추가하고, 순서를 바꾸고, 스타일을 지정하고, 커스터마이징할 수 있는 구성 요소죠. 어떤 블록을 어떤 순서로 포함하는지가 구매자가 보는 장바구니를 결정해요.

블록이 \*\*상태(state)\*\*와 **섹션(section)** 안에 어떻게 배치되는지는 [장바구니는 어떻게 작동하나요?](/ko/aftersell/cart/how-carts-work)를 참고하세요.

<div id="blocks-and-sub-blocks">
  ## 블록과 하위 블록
</div>

블록에는 두 가지 종류가 있어요:

* **블록**은 장바구니의 세 섹션(**Header**, **Body**, **Footer**) 중 하나에 직접 배치돼요. 각 섹션은 서로 다른 블록 세트를 제공해요.
* **하위 블록**은 다른 블록 안에 중첩돼요. 현재는 [**Cart items**](/ko/aftersell/cart/cart-items-block)만 하위 블록을 가질 수 있어요: **Product** 행(라인 아이템 행 자체), [**Subscription upgrade**](/ko/aftersell/cart/subscription-upgrade-block), [**Custom code**](/ko/aftersell/cart/custom-code-blocks)예요.

<div id="adding-reordering-and-removing-blocks">
  ## 블록 추가, 순서 변경, 제거
</div>

* **Add block** 선택기로 블록을 **추가**하세요. 추가하려는 위치에 배치할 수 없거나 제한에 도달한 경우 블록이 회색으로 표시돼요(선택기에 `count/max` 배지가 표시돼요).
* 섹션 내에서 블록을 드래그해 **순서를 변경**하세요.
* 휴지통 아이콘으로 **제거**할 수 있어요. 단, 잠긴 블록은 예외예요(아래 참조).
* 눈 모양 토글로 대부분의 블록을 **표시/숨기기**할 수 있으며, 이는 블록을 삭제하지 않고 구매자에게만 숨겨요. 일부 구조 블록은 숨길 수 없어요: **Cart items**, **Checkout button**, **Product** 행이에요.

<div id="locked-blocks">
  ## 잠긴 블록
</div>

일부 블록은 순서 변경은 가능하지만 삭제할 수 없어서, 핵심 장바구니 기능(예: 체크아웃)이 실수로 제거되지 않아요:

* **Cart items**
* **Checkout button**

<div id="default-blocks">
  ## 기본 블록
</div>

새 장바구니는 바로 작동하는 기본 레이아웃으로 시작해요:

* **채워진 장바구니:** Header, Banner, Cart items, Summary, Checkout button
* **빈 장바구니:** Header, Empty cart 블록

<Info>
  **빈 장바구니 상태**는 빈 레이아웃 전체를 의미해요. **Empty cart 블록**은 그 안의 블록 하나예요. 차이점은 [장바구니는 어떻게 작동하나요?](/ko/aftersell/cart/how-carts-work)를 참고하세요.
</Info>

<div id="how-many-of-each-block-you-can-add">
  ## 각 블록을 몇 개까지 추가할 수 있나요
</div>

제한은 장바구니 단위가 아니라 **장바구니 상태 단위**로 계산돼요. 채워진 장바구니와 빈 장바구니에 각각 별도의 허용량이 있으므로, 하나의 장바구니가 채워진 레이아웃에 배너 3개, 빈 레이아웃에 3개를 더 가질 수 있어요.

대부분의 블록은 상태당 1개로 제한돼요. 예외는 다음과 같아요:

| 블록             | 장바구니 상태당 최대 개수 |
| -------------- | -------------- |
| Banner         | 3              |
| Image          | 3              |
| Product add-on | 3              |
| Summary        | 2              |
| Custom code    | 무제한            |

<div id="content-design-and-code">
  ## Content, Design, Code
</div>

각 블록은 에디터에서 최대 세 가지 영역을 통해 구성돼요:

* **Content**: 블록의 설정(텍스트, 상품 선택, 임계값 등)이에요. **Custom code** 블록만 예외인데, 블록 자체가 코드이기 때문에 Content 패널이 없어요.
* **Design**: 전역 [**디자인 설정**](/ko/aftersell/cart/design-settings) 위에 적용되는 블록별 스타일이에요. 설정 패널이 아예 없는 **Custom code**를 제외한 모든 블록에 있어요.
* **Code**: [**커스텀 템플릿**](/ko/aftersell/cart/custom-templates)으로 블록의 기본 렌더링을 재정의해요. 대부분의 블록이 지원하지만 일부는 지원하지 않아요.

<div id="show-or-hide-by-market-country-or-currency">
  ## 마켓, 국가, 통화별 표시 또는 숨기기
</div>

일부 블록은 구매자에 따라 다른 설정을 표시하거나 완전히 숨길 수 있어요. 이는 모든 사람에게 블록을 켜거나 끄는 사이드바 **눈 모양 토글**과는 별개예요.

|          | **눈 모양 토글**             | **조건(Conditions)**                |
| -------- | ----------------------- | --------------------------------- |
| **하는 일** | 모든 구매자에게 블록 전체를 숨기거나 표시 | 구매자가 볼 설정 변형을 선택(또는 아무것도 표시하지 않음) |
| **기준**   | 에디터에서의 선택               | Shopify 마켓, 고객 국가, 고객 통화          |
| **위치**   | 대부분의 블록에 있는 사이드바 눈 아이콘  | 조건을 지원하는 블록의 설정 패널                |

**현재 지원되는 조건 유형:** Shopify 마켓, 고객 국가, 고객 통화(각각 **In** 또는 **Not in** 선택 가능). 장바구니 총액과 장바구니 내용물은 조건 유형이 **아니에요**. 지출/수량 진행률에는 [Rewards](/ko/aftersell/cart/rewards-block)의 티어 임계값을 사용하고, 에디터로 표현할 수 없는 규칙이 필요하면 [Cart SDK](/ko/aftersell/cart/sdk-overview)를 사용하세요.

조건은 순서가 있는 목록이에요: **가장 먼저 일치하는** 조건이 적용돼요. 구체적인 규칙을 **All buyers** 포괄 조건 위에 배치하세요. 아무것도 일치하지 않으면 해당 구매자에게 블록이 아무것도 렌더링하지 않아요.

**현재 에디터에서** 전체 조건 UI는 [**Rewards**](/ko/aftersell/cart/rewards-block#per-market-rewards) 블록에 제공돼요: 마켓, 국가, 통화별로 다른 티어 세트를 설정할 수 있어요. 다른 블록은 단일 "모든 구매자" 구성을 사용하거나 아직 이 시스템에 참여하지 않아요.

에디터 미리보기는 실제 구매자를 평가하지 **않아요**. 패널에서 조건을 선택하면 해당 변형을 미리 볼 수 있어요.

<div id="all-blocks">
  ## 모든 블록
</div>

**구조**

* [Header](/ko/aftersell/cart/header-block): 제목, 아이템 수, 로고, 닫기 컨트롤이 상단에 고정돼요.
* [Cart items](/ko/aftersell/cart/cart-items-block): 고객이 장바구니에 추가한 아이템으로, 라인별로 반복돼요.
* [Subscription upgrade](/ko/aftersell/cart/subscription-upgrade-block): 라인을 구독으로 전환하도록 제안하는 하위 블록이에요.
* [Summary](/ko/aftersell/cart/summary-block): 총액, 절약 금액, 적용된 할인이에요.
* [Checkout button](/ko/aftersell/cart/checkout-button-block): 체크아웃으로 이어지는 기본 클릭 유도 버튼이에요.
* [Empty cart](/ko/aftersell/cart/empty-cart-block): 장바구니가 비어 있을 때 표시되는 콘텐츠예요.
* [Express payments](/ko/aftersell/cart/express-payments-block): 장바구니 내 빠른 결제 버튼(Shop Pay, PayPal 등)이에요.

**머천다이징**

* [Upsells](/ko/aftersell/cart/upsells-block): 전략에 따라 선택된 상품 추천이에요.
* [Product add-on](/ko/aftersell/cart/product-add-on-block): 애드온으로 제공되는 특정 상품 하나예요.
* [Rewards](/ko/aftersell/cart/rewards-block): 무료 배송이나 사은품 같은 티어형 리워드예요.
* [Shipping protection](/ko/aftersell/cart/shipping-protection-block): 선택형 배송 보호 애드온이에요.

**구매자 입력**

* [Discount code](/ko/aftersell/cart/discount-code-block): 할인 코드를 적용하는 필드예요.
* [Notes](/ko/aftersell/cart/notes-block): 주문 메모 필드예요.

**콘텐츠**

* [Banner](/ko/aftersell/cart/banner-block): 메시지 배너로, 선택적으로 카운트다운 타이머를 포함해요.
* [Image](/ko/aftersell/cart/image-block): 단일 이미지 또는 결제 아이콘 같은 호스팅된 프리셋이에요.
* [Custom code](/ko/aftersell/cart/custom-code-blocks): 장바구니 어디에나 넣을 수 있는 커스텀 HTML 또는 React예요.

**확장**

* [커스텀 템플릿](/ko/aftersell/cart/custom-templates): Code 탭에서 모든 블록의 렌더링 방식을 재정의해요.

<div id="blocks-available-in-each-section">
  ## 각 섹션에서 사용 가능한 블록
</div>

각 섹션마다 사용 가능한 블록 세트가 달라요. 이렇게 하면 레이아웃이 명확해지고 복잡함이 줄어들어요.

| 섹션         | 사용 가능한 블록                                                                                                                                           |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Header** | Header, Banner, Rewards, Image, Custom code                                                                                                         |
| **Body**   | Banner, Notes, Discount code, Cart items, Empty cart, Custom code, Rewards, Product add-on, Shipping protection, Image, Upsells                     |
| **Footer** | Banner, Notes, Discount code, Custom code, Rewards, Product add-on, Shipping protection, Express payments, Image, Upsells, Summary, Checkout button |

이 중 일부 블록은 특정 상태에서만 사용할 수 있어요(예: Empty cart는 빈 상태에서만). [장바구니는 어떻게 작동하나요?](/ko/aftersell/cart/how-carts-work)를 참고하세요.

<div id="block-validation-errors">
  ## 블록 유효성 검사 오류
</div>

블록 설정에 잘못된 값이 있으면 사이드바에서 해당 블록 이름 옆에 작은 빨간 점이 표시돼요. 이 점은 문제를 해결할 때까지 사라지지 않아요. 닫을 수 있는 알림이 아니에요.

어떤 블록에든 오류가 있는 동안에는 **저장이 차단돼요**. **Save** 버튼은 클릭할 수 있지만, 선택하면 오류 토스트(*"Fix the errors in your cart blocks before saving"*)가 표시되고 문제가 있는 첫 번째 블록으로 이동해 설정을 열어 강조된 필드를 수정할 수 있게 해요. **Publish**는 저장되지 않은 변경 사항이 없어야 하므로, 정상적인 저장이 완료될 때까지 사용할 수 없어요.

잘못된 필드를 수정하면 점이 저절로 사라지고 저장이 정상적으로 진행돼요.

<Note>
  숨겨진 블록도 유효성 검사 대상이에요. 숨긴 블록도 잘못된 설정을 가질 수 있고, 오류 점을 표시하며, 보이는 블록과 똑같이 저장을 차단해요. 따라서 저장이 차단됐는데 보이는 블록이 모두 정상이라면 숨겨진 블록을 확인하세요.
</Note>