> ## 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의 메모(Notes) 블록: 쇼핑객의 요청 사항을 장바구니와 주문에 저장하는 접을 수 있는 주문 메모 필드입니다.

> **메모(Notes)** 블록은 쇼핑객이 장바구니를 벗어나지 않고 주문 메모나 특별 요청 사항(선물 메시지, 배송 요청 등)을 추가할 수 있는 접을 수 있는 필드예요. 메모는 장바구니에 저장되어 주문까지 전달돼요.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-notes-block-collapsible-order-notes-field.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=a54c41fc0b8417e00e8232762ef6a6c2" alt="쇼핑객이 특별 요청 사항을 추가할 수 있는 접을 수 있는 주문 메모 필드를 보여주는 메모 블록" width="854" height="262" data-path="images/aftersell/cart-notes-block-collapsible-order-notes-field.png" />
</Frame>

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

* 이 필드는 기본적으로 접혀 있는 **접을 수 있는 디스클로저**예요. 접는 것은 시각적인 효과일 뿐이며, 저장된 메모는 여전히 적용돼요. 메모가 저장된 상태에서 접히면 체크 표시가 나타나 쇼핑객이 메모가 저장되었음을 알 수 있어요.
* 메모는 **쇼핑객이 필드 밖을 클릭할 때**(blur 시) 저장되며, 저장 중 / 저장됨 / 오류 상태 피드백이 제공돼요.
* 장바구니 메모가 다른 곳(`/cart` 페이지나 다른 탭)에서 변경되면 필드가 이에 동기화돼요. 단, 쇼핑객이 이미 입력을 시작한 경우는 예외이므로 작성 중인 메모가 덮어써지는 일은 없어요.

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

| 설정              | 제어하는 항목                        | 기본값                                   |
| --------------- | ------------------------------ | ------------------------------------- |
| **Title**       | 필드의 레이블. 서식 있는 텍스트이며 번역이 가능해요. | `Order notes`                         |
| **Placeholder** | 입력란의 자리 표시자 텍스트. 번역이 가능해요.     | `Special instructions for your order` |

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

* **영역:** 본문(body) 또는 하단(bottom).
* **최대:** 장바구니 상태당 1개.
* **상태:** 채워진 장바구니 전용.
* 기본으로 추가되지 않아요. 잠겨 있지 않으므로 제거하거나 숨길 수 있어요.

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

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

| Prop            | 타입                                         | 용도                                                                   |
| --------------- | ------------------------------------------ | -------------------------------------------------------------------- |
| `titleHtml`     | `string`                                   | 살균 처리된 서식 있는 텍스트 제목 HTML. 판매자가 제목을 비워 두면 비어 있어요.                     |
| `titleText`     | `string`                                   | 일반 텍스트 제목. textarea의 `aria-label`로 사용하고, 서식 있는 텍스트가 없을 때 제목으로 사용하세요. |
| `hasTitle`      | `boolean`                                  | 두 형식의 제목 중 하나라도 존재하는지 여부. 제목과 토글의 `aria-label` 표시를 결정해요.             |
| `placeholder`   | `string`                                   | 빈 메모 필드에 표시되는 자리 표시자예요.                                              |
| `noteInput`     | `string`                                   | 현재 메모 텍스트예요.                                                         |
| `status`        | `'idle' \| 'saving' \| 'saved' \| 'error'` | 저장 수명 주기. 음성으로 안내되는 상태 라이브 영역을 구동해요.                                 |
| `statusLabel`   | `string`                                   | `status`에 대한 라이브 영역 안내 문구. idle일 때는 비어 있어요.                          |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | 아이콘에 사용되는 상태. `status`와 같지만, 텍스트가 있는 접힌 메모는 `saved`로 표시돼요.           |
| `isExpanded`    | `boolean`                                  | 메모 필드가 펼쳐져 있는지 여부. 접는 것은 시각적인 효과일 뿐이며 메모는 항상 유지돼요.                   |
| `onNoteChange`  | `(value: string) => void`                  | 메모 텍스트를 업데이트해요. 예를 들어 textarea의 `onInput`에서 새 값과 함께 호출하세요.           |
| `onNoteBlur`    | `(event: unknown) => void`                 | 메모를 저장해요. textarea의 `onBlur`에 직접 연결하세요. 이벤트에서 값을 읽어요.                |
| `onToggle`      | `() => void`                               | 펼침/접힘 상태를 전환해요.                                                      |

<Warning>
  **메모는 키 입력마다가 아니라 `onNoteBlur`에서 저장돼요.** `onNoteChange`와 `onNoteBlur`를 모두 연결하세요. 그렇지 않으면 메모가 조용히 저장되지 않아요. 스크린 리더가 저장 중과 저장됨을 안내할 수 있도록 상태 텍스트를 라이브 영역에 유지하세요.
</Warning>

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

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

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

Design의 **Text** 섹션에서 두 요소의 타이포그래피를 제어할 수 있어요. **Text element** 선택기로 두 요소를 전환하세요.

**Title** — 메모 필드 위에 있는 섹션 헤딩이에요. 굵기는 (Settings 탭의) 위쪽 리치 텍스트 에디터에서 설정해요. 텍스트 색상은 Design의 Toggle 섹션에서 설정해요.

| 설정                 | 제어하는 항목     | 기본값    |
| ------------------ | ----------- | ------ |
| **Size**           | 글꼴 크기예요.    | `14px` |
| **Line height**    | 줄 높이 배수예요.  | `1.4`  |
| **Letter spacing** | 문자 간 간격이에요. | Normal |

**Note field** — 쇼핑객이 메모를 입력하는 textarea 안의 텍스트예요.

| 설정                 | 제어하는 항목                                              | 기본값              |
| ------------------ | ---------------------------------------------------- | ---------------- |
| **Text color**     | 메모 텍스트의 색상이에요.                                       | 장바구니 텍스트 색상에서 상속 |
| **Size**           | 글꼴 크기예요.                                             | `14px`           |
| **Weight**         | 글꼴 굵기예요 — Light, Regular, Medium, Semibold, 또는 Bold. | Regular (400)    |
| **Line height**    | 줄 높이 배수예요.                                           | `1.5`            |
| **Letter spacing** | 문자 간 간격이에요.                                          | Normal           |

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