Aurora Modules

기획전 목록

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

URL: /pages/event/event-list.html?pageSize={pageSize}&pageNumber={pageNumber}&orderDirection={orderDirection}&orderBy={orderBy}

관련 API : 🔗 기획전 조회하기 v2.0

모듈명: event-list-total-count

기획전 정렬 모듈입니다.

속성

속성명	타입	기본값	설명
current-tab	REGISTERDATE \| STARTDATE \| ENDDATE \| ENDDATE	REGISTER_DATE	기획전 조회하기 v2.0API 요청 값 중 `order.by` 와 동일 (REGISTERDATE: 등록일, STARTDATE: 시작일, END_DATE: 종료일)

사용 가능 변수

변수명	타입	기본값	설명
currentTab	string	-	`custom-attributes` 에 `current-tab` 추가한 값으로 초기값 설정
totalCount	number	0	총 이벤트 수

모듈명: event-list

기획전 목록 모듈입니다.

속성

속성명	타입	기본값	설명
default-page-size	number	20	(필수) 한 페이지당 노출 수
page-size:query	number	20	(필수) `query string` 중 `pageSize` 값 한 페이지당 노출 수
page-number:query	number	1	(필수) `query string` 중 `pageNumber` 값 페이지 번호
order-by:query	string	REGISTER_\DATE	(필수) `query string`중 `orderBy` 값 `orderBy`는 기획전 조회하기 v2.0API 요청 값 중 `order.by` 와 동일
order-direction:query	string	DESC	`query string`중 `orderDirection` 값 `orderDirection`은 기획전 조회하기 v2.0API 요청 값 중 `order.direction` 와 동일
pair-key	string	EVENTS_MORE_VIEW_BUTTON	`더보기` 기능 사용 시 목록과 연동하기 위한 페어 키. `more-view-button`모듈 사용 시 동일한 `pair-key`를 추가해야 함.
shopby-accumulable	-	-	이벤트 목록 값을 누적할지 여부 `accumulativeContents` 값을 사용하기 위해 필요한 설정

사용 가능 변수

변수명	타입	기본값	설명
isLoading	boolean	true	contents 값 로딩 여부
contents	Contents[]	[]	기획전 조회하기 v2.0API 응답 값 중 `contents` 와 동일 (아래 타입 참조)
accumulativeContents	Contents[]	[]	누적된 `contents` 값 `더보기` 기능 사용 시에 활용 가능한 값으로 1페이지부터 현재 페이지까지 누적한 값 (아래 타입 참조)
totalCount	number	0	총 이벤트 수
totalPage	number	0	총 페이지 수
pageNumber	number	1	현재 검색 페이지
pagination	Pagination	-	페이지네이션 (아래 타입 참조)

Contents 타입

속성명	타입	기본값	설명
urlType	EVENT_NUMBER \| DIRECT	-	URL 타입
progressStatus	ALL \| READY \| ING \| END	-	진행 상태
displayPeriodType	REGULAR \| PERIOD	-	전시기간 타입
endYmdt	string	-	전시 종료일
label	string	-	기획전 명
url	string	-	기획전 url
promotionText	string	-	홍보문구
pcImageUrl	string	-	기획전 이미지 URL(PC)
startYmdt	string	-	전시 시작일
mobileimageUrl	string	-	기획전 이미지 URL(MOBILE)
eventYn	string	-	이벤트 여부
tag	string	-	검색용 태그값
id	string	-	기획전 ID
eventNo	number	-	기획전 번호

Pagination 타입

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

커스텀 핸들바 더 알아보기

