Aurora Modules

쿠폰

쿠폰 페이지에서 노출되는 쿠폰 모듈입니다.

URL: /pages/my/coupon-list.html?startYmd={startYmd}&dateType={dateType}&pageSize={pageSize}&pageNumber={pageNumber}&sortDirection={sortDirection}&usable={usable}

사용 가능 변수

변수명	타입	기본값	설명
currentTab	ISSUABLE \| UNISSUABLE	ISSUABLE	현재 선택된 탭
usableCouponCnt	number	0	사용가능 쿠폰 개수
expiringCouponCnt	number	0	사용/기간 만료 쿠폰 개수

모듈명: coupon-tabs원본소스

쿠폰 탭 모듈입니다.

속성

속성명	타입	기본값	설명
shopby-tab-value	string	ISSUABLE	탭 속성 값

사용 가능 변수

변수명	타입	기본값	설명
currentTab	ISSUABLE \| UNISSUABLE	ISSUABLE	현재 선택된 탭

모듈명: coupon-list원본소스

쿠폰 목록 모듈입니다.

속성

속성명	타입	기본값	설명
start-ymd:query	string	-	`query string` 중 `startYmd` 기간조회 시작일
page-size page-size:query	number string	20 pageSize	`query string` 중 `pageSize` 값 한 페이지 노출 수
page-number page-number:query	number string	1 pageNumber	`query string` 중 `pageNumber` 값 페이지 번호
sort-direction:query	DESC \| ACS	DESC	`query string` 중 `sortDirection` 값 쿠폰 리스트 오름/내림차순 정렬
pair-key	string	-	'더보기 버튼' key
uses-more-button	boolean	false	'더보기 버튼' 사용 여부
uses-pagination	boolean	false	'페이지네이션' 사용 여부
default-page-size	number	20	page-size가 없는 경우 기본 페이지 크기
visible-pages-count	number	5	페이지네이션 표시 페이지 수

사용 가능 변수

변수명	타입	기본값	설명
currentTab	ISSUABLE \| UNISSUABLE	ISSUABLE	현재 선택된 탭
totalCount	number	0	내 쿠폰 가져오기 API 응답 중 `totalCount`와 동일 (쿠폰 총 개수)
items	Items[]	[]	내 쿠폰 가져오기 API API 응답 중 `items`와 동일 (쿠폰 목록) (아래 타입 참조)

Items 타입

