> ## 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의 이미지(Image) 블록 — 드로어 안에 이미지나 결제 아이콘 같은 호스팅된 프리셋을 표시하세요.

> **이미지(Image)** 블록은 장바구니 드로어 안에 단일 이미지(신뢰 배지, 프로모션 그래픽, 또는 결제 아이콘 스트립 같은 호스팅된 프리셋)를 표시해, 직접 업로드한 이미지나 미리 만들어진 프리셋을 통해 장바구니에 시각적 신뢰감이나 프로모션 요소를 더해 줘요.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-image-block-hosted-preset-asset.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=373a75d9fe7c6ed7d7a39950b57662bb" alt="장바구니 드로어 안에 호스팅된 이미지 또는 프리셋 에셋을 렌더링하는 이미지 블록" width="686" height="234" data-path="images/aftersell/cart-image-block-hosted-preset-asset.png" />
</Frame>

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

* 이미지와 프리셋이 모두 설정되어 있지 않으면, 라이브 장바구니에서 블록은 **아무것도** 렌더링하지 않아요. 에디터에서는 블록을 계속 선택할 수 있도록 "Add an image" 자리 표시자가 표시돼요.

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

| 설정             | 제어하는 항목                                                    | 기본값 |
| -------------- | ---------------------------------------------------------- | --- |
| **Image**      | 표시할 이미지(업로드).                                              | 없음  |
| **Alt text**   | 이미지에 대한 접근성 설명. 번역이 가능해요.                                  | 없음  |
| **Max height** | 이미지 높이를 픽셀 단위로 제한해요. 이미지는 맞게 축소되며 절대 잘리지 않아요.              | 없음  |
| **Full width** | 이미지를 장바구니 가장자리까지 꽉 차게 늘려요.                                 | 꺼짐  |
| **Preset**     | 업로드한 이미지보다 우선 적용되는 호스팅된 이미지 세트. 현재 유일한 프리셋은 **결제 아이콘**이에요. | 없음  |

프리셋을 선택하면 업로드한 이미지 대신 프리셋이 적용되며, Alt text 필드를 비워 두면 프리셋 자체의 대체 텍스트가 사용돼요.

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

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

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

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

| Prop        | 타입               | 용도                                        |
| ----------- | ---------------- | ----------------------------------------- |
| `imageUrl`  | `string`         | 업로드된 파일 또는 선택된 프리셋. 설정되지 않았으면 비어 있어요.     |
| `altText`   | `string`         | 이미지의 대체 텍스트예요.                            |
| `maxHeight` | `number` (선택 사항) | 최대 높이(픽셀 단위). 더 큰 이미지는 종횡비를 유지하며 맞게 축소돼요. |
| `fullWidth` | `boolean`        | 가장자리까지 표시: 이미지가 가로 여백 없이 장바구니 전체 너비에 걸쳐요. |

<Note>
  `altText`는 비어 있을 수 있어요. 속성을 생략하기보다 `alt=""`로 렌더링해서 이미지가 장식용으로 처리되도록 하세요. `maxHeight`와 `fullWidth`는 여러분의 스타일에서 직접 적용해야 하는 값이며, 템플릿이 대신 적용해 주지 않아요.
</Note>

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

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

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