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

동작 방식

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

설정

배치 및 제한

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

커스텀 템플릿

코드(Code) 탭에서 커스텀 템플릿을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 이 블록이 받는 props는 다음과 같아요.
메모는 키 입력마다가 아니라 onNoteBlur에서 저장돼요. onNoteChangeonNoteBlur를 모두 연결하세요. 그렇지 않으면 메모가 조용히 저장되지 않아요. 스크린 리더가 저장 중과 저장됨을 안내할 수 있도록 상태 텍스트를 라이브 영역에 유지하세요.

디자인

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

텍스트

Design의 Text 섹션에서 두 요소의 타이포그래피를 제어할 수 있어요. Text element 선택기로 두 요소를 전환하세요. Title — 메모 필드 위에 있는 섹션 헤딩이에요. 굵기는 (Settings 탭의) 위쪽 리치 텍스트 에디터에서 설정해요. 텍스트 색상은 Design의 Toggle 섹션에서 설정해요. Note field — 쇼핑객이 메모를 입력하는 textarea 안의 텍스트예요. 디자인 설정이 무엇인가요? 자세한 내용은 여기에서 확인하세요: 디자인 설정.