Aurora Modules

간편 회원가입

간편 회원가입 페이지에서 노출되는 간편 회원가입 폼 모듈입니다.

URL: /pages/sign-up/open-id.html

모듈명: open-id-sign-up원본소스

간편 회원가입 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
provider	(PAYCO \| NAVER \| KAKAO \| KAKAO_SYNC \| FACEBOOK \| LINE \| APPLE \| GOOGLE)[]	[]	몰 정보 조회 API 응답 결과 중 `openIdJoinConfig > provider`와 동일 (PAYCO: 페이코, NAVER: 네이버, KAKAO: 카카오, KAKAO_SYNC: 카카오 싱크, FACEBOOK: 페이스북, LINE: 라인, APPLE: 애플, GOOGLE: 구글)
profileInformation	MemberJoinConfig	-	몰 정보 조회 API 응답 결과 중 `memberJoinConfig`와 동일 (아래 타입 참조)

MemberJoinConfig 타입

속성명	타입	기본값	설명
memberName	string	-	회원명
memberId	string	-	아이디
email	string	-	이메일
mobileNo	string	-	휴대전화번호
gender	string	-	성별
birthday	string	-	생년월일

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div class="open-id-agreement-form">
    <open-id-sign-up>
        <div>
            <div class="open-id-agreement-form__description">
                <div class="notice">
                    <span class="sprite-image notice--success"></span>
                </div>
                <span slot="provider">
                    쇼핑몰 이용을 위해 {{provider}} 회원 정보로 가입됩니다.
                    <br />
                    제공된 서비스는 쇼핑몰 탈퇴 시까지 보관됩니다.
                </span>
            </div>
            <div slot="profileInformation">
                {{#if (isEmptyData profileInformation)}}
                <ul class="open-id-agreement-form__callout">
                    {{#ifNe profileInformation.memberId ''}}
                    <li>
                        <div>
                            <h4>아이디</h4>
                            <span>{{profileInformation.memberId}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.memberName ''}}
                    <li>
                        <div>
                            <h4>이름</h4>
                            <span>{{profileInformation.memberName}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.email ''}}
                    <li>
                        <div>
                            <h4>이메일</h4>
                            <span>{{profileInformation.email}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.mobileNo ''}}
                    <li>
                        <div>
                            <h4>휴대폰번호</h4>
                            <span>{{profileInformation.mobileNo}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.gender ''}}
                    <li>
                        <div>
                            <h4>성별</h4>
                            <span>{{getGenderLabel profileInformation.gender}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.birthday ''}}
                    <li>
                        <div>
                            <h4>생일</h4>
                            <span>{{convertDateFormat profileInformation.birthday}}</span>
                        </div>
                    </li>
                    {{/ifNe}}
                </ul>
                {{/if}}
            </div>
        </div>
    </open-id-sign-up>
</div>

<div class="open-id-agreement-form">
    <open-id-sign-up>
        <div>
            <div class="open-id-agreement-form__description">
                <div class="notice">
                    <span class="sprite-image notice--success"></span>
                </div>
                <span slot="provider">
                    쇼핑몰 이용을 위해 {{provider}} 회원 정보로 가입됩니다.
                    <br />
                    제공된 서비스는 쇼핑몰 탈퇴 시까지 보관됩니다.
                </span>
            </div>
            <div slot="profileInformation">
                {{#if (isEmptyData profileInformation)}}
                <ul class="open-id-agreement-form__callout">
                    {{#ifNe profileInformation.memberId ''}}
                    <li>
                        <div>
                            <h4>아이디</h4>
                            <span>{{profileInformation.memberId}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.memberName ''}}
                    <li>
                        <div>
                            <h4>이름</h4>
                            <span>{{profileInformation.memberName}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.email ''}}
                    <li>
                        <div>
                            <h4>이메일</h4>
                            <span>{{profileInformation.email}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.mobileNo ''}}
                    <li>
                        <div>
                            <h4>휴대폰번호</h4>
                            <span>{{profileInformation.mobileNo}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.gender ''}}
                    <li>
                        <div>
                            <h4>성별</h4>
                            <span>{{getGenderLabel profileInformation.gender}}</span>
                        </div>
                    </li>
                    {{/ifNe}} {{#ifNe profileInformation.birthday ''}}
                    <li>
                        <div>
                            <h4>생일</h4>
                            <span>{{convertDateFormat profileInformation.birthday}}</span>
                        </div>
                    </li>
                    {{/ifNe}}
                </ul>
                {{/if}}
            </div>
        </div>
    </open-id-sign-up>
</div>

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