블록 메이커

<style> h1 { color: red; font-size: 24px; } </style> <template> <h1>안녕 블록 메이커!</h1> <ul> <li>제목 색상: red</li> <li>제목 사이즈: 24px</li> </ul> <button>설명 보기</button> </template> <script> const container = bm.container; const context = bm.context; function clicked(e) { e.preventDefault(); if (e.target.matches('button')) { alert(`제목 색상은 red이고 사이즈는 24px 이에요!`); } } container.addEventListener('click', clicked, true); </script>

{ // 웹사이트에 삽입된 각 블록의 고유한 ID 에요. "id": "...", // 세팅 빌더를 통해 정의된 블록 설정이 property 내에 포함되어 있어요. "property": { "myHelloPhrase": "🖐🏻", "myColor": "blue", "myFontSize": 36, }, ... }

<style> h1 { color: {{property.myColor}}; font-size: {{property.myFontSize}}px; } </style> <template> <h1>{{property.myHelloPhrase}} 블록 메이커!</h1> <ul> <li>제목 색상: {{property.myColor}}</li> <li>제목 사이즈: {{property.myFontSize}}px</li> </ul> <button>설명 보기</button> </template> <script> const container = bm.container; const context = bm.context; function clicked(e) { e.preventDefault(); if (e.target.matches('button')) { const myColor = context.property.myColor; const myFontSize = context.property.myFontSize; alert(`제목 색상은 ${myColor}이고 사이즈는 ${myFontSize}px 이에요!`); } } container.addEventListener('click', clicked, true); </script>

var(--font-family-heading) /* 제목 폰트 */ var(--font-weight-heading) /* 제목 폰트 굵기 */ var(--font-family-body) /* 본문 폰트 */ var(--font-weight-body) /* 본문 폰트 굵기 */

<template> <h1>Hello Block Maker!</h1> <!-- Handlebars.js 문법으로 컨텍스트 객체 내 property 값에 접근 --> <p>{{property.myDescription}}</p> </template>

<!-- 블록 컨테이너(Block Container) 영역 --> <div> <!-- 템플릿의 HTML은 블록 컨테이너 안에 그려져요. --> <h1>Hello Block Maker!</h1> <p>블록 메이커에 대한 설명이에요.</p> </div>

<!-- Bad --> <script> bm.container.innerHTML = '<h1>안녕하세요!</h1>'; // 블록 컨테이너에 그려진 HTML 요소에 직접 DOM 이벤트를 바인딩 const h1 = bm.container.querySelector('h1'); h1.addEventListener('click', e => { e.preventDefault(); alert('<h1> 태그가 클릭되었어요.'); }); // 1초 뒤 <h1> 태그를 새로 생성 setTimeout(() => { bm.container.innerHTML = '<h1>😢클릭해도 창이 안떠요...</h1>'; }, 1000); </script> <!-- Good --> <script> bm.container.innerHTML = '<h1>안녕하세요!</h1>'; // 블록 컨테이너에 DOM 이벤트를 위임하고 분기 bm.container.addEventListener('click', e => { e.preventDefault(); if (e.target.matches('h1')) { alert('<h1> 태그가 클릭되었어요.'); } }, true); // 1초 뒤 <h1> 태그를 새로 생성 setTimeout(() => { bm.container.innerHTML = '<h1>☺️클릭하면 창이 떠요!</h1>'; }, 1000); </script>

<!-- Bad --> <script> bm.onContextChange = () => { bm.context.counter++; // bm.onContextChange 내에서 호출 bm.apply(); // bm.apply()에 의해 onContextChange()가 발생 }; </script> <!-- Good --> <script> bm.container.addEventListener('click', () => { bm.context.counter++; // bm.onContextChange() 외 다른 위치에서 사용 bm.apply(); }); bm.onContextChange = () => { console.log(bm.context.counter); }; </script>

<!-- <data> 태그를 활용해서 블록 밖의 데이터를 요청 --> <data value="$page" /> <data value="$cart" /> <data value="$customer"/> <style> ... </style> <template> {{#if (eq page.name "HOME")}} <h1>방문을 환영합니다!</h1> {{/if}} {{#if customer}} <h2>안녕하세요 {{customer.name.full}}님!</h2> {{else}} <h2>안녕하세요 방문자님!</h2> {{/if}} <p>장바구니에 {{cart.count}}개의 상품을 담으셨어요.</p> {{#if customer}} <button>로그아웃</button> {{/if}} </template> <script> const container = bm.container; const context = bm.context; bm.onContextChange = () => { // <data> 태그를 통해 가져온 데이터나 상태가 바뀌면 실행돼요. console.log(context.page); console.log(context.customer); console.log(context.cart); }; function clicked(e) { e.preventDefault(); if (e.target.matches('button')) { // 팁: 로그아웃 버튼을 누르면 로그아웃 처리! bm.do('logout'); } } container.addEventListener('click', clicked, true); </script>

{ "name": "HOME", // 페이지 구분자 "path": "/" // 페이지 패스(Path) }

{ // 로그인 고객 정보 (로그인하지 않은 경우 `null`) "id": "...", // 로그인 고객의 고유 ID "name": { "full": "김블록" // 로그인 고객의 성명 } }

{ "count": 1, // 담은 상품 수 "total": { "items": { "price": { "original": 40000, // 담은 상품 할인 전 총액 "sale": 32000 // 담은 상품 할인 후 총액 }, "discounted": 8000 // 담은 상품 할인 총액 } } }

{ // 상호/대표자 성명 "businessName": "식스샵", "representativeName": "김식스", // 사업자 등록번호/통신판매업 신고번호 "businessRegistrationNumber": "000-11-22222", "mailOrderSalesRegistrationNumber": "2025-서울강남-00000", // 전화번호/전자우편 주소(이메일 주소) "contactPhone": "02-1111-2222", "contactEmail": "help@sixshop.com", // 영업소 소재지 주소 "businessAddress": "서울특별시 강남구 테헤란로 000", "businessAddressDetail": "식스타워 6층", // 개인정보관리책임자 "privacyOfficerName": "김식스", // 호스팅 제공자 "hostingProvider": "식스샵", // 에스크로 제공자 "escrowProvider": { // 미사용 시 null "logoUrl": "https://storefront.sellerhub.com/assets/toss-payments-logo-black.png", "infoUrl": "https://consumer.tosspayments.com/escrow/detail?mertid=" }, // 이용약관/개인정보처리방침 "termsOfServiceUrl": "/terms/policy", "privacyPolicyUrl": "/terms/privacy", // 사업자 정보 확인 링크 "businessInfoUrl": "https://www.ftc.go.kr/bizCommPop.do?wrkr_no=0001122222" }

{ "phone": "02-1111-2222", "email": "help@sixshop.com", "instagram": "https://www.instagram.com/sixshop_official", "kakao": "http://pf.kakao.com/_xiGfwC", "blog": "https://blog.naver.com/6solution", "youtube": "https://www.youtube.com/channel/UCPsgg6_D_4GLO18M5_TluGg", "facebook": "https://www.facebook.com/sixshop.page" }

<style> h1 { /* 사용자가 블록의 설정 값(property.myColor)을 에디터에서 변경하면 프리뷰에 자동 반영돼요. */ color: {{property.myColor}}; } </style> <template> <!-- 사용자가 블록의 설정 값(property.myHelloPhrase)을 에디터에서 변경하면 프리뷰에 자동 반영돼요. --> <h1>{{property.myHelloPhrase}} 블록 메이커!</h1> <p></p> </template> <script> const container = bm.container; const context = bm.context; const p = container.querySelector('p'); // 처음 한 번은 반영되지만, 사용자가 블록의 설정 값(property.myContents)을 에디터에서 변경해도 자동 반영되지 않아요. p.innerHTML = context.property.myContents; </script>

... <script> const container = bm.container; const context = bm.context; const p = container.querySelector('p'); // 최초 실행시 설정 값(property.myContents)을 반영 p.innerHTML = context.property.myContents; // 이후 사용자가 블록의 설정 값(property.myContents)을 변경한 경우 반영 처리 bm.onContextChange = () => { const p = container.querySelector('p'); p.innerHTML = context.property.myContents; }; </script>

<template> <h1>{{property.myText}}</h1> </template>

"myText": "여름 세일 기획전"

<template> <p>{{property.myTextarea}}</p> </template>

"myTextarea": "연말까지 30% 할인"

<template> {{{property.myRichText}}} </template>

"myRichText": "<p style=\"text-align: center;\">HTML을 포함한 "리치 텍스트"</p>"

"myRange": 6

<template> {{#if property.myCheckbox}} <p>체크되었어요</p> {{/if}} </template>

"myCheckbox": true

"myRadio": "center"

<template> <p>선택한 언어: {{property.mySelect}}</p> </template>

"mySelect": "한국어"

"myColor": "#FF660000"

<style> div { background-color: var(--color-background-100); border: 1px solid var(--color-border-100); } h3 { color: var(--color-accent-100); } p { color: var(--color-text-100); } </style> <template> <div> <h3>특별 혜택</h3> <p>첫 구매 시 10% 할인 쿠폰을 드려요</p> </div> </template>

/* 배경 색상 (100, 80, 60, 40, 0) */ --color-background-100 /* 텍스트 색상 (100, 90, 80, ..., 10) */ --color-text-100 /* 강조 색상 (100, 90, 80, ..., 10) */ --color-accent-100 /* 테두리 색상 */ --color-border-100

<template> <img src="{{property.myImage}}" alt="이미지"> </template>

"myImage": "<https://example.org/image.png>"

<template> <video src="{{property.myVideo}}" controls></video> </template>

"myVideo": "<https://example.org/video.mp4>"

<template> {{#each property.myList}} <div>{{myTitle}}</div> {{/each}} </template>

"myList": [ { "myTitle": "첫 번째 항목", ... }, { "myTitle": "두 번째 항목", ... } ]

<template> <a href="{{property.myLink.value}}">{{property.myLink.label}}</a> </template>

"myLink": { "id": null, // 리소스 ID "type": "url", // 링크 타입 (예: "url", "product", ...) "label": "라벨", // 표시 텍스트 "value": "<https://example.org>" // 실제 URL }

<template> {{#each property.menus}} <a href="{{link.value}}">{{name}}</a> {{#each childMenus}} <a href="{{link.value}}">- {{name}}</a> {{#each childMenus}} <a href="{{link.value}}">-- {{name}}</a> {{/each}} {{/each}} {{/each}} </template>

"menus": [ { "id": "1", // 메뉴 ID "name": "링크", // 메뉴 이름 "link": { "id": null, "type": "url", "label": "라벨", "value": "<https://example.org>" }, "shouldOpenInNewTab": false, // 새 탭에서 열기 여부 "childMenus": [...] // 하위 메뉴 (3단계까지 중첩 가능) } ]

<template> {{#each property.products.data}} <div>{{name}} - {{price.sale}}</div> {{/each}} <button>더 보기</button> </template> <script> bm.container.addEventListener('click', (event) => { event.preventDefault(); if (event.target.matches('button')) { const currentPage = bm.config('property:products.page'); bm.config('property:products.page', currentPage + 1); bm.apply(); } }); </script>

"products": { "data": [ { "id": "...", // 카탈로그 ID "product": { "id": "..." }, // 상품 ID "option": { "id": "..." }, // 옵션 ID (옵션: 사이즈, 색상 등) "variation": { "id": "..." }, // 옵션 선택지 ID (옵션 선택지: M, 빨강 등) "variant": { "id": "..." }, // 품목 ID (옵션 조합: M/빨강 등) "availability": "in-stock", // 재고 상태 (예: "in-stock", "out-of-stock", "temporarily-out-of-stock"). "in-stock"이 아니면 품절 상태 "isQuickAddable": false, // 바로 담기 가능 여부 "slug": "...", // 상품 슬러그 (상품 URL에 사용) "name": "상품 이름", // 상품 이름 "summary": "요약 설명", // 상품 요약 "labels": [ // 상품 라벨 목록 { "id": "...", // 라벨 ID "name": "인기 상품" // 라벨 이름 } ], "images": [ // 상품 이미지 목록 (현재는 항상 1개) { "url": "<https://example.org/image.png>" } ], "price": { // 가격 정보 "original": 50000, // 정가 "sale": 42500 // 판매가 }, "discounts": [ // 할인 목록 { "name": null, // 할인명 (있는 경우) "type": "percentage", // 할인 타입 (예: "percentage", "fixed") "discounted": 7500, // 할인 금액 "value": 15, // 할인값 (예: 15% 또는 7500원) "discountType": "default" // 할인 분류 } ], "shipping": { // 배송 정보 "methods": [ // 배송 방식 목록 { "id": "1", // 배송 방식 ID "name": "택배" // 배송 방식 이름 } ] }, "review": { // 리뷰 정보 "publicReviewAverageRating": 4.5, // 평균 평점 "publicReviewCount": 10 // 리뷰 개수 } } ] }

<template> {{#each property.categories.data}} <button data-category-id="{{id}}">{{name}}</button> {{/each}} {{#each property.categories.products.data}} <div>{{name}} - {{price.sale}}</div> {{/each}} </template> <script> function updateActiveButton() { const active = bm.config('property:categories.products.category'); const activeBtn = bm.container.querySelector(`[data-category-id="${active}"]`); if (activeBtn) activeBtn.classList.add('active'); } updateActiveButton(); bm.onContextChange = () => updateActiveButton(); bm.container.addEventListener('click', (event) => { if (event.target.matches('[data-category-id]')) { bm.config('property:categories.products.category', event.target.dataset.categoryId); bm.apply(); } }); </script>

"categories": { "data": [ // 선택된 카테고리 목록 { "id": "ABC123,DEF456", // "All" (전체) 필터: 콤마(,)로 연결된 선택 카테고리 ID "name": "All" }, { "id": "ABC123", // 카테고리 ID "name": "상의" }, { "id": "DEF456", "name": "하의" } ... ], "products": { // 선택된 카테고리 내 상품 "data": [ ... ], // 상품 목록 (PRODUCT 세팅 참고) "count": 107 // 선택된 카테고리 내 총 상품 개수 } }

<template> <h1>{{property.board.name}}</h1> {{#each property.board.posts.data}} <div>{{title}}</div> {{/each}} <button>다음 페이지</button> </template> <script> bm.container.addEventListener('click', (event) => { event.preventDefault(); if (event.target.matches('button')) { const currentPage = bm.config('property:board.posts.page'); bm.config('property:board.posts.page', currentPage + 1); bm.apply(); } }); </script>

"board": { "id": 1, // 게시판 ID "name": "공지사항", // 게시판 이름 "commentStatus": "ENABLED", // 댓글 사용 여부 (예: "ENABLED", "DISABLED") "authorDisplayRole": "NAME", // 작성자 표시 정보 (예: "NAME", "EMAIL") "commentWriteRole": "MEMBER", // 댓글 작성 권한 (예: "ALL", "MEMBER", "ADMIN") "postWriteRole": "ALL", // 글 작성 권한 (예: "ALL", "MEMBER", "ADMIN") "secretPostRole": "OPTIONAL", // 비밀글 허용 여부 (예: "NOT_USED", "REQUIRED", "OPTIONAL") "postTemplate": { // 새 글 작성 템플릿 "title": "...", "contents": "..." }, "posts": { // 게시판 내 게시글 "data": [ // 게시글 목록 { "id": 1, // 게시글 ID "title": "게시글 제목", // 게시글 제목 "contents": "<p>내용</p>", // 게시글 본문 "displayName": "김**", // 작성자 표시명 (authorDisplayRole에 따라 다름) "isNotice": false, // 공지글 여부 "status": "PUBLIC", // 게시글 상태 (예: "PUBLIC", "PRIVATE") "accessType": "OPEN", // 접근 타입 (예: "OPEN", "SECRET") "authorType": "ADMIN", // 작성자 타입 (예: "ADMIN", "MEMBER", "GUEST") "commentsCount": 3, // 댓글 개수 "attachmentsCount": 1, // 첨부파일 개수 "thumbnails": [ // 첨부파일 썸네일 목록 (있는 경우) "<https://example.org/thumbnail.png>" ], "createdDate": "2023-11-02T02:24:16.388791" // 게시글 작성일시 } ], "count": 35 // 총 게시글 개수 } }

<template> {{#each property.reviews.data}} <div> {{authorName}} - {{rating}}점 <p>{{content}}</p> </div> {{/each}} <button>다음 페이지</button> </template> <script> bm.container.addEventListener('click', (event) => { event.preventDefault(); if (event.target.matches('button')) { const currentPage = bm.config('property:reviews.page'); bm.config('property:reviews.page', currentPage + 1); bm.apply(); } }); </script>

"reviews": { "data": [ // 리뷰 목록 { "id": 1, // 리뷰 ID "channel": "WEBSITE", // 리뷰 채널 (예: "WEBSITE", "NAVERPAY") "authorName": "김**", // 작성자 이름 "authorEmail": "kim***", // 작성자 이메일 "isBestReview": false, // 베스트 리뷰 여부 "productId": "RJXRGSXKEAZK", // 상품 ID "productName": "멋진 티셔츠", // 상품 이름 "productImage": "<https://example.org/product.png>", // 상품 이미지 URL "optionTypes": [ // 작성 대상 상품 옵션 { "option": { "id": "8MGJMD9NYRWM", // 옵션 ID "name": "사이즈" // 옵션 이름 }, "variation": { "id": "YVSQ62UE6TQM", // 옵션 선택지 ID "value": "M" // 옵션 선택지 값 } } ], "rating": 5, // 리뷰 평점 "content": "아주 멋진 티셔츠었어요!", // 리뷰 내용 "images": [ // 리뷰 이미지/영상 목록 { "url": "<https://example.org/review.png>", // 미디어 URL "type": "IMAGE" // 미디어 타입 (예: "IMAGE", "VIDEO", "IFRAME"). IFRAME은 NAVERPAY 채널에서만 사용 } ], "commentsCount": 3, // 댓글 개수 "displayDate": "2025-01-30T10:34:01.351826" // 표시 일시 } ], "count": 1 // 총 리뷰 개수 }

{{property.mySetting}} {{property.myNested.mySetting}}

{{property.myHTMLContents}} -> &lt;h1&gt;Hello Block Maker!&lt;/h1&gt; {{{property.myHTMLContents}}} -> <h1>Hello Block Maker!</h1>

<style> {{#if property.showWelcome}} p { color: green; } {{/if}} </style> <template> {{#if property.showWelcome}} <p>만나서 반가워요!</p> {{else}} <p>인사는 생략할게요...</p> {{/if}} </template>

<template> {{#if (eq property.light 'green')}} <p>초록 불이니 건널 수 있어요.</p> {{/if}} {{#if (and (eq property.light 'green') (gte property.cars 1))}} <p>초록 불이지만 차가 1대 이상 있어요. 조심히 건너가세요.</p> {{/if}} </template>

{ "property": { "items": [ { "name": "사과" }, { "name": "바나나" }, { "name": "파인애플" } ] } }

<template> <ul> {{#each property.items}} <li> {{#if @first}} <strong>[첫 항목]</strong> {{/if}} {{#if @last}} <strong>[마지막 항목]</strong> {{/if}} {{@index}}: {{name}} </li> {{else}} <li>표시할 항목이 없어요.</li> {{/each}} </ul> </template>