Aurora Modules

기획전 상세

기획전 상세 페이지에서 노출되는 기획전 상세 모듈입니다.

URL: /pages/event/event-detail.html?event={event}

모듈명: event-detail-label원본소스

기획전 상세 기획전명 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
eventLabel	string	-	기획전 상세 조회 V2 API 응답 중 `label`와 동일 (기획전명)

모듈명: event-detail-top-image원본소스

기획전 상세 상단 이미지 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
top	Top	-	기획전 상세 조회 V2 API 응답값 중 `top` 와 동일 (아래 타입 참조)
label	string	-	기획전 상세 조회 V2 API 응답값 중 `label`와 동일 (기획전명)

Top 타입

속성명	타입	기본값	설명
pc	FileUrlByPlatform	-	pc 플랫폼 타입별 타입, 상단 이미지 URL (아래 타입 참조)
mobile	FileUrlByPlatform	-	mobile 플랫폼 타입별 타입, 상단 이미지 URL (아래 타입 참조)

FileUrlByPlatform 타입

속성명	타입	기본값	설명
type	HTML \| FILE	-	URL 타입
url	string	-	상단 이미지 URL

모듈명: event-detail-display-menu원본소스

기획전 상세 상품진열 메뉴 모듈입니다.

해당 모듈은 INIT_EVENT_PRODUCT_SECTION_SLIDER로 swiper 옵션을 설정합니다.

속성

속성명	타입	기본값	설명
device-type	MOBILE \| PC	PC	플랫폼 타입 MOBILE \| PC `MOBILE`인 경우 메뉴에 슬라이드 기능 적용

사용 가능 변수

변수명	타입	기본값	설명
currentTabId	string	-	현재 선택된 섹션 탭 ID
slider	SliderIdState	-	슬라이더 고유 id (아래 타입 참조)
displayMenus	DisplayMenus[]	[]	기획전 상세 조회 V2 API 응답 값 중 `section`에 id가 추가된 상품진열 섹션 목록 (아래 타입 참조)
sectionNo	string	-	현재 선택된 상품진열 섹션 번호

SliderIdState 타입

속성명	타입	기본값	설명
id	string	-	슬라이더의 고유 id

DisplayMenus 타입

속성명	타입	기본값	설명
displayableStock	boolean	false	재고 노출 여부 (false:재고 미노출 / true:재고 노출)
sectionNo	number	-	섹션 번호
imageUrl	string	-	이미지 URL
label	string	-	섹션명
displayOrder	number	-	섹션의 전시 순서
pcPerRow	number	-	한 행에 디스플레이 되는 이미지 개수(PC)
mobilePerRow	number	-	한 행에 디스플레이 되는 이미지 개수(MOBILE)
id	string	-	상품진열 섹션 탭 ID (Helper에서 변환 과정에서 추가되는 필드)

모듈명: event-detail-product-list원본소스

(deprecated) event-detail-product-list-v2를 사용하세요. 기획전 상세 상품섹션 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
isLoading	boolean	true	`products` 데이터 로딩 여부
mobilePerRow	number	0	한 행에 디스플레이 되는 이미지 개수
totalCount	number	0	선택된 상품진열 섹션에 등록된 상품 수
products	Products[]	[]	기획전 상세 조회하기 API 응답 값 중 현재 선택된 `section`에 `products`와 동일 (상품목록) (아래 타입 참조)

Products 타입

속성명	타입	기본값	설명
productNo	number	-	상품번호
saleStatusType	READY \| ONSALE \| FINISHED \| STOP \| PROHIBITION	-	판매상태
imageUrls	string[]	[]	상품 이미지 URL
productName	string	-	상품명
isSoldOut	boolean	false	판매완료 여부
liked	boolean	false	좋아요 여부
contentsIfPausing	string	-	판매중지 시 가격대체문구
salePrice	number	0	상품판매가
immediateDiscountAmt	number	0	즉시할인가
additionDiscountAmt	number	0	추가상품할인가
hasDiscount	boolean	false	할인 여부
stickerInfos	StickerInfos	-	스티커 정보 (아래 타입 참조)

