HTML 반영하기

<main class="l-my-page"> <div class="my-page-box"> <div class="right-box"> <div class="right-box__container"> <summary class="l-title l-title__align-end right-box__no-end-line"> <product-inquiry-total-count> <span class="my-page__count"> 총 <span class="highlight" slot="totalCount">{{totalCount}}</span> 건 </span> </product-inquiry-total-count> <button type="button" class="btn btn--fill-point btn--sm" shopby-product-register-btn="shopby-product-register-btn" shopby-action="REGISTER" > 상품문의 등록 </button> </summary> <product-inquiry-list default-page-size="20" page-size:query="pageSize" page-number:query="pageNumber" search-type:query="searchType" search-keyword:query="searchKeyword" uses-pagination > <div class="product-inquiry-list"> <div class="right-box__table" slot="items"> <table class="l-table"> <colgroup> <!-- 번호 --> <col width="80px" /> <!--문의유형 --> <col width="120px" /> <!-- 제목--> <col /> <!-- 관리 --> <col width="200px" /> </colgroup> <thead> <tr> <th>번호</th> <th>문의유형</th> <th>제목</th> <th>관리</th> </tr> </thead> <tbody> {{#each items}} <tr> <td>{{listIndex @index ../pageNumber ../pageSize}}</td> <td> <p class="inquiry-item__type">{{productInquiryDisplayType}}</p> </td> <td class="td_left"> <a class="inquiry-item__product-info" href="/pages/my/product-inquiry-detail.html?productNo={{productNo}}&inquiryNo={{inquiryNo}}&boardIdx={{listIndex @index ../pageNumber ../pageSize}}" > <div class="thumb-item__media"> <span class="thumb-item__img">{{img imageUrl 80 80 productName 'middle' ''}}</span> </div> <div class="inquiry-item__product-item-info"> <span class="font-noto inquiry-item__title"> {{#if isSecreted}} <span class="ico ico--lock-black-16"></span> {{/if}} {{title}} </span> <span class="font-noto inquiry-item__description">{{productName}}</span> </div> </a> </td> <td> <div class="inquiry-item__top-writer"> <span class="font-noto bold">{{registerName}}</span> <span class="inquiry-item__date">{{formatUseByDate registerYmdt}}</span> </div> {{#if hasBeenReplied}} <span class="badge badge--line-dark inquiry-item__reply-status">답변완료</span> {{else}} <span class="badge badge--line-point inquiry-item__reply-status">답변대기</span> {{/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> </product-inquiry-list> </div> </div> </div> </main> <main class="l-content"> <div> <search-field shopby-module-key="product-inquiry-list-search-field"> <span class="search-field"> <span class="search-field__input"> <span class="input-field input-field--sm search-field__text-input"> <input type="text" value="{{keyword}}" placeholder="검색어를 입력해주세요." shopby-on:change="CHANGE_SEARCH_FIELD_KEYWORD" shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD" /> </span> <button type="button" class="search-field__search-btn" shopby-on:click="SEARCH"> <span class="ico ico--magnet-black-24"></span> </button> </span> </span> </search-field> <product-inquiry-total-count> <summary class="l-title l-title__align-end"> <p class="my-page__total-count"> 전체 문의 <span class="my-page__count" slot="totalCount"> <span>{{totalCount}}</span> 건 </span> </p> <button type="button" class="btn btn--fill-point btn--sm" shopby-action="REGISTER">상품문의 등록</button> </summary> </product-inquiry-total-count> <product-inquiry-list pair-key="PRODUCT_INQUIRY_MORE_VIEW_BUTTON" default-page-size="20" page-size:query="pageSize" page-number:query="pageNumber" search-type:query="searchType" search-keyword:query="searchKeyword" uses-more-button > <div> <div slot="productInquiryList"> {{#each items}} <div class="product-inquiry-list" shopby-product-no="{{productNo}}" shopby-inquiry-no="{{inquiryNo}}"> <div class="inquiry-item" shopby-skin-inquiry-item="shopby-inquiry-item"> <div class="inquiry-item__top"> {{#if hasBeenReplied}} <span class="badge badge--line-dark">답변완료</span> {{else}} <span class="badge badge--line-point">답변대기</span> {{/if}} <div class="inquiry-item__top-writer"> <span class="inquiry-item__name">{{registerName}}</span> <span class="inquiry-item__date">{{formatUseByDate registerYmdt}}</span> </div> </div> <div> <a class="inquiry-item__bottom" href="/pages/my/product-inquiry-detail.html?productNo={{productNo}}&inquiryNo={{inquiryNo}}"> {{img imageUrl 80 80 productName '' ''}} <div class="inquiry-item__inquiry-info"> <p class="font-noto inquiry-item__inquiry-info-name">문의유형 - {{productInquiryDisplayType}}</p> <p class="inquiry-item__inquiry-info-title"> {{#if isSecreted}} <span class="ico ico--lock-black-16"></span> {{/if}} <span class="font-noto inquiry-item__title">{{title}}</span> </p> <p class="font-noto inquiry-item__product-name">{{productName}}</p> </div> <div class="inquiry-item__content"> <button type="button" class="btn btn--default angle-top-down inquiry-item__angle-top-dow" shopby-skin-top-down-button="shopby-skin-top-down-button" shopby-on:click="VIEW_PRODUCT_INQUIRY_ANSWER" > <svg viewBox="0 0 80 80" fill="transparent" xmlns="http://www.w3.org/2000/svg"> <path d="m30 18 22 22-22 22" stroke="gray" stroke-width="6" stroke-linejoin="round"></path> </svg> </button> </div> </a> </div> </div> </div> {{else}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>작성된 상품문의가 없습니다.</em> </div> {{/each}} </div> </div> </product-inquiry-list> <more-view-button pair-key="PRODUCT_INQUIRY_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 반영하기

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