문서 / 레퍼런스
이 문서의 큐
속성 계약 (attributes)
이 파일은 코드에서 자동 생성됩니다. 직접 편집하지 마세요. 재생성:cd hosting-web && npx tsx scripts/gen-docs.ts이름 진실 =@saeroon/web-sdk·@saeroon/shop-sdk· form-auto-attach · sdk-auto-inject 소스.
새로온에 배포한 정적 사이트는 HTML 요소에 data-* 속성을 선언하는 것만으로 회원·게시판·댓글·쇼핑·폼이 붙습니다. cli deploy 가 관련 속성을 감지해 SDK 로더를 자동 주입합니다.
개요
| 구분 | 수 | 비고 |
|---|---|---|
data-saeroon-* 속성(저자용) | 65 | 아래 기능별 표 |
data-saeroon-* 내부 마커 | 17 | SDK/CLI 가 자동 관리 |
| 미공개(보류) | 1 | content-editing P2-a 공개 범위 미결 |
data-saeroon-* 소스 총계 | 83 | 소스 추출 = 문서화(대조 PASS) |
컴패니언 data-* | 55 | data-saeroon-* 와 함께 쓰는 일반 속성 |
부트/로더 data-* | 6 | script 태그(대개 cli 가 자동 inject) |
부트 / 로더
SDK 로더 <script> 태그의 속성입니다. 대개 cli deploy 가 자동으로 심습니다.
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 | ||
|---|---|---|---|---|---|---|
data-site-id | 회원 SDK 로더 <script> | 사이트 UUID | 필수 — 없거나 빈 값이면 SDK 초기화 중단(console.error) | 테넌트/사이트 식별. auth-hint localStorage 키(saeroon:auth-hint:<siteId>)의 기반. cli deploy 가 자동 inject. | ||
data-api-base | 회원/쇼핑 SDK 로더 <script> | 절대 URL · 빈 문자열=동일 출처 · 부재=https://api.saeroon.com | 선택 | ApiClient 의 API base. 속성 부재(null)면 운영 기본값, 빈 문자열이면 same-origin relative. | ||
data-pk | 회원 SDK 로더 <script> | publishable key (pk_live_…) | 조건부 — 없으면 회원 인증/쓰기 미동작(공개 read 일부만), console.warn | 테넌트 해석용 publishable key(비밀 아님, HTML 노출 허용). 매 요청 X-Saeroon-Pk 헤더로 전송. (구) data-api-key(sk_live_) 폐기. | ||
data-site-slug | 쇼핑 SDK 로더 <script> | 사이트 slug | 필수 — 없으면 shop SDK 초기화 중단(console.error) | 공개 쇼핑 API 스코프(회원 SDK 의 siteId 아닌 siteSlug). cli deploy 가 자동 inject. | ||
data-provider | 쇼핑 SDK 로더 <script> | 결제 provider (기본 toss) | 선택 — 부재 시 toss | 결제 provider 힌트. site-aware /client-config 로 승격 가능. | ||
data-session-header | 쇼핑 SDK 로더 <script> | "1" \ | "true" \ | "on" (옵트인) | 선택 — 기본 꺼짐 | X-Shop-Session 헤더(localStorage 세션 id)를 모든 쇼핑 요청에 싣는다. 🔴 백엔드 프리플라이트 허용 헤더 목록에 아직 없어(S8 배선 전) 교차 출처 정적 사이트에서 켜면 카트 요청 전체가 브라우저에서 막힌다 — 켜지 마라. |
회원 인증
인증 · 조건부 렌더 · 바인딩
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 |
|---|---|---|---|---|
data-saeroon-auth | form(register/login/profile/password) · button·link(logout/withdraw/social) | register · login · profile · password · logout · withdraw · kakao · naver · google · apple | 조건부 — 인증 UI 요소에 필수 | form 은 submit 에서 값(mode) 분기: register→회원가입, login→로그인, profile→프로필 수정(name/phone/displayName/avatarUrl/bio), password→비밀번호 변경(currentPassword/newPassword). logout·withdraw 는 버튼 클릭. 값이 kakao/naver/google/apple 이면 클릭 시 소셜 로그인으로 이동. 폼 값은 name 속성 필드에서 읽는다. |
data-saeroon-if | 아무 컨테이너 요소 | logged-in · logged-out · tier:<A,B,…> | 선택 | 로그인 상태/등급으로 el.style.display 토글. tier: 는 쉼표 분리 등급 중 하나라도 충족 시 표시. 등급 순서 Free<Bronze<Silver<Gold<Platinum(exact-case), 미상/오타 등급은 fail-closed(숨김). |
data-saeroon-bind | 아무 요소 (input/textarea 는 value, 그 외 textContent) | user.<field> — field ∈ id·siteId·email·name·displayName·avatarUrl·role·tier | 선택 | 'user.' 로 시작하는 path 만 처리. 세션 회원의 해당 필드 값을 채운다. member 없으면 빈 문자열. |
data-saeroon-error | form 내부 오류/상태 표시 요소 (없으면 SDK 가 생성) | 유무 (내용은 SDK 가 씀) | 선택 — 없으면 showError 가 <div> 를 만들어 append | 인증/글/댓글 폼의 오류·성공 메시지 대상. 성공 시 글자색을 초록(#080)으로 바꾼다. ?auth-error=<code> 로 복귀하면(소셜 실패) 사람말 메시지를 표기한다. |
<form data-saeroon-auth="login"><input name="email"><input name="password" type="password"></form>
<div data-saeroon-if="tier:Gold,Platinum">등급 전용</div>
<span data-saeroon-bind="user.displayName"></span>
<div data-saeroon-error></div>게시판 / 글
목록 · 상세 · 작성 · 소유자 액션 · 필드
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 |
|---|---|---|---|---|
data-saeroon-post-list | 컨테이너 | 유무 (data-board-id 동반 의무) | 조건부 — 목록 컨테이너에 필수 | 게시판 글 목록. 내부에 <template data-saeroon-post-item> 가 있으면 그 마크업을 글마다 복제(디자인 보존), 없으면 generic 카드 렌더. data-page-size(기본 10)·data-detail-base·data-saeroon-item-class-cycle 를 읽는다. |
data-saeroon-post-item | <template> (post-list 내부) | 유무 | 선택 — 디자인 보존 모드용 | 글 1건마다 복제되는 슬롯. 복제본 내부 [data-saeroon-field] 요소만 데이터로 채운다 → 디자인 손실 0. |
data-saeroon-post-detail | 컨테이너 | 유무 | 선택 | 글 상세. post id 는 URL ?post=<id> 또는 data-post-id 로 해석. 내부 [data-saeroon-field] 채움, 조회 시 서버가 viewCount 증가. 못 찾으면 [data-saeroon-empty] 토글. |
data-saeroon-post-body | post-detail 내부 본문 래퍼 | 유무 | 선택 | 상세 로드 성공 시 display 를 노출한다(기본 숨김 마크업 지원). 초기 빈 상태에서 본문 깜빡임 방지. |
data-saeroon-post-link | post-item 템플릿 내부 링크 | 유무 | 선택 | href 에 "?post=<id>" 를 자동 부착. base = list[data-detail-base] 우선, 없으면 링크 기존 href. 요소가 없으면 출력 byte-동일(무영향). |
data-saeroon-post-create | form | 유무 (data-board-id 동반 의무) | 조건부 — 글쓰기 폼에 필수 | 글 작성 폼. name="title"·name="content" 필드를 읽어 createPost 호출. data-visibility 로 공개범위 지정. 내부에 input[type=file][data-saeroon-post-image] 가 있으면 첨부 이미지를 R2 업로드 후 markdown 으로 본문에 삽입. |
data-saeroon-post-image | input[type=file] (post-create 내부) | 유무 ([multiple] 허용) | 선택 — 운영자 이미지 첨부용 | 제출 전 선택 파일을 R2 업로드(uploadAsset) 후 markdown 을 content 앞에 삽입, contentType 을 markdown 으로 승격. |
data-saeroon-post-actions | 컨테이너 (상세 내부) | 유무 (기본 hidden 권장) | 선택 — 소유자 액션 UI | 상세 응답의 isMine === true 일 때만 hidden 을 제거해 노출한다(작성자/운영자만). isMine 부재(구 백엔드) = 유지(하위호환). |
data-saeroon-post-update | form | 유무 | 선택 — 글 수정 폼 | submit 시 updatePost(title/content). 소유자(isMine)면 title/content 원문이 자동 프리필된다. 성공 후 상세 재조회 + saeroon:post-updated 이벤트. |
data-saeroon-post-delete | button | 유무 | 선택 — 글 삭제 버튼 | confirm(data-confirm 기본 "이 글을 삭제할까요?") 후 deletePost. 성공 시 data-redirect 또는 현재 경로로 이동. |
data-saeroon-field | post-list/detail/comment 스코프 내부 요소 | title · authorName · date · createdAt · content · viewCount · likeCount · commentCount · tag · thumbnail · image · thumbnailUrl · embed · depth · meta:<key> | 선택 | 스코프의 글/댓글 값을 안전 렌더한다(텍스트/이미지 src/배경). content 는 contentType=markdown 만 안전 마크다운(escape-first) 렌더, 그 외 textContent. embed 는 https src 만. meta:<key> 는 게시판별 자유 메타. |
data-saeroon-empty | post-list/detail/comment-list · product-list/detail · wishlist-list 내부 빈상태 요소 | 유무 | 선택 | 목록이 비었거나 로드 실패 시 노출. data-keep-text 가 있으면 기본 문구를 덮어쓰지 않는다. |
data-saeroon-date-locale | post-list/comment-list (날짜 필드 스코프) | BCP-47 locale (기본 ko-KR) | 선택 | date/createdAt 필드 표기 locale. 없으면 ko-KR(기존 출력과 동일). |
data-saeroon-date-format | post-list/comment-list (날짜 필드 스코프) | long · (기본) | 선택 | long 이면 "YYYY년 M월 D일" 형식, 없으면 짧은 기본 형식. |
data-saeroon-item-class-cycle | post-list | 공백 구분 클래스 목록 | 선택 | 복제본마다 클래스를 순환 적용(예: bento grid-span). 가변 글 수에서도 항목별 크기/위치 디자인을 보존한다. |
data-saeroon-like | button | 유무 | 선택 | 좋아요 토글. 익명은 localStorage UUID 로 중복 방지. aria-pressed·is-liked 클래스 갱신, [data-saeroon-field="likeCount"] 숫자 갱신. |
<div data-saeroon-post-list data-board-id="00000000-0000-0000-0000-000000000000" data-page-size="10"></div>
<template data-saeroon-post-item><article><h3 data-saeroon-field="title"></h3></article></template>
<article data-saeroon-post-detail><h1 data-saeroon-field="title"></h1></article>
<div data-saeroon-post-body style="display:none"><div data-saeroon-field="content"></div></div>
<a data-saeroon-post-link href="/board/post/"><h3 data-saeroon-field="title"></h3></a>
<form data-saeroon-post-create data-board-id="00000000-0000-0000-0000-000000000000" data-visibility="OwnerOnly"><input name="title"><textarea name="content"></textarea></form>
<input type="file" data-saeroon-post-image multiple accept="image/*">
<div data-saeroon-post-actions hidden><button data-saeroon-post-delete>삭제</button></div>
<form data-saeroon-post-update><input name="title"><textarea name="content"></textarea></form>
<button data-saeroon-post-delete data-confirm="이 글을 삭제할까요?">삭제</button>
<h3 data-saeroon-field="title"></h3>
<p data-saeroon-empty>아직 글이 없습니다.</p>
<time data-saeroon-field="date" data-saeroon-date-locale="ko-KR"></time>
<time data-saeroon-field="date" data-saeroon-date-format="long"></time>
<div data-saeroon-post-list data-saeroon-item-class-cycle="b1 b2 b3"></div>
<button data-saeroon-like>좋아요 <b data-saeroon-field="likeCount">0</b></button>댓글
댓글 목록 · 작성 · 소유자 액션
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 |
|---|---|---|---|---|
data-saeroon-comment-list | 컨테이너 | 유무 | 선택 | 댓글 목록(디자인 보존 template 모드). post id = ?post= 또는 data-post-id. 삭제/수정 버튼의 이벤트 위임 루트이기도 하다. data-page-size 기본 50. |
data-saeroon-comment-item | <template> (comment-list 내부) | 유무 | 선택 | 댓글 1건마다 복제되는 슬롯. 대댓글(depth>0)은 복제본에 data-comment-depth 가 붙어 스타일 훅을 준다. |
data-saeroon-comment-create | form | 유무 | 선택 | 댓글 작성 폼. name="content"(필수)·name="authorName"(익명 허용 보드)·name="parentId"(대댓글). 성공 시 목록 + 댓글 수 갱신. |
data-saeroon-comment-actions | 컨테이너 (comment-item 내부) | 유무 (기본 hidden 권장) | 선택 — 소유자 액션 | 댓글 isMine === true 인 복제본만 hidden 제거. 어휘 요소 없는 복제본은 출력 무변화. |
data-saeroon-comment-edit | button (comment-list 내부) | 유무 | 선택 | 클릭 시 같은 댓글의 [data-saeroon-comment-edit-form] hidden 을 토글(수정 폼 열기/닫기). 이벤트 위임. |
data-saeroon-comment-edit-form | form 또는 래퍼 (comment-item 내부) | 유무 | 선택 | 댓글 수정 폼. 소유자면 textarea[name="content"] 에 원문이 프리필된다. submit 시 updateComment. |
data-saeroon-comment-delete | button (comment-list 내부) | 유무 | 선택 | confirm(data-confirm 기본 "이 댓글을 삭제할까요?") 후 deleteComment. 성공 시 목록 갱신. 이벤트 위임. |
<div data-saeroon-comment-list><template data-saeroon-comment-item>…</template></div>
<template data-saeroon-comment-item><b data-saeroon-field="authorName"></b><p data-saeroon-field="content"></p></template>
<form data-saeroon-comment-create><textarea name="content"></textarea></form>
<span data-saeroon-comment-actions hidden><button data-saeroon-comment-edit>수정</button></span>
<button data-saeroon-comment-edit>수정</button>
<form data-saeroon-comment-edit-form hidden><textarea name="content"></textarea></form>
<button data-saeroon-comment-delete data-confirm="이 댓글을 삭제할까요?">삭제</button>쇼핑
진열 · 담기 · 배송비 · 주문조회 · 반품 · 위시리스트 · 동의
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data-saeroon-shop | 아무 요소 | 유무 | 선택 — 쇼핑 SDK inject 트리거 | cli deploy 가 이 마커(또는 아래 쇼핑 기능 속성 중 하나)를 보면 @saeroon/shop-sdk 로더를 <head>에 자동 inject 한다. 런타임 바인더가 읽는 마커는 아니다(주입 트리거 전용). MCP 배포는 아직 shop·add-to-cart·cart-count 3종만 보므로 <body data-saeroon-shop> 을 권장. | |||||||||||||||||||
data-saeroon-add-to-cart | button | 유무 (data-product-id 또는 data-product-slug 동반 의무) | 조건부 — 담기 버튼에 필수 | 클릭 시 서버 카트에 담는다(수량 = data-quantity 또는 data-quantity-from, 기본 1 · 변형 = data-variant-id 또는 data-variant-from). 문서 위임이라 진열 복제본 안 버튼도 동작. 진행 중 disabled+aria-busy. 성공 시 data-toast 메시지·data-redirect 이동. | |||||||||||||||||||
data-saeroon-cart-count | 요소(배지) | 유무 | 선택 | 장바구니 총 수량 배지. 초기값 + saeroon:cart-change 이벤트마다 textContent 갱신. | |||||||||||||||||||
data-saeroon-shop-error | 요소 | 유무 (내용은 SDK 가 씀) | 선택 | 담기·진열·찜·주소검색 실패 시 오류 메시지 대상. 요소가 없으면 saeroon:toast 이벤트로 대체 표면화. | |||||||||||||||||||
data-saeroon-product-list | 컨테이너 | 유무 (data-page-size · data-category-id · data-detail-base 선택) | 선택 — 상품 진열 | 공개 상품 목록을 불러와 안의 <template data-product> 를 상품마다 복제한다(없으면 generic 카드). 복제본의 [data-product-field] 를 채우고, [data-product-link] 에 상세 링크(?product=<slug>)를 붙이며, 상품이 지정되지 않은 [data-saeroon-add-to-cart] 에 data-product-id 를 넣는다. 비었거나 실패하면 [data-saeroon-empty] 노출. 60초 캐시. | |||||||||||||||||||
data-saeroon-product-detail | 컨테이너 | 유무 (data-product-slug 또는 URL ?product=) | 선택 — 상품 상세 | 상품 하나를 불러와 안의 [data-product-field] 를 채운다. [data-product-images] 갤러리, <select data-product-variants> 변형 옵션을 렌더하고, 담기 버튼에 data-product-id · data-variant-from 을 자동 배선한다. 품절이면 담기 버튼 disabled. | |||||||||||||||||||
data-saeroon-address-search | button | 유무 (data-zip-target · data-address-target · data-detail-target · data-embed 선택) | 선택 — 우편번호 검색 | 클릭 시 Kakao 우편번호 검색(키 불필요)을 팝업(또는 data-embed 요소에 임베드)으로 열고, 완료 시 우편번호·도로명주소를 지정 input 에 채운 뒤 input/change 이벤트와 saeroon:address-selected 를 발행한다(배송비 재계산 트리거). 우편번호가 비면 권역 추가배송비가 0 이 된다. | |||||||||||||||||||
data-saeroon-shipping-cost | 요소 | 유무 (data-zip-from · data-shipping-field 선택) | 선택 — 배송비 미리보기 | 카트 소계 + 우편번호(data-zip-from 선택자, 기본 input[name=shippingPostalCode])로 calculate-shipping 을 불러 배송비를 표시한다. 무료면 "무료". data-shipping-field 로 baseCost · zoneSurcharge · matchedZoneName · isFreeShipping 세부 항목 선택. 권역이 맞으면 data-zone 부착. 카트 변경·우편번호 입력·주소 선택마다 재계산. | |||||||||||||||||||
data-saeroon-order-total | 요소 | 유무 | 선택 | 소계 + 배송비 합계를 표시한다(안내용 — 결제 금액은 서버가 다시 계산). 배송비 슬롯과 같은 트리거로 갱신. | |||||||||||||||||||
data-saeroon-cart-subtotal | 요소 | 유무 | 선택 | 카트 소계(상품 금액 합)를 표시한다. saeroon:cart-change 마다 갱신. | |||||||||||||||||||
data-saeroon-order-lookup | form | 유무 (name=orderNumber · name=phone 필드 의무) | 선택 — 비회원 주문조회 | 제출 시 주문번호 + 주문 시 전화번호로 orders/lookup 을 불러 [data-saeroon-order-result] 를 채우고, 페이지에 [data-saeroon-order-tracking]·[data-saeroon-order-returns] 가 있으면 추적(X-Order-Phone)·반품 목록도 이어서 조회한다. 실패·400 은 [data-saeroon-order-error] 에 사용자 문구. | |||||||||||||||||||
data-saeroon-order-result | 컨테이너 (기본 hidden 권장) | 유무 | 선택 | 조회 성공 시 hidden 을 풀고 안의 [data-order-field=orderNumber\ | status\ | statusLabel\ | total\ | subtotal\ | shippingCost\ | discountAmount\ | shippingName\ | shippingPhone\ | shippingAddress\ | shippingMemo\ | createdAt\ | paidAt\ | shippedAt\ | deliveredAt\ | trackingNumber\ | carrier\ | paymentMethodType\ | virtualAccount*\ | itemCount] 를 채운다. data-order-status 부착. 결제된 주문만 [data-saeroon-return-open] 노출. |
data-saeroon-order-error | 요소 | 유무 (내용은 SDK 가 씀) | 선택 | 주문조회·추적·반품의 오류 문구 대상(폼 안 우선, 없으면 문서). 없으면 saeroon:toast 로 대체. | |||||||||||||||||||
data-saeroon-order-items | 컨테이너 (order-result 안) | 유무 | 선택 | 주문 품목을 <template data-order-item> 으로 복제해 [data-order-item-field=productName\ | quantity\ | unitPrice\ | totalPrice\ | optionSnapshot\ | variantSku\ | refundedQuantity] 를 채운다. 복제본에 data-order-item-id 부착. | |||||||||||||
data-saeroon-order-tracking | 컨테이너 (기본 hidden 권장) | 유무 | 선택 — 배송 추적 | 조회 뒤 X-Order-Phone 자격으로 tracking 을 불러 [data-tracking-field=carrier\ | trackingNumber\ | currentStatus\ | trackingUrl] 을 채우고 [data-tracking-link] 에 택배사 딥링크 href, [data-tracking-events] 에 <template data-tracking-event> 복제(time\ | status\ | location\ | description). 전화번호 누락 400 등 오류는 currentStatus 와 order-error 에 표시. | |||||||||||||
data-saeroon-order-returns | 컨테이너 | 유무 | 선택 | 이 주문의 반품·교환 신청 목록을 <template data-return-row> 로 복제해 [data-return-field=returnNumber\ | type\ | typeLabel\ | status\ | statusLabel\ | reason\ | requestedAt\ | refundAmount\ | rejectionReason] 를 채운다. 0건이면 hidden. | |||||||||||
data-saeroon-return-open | button | 유무 (data-target 선택) | 선택 | 클릭 시 [data-saeroon-return-form](또는 data-target) 의 hidden 을 풀고 조회한 주문 품목을 반품 폼에 렌더한다. 결제 전·취소·환불 주문에서는 SDK 가 숨긴다. | |||||||||||||||||||
data-saeroon-return-form | form (기본 hidden 권장) | 유무 (name=type[Return\ | Exchange] · name=reason 필드) | 선택 — 반품·교환 신청 | 제출 시 선택 품목(orderItemId · quantity)과 사유·유형을 조회 세션의 전화번호와 함께 POST orders/{n}/returns 로 보낸다. 품목 미선택·사유 없음은 네트워크 없이 order-error. 성공 시 [data-saeroon-return-result] 에 접수번호 + saeroon:return-created. | ||||||||||||||||||
data-saeroon-return-items | 컨테이너 (return-form 안) | 유무 | 선택 | 조회한 주문의 반품 가능 품목(주문 수량 − 환불 수량 > 0)을 체크박스(name=orderItemId) + 수량(name=quantity, 상한 자동)으로 렌더한다. <template data-return-item> 이 있으면 그 마크업을 복제([data-return-field=productName\ | quantity\ | unitPrice]). | |||||||||||||||||
data-saeroon-return-result | 요소 | 유무 (내용은 SDK 가 씀) | 선택 | 반품·교환 신청 성공 문구(접수번호) 대상. 없으면 saeroon:toast. | |||||||||||||||||||
data-saeroon-wishlist-toggle | button | 유무 (data-product-id 동반 의무 — 진열 복제본 안에서는 자동) | 선택 — 찜 | 클릭 시 찜 추가/해제를 토글하고 aria-pressed · data-saeroon-wishlisted="true\ | false" 를 갱신한다. 부트 시 목록 1회 조회로 상태를 칠하고(토글마다 check 호출 0) 변경 뒤 재조회. 세션 기반(로그인 병합 없음). | ||||||||||||||||||
data-saeroon-wishlist-count | 요소(배지) | 유무 | 선택 | 찜 개수 배지. saeroon:wishlist-change 마다 갱신. | |||||||||||||||||||
data-saeroon-wishlist-list | 컨테이너 | 유무 (data-detail-base 선택) | 선택 | 찜 목록을 <template data-wishlist-item> 으로 복제해 [data-wishlist-field=productName\ | price\ | thumbnail\ | productId\ | inStock\ | addedAt] 를 채운다. 복제본 안 토글·담기 버튼에 data-product-id 자동. 비었으면 [data-saeroon-empty]. | ||||||||||||||
data-saeroon-checkout-consents | 컨테이너 | 유무 (data-consent-types 선택 — 기본 terms,privacy,marketing) | 선택 — 체크아웃 동의 | 비어 있으면 동의 체크박스(input[data-consent-type], terms·privacy 는 required)를 렌더한다. saeroonShop.checkout() 이 request.consents 없이 불리면 문서의 [data-consent-type] 을 자동 수집해 CheckoutRequest.consents 로 보내고, required 미체크가 있으면 주문을 만들지 않는다. |
<body data-saeroon-shop>
<button data-saeroon-add-to-cart data-product-id="{id}" data-quantity="1">담기</button>
<span data-saeroon-cart-count>0</span>
<div data-saeroon-shop-error></div>
<section data-saeroon-product-list data-page-size="12"><template data-product><article><h3 data-product-field="name"></h3><p data-product-field="price"></p><button data-saeroon-add-to-cart>담기</button></article></template></section>
<article data-saeroon-product-detail data-product-slug="rose"><h1 data-product-field="name"></h1><select data-product-variants></select><button data-saeroon-add-to-cart>담기</button></article>
<button type="button" data-saeroon-address-search data-zip-target="#zip" data-address-target="#addr" data-detail-target="#addr2">우편번호 찾기</button>
<span data-saeroon-shipping-cost data-zip-from="#zip"></span>
<span data-saeroon-order-total></span>
<span data-saeroon-cart-subtotal></span>
<form data-saeroon-order-lookup><input name="orderNumber"><input name="phone"><button>조회</button><p data-saeroon-order-error hidden></p></form>
<section data-saeroon-order-result hidden><span data-order-field="statusLabel"></span></section>
<p data-saeroon-order-error hidden></p>
<ul data-saeroon-order-items><template data-order-item><li><span data-order-item-field="productName"></span></li></template></ul>
<div data-saeroon-order-tracking hidden><a data-tracking-link target="_blank">배송조회</a><ol data-tracking-events><template data-tracking-event><li><span data-tracking-field="status"></span></li></template></ol></div>
<ul data-saeroon-order-returns hidden><template data-return-row><li><span data-return-field="statusLabel"></span></li></template></ul>
<button type="button" data-saeroon-return-open>반품·교환 신청</button>
<form data-saeroon-return-form hidden><select name="type"><option value="Return">반품</option><option value="Exchange">교환</option></select><textarea name="reason"></textarea><div data-saeroon-return-items></div><button>신청</button></form>
<div data-saeroon-return-items></div>
<p data-saeroon-return-result hidden></p>
<button data-saeroon-wishlist-toggle data-product-id="{id}">♡</button>
<span data-saeroon-wishlist-count>0</span>
<ul data-saeroon-wishlist-list><template data-wishlist-item><li><span data-wishlist-field="productName"></span><button data-saeroon-wishlist-toggle>삭제</button></li></template></ul>
<div data-saeroon-checkout-consents></div>예약
data-saeroon-booking (슬롯 예약 · Toss 결제)
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 | ||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data-saeroon-booking | 예약 위젯 루트 컨테이너 | data-mode="appointment"(기본·회차 슬롯) \ | "stay"(숙박 날짜범위) \ | "stay-manage"(숙박 조회/취소) · data-service="<id>"(appointment 단일서비스 락) · data-room-type="<id\ | slug>"(stay 단일룸 락) · data-toss-client-key="<pk>"(생략 시 플랫폼 client-config 런타임 조달) | 선택 — booking SDK inject 트리거 + 위젯 루트 | cli deploy 가 이 마커를 보면 web-sdk 로더 + data-site-slug(공개 booking/stay API=slug 스코프)를 주입한다. [appointment] 바인더가 루트 안에서 명명 영역을 채운다: [data-booking-services]+<template data-booking-service>([data-booking-field=name\ | price\ | description\ | duration]) → [data-booking-cal-grid]/[data-booking-cal-prev\ | next]/[data-booking-cal-title] 월달력 → [data-booking-slots]+<template data-booking-slot> → formdata-booking-form → Toss v2 → [data-booking-result]+[data-booking-result-status\ | number\ | message]. 오류=[data-booking-error]. 익명(guest-token)·서버 결제 확정 포함. [stay] 반열림 [체크인,체크아웃) 날짜범위·룸타입 재고·박별 합산·전액/보증금: [data-stay-rooms]+<template data-stay-room>([data-stay-field=name\ | description\ | rate\ | capacity\ | min-stay]) → [data-stay-cal-grid]/[data-stay-cal-prev\ | next]/[data-stay-cal-title] 범위달력(셀 is-open/is-off/is-ci/is-co/is-in-range) → <select data-stay-guests> → [data-stay-quote]([data-stay-quote-rows]+<template data-stay-night>([data-stay-field=date\ | rate\ | label])·[data-stay-quote-room-total\ | extra-total\ | addons-total\ | total\ | paynow\ | remain])·[data-stay-mode-toggle](보증금 허용 시 바인더 렌더) → formdata-stay-form → hold(TTL 재고 점유) → Toss v2 → [data-stay-result]+[data-stay-result-status\ | number\ | message]. 선택 표시=[data-stay-selected-room\ | range]·오류=[data-stay-error]. [stay-manage] 예약 조회/취소(?bn=&gid= 또는 예약 브라우저 localStorage 복원): [data-stay-manage-status\ | number\ | range\ | guests\ | total\ | paid\ | refund\ | message] → [data-stay-cancel] 클릭 시 취소정책 스냅샷 환불 미리보기 [data-stay-cancel-preview]([data-stay-cancel-refund\ | fee\ | rate\ | reason]) → [data-stay-cancel-confirm]. 조회/취소 토큰(gid)은 URL 미노출(localStorage) — 예약한 브라우저에서만 자동 복원. |
<div data-saeroon-booking data-mode="stay">…</div> / <div data-saeroon-booking data-mode="stay-manage">…</div>폼 자동 연결
data-saeroon-form (opt-in)
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 |
|---|---|---|---|---|
data-saeroon-form | <form> | form slug | 조건부 — 자동 연결할 폼에 필수(opt-in) | cli deploy 가 이 폼을 감지 → 필드 자동 추출 → saeroon-api 폼 upsert → HTML 변환(속성 제거·id/action/method 설정·Turnstile 위젯·submit JS 삽입). 값이 곧 saeroon-api 폼 slug. |
data-saeroon-name | <form> | 폼 이름 | 선택 | form 의 name 속성이 없을 때 폼 이름(관리자 UI 표기)으로 쓰인다. |
data-saeroon-include | hidden input (data-saeroon-form 내부) | "true" | 선택 | hidden 입력은 기본 필드 추출에서 제외된다. "true" 를 박으면 명시적으로 포함한다. |
<form data-saeroon-form="contact"><input name="email"></form>
<form data-saeroon-form="contact" data-saeroon-name="문의하기"></form>
<input type="hidden" name="source" value="landing" data-saeroon-include="true">카탈로그 / 보유
도감·배지처럼 이름 붙은 목록과, 회원이 그중 무엇을 가졌는지의 기록입니다. 목록을 보여 주는 것은 공개 읽기라 로그인이 필요 없고, 보유는 회원 세션으로만 돕니다.
정의(스키마·쓰기 정책)는 저자가 아니라 운영자가 CLI catalog apply 로 정합니다. 자세한 것은 Catalogs · Holdings 에 있습니다.
카탈로그 목록 · 보유 목록 · 보유 토글
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 | |
|---|---|---|---|---|---|
data-saeroon-catalog-list | 컨테이너 | 유무 (data-catalog 동반 의무) | 조건부 — 카탈로그 항목을 보여줄 컨테이너에 필수 | 카탈로그 항목 목록(은퇴분 제외·공개 읽기). 내부 <template> 를 항목마다 복제하고 그 안의 [data-saeroon-field] 를 채운다 — name·sortOrder 등 항목 필드, attr:<키> 는 항목 속성. template 이 없으면 아무것도 그리지 않는다(임의 DOM 을 만들어 디자인을 흐트러뜨리지 않는다). 비었으면 [data-saeroon-empty] 를 토글. | |
data-saeroon-holding-list | 컨테이너 | 유무 (data-catalog 동반 의무) | 조건부 — 회원 보유 목록 컨테이너에 필수 | 로그인한 회원이 그 카탈로그에서 보유한 항목. 렌더 방식은 catalog-list 와 같고 필드는 itemName·quantity·isRetired 등이다. 비로그인이면 요청을 보내지 않고 안내 문구만 남긴다(401 왕복·콘솔 노이즈 회피). 은퇴한 항목의 보유도 그대로 나오며 isRetired 로 구분한다. | |
data-saeroon-holding-toggle | 버튼 | 유무 (data-catalog · data-item-id 동반 의무) | 조건부 — 보유를 켜고 끄는 버튼에 필수 | 클릭하면 그 항목의 보유를 켜거나 끈다. 🔴 저장 API(PUT /holdings/me)가 replace-all 이라 바인더는 현재 보유 전체를 먼저 읽어 한 항목만 더하거나 뺀 목록을 저장한다 — 직접 구현할 때 이 단계를 건너뛰면 클릭 한 번에 나머지 보유가 전부 지워진다. 처리 후 data-saeroon-held="true\ | false" 를 남기고 saeroon:holding-changed 이벤트를 올린다. |
<div data-saeroon-catalog-list data-catalog="flowers"><template><li data-saeroon-field="name"></li></template></div>
<div data-saeroon-holding-list data-catalog="flowers"><template><li data-saeroon-field="itemName"></li></template></div>
<button data-saeroon-holding-toggle data-catalog="flowers" data-item-id="<itemId>">보유</button>그룹
회원이 모임을 만들고 가입하는 구조입니다. 전부 회원 세션으로 돌며, 규칙(정책·직위)은 운영자가 CLI group apply 로 미리 정해 둡니다 — 저자는 그 위에 화면만 얹습니다. 자세한 것은 Groups 에 있습니다.
그룹 목록 · 개설 · 가입 · 명부 · 표식
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 |
|---|---|---|---|---|
data-saeroon-group-list | 컨테이너 | 유무 (data-policy 동반 의무) | 조건부 — 그룹 목록 컨테이너에 필수 | 그 정책 아래 개설된 그룹 목록(공개 읽기). 내부 <template> 복제 + [data-saeroon-field] 채움 — name·description·memberCount 등. |
data-saeroon-group-create | <form> | 유무 (data-policy 동반 의무) | 조건부 — 그룹 개설 폼에 필수 | 그룹을 개설한다. 폼 필드 name(필수)·description·roleKey 를 읽는다. 정책의 allowMemberCreatedGroups 가 꺼져 있으면 서버가 403 으로 막는다. 성공 시 폼을 비우고 saeroon:group-created 이벤트를 올린다. |
data-saeroon-group-apply | 버튼 | 유무 (data-group-id 동반 의무) | 조건부 — 가입 신청 버튼에 필수 | 그 그룹에 가입을 신청한다. 승인제 정책이면 신청으로 남고, 아니면 서버가 즉시 가입 처리한다. data-invite-code·data-role-key 를 함께 읽는다. 처리 후 saeroon:group-applied 이벤트를 올린다. |
data-saeroon-group-members | 컨테이너 | 유무 (data-group-id 동반 의무) | 조건부 — 그룹원 명부 컨테이너에 필수 | 그룹원 명부를 서열 내림차순으로 그린다. 필드는 displayName·roleKey·roleLabel·rankLevel·isLeadership 등. |
data-saeroon-group-mark | 버튼 | 유무 (data-group-id · data-member-id 동반 의무) | 조건부 — 조율 표식 버튼에 필수 | 그룹 안에서 다른 회원의 항목에 표식을 남긴다(담당 배정·확인 완료 등). data-item-id·data-mark-key 를 함께 읽는다. 그 회원의 직위에 marks.manage 권한이 없으면 서버가 403 으로 막는다 — 버튼을 숨기는 것은 편의일 뿐 판정은 서버가 한다. 처리 후 saeroon:group-marked 이벤트를 올린다. |
<div data-saeroon-group-list data-policy="guilds"><template><li data-saeroon-field="name"></li></template></div>
<form data-saeroon-group-create data-policy="guilds"><input name="name" required></form>
<button data-saeroon-group-apply data-group-id="<groupId>">가입 신청</button>
<div data-saeroon-group-members data-group-id="<groupId>"><template><li data-saeroon-field="displayName"></li></template></div>
<button data-saeroon-group-mark data-group-id="<groupId>" data-member-id="<memberId>" data-item-id="<itemId>">표식</button>컴패니언 속성
data-saeroon-* 는 아니지만 위 기능과 함께 쓰는 일반 data-* 속성입니다.
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 |
|---|---|---|---|---|
data-saeroon-ct | data-saeroon-editable 요소 | ContentType 이름 | 필수 — 편집 영역 네 짝의 하나 | 그 편집 값이 저장될 ContentType. 정적 사이트 인라인 편집은 예약 CT(page/site)를 쓴다. |
data-saeroon-entry | data-saeroon-editable 요소 | 엔트리 키 | 필수 — 편집 영역 네 짝의 하나 | 그 편집 값이 저장될 엔트리. 보통 페이지 키(home·about 등)를 쓴다. |
data-catalog | catalog-list · holding-list · holding-toggle | 카탈로그 key | 필수 — 없으면 해당 요소는 no-op | 어느 카탈로그인지 지정. 운영자가 CLI catalog apply 로 만든 key 를 그대로 쓴다. |
data-policy | group-list · group-create | 그룹 정책 key | 필수 — 없으면 해당 요소는 no-op | 어느 그룹 정책인지 지정. 운영자가 CLI group apply 로 만든 key 를 그대로 쓴다. |
data-group-id | group-apply · group-members · group-mark | 그룹 id (GUID) | 필수 — 없으면 해당 요소는 no-op | 대상 그룹. group-list 가 그린 복제본에서 읽거나 URL 쿼리로 넘긴 값을 쓴다. |
data-item-id | holding-toggle · group-mark | 카탈로그 항목 id (GUID) | 조건부 — holding-toggle 은 필수, group-mark 는 선택 | 대상 항목. catalog-list 가 그린 복제본에 이 속성이 자동으로 붙는다. |
data-member-id | group-mark | 대상 회원 id (GUID) | 필수 — 없으면 해당 요소는 no-op | 표식을 받을 회원. group-members 명부에서 읽는다(자기 자신이 아니라 남에게 찍는 표식이다). |
data-mark-key | group-mark | 표식 종류 문자열 | 선택 | 표식의 종류를 사이트가 정하는 어휘로 남긴다(담당 배정·확인 완료 등). 서버는 값을 해석하지 않고 저장한다. |
data-invite-code | group-apply | 초대 코드 | 조건부 — 정책의 requireInviteWhileForming 이 켜져 있으면 결성 중 가입에 필요 | 초대 코드를 실어 가입을 신청한다. |
data-role-key | group-apply | 직위 key | 선택 | 희망 직위를 지정해 신청한다. 미지정 시 정책의 isDefault 직위를 받는다. |
data-board-id | post-list · post-create | 게시판 GUID | 필수 — slug 가 아니라 GUID 다 | 어느 게시판인지 지정. 없으면 해당 요소는 console.warn 후 no-op. slug 를 넣으면 공개 API 경로 제약(boards/{boardId:guid})에 걸려 404 — 화면이 조용히 빈다. GUID = saeroon board create --site <siteId> --slug <slug> 출력의 boardId. |
data-page-size | post-list(기본 10) · comment-list(기본 50) · product-list(기본 20) | 정수 | 선택 | 한 번에 불러올 글/댓글 수. |
data-visibility | post-create | Public · MembersOnly · OwnerOnly | 선택 | 글 공개 범위. OwnerOnly = 작성자/운영자만 조회(비공개 문의 등). |
data-detail-base | post-list · product-list · wishlist-list | URL 경로 base | 선택 | 목록→상세 링크 base. data-saeroon-post-link 의 href 접두로 쓰인다. |
data-post-id | post-detail · post-actions · post-update · post-delete | 글 id | 선택 — 없으면 URL ?post= 사용 | post id 를 명시. 우선순위: data-post-id > ?post= 쿼리. |
data-confirm | auth=withdraw · post-delete · comment-delete | 확인 메시지 | 선택 — 부재 시 기본 문구 | 삭제/탈퇴 전 confirm() 대화상자 문구. |
data-redirect | auth form/logout/withdraw · post-delete · add-to-cart | URL 경로 | 선택 | 동작 성공 후 이동할 경로(logout/withdraw 는 기본 "/"). |
data-return | auth=kakao/naver/google/apple (소셜) | 상대 또는 절대 URL | 선택 | 소셜 로그인 후 돌아올 경로. 현재 위치 기준 절대 https URL 로 만들어 전달한다. |
data-keep-text | [data-saeroon-empty] | 유무 | 선택 | 빈 상태 요소의 기본 문구를 SDK 가 덮어쓰지 않게 보존한다. |
data-product-id | add-to-cart | 상품 GUID | 필수(둘 중 하나) | 담을 상품(실 id). |
data-product-slug | add-to-cart | 상품 slug | 선택(대안) — slug→id 조회 | slug 만 아는 상세 페이지용. 서버에서 상품을 조회해 실 id 로 담는다. |
data-quantity | add-to-cart | 정수(>0) | 선택 — 기본 1 | 담을 수량(직접 지정). |
data-quantity-from | add-to-cart | CSS 선택자 | 선택 | 수량을 읽을 input 선택자. data-quantity 없을 때 사용. |
data-toast | add-to-cart | 성공 문구 | 선택 | 담기 성공 시 saeroon:toast 이벤트로 표면화할 메시지. |
data-variant-id | add-to-cart | 변형(옵션 조합) GUID | 선택 | 옵션 상품의 변형을 직접 지정해 담는다. |
data-variant-from | add-to-cart | CSS 선택자(<select>) | 선택 — 상세 바인더가 자동 부착 | 변형 id 를 읽을 select 선택자. 값이 비고 select 가 보이면 "옵션을 선택해 주세요" 로 막는다(담기 요청 0). |
data-product | <template> (product-list 안) | 유무 | 선택 — 디자인 보존 모드 | 상품 1건마다 복제되는 슬롯. 없으면 generic 카드. |
data-product-field | product-list 복제본 · product-detail 안 요소 | name · price · compareAtPrice · discountPercentage · description · thumbnail · image · slug · stock · isAvailable · category | 선택 | 상품 값을 안전 렌더한다(텍스트/이미지 src·배경). price 는 "22,800원" 형식, compareAtPrice·discountPercentage 는 해당 없으면 숨김, isAvailable 은 "구매 가능"/"품절" + data-available. |
data-product-link | product-list 복제본 안 <a> | 유무 | 선택 | href 를 상세 링크로 바꾼다 — data-detail-base 가 있으면 "{base}?product=<slug>", 없으면 기존 href 에 ?product= 부착. |
data-product-slug | product-detail · add-to-cart | 상품 slug | 조건부 — 상세는 URL ?product= 로 대체 가능 | 상세 바인더가 불러올 상품. 담기 버튼에서는 slug→id 조회 후 담는다. |
data-product-images | product-detail 안 컨테이너 | 유무 (<template data-product-image> 선택) | 선택 | 상품 이미지(썸네일 + imageUrls)마다 템플릿을 복제해 [data-product-field=image] 에 src 를 채운다. 템플릿 없으면 <img>. |
data-product-image | <template> (product-images 안) | 유무 | 선택 | 이미지 1장마다 복제되는 슬롯. |
data-product-variants | product-detail 안 <select> | 유무 | 선택 — 옵션 상품이면 필수 | 변형 옵션을 <option value=variantId>(옵션 조합 + 가격차 · 품절 disabled)로 채운다. 변형이 없으면 hidden. 담기 버튼의 data-variant-from 을 여기로 자동 연결. |
data-category-id | product-list | 카테고리 GUID | 선택 | 목록을 카테고리로 거른다. |
data-zip-target | address-search | CSS 선택자(input) | 선택 | 우편번호(zonecode)를 채울 input. |
data-address-target | address-search | CSS 선택자(input) | 선택 | 도로명주소(건물명 괄호)를 채울 input. |
data-detail-target | address-search | CSS 선택자(input) | 선택 | 주소 선택 뒤 포커스를 옮길 상세주소 input. |
data-embed | address-search | CSS 선택자(컨테이너) | 선택 — 부재 시 팝업 | 검색창을 팝업 대신 이 요소에 임베드한다(완료 시 자동 닫힘). |
data-zip-from | shipping-cost | CSS 선택자(input) | 선택 — 부재 시 input[name=shippingPostalCode] | 배송비 계산에 쓸 우편번호 input. |
data-shipping-field | shipping-cost | totalShippingCost(기본) · baseCost · zoneSurcharge · matchedZoneName · isFreeShipping | 선택 | 배송비 슬롯이 보여줄 세부 항목. |
data-order-field | order-result 안 요소 | orderNumber · status · statusLabel · total · subtotal · shippingCost · discountAmount · shippingName · shippingPhone · shippingAddress · shippingPostalCode · shippingMemo · createdAt · paidAt · shippedAt · deliveredAt · trackingNumber · carrier · paymentMethodType · virtualAccountNumber · virtualAccountBank · virtualAccountHolder · virtualAccountDueDate · itemCount | 선택 | 조회한 주문 값을 렌더한다. virtualAccount* 는 가상계좌 주문이 아니면 숨김. |
data-order-item | <template> (order-items 안) | 유무 | 선택 | 주문 품목 1건마다 복제되는 슬롯. |
data-order-item-field | order-item 복제본 안 요소 | productName · quantity · unitPrice · totalPrice · optionSnapshot · variantSku · refundedQuantity | 선택 | 품목 값 렌더. |
data-tracking-field | order-tracking 안 요소 | carrier · trackingNumber · currentStatus · trackingUrl (이벤트 복제본: time · status · location · description) | 선택 | 추적 값 렌더. currentStatus 는 오류 시 오류 문구가 들어간다. |
data-tracking-link | order-tracking 안 <a> | 유무 | 선택 | 택배사 조회 딥링크 href. 추적 정보가 없으면 hidden. |
data-tracking-events | order-tracking 안 컨테이너 | 유무 (<template data-tracking-event> 선택) | 선택 | 배송 이벤트마다 템플릿을 복제한다. |
data-tracking-event | <template> (tracking-events 안) | 유무 | 선택 | 배송 이벤트 1건 슬롯. |
data-return-row | <template> (order-returns 안) | 유무 | 선택 | 기존 반품·교환 신청 1건 슬롯. |
data-return-field | return-row · return-item 복제본 안 요소 | returnNumber · type · typeLabel · status · statusLabel · reason · requestedAt · refundAmount · rejectionReason (반품 품목: productName · quantity · unitPrice) | 선택 | 반품 값 렌더. |
data-return-item | <template> (return-items 안) | 유무 (input[name=orderItemId] 체크박스 · input[name=quantity] 포함 권장) | 선택 | 반품 가능 품목 1건 슬롯. 없으면 generic 라벨+체크박스. |
data-consent-type | checkout 동의 체크박스 input | terms · privacy · marketing · 임의 문자열 (required 로 필수 표시) | 선택 | 체크 상태가 CheckoutRequest.consents 로 서버에 기록된다. required 미체크면 checkout 이 주문을 만들지 않는다. |
data-consent-types | checkout-consents | 쉼표 구분 유형 목록 | 선택 — 기본 terms,privacy,marketing | 자동 렌더할 동의 유형을 고른다. |
data-wishlist-item | <template> (wishlist-list 안) | 유무 | 선택 | 찜 1건 슬롯. |
data-wishlist-field | wishlist-item 복제본 안 요소 | productName · price · thumbnail · productId · inStock · addedAt | 선택 | 찜 값 렌더. |
data-wishlist-link | wishlist-item 복제본 안 <a> | 유무 | 선택 | wishlist-list 의 data-detail-base 가 있으면 "{base}?productId=<id>" 링크. |
내부 / 자동 관리 마커
아래 속성은 저자가 직접 쓰지 않습니다. SDK 런타임 또는 cli deploy 가 자동으로 부착·관리합니다. 참고용으로만 기재합니다.
| 속성 | 적용 요소 | 값·모드 | 필수 | 동작 | |
|---|---|---|---|---|---|
data-saeroon-auth-hint | <html> (cli 가 <head> 인라인 리더로 삽입) | 유무 | 내부 — 저자 미작성 | 코어 로드 전 첫 페인트 동안 잘못된 data-saeroon-if 브랜치를 숨겨 로그인 카드 플래시를 막는 pre-paint cloak 짝. 인증 정합 후 <html>.saeroon-auth-ready 로 비활성화. | |
data-saeroon-post-rendered | post-item 복제본 | 유무 | 내부 — 런타임 마커 | 렌더된 글 복제본을 표시. 재렌더 시 이전 복제본만 교체(정적 마크업/템플릿 보존)하는 데 쓰인다. | |
data-saeroon-comment-rendered | comment-item 복제본 | 유무 | 내부 — 런타임 마커 | 렌더된 댓글 복제본 표시. 재렌더 시 이전 복제본만 교체. | |
data-saeroon-sdk-injected | 회원 SDK <script> (cli 삽입) | 유무 | 내부 — 멱등 마커 | cli deploy 가 회원 SDK 로더를 <head>에 1회만 넣도록 하는 멱등 표시. | |
data-saeroon-shop-injected | 쇼핑 SDK <script> (cli 삽입) | 유무 | 내부 — 멱등 마커 | cli deploy 가 쇼핑 SDK 로더를 <head>에 1회만 넣도록 하는 멱등 표시. | |
data-saeroon-turnstile | Turnstile 프록시 <iframe> (cli 삽입) | 유무 | 내부 — 저자 미작성 | form auto-attach 가 삽입하는 Cloudflare Turnstile 프록시 iframe 마커. 토큰을 hidden input 에 채운다. | |
data-saeroon-catalog-rendered | 카탈로그 항목 복제본 | 유무 | 내부 — 런타임 마커 | 렌더된 카탈로그 항목 복제본 표시. 재렌더 시 이전 복제본만 교체(정적 마크업/템플릿 보존). | |
data-saeroon-holding-rendered | 보유 항목 복제본 | 유무 | 내부 — 런타임 마커 | 렌더된 보유 복제본 표시. 토글 후 같은 카탈로그를 보는 목록만 다시 그릴 때 교체 대상이 된다. | |
data-saeroon-group-rendered | 그룹 목록 복제본 | 유무 | 내부 — 런타임 마커 | 렌더된 그룹 복제본 표시. 재렌더 시 이전 복제본만 교체. | |
data-saeroon-group-member-rendered | 그룹원 명부 복제본 | 유무 | 내부 — 런타임 마커 | 렌더된 그룹원 복제본 표시. 재렌더 시 이전 복제본만 교체. | |
data-saeroon-held | holding-toggle 버튼 | "true" \ | "false" | 내부 — 런타임 상태 | 토글 직후 그 항목의 보유 여부를 버튼에 남긴다. 사이트 CSS 가 이 값으로 눌린 모양을 표현할 수 있다. |
data-saeroon-busy | 요청 중인 버튼 | 유무 | 내부 — 런타임 상태 | 요청이 도는 동안 부착되고 끝나면 제거된다(버튼이면 disabled 도 함께). 중복 클릭 방지 + CSS 로딩 표시 훅. | |
data-saeroon-editing | <html> (편집 모드 진입 시) | 유무 | 내부 — 런타임 플래그 | 소유자가 ?saeroon-edit 로 편집 모드에 들어갔음을 표시. 오버레이 CSS 가 이 플래그로만 편집 UI 를 켠다. | |
data-saeroon-product-rendered | 상품 목록·갤러리 복제본 · 변형 option | 유무 | 내부 — 런타임 마커 | 렌더된 상품 복제본 표시. 재렌더 시 이전 복제본만 교체(템플릿 보존). | |
data-saeroon-order-rendered | 주문 품목·추적 이벤트·반품 행·반품 품목 복제본 | 유무 | 내부 — 런타임 마커 | 렌더된 주문 관련 복제본 표시. 재렌더 시 이전 복제본만 교체. | |
data-saeroon-wishlist-rendered | 찜 목록 복제본 | 유무 | 내부 — 런타임 마커 | 렌더된 찜 복제본 표시. 재렌더 시 이전 복제본만 교체. | |
data-saeroon-wishlisted | wishlist-toggle 버튼 | "true" \ | "false" | 내부 — 런타임 상태 | 토글 버튼의 현재 찜 여부. 사이트 CSS 가 이 값으로 눌린 모양을 표현한다(aria-pressed 와 함께). |
이벤트 (window)
| 이벤트 | 발생 | 소스 |
|---|---|---|
saeroon:cart-change | 카트 변경 시(담기/수정/삭제) — detail.cart | packages/shop-sdk/src/events.ts:7 |
saeroon:shop-ready | 쇼핑 SDK 준비 완료 — detail.shop (window.saeroonShop). provider 미지원이면 발행되지 않는다 | packages/shop-sdk/src/events.ts:8 |
saeroon:toast | 담기·찜·주소 성공/실패 토스트(document) — detail.message · detail.error | packages/shop-sdk/src/events.ts:9 |
saeroon:products-rendered | 상품 목록 렌더 완료 — detail.root · products · page · total | packages/shop-sdk/src/events.ts:10 |
saeroon:product-loaded | 상품 상세 로드 완료 — detail.root · product | packages/shop-sdk/src/events.ts:11 |
saeroon:shipping-change | 배송비 재계산 — detail = {subtotal, zipCode, shipping, total, error} | packages/shop-sdk/src/events.ts:12 |
saeroon:address-selected | 우편번호 검색 완료(document) — detail.address | packages/shop-sdk/src/events.ts:13 |
saeroon:order-loaded | 주문조회 성공 — detail.order | packages/shop-sdk/src/events.ts:14 |
saeroon:return-created | 반품·교환 신청 접수 — detail.return | packages/shop-sdk/src/events.ts:15 |
saeroon:wishlist-change | 찜 목록 변경 — detail.items | packages/shop-sdk/src/events.ts:16 |
saeroon:post-updated | 글 수정 성공(폼 닫기용) | packages/web-sdk/src/binders.ts:238 |
요약
새로온에 배포한 정적 사이트는 HTML 요소에 data-* 속성을 선언하는 것만으로 회원·게시판·댓글·쇼핑·폼이 붙습니다. cli deploy 가 관련 속성을 감지해 SDK 로더를 자동 주입합니다.
마크다운 원문/docs/attributes.md