HTML 반영하기

<main class="l-my-page claim-form" shopby-helper-key="claim-form-helper-key"> <section class="my-page-box"> <div class="right-box"> <div class="right-box__container"> <!-- 클레임 신청 --> <claim-type claim-type:query="claimType"> <div class="right-box__head"> <span class="font-noto right-box__title">{{claimStatusLabel claimType}} 신청</span> </div> </claim-type> <!-- 상품 영역 --> <claim-products claim-type:query="claimType"> <div> <div class="right-box__table"> <table class="l-table"> <colgroup> <!-- 주문일자(주문번호) --> <col width="15%" /> <!-- 선택 --> <col width="8%" /> <!-- 상품 정보 --> <col /> <!-- 수량 --> <col width="8%" /> <!-- 상품금액 --> <col width="10%" /> <!-- 진행상태 --> <col width="10%" /> <!-- 클레임 수량 --> <col width="12%" /> </colgroup> <thead> <tr> <th>주문일자(주문번호)</th> <th> <label class="form-check form-check--md"> <input type="checkbox" slot="isAllChecked" shopby-action="TOGGLE_ALL" /> </label> </th> <th>상품정보</th> <th>수량</th> <th>상품금액</th> <th>진행상태</th> <th>{{claimStatusLabel claimType}} 수량</th> </tr> </thead> <tbody slot="products"> {{#each products}} <tr shopby-order-option-no="{{orderOptionNo}}"> <!-- 주문일자(주문번호) --> {{#if @first}} <td rowspan="{{../products.length}}"> <span><strong class="font-montserrat order-date" slot="orderDate">{{../orderDate}}</strong></span> <a class="font-montserrat order-number" href="/pages/my/order-detail.html?orderNo={{../orderOptionNo}}" slot="orderOptionNo" > {{../orderOptionNo}} </a> </td> {{/if}} <!-- 주문일자(주문번호) --> <!-- 선택 --> <td> <label class="form-check form-check--md"> <input type="checkbox" slot="orderOptionNoCheckbox" shopby-order-option-no="{{orderOptionNo}}" shopby-action="TOGGLE_ORDER_OPTION" /> </label> </td> <!-- 선택 --> <!-- 상품정보 --> <td> <a class="thumb-item" href="/pages/product/product-detail.html?productNo={{productNo}}"> <span class="thumb-item__media"> {{#if hasImage}} {{img imageUrl 100 100 productName '' ''}} {{else}} <span class="no-img"></span> {{/if}} </span> <span class="thumb-item__info"> <span class="thumb-item__brand-name">{{{brandName}}}</span> <span class="thumb-item__product-name">{{{productName}}}</span> {{#each options}} <span>{{{label}}} : {{{value}}}</span> {{/each}} {{#each inputs}} <span>{{{inputLabel}}} : {{{inputValue}}}</span> {{/each}} </span> </a> </td> <!-- 상품정보 --> <!-- 수량 --> <td> <span class="currency"> <em class="font-montserrat">{{orderCnt}}</em> 개 </span> </td> <!-- 수량 --> <!-- 상품금액 --> <td> <span class="currency"> <em class="font-montserrat">{{convertToKoreanCurrency price.buyAmt}}</em> 원 </span> </td> <!-- 상품금액 --> <!-- 진행상태 --> <td><span class="order-status">{{orderStatusLabel orderStatusType}}</span></td> <!-- 진행상태 --> <!-- 클레임 수량 --> <td> <span class="counter counter--center" slot="quantityChanger" shopby-order-option-no="{{orderOptionNo}}" shopby-max="{{orderCnt}}" > <button type="button" class="counter__btn" shopby-action="HANDLE_DECREASE_COUNT_BTN_CLICK">-</button> <span class="counter__input"> <input type="text" slot="orderCnt" shopby-order-option-no="{{orderOptionNo}}" value="{{orderCnt}}" disabled /> </span> <button type="button" class="counter__btn" shopby-max="{{orderCnt}}" shopby-action="HANDLE_INCREASE_COUNT_BTN_CLICK" > + </button> </span> </td> <!-- 클레임 수량 --> </tr> {{/each}} {{#if isLoading}} <tr> <td colspan="7"> <div class="loader loader--lg"> <span class="spinner"></span> </div> </td> </tr> {{/if}} </tbody> </table> </div> <div class="claim-form__notice"> <span class="dot dot--l-notice highlight" slot="checkedCount"> {{#if isAllChecked}} 모든 상품을 선택하셨습니다. {{else}} {{checkedCount}}개 상품을 선택하셨습니다. {{/if}} </span> </div> </div> </claim-products> <!-- 상품 영역 --> <!-- 클레임 신청 --> <!-- 클레임 사유 --> <claim-reason-form> <div> <div class="right-box__head"> <span class="font-noto right-box__title" slot="claimType">{{claimStatusLabel claimInfo.claimType}} 사유</span> </div> <dl> {{#ifNe claimInfo.originalOption.orderStatusType 'DEPOSIT_WAIT'}} <dt><span class="dot dot--r-must">귀책 대상</span></dt> <dd> <span class="select select--md"> <select slot="responsibleObjectTypes" shopby-focus-field="responsibleObjectType" shopby-on:change="HANDLE_RESPONSIBLE_OBJECT_TYPES_CHANGE" > <option value="" disabled="" selected>귀책 대상을 선택해주세요.</option> {{#each claimInfo.responsibleObjectTypes}} <option value="{{@this}}">{{#ifEq @this 'SELLER'}} 판매자 {{else}} 구매자 {{/ifEq}}</option> {{/each}} </select> </span> </dd> <dt><span class="dot dot--r-must">사유</span></dt> <dd> <span class="select select--md"> <select slot="claimReasonTypes" shopby-focus-field="claimReasonType" shopby-on:change="HANDLE_CLAIM_REASON_CHANGE"> <option value="" disabled="" selected>사유를 선택해주세요</option> {{#each claimInfo.claimReasonTypes}} <option value="{{claimReasonType}}">{{label}}</option> {{/each}} </select> </span> </dd> {{/ifNe}} <dt><span class="dot dot--r-must">상세 사유</span></dt> <dd> <span class="input-field input-field--lg"> <textarea class="text-area" cols="30" rows="5" placeholder="상세 사유를 입력해 주세요." slot="claimReasonDetail" value="{{claimReasonDetail}}" shopby-focus-field="claimReasonDetail" shopby-max="160" shopby-on:input="HANDLE_DETAIL_REASON_INPUT" shopby-on:change="HANDLE_DETAIL_REASON_CHANGE" ></textarea> </span> </dd> {{#if isCollectionInfoFormNecessary}} <dt> <span>첨부파일</span> </dt> <dd slot="images"> <input type="file" hidden multiple accept="image/*" shopby-attach-input shopby-limit-count="5" shopby-limit-mega-bytes="5" shopby-on:change="HANDLE_ATTACH_INPUT_CHANGE" /> <button type="button" class="btn btn--line-dark btn--sm" shopby-on:click="HANDLE_ATTACH_BTN_CLICK">사진 첨부하기</button> <ul class="attachment attachment__items"> {{#each images}} <li class="attachment__media"> {{img imageUrl 80 80 originName '' ''}} <button type="button" class="attachment__delete" shopby-image-url="{{imageUrl}}" shopby-action="HANDLE_ATTACH_DELETE_BTN" ></button> </li> {{/each}} </ul> </dd> {{/if}} </dl> {{#ifNe claimInfo.originalOption.orderStatusType 'DEPOSIT_WAIT'}} <div class="claim-form__notice"> <span class="dot dot--l-gray"> {{#ifEq claimInfo.claimType 'CANCEL'}} 고객님의 귀책 사유로 {{claimStatusLabel claimInfo.claimType}}처리 시 비용이 발생될 수 있습니다. {{else}} 고객님의 귀책 사유로 상품 등이 훼손 또는 멸실 된 경우 반품/교환 제한(불가) 및 비용이 발생될 수 있습니다. {{/ifEq}} </span> </div> {{/ifNe}} </div> </claim-reason-form> <!-- 클레임 사유 --> <!-- 클레임 정보 --> <claim-information-form> <div> {{#if isAccountFormNecessary}} <div class="right-box__head"> <span class="font-noto right-box__title" slot="claimType">{{claimStatusLabel claimType}} 정보</span> </div> <dl> <dt><span class="dot dot--r-must">은행</span></dt> <dd> <span class="select select--md"> <select slot="availableBanks" shopby-on:change="HANDLE_BANK_CHANGE" shopby-focus-field="bank"> <option value="" disabled="" selected>은행을 선택해주세요.</option> {{#each availableBanks}} <option value="{{bank}}">{{label}}</option> {{/each}} </select> </span> </dd> <dt><span class="dot dot--r-must">계좌번호</span></dt> <dd> <span class="input-field input-field--md"> <input class="font-montserrat" type="text" placeholder="계좌번호 - 없이 입력" shopby-max="20" shopby-on:input="HANDLE_BANK_ACCOUNT_INPUT" shopby-on:change="HANDLE_BANK_ACCOUNT_CHANGE" shopby-focus-field="bankAccount" /> </span> </dd> <dt><span class="dot dot--r-must">예금주</span></dt> <dd> <span class="input-field input-field--md"> <input type="text" placeholder="예금주를 입력해주세요." shopby-max="30" shopby-on:input="HANDLE_BANK_DEPOSITOR_NAME_INPUT" shopby-on:change="HANDLE_BANK_DEPOSITOR_NAME_CHANGE" shopby-focus-field="bankDepositorName" /> </span> </dd> </dl> <div class="claim-form__notice"> <span class="dot dot--l-gray">결제하신 수단에 따라 취소 방법이 다를 수 있습니다.</span> </div> {{/if}} </div> </claim-information-form> <!-- 클레임 정보 --> <!-- 반품 수거 정보 --> <return-information-form deliverable:query="deliverable"> {{#if isCollectionInfoFormNecessary}} <div> <div class="right-box__head"> <span class="font-noto right-box__title">반품 수거 정보</span> </div> <dl class="claim-form__collection-type" slot="collectionType"> <dt><span class="dot dot--r-must">반품 수거 방법</span></dt> <dd> <ul slot="collectionTypes" shopby-on:click="HANDLE_COLLECTION_TYPE_CLICK"> <li> <label class="form-check form-check--md"> <input type="radio" name="collection-type" slot="collection" shopby-disabled value="SELLER" checked /> <span class="form-check__label">판매자 수거요청</span> </label> </li> <li> <label class="form-check form-check--md"> <input type="radio" name="collection-type" slot="collection" value="BUYER" /> <span class="form-check__label">구매자 직접반품</span> </label> </li> </ul> </dd> {{#ifEq collectionType 'SELLER'}} <!-- 판매자 수거 정보 --> <dt><span class="dot dot--r-must">반품자명</span></dt> <dd class="claim-form__return-name"> <span class="input-field input-field--md"> <input type="text" placeholder="이름을 입력하세요." shopby-max="50" slot="receiverName" value="{{returnAddress.receiverName}}" shopby-on:change="HANDLE_RECEIVER_NAME_CHANGE" shopby-on:input="HANDLE_RECEIVER_NAME_INPUT" shopby-focus-field="receiverName" /> </span> <button type="button" class="btn btn--line-dark btn--sm" shopby-action="SELECT_FROM_SHIPPING_ADDRESSES"> 배송지 목록에서 선택 </button> </dd> <dt><span class="dot dot--r-must">수거지 주소</span></dt> <dd> <span class="address-form"> <span class="address"> <span class="input-field input-field--md"> <input type="text" slot="returnAddress" class="font-montserrat" disabled value="{{returnAddress.receiverZipCd}}" /> </span> <button type="button" class="btn btn--line-dark btn--sm" shopby-focus-field="receiverZipCdToReturn" shopby-action="SEARCH_ZIP_CODE_TO_RETURN" > 우편번호 찾기 </button> </span> <span class="input-field input-field--md"> <input type="text" class="font-montserrat" disabled slot="returnAddress" value="{{returnAddress.receiverAddress}}" /> </span> <span class="input-field input-field--md"> <input type="text" slot="receiverDetailAddress" class="font-montserrat" value="{{returnAddress.receiverDetailAddress}}" shopby-max="100" shopby-focus-field="receiverDetailAddress" shopby-on:input="HANDLE_RECEIVER_DETAIL_ADDRESS_INPUT" shopby-on:change="HANDLE_RECEIVER_DETAIL_ADDRESS_CHANGE" /> </span> </span> </dd> <dt><span class="dot dot--r-must">휴대폰 번호</span></dt> <dd> <span class="input-field input-field--md"> <input class="font-montserrat" type="text" placeholder="휴대폰 번호 - 없이 입력" slot="receiverMobileNo" shopby-focus-field="receiverMobileNo" shopby-max="11" value="{{returnAddress.receiverContact1}}" shopby-on:input="HANDLE_RECEIVER_NO_INPUT" shopby-on:change="HANDLE_RECEIVER_MOBILE_NO_CHANGE" /> </span> </dd> <dt><span>전화번호</span></dt> <dd> <span class="input-field input-field--md"> <input class="font-montserrat" type="text" placeholder="전화번호 - 없이 입력" slot="receiverPhoneNo" shopby-focus-field="receiverPhoneNo" shopby-max="11" value="{{returnAddress.receiverContact2}}" shopby-on:input="HANDLE_RECEIVER_NO_INPUT" shopby-on:change="HANDLE_RECEIVER_PHONE_NO_CHANGE" /> </span> </dd> <dt><span>수거시 참고 사항</span></dt> <dd> <span class="input-field input-field--md"> <input type="text" placeholder="수거 시 요청사항을 입력해 주세요." /> </span> </dd> <!-- 판매자 수거 정보 --> {{else}} <!-- 구매자 직접 반품 정보 --> <dt><span>반품 주소지</span></dt> <dd> <dl class="claim-form__return-address"> {{#with claimInfo.returnWarehouse}} <dt>이름</dt> <dd> {{#ifEq ../claimInfo.originalOption.shippingAreaType 'MALL_SHIPPING_AREA'}} {{../mallName}} {{else}} {{safeString receiverName true}} {{/ifEq}} </dd> <dt>주소</dt> <dd class="font-montserrat">{{summary}}</dd> <dt>전화번호</dt> <dd class="font-montserrat">{{safeString contact true}}</dd> {{/with}} </dl> </dd> <dt><span>반품 접수 정보</span></dt> <dd class="claim-form__delivery-company"> <span class="select select--md claim-form__return-delivery-company-type"> <select shopby-on:change="HANDLE_DELIVERY_COMPANY_TYPE_CHANGE" slot="deliveryCompanyTypeWithLabels" shopby-focus-field="deliveryCompanyType" > <option value="" disabled="" selected>택배사를 선택하세요.</option> {{#each claimInfo.deliveryCompanyTypeWithLabels}} <option value="{{deliveryCompanyType}}">{{label}}</option> {{/each}} </select> </span> <span class="input-field input-field--md"> <input type="text" class="font-montserrat" placeholder="반품 송장번호 입력" slot="invoiceNo" shopby-focus-field="invoiceNo" shopby-max="50" value="{{invoiceNo}}" shopby-on:input="HANDLE_INVOICE_NO_INPUT" shopby-on:change="HANDLE_INVOICE_NO_CHANGE" /> </span> </dd> <!-- 구매자 직접 반품 정보 --> {{/ifEq}} </dl> <div class="claim-form__notice"> <span class="dot dot--l-gray">결제하신 수단에 따라 취소 방법이 다를 수 있습니다.</span> </div> </div> {{/if}} </return-information-form> <!-- 반품 수거 정보 --> <!-- 교환 출고 정보 --> <exchange-information-form deliverable:query="deliverable" claimType:query="claimType"> {{#if isCollectionInfoFormNecessary}} <div> {{#ifEq claimType 'EXCHANGE'}} <div class="right-box__head"> <span class="font-noto right-box__title">교환 출고 정보</span> </div> <dl> <dt><span class="dot dot--r-must">수령자명</span></dt> <dd class="address"> <span class="input-field input-field--md"> <input type="text" placeholder="이름을 입력하세요." shopby-max="50" slot="exchangeReceiverName" value="{{exchangeAddress.receiverName}}" shopby-on:change="HANDLE_RECEIVER_NAME_CHANGE" shopby-on:input="HANDLE_RECEIVER_NAME_INPUT" shopby-focus-field="exchangeReceiverName" /> </span> <button class="btn btn--line-dark btn--sm" shopby-action="SELECT_FROM_SHIPPING_ADDRESSES_FOR_EXCHANGE"> 배송지 목록에서 선택 </button> </dd> <dt><span class="dot dot--r-must">배송지 주소</span></dt> <dd> <span class="address-form"> <span class="address"> <span class="input-field input-field--md"> <input type="text" class="font-montserrat" disabled slot="exchangeAddress" value="{{exchangeAddress.receiverZipCd}}" /> </span> <button type="button" class="btn btn--line-dark btn--sm" shopby-focus-field="exchangeReceiverZipCd" shopby-action="SEARCH_ZIP_CODE_TO_EXCHANGE" > 우편번호 찾기 </button> </span> <span class="input-field input-field--md"> <input type="text" disabled class="font-montserrat" slot="exchangeAddress" value="{{exchangeAddress.receiverAddress}}" /> </span> <span class="input-field input-field--md"> <input type="text" slot="exchangeDetailAddress" class="font-montserrat" value="{{exchangeAddress.receiverDetailAddress}}" shopby-max="100" shopby-focus-field="exchangeDetailAddress" shopby-on:input="HANDLE_RECEIVER_DETAIL_ADDRESS_INPUT" shopby-on:change="HANDLE_RECEIVER_DETAIL_ADDRESS_CHANGE" /> </span> </span> </dd> <dt><span class="dot dot--r-must">휴대폰 번호</span></dt> <dd> <span class="input-field input-field--md"> <input class="font-montserrat" type="text" placeholder="휴대폰 번호 - 없이 입력" slot="exchangeMobileNo" shopby-focus-field="exchangeMobileNo" shopby-max="11" value="{{exchangeAddress.receiverContact1}}" shopby-on:input="HANDLE_RECEIVER_NO_INPUT" shopby-on:change="HANDLE_RECEIVER_MOBILE_NO_CHANGE" /> </span> </dd> <dt><span>전화번호</span></dt> <dd> <span class="input-field input-field--md"> <input class="font-montserrat" type="text" placeholder="전화번호 - 없이 입력" slot="exchangePhoneNo" shopby-focus-field="exchangePhoneNo" shopby-max="11" value="{{exchangeAddress.receiverContact2}}" shopby-on:input="HANDLE_RECEIVER_NO_INPUT" shopby-on:change="HANDLE_RECEIVER_PHONE_NO_CHANGE" /> </span> </dd> <dt><span>배송 메모</span></dt> <dd> <span class="input-field input-field--md"> <input type="text" placeholder="배송 시 요청사항을 입력해 주세요." shopby-max="50" value="{{exchangeAddress.deliveryMemo}}" shopby-on:change="HANDLE_DELIVERY_MEMO_CHANGE" shopby-on:input="HANDLE_DELIVERY_MEMO_INPUT" /> </span> </dd> {{#if exchangeAddress.customsIdNumber}} <dt><span>개인통관고유부호</span></dt> <dd> <span class="input-field input-field--md"> <input type="text" class="font-montserrat" slot="customsIdNumber" shopby-focus-field="customsIdNumber" shopby-max="13" value="{{exchangeAddress.customsIdNumber}}" shopby-on:input="HANDLE_CUSTOMS_ID_NUMBER_INPUT" shopby-on:change="HANDLE_CUSTOMS_ID_NUMBER_CHANGE" /> </span> </dd> {{/if}} </dl> <div class="claim-form__notice"> <span class="dot dot--l-gray">결제하신 수단에 따라 취소 방법이 다를 수 있습니다.</span> </div> {{/ifEq}} </div> {{/if}} </exchange-information-form> <!-- 교환 출고 정보 --> <!-- 반품 수거 안내 --> <return-information-form deliverable:query="deliverable" claimType:query="claimType"> <div> {{#if isCollectionInfoFormNecessary}} <div class="right-box__head"> <span class="font-noto right-box__title">반품 수거 안내</span> </div> <ul class="claim-form__notice"> <li class="dot dot--l-gray">반품상황에 따라 (반품)택배비를 차감할 수 있습니다.</li> <li class="dot dot--l-gray">반품신청이 완료되면 입력하신 수거지주소로 반품수거가 진행됩니다.</li> <li class="dot dot--l-gray">CJ대한통은 택배기사가 1~2일 내에 직접 방문합니다.</li> <li class="dot dot--l-gray">반품등록일 오후 5시까지 접수분은 익일로 반품접수됩니다.</li> <li class="dot dot--l-gray">단, 토/일/공휴일은 다음 근무일에 처리됩니다.</li> </ul> {{/if}} </div> </return-information-form> <!-- 반품 수거 안내 --> <claim-type claim-type:query="claimType"> <div class="btn-group"> <button type="button" class="btn btn--line-dark" shopby-action="HANDLE_CANCEL_BTN_CLICK">취소</button> <button type="submit" class="btn btn--fill-point" claimType="{{claimType}}" shopby-action="HANDLE_CLAIM_BTN_CLICK"> {{claimStatusLabel claimType}} 신청 </button> </div> </claim-type> </div> </div> </section> </main> <main class="l-content claim-form" shopby-helper-key="claim-form-helper-key"> <!-- 상품 영역 --> <claim-products> <section> <div class="l-panel l-title l-title--sm claim-form__title"> <label class="form-check form-check--sm"> <input type="checkbox" slot="isAllChecked" shopby-action="TOGGLE_ALL" /> </label> <span><em slot="orderDate" class="claim-form__date">{{orderDate}}</em></span> <span class="claim-form__order-option-no" slot="orderOptionNo">{{orderOptionNo}}</span> </div> <ul class="claim-form__products" slot="products"> {{#if isLoading}} <li class="loader loader--lg"> <span class="spinner"></span> </li> {{/if}} {{#each products}} <li class="claim-form__product" shopby-order-option-no="{{orderOptionNo}}"> <div class="claim-form__info"> <label class="form-check form-check--sm"> <input type="checkbox" slot="orderOptionNoCheckbox" shopby-order-option-no="{{orderOptionNo}}" shopby-action="TOGGLE_ORDER_OPTION" /> </label> <div class="thumb-item"> <a class="thumb-item__link" href="/pages/product/product-detail.html?productNo={{productNo}}"> <span class="thumb-item__media"> {{#if hasImage}} {{img imageUrl 80 80 productName '' ''}} {{else}} <span class="no-img"></span> {{/if}} </span> <span class="thumb-item__info"> <span class="thumb-item__brand-name">{{{brandName}}}</span> <span class="thumb-item__product-name">{{{productName}}}</span> <span class="thumb-item__option"> {{#ifNe optionType 'PRODUCT_ONLY'}} {{#each options}} <span>{{{label}}} : {{{value}}}</span> {{/each}} {{/ifNe}} {{#each inputs}} <span>{{{inputLabel}}} : {{{inputValue}}}</span> {{/each}} </span> </span> </a> </div> </div> <div class="thumb-item__amount"> <p class="thumb-item__amount-info"> <span class="thumb-item__price"> <em>{{convertToKoreanCurrency price.buyAmt}}</em> 원 / <em>{{orderCnt}}</em> 개 </span> <span>{{orderStatusLabel orderStatusType}}</span> </p> <span class="counter counter--center" slot="quantityChanger" shopby-order-option-no="{{orderOptionNo}}" shopby-max="{{orderCnt}}"> <button type="button" class="counter__btn" shopby-action="HANDLE_DECREASE_COUNT_BTN_CLICK">-</button> <span class="counter__input"> <input type="text" slot="orderCnt" shopby-order-option-no="{{orderOptionNo}}" value="{{orderCnt}}" disabled readonly /> </span> <button type="button" class="counter__btn" shopby-max="{{orderCnt}}" shopby-action="HANDLE_INCREASE_COUNT_BTN_CLICK">+</button> </span> </div> </li> {{/each}} </ul> <p class="claim-form__message claim-form__message--notice" slot="checkedCount"> {{#unless isLoading}} <span class="dot dot--l-notice"></span> {{#if isAllChecked}} 모든 상품을 선택하셨습니다. {{else}} {{checkedCount}}개 상품을 선택하셨습니다. {{/if}} {{/unless}} </p> </section> </claim-products> <!-- 상품 영역 --> <!-- 클레임 사유 --> <claim-reason-form> <section class="claim-form__reason"> <p class="claim-form__section-title l-title" slot="claimType">{{claimStatusLabel claimInfo.claimType}} 사유</p> <dl> {{#ifNe claimInfo.originalOption.orderStatusType 'DEPOSIT_WAIT'}} <dt class="claim-form__title"> 귀책 대상 <span class="dot dot--r-caution"></span> </dt> <dd> <span class="select select--sm"> <select slot="responsibleObjectTypes" shopby-focus-field="responsibleObjectType" shopby-on:change="HANDLE_RESPONSIBLE_OBJECT_TYPES_CHANGE" > <option value="" disabled="" selected>귀책 대상을 선택해주세요.</option> {{#each claimInfo.responsibleObjectTypes}} <option value="{{@this}}">{{#ifEq @this 'SELLER'}} 판매자 {{else}} 구매자 {{/ifEq}}</option> {{/each}} </select> </span> </dd> <dt class="claim-form__title"> 사유 <span class="dot dot--r-caution"></span> </dt> <dd> <span class="select select--sm"> <select slot="claimReasonTypes" shopby-focus-field="claimReasonType" shopby-on:change="HANDLE_CLAIM_REASON_CHANGE"> <option value="" disabled="" selected>사유를 선택해주세요</option> {{#each claimInfo.claimReasonTypes}} <option value="{{claimReasonType}}">{{label}}</option> {{/each}} </select> </span> </dd> {{/ifNe}} <dt class="claim-form__title"> 상세 사유 <span class="dot dot--r-caution"></span> </dt> <dd> <span class="input-field input-field--lg"> <textarea class="text-area" cols="30" rows="10" placeholder="상세 사유를 입력해 주세요." slot="claimReasonDetail" value="{{claimReasonDetail}}" shopby-focus-field="claimReasonDetail" shopby-max="160" shopby-on:input="HANDLE_DETAIL_REASON_INPUT" shopby-on:change="HANDLE_DETAIL_REASON_CHANGE" ></textarea> </span> </dd> </dl> {{#if isCollectionInfoFormNecessary}} <ul class="attachment attachment__items" slot="images"> {{#each images}} <li class="attachment__media"> {{img imageUrl 80 80 originName '' ''}} <button type="button" class="attachment__delete" shopby-image-url="{{imageUrl}}" shopby-action="HANDLE_ATTACH_DELETE_BTN"></button> </li> {{/each}} <input type="file" hidden multiple accept="image/*" shopby-attach-input shopby-limit-count="5" shopby-limit-mega-bytes="5" shopby-on:change="HANDLE_ATTACH_INPUT_CHANGE" /> <button type="button" class="attachment__input" shopby-on:click="HANDLE_ATTACH_BTN_CLICK"></button> </ul> {{/if}} </section> {{#ifNe claimInfo.originalOption.orderStatusType 'DEPOSIT_WAIT'}} <p class="claim-form__message claim-form__message--gray"> <span class="dot dot--l-gray"></span> {{#ifEq claimInfo.claimType 'CANCEL'}} 고객님의 귀책 사유로 {{claimStatusLabel claimInfo.claimType}}처리 시 비용이 발생될 수 있습니다. {{else}} 고객님의 귀책 사유로 상품 등이 훼손 또는 멸실 된 경우 반품/교환 제한(불가) 및 비용이 발생될 수 있습니다. {{/ifEq}} </p> {{/ifNe}} </claim-reason-form> <!-- 클레임 사유 --> <!-- 클레임 정보 --> <claim-information-form> {{#if isAccountFormNecessary}} <section class="claim-form__detail-information"> <p class="claim-form__section-title l-title">{{claimStatusLabel claimType}} 정보</p> <p class="claim-form__title"> 은행 <span class="dot dot--r-caution"></span> </p> <span class="select select--sm"> <select slot="availableBanks" shopby-on:change="HANDLE_BANK_CHANGE" shopby-focus-field="bank"> <option value="" disabled="" selected>은행을 선택해주세요.</option> {{#each availableBanks}} <option value="{{bank}}">{{label}}</option> {{/each}} </select> </span> <p class="claim-form__title"> 계좌번호 <span class="dot dot--r-caution"></span> </p> <span class="input-field input-field--sm"> <input class="font-montserrat" type="text" placeholder="계좌번호 - 없이 입력" shopby-max="20" shopby-on:input="HANDLE_BANK_ACCOUNT_INPUT" shopby-on:change="HANDLE_BANK_ACCOUNT_CHANGE" shopby-focus-field="bankAccount" /> </span> <p class="claim-form__title"> 예금주 <span class="dot dot--r-caution"></span> </p> <span class="input-field input-field--sm"> <input type="text" placeholder="예금주를 입력해주세요." shopby-max="30" shopby-on:input="HANDLE_BANK_DEPOSITOR_NAME_INPUT" shopby-on:change="HANDLE_BANK_DEPOSITOR_NAME_CHANGE" shopby-focus-field="bankDepositorName" /> </span> <p class="claim-form__message"> <span class="dot dot--l-gray"></span> 결제하신 수단에 따라 취소 방법이 다를 수 있습니다. </p> </section> {{/if}} </claim-information-form> <!-- 클레임 정보 --> <!-- 반품 수거 정보 --> <return-information-form deliverable:query="deliverable"> {{#if isCollectionInfoFormNecessary}} <section class="claim-form__detail-information"> <p class="claim-form__section-title l-title">반품 수거 정보</p> <p class="claim-form__title"> 반품 수거 방법 <span class="dot dot--r-caution"></span> </p> <ul class="claim-form__collection-type" slot="collectionTypes" shopby-on:click="HANDLE_COLLECTION_TYPE_CLICK"> <li> <label class="form-check form-check--sm"> <input type="radio" name="collection-type" shopby-disabled value="SELLER" checked /> <span class="form-check__label">판매자 수거요청</span> </label> </li> <li> <label class="form-check form-check--sm"> <input type="radio" name="collection-type" value="BUYER" /> <span class="form-check__label">구매자 직접반품</span> </label> </li> </ul> <div slot="collectionType"> {{#ifEq collectionType 'SELLER'}} <!-- 판매자 수거 정보 --> <p class="claim-form__title"> 반품자명 <span class="dot dot--r-caution"></span> </p> <div class="claim-form__return-receiver"> <span class="input-field input-field--sm"> <input type="text" placeholder="이름을 입력하세요." shopby-max="50" slot="receiverName" value="{{returnAddress.receiverName}}" shopby-on:change="HANDLE_RECEIVER_NAME_CHANGE" shopby-on:input="HANDLE_RECEIVER_NAME_INPUT" shopby-focus-field="receiverName" /> </span> <button type="button" class="btn btn--line-dark btn--md" shopby-action="SELECT_FROM_SHIPPING_ADDRESSES">배송지 목록에서 선택</button> </div> <p class="claim-form__title"> 수거지 주소 <span class="dot dot--r-caution"></span> </p> <!-- 배송지 주소 --> <div class="shipping-address-form__item"> <form class="address-form"> <p class="address-form__zip-code"> <span class="input-field input-field--sm"> <input class="font-montserrat" type="text" slot="returnAddress" disabled value="{{returnAddress.receiverZipCd}}" /> </span> <button type="button" class="btn btn--line-dark btn--md" shopby-focus-field="receiverZipCdToReturn" shopby-action="SEARCH_ZIP_CODE_TO_RETURN" > 우편번호 찾기 </button> </p> <span class="input-field input-field--sm"> <input type="text" disabled slot="returnAddress" value="{{returnAddress.receiverAddress}}" /> </span> <span class="input-field input-field--sm"> <input type="text" slot="receiverDetailAddress" class="font-montserrat" value="{{returnAddress.receiverDetailAddress}}" shopby-max="100" shopby-focus-field="receiverDetailAddress" shopby-on:input="HANDLE_RECEIVER_DETAIL_ADDRESS_INPUT" shopby-on:change="HANDLE_RECEIVER_DETAIL_ADDRESS_CHANGE" /> </span> </form> </div> <!-- 배송지 주소 --> <p class="claim-form__title"> 휴대폰 번호 <span class="dot dot--r-caution"></span> </p> <span class="input-field input-field--sm"> <input class="font-montserrat" type="text" placeholder="휴대폰 번호 - 없이 입력" slot="receiverMobileNo" shopby-focus-field="receiverMobileNo" shopby-max="11" maxlength="11" value="{{returnAddress.receiverContact1}}" shopby-on:input="HANDLE_RECEIVER_NO_INPUT" shopby-on:change="HANDLE_RECEIVER_MOBILE_NO_CHANGE" /> </span> <p class="claim-form__title">전화번호</p> <span class="input-field input-field--sm"> <input class="font-montserrat" type="text" placeholder="전화번호 - 없이 입력" slot="receiverPhoneNo" shopby-focus-field="receiverPhoneNo" shopby-max="11" maxlength="11" value="{{returnAddress.receiverContact2}}" shopby-on:input="HANDLE_RECEIVER_NO_INPUT" shopby-on:change="HANDLE_RECEIVER_PHONE_NO_CHANGE" /> </span> <p class="claim-form__title">수거시 참고 사항</p> <span class="input-field input-field--sm"> <input type="text" placeholder="수거시 요청사항을 입력해 주세요." value="{{returnAddress.deliveryMemo}}" /> </span> <!-- 판매자 수거 정보 --> {{else}} <!-- 구매자 직접 반품 정보 --> <p class="claim-form__title">반품 주소지</p> <dl class="claim-form__return-information"> {{#with claimInfo.returnWarehouse}} <dt>이름</dt> <dd> {{#ifEq ../claimInfo.originalOption.shippingAreaType 'MALL_SHIPPING_AREA'}} {{../mallName}} {{else}} {{safeString receiverName true}} {{/ifEq}} </dd> <dt>주소</dt> <dd class="font-montserrat">{{summary}}</dd> <dt>전화번호</dt> <dd class="font-montserrat">{{safeString contact true}}</dd> {{/with}} </dl> <p class="claim-form__title"> 반품 접수 정보 <span class="claim-form__message claim-form__message--right">반품 접수 정보 입력은 필수가 아닙니다.</span> </p> <span class="select select--sm claim-form__return-delivery-company-type"> <select shopby-on:change="HANDLE_DELIVERY_COMPANY_TYPE_CHANGE" slot="deliveryCompanyTypeWithLabels" shopby-focus-field="deliveryCompanyType" > <option value="" disabled="" selected>택배사를 선택하세요.</option> {{#each claimInfo.deliveryCompanyTypeWithLabels}} <option value="{{deliveryCompanyType}}">{{label}}</option> {{/each}} </select> </span> <span class="input-field input-field--sm"> <input type="text" class="font-montserrat" placeholder="반품 송장번호 입력" slot="invoiceNo" shopby-focus-field="invoiceNo" shopby-max="50" value="{{invoiceNo}}" shopby-on:input="HANDLE_INVOICE_NO_INPUT" shopby-on:change="HANDLE_INVOICE_NO_CHANGE" /> </span> <!-- 구매자 직접 반품 정보 --> {{/ifEq}} </div> <p class="claim-form__message"> <span class="dot dot--l-gray"></span> 결제하신 수단에 따라 취소 방법이 다를 수 있습니다. </p> </section> {{/if}} </return-information-form> <!-- 반품 수거 정보 --> <!-- 교환 출고 정보 --> <exchange-information-form deliverable:query="deliverable" claimType:query="claimType"> {{#if isCollectionInfoFormNecessary}} {{#ifEq claimType 'EXCHANGE'}} <section class="claim-form__detail-information"> <p class="claim-form__section-title l-title">교환 출고 정보</p> <p class="claim-form__title"> 수령자명 <span class="dot dot--r-caution"></span> </p> <div class="claim-form__return-receiver"> <span class="input-field input-field--sm"> <input type="text" placeholder="이름을 입력하세요." shopby-max="50" slot="exchangeReceiverName" value="{{exchangeAddress.receiverName}}" shopby-on:change="HANDLE_RECEIVER_NAME_CHANGE" shopby-on:input="HANDLE_RECEIVER_NAME_INPUT" shopby-focus-field="exchangeReceiverName" /> </span> <button type="button" class="btn btn--line-dark btn--md" shopby-action="SELECT_FROM_SHIPPING_ADDRESSES_FOR_EXCHANGE"> 배송지 목록에서 선택 </button> </div> <p class="claim-form__title"> 배송지 주소 <span class="dot dot--r-caution"></span> </p> <!-- 배송지 주소 --> <div class="shipping-address-form__item"> <form class="address-form"> <p class="address-form__zip-code"> <span class="input-field input-field--sm"> <input class="font-montserrat" type="text" disabled slot="exchangeAddress" value="{{exchangeAddress.receiverZipCd}}" /> </span> <button type="button" class="btn btn--line-dark btn--md" shopby-focus-field="exchangeReceiverZipCd" shopby-action="SEARCH_ZIP_CODE_TO_EXCHANGE" > 우편번호 찾기 </button> </p> <span class="input-field input-field--sm"> <input class="font-montserrat" type="text" disabled slot="exchangeAddress" value="{{exchangeAddress.receiverAddress}}" /> </span> <span class="input-field input-field--sm"> <input type="text" class="font-montserrat" slot="exchangeDetailAddress" value="{{exchangeAddress.receiverDetailAddress}}" shopby-max="100" shopby-focus-field="exchangeDetailAddress" shopby-on:input="HANDLE_RECEIVER_DETAIL_ADDRESS_INPUT" shopby-on:change="HANDLE_RECEIVER_DETAIL_ADDRESS_CHANGE" /> </span> </form> </div> <!-- 배송지 주소 --> <p class="claim-form__title"> 휴대폰 번호 <span class="dot dot--r-caution"></span> </p> <span class="input-field input-field--sm"> <input class="font-montserrat" type="text" placeholder="휴대폰 번호 - 없이 입력" slot="exchangeMobileNo" shopby-focus-field="exchangeMobileNo" shopby-max="11" maxlength="11" value="{{exchangeAddress.receiverContact1}}" shopby-on:input="HANDLE_RECEIVER_NO_INPUT" shopby-on:change="HANDLE_RECEIVER_MOBILE_NO_CHANGE" /> </span> <p class="claim-form__title">전화번호</p> <span class="input-field input-field--sm"> <input class="font-montserrat" type="text" placeholder="전화번호 - 없이 입력" slot="exchangePhoneNo" shopby-focus-field="exchangePhoneNo" shopby-max="11" maxlength="11" value="{{exchangeAddress.receiverContact2}}" shopby-on:input="HANDLE_RECEIVER_NO_INPUT" shopby-on:change="HANDLE_RECEIVER_PHONE_NO_CHANGE" /> </span> <p class="claim-form__title">배송 메모</p> <span class="input-field input-field--sm"> <input type="text" placeholder="배송 시 요청사항을 입력해 주세요." shopby-max="50" value="{{exchangeAddress.deliveryMemo}}" shopby-on:change="HANDLE_DELIVERY_MEMO_CHANGE" shopby-on:input="HANDLE_DELIVERY_MEMO_INPUT" /> </span> <p class="claim-form__message"> <span class="dot dot--l-gray"></span> 결제하신 수단에 따라 취소 방법이 다를 수 있습니다. </p> {{#if exchangeAddress.customsIdNumber}} <p class="claim-form__title">개인통관고유부호</p> <span class="input-field input-field--sm"> <input type="text" class="font-montserrat" slot="customsIdNumber" shopby-focus-field="customsIdNumber" shopby-max="13" value="{{exchangeAddress.customsIdNumber}}" shopby-on:input="HANDLE_CUSTOMS_ID_NUMBER_INPUT" shopby-on:change="HANDLE_CUSTOMS_ID_NUMBER_CHANGE" /> </span> {{/if}} </section> {{/ifEq}} {{/if}} </exchange-information-form> <!-- 교환 출고 정보 --> <!-- 반품 수거 안내 --> <return-information-form deliverable:query="deliverable" claimType:query="claimType"> {{#if isCollectionInfoFormNecessary}} <section class="claim-form__detail-information"> <p class="claim-form__section-title l-title">반품 수거 안내</p> <span class="claim-form__message dot dot--l-gray">반품상황에 따라 (반품)택배비를 차감할 수 있습니다.</span> <span class="claim-form__message dot dot--l-gray">반품신청이 완료되면 입력하신 수거지주소로 반품수거가 진행됩니다.</span> <span class="claim-form__message dot dot--l-gray">CJ대한통은 택배기사가 1~2일 내에 직접 방문합니다.</span> <span class="claim-form__message dot dot--l-gray">반품등록일 오후 5시까지 접수분은 익일로 반품접수됩니다.</span> <span class="claim-form__message dot dot--l-gray">단, 토/일/공휴일은 다음 근무일에 처리됩니다.</span> </section> {{/if}} </return-information-form> <!-- 반품 수거 안내 --> <!-- 클레임 신청 --> <claim-type claim-type:query="claimType"> <section class="btn-group"> <button type="button" class="btn btn--line-dark btn--lg" shopby-action="HANDLE_CANCEL_BTN_CLICK">취소</button> <button type="submit" class="btn btn--fill-point btn--lg" claimType="{{claimType}}" shopby-action="HANDLE_CLAIM_BTN_CLICK"> {{claimStatusLabel claimType}} 신청 </button> </section> </claim-type> <!-- 클레임 신청 --> </main>

CSS 반영하기

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