HTML 반영하기

<main class="l-my-page"> <div class="my-page-box"> <div class="right-box"> <div class="right-box__container"> <my-accumulation> <p class="right-box__head"> <span class="font-noto right-box__title" slot="accumulationName">{{accumulationConfig.accumulationName}}</span> </p> </my-accumulation> <date-search start-ymd:query="startYmd" end-ymd:query="endYmd" date-type:query="dateType" shopby-default-type="7d"> <div class="date-selector"> <div class="date-selector__button_box" shopby-date-selector="shopby-date-selector" shopby-on:click="CLICK_DATE"> <button class="font-noto btn date-selector__select-btn" value="td">오늘</button> <button class="font-noto btn date-selector__select-btn on" value="7d">7일</button> <button class="font-noto btn date-selector__select-btn" value="15d">15일</button> <button class="font-noto btn date-selector__select-btn" value="1m">1개월</button> <button class="font-noto btn date-selector__select-btn" value="3m">3개월</button> <button class="font-noto btn date-selector__select-btn" value="1y">1년</button> </div> <div class="date-selector__date-picker-wrap"> <div class="date-selector__date-picker tui-datepicker-input tui-datetime-input tui-has-focus"> <input type="text" name="startDate" readonly="readonly" aria-label="Date-Time" /> <span class="tui-ico-date"></span> <div class="start-date-picker"></div> </div> ~ <div class="date-selector__date-picker tui-datepicker-input tui-datetime-input tui-has-focus"> <input type="text" name="endDate" readonly="readonly" aria-label="Date-Time" /> <span class="tui-ico-date"></span> <div class="end-date-picker"></div> </div> <button type="button" class="btn btn--fill-dark btn--sm date-picker__search" shopby-action="SEARCH_ACCUMULATION">조회</button> </div> </div> </date-search> <my-accumulation-list start-ymd:query="startYmd" page-size:query="pageSize" page-number:query="pageNumber" default-page-size="20" uses-pagination > <div> <div class="my-page-accumulation" slot="accumulationList"> <table class="l-table"> <colgroup> <col style="width: 120px" /> <col /> <col style="width: 140px" /> <col style="width: 140px" /> <col style="width: 140px" /> </colgroup> <thead> <tr> <th>일시</th> <th>내용</th> <th>지급</th> <th>차감</th> <th>유효기간</th> </tr> </thead> <tbody> {{#each items}} <tr> <td> <span class="font-montserrat my-page-accumulation__date">{{registerYmdt}}</span> </td> <td class="td_left"> <span class="font-noto my-page-accumulation__reason-detail">{{reasonDetail}}</span> </td> <td> <span class="my-page-accumulation__accumulation-amount"> {{#ifEq accumulationStatusGroupType 'PAYMENT'}} <span class="font-montserrat bold highlight">+{{convertToKoreanCurrency accumulationAmt}}</span> <span class="my-page-accumulation__accumulation-unit"> {{#if ../accumulationConfig.accumulationUnit}} {{../accumulationConfig.accumulationUnit}} {{else}} p {{/if}} </span> {{else}} - {{/ifEq}} </span> </td> <td> <span class="my-page-accumulation__accumulation-amount"> {{#ifNe accumulationStatusGroupType 'PAYMENT'}} <span class="font-montserrat bold my-page-accumulation__accumulation-amount subtraction"> -{{convertToKoreanCurrency accumulationAmt}} </span> <span class="my-page-accumulation__accumulation-unit"> {{#if ../accumulationConfig.accumulationUnit}} {{../accumulationConfig.accumulationUnit}} {{else}} p {{/if}} </span> {{else}} - {{/ifNe}} </span> </td> <td> {{#if expireYmdt}} <span class="font-montserrat my-page-accumulation__date"> <span>{{startYmdt}}</span> ~ <span>{{#if isNoExpirationDate}} 제한없음 {{else}} {{expireYmdt}} {{/if}}</span> </span> {{else}} - {{/if}} </td> </tr> {{/each}} </tbody> </table> <div slot="totalCount"> {{#ifEq 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"> <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em class="notice__description--center">조회내역이 없습니다.</em> </div> </div> {{/if}} </div> {{/ifEq}} </div> </div> <div slot="totalCount"> {{#ifGt 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> </my-accumulation-list> </div> </div> </div> </main> <main class="l-content"> <div class="my-page-accumulation"> <date-type-selector start-ymd:query="startYmd" date-type:query="dateType" shopby-default-type="7d"> <div class="select select--sm start-ymd-selector my-page-accumulation__period-select"> <select shopby-on:change="CHANGE_DATE"> <option value="td">오늘</option> <option value="7d">7일</option> <option value="1m">1개월</option> <option value="3m">3개월</option> <option value="1y">1년</option> </select> </div> </date-type-selector> <my-accumulation> <div> <summary class="l-title my-page-accumulation__summary"> <span slot="accumulationName">{{accumulationConfig.accumulationName}}</span> <span class="highlight bold" slot="totalAvailableAmt">{{convertToKoreanCurrency profileAccumulationSummary.totalAvailableAmt}}</span> <span slot="accumulationUnit">{{#if accumulationConfig.accumulationUnit}} {{accumulationConfig.accumulationUnit}} {{else}} p {{/if}}</span> </summary> </div> </my-accumulation> <my-accumulation-list pair-key="ACCUMULATION_MORE_VIEW_BUTTON" start-ymd:query="startYmd" page-size:query="pageSize" default-page-size="20" uses-more-button > <div> <div slot="accumulationList"> {{#if totalCount}} <ul class="my-page-accumulation__list"> {{#each items}} <li class="my-page-accumulation__item"> <div class="my-page-accumulation__item-wrap"> <span class="font-noto bold">{{reasonDetail}}</span> <span class="my-page-accumulation__accumulation-amount"> <span class="bold {{#ifEq accumulationStatusGroupType 'PAYMENT'}}give{{else}}subtraction{{/ifEq}}"> {{#ifEq accumulationStatusGroupType 'PAYMENT'}}+{{else}}-{{/ifEq}} {{convertToKoreanCurrency accumulationAmt}} </span> <span class="my-page-accumulation__accumulation-unit"> {{#if ../accumulationConfig.accumulationUnit}} {{../accumulationConfig.accumulationUnit}} {{else}} p {{/if}} </span> </span> </div> <div> <p class="my-page-accumulation__date"> {{#ifEq accumulationStatusGroupType 'PAYMENT'}}지급{{else}}차감{{/ifEq}} 일시 : {{registerYmdt}} </p> {{#if expireYmdt}} <p class="my-page-accumulation__date"> <span>{{startYmdt}}</span> ~ <span>{{#if isNoExpirationDate}} 제한없음 {{else}} {{expireYmdt}} {{/if}}</span> </p> {{/if}} </div> </li> {{/each}} </ul> {{else}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>{{accumulationConfig.accumulationName}} 조회내역이 없습니다.</em> </div> {{/if}} </div> </div> </my-accumulation-list> <more-view-button pair-key="ACCUMULATION_MORE_VIEW_BUTTON"> <div> <div slot="hasMoreViewButton"> {{#if hasMoreViewButton}} <button class="btn btn--line-gray more-view-button" shopby-on:click="MORE_VIEW_BUTTON_CLICK">더보기</button> {{/if}} </div> </div> </more-view-button> </div> </main>

CSS 반영하기

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