Aurora Modules

계정 찾기

아이디/비밀번호 찾기 페이지에서 노출되는 회원 계정 찾기 모듈입니다.

URL: /pages/find/find-id.html

모듈명: find-account-basic-information원본소스

회원 계정 찾기 정보 입력 폼 모듈입니다.

속성

속성명	타입	기본값	설명
shopby-focus-field	string	-	유효하지않은 필드에 포커스 주기위한 속성

사용 가능 변수

변수명	타입	기본값	설명
memberName	string	-	회원명
memberId	string	-	회원아이디
email	string	-	이메일
mobileNo	string	-	휴대폰번호
findMethod	EMAIL \| SMS \| MOBILE	EMAIL	아이디 찾기 방법

모듈명: find-account-tabs원본소스

인증수단 탭 모듈입니다.

속성

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

사용 가능 변수

변수명	타입	기본값	설명
hasMobileCertification	boolean	false	휴대폰 인증이 필요한지 여부
currentTab	EMAIL \| SMS \| MOBILE	EMAIL	현재 선택된 탭

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div class="find-id">
    <find-account-tabs>
        <div>
            <div slot="hasMobileCertification">
                <ul class="tab" slot="tabs">
                    <li class="tab__btn {{#ifEq currentTab 'EMAIL'}}is-active{{/ifEq}}">
                        <button type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="EMAIL">
                            이메일
                            <br />
                            인증
                        </button>
                    </li>
                    <li class="tab__btn {{#ifEq currentTab 'SMS'}}is-active{{/ifEq}}">
                        <button type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="SMS">
                            휴대폰번호
                            <br />
                            인증
                        </button>
                    </li>
                    {{#if hasMobileCertification}}
                    <li class="tab__btn {{#ifEq currentTab 'MOBILE'}}is-active{{/ifEq}}">
                        <button type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="MOBILE">
                            휴대폰
                            <br />
                            본인인증
                        </button>
                    </li>
                    {{/if}}
                </ul>
            </div>
        </div>
    </find-account-tabs>
    <div class="find-id-form">
        <find-account-basic-information>
            <div>
                <div class="find-id-form__item" slot="findMethod">
                    {{#ifNe findMethod 'MOBILE'}}
                    <div class="find-id-form__input-wrap">
                        <span class="input-field input-field--md">
                            <input
                                slot="memberName"
                                placeholder="이름 입력"
                                type="text"
                                shopby-focus-field="memberName"
                                value="{{memberName}}"
                                shopby-on:change="CHANGE_MEMBER_NAME"
                                shopby-on:input="INPUT_MEMBER_NAME_VALID"
                                maxlength="20"
                            />
                        </span>
                    </div>
                    {{/ifNe}}
                </div>

                <div class="find-id-form__item" slot="findMethod">
                    {{#ifEq findMethod 'EMAIL'}}
                    <div class="find-id-form__input-wrap">
                        <div class="email-input">
                            <span class="input-field input-field--md email-input__id">
                                <input
                                    slot="email"
                                    type="text"
                                    shopby-focus-field="email"
                                    value="{{displayEmailId email}}"
                                    name="email-id"
                                    shopby-on:change="CHANGE_EMAIL_ID"
                                    shopby-on:input="INPUT_EMAIL_ID_VALID"
                                    maxlength="64"
                                />
                            </span>
                            @
                            <span class="input-field input-field--md email-input__domain">
                                <input
                                    slot="email"
                                    type="text"
                                    shopby-focus-field="email"
                                    value="{{displayEmailDomain email}}"
                                    name="email-domain"
                                    shopby-on:change="CHANGE_EMAIL_DOMAIN"
                                    shopby-on:input="INPUT_EMAIL_DOMAIN_VALID"
                                    maxlength="255"
                                />
                            </span>
                        </div>
                        <span class="select select--md">
                            <select slot="email" shopby-on:change="SELECT_EMAIL_DOMAIN">
                                <option value="" selected disabled>직접 입력</option>
                                <option value="naver.com">naver.com</option>
                                <option value="hanmail.net">hanmail.net</option>
                                <option value="daum.net">daum.net</option>
                                <option value="nate.com">nate.com</option>
                                <option value="gmail.com">gmail.com</option>
                            </select>
                        </span>
                    </div>
                    {{/ifEq}}
                </div>

                <div class="find-id-form__item" slot="findMethod">
                    {{#ifEq findMethod 'SMS'}}
                    <div class="find-id-form__input-wrap">
                        <div class="phone-number-input">
                            <span class="input-field input-field--md">
                                <input
                                    slot="mobileNo"
                                    type="text"
                                    shopby-focus-field="mobileNo"
                                    value="{{mobileNo}}"
                                    maxlength="11"
                                    placeholder="휴대폰 번호 - 없이 입력"
                                    name="mobileNo"
                                    shopby-on:input="INPUT_PHONE_ONLY_NUMBER"
                                    shopby-on:change="CHANGE_PHONE_NUMBER"
                                />
                            </span>
                        </div>
                    </div>
                    {{/ifEq}}
                </div>

                <div class="find-id-form__btn-wrap" slot="findMethod">
                    {{#ifEq findMethod 'MOBILE'}}
                    <button class="btn btn--fill-point btn--md" shopby-action="CERTIFICATION_MOBILE_NO">휴대폰 본인인증</button>
                    {{else}}
                    <button class="btn btn--fill-point btn--md" shopby-action="FIND_ID_SUBMIT">아이디 찾기</button>
                    {{/ifEq}}
                </div>
            </div>
        </find-account-basic-information>
    </div>
</div>

<main class="l-content">
    <div class="find-id">
        <find-account-tabs>
            <div>
                <div slot="hasMobileCertification">
                    <ul class="tab" slot="tabs">
                        <li class="tab__btn {{#ifEq currentTab 'EMAIL'}}is-active{{/ifEq}}">
                            <button type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="EMAIL">
                                이메일
                                <br />
                                인증
                            </button>
                        </li>
                        <li class="tab__btn {{#ifEq currentTab 'SMS'}}is-active{{/ifEq}}">
                            <button type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="SMS">
                                휴대폰번호
                                <br />
                                인증
                            </button>
                        </li>
                        {{#if hasMobileCertification}}
                        <li class="tab__btn {{#ifEq currentTab 'MOBILE'}}is-active{{/ifEq}}">
                            <button type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="MOBILE">
                                휴대폰
                                <br />
                                본인인증
                            </button>
                        </li>
                        {{/if}}
                    </ul>
                </div>
            </div>
        </find-account-tabs>
        <div class="find-id-form">
            <find-account-basic-information>
                <div>
                    <div class="find-id-form__item" slot="findMethod">
                        {{#ifNe findMethod 'MOBILE'}}
                        <div class="find-id-form__input-wrap">
                            <span class="input-field input-field--md">
                                <input
                                    slot="memberName"
                                    placeholder="이름 입력"
                                    type="text"
                                    shopby-focus-field="memberName"
                                    value="{{memberName}}"
                                    shopby-on:change="CHANGE_MEMBER_NAME"
                                    shopby-on:input="INPUT_MEMBER_NAME_VALID"
                                    maxlength="20"
                                />
                            </span>
                        </div>
                        {{/ifNe}}
                    </div>

                    <div class="find-id-form__item" slot="findMethod">
                        {{#ifEq findMethod 'EMAIL'}}
                        <div class="find-id-form__input-wrap">
                            <div class="email-input">
                                <span class="input-field input-field--md email-input__id">
                                    <input
                                        slot="email"
                                        type="text"
                                        shopby-focus-field="email"
                                        value="{{displayEmailId email}}"
                                        name="email-id"
                                        shopby-on:change="CHANGE_EMAIL_ID"
                                        shopby-on:input="INPUT_EMAIL_ID_VALID"
                                        maxlength="64"
                                    />
                                </span>
                                @
                                <span class="input-field input-field--md email-input__domain">
                                    <input
                                        slot="email"
                                        type="text"
                                        shopby-focus-field="email"
                                        value="{{displayEmailDomain email}}"
                                        name="email-domain"
                                        shopby-on:change="CHANGE_EMAIL_DOMAIN"
                                        shopby-on:input="INPUT_EMAIL_DOMAIN_VALID"
                                        maxlength="255"
                                    />
                                </span>
                            </div>
                            <span class="select select--md">
                                <select slot="email" shopby-on:change="SELECT_EMAIL_DOMAIN">
                                    <option value="" selected disabled>직접 입력</option>
                                    <option value="naver.com">naver.com</option>
                                    <option value="hanmail.net">hanmail.net</option>
                                    <option value="daum.net">daum.net</option>
                                    <option value="nate.com">nate.com</option>
                                    <option value="gmail.com">gmail.com</option>
                                </select>
                            </span>
                        </div>
                        {{/ifEq}}
                    </div>

                    <div class="find-id-form__item" slot="findMethod">
                        {{#ifEq findMethod 'SMS'}}
                        <div class="find-id-form__input-wrap">
                            <div class="phone-number-input">
                                <span class="input-field input-field--md">
                                    <input
                                        slot="mobileNo"
                                        type="text"
                                        shopby-focus-field="mobileNo"
                                        value="{{mobileNo}}"
                                        maxlength="11"
                                        placeholder="휴대폰 번호 - 없이 입력"
                                        name="mobileNo"
                                        shopby-on:input="INPUT_PHONE_ONLY_NUMBER"
                                        shopby-on:change="CHANGE_PHONE_NUMBER"
                                    />
                                </span>
                            </div>
                        </div>
                        {{/ifEq}}
                    </div>

                    <div class="find-id-form__btn-wrap" slot="findMethod">
                        {{#ifEq findMethod 'MOBILE'}}
                        <button class="btn btn--fill-point btn--md" shopby-action="CERTIFICATION_MOBILE_NO">휴대폰 본인인증</button>
                        {{else}}
                        <button class="btn btn--fill-point btn--md" shopby-action="FIND_ID_SUBMIT">아이디 찾기</button>
                        {{/ifEq}}
                    </div>
                </div>
            </find-account-basic-information>
        </div>
    </div>
</main>

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