> ## 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 배너 블록: 드로어 내부에 표시되는 메시지 배너로, 선택적으로 카운트다운 타이머를 포함할 수 있어요.

> **Banner** 블록은 장바구니 내부에 표시되는 메시지 스트립으로, 프로모션, 배송 안내, 또는 무료 배송 알림, 세일 공지, "장바구니 예약" 안내 같은 긴급성 메시지에 유용해요. 실시간 카운트다운 타이머를 포함할 수 있어요.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-banner-block-reservation-countdown.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=8aff1b333a8ebe9005d2d70bc7f9a2cd" alt="예약 카운트다운 메시지를 보여주는 Aftersell 장바구니 드로어의 배너 블록" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **카운트다운은 세 가지 조건이 모두 충족될 때만 작동해요:** 타이머가 활성화되어 있고, 텍스트에 `{{timer}}` 토큰이 포함되어 있으며, 지속 시간이 0보다 커야 해요. 그렇지 않으면 배너는 정적 텍스트로 표시돼요.
* 타이머는 `MM:SS` 형식으로 카운트다운되며 구매자의 탭에 기억돼요(세션 동안 스토어 내 페이지 이동에도 유지됨). 따라서 페이지마다 다시 시작되지 않아요.
* **타이머가 `00:00`에 도달하면 배너 전체가 사라져서**, 구매자가 0이 된 시계를 보는 일이 없어요.
* 에디터 미리보기에서는 타이머가 반복되고 배너가 숨겨지지 않으므로 계속 스타일을 다듬을 수 있어요.

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

| 설정                        | 제어 대상                                                                                              | 기본값                                            |
| ------------------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | 리치 텍스트 메시지예요. 카운트다운을 표시하려면 `{{timer}}` 토큰을 포함하세요.                                                  | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | 카운트다운을 켜거나 꺼요.                                                                                     | 켜짐                                             |
| **Minutes** / **Seconds** | 카운트다운이 진행되는 시간이에요. 두 개의 숫자 필드로, **Countdown timer**가 켜지면 표시되며 `{{timer}}`가 나타나는 위치에 `MM:SS`로 표시돼요. | 10분                                            |

텍스트는 번역할 수 있어요.

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

* **영역:** 모든 위치(상단, 본문, 하단).
* **최대 개수:** 장바구니 상태별 3개 — 채워진 장바구니와 빈 장바구니에 각각 별도의 허용량이 있어요.
* **상태:** 채워진 장바구니와 빈 장바구니 모두.
* 새 장바구니에는 기본적으로 추가돼요. 잠겨 있지 않으므로 제거하거나 숨길 수 있어요.

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

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

| Prop                          | 타입        | 용도                                                                           |
| ----------------------------- | --------- | ---------------------------------------------------------------------------- |
| `text`                        | `string`  | 정제(sanitize)된 HTML 형태의 배너 메시지로, `{{timer}}` 토큰이 실시간 카운트다운으로 **이미 대체된** 상태예요. |
| `shouldUseTimer`              | `boolean` | 이 배너에서 카운트다운이 실행 중이면 `true`예요.                                               |
| `isTimerExpiredAndShouldHide` | `boolean` | 카운트다운이 0에 도달하면 `true`가 돼요.                                                   |
| `isLoading`                   | `boolean` | 여기서는 항상 `false`예요: 블록은 로딩 중에는 기본 스켈레톤을 렌더링하고, 장바구니가 준비된 후에만 템플릿을 호출해요.       |

별도의 `timer` prop은 없어요. 카운트다운이 `text`에 자동으로 삽입되므로 `text`를 렌더링하는 것만으로 충분해요.

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  // The built-in banner removes itself at 00:00; a custom template must do the same.
  if (props.shouldUseTimer && props.isTimerExpiredAndShouldHide) return null;

  return (
    <div className="cart-external-banner" style={{ padding: '10px', textAlign: 'center' }}>
      <span dangerouslySetInnerHTML={{ __html: props.text }} />
    </div>
  );
}
```

<Warning>
  이 조기 반환(early return)이 중요해요. 이것이 없으면 타이머가 만료된 후에도 배너가 계속 렌더링되고, 토큰이 이미 대체된 상태이므로 구매자에게 멈춰 있는 `00:00`이 표시돼요.
</Warning>

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

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

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

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

| 설정                 | 제어 대상             | 기본값     |
| ------------------ | ----------------- | ------- |
| **Font**           | 배너 텍스트의 글꼴 패밀리예요. | 테마에서 상속 |
| **Size**           | 글꼴 크기예요.          | `14px`  |
| **Line height**    | 줄 높이 배수예요.        | `1.4`   |
| **Letter spacing** | 문자 간 간격이에요.       | Normal  |

<div id="style">
  ### 스타일
</div>

| 설정                   | 제어 대상                                               | 기본값         |
| -------------------- | --------------------------------------------------- | ----------- |
| **Background color** | 배너의 배경 채우기 색상이에요.                                   | `#000000`   |
| **Text color**       | 대체 텍스트 색상이에요(리치 텍스트 에디터에서 재정의됨).                    | `#ffffff`   |
| **Border**           | 배너에 테두리가 있는지 여부예요 — **None**(0px) 또는 **Show**(1px). | None        |
| **Border color**     | **Show**가 선택된 경우 테두리 색상이에요.                         | Transparent |

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