StickerInfos 타입

속성명	타입	기본값	설명
label	string	-	스티커 라벨
type	TEXT \| IMAGE	-	스티커 타입

모듈명: event-detail-product-list-v2원본소스

기획전 상세 상품섹션 V2 모듈입니다

속성

속성명	타입	기본값	설명
platform	string	-	플랫폼 타입
default-page-size	string	20	리스트의 기본 page size
page-size page-size:query	number string	20 pageSize	`query string` 중 `pageSize` 값 한 페이지 노출 수
page-number page-number:query	number string	1 pageNumber	`query string` 중 `pageNumber` 값 페이지 번호
section-no:query	string	-	(필수)`query string` 중 `sectionNo` 상품진열 섹션 번호
event:query	string	-	(필수)`query string` 중 `eventNo` 기획전 번호
sort-type:query	string	ADMIN_SETTING	`query string` 중 `sortType` 값 상품 정렬 타입
sold-out:query	string	-	`query string` 중 `soldOut` 값 품절 상품 포함 여부
include-stop-product:query	string	-	`query string` 중 `includeStopProduct` 값 판매중지 상품 포함 여부
pair-key	string	-	'더보기 버튼' 또는 '페이지네이션' 연결 키
shopby-accumulable	boolean	false	상품 목록 누적 여부 `true`인 경우 더보기 버튼 클릭 시 기존 상품 목록에 추가, `false`인 경우 기존 목록을 교체
visible-pages-count	number	5	페이지네이션 표시 페이지 수

사용 가능 변수

변수명	타입	기본값	설명
isLoading	boolean	true	`products` 데이터 로딩 여부
sectionNo	string	-	선택된 상품진열 섹션 번호
totalCount	number	0	선택된 상품진열 섹션에 등록된 상품 수 기획전 상품진열 상품 조회 API 응답 값 중 `totalCount`와 동일
products	Products[]	[]	기획전 상품진열 상품 조회 API 응답 값 중 `products`와 동일 (상품목록) (아래 타입 참조)
pagination	Pagination	-	페이지네이션 (아래 타입 참조)
currentTab	string	-	선택된 상품진열 섹션 탭 ID
gridTemplateColumnsStyle	string	-	상품진열 섹션 그리드 템플릿 컬럼 스타일
eventNo	number	-	기획전 번호 기획전 상세 조회 V2 API 응답 값 중 `eventNo`와 동일
pcPerRow	number	-	한 행에 디스플레이 되는 이미지 개수(PC) 기획전 상세 조회 V2 API 응답 값 중 `section[].pcPerRow`와 동일
mobilePerRow	number	-	한 행에 디스플레이 되는 이미지 개수(MOBILE) 기획전 상세 조회 V2 API 응답 값 중 `section[].mobilePerRow`와 동일

Products 타입

속성명	타입	기본값	설명
productNo	number	-	상품번호
saleStatusType	READY \| ONSALE \| FINISHED \| STOP \| PROHIBITION	-	판매상태
imageUrls	string[]	[]	상품 이미지 URL
productName	string	-	상품명
isSoldOut	boolean	false	판매완료 여부
liked	boolean	false	좋아요 여부
contentsIfPausing	string	-	판매중지 시 가격대체문구
salePrice	number	0	상품판매가
immediateDiscountAmt	number	0	즉시할인가
additionDiscountAmt	number	0	추가상품할인가
hasDiscount	boolean	false	할인 여부
stickerInfos	StickerInfos	-	스티커 정보 (아래 타입 참조)

StickerInfos 타입

속성명	타입	기본값	설명
label	string	-	스티커 라벨
type	TEXT \| IMAGE	-	스티커 타입