<main class="l-page event-list">
    <div class="event-list__content" shopby-helper-key="event-list-helper-key">
        <section>
            <div class="l-title l-title__align-end">기획전</div>
        </section>

        <!-- 기획전 정렬 -->
        <event-list-total-count current-tab="REGISTER_DATE">
            <section>
                <div>
                    <div class="event-list__top">
                        <p class="total-count">
                            총 
                            <em class="highlight bold" slot="totalCount">{{totalCount}}</em>
                            건
                        </p>

                        <ul class="sort-list" slot="currentTab" shopby-action="HANDLE_SORT_TYPE_CLICK">
                            <li class="sort-item {{#ifEq currentTab 'REGISTER_DATE'}}active{{/ifEq}}" shopby-tab="REGISTER_DATE">최신순</li>
                            <li class="sort-item {{#ifEq currentTab 'END_DATE'}}active{{/ifEq}}" shopby-tab="END_DATE">마감순</li>
                        </ul>
                    </div>
                </div>
            </section>
        </event-list-total-count>
        <!-- 기획전 정렬 -->

        <!-- 기획전 목록 -->
        <event-list default-page-size="20" page-size:query="pageSize" page-number:query="pageNumber" order-by:query="orderBy">
            <section>
                <div slot="contents">
                    {{#if totalCount}}
                    <ul class="event-list__content-box">
                        {{#each contents}}
                        <li class="event-list__item">
                            <a
                                class="event-list__content"
                                shopby-action="GO_EVENT_DETAIL"
                                shopby-url="{{url}}"
                                shopby-progress-status="{{progressStatus}}"
                                shopby-event-no="{{eventNo}}"
                                shopby-event-label="{{label}}"
                                shopby-event-id="{{id}}"
                                shopby-link
                            >
                                <section>
                                    <!-- 이벤트 이미지 영역 -->
                                    <div class="event-list__img">
                                        <!-- 이벤트 상태 뱃지 -->
                                        {{#ifEq progressStatus 'ING'}}
                                        <span class="event-list__badge event-list__badge--ing">진행중</span>
                                        {{/ifEq}} {{#ifEq progressStatus 'END'}}
                                        <span class="event-list__badge event-list__badge--end">종료</span>
                                        {{/ifEq}} {{#ifEq progressStatus 'READY'}}
                                        <span class="event-list__badge event-list__badge--ready">준비중</span>
                                        {{/ifEq}}

                                        <!-- 이벤트 상태 뱃지 -->

                                        <!-- 이벤트 대표 이미지 -->
                                        <span class="event-list__main-img">{{#if mobileimageUrl}} {{img mobileimageUrl 500 250 '' ''}} {{/if}}</span>
                                        <!-- 이벤트 대표 이미지 -->
                                    </div>
                                    <!-- 이벤트 이미지 영역 -->

                                    <!-- 이벤트 정보 영역 -->
                                    <div class="event-list__info">
                                        <!-- 이벤트명 -->
                                        <p class="event-list__title">{{{label}}}</p>
                                        <!-- 이벤트명 -->

                                        <!-- 이벤트 전시기간 -->
                                        <p class="event-list__period">
                                            <!-- 전시기간 D-Day 뱃지 -->
                                            {{#ifNe dDay null}}
                                            <span class="event-list__badge event-list__badge--d-day font-montserrat">
                                                D-{{#ifEq dDay 0}}DAY{{else}}{{convertToKoreanCurrency dDay}}{{/ifEq}}
                                            </span>
                                            {{/ifNe}}
                                            <!-- 전시기간 D-Day 뱃지 -->

                                            <!-- 전시 일정 -->
                                            <span class="event-list__date">
                                                {{#ifEq displayPeriodType 'REGULAR'}}
                                                <span class="event-list__badge event-list__badge--d-day">상시</span>
                                                {{/ifEq}}
                                                <span class="font-montserrat">
                                                    {{formatUseByDate startYmdt}} ~ {{#ifEq displayPeriodType 'PERIOD'}} {{formatUseByDate endYmdt}} {{/ifEq}}
                                                    {{#ifEq displayPeriodType 'REGULAR'}}종료시까지{{/ifEq}}
                                                </span>
                                            </span>
                                            <!-- 전시 일정 -->
                                        </p>
                                        <!-- 이벤트 전시기간 -->
                                    </div>
                                    <!-- 이벤트 정보 영역 -->
                                </section>
                            </a>
                        </li>
                        {{/each}}
                    </ul>

                    <!-- 페이지네이션 -->
                    <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>
                    <!-- 페이지네이션 -->

                    {{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>
            </section>
        </event-list>
        <!-- 기획전 목록 -->
    </div>
</main>

<div class="event-list" shopby-helper-key="event-list-helper-key">
    <!-- 기획전 정렬 -->
    <event-list-total-count>
        <section>
            <div class="total-sort">
                <span class="total-count total-count--md">
                    총 
                    <em class="highlight font-montserrat" slot="totalCount">{{totalCount}}</em>
                    건
                </span>
                <span class="select select--sm">
                    <select name="sort-type" shopby-action="HANDLE_SORT_TYPE_CHANGE" slot="sortType">
                        <option value="REGISTER_DATE" selected>최신순</option>
                        <option value="END_DATE">마감순</option>
                    </select>
                </span>
            </div>
        </section>
    </event-list-total-count>
    <!-- 기획전 정렬 -->

    <!-- 기획전 목록 -->
    <event-list
        pair-key="EVENTS_MORE_VIEW_BUTTON"
        default-page-size="20"
        page-size:query="pageSize"
        page-number:query="pageNumber"
        order-by:query="orderBy"
        order-direction:query="orderDirection"
        shopby-accumulable
    >
        <div class="event-list__content-box">
            <div slot="contents">
                {{#if totalCount}}
                <div>
                    {{#each contents}}
                    <a
                        class="event-list__content"
                        shopby-action="GO_EVENT_DETAIL"
                        shopby-url="{{url}}"
                        shopby-progress-status="{{progressStatus}}"
                        shopby-event-no="{{eventNo}}"
                        shopby-event-label="{{label}}"
                        shopby-event-id="{{id}}"
                        shopby-link
                    >
                        <section>
                            <!-- 이벤트 이미지 영역 -->
                            <div class="event-list__img">
                                <!-- 이벤트 상태 뱃지 -->
                                {{#ifEq progressStatus 'ING'}}
                                <span class="event-list__badge event-list__badge--ing">진행중</span>
                                {{/ifEq}} {{#ifEq progressStatus 'END'}}
                                <span class="event-list__badge event-list__badge--end">종료</span>
                                {{/ifEq}} {{#ifEq progressStatus 'READY'}}
                                <span class="event-list__badge event-list__badge--ready">준비중</span>
                                {{/ifEq}}
                                <!-- 이벤트 상태 뱃지 -->

                                <!-- 이벤트 대표 이미지 -->
                                <span class="event-list__main-img">{{#if mobileimageUrl}} {{img mobileimageUrl 500 250 '' ''}} {{/if}}</span>
                                <!-- 이벤트 대표 이미지 -->
                            </div>
                            <!-- 이벤트 이미지 영역 -->

                            <!-- 이벤트 정보 영역 -->
                            <div class="event-list__info">
                                <!-- 이벤트명 -->
                                <p class="event-list__title">{{{label}}}</p>
                                <!-- 이벤트명 -->

                                <!-- 이벤트 전시기간 -->
                                <p class="event-list__period">
                                    <!-- 전시기간 D-Day 뱃지 -->
                                    {{#ifNe dDay null}}
                                    <span class="event-list__badge event-list__badge--d-day font-montserrat">
                                        D-{{#ifEq dDay 0}}DAY{{else}}{{convertToKoreanCurrency dDay}}{{/ifEq}}
                                    </span>
                                    {{/ifNe}}
                                    <!-- 전시기간 D-Day 뱃지 -->

                                    <!-- 전시 일정 -->
                                    <span class="event-list__date">
                                        {{#ifEq displayPeriodType 'REGULAR'}}
                                        <span class="event-list__badge event-list__badge--d-day">상시</span>
                                        {{/ifEq}}
                                        <span class="font-montserrat">
                                            {{formatUseByDate startYmdt}} ~ {{#ifEq displayPeriodType 'PERIOD'}} {{formatUseByDate endYmdt}} {{/ifEq}} {{#ifEq
                                            displayPeriodType 'REGULAR'}} 종료시까지 {{/ifEq}}
                                        </span>
                                    </span>
                                    <!-- 전시 일정 -->
                                </p>
                                <!-- 이벤트 전시기간 -->
                            </div>
                            <!-- 이벤트 정보 영역 -->
                        </section>
                    </a>
                    {{/each}}
                </div>
                {{else}}
                <div slot="isLoading">
                    {{#if isLoading}}
                    <div class="skeleton-grid skeleton-grid__column--1">
                        {{#repeat 2}}
                        <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>
        </div>
    </event-list>
    <!-- 기획전 목록 -->

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

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