Aurora Modules

주소 목록

배송지 관리, 주문서 페이지에서 노출되는 주소 목록 모듈입니다.

URL: /pages/my/shipping-list.html?pageSize={pageSize}&pageNumber={pageNumber}

속성

속성명	타입	기본값	설명
page-number	number	1	페이지 번호
page-size	number	20	페이지 사이즈
visible-pages-count	number	5	페이지네이션 표시 페이지 수

사용 가능 변수

변수명	타입	기본값	설명
isSearched	boolean	false	검색 여부
isLoading	boolean	false	주소 조회 API 로딩 여부
groupByStates	string[]	[]	주소 조회 API 응답 중 `groupByStates`와 동일
keyword	string	-	검색 키워드
pageNumber	number	1	페이지 번호
totalCount	number	0	조회 된 주소의 총 수
items	AddressInfo[]	[]	주소 조회 API 응답 값 중 `items`와 동일 (아래 타입 참조)
addressInfo	AddressInfo	-	`items` 중 선택한 하나의 주소 정보 (아래 타입 참조)
pagination	pagination	-	페이지네이션 정보 (아래 타입 참조)

AddressInfo 타입

속성명	타입	기본값	설명
zipCode	string	-	새 우편번호
oldZipCode	string	-	구 우편번호
roadAddressExtra	string	-	도로명 주소의 상세 항목
address	string	-	도로명 주소
relatedJibun	string	-	관련 지번
roadAddress	string	-	기본 도로명 주소
jibunAddress	string	-	지번 주소
detailAddress	string	-	기본 반환 도로명 주소의 상세 항목
engAddress	string	-	영문명 주소