속성명	타입	기본값	설명
reason	string	-	쿠폰 발급 사유
couponName	string	-	쿠폰 명
discountRate	number	0	할인율
discountAmt	number	0	할인금액
couponIssueNo	number	0	쿠폰 발급 번호

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-my-page">
    <div class="my-page-box">
        <div class="right-box">
            <div class="right-box__container">
                <coupon-tabs>
                    <div>
                        <ul class="tab my-page-coupon__tab" slot="tabs">
                            <li>
                                <button
                                    type="button"
                                    class="tab__btn my-page-coupon__tab-btn {{#ifEq currentTab 'ISSUABLE'}}is-active{{/ifEq}}"
                                    shopby-on:click="TAB_CLICK"
                                    shopby-tab-value="ISSUABLE"
                                >
                                    사용 가능 쿠폰
                                </button>
                            </li>
                            <li>
                                <button
                                    type="button"
                                    class="tab__btn my-page-coupon__tab-btn {{#ifEq currentTab 'UNISSUABLE'}}is-active{{/ifEq}}"
                                    shopby-on:click="TAB_CLICK"
                                    shopby-tab-value="UNISSUABLE"
                                >
                                    사용 불가 쿠폰
                                </button>
                            </li>
                        </ul>
                    </div>
                </coupon-tabs>

                <coupon-total-count>
                    <div>
                        <div slot="totalCount">
                            {{#ifEq currentTab 'ISSUABLE'}}
                            <summary class="l-title l-title__align-end right-box__no-end-line">
                                <div class="my-page__total-count-box">
                                    <p class="my-page__total-count coupon-total-count">
                                        사용가능 쿠폰 수
                                        <span class="my-page__count">
                                            <span class="highlight" slot="usableCouponCnt">{{usableCouponCnt}}</span>
                                            건
                                        </span>
                                    </p>
                                </div>
                                <button type="button" class="btn btn--fill-point btn--sm" shopby-action="REGISTER">쿠폰 등록</button>
                            </summary>
                            {{/ifEq}}
                        </div>
                    </div>
                </coupon-total-count>

                <coupon-list
                    default-page-size="20"
                    page-size:query="pageSize"
                    page-number:query="pageNumber"
                    sort-direction:query="sortDirection"
                    start-ymd:query="startYmd"
                    usable:query="usable"
                    uses-pagination
                >
                    <div>
                        <div class="my-page-coupon" slot="couponList">
                            <table class="l-table my-page-coupon__table">
                                <colgroup>
                                    <col style="width: 25%" />
                                    <col />
                                    <col />
                                    <col style="width: 130px" />
                                    <col style="width: 130px" />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>쿠폰명</th>
                                        <th>혜택정보</th>
                                        <th>사용/제한 조건</th>
                                        <th>만료일</th>
                                        <th>발급일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each items}}
                                    <tr shopby-coupon-no="{{couponNo}}" shopby-coupon-target-type="{{couponTargetType}}" shopby-coupon-idx="{{@index}}">
                                        <td class="td_left">{{couponName}}</td>
                                        <td>
                                            <span class="my-page-coupon__coupon-detail-amount-info">
                                                <span class="font-montserrat bold my-page-coupon__coupon-detail-amount">
                                                    {{convertToKoreanCurrency amount}}
                                                </span>
                                                <span>{{unit}}</span>
                                                <span>{{couponTypeLabel}} 할인</span>
                                            </span>
                                        </td>
                                        <td>
                                            <div class="my-page-coupon__coupon-detail-box">
                                                {{#if limitSalePrice}}
                                                <span class="my-page-coupon__coupon_date_day">
                                                    <p>{{convertToKoreanCurrency limitSalePrice}} 원 이상</p>
                                                    <p>구매 시 사용가능</p>
                                                </span>
                                                {{/if}}
                                                <span class="font-noto my-page-coupon__coupon-detail-text" shopby-on:click="VIEW_CONDITION_DETAIL">
                                                    상세보기
                                                </span>
                                                {{#if openTooltip}}
                                                <div
                                                    class="my-menu__list font-noto my-page-coupon__condition-tooltip"
                                                    shopby-condition-tooltip="shopby-condition-tooltip"
                                                >
                                                    <div class="my-page-coupon__tooltip">
                                                        <h3 class="my-page-coupon__tooltip-title">
                                                            사용/제한 조건
                                                            <button class="title-modal__close-btn" shopby-on:click="CLOSE_TOOLTIP">
                                                                <span class="ico ico--x-black-12"></span>
                                                            </button>
                                                        </h3>
                                                        <dl>
                                                            <dt>사용 가능 플랫폼</dt>
                                                            <dd>{{platform}}</dd>
                                                        </dl>
                                                        <dl>
                                                            <dt>최소 기준금액</dt>
                                                            <dd>{{limitSalePrice}}원 이상 구매 시 사용 가능</dd>
                                                        </dl>
                                                        {{#unless fixedAmt}}
                                                        <dl>
                                                            <dt>최대 할인금액</dt>
                                                            <dd>최대 {{convertToKoreanCurrency maxDiscountAmt}}원 할인</dd>
                                                        </dl>
                                                        {{/unless}} {{#if availableCategories}}
                                                        <dl>
                                                            <dt>사용가능 카테고리</dt>
                                                            {{#each availableCategories}}
                                                            <dd>{{this}}</dd>
                                                            {{/each}}
                                                        </dl>
                                                        {{/if}} {{#if availableProducts}}
                                                        <dl>
                                                            <dt>사용가능 상품</dt>
                                                            <dd>{{safeString availableProducts}}</dd>
                                                        </dl>
                                                        {{/if}} {{#if memberGradeNames}}
                                                        <dl>
                                                            <dt>사용가능 회원등급</dt>
                                                            <dd>{{memberGradeNames}}</dd>
                                                        </dl>
                                                        {{/if}} {{#if unusableProduct}}
                                                        <dl>
                                                            <dt>사용불가 상품</dt>
                                                            <dd>{{safeString unusableProduct}}</dd>
                                                        </dl>
                                                        {{/if}} {{#if isLimit}}
                                                        <dl>
                                                            <dt>사용 시 혜택 제한</dt>
                                                            {{#if skipsAccumulation}}
                                                            <dd>적립금 적립 불가</dd>
                                                            {{/if}} {{#unless cartCouponUsable}}
                                                            <dd>{{limitCouponTypeLabel}} 쿠폰 사용 불가</dd>
                                                            {{/unless}} {{#unless productCouponUsable}}
                                                            <dd>{{limitCouponTypeLabel}} 쿠폰 사용 불가</dd>
                                                            {{/unless}}
                                                        </dl>
                                                        {{/if}}
                                                    </div>
                                                </div>
                                                {{/if}}
                                            </div>
                                        </td>
                                        <td>
                                            {{#if expireYmdt}}
                                            <div class="my-page-coupon__coupon-detail-box">
                                                <span class="my-page-coupon__coupon_date_day">{{expireYmdt}}</span>
                                                {{#if used}}
                                                <span class="alert alert--loading">사용완료</span>
                                                {{else}} {{#if expiration}}
                                                <span class="alert alert--success">사용가능</span>
                                                {{else}}
                                                <span class="alert alert--warning">기간만료</span>
                                                {{/if}} {{/if}}
                                            </div>
                                            {{else}} - {{/if}}
                                        </td>
                                        <td>
                                            {{#if issueYmdt}}
                                            <span class="my-page-coupon__coupon_date_day">{{formatUseByDate issueYmdt}}</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">
                                        <span class="sprite-image notice--warning"></span>
                                        <em class="notice__description--center">쿠폰 내역이 없습니다.</em>
                                    </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>
                </coupon-list>
            </div>
        </div>
    </div>
</main>

<main class="l-content">
    <div class="my-page-coupon">
        <coupon-tabs>
            <div class="tabs-wrap">
                <ul class="tab" slot="tabs">
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'ISSUABLE'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="ISSUABLE"
                        >
                            사용 가능 쿠폰
                        </button>
                    </li>
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'UNISSUABLE'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="UNISSUABLE"
                        >
                            사용 불가 쿠폰
                        </button>
                    </li>
                </ul>
            </div>
        </coupon-tabs>
        <div class="my-page-coupon__wrap">
            <coupon-total-count>
                <div>
                    <summary class="l-title l-title--md-medium l-title--center my-page__summary" slot="totalCount">
                        {{#ifEq currentTab 'ISSUABLE'}}
                        <span class="my-page__total-count">
                            사용가능 쿠폰 수
                            <span class="my-page__count">
                                <span slot="usableCouponCnt">{{usableCouponCnt}}</span>
                                건
                            </span>
                        </span>
                        <button type="button" class="btn btn--fill-point btn--sm" shopby-action="REGISTER">쿠폰 등록</button>
                        {{/ifEq}}
                    </summary>
                </div>
            </coupon-total-count>

            <coupon-list
                pair-key="COUPON_MORE_VIEW_BUTTON"
                default-page-size="20"
                page-size:query="pageSize"
                page-number:query="pageNumber"
                sort-direction:query="sortDirection"
                start-ymd:query="startYmd"
                uses-more-button
            >
                <div>
                    <div slot="couponList">
                        {{#if totalCount}}
                        <ul class="my-page-coupon__list">
                            {{#each items}}
                            <li
                                class="my-page-coupon__list-item my-page-coupon__list-item--{{#ifEq ../currentTab 'ISSUABLE'}}issuable{{else}}unissuable{{/ifEq}}"
                                shopby-coupon-no="{{couponNo}}"
                                shopby-coupon-target-type="{{couponTargetType}}"
                                shopby-coupon-idx="{{@index}}"
                            >
                                <div class="my-page-coupon__box">
                                    <div class="my-page-coupon__coupon-info">
                                        <div class="my-page-coupon__content">
                                            <p class="my-page-coupon__name">{{couponName}}</p>

                                            <p class="my-page-coupon__discounted-price">
                                                {{ amount}}
                                                <span class="my-page-coupon__unit">{{unit}}</span>
                                                <span class="my-page-coupon__discount-label">{{couponTypeLabel}} 할인</span>
                                            </p>

                                            {{#ifGt maxAmount 0}}
                                            <p class="my-page-coupon__max-amount">최대 {{ maxAmount}}원 할인</p>
                                            {{/ifGt}} {{#ifGt limitSalePrice 0}}
                                            <p class="my-page-coupon__limit-sale-price">{{ limitSalePrice}} 원 이상 구매 시 사용가능</p>
                                            {{/ifGt}}
                                        </div>
                                    </div>
                                    <div class="my-page-coupon__coupon-sub-info">
                                        <span class="my-page-coupon__date">
                                            {{#if used}} {{ useEndYmdt}} {{else}} {{#if issueYmdt}} {{ issueYmdt}} ~ {{ expireYmdt}} {{else}} {{ expireYmdt}}
                                            {{/if}} {{/if}}
                                        </span>
                                        <button type="button" class="btn my-page-coupon__coupon-limit" shopby-on:click="VIEW_CONDITION_DETAIL">
                                            사용/제한 조건
                                        </button>
                                    </div>
                                </div>
                            </li>
                            {{/each}}
                        </ul>
                        {{else}}
                        <div class="notice notice--full">
                            <span class="sprite-image notice--warning"></span>
                            <em>보유한 쿠폰이 없습니다.</em>
                        </div>
                        {{/if}}
                    </div>
                </div>
            </coupon-list>

            <more-view-button pair-key="COUPON_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>
    </div>
</main>

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