Pagination 타입

속성명	타입	기본값	설명
firstPage	string	-	첫번째 페이지
lastPage	string	-	마지막 페이지
prevPage	string	-	이전 페이지
nextPage	string	-	다음 페이지
pages	Page[]	[]	페이지 리스트
totalPages	number	0	페이지 총 개수

모듈명: event-detail-coupon-button원본소스

기획전 상세 쿠폰 버튼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
coupon	Coupon	-	기획전 상세 조회 V2 API 응답 값 중 `coupon`과 동일 (쿠폰 정보) (아래 타입 참조)

Coupon 타입

속성명	타입	기본값	설명
coupons	CouponItem[]	[]	쿠폰 목록 (아래 타입 참조)
beforeIssueImageUrl	string	-	쿠폰 발급전 이미지
alreadyIssuedImageUrl	string	-	기발급완료 이미지
guideImageUrl	string	-	기획전 사용안내 이미지
soldOutImageUrl	string	-	남은수량 부족 이미지
dateExpiredImageUrl	string	-	발급기간 만료 이미지
issuedImageUrl	string	-	발급완료 이미지

CouponItem 타입

속성명	타입	기본값	설명
couponNo	number	-	쿠폰 번호
couponName	string	-	쿠폰 이름
couponType	EventCouponType	-	쿠폰 종류
couponSubType	CART \| DELIVERYDEFAULT \| DELIVERYALL \| NONE	-	쿠폰 하위 타입
couponTargetType	ALL_PRODUCT \| PRODUCT \| BRAND \| CATEGORY \| PARTNER \| EVENT	-	쿠폰 대상 종류 (nullable)
downloadable	boolean	false	다운로드가능여부
imageUrl	string	-	이미지 URL
allianceRefererType	DIRECT \| NAVERKNOWLEDGESHOPPING	-	제휴 방문처 타입
discountInfo	DiscountInfo	-	쿠폰 할인 정보 (아래 타입 참조)
dateInfo	DateInfo	-	쿠폰 날짜 정보 (아래 타입 참조)
useConstraint	UseConstraint	-	쿠폰 사용 조건 정보 (아래 타입 참조)
issueConstraint	IssueConstraint	-	쿠폰 발행 조건 정보 (아래 타입 참조)
couponStatus	CouponStatus	-	쿠폰 상태 정보 (아래 타입 참조)

DiscountInfo 타입

속성명	타입	기본값	설명
discountRate	number	-	쿠폰 할인율
discountAmt	number	-	쿠폰 할인액
fixedAmt	boolean	false	정액여부
maxDiscountAmt	number	-	최대 할인액
freeDelivery	boolean	false	배송비 무료 여부(배송비쿠폰인경우)
useOtherCoupon	boolean	false	타 쿠폰과 함께 사용가능 여부
skippedAccumulationAmt	boolean	false	적립급 지금 불가 여부

DateInfo 타입

속성명	타입	기본값	설명
issueStartYmdt	string	-	발급 시작 일
issueEndYmdt	string	-	발급 제한 일
issueStartHour	number	-	발급 시작 시간
issueEndHour	number	-	발급 종료 시간
issueDaysOfWeek	string	-	발급 가능 요일

UseConstraint 타입

속성명	타입	기본값	설명
minSalePrice	number	-	쿠폰 사용조건 최소 구매액
maxSalePrice	number	-	쿠폰 사용조건 최대 구매액
minDeliveryAmt	number	-	쿠폰 사용조건 최소 배송비
useDays	number	-	사용가능 기간 - 쿠폰을 발급받은 날부터 (31은 월말까지, -1은 제한없음)
useEndYmdt	string	-	사용 사용종료 일
usablePlatformTypes	string[]	-	사용가능플랫폼
limitPayType	string	-	쿠폰 사용조건 결제수단

IssueConstraint 타입

