HTML 반영하기

<main class="l-my-page shipping-list"> <div class="my-page-box" shopby-helper-key="profile-shipping-address"> <template class="l-my-page-menu" shopby-partials="@partials/my-menu.html" shopby-menu-title="배송지 관리"></template> <div class="right-box"> <div class="right-box__container"> <!-- 타이틀 영역 --> <p class="right-box__head"> <span class="font-noto right-box__title">배송지 관리</span> </p> <!-- 타이틀 영역 --> <!-- 총 수량 및 배송지 등록 --> <my-shipping-address-total-count> <section> <div class="l-title l-title__align-end right-box__no-end-line"> <span class="total-count total-count--md">총 <em class="highlight font-montserrat">{{totalCount}}</em>건</span> <button type="button" class="btn btn--fill-point btn--sm" shopby-action="REGISTER_SHIPPING_ADDRESS" shopby-total-count='{{totalCount}}'>배송지 등록</button> </div> </section> </my-shipping-address-total-count> <!-- 총 수량 및 배송지 등록 --> <!-- 테이블 영역 --> <my-shipping-address-list default-page-size="20" page-size:query="pageSize" page-number:query="pageNumber"> <div> <div class="right-box__table" slot="contents"> <table class='l-table'> <colgroup> <!-- 배송지 이름 --> <col width='12%' /> <!-- 받는 사람 --> <col width='10%' /> <!-- 주소 --> <col /> <!-- 연락처 --> <col width='14%' /> <!-- 관리 --> <col width='6%' /> </colgroup> <thead> <tr> <th>배송지 이름</th> <th>받는 사람</th> <th>주소</th> <th>연락처</th> <th>관리</th> </tr> </thead> <tbody> {{#if contents}} {{#each contents}} <tr class="address" shopby-address-no='{{addressNo}}' shopby-default-yn='{{defaultYn}}' shopby-address-name='{{addressName}}' > <!-- 배송지 이름 --> <td> <span>{{safeString addressName true}}</span> {{#ifEq defaultYn 'Y'}}<br /><span class='badge badge--line-point address__badge'>기본배송지</span>{{/ifEq}}</span> </td> <!-- 배송지 이름 --> <!-- 받는 사람 --> <td>{{safeString receiverName true}}</td> <!-- 받는 사람 --> <!-- 주소 --> <td>(<span class="font-montserrat">{{receiverZipCd}}</span>) {{receiverAddress}} {{receiverDetailAddress}}</td> <!-- 주소 --> <!-- 연락처 --> <td class="font-montserrat"> {{safeString receiverContact1 true}} {{#if receiverContact2}}<br />{{receiverContact2}}{{/if}} </td> <!-- 연락처 --> <!-- 관리 --> <td class='btn-group btn-group--block-column btn-group--sm'> <button class='btn btn--line-gray btn--xs' shopby-action='MODIFY_SHIPPING_ADDRESS' shopby-total-count="{{../totalCount}}">수정</button> <button class='btn btn--line-gray btn--xs' shopby-action='DELETE_SHIPPING_ADDRESS'>삭제</button> </td> <!-- 관리 --> </tr> {{/each}} {{else}} <tr> <td colspan='5'> {{#if isLoading}} <div class="loader loader--lg loader--full"> <span class="spinner"></span> </div> {{else}} <div class='notice notice-full'> <span class='sprite-image notice--warning'> </span> <em>등록된 배송지가 없습니다.</em> </div> {{/if}} </td> </tr> {{/if}} </tbody> </table> </div> <!-- 페이지네이션 --> {{#if contents}} <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> {{/if}} <!-- 페이지네이션 --> </div> </my-shipping-address-list> <!-- 테이블 영역 --> </div> </div> </div> </main> <main class="l-content shipping-list" shopby-helper-key="profile-shipping-address"> <my-shipping-address-total-count> <section> <div class="l-title l-title--md-medium l-title--center" slot="totalCount"> <span class="total-count total-count--md"> 배송지  <em class="highlight">{{totalCount}}</em> 건 </span> <button type="button" class="btn btn--fill-point btn--sm" shopby-action="REGISTER_SHIPPING_ADDRESS" shopby-total-count="{{totalCount}}"> 배송지 등록 </button> </div> </section> </my-shipping-address-total-count> <my-shipping-address-list pair-key="SHIPPING_LIST_MORE_VIEW_BUTTON" default-page-size="20" page-number:query="pageNumber" page-size:query="pageSize" shopby-accumulable > <div> <div slot="contents"> {{#if contents}} <ul class="address"> {{#each contents}} <li class="address__item l-panel" shopby-address-no="{{addressNo}}" shopby-default-yn="{{defaultYn}}" shopby-address-name="{{addressName}}"> <span class="address__top"> {{addressName}} {{#ifEq defaultYn 'Y'}} <span class="badge badge--line-point">기본배송지</span> {{/ifEq}} </span> <span class="address__content"> <span class="address__info"> <span class="address__name">{{receiverName}}</span> <br /> <span>({{receiverZipCd}}) {{receiverAddress}} {{receiverDetailAddress}}</span> <br /> <span class="font-montserrat">{{receiverContact1}} {{#if receiverContact2}}{{receiverContact2}}{{/if}}</span> </span> <span class="btn-group btn-group--inline-column"> <button type="button" class="btn btn--line-gray btn--sm" shopby-action="MODIFY_SHIPPING_ADDRESS" shopby-total-count="{{../totalCount}}" > 수정 </button> <button type="button" class="btn btn--line-gray btn--sm" shopby-action="DELETE_SHIPPING_ADDRESS">삭제</button> </span> </span> </li> {{/each}} </ul> {{else}} {{#if isLoading}} <div class="loader loader--lg loader--full"> <span class="spinner"></span> </div> {{else}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>등록된 배송지가 없습니다.</em> </div> {{/if}} {{/if}} </div> </div> </my-shipping-address-list> <!-- 더보기 --> <more-view-button pair-key="SHIPPING_LIST_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> <!-- 더보기 --> </main>

CSS 반영하기

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