> ## 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.
# 빈 장바구니 블록
> 빈 장바구니(Empty cart) 블록 — 쇼핑객의 장바구니에 상품이 없을 때 표시되는 콘텐츠입니다.
> **빈 장바구니(Empty cart)** 블록은 장바구니에 상품이 없을 때 표시되는 콘텐츠로, 일반적으로 메시지와 쇼핑 계속하기 버튼으로 구성되어 있어 빈 드로어도 여전히 유용하고 브랜드에 어울리게 유지해 줘요. 이 블록은 장바구니의 **빈 상태**에서만 나타나며, 다른 블록(예: 헤더)도 같은 상태에서 함께 배치할 수 있어요.
## 동작 방식
* 이 블록은 장바구니가 비어 있을 때만 나타나요. 쇼핑객이 상품을 추가하는 즉시 장바구니가 채워진 상태로 전환되고, 이 블록은 채워진 장바구니 레이아웃으로 대체돼요.
* 에디터에서는 CTA 링크가 비활성화되어 있어, 디자인 중에 클릭해도 다른 페이지로 이동하지 않아요.
## 설정
| 설정 | 제어하는 항목 | 기본값 |
| -------------------- | ---------------------------------------------------------------------------------------------------- | --------------------- |
| **Empty cart text** | 빈 상태 메시지. 서식 있는 텍스트예요. | `Your cart is empty.` |
| **Button text** | 버튼 레이블. 인라인 HTML 서식을 지원해요. | `Continue shopping` |
| **Button link** | 버튼이 연결되는 위치. | `/collections/all` |
| **Background color** | 블록의 배경 색상. 비워 두면 투명하게 유지되어 장바구니 자체의 배경이 그대로 보여요. | `transparent` |
| **Alignment** | 블록의 텍스트와 버튼 정렬 방식 — **Left** 또는 **Center**. | Center |
| **Fit to height** | 블록이 장바구니 본문의 남은 높이를 채우고 세로로 가운데 정렬될지, 콘텐츠 높이만큼만 차지할지 — **Fill remaining height** 또는 **Fit content**. | Fill remaining height |
## 배치 및 제한
* **영역:** 본문(body).
* **최대:** 장바구니 상태당 1개.
* **상태:** 빈 장바구니 전용. 이 블록은 채워진 상태에서는 나타나지 않아요. 새 장바구니에는 기본적으로 빈 상태에 헤더도 포함돼요. 자세한 내용은 [장바구니는 어떻게 작동하나요?](/ko/aftersell/cart/how-carts-work)를 참고하세요.
* 새 장바구니에 기본으로 추가돼요. 잠겨 있지 않으므로 제거하거나 숨길 수 있어요.
## 커스텀 템플릿
코드(Code) 탭에서 [커스텀 템플릿](/ko/aftersell/cart/custom-templates)을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 이 블록이 받는 props는 다음과 같아요.
| Prop | 타입 | 용도 |
| --------- | -------- | --------------------------------------------------------------- |
| `text` | `string` | 살균 처리된(sanitized) HTML 형식의 빈 장바구니 메시지예요. |
| `cta` | `string` | 일반 텍스트 형식의 콜투액션 버튼 레이블이에요. |
| `ctaHtml` | `string` | 살균 처리된(sanitized) HTML 형식의 콜투액션 버튼 레이블이에요 — 기본 마크업이 렌더링하는 값이에요. |
| `href` | `string` | 콜투액션이 가리키는 위치예요. |
이 블록은 장바구니가 비어 있을 때만 렌더링되므로 props에 cart 객체가 없어요. `href`는 스크립트 기반 내비게이션 대신 실제 `` 요소로 렌더링하고, `text`는 이미 살균 처리된 HTML이므로 `dangerouslySetInnerHTML`로 렌더링하세요.
## 디자인
설정 패널의 **Design** 섹션에서 이 블록의 스타일을 지정하세요. 이는 전역 디자인 위에 적용되는 블록별 재정의이며, 비워 두면 전역 디자인으로 대체돼요.
### 텍스트
Design의 **Text** 섹션에서 두 요소의 타이포그래피를 제어할 수 있어요. **Text element** 선택기로 두 요소를 전환하세요.
**Message** — 빈 상태 메시지 텍스트예요. 굵기와 텍스트 색상은 (Settings 탭의) 위쪽 리치 텍스트 에디터에서 설정하며, 이곳에서 설정하지 않아요.
| 설정 | 제어하는 항목 | 기본값 |
| ------------------ | -------------- | ------- |
| **Font** | 메시지의 글꼴 패밀리예요. | 테마에서 상속 |
| **Size** | 글꼴 크기예요. | `18px` |
| **Line height** | 줄 높이 배수예요. | `1.3` |
| **Letter spacing** | 문자 간 간격이에요. | Normal |
**Button label** — 쇼핑 계속하기 버튼의 텍스트예요. 텍스트 색상은 Design의 Button 섹션에서 설정해요.
| 설정 | 제어하는 항목 | 기본값 |
| ------------------ | ---------------------------------------------------- | -------------- |
| **Size** | 글꼴 크기예요. | `15px` |
| **Weight** | 글꼴 굵기예요 — Light, Regular, Medium, Semibold, 또는 Bold. | Semibold (600) |
| **Line height** | 줄 높이 배수예요. | `1.47` |
| **Letter spacing** | 문자 간 간격이에요. | Normal |
### 버튼
**Button** 섹션에서는 CTA 버튼을 전역 버튼 디자인과 별도로 스타일링할 수 있어요. **Default / Hover** 토글을 사용해 두 상태를 전환하세요.
| 설정 | 상태 | 제어하는 항목 |
| -------------------- | ------- | ------------------------------------------------- |
| **Background color** | Default | 기본 상태에서의 버튼 채우기 색상. 비워 두면 전역 버튼 배경 색상으로 대체돼요. |
| **Text color** | Default | 기본 상태에서의 버튼 레이블 색상. 비워 두면 전역 버튼 텍스트 색상으로 대체돼요. |
| **Background color** | Hover | 고객이 마우스를 올렸을 때의 버튼 채우기 색상. 비워 두면 기본 배경 색상으로 대체돼요. |
| **Text color** | Hover | 마우스를 올렸을 때의 버튼 레이블 색상. 비워 두면 기본 텍스트 색상으로 대체돼요. |
| **Border color** | — | 버튼 테두리 색상(두 상태 모두). 비워 두면 전역 버튼 테두리 색상으로 대체돼요. |
| **Border radius** | — | 버튼 모서리 둥글기. 비워 두면 전역 버튼 테두리 반경으로 대체돼요. |
디자인 설정이 무엇인가요? 자세한 내용은 여기에서 확인하세요: [디자인 설정](/ko/aftersell/cart/design-settings).