HTML 반영하기

<main class="l-my-page" shopby-helper-key="my-page-helper-key"> <div class="my-page-box"> <my-menu> <div> <div class="my-page-menu" slot="boardConfig"> <h2 class="font-noto my-page-menu__title">마이페이지</h2> <ul class="my-page-menu__list"> <li class="my-page-menu__list-item"> <h3 class="sub-menu__title">쇼핑정보</h3> <ul class="sub-menu__list"> <li class="sub-menu__list-item {{#ifEq menuTitle '주문목록/배송조회'}}on{{/ifEq}}"> <a href="/pages/my/order-list.html">주문목록/배송조회</a> </li> <li class="sub-menu__list-item {{#ifEq menuTitle '취소/반품/교환 내역'}}on{{/ifEq}}"> <a href="/pages/my/claim-list.html">취소/반품/교환 내역</a> </li> <li class="sub-menu__list-item {{#ifEq menuTitle '좋아요'}}on{{/ifEq}}"> <a href="/pages/my/like-product-list.html">좋아요</a> </li> {{#if includesPreviousOrder}} <li class="sub-menu__list-item {{#ifEq menuTitle '이전 주문목록'}}on{{/ifEq}}"> <a href="/pages/my/previous-order-list.html">이전 주문목록</a> </li> {{/if}} </ul> </li> <li class="my-page-menu__list-item"> <h3 class="sub-menu__title">혜택관리</h3> <ul class="sub-menu__list"> <li class="sub-menu__list-item {{#ifEq menuTitle '쿠폰'}}on{{/ifEq}}"> <a href="/pages/my/coupon-list.html">쿠폰</a> </li> <li class="sub-menu__list-item {{#ifEq menuTitle '적립금'}}on{{/ifEq}}"> <a href="/pages/my/accumulation-list.html">{{accumulationConfig.accumulationName}}</a> </li> </ul> </li> <li class="my-page-menu__list-item"> <h3 class="sub-menu__title">회원정보</h3> <ul class="sub-menu__list"> <li class="sub-menu__list-item {{#ifEq menuTitle '회원정보 수정'}}on{{/ifEq}}"> <a href="/pages/my/modify-member.html">회원정보 수정</a> </li> <li class="sub-menu__list-item {{#ifEq menuTitle '회원 탈퇴'}}on{{/ifEq}}"> <a href="/pages/my/withdrawal.html">회원 탈퇴</a> </li> <li class="sub-menu__list-item {{#ifEq menuTitle '배송지 관리'}}on{{/ifEq}}"> <a href="/pages/my/shipping-list.html">배송지 관리</a> </li> </ul> </li> <li class="my-page-menu__list-item"> <h3 class="sub-menu__title">나의 게시글</h3> <ul class="sub-menu__list"> {{#if boardConfig.inquiryConfig.used}} <li class="sub-menu__list-item {{#ifEq menuTitle '1:1문의'}}on{{/ifEq}}"> <a href="/pages/my/inquiry-list.html">{{{boardConfig.inquiryConfig.name}}}</a> </li> {{/if}} {{#if boardConfig.productInquiryConfig.used}} <li class="sub-menu__list-item {{#ifEq menuTitle '상품문의'}}on{{/ifEq}}"> <a href="/pages/my/product-inquiry-list.html">{{{boardConfig.productInquiryConfig.name}}}</a> </li> {{/if}} {{#if boardConfig.productReviewConfig.used}} <li class="sub-menu__list-item {{#ifEq menuTitle '상품후기'}}on{{/ifEq}}"> <a href="/pages/my/product-review-list.html">{{{boardConfig.productReviewConfig.name}}}</a> </li> {{/if}} </ul> </li> </ul> </div> </div> </my-menu> <div class="right-box"> <div class="right-box__container"> <profile-summary> <div class="my-info"> <article class="my-info__member"> <div class="my-info__member-container"> <div class="my-info__member-summary"> <p slot="profile" class="my-info__member-greeting"> {{#if profile.memberName}} <span class="bold">{{profile.memberName}}</span> {{else}} {{profile.memberId}} {{/if}} 님은 <span class="bold">{{profile.memberGradeName}}</span> 입니다. </p> </div> <div class="my-info__member-info"> <div class="my-info__member-type-container"> <span slot="profile" class="my-info__member-type">{{profile.memberTypeLabel}} 아이디 회원</span> <span slot="profileOrdersSummaryAmount"> 구매금액 {{convertToKoreanCurrency profileOrdersSummaryAmount.lastPayAmt}}원 </span> <span slot="profileOrdersSummaryAmount"> 구매횟수 {{convertToKoreanCurrency profileOrdersSummaryAmount.orderCnt}}회 </span> </div> <button type="button" class="btn btn--line-dark btn--md my-info__benefit-btn" shopby-action="GRADE_BENEFIT"> 나의혜택 </button> </div> </div> <div class="my-benefits-status"> <a class="my-benefits-status__link" href="/pages/my/coupon-list.html"> <p class="my-benefits-status__item">보유쿠폰</p> <div class="my-benefits-status__count"> <em class="font-montserrat" slot="couponSummary">{{convertToKoreanCurrency couponSummary.usableCouponCnt}}</em> <span>개</span> </div> </a> <a class="my-benefits-status__link" href="/pages/my/accumulation-list.html" slot="accumulationConfig"> <p class="my-benefits-status__item">{{accumulationConfig.accumulationName}}</p> <div class="my-benefits-status__count"> <em class="font-montserrat" slot="accumulationSummary"> {{convertToKoreanCurrency accumulationSummary.totalAvailableAmt}} </em> <span>원</span> </div> </a> <a class="my-benefits-status__link" href="/pages/my/like-product-list.html"> <p class="my-benefits-status__item">좋아요</p> <div class="my-benefits-status__count"> <em class="font-montserrat" slot="likeSummary">{{convertToKoreanCurrency likeSummary}}</em> <span>개</span> </div> </a> </div> </article> </div> </profile-summary> <my-order-status> <div> <div class="my-order-status"> <summary class="my-order-status__summary"> <span class="bold my-order-status__title">나의 주문 현황</span> <span class="my-order-status__description">최근 6개월 기준</span> </summary> <a class="my-order-status__link" href="/pages/my/order-list.html">더보기</a> </div> <div class="order-state"> <ul class="order-state__list"> <li class="order-state__item"> <a class="order-state__item-link" href="/pages/my/order-list.html?orderRequestTypes=DEPOSIT_WAIT"> <p class="order-state__item-title">미입금</p> <span class="bold order-state__item-price"> {{convertToKoreanCurrency depositWaitCnt}} <span class="order-state__item-unit">건</span> </span> </a> </li> <button type="button" class="order-state__item-link-icon"> <span class="ico ico--angle-down-black-24"></span> </button> <li class="order-state__item"> <a class="order-state__item-link" href="/pages/my/order-list.html?orderRequestTypes=PAY_DONE,PRODUCT_PREPARE,DELIVERY_PREPARE" > <p class="order-state__item-title">출고대기</p> <span class="bold order-state__item-price"> {{convertToKoreanCurrency (sum payDoneCnt productPrepareCnt deliveryPrepareCnt)}} <span class="order-state__item-unit">건</span> </span> </a> </li> <button type="button" class="order-state__item-link-icon"> <span class="ico ico--angle-down-black-24"></span> </button> <li class="order-state__item"> <a class="order-state__item-link" href="/pages/my/order-list.html?orderRequestTypes=DELIVERY_ING"> <p class="order-state__item-title">배송중</p> <span class="bold order-state__item-price"> {{convertToKoreanCurrency deliveryIngCnt}} <span class="order-state__item-unit">건</span> </span> </a> </li> <button type="button" class="order-state__item-link-icon"> <span class="ico ico--angle-down-black-24"></span> </button> <li class="order-state__item"> <div class="order-state__item-complete"> <a class="order-state__item-link" href="/pages/my/order-list.html?orderRequestTypes=DELIVERY_DONE"> <p class="order-state__item-title">배송완료</p> <span class="bold order-state__item-price"> {{convertToKoreanCurrency deliveryDoneCnt}} <span class="order-state__item-unit">건</span> </span> </a> <a class="order-state__item-link" href="/pages/my/claim-list.html"> <p class="order-state__item-title">취소/교환/반품</p> <span class="bold order-state__item-price"> {{convertToKoreanCurrency (sum cancelDoneCnt cancelProcessingCnt exchangeDoneCnt exchangeProcessingCnt returnDoneCnt returnProcessingCnt)}} <span class="order-state__item-unit">건</span> </span> </a> </div> </li> </ul> </div> </div> </my-order-status> <my-board-status> <div class="my-board-status"> <!-- 1:1 문의 --> <div class="my-board-status__box"> <div class="box__header"> <span class="box__title">1:1문의</span> <button class="box__link" shopby-action="INQUIRY_REGISTER">문의하기 ></button> </div> <div class="box__content"> <div class="box__content-container"> <span class="box__content-name">답변 대기</span> <span class="font-montserrat box__content-count"> <a class="box__content-link" href="/pages/my/inquiry-list.html"> {{convertToKoreanCurrency inquirySummary.progressCnt}} </a> <span class="box__content-unit">건</span> </span> </div> <div class="box__content-container"> <span class="box__content-name">답변 완료</span> <span class="font-montserrat box__content-count"> <a class="box__content-link" href="/pages/my/inquiry-list.html"> {{convertToKoreanCurrency inquirySummary.answeredCnt}} </a> <span class="box__content-unit">건</span> </span> </div> </div> </div> <!-- 상품문의 --> <div class="my-board-status__box"> <div class="box__header"> <span class="box__title">상품문의</span> <button class="box__link" shopby-action="PRODUCT_INQUIRY_REGISTER">문의하기 ></button> </div> <div class="box__content"> <div class="box__content-container"> <span class="box__content-name">답변 대기</span> <span class="font-montserrat box__content-count"> <a class="box__content-link" href="/pages/my/product-inquiry-list.html"> {{convertToKoreanCurrency productInquirySummary.progressCnt}} </a> <span class="box__content-unit">건</span> </span> </div> <div class="box__content-container"> <span class="box__content-name">답변 완료</span> <span class="font-montserrat box__content-count"> <a class="box__content-link" href="/pages/my/product-inquiry-list.html"> {{convertToKoreanCurrency productInquirySummary.answeredCnt}} </a> <span class="box__content-unit">건</span> </span> </div> </div> </div> <!-- 상품후기 --> <div class="my-board-status__box"> <div class="box__header"> <span class="box__title">상품후기</span> <button class="box__link" shopby-action="PRODUCT_REVIEW_REGISTER">작성하기 ></button> </div> <div class="box__content"> <div class="box__content-container"> <span class="box__content-name">작성가능 후기</span> <span class="font-montserrat box__content-count"> <a class="box__content-link" href="/pages/my/product-review-list.html"> {{convertToKoreanCurrency productReviewSummary.availableCnt}} </a> <span class="box__content-unit">건</span> </span> </div> <div class="box__content-container"> <span class="box__content-name">작성완료 후기</span> <span class="font-montserrat box__content-count"> <a class="box__content-link" href="/pages/my/product-review-list.html"> {{convertToKoreanCurrency productReviewSummary.completedCnt}} </a> <span class="box__content-unit">건</span> </span> </div> </div> </div> </div> </my-board-status> <!-- 최근 본 상품 --> <recent-product> <div class="my-recent-product"> <summary class="my-recent-product__summary"> <span class="bold my-recent-product__title">최근 본 상품</span> </summary> <div class="thumb-box-wrap" slot="recentProducts"> {{#if recentProducts}} <div class="thumb-box"> <div class="thumb-item"> <div class="swiper my-recent-product-slider" shopby-slider-id="recent-product__slider"> <ul class="swiper-wrapper"> {{#each recentProducts}} <li class="swiper-slide thumb-item-wrap"> <a href="/pages/product/product-detail.html?productNo={{productNo}}"> <div class="thumb-item__img"> <img src="{{src}}" alt="{{alt}}" loading="lazy" /> <button type="button" class="btn thumb-fab thumb-fab--like{{#if liked}} is-active{{/if}}" shopby-action="PRODUCT_LIKE_BTN" shopby-product-no="{{productNo}}" > <svg width="40" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"> <path d="M52.29 19.24c-6.382 0-10.932 3.926-12.41 6.888-1.82-3.086-8.408-8.31-14.79-6.888-7.977 1.777-12.613 11.532-5.774 21.324C25.521 49.45 34.74 56.557 39.88 61c5.319-4.443 17.728-14.216 22.16-22.213 5.596-10.097-1.773-19.547-9.75-19.547Z" stroke="var(--color-point)" stroke-width="5" stroke-linejoin="round" ></path> </svg> </button> </div> <div class="thumb-item__info"> <div class="thumb-item__info-name font-noto">{{{productName}}}</div> </div> <div class="thumb-item__info-price"> <div class="current-price"> {{#if hasDiscount}} <span class="product-thumb__immediately-percent font-montserrat"> {{calculateDiscountRate discountedPrice originalPrice}}% </span>   {{/if}} <em class="font-montserrat">{{convertToKoreanCurrency discountedPrice }}</em> <span class="font-noto">원</span> </div> {{#if hasDiscount}} <span class="origin-price"> <s class="font-montserrat">{{convertToKoreanCurrency originalPrice}}</s> <s class="font-noto">원</s> </span> {{/if}} </div> <div class="thumb-item__icon-box"> {{#each stickers}} {{#ifEq type 'TEXT'}} <span>{{safeString label}}</span> {{else}} <img class="product-thumb__sticker-img" src="{{label}}" alt="{{name}}아이콘" /> {{/ifEq}} {{/each}} </div> </a> </li> {{/each}} </ul> </div> {{#ifGe recentProducts.length 4}} <button class="thumb-pagination-btn-prev sprite-image pagination__btn pagination__btn--lt"></button> <button class="thumb-pagination-btn-next sprite-image pagination__btn pagination__btn--rt"></button> {{/ifGe}} </div> </div> {{else}} <div class="notice empty-list"> <span class="sprite-image notice--warning"></span> <em class="notice__description--center">최근 본 상품이 없습니다.</em> </div> {{/if}} </div> </div> </recent-product> </div> </div> </div> </main> <main shopby-helper-key="my-page-helper-key"> <profile-summary> <div class="my-info"> <article class="my-info__member"> <div class="my-info__member-summary"> <p slot="profile" class="my-info__member-greeting"> {{#if profile.memberName}} <span class="bold">{{profile.memberName}}</span> {{else}} {{profile.memberId}} {{/if}} 님은 <br /> <span class="bold">{{profile.memberGradeName}}</span> 입니다. </p> <button type="button" class="btn btn--line-dark btn--md my-info__benefit-btn" shopby-action="GRADE_BENEFIT">나의혜택</button> </div> <div class="my-info__member-info"> <span slot="profile" class="my-info__member-type">{{profile.memberTypeLabel}} 아이디 회원</span> <span slot="profileOrdersSummaryAmount" class="my-info__member-type font-montserrat"> 구매금액 {{convertToKoreanCurrency profileOrdersSummaryAmount.lastPayAmt}}원 </span> <span slot="profileOrdersSummaryAmount" class="my-info__member-type font-montserrat"> 구매횟수 {{convertToKoreanCurrency profileOrdersSummaryAmount.orderCnt}}회 </span> </div> </article> <div class="my-coupon-data"> <a class="my-coupon-data__link" href="/pages/my/coupon-list.html"> 보유쿠폰 <div class="my-coupon-data__num"> <em slot="couponSummary" class="font-montserrat">{{convertToKoreanCurrency couponSummary.usableCouponCnt}}</em> <span>개</span> </div> </a> <a class="my-coupon-data__link" href="/pages/my/accumulation-list.html" slot="accumulationConfig"> {{accumulationConfig.accumulationName}} <div class="my-coupon-data__num"> <em slot="accumulationSummary" class="font-montserrat">{{convertToKoreanCurrency accumulationSummary.totalAvailableAmt}}</em> <span>원</span> </div> </a> <a class="my-coupon-data__link" href="/pages/my/like-product-list.html"> 좋아요 <div class="my-coupon-data__num"> <em slot="likeSummary" class="font-montserrat">{{convertToKoreanCurrency likeSummary}}</em> <span>개</span> </div> </a> </div> </div> </profile-summary> <my-order-status> <div> <div class="my-order-status"> <summary class="my-order-status__summary"> <span class="bold my-order-status__title">나의 주문 현황</span> <span class="my-order-status__description"> 최근 <span class="font-montserrat">6</span> 개월 기준 </span> </summary> <a class="my-order-status__link" href="/pages/my/order-list.html">더보기</a> </div> <div class="order-state"> <ul class="order-state__list"> <li class="order-state__item"> <a class="order-state__item-link" href="/pages/my/order-list.html?orderRequestTypes=DEPOSIT_WAIT"> <span class="bold order-state__item-price font-montserrat"> {{depositWaitCnt}} <span class="order-state__item-unit">건</span> </span> <p class="order-state__item-title">미입금</p> </a> </li> <button type="button" class="order-state__item-link-icon"> <span class="ico ico--angle-down-black-24"></span> </button> <li class="order-state__item"> <a class="order-state__item-link" href="/pages/my/order-list.html?orderRequestTypes=PAY_DONE,PRODUCT_PREPARE,DELIVERY_PREPARE"> <span class="bold order-state__item-price font-montserrat"> {{sum payDoneCnt productPrepareCnt deliveryPrepareCnt}} <span class="order-state__item-unit">건</span> </span> <p class="order-state__item-title">출고대기</p> </a> </li> <button type="button" class="order-state__item-link-icon"> <span class="ico ico--angle-down-black-24"></span> </button> <li class="order-state__item"> <a class="order-state__item-link" href="/pages/my/order-list.html?orderRequestTypes=DELIVERY_ING"> <span class="bold order-state__item-price font-montserrat"> {{deliveryIngCnt}} <span class="order-state__item-unit">건</span> </span> <p class="order-state__item-title">배송중</p> </a> </li> <button type="button" class="order-state__item-link-icon"> <span class="ico ico--angle-down-black-24"></span> </button> <li class="order-state__item"> <a class="order-state__item-link" href="/pages/my/order-list.html?orderRequestTypes=DELIVERY_DONE"> <span class="bold order-state__item-price font-montserrat"> {{deliveryDoneCnt}} <span class="order-state__item-unit">건</span> </span> <p class="order-state__item-title">배송완료</p> </a> </li> </ul> <div class="order-state__etc" slot="previousOrder"> <div class="order-state__etc-item"> <a href="/pages/my/claim-list.html"> <span class="order-state__item-title"> 취소/교환/반품 <span class="order-state__item-count font-montserrat"> {{sum cancelDoneCnt cancelProcessingCnt exchangeDoneCnt exchangeProcessingCnt returnDoneCnt returnProcessingCnt}} </span> 건 </span> </a> </div> {{#if previousOrder.includesPreviousOrder}} <div class="order-state__etc-item"> <a href="/pages/my/previous-order-list.html"> <span class="order-state__item-title"> 이전 주문 목록 <span class="order-state__item-count font-montserrat">{{previousOrder.count}}</span> 건 </span> </a> </div> {{/if}} </div> </div> </div> </my-order-status> <my-menu> <div> <div class="my-link__list" slot="boardConfig"> <a class="my-link" href="/pages/my/modify-member.html"> 회원정보 수정 <button type="button" class="my-link__ico"> <span class="ico ico--angle-down-black-24"></span> </button> </a> <a class="my-link" href="/pages/my/shipping-list.html"> 배송지 관리 <button type="button" class="my-link__ico"> <span class="ico ico--angle-down-black-24"></span> </button> </a> {{#if boardConfig.inquiryConfig.used}} <a class="my-link" href="/pages/my/inquiry-list.html"> {{{boardConfig.inquiryConfig.name}}} <button type="button" class="my-link__ico"> <span class="ico ico--angle-down-black-24"></span> </button> </a> {{/if}} {{#if boardConfig.productInquiryConfig.used}} <a class="my-link" href="/pages/my/product-inquiry-list.html"> {{{boardConfig.productInquiryConfig.name}}} <button type="button" class="my-link__ico"> <span class="ico ico--angle-down-black-24"></span> </button> </a> {{/if}} {{#if boardConfig.productReviewConfig.used}} <a class="my-link" href="/pages/my/product-review-list.html"> {{{boardConfig.productReviewConfig.name}}} <button type="button" class="my-link__ico"> <span class="ico ico--angle-down-black-24"></span> </button> </a> {{/if}} <a class="my-link" href="/pages/my/withdrawal.html"> 회원 탈퇴 <button type="button" class="my-link__ico"> <span class="ico ico--angle-down-black-24"></span> </button> </a> </div> </div> </my-menu> </main>

CSS 반영하기

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