HTML 반영하기

<main class="l-my-page"> <div class="my-page-box"> <div class="right-box"> <div class="right-box__container"> <div class="profile-like"> <like-product-total-count> <div> <h3 class="font-noto my-page__title">좋아요</h3> <summary class="l-title l-title__align-end"> <span class="my-page__count"> 총 <span class="highlight" slot="totalCount">{{totalCount}}</span> 건 </span> <button type="button" class="btn btn--fill-dark btn--sm" slot="selectedCount" shopby-action="DELETE_SELECTED_LIKE_PRODUCTS" shopby-selected-count="{{selectedCount}}" shopby-checked-product-nos-as-string="{{checkedProductNosAsString}}" > 선택 삭제 </button> </summary> </div> </like-product-total-count> <like-product-list default-page-size="20" page-size:query="pageSize" page-number:query="pageNumber" uses-pagination> <div> <div class="profile-like__list" slot="profileLikeProduct"> <table class="l-table"> <colgroup> <!-- checkbox --> <col width="50px" /> <!--상품정보 --> <col /> <!-- 상품금액 --> <col width="120px" /> <!-- 할인/적립 --> <col width="120px" /> <!-- 합계금액 --> <col width="120px" /> <!-- 관리 --> <col width="160px" /> </colgroup> <thead> <tr> <th> <label class="form-check form-check--md"> <input type="checkbox" shopby-on:change="CHANGE_CHECKBOX_DELETE_ALL_LIKE_PRODUCT" /> </label> </th> <th>상품정보</th> <th>상품금액</th> <th>할인/적립</th> <th>합계금액</th> <th>관리</th> </tr> </thead> <tbody> {{#each profileLikeProduct.items}} <tr shopby-product-no="{{productNo}}" shopby-product-name="{{productName}}" shopby-image-url="{{getFirstImageWithDefault imageUrls}}" shopby-board-name="{{../name}}" > <td> <label class="form-check form-check--md"> <input type="checkbox" shopby-on:change="CHANGE_CHECKBOX_DELETE_LIKE_PRODUCT" slot="checked" /> </label> </td> <td class="product-option-info"> <div class="thumb-item__media"> <a href="/pages/product/product-detail.html?productNo={{productNo}}"> <span class="thumb-item__img"> {{img (getFirstImageWithDefault imageUrls) 100 100 productName 'middle' ''}} </span> </a> </div> <div> {{#if invalid}} <span class="alert alert--error">구매제한 상품</span> {{/if}} <div class="bold font-noto product-name">{{{productName}}}</div> </div> </td> <td> <div class="product-thumb-item__amount-wrap"> <span class="font-montserrat bold profile-like__benefit-amount">{{convertToKoreanCurrency salePrice}}</span> <span class="bold profile-like__benefit-amount-unit">원</span> </div> </td> <td> <ul class="profile-like__benefit_list"> <li class="profile-like__benefit_item"> <span class="profile-like__benefit-sale">할인</span> {{#ifHasDiscount immediateDiscountAmt additionDiscountAmt}} <span> <span class="font-montserrat bold profile-like__benefit-sale-price"> {{sum immediateDiscountAmt additionDiscountAmt}} </span> <span class="profile-like__benefit-sale-unit">원</span> </span> {{else}} <span class="profile-like__no-benefit">-</span> {{/ifHasDiscount}} </li> <li class="profile-like__benefit_item"> <span class="bold profile-like__benefit-mileage">적립</span> {{#if accumulationAmtWhenBuyConfirm}} <span> <span class="font-montserrat bold profile-like__benefit-mileage-price"> {{convertToKoreanCurrency accumulationAmtWhenBuyConfirm}} </span> <span class="profile-like__benefit-mileage-unit">원</span> </span> {{else}} <span class="profile-like__no-benefit">-</span> {{/if}} </li> </ul> </td> <td> <span class="font-montserrat bold profile-like__benefit-amount"> {{convertToKoreanCurrency (subtractNumber salePrice immediateDiscountAmt additionDiscountAmt)}} </span> <span class="bold profile-like__benefit-amount-unit">원</span> </td> <td class="btn-group btn-group--block-column btn-group--sm"> <button type="button" class="btn btn--line-gray btn--xs" shopby-action="INQUIRE_PRODUCT">상품문의</button> <button type="button" class="btn btn--line-gray btn--xs" shopby-action="DELETE_LIKE_PRODUCT">삭제</button> </td> </tr> {{/each}} </tbody> </table> <div slot="totalCount"> {{#ifEq profileLikeProduct.totalCount 0 }} <div slot="isLoading"> {{#if isLoading}} <div class="loader loader--lg loader--full"> <span class="spinner"></span> </div> {{else}} <div class="notice empty-list"> <span class="sprite-image notice--warning"></span> <em>조회내역이 없습니다.</em> </div> {{/if}} </div> {{/ifEq}} </div> </div> <div slot="totalCount"> {{#ifGt profileLikeProduct.totalCount 0 }} <div class="pagination" slot="pagination"> <a href="?{{pagination.firstPage}}"> <button class="sprite-image pagination__btn pagination__btn--double-lt"></button> </a> <a href="?{{pagination.prevPage}}"> <button class="sprite-image pagination__btn pagination__btn--lt"></button> </a> {{#each pagination.pages}} <a class="pagination__link {{#if isCurrentPage}}is-current{{/if}}" href="?{{param}}">{{page}}</a> {{/each}} <a href="?{{pagination.nextPage}}"> <button class="sprite-image pagination__btn pagination__btn--rt"></button> </a> <a href="?{{pagination.lastPage}}"> <button class="sprite-image pagination__btn pagination__btn--double-rt"></button> </a> </div> {{/ifGt}} </div> </div> </like-product-list> </div> </div> </div> </div> </main> <main class="l-content"> <div class="profile-like"> <like-product-total-count> <summary class="l-title l-title__align-end profile-like__title"> <span class="profile-like__total-count"> <label class="form-check form-check--md"> <input type="checkbox" shopby-on:change="CHANGE_CHECKBOX_DELETE_ALL_LIKE_PRODUCT" /> </label> <span class="my-page__count"> 좋아요 <span class="highlight bold" slot="totalCount">{{totalCount}}</span> 건 </span> </span> <button type="button" class="btn btn--fill-dark btn--sm" slot="selectedCount" shopby-action="DELETE_SELECTED_LIKE_PRODUCTS" shopby-selected-count="{{selectedCount}}" shopby-checked-product-nos-as-string="{{checkedProductNosAsString}}" > 선택 삭제 </button> </summary> </like-product-total-count> <like-product-list pair-key="PRODUCT_LIKE_MORE_VIEW_BUTTON" default-page-size="20" page-size:query="pageSize" page-number:query="pageNumber" has-total-count:query="hasTotalCount" uses-more-button > <div> <ul class="profile-like__list" slot="likeList"> {{#each items}} <li class="thumb-LIST profile-like__list-item" shopby-product-no="{{productNo}}" shopby-product-name="{{productName}}" shopby-image-url="{{getFirstImageWithDefault imageUrls}}" shopby-board-name="{{../name}}" > <div class="thumb-item product-thumb-item profile-like__list-item-product"> <label class="form-check form-check--md"> <input type="checkbox" shopby-on:change="CHANGE_CHECKBOX_DELETE_LIKE_PRODUCT" slot="checked" /> </label> <div class="thumb-item__media"> <a class="thumb-item__img-box" href="/pages/product/product-detail.html?productNo={{productNo}}"> <span class="thumb-item__img">{{img (getFirstImageWithDefault imageUrls) 80 80 productName '' ''}}</span> </a> </div> <div class="thumb-item__info"> {{#if invalid}} <span class="alert alert--error">구매제한 상품</span> {{/if}} <p class="bold profile-like__name">{{{productName}}}</p> <ul class="profile-like__amount-list"> <li class="profile-like__amount-item"> <span class="bold font-montserrat"> {{convertToKoreanCurrency (subtractNumber salePrice immediateDiscountAmt additionDiscountAmt)}} 원 </span> {{#ifHasDiscount immediateDiscountAmt additionDiscountAmt}} <del class="profile-like__original-price">{{convertToKoreanCurrency salePrice}} 원</del> {{/ifHasDiscount}} </li> </ul> </div> </div> <div class="profile-like__buttons"> <button type="button" class="btn btn--line-gray btn--md" shopby-action="INQUIRE_PRODUCT">상품문의</button> <button type="button" class="btn btn--line-gray btn--md" shopby-action="DELETE_LIKE_PRODUCT">삭제</button> </div> </li> {{else}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>좋아요 내역이 없습니다.</em> </div> {{/each}} </ul> </div> </like-product-list> <more-view-button pair-key="PRODUCT_LIKE_MORE_VIEW_BUTTON"> <div> <div slot="hasMoreViewButton"> {{#if hasMoreViewButton}} <button class="btn btn--line-gray btn--lg-wide" shopby-on:click="MORE_VIEW_BUTTON_CLICK">더보기</button> {{/if}} </div> </div> </more-view-button> </div> </main>

CSS 반영하기

/* 여기에 스타일 코드를 작성해주세요. */