Aurora Modules

배송지 등록/수정 폼

배송지 등록/수정 폼에 사용되는 모듈입니다.

가이드에서는 데이터 노출 형태를 보여주기 위해 `수정`모드로 출력됩니다.

모듈명: my-shipping-address-basic-information원본소스

배송지 기본정보

사용 가능 변수

변수명	타입	기본값	설명
addressName	string	-	배송지 이름
receiverName	string	-	받으시는 분

모듈명: my-shipping-address-address-information원본소스

배송지 주소 정보

사용 가능 변수

변수명	타입	기본값	설명
zipCode	string	-	우편번호
address	string	-	주소
detailAddress	string	-	상세 주소

모듈명: my-shipping-address-contact-information원본소스

배송지 연락처 정보

사용 가능 변수

변수명	타입	기본값	설명
mobileNumber	string	-	휴대폰 번호
phoneNumber	string	-	전화번호

모듈명: my-shipping-address-extra-information원본소스

배송지 추가 정보

사용 가능 변수

변수명	타입	기본값	설명
willBeSavedAsDefaultAddress	boolean	false	기본 배송지 여부

모듈명: my-shipping-address-form-btns원본소스

배송지 등록/수정 버튼 그룹

사용 가능 변수

변수명	타입	기본값	설명
isRegisterMode	boolean	true	등록 여부 false인 경우 수정

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div>
    <div slot="isOpen">
        <div class="portal">
            <div class="dim"></div>
            <div class="modal address-form">
                <div class="title-modal">
                    <div class="title-modal__header" slot="visibleCloseBtn">
                        <h2 class="title-modal__title" slot="title">배송지 수정</h2>
                        <button class="title-modal__close-btn" shopby-on:click="CLOSE_TITLE_MODAL">
                            <span class="ico ico--x-black-24"></span>
                        </button>
                    </div>
                    <div class="title-modal__content">
                        <div>
                            <form class="address-form__content" shopby-layer-modal-helper-key="shipping-address-form">
                                <!-- 배송지 기본정보 -->
                                <my-shipping-address-basic-information>
                                    <fieldset class="address-form__fieldset">
                                        <label class="address-form__field-label">배송지 이름</label>
                                        <span class="input-field input-field--md">
                                            <input
                                                type="text"
                                                slot="addressName"
                                                value="{{addressName}}"
                                                shopby-on:change="CHANGE_ADDRESS_NAME"
                                                shopby-max="50"
                                                maxlength="50"
                                            />
                                        </span>
                                        <label class="address-form__field-label dot dot--r-must">받으시는 분</label>
                                        <span class="input-field input-field--md">
                                            <input
                                                type="text"
                                                slot="receiverName"
                                                value="{{receiverName}}"
                                                shopby-focus-field="receiverName"
                                                shopby-on:change="CHANGE_RECEIVER_NAME"
                                                shopby-max="20"
                                                maxlength="20"
                                            />
                                        </span>
                                    </fieldset>
                                </my-shipping-address-basic-information>
                                <!-- 배송지 기본정보 -->

                                <!-- 배송지 주소 -->
                                <my-shipping-address-address-information>
                                    <fieldset class="address-form__fieldset">
                                        <label class="address-form__field-label dot dot--r-must">주소</label>
                                        <span class="address-form__address-detail">
                                            <span class="address-form__zip-code-box">
                                                <span class="input-field input-field--md is-disabled">
                                                    <input type="text" class="font-montserrat" disabled slot="zipCodeInfo" value="{{zipCode}}" />
                                                </span>
                                                <button
                                                    type="button"
                                                    class="btn btn--line-dark btn--sm"
                                                    shopby-focus-field="zipCode"
                                                    shopby-action="SEARCH_ZIP_CODE"
                                                >
                                                    우편번호 찾기
                                                </button>
                                            </span>
                                            <span class="input-field input-field--md is-disabled">
                                                <input type="text" disabled slot="zipCodeInfo" value="{{address}}" />
                                            </span>
                                            <span class="input-field input-field--md">
                                                <input
                                                    type="text"
                                                    slot="detailAddress"
                                                    value="{{detailAddress}}"
                                                    shopby-max="100"
                                                    maxlength="100"
                                                    shopby-focus-field="detailAddress"
                                                    shopby-on:change="CHANGE_RECEIVER_DETAIL_ADDRESS"
                                                />
                                            </span>
                                        </span>
                                    </fieldset>
                                </my-shipping-address-address-information>
                                <!-- 배송지 주소 -->

                                <!-- 연락처 -->
                                <my-shipping-address-contact-information>
                                    <fieldset class="address-form__fieldset">
                                        <label class="address-form__field-label dot dot--r-must">휴대폰 번호</label>
                                        <span class="input-field input-field--md">
                                            <input
                                                type="text"
                                                class="font-montserrat"
                                                placeholder="휴대폰 번호 - 없이 입력"
                                                slot="mobileNumber"
                                                shopby-focus-field="mobileNumber"
                                                value="{{mobileNumber}}"
                                                shopby-on:input="HANDLE_MOBILE_NO_CHANGE"
                                                shopby-max="11"
                                                maxlength="11"
                                            />
                                        </span>
                                        <label class="address-form__field-label">전화번호</label>
                                        <span class="input-field input-field--md">
                                            <input
                                                type="text"
                                                class="font-montserrat"
                                                placeholder="전화번호 - 없이 입력"
                                                slot="phoneNumber"
                                                shopby-focus-field="phoneNumber"
                                                value="{{phoneNumber}}"
                                                shopby-on:input="HANDLE_PHONE_NO_CHANGE"
                                                shopby-max="11"
                                                maxlength="11"
                                            />
                                        </span>
                                    </fieldset>
                                </my-shipping-address-contact-information>
                                <!-- 연락처 -->

                                <!-- 추가정보 -->
                                <my-shipping-address-extra-information>
                                    <fieldset class="address-form__fieldset">
                                        <label class="address-form__field-label form-check form-check--md default-checkbox">
                                            <input
                                                type="checkbox"
                                                name="save-as-default"
                                                shopby-on:click="SAVE_AS_DEFAULT_ADDRESS"
                                                slot="willBeSavedAsDefaultAddress"
                                            />
                                            <span class="form-check__label">기본 배송지로 지정</span>
                                        </label>
                                    </fieldset>
                                </my-shipping-address-extra-information>
                                <!-- 추가정보 -->

                                <my-shipping-address-form-btns>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn--line-dark" shopby-action="CANCEL">취소</button>
                                        {{#if isRegisterMode}}
                                        <button type="submit" class="btn btn--fill-point" shopby-action="SUBMIT">등록</button>
                                        {{else}}
                                        <button type="submit" class="btn btn--fill-point" shopby-action="MODIFY">수정</button>
                                        {{/if}}
                                    </div>
                                </my-shipping-address-form-btns>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div>
    <div slot="isOpen">
        <div class="portal">
            <div class="dim"></div>
            <div class="modal address-form full-modal">
                <div class="title-modal title-modal--full">
                    <div class="title-modal__header">
                        <h2 class="title-modal__title" slot="title">배송지 수정</h2>
                        <button class="title-modal__close-btn" shopby-on:click="CLOSE_TITLE_MODAL">
                            <span class="ico ico--x-black-24"></span>
                        </button>
                    </div>
                    <div class="title-modal__content" slot="layerModalContent">
                        <div>
                            <form class="address-form__content" shopby-layer-modal-helper-key="shipping-address-form">
                                <!-- 배송지 기본정보 -->
                                <my-shipping-address-basic-information>
                                    <fieldset class="address-form__fieldset">
                                        <label class="address-form__field-label">배송지 이름</label>
                                        <span class="input-field input-field--sm">
                                            <input
                                                type="text"
                                                slot="addressName"
                                                value="{{addressName}}"
                                                shopby-on:change="CHANGE_ADDRESS_NAME"
                                                shopby-max="50"
                                                maxlength="50"
                                            />
                                        </span>
                                        <label class="address-form__field-label dot dot--r-must">받으시는 분</label>
                                        <span class="input-field input-field--sm">
                                            <input
                                                type="text"
                                                slot="receiverName"
                                                value="{{receiverName}}"
                                                shopby-focus-field="receiverName"
                                                shopby-on:change="CHANGE_RECEIVER_NAME"
                                                shopby-max="20"
                                                maxlength="20"
                                            />
                                        </span>
                                    </fieldset>
                                </my-shipping-address-basic-information>
                                <!-- 배송지 기본정보 -->

                                <!-- 배송지 주소 -->
                                <my-shipping-address-address-information>
                                    <fieldset class="address-form__fieldset">
                                        <label class="address-form__field-label dot dot--r-must">주소</label>
                                        <span class="address-form__address-detail">
                                            <span class="address-form__zip-code-box">
                                                <span class="input-field input-field--sm is-disabled">
                                                    <input type="text" class="font-montserrat" disabled slot="zipCodeInfo" value="{{zipCode}}" />
                                                </span>
                                                <button
                                                    type="button"
                                                    class="btn btn--line-dark btn--sm"
                                                    shopby-focus-field="zipCode"
                                                    shopby-action="SEARCH_ZIP_CODE"
                                                >
                                                    우편번호 찾기
                                                </button>
                                            </span>
                                            <span class="input-field input-field--sm is-disabled">
                                                <input type="text" disabled slot="zipCodeInfo" value="{{address}}" />
                                            </span>
                                            <span class="input-field input-field--sm address-detail">
                                                <input
                                                    type="text"
                                                    slot="detailAddress"
                                                    value="{{detailAddress}}"
                                                    maxlength="100"
                                                    shopby-max="100"
                                                    shopby-focus-field="detailAddress"
                                                    shopby-on:change="CHANGE_RECEIVER_DETAIL_ADDRESS"
                                                />
                                            </span>
                                        </span>
                                    </fieldset>
                                </my-shipping-address-address-information>
                                <!-- 배송지 주소 -->

                                <!-- 연락처 -->
                                <my-shipping-address-contact-information>
                                    <fieldset class="address-form__fieldset">
                                        <label class="address-form__field-label dot dot--r-must">휴대폰 번호</label>
                                        <span class="input-field input-field--sm">
                                            <input
                                                type="text"
                                                placeholder="휴대폰 번호 - 없이 입력"
                                                slot="mobileNumber"
                                                shopby-focus-field="mobileNumber"
                                                value="{{mobileNumber}}"
                                                class="font-montserrat"
                                                shopby-on:input="HANDLE_MOBILE_NO_CHANGE"
                                                shopby-max="11"
                                                maxlength="11"
                                            />
                                        </span>
                                        <label class="address-form__field-label">전화번호</label>
                                        <span class="input-field input-field--sm">
                                            <input
                                                type="text"
                                                placeholder="전화번호 - 없이 입력"
                                                slot="phoneNumber"
                                                shopby-focus-field="phoneNumber"
                                                value="{{phoneNumber}}"
                                                class="font-montserrat"
                                                shopby-on:input="HANDLE_PHONE_NO_CHANGE"
                                                shopby-max="11"
                                                maxlength="11"
                                            />
                                        </span>
                                    </fieldset>
                                </my-shipping-address-contact-information>
                                <!-- 연락처 -->

                                <!-- 추가정보 -->
                                <my-shipping-address-extra-information>
                                    <fieldset class="address-form__fieldset">
                                        <label class="address-form__field-label form-check form-check--sm default-checkbox">
                                            <input
                                                type="checkbox"
                                                name="save-as-default"
                                                shopby-on:click="SAVE_AS_DEFAULT_ADDRESS"
                                                slot="willBeSavedAsDefaultAddress"
                                            />
                                            <span class="form-check__label">기본 배송지로 지정</span>
                                        </label>
                                    </fieldset>
                                </my-shipping-address-extra-information>
                                <!-- 추가정보 -->

                                <my-shipping-address-form-btns>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn--line-dark" shopby-action="CANCEL">취소</button>
                                        {{#if isRegisterMode}}
                                        <button type="submit" class="btn btn--fill-point" shopby-action="SUBMIT">등록</button>
                                        {{else}}
                                        <button type="submit" class="btn btn--fill-point" shopby-action="MODIFY">수정</button>
                                        {{/if}}
                                    </div>
                                </my-shipping-address-form-btns>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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