속성명	타입	기본값	설명
dailyIssueLimit	boolean	false	1일내 발급 수량 제한 여부 (true: 1일내 발급 수량 제한, false: 1일내 발급 수량 비제한)
dailyIssueLimitCnt	number	-	1일내 발급 제한 수량
issuePerPersonLimit	boolean	false	1인당 발급수량제한여부 (true: 1인당 발급 수량 제한, false: 1인당 발급 수량 비제한)
issuePerPersonLimitCnt	number	-	1인당 발급 제한 수량(총기간)
dailyIssuePerPersonLimitCnt	number	-	1인당 발급 제한 수량(1일간)
issuablePlatformTypes	string[]	-	발행가능 플랫폼
memberGradeName	string	-	발급대상 회원 등급

CouponStatus 타입

속성명	타입	기본값	설명
totalIssuableCnt	number	-	쿠폰 발행가능 수량
totalIssuedCnt	number	-	총 발행수량
totalIssuedCntToday	number	-	총 발행수량(오늘)
issuableCnt	number	-	발급가능수량
myIssuedCnt	number	-	내가 발급 받은 개수
myIssuedCntToday	number	-	내가 발급 받은 개수(오늘)

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-page event-detail">
    <section class="page-content-top">
        <ol class="page-content-top__path page-content-top__location">
            <li><a href="/">HOME</a></li>
            >
            <li>기획전</li>
        </ol>
    </section>

    <div class="event-detail__content" shopby-helper-key="event-detail-helper-key">
        <event-detail-label>
            <section>
                <div class='l-title l-title__align-end'>
                    {{{eventLabel}}}
                </div>
            </section>
        </event-detail-label>

        <!-- 상단이미지 -->
        <event-detail-top-image>
            <section class='event-detail__top editor'>
                <div slot='top'>
                    {{#with top.pc}}
                        {{#if url}}
                            {{#ifEq type 'HTML'}}
                                {{{url}}}
                            {{else}}
                                {{img url 1200 300 label 'middle' ''}}
                            {{/ifEq}}
                        {{/if}}
                    {{/with}}
                </div>
            </section>
        </event-detail-top-image>
        <!-- 상단이미지 -->

        <!-- 쿠폰받기 -->
        <event-detail-coupon-button>
            <div slot="coupon">
                {{#ifGt coupon.coupons.length 0}}
                    <button
                        type='button'
                        class='event-detail__coupon-download-btn'
                        shopby-action='HANDLE_COUPON_BTN_CLICK'
                        shopby-event-no='{{eventNo}}'
                    >
                        <span>지금 바로 기획전에서 사용할 수 있는 <strong>쿠폰을 다운 받으세요</strong>!</span>
                        <span class="download">쿠폰받기<span class='sprite-image'></span></span>
                    </button>
                {{/ifGt}}
            </div>
        </event-detail-coupon-button>
        <!-- 쿠폰받기 -->

        <!-- 기획전 상품진열 메뉴(스와이퍼) -->
        <event-detail-display-menu>
            <div>
                <nav slot='displayMenuSwiper'>
                    <div
                        class='swiper'
                        shopby-slider-id='event-detail-product-section-slider'
                    >
                        <div class='swiper-wrapper'>
                            {{#if displayMenus}}
                            <span class='swiper-slide event-nav'>
                                {{#each displayMenus}}
                                    <button type='button' shopby-tab-id={{id}} shopby-section-no={{sectionNo}} class='event-nav__btn {{#ifEq ../currentTabId id}}is-active{{/ifEq}}' shopby-action="HANDLE_SECTION_ID_CLICK">
                                        {{label}}
                                    </button>
                                {{/each}}
                                </span>
                            {{/if}}
                        </div>
                        <span class='swiper-notification' aria-live='assertive' aria-atomic='true'></span>
                    </div>
                </nav>
            </div>
        </event-detail-display-menu>
        <!-- 기획전 상품진열 메뉴(스와이퍼) -->

        <div class="l-panel">
            <event-detail-product-list-v2 
                platform="PC" 
                default-page-size="20" 
                page-size:query="pageSize" 
                page-number:query="pageNumber" 
                section-no:query="sectionNo" 
                event:query="eventNo"
                sort-type:query="sortType"
                sold-out:query="soldOut"
                include-stop-product:query="includeStopProduct"
            >
                <!-- 기획전 상품목록 수량 및 정렬 -->
                <section>
                    <div>
                        <div class='event-detail__top'>
                            <p class='total-count total-count--md'>
                                총<em class='highlight bold' slot='totalCount'>{{totalCount}}</em>건
                            </p>
                        </div>
                    </div>
                </section>
                <!-- 기획전 상품목록 수량 및 정렬 -->

                <!-- 기획전 상품목록 -->
                <div class="thumb-box">
                    {{#if totalCount}}
                    <div class='event-detail__products event-detail__products--{{pcPerRow}}row' slot="gridTemplateColumnsStyle" style="{{#if gridTemplateColumnsStyle}}grid-template-columns: {{gridTemplateColumnsStyle}}{{/if}}">
                        {{#each products}}
                            <div class='thumb-item' shopby-product-no='{{productNo}}'>
                                <div class='thumb-item__media'>
                                    <!-- 판매상태 뱃지 -->
                                    <span class="thumb-item__status-label thumb-item__status-label--{{saleStatusType}}">{{saleStatusLabel saleStatusType}}</span>
                                    <!-- 판매상태 뱃지 -->

                                    <!-- 상품 이미지 -->
                                    <a class='thumb-item__img-box' href='/pages/product/product-detail.html?productNo={{productNo}}'>
                                        <span class='thumb-item__img'>
                                            {{#if hasImage}}
                                            {{{img imageUrls 220 220 productName '' ''}}}
                                            {{else}}
                                            <span class="thumb-item__img no-img"></span>
                                            {{/if}}
                                            {{#if isSoldOut}}
                                            <span class="thumb-item__overlay">SOLD OUT</span>
                                            {{/if}}
                                        </span>
                                    </a>
                                    <!-- 상품 이미지 -->

                                    <!-- 좋아요 버튼 -->
                                    <button
                                        type="button"
                                        class="thumb-item__like-btn sc-like-button"
                                        slot="likeStatus"
                                        shopby-product-no="{{productNo}}"
                                        shopby-action="LIKE_PRODUCT"
                                    >
                                        <svg
                                            width="40"
                                            viewBox="0 0 80 80"
                                            fill="{{#if liked}}var(--color-point){{else}}var(--color-base-white){{/if}}"
                                            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="{{#if liked}}0{{else}}5{{/if}}"
                                                stroke-linejoin="round"
                                            ></path>
                                        </svg>
                                    </button>
                                    <!-- 좋아요 버튼 -->
                                </div>

                                <a class='product-link' href='/pages/product/product-detail.html?productNo={{productNo}}'>
                                    <div class='thumb-item__info'>
                                        <!-- 상품명 -->
                                        <p class='thumb-item__info-name'>
                                            {{{productName}}}
                                        </p>
                                        <!-- 상품명 -->

                                        {{#if showsContentsIfPausing}}
                                        <!-- 가격대체문구 -->
                                        <p class='thumb-item__info-price'>
                                            <span class="current-price">
                                                <em>{{{contentsIfPausing}}}</em>
                                            </span>
                                        </p>
                                        <!-- 가격대체문구 -->
                                        {{else}}
                                        <p class='thumb-item__info-price'>
                                            {{#ifLe ../pcPerRow 8}}
                                            {{#if discountRate}}
                                                <!-- 상품 할인율  -->
                                                <span class="rate">
                                                    <em>{{discountRate}}%</em>
                                                </span>
                                                <!-- 상품 할인율  -->
                                                {{/if}}
                                            {{/ifLe}}
                                            <!-- <span> -->
                                                <span class="current-price">
                                                <!-- 상품 할인가  -->
                                                    <em>
                                                      {{convertToKoreanCurrency (subtractNumber salePrice immediateDiscountAmt additionDiscountAmt)}}
                                                    </em>
                                                <!-- 상품 할인가  -->
                                                원</span>
                                                {{#if hasDiscount}}
                                                    {{#ifLe ../pcPerRow 8}}
                                                    <!-- 상품 원가  -->
                                                    <span class="origin-price">
                                                        <s>{{convertToKoreanCurrency salePrice}}원</s>
                                                    </span>
                                                    <!-- 상품 원가  -->
                                                    {{/ifLe}}
                                                {{/if}}
                                            <!-- </span> -->
                                        </p>
                                        {{/if}}

                                        {{#ifLe ../pcPerRow 8}}
                                        <span class="thumb-item__icon-box">
                                            {{#each stickerInfos}}
                                                {{#ifEq type 'IMAGE'}}
                                                {{img label '' '' '스티커' ''}}
                                                {{else}}
                                                <!-- 상품 스티커  -->
                                                <span>{{{label}}}</span>
                                                <!-- 상품 스티커  -->
                                                {{/ifEq}}
                                            {{/each}}
                                        </span>
                                        {{/ifLe}}
                                    </div>
                                </a>
                            </div>
                        {{/each}}
                    </div>
                    {{else}}
                    <div slot="isLoading">
                        {{#if isLoading}}
                        <div class="skeleton-grid skeleton-grid__column--2">
                            {{#repeat 4}}
                            <div class="thumb-item skeleton skeleton--gallery">
                                <div class="skeleton__media"></div>
                                <div class="skeleton__line"></div>
                                <div class="skeleton__line"></div>
                            </div>
                            {{/repeat}}
                        </div>
                        {{else}}
                        <div class='notice notice--full'>
                            <span class='sprite-image notice--warning'></span>
                            <em>진열중인 상품이 없습니다.</em>
                        </div>
                        {{/if}}
                    </div>
                    {{/if}}
                </div>
                <!-- 기획전 상품목록 -->

                <!-- 페이지네이션 -->
                {{#ifGt pagination.pages.length 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}}
                <!-- 페이지네이션 -->
            </event-detail-product-list-v2>
        </div>
    </div>
</main>

<main class="l-content event-detail" shopby-helper-key="event-detail-helper-key">
    <!-- 상단이미지 -->
    <event-detail-top-image>
        <section class="event-detail__top editor">
            <div slot="top">
                {{#with top.mobile}} {{#if url}} {{#ifEq type 'HTML'}} {{{url}}} {{else}} {{img url 500 240 label 'middle' ''}} {{/ifEq}} {{/if}} {{/with}}
            </div>
        </section>
    </event-detail-top-image>
    <!-- 상단이미지 -->

    <!-- 쿠폰 -->
    <event-detail-coupon-button>
        <div slot="coupon">
            {{#ifGt coupon.coupons.length 0}}
            <div class="event-detail__coupon-button">
                <button type="button" class="btn btn--fill-point btn--lg-wide" shopby-action="HANDLE_COUPON_BTN_CLICK" shopby-event-no="{{eventNo}}">
                    쿠폰받기
                    <span class="sprite-image event-detail__download"></span>
                </button>
            </div>
            {{/ifGt}}
        </div>
    </event-detail-coupon-button>
    <!-- 쿠폰 -->

    <!-- 기획전 상품진열 메뉴(스와이퍼) -->
    <event-detail-display-menu device-type="MOBILE">
        <div class="event-detail__nav">
            <nav class="event-category-nav" slot="displayMenuSwiper">
                {{#if displayMenus}}
                <div class="swiper" shopby-slider-id="{{slider.id}}">
                    <div class="swiper-wrapper">
                        {{#each displayMenus}}
                        <div class="swiper-slide">
                            <button
                                type="button"
                                shopby-index="{{@index}}"
                                shopby-tab-id="{{id}}"
                                shopby-section-no="{{sectionNo}}"
                                class="btn btn--line-gray btn--sm event-category-nav__btn {{#ifEq ../currentTabId id}}is-active{{/ifEq}}"
                                shopby-action="HANDLE_SECTION_ID_CLICK"
                            >
                                {{label}}
                            </button>
                        </div>
                        {{/each}}
                    </div>
                    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div>
                {{/if}}
            </nav>
        </div>
    </event-detail-display-menu>
    <!-- 기획전 상품진열 메뉴(스와이퍼) -->

    <div>
        <event-detail-product-list-v2 
            platform="MOBILE"
            pair-key="EVENT_DETAIL_PRODUCTS_MORE_VIEW_BUTTON"
            default-page-size="20"
            page-size:query="pageSize"
            page-number:query="pageNumber"
            section-no:query="sectionNo" 
            event:query="eventNo"
            sort-type:query="sortType"
            sold-out:query="soldOut"
            include-stop-product:query="includeStopProduct"
            shopby-accumulable
        >
            <!-- 기획전 상품목록 수량 및 정렬 -->
            <div class="total-sort">
                <p class="total-sort__count">
                    총
                    <em class="highlight font-montserrat" slot="totalCount">{{totalCount}}</em>
                    개
                </p>
            </div>
            <!-- 기획전 상품목록 수량 및 정렬 -->

            <!-- 기획전 상품목록 -->
            <div>
                {{#if totalCount}}
                <div
                    class="event-detail__list event-detail__list--{{mobilePerRow}}row"
                    slot="gridTemplateColumnsStyle"
                    style="{{#if gridTemplateColumnsStyle}}grid-template-columns: {{gridTemplateColumnsStyle}}{{/if}}"
                >
                    {{#each products}}
                    <div class="thumb-item" shopby-product-no="{{productNo}}">
                        <div class="thumb-item__media">
                            <!-- 판매상태 뱃지 -->
                            <span class="thumb-item__status-label thumb-item__status-label--{{saleStatusType}}">{{saleStatusLabel saleStatusType}}</span>
                            <!-- 판매상태 뱃지 -->

                            <a class="thumb-item__img-box" href="/pages/product/product-detail.html?productNo={{productNo}}">
                                <!-- 상품 이미지 -->
                                <span class="thumb-item__img">
                                    {{#if hasImage}}
                                    {{#ifEq listImageUrlInfo.[0].imageUrlType 'VIDEO_URL'}}
                                    <div class='video-wrapper'>
                                        <div class='video-cover'></div>
                                        <iframe src='{{listImageUrlInfo.[0].url}}' width="100%" height="100%" frameborder='0'></iframe>
                                    </div>
                                    {{else}}
                                    {{img listImageUrlInfo.[0].url 220 220 productName '' ''}}
                                    {{/ifEq}}
                                    {{else}}
                                    <span class="no-img"></span>
                                    {{/if}}
                                    {{#if isSoldOut}}
                                    <span class="thumb-item__overlay">SOLD OUT</span>
                                    {{/if}}
                                </span>
                                <!-- 상품 이미지 -->
                            </a>

                            <!-- 좋아요 버튼 -->
                            <button
                                type="button"
                                class="thumb-item__like-btn sc-like-button {{#if liked}}is-active{{/if}}"
                                slot="likeStatus"
                                shopby-product-no="{{productNo}}"
                                shopby-action="LIKE_PRODUCT"
                                shopby-script-action="TOGGLE_LIKE_STATUS"
                                shopby-like-status="{{liked}}"
                            >
                                <svg
                                    width="40"
                                    viewBox="0 0 80 80"
                                    fill="{{#if liked}}var(--color-point){{else}}var(--color-base-white){{/if}}"
                                    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-linejoin="round"
                                    ></path>
                                </svg>
                            </button>
                            <!-- 좋아요 버튼 -->
                        </div>

                        {{#ifLt ../mobilePerRow 5}}
                        <a class="product-link" href="/pages/product/product-detail.html?productNo={{productNo}}">
                            <div class="thumb-item__info">
                                <!-- 상품명 -->
                                <p class="thumb-item__info-name">{{{productName}}}</p>
                                <!-- 상품명 -->

                                {{#if showsContentsIfPausing}}
                                <!-- 가격대체문구 -->
                                <p class="thumb-item__info-price">
                                    <span class="current-price">
                                        <em>{{{contentsIfPausing}}}</em>
                                    </span>
                                </p>
                                <!-- 가격대체문구 -->
                                {{else}}
                                <p class="thumb-item__info-price">
                                    {{#ifEq ../mobilePerRow 2}} {{#if discountRate}}
                                    <!-- 상품 할인율  -->
                                    <span class="rate">
                                        <em class="highlight font-montserrat">{{discountRate}}%</em>
                                    </span>
                                    <!-- 상품 할인율  -->
                                    {{/if}} {{/ifEq}}
                                    <span>
                                        {{#ifLt ../mobilePerRow 2}} {{#if discountRate}}
                                        <!-- 상품 할인율  -->
                                        <span class="rate">
                                            <em class="highlight font-montserrat">{{discountRate}}%</em>
                                        </span>
                                        <!-- 상품 할인율  -->
                                        {{/if}} {{/ifLt}}
                                        <!-- 상품 할인가  -->
                                        <span class="current-price">
                                            <em class="font-montserrat">
                                                {{convertToKoreanCurrency (subtractNumber salePrice immediateDiscountAmt additionDiscountAmt)}}
                                            </em>
                                            원
                                        </span>
                                        <!-- 상품 할인가  -->
                                        {{#if hasDiscount}} {{#ifLe ../mobilePerRow 3}}
                                        <!-- 상품 원가  -->
                                        <span class="origin-price">
                                            <s class="font-montserrat">{{convertToKoreanCurrency salePrice}}원</s>
                                        </span>
                                        <!-- 상품 원가  -->
                                        {{/ifLe}} {{/if}}
                                    </span>
                                </p>
                                {{/if}} {{#ifLe ../mobilePerRow 3}}
                                <span class="thumb-item__icon-box">
                                    {{#each stickerInfos}} {{#ifEq type 'IMAGE'}} {{img label '스티커' 80 120 '' ''}} {{else}}
                                    <!-- 상품 스티커  -->
                                    <span>{{{label}}}</span>
                                    <!-- 상품 스티커  -->
                                    {{/ifEq}} {{/each}}
                                </span>
                                {{/ifLe}}
                            </div>
                        </a>
                        {{/ifLt}}
                    </div>
                    {{/each}}
                </div>
                {{else}}
                <div slot="isLoading">
                    {{#if isLoading}}
                    <div class="skeleton-grid skeleton-grid__column--2">
                        {{#repeat 4}}
                        <div class="thumb-item skeleton skeleton--gallery">
                            <div class="skeleton__media"></div>
                            <div class="skeleton__line"></div>
                            <div class="skeleton__line"></div>
                        </div>
                        {{/repeat}}
                    </div>
                    {{else}}
                    <div class="notice notice--full">
                        <span class="sprite-image notice--warning"></span>
                        <em>진열중인 상품이 없습니다.</em>
                    </div>
                    {{/if}}
                </div>
                {{/if}}
            </div>
            <!-- 기획전 상품목록 -->
        </event-detail-product-list-v2>

        <!-- 더보기 -->
        <more-view-button pair-key="EVENT_DETAIL_PRODUCTS_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>

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