> ## 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의 헤더(Header) 블록: 드로어 상단에 고정되는 제목, 상품 개수, 로고, 닫기 컨트롤입니다.

> **헤더(Header)** 블록은 장바구니 드로어의 고정된 상단 영역으로, 드로어에 명확한 제목과 닫는 방법을 분명하게 제공해요. **Title**, **Logo**, **Close button**을 왼쪽과 오른쪽 섹션에 할당하여 레이아웃을 제어할 수 있어요. 헤더는 상단에 고정되어 있어, 장바구니의 나머지 부분이 스크롤되는 동안에도 계속 보여요.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="드로어 상단에 장바구니 제목, 상품 개수, 닫기 컨트롤이 있는 헤더 블록" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

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

* 헤더는 드로어 상단에 고정되며 장바구니 본문과 함께 스크롤되지 않아요.
* 닫기 컨트롤은 항상 사용할 수 있으며 드로어를 닫아요.

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

| 설정        | 제어하는 항목                                                                                                                      | 기본값                          |
| --------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**  | 왼쪽 섹션에 어떤 요소들(`Title`, `Logo`, `Close button`)이 어떤 순서로 렌더링될지.                                                                | `Title`                      |
| **Right** | 오른쪽 섹션에 어떤 요소들(`Title`, `Logo`, `Close button`)이 어떤 순서로 렌더링될지.                                                               | `Close button`               |
| **Title** | 장바구니의 서식 있는 텍스트 제목. `{{cart_item_count}}` 및 `{{total_price}}` 토큰을 지원해요.                                                      | `Cart • {{cart_item_count}}` |
| **Image** | 커스텀 템플릿에 `props.logoUrl`로 전달되는 이미지. 이 필드는 커스텀 템플릿이 활성화된 동안에만 표시되며, 기본 제공 헤더는 절대 렌더링하지 않아요. 지원 형식: WebP, JPEG, PNG, GIF, SVG. | 없음                           |

제목은 번역이 가능해요. 제목이 비어 있게 되면(예: 설정되지 않은 번역), 장바구니는 헤더가 비어 보이지 않도록 **Cart**를 대신 표시해요.

요소는 선택한 순서대로 왼쪽에서 오른쪽으로 나타나며, 각 요소는 한 번에 하나의 섹션에만 할당할 수 있어요.

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

* **영역:** 상단(top) 전용.
* **최대:** 장바구니 상태당 1개.
* **상태:** 채워진 장바구니와 빈 장바구니(각 상태마다 자체 헤더 인스턴스가 있어요).
* 두 상태 모두에서 새 장바구니에 기본으로 추가돼요. 잠겨 있지 않으므로 눈 모양 토글로 제거하거나 숨길 수 있어요.

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

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

<Note>
  `logoUrl`은 기본 제공 기능에 대응 요소가 없는 유일한 prop이에요: 헤더에 업로드된 이미지는 **커스텀 템플릿에서만 렌더링돼요**. 판매자가 로고를 설정했는데 표시되지 않는다면 이것이 이유예요.
</Note>

| Prop           | 타입                                        | 용도                                                                              |
| -------------- | ----------------------------------------- | ------------------------------------------------------------------------------- |
| `title`        | `string`                                  | 살균 처리된 HTML 형식의 헤더 제목으로, `{{cart_item_count}}`와 `{{total_price}}`가 이미 치환되어 있어요. |
| `logoUrl`      | `string \| null`                          | 업로드된 헤더 이미지. 판매자가 설정하지 않았으면 `null`이에요.                                          |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | 왼쪽 섹션에 대해 선택된 항목들, 렌더링 순서대로.                                                    |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | 오른쪽 섹션에 대해 선택된 항목들, 렌더링 순서대로.                                                   |
| `itemCount`    | `number`                                  | 쇼핑객에게 보이는 장바구니의 상품 개수예요.                                                        |
| `onClose`      | `() => void`                              | 드로어를 닫아요. 닫기 컨트롤에 연결하세요.                                                        |
| `isLoading`    | `boolean`                                 | 여기서는 항상 `false`예요: 블록은 로드 중에 기본 제공 스켈레톤을 렌더링하고, 장바구니가 준비된 후에만 템플릿을 호출해요.        |

<Warning>
  `onClose`를 어디에도 연결하지 않아도 쇼핑객은 오버레이를 클릭하거나 Escape 키를 눌러 드로어를 닫을 수 있지만, 헤더에는 닫기 버튼이 없게 돼요. 항상 하나를 포함하세요.
</Warning>

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

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

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

Design의 **Text** 섹션에서 장바구니 제목의 타이포그래피를 제어할 수 있어요. 굵기와 텍스트 색상은 (Settings 탭의) 위쪽 리치 텍스트 에디터에서 설정하며, 이곳에서 설정하지 않아요.

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

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