pagination 타입

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

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div class="search-zip-code">
    <div class="search-zip-code__content" shopby-layer-modal-helper-key="search-zip-code-form">
        <search-field shopby-module-key="search-field">
            <div>
                <div class="search-zip-code__search">
                    <span class="search-field">
                        <span class="text-field">
                            <input
                                type="text"
                                placeholder="도로명 + 건물번호, 건물명, 지번"
                                slot="keyword"
                                value="{{keyword}}"
                                shopby-on:change="CHANGE_SEARCH_FIELD_KEYWORD"
                                shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD"
                            />
                            <button type="button" class="sprite-image clear-btn" shopby-on:click="CLEAR_INPUT_VALUE"></button>
                        </span>
                        <button type="button" class="sprite-image search-btn" shopby-on:click="SEARCH"></button>
                    </span>
                    <p class="search-zip-code__search-tip">도로명, 건물명, 지번에 대해 통합검색이 가능합니다.</p>
                </div>
                <div class="search-zip-code__items" slot="isSearched">
                    {{#unless isSearched}}
                    <p class="search-zip-code__tip-tit">
                        <em class="highlight">TIP!</em>
                         이렇게 검색해보세요.
                    </p>
                    <div>
                        <ul class="notice notice--align-start">
                            <li class="dot dot--l-dark">
                                <span class="notice__content">도로명 + 건물번호</span>
                                (예: 월드컵로 10길 9)
                            </li>
                            <li class="dot dot--l-dark">
                                <span class="notice__content">지역명 + (동/읍/면/리) + 지번</span>
                                (예: 서교동 476-25)
                            </li>
                            <li class="dot dot--l-dark">
                                <span class="notice__content">건물명(아파트명)</span>
                                (예: 반포자이아파트)
                            </li>
                        </ul>
                    </div>
                    {{/unless}}
                </div>
            </div>
        </search-field>
        <address-list page-number="1" page-size="20">
            <div class="search-zip-code__items">
                {{#if isSearched}}
                <p class="search-zip-code__tip-tit">
                    전체 검색 결과 
                    <em class="highlight font-montserrat">{{totalCount}}</em>
                </p>
                {{#if totalCount}}
                <div class="addresses">
                    {{#each items}}
                    <div class="address" slot="address">
                        <p class="address__zip-code font-montserrat">{{zipCode}}</p>
                        <dl>
                            <div class="address__row">
                                <dt class="address__label">도로명</dt>
                                <dd class="address__detail">{{roadAddress}}</dd>
                            </div>
                            <div class="address__row">
                                <dt class="address__label">지번</dt>
                                <dd class="address__detail">{{jibunAddress}}</dd>
                            </div>
                        </dl>
                        <button class="address__btn" shopby-zip-code="{{zipCode}}" shopby-on:click="SELECT_ADDRESS"></button>
                    </div>
                    {{/each}}
                </div>

                <!-- 페이지네이션 -->
                <div class="pagination" slot="pagination">
                    <button
                        class="sprite-image pagination__btn pagination__btn--double-lt"
                        shopby-pagination="1"
                        shopby-on:click="HANDLE_PAGINATION_CLICK"
                    ></button>
                    <button
                        class="sprite-image pagination__btn pagination__btn--lt"
                        shopby-pagination="PREV"
                        shopby-on:click="HANDLE_PAGINATION_CLICK"
                    ></button>
                    {{#each pagination.pages}}
                    <button
                        class="pagination__link {{#if isCurrentPage}}is-current{{/if}}"
                        shopby-pagination="{{page}}"
                        shopby-on:click="HANDLE_PAGINATION_CLICK"
                    >
                        {{page}}
                    </button>
                    {{/each}}
                    <button
                        class="sprite-image pagination__btn pagination__btn--rt"
                        shopby-pagination="NEXT"
                        shopby-on:click="HANDLE_PAGINATION_CLICK"
                    ></button>
                    <button
                        class="sprite-image pagination__btn pagination__btn--double-rt"
                        shopby-pagination="{{pagination.totalPages}}"
                        shopby-on:click="HANDLE_PAGINATION_CLICK"
                    ></button>
                </div>
                <!-- 페이지네이션 -->
                {{else}}
                <div slot="isLoading">
                    {{#if isLoading}}
                    <div class="loader loader--lg loader--full">
                        <span class="spinner"></span>
                    </div>
                    {{else}}
                    <div class="notice notice--full">
                        <span class="sprite-image notice--warning"></span>
                        <em class="notice__description--center">
                            검색된 결과가 없습니다.
                            <br />
                            검색어에 잘못된 철자가 없는지, 정확한 주소인지 다시 한번 확인해 주세요.
                        </em>
                    </div>
                    {{/if}}
                </div>
                {{/if}} {{/if}}
            </div>
        </address-list>
    </div>
</div>

<div class="search-zip-code">
    <div class="search-zip-code__content" shopby-layer-modal-helper-key="search-zip-code-form">
        <search-field shopby-module-key="search-field">
            <div>
                <div class='search-zip-code__search'>
                    <span class='search-field'>
                        <span class='text-field'>
                            <input
                                type='text'
                                placeholder='도로명 + 건물번호, 건물명, 지번'
                                slot='keyword'
                                value='{{keyword}}'
                                shopby-on:change='CHANGE_SEARCH_FIELD_KEYWORD'
                                shopby-on:keydown='KEYPRESS_SEARCH_FIELD_KEYWORD'
                            />
                            <button type='button' class='sprite-image clear-btn' shopby-on:click='CLEAR_INPUT_VALUE'>
                            </button>
                        </span>
                        <button type='button' class='sprite-image search-btn' shopby-on:click='SEARCH'>

                        </button>
                    </span>
                    <p class='search-zip-code__search-tip'>
                        도로명, 건물명, 지번에 대해 통합검색이 가능합니다.
                    </p>
                </div>
                <div class='search-zip-code__items' slot='isSearched'>
                    {{#unless isSearched}}
                        <p class='search-zip-code__tip-tit'>
                            <em class='highlight'>
                                TIP!
                            </em>
                             이렇게 검색해보세요.
                        </p>
                        <div>
                            <ul class='notice notice--align-start'>
                                <li class='dot dot--l-dark'>
                                    <span class='notice__content'>
                                        도로명 + 건물번호
                                    </span>
                                    (예: 월드컵로 10길 9)
                                </li>
                                <li class='dot dot--l-dark'>
                                    <span class='notice__content'>지역명 + (동/읍/면/리) + 지번</span>
                                    (예: 서교동 476-25)
                                </li>
                                <li class='dot dot--l-dark'>
                                    <span class='notice__content'>건물명(아파트명)</span>
                                    (예: 반포자이아파트)
                                </li>
                            </ul>
                        </div>
                    {{/unless}}
                </div>
            </div>
        </search-field>
        <address-list page-number="1" page-size="20">
            <div>
                <div class='search-zip-code__items' slot="isSearched">
                    {{#if isSearched}}
                        <p class='search-zip-code__tip-tit'>
                            전체 검색 결과 
                            <em class='highlight font-montserrat'>
                                {{totalCount}}
                            </em>
                        </p>
                        {{#if totalCount}}
                            <div class='addresses'>
                                {{#each items}}
                                    <div class='address' slot='address'>
                                        <p class='address__zip-code font-montserrat'>
                                            {{zipCode}}
                                        </p>
                                        <dl>
                                            <div class='address__row'>
                                                <dt class='address__label'>
                                                    도로명
                                                </dt>
                                                <dd class='address__detail'>
                                                    {{roadAddress}}
                                                </dd>
                                            </div>
                                            <div class='address__row'>
                                                <dt class='address__label'>
                                                    지번
                                                </dt>
                                                <dd class='address__detail'>
                                                    {{jibunAddress}}
                                                </dd>
                                            </div>
                                        </dl>
                                        <button class='address__btn' shopby-zip-code='{{zipCode}}' shopby-on:click='SELECT_ADDRESS'>
                                        </button>
                                    </div>
                                {{/each}}
                            </div>

                            <!-- 페이지네이션 -->
                            <div class='pagination' slot='pagination'>
                                <button class='sprite-image pagination__btn pagination__btn--double-lt' shopby-pagination="1" shopby-on:click="HANDLE_PAGINATION_CLICK">
                                </button>
                                <button class='sprite-image pagination__btn pagination__btn--lt' shopby-pagination="PREV" shopby-on:click="HANDLE_PAGINATION_CLICK">
                                </button>
                                {{#each pagination.pages}}
                                    <button class='pagination__link {{#if isCurrentPage}}is-current{{/if}}' shopby-pagination='{{page}}' shopby-on:click="HANDLE_PAGINATION_CLICK">{{page}}
                                    </button>
                                {{/each}}
                                <button class='sprite-image pagination__btn pagination__btn--rt' shopby-pagination="NEXT" shopby-on:click="HANDLE_PAGINATION_CLICK">
                                </button>
                                <button class='sprite-image pagination__btn pagination__btn--double-rt' shopby-pagination="{{pagination.totalPages}}" shopby-on:click="HANDLE_PAGINATION_CLICK">
                                </button>
                            </div>
                            <!-- 페이지네이션 -->
                        {{else}}
                        <div slot="isLoading">
                            {{#if isLoading}}
                            <div class="loader loader--lg loader--full">
                                <span class="spinner"></span>
                            </div>
                            {{else}}
                            <div class="notice notice--full">
                                <span class="sprite-image notice--warning"></span>
                                <em class="notice__description--center">검색된 결과가 없습니다.<br />검색어에 잘못된 철자가 없는지, 정확한 주소인지 다시 한번 확인해 주세요.</em>
                            </div>
                            {{/if}}
                        </div>
                        {{/if}}
                    {{/if}}
                </div>
            <div>
        </address-list>
    </div>
</div>

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