Aurora Modules

회원정보 폼

회원가입, 회원정보 수정 페이지에서 노출되는 회원정보 폼 모듈입니다.

URL: (회원정보수정) /pages/my/modify-member.html, (회원가입) /pages/sign-up/sign-up-form.html

모듈명: profile-basic-information원본소스

회원정보(기본정보) 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
isPasswordEditMode	boolean	false	비밀번호 수정 모드
isRecentlyExitedMember	boolean	false	탈퇴한 회원 여부
memberName	MemberName	-	회원명 정보 (아래 타입 참조)
memberId	MemberId	-	회원 아이디 정보 (아래 타입 참조)
password	Password	-	비밀번호 정보 (아래 타입 참조)
passwordConfirm	Password	-	비밀번호 확인 정보 (아래 타입 참조)

MemberName 타입

속성명	타입	기본값	설명
isVisible	boolean	false	이름 항목 노출 여부
isRequired	boolean	false	이름 항목 필수 여부
value	string	-	이름 값
message	string	-	이름 값이 유효하지 않는 이유

MemberId 타입

속성명	타입	기본값	설명
isValid	boolean	false	아이디 항목 유효성 여부
value	string	-	아이디 값
message	string	-	아이디 값이 유효하지 않는 이유

Password 타입

속성명	타입	기본값	설명
isValid	boolean	false	비밀번호 항목 유효성 여부
value	string	-	비밀번호 값
message	string	-	비밀번호 값이 유효하지 않는 이유

모듈명: profile-email-information원본소스

회원정보(이메일) 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
emailCertificationStatus	SUCCESS \| NONE \| INITIAL \| PROCESSING	INITIAL	이메일 인증 상태
directMailAgreeYmdt	string	-	이메일 수신 동의 일시
email	Email	-	회원 이메일 정보 (아래 타입 참조)
directMailAgreed	DirectMailAgreed	-	이메일 수신여부 정보 (아래 타입 참조)

Email 타입

속성명	타입	기본값	설명
isVisible	boolean	false	이메일 항목 노출 여부
isRequired	boolean	false	이메일 항목 필수 여부
value	string	-	이메일 값

DirectMailAgreed 타입

속성명	타입	기본값	설명
isVisible	boolean	false	이메일 수신 동의 항목 노출 여부

모듈명: profile-sms-information원본소스

회원정보(SMS) 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
smsCertificationStatus	SUCCESS \| NONE \| INITIAL \| PROCESSING \| SMS_AUTHENTICATION	NONE	SMS 인증 상태
smsAgreeYmdt	string	-	SMS 수신동의 일시
ci	string \| null	-	본인인증 정보
key	string \| null	-	본인인증 키
mobileNo	MobileNo	-	회원 휴대전화 정보 (아래 타입 참조)
smsAgreed	SmsAgreed	-	SMS 수신동의 여부 정보 (아래 타입 참조)

MobileNo 타입

속성명	타입	기본값	설명
isVisible	boolean	false	휴대폰 번호 항목 노출 여부
isRequired	boolean	false	휴대폰 번호 항목 필수 여부
value	string	-	휴대폰 번호 값
message	string	-	휴대폰 값이 유효하지 않는 이유

SmsAgreed 타입

속성명	타입	기본값	설명
isVisible	boolean	false	이메일 수신 동의 항목 노출 여부

모듈명: profile-optional-information원본소스

회원정보(부가정보) 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
isJoinTimeSmsAuthentication	boolean	false	회원인증 가입시점 휴대폰 본인인증 여부
zipCd	string	-	우편번호
jibunAddress	string	-	주소
address	string	-	도로명 주소
jibunDetailAddress	string	-	상세주소 정보
nickname	Nickname	-	닉네임 정보 (아래 타입 참조)
detailAddress	DetailAddress	-	도로명 상세주소 정보 (아래 타입 참조)
telephoneNo	TelephoneNo	-	회원 전화번호 정보 (아래 타입 참조)
birthday	Birthday	-	회원 생년월일 정보 (아래 타입 참조)
sex	Sex	-	회원 성별 정보 (아래 타입 참조)

Nickname 타입

속성명	타입	기본값	설명
isVisible	boolean	false	닉네임 항목 노출 여부
isRequired	boolean	false	닉네임 항목 필수 여부
value	string	-	닉네임 값
message	string	-	닉네임 값이 유효하지 않는 이유

DetailAddress 타입

속성명	타입	기본값	설명
isVisible	boolean	false	주소 항목 노출 여부
isRequired	boolean	false	주소 항목 필수 여부
value	string	-	주소 값
message	string	-	주소 값이 유효하지 않는 이유

TelephoneNo 타입

속성명	타입	기본값	설명
isVisible	boolean	false	전화번호 항목 노출 여부
isRequired	boolean	false	전화번호 항목 필수 여부
value	string	-	전화번호 값
message	string	-	전화번호 값이 유효하지 않는 이유

Sex 타입

속성명	타입	기본값	설명
isVisible	boolean	false	성별 항목 노출 여부
isRequired	boolean	false	성별 항목 필수 여부
value	string	-	성별 값
message	string	-	성별 값이 유효하지 않는 이유

모듈명: profile-certification원본소스

회원정보(인증) 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
certificationType	SMS \| MOBILE \| null	null	인증 수단
certificatedNumber	string	-	인증 번호
certificated	Certificated	-	인증 여부 (아래 타입 참조)

Certificated 타입

속성명	타입	기본값	설명
isValid	boolean	false	인증 유효 여부
message	string	-	인증 실패 이유

모듈명: profile-extra-information원본소스

회원정보(추가항목) 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
extraInfoContents	ExtraInfoContent[]	[]	추가항목 정보

ExtraInfoContent 타입

속성명	타입	기본값	설명
extraInfoName	string	-	항목 명
status	REQUIRED \| USED	-	사용 상태
extraInfoType	TEXTBOX \| RADIOBUTTON \| DROPDOWN \| CHECKBOX \| IMAGE	-	항목 타입
extraInfoNo	number	-	항목 번호
extraInfoOptions	ExtraInfoOption[]	[]	옵션 목록

ExtraInfoOption 타입

속성명	타입	기본값	설명
extraInfoOptionName	string	-	옵션 명
extraInfoOptionNo	number	-	옵션 번호

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div class="sign-up-form">
    <profile-basic-information>
        <div>
            <div class="sign-up-form__item">
                <label class="sign-up-form__title">
                    <span class="dot dot--r-must">아이디</span>
                </label>
                <div slot="memberId" class="sign-up-form__input-wrap">
                    <span class="input-field input-field--md {{#unless memberId.isValid}}is-error{{/unless}}">
                        <input
                            shopby-focus-field="memberId"
                            type="text"
                            name="member-id"
                            placeholder="아이디"
                            value="{{memberId.value}}"
                            shopby-on:input="INPUT_MEMBER_ID_VALID"
                            shopby-on:change="CHANGE_MEMBER_ID"
                            shopby-on:blur="BLUR_MEMBER_ID"
                            maxlength="35"
                        />
                    </span>
                    <p class="description {{#unless memberId.isValid}}invalid-alert{{/unless}}">{{memberId.message}}</p>
                </div>
            </div>
            <div class="sign-up-form__item">
                <label class="sign-up-form__title">
                    <span class="dot dot--r-must">비밀번호</span>
                </label>
                <div slot="password" class="sign-up-form__input-wrap">
                    <span class="input-field input-field--md {{#unless password.isValid}}is-error{{/unless}}">
                        <input
                            type="password"
                            autocomplete="new-password"
                            name="password"
                            shopby-focus-field="password"
                            value="{{password.value}}"
                            placeholder="비밀번호 (영문, 숫자, 특수문자 8~20자)"
                            shopby-on:change="CHANGE_PASSWORD"
                            shopby-on:input="INPUT_MEMBER_PASSWORD"
                            shopby-on:blur="BLUR_PASSWORD"
                            maxlength="20"
                        />
                    </span>
                    <p class="description {{#unless password.isValid}}invalid-alert{{/unless}}">{{password.message}}</p>
                </div>
            </div>
            <div class="sign-up-form__item">
                <label class="sign-up-form__title">
                    <span class="dot dot--r-must">비밀번호 재입력</span>
                </label>
                <div slot="passwordConfirm" class="sign-up-form__input-wrap">
                    <span class="input-field input-field--md {{#unless passwordConfirm.isValid}}is-error{{/unless}}">
                        <input
                            type="password"
                            autocomplete="new-password"
                            shopby-focus-field="passwordConfirm"
                            name="password-confirm"
                            placeholder="비밀번호 재입력"
                            value="{{passwordConfirm.value}}"
                            shopby-on:change="CHANGE_PASSWORD_CONFIRM"
                            shopby-on:blur="BLUR_PASSWORD_CONFIRM"
                            shopby-on:input="INPUT_MEMBER_PASSWORD_CONFIRM"
                            maxlength="20"
                        />
                    </span>
                    <p class="description {{#unless passwordConfirm.isValid}}invalid-alert{{/unless}}">{{passwordConfirm.message}}</p>
                </div>
            </div>
            <div slot="memberName">
                {{#if memberName.isVisible}}
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="{{#if memberName.isRequired}}dot dot--r-must{{/if}}">이름</span>
                    </label>
                    <div class="sign-up-form__input-wrap">
                        <span class="input-field input-field--md {{#unless memberName.isValid}}is-error{{/unless}}">
                            <input
                                type="text"
                                name="member-name"
                                shopby-focus-field="memberName"
                                placeholder="이름"
                                value="{{memberName.value}}"
                                shopby-on:change="CHANGE_MEMBER_NAME"
                                shopby-on:input="INPUT_MEMBER_NAME_VALID"
                                shopby-on:blur="BLUR_MEMBER_NAME"
                                maxlength="20"
                            />
                        </span>
                        <p class="description {{#unless memberName.isValid}}invalid-alert{{/unless}}">{{memberName.message}}</p>
                    </div>
                </div>
                {{/if}}
            </div>
        </div>
    </profile-basic-information>
    <profile-email-information shopby-auth-time-type="JOIN_TIME">
        <div>
            <div slot="email">
                {{#if email.isVisible}}
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="{{#if email.isRequired}}dot dot--r-must{{/if}}">이메일 주소</span>
                    </label>
                    <div class="sign-up-form__input-wrap">
                        <div class="email-input">
                            <span class="input-field input-field--md email-input__id {{#unless email.isValid}}is-error{{/unless}}">
                                <input
                                    type="text"
                                    value="{{displayEmailId email.value}}"
                                    shopby-focus-field="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 {{#unless email.isValid}}is-error{{/unless}}">
                                <input
                                    type="text"
                                    shopby-focus-field="email"
                                    value="{{displayEmailDomain email.value}}"
                                    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 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 slot="emailCertificationStatus">
                            {{#ifNe emailCertificationStatus 'NONE'}} {{#ifEq emailCertificationStatus 'SUCCESS'}}
                            <button type="button" class="btn btn--line-dark btn--sm" shopby-on:click="CLICK_EMAIL_CERTIFICATION">재인증</button>
                            {{else}}
                            <button type="button" class="btn btn--line-dark btn--sm" shopby-action="EMAIL_CERTIFICATION">
                                {{#ifEq emailCertificationStatus 'INITIAL'}} 인증번호 발송 {{else}} 인증번호 재발송 {{/ifEq}}
                            </button>
                            {{/ifEq}} {{/ifNe}}
                        </div>
                        <p class="description {{#unless email.isValid}}invalid-alert{{/unless}}">{{email.message}}</p>
                    </div>
                </div>
                {{/if}}
            </div>
            <div slot="directMailAgreed">
                {{#if directMailAgreed.isVisible}}
                <ul class="sign-up-form__agree-list">
                    <li>
                        <div class="sign-up-form__checkbox--partial">
                            <label class="form-check form-check--sm">
                                <input type="checkbox" name="directMailAgreed" shopby-on:change="CHECK_EMAIL_AGREED" />
                                <span class="form-check__label">이메일 수신 동의</span>
                            </label>
                        </div>
                    </li>
                </ul>
                {{/if}}
            </div>
        </div>
    </profile-email-information>
    <profile-sms-information shopby-auth-time-type="JOIN_TIME">
        <div>
            <div slot="mobileNo">
                {{#if mobileNo.isVisible}}
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="{{#if mobileNo.isRequired}}dot dot--r-must{{/if}}">휴대폰 번호</span>
                    </label>
                    <div class="sign-up-form__input-wrap">
                        <div class="phone-number-input">
                            <span
                                class="input-field input-field--md {{#unless mobileNo.isValid}}is-error{{/unless}} {{#ifEq smsCertificationStatus 'SUCCESS'}}is-disabled{{/ifEq}}"
                            >
                                <input
                                    type="text"
                                    shopby-focus-field="mobileNo"
                                    maxlength="12"
                                    value="{{mobileNo.value}}"
                                    placeholder="휴대폰 번호 - 없이 입력"
                                    name="telephoneNo"
                                    shopby-on:input="INPUT_PHONE_ONLY_NUMBER"
                                    shopby-on:change="CHANGE_PHONE_NUMBER"
                                />
                            </span>
                        </div>
                        <div slot="smsCertificationStatus">
                            {{#ifNe smsCertificationStatus 'NONE'}} {{#ifEqOne smsCertificationStatus 'INITIAL' 'PROCESSING' }}
                            <button type="button" class="btn btn--line-dark btn--sm" shopby-action="SMS_CERTIFICATION">
                                {{#ifEq smsCertificationStatus 'INITIAL'}} 인증번호 발송 {{else}} 인증번호 재발송 {{/ifEq}}
                            </button>
                            {{/ifEqOne}} {{#ifEq smsCertificationStatus 'SUCCESS'}}
                            <button type="button" class="btn btn--line-dark btn--sm" shopby-on:click="CLICK_SMS_CERTIFICATION">재인증</button>
                            {{/ifEq}} {{#ifEq smsCertificationStatus 'SMS_AUTHENTICATION'}}
                            <button type="button" class="btn btn--line-dark btn--sm" shopby-action="AUTHENTICATION_BY_PHONE">휴대폰 본인인증</button>
                            {{/ifEq}} {{/ifNe}}
                        </div>
                        <p class="description invalid-alert">{{mobileNo.message}}</p>
                    </div>
                </div>
                {{/if}}
            </div>
            <div slot="smsAgreed">
                {{#if smsAgreed.isVisible}}
                <ul class="sign-up-form__agree-list">
                    <li>
                        <div class="sign-up-form__checkbox--partial">
                            <label class="form-check form-check--sm">
                                <input type="checkbox" name="smsAgreed" shopby-on:change="CHECK_SMS_AGREED" />
                                <span class="form-check__label">SMS 수신 동의</span>
                            </label>
                        </div>
                    </li>
                </ul>
                {{/if}}
            </div>
        </div>
    </profile-sms-information>
    <profile-certification>
        <div>
            <div slot="certificationType">
                {{#ifEq certificationType 'SMS'}}
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="dot dot--r-must">인증 번호</span>
                    </label>

                    <div class="sign-up-form__input-wrap" slot="certificated">
                        <span class="input-field input-field--md {{#unless certificated.isValid}}is-error{{/unless}}">
                            <input
                                type="text"
                                maxlength="6"
                                shopby-focus-field="certificatedNumber"
                                slot="certificatedNumber"
                                value="{{certificatedNumber}}"
                                placeholder="인증번호를 입력해주세요."
                                shopby-on:input="INPUT_CERTIFICATION_ONLY_NUMBER"
                                shopby-on:change="CHANGE_CERTIFICATION_NUMBER"
                            />
                        </span>
                        <button type="button" class="btn btn--line-dark btn--sm certification-btn" shopby-on:click="CERTIFICATION_CONFIRM">확인</button>
                    </div>
                    <p class="description invalid-alert">{{certificated.message}}</p>
                </div>
                {{/ifEq}}
            </div>
        </div>
    </profile-certification>
    <profile-optional-information>
        <div>
            <div slot="nickname">
                {{#if nickname.isVisible}}
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="{{#if nickname.isRequired}}dot dot--r-must{{/if}}">닉네임</span>
                    </label>
                    <div class="sign-up-form__input-wrap">
                        <span class="input-field input-field--md {{#unless nickname.isValid}}is-error{{/unless}}">
                            <input
                                type="text"
                                name="nickname"
                                shopby-focus-field="nickname"
                                value="{{nickname.value}}"
                                placeholder="닉네임"
                                shopby-on:change="CHANGE_NICKNAME"
                                shopby-on:input="INPUT_NICKNAME_VALID"
                                shopby-on:blur="BLUR_NICKNAME"
                                maxlength="20"
                            />
                        </span>
                        {{#ifNe '' nickname.message}}
                        <p class="description {{#unless nickname.isValid}}invalid-alert{{/unless}}">{{nickname.message}}</p>
                        {{/ifNe}}
                    </div>
                </div>
                {{/if}}
            </div>

            <div slot="telephoneNo">
                {{#if telephoneNo.isVisible}}
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="{{#if telephoneNo.isRequired}}dot dot--r-must{{/if}}">전화번호</span>
                    </label>
                    <div class="sign-up-form__input-wrap">
                        <span class="input-field input-field--md {{#unless telephoneNo.isValid}}is-error{{/unless}}">
                            <input
                                type="text"
                                maxlength="12"
                                value="{{telephoneNo.value}}"
                                placeholder="전화번호 - 없이 입력"
                                name="telephoneNo"
                                shopby-on:input="INPUT_TELEPHONE_ONLY_NUMBER"
                                shopby-on:change="CHANGE_TELEPHONE_NUMBER"
                            />
                        </span>
                    </div>
                    <p class="description invalid-alert">{{telephoneNo.message}}</p>
                </div>
                {{/if}}
            </div>
            <div slot="detailAddress">
                {{#if detailAddress.isVisible}}
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="{{#if detailAddress.isRequired}}dot dot--r-must{{/if}}">주소</span>
                    </label>
                    <div class="sign-up-form__address-wrap sign-up-form__input-wrap">
                        <form class="address-form">
                            <p class="address-form__zip-code">
                                <span class="input-field input-field--md is-readonly {{#unless detailAddress.isValid}}is-error{{/unless}}">
                                    <input type="text" readonly="" slot="zipCodeInfo" value="{{zipCd}}" />
                                </span>
                                <button type="button" class="btn btn--line-dark btn--sm" shopby-action="SEARCH_ZIP_CODE">우편번호 찾기</button>
                            </p>
                            <span class="input-field input-field--md is-disabled  {{#unless detailAddress.isValid}}is-error{{/unless}}">
                                <input type="text" disabled="" slot="zipCodeInfo" value="{{address}}" />
                            </span>
                            <span class="input-field input-field--md {{#unless detailAddress.isValid}}is-error{{/unless}}">
                                <input
                                    type="text"
                                    maxlength="100"
                                    value="{{detailAddress.value}}"
                                    shopby-on:change="CHANGE_RECEIVER_DETAIL_ADDRESS"
                                    shopby-action="CHANGE_DETAIL_ADDRESS"
                                    shopby-focus-field="detailAddress"
                                />
                            </span>
                            <p class="description invalid-alert">{{detailAddress.message}}</p>
                        </form>
                    </div>
                </div>
                {{/if}}
            </div>
            <div slot="birthday">
                {{#if birthday.isVisible}}
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="{{#if birthday.isRequired}}dot dot--r-must{{/if}}">생년월일</span>
                    </label>
                    <div class="sign-up-form__input-wrap sign-up-form__birth-wrap">
                        <span class="select select--md {{#unless birthday.isValid}}is-error{{/unless}}">
                            <select shopby-focus-field="birthday" shopby-on:change="CHANGE_BIRTH_YEAR">
                                <option value="" selected disabled>년도</option>
                                {{generateYearRangeOption true}}
                            </select>
                        </span>
                        <span class="select select--md {{#unless birthday.isValid}}is-error{{/unless}}">
                            <select shopby-focus-field="birthday" shopby-on:change="CHANGE_BIRTH_MONTH">
                                <option value="" selected disabled>월</option>
                                {{generateRangeOption 1 12}}
                            </select>
                        </span>
                        <span class="select select--md {{#unless birthday.isValid}}is-error{{/unless}}">
                            <select shopby-focus-field="birthday" shopby-on:change="CHANGE_BIRTH_DAY">
                                <option value="" selected disabled>일</option>
                                {{generateDateRangeOption (extractYearFromHyphenatedDate birthday.value) (extractMonthFromHyphenatedDate birthday.value)}}
                            </select>
                        </span>
                    </div>
                    <p class="description invalid-alert">{{birthday.message}}</p>
                </div>
                {{/if}}
            </div>
            <div slot="sex">
                {{#if sex.isVisible}}
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="{{#if sex.isRequired}}dot dot--r-must{{/if}}">성별</span>
                    </label>
                    <div class="sign-up-form__radio-wrap">
                        <div class="radio-group">
                            <label class="form-check form-check--sm {{#if isJoinTimeSmsAuthentication}}is-disabled{{/if}}">
                                <input type="radio" checked shopby-focus-field="sex" value="" shopby-on:click="CHANGE_SEX" />
                                <span class="form-check__label">사용 안 함</span>
                            </label>
                            <label class="form-check form-check--sm {{#if isJoinTimeSmsAuthentication}}is-disabled{{/if}}">
                                <input type="radio" shopby-focus-field="sex" value="M" shopby-on:click="CHANGE_SEX" />
                                <span class="form-check__label">남자</span>
                            </label>
                            <label class="form-check form-check--sm {{#if isJoinTimeSmsAuthentication}}is-disabled{{/if}}">
                                <input type="radio" shopby-focus-field="sex" value="F" shopby-on:click="CHANGE_SEX" />
                                <span class="form-check__label">여자</span>
                            </label>
                        </div>
                        <p class="description invalid-alert">{{sex.message}}</p>
                    </div>
                </div>
                {{/if}}
            </div>
        </div>
    </profile-optional-information>

    <profile-extra-information>
        <div>
            <div slot="extraInfoContents">
                {{#each extraInfoContents}} {{#ifEq extraInfoType 'TEXTBOX'}}
                <div class="sign-up-form__item">
                    <p class="sign-up-form__title">
                        <span class="{{#ifEq status 'REQUIRED'}}dot dot--r-must{{else}}{{/ifEq}}">{{{extraInfoName}}}</span>
                    </p>
                    <div class="sign-up-form__input-wrap">
                        <span class="input-field input-field--sm {{#unless isValid}}is-error{{/unless}}">
                            <input
                                type="text"
                                name="{{extraInfoName}}"
                                value="{{extraInfoOptionTextContent}}"
                                maxlength="300"
                                shopby-extra-info-no="{{extraInfoNo}}"
                                shopby-extra-info-option-no="{{extraInfoOptionNo}}"
                                shopby-on:input="INPUT_EXTRA_INFO_TEXT_OPTION"
                                shopby-on:change="CHANGE_EXTRA_INFO_TEXT_OPTION"
                            />
                        </span>
                    </div>
                    <p class="description invalid-alert">{{#unless isValid}} {{message}} {{/unless}}</p>
                </div>
                {{/ifEq}} {{#ifEq extraInfoType 'RADIOBUTTON'}}
                <div class="sign-up-form__item">
                    <p class="sign-up-form__title">
                        <span class="{{#ifEq status 'REQUIRED'}}dot dot--r-must{{else}}{{/ifEq}}">{{{extraInfoName}}}</span>
                    </p>
                    <div class="sign-up-form__input-wrap">
                        <div class="extra-info-radio-group">
                            {{#each extraInfoOptions}}
                            <label class="form-check form-check--sm">
                                <input
                                    type="radio"
                                    name="{{{../extraInfoName}}}"
                                    value="{{extraInfoOptionNo}}"
                                    shopby-extra-info-no="{{../extraInfoNo}}"
                                    shopby-on:change="CHANGE_EXTRA_INFO_RADIO_OPTION"
                                />
                                <span class="form-check__label">{{{extraInfoOptionName}}}</span>
                            </label>
                            {{/each}}
                        </div>
                    </div>
                    <p class="description invalid-alert">{{#unless isValid}} {{message}} {{/unless}}</p>
                </div>
                {{/ifEq}} {{#ifEq extraInfoType 'CHECKBOX'}}
                <div class="sign-up-form__item">
                    <p class="sign-up-form__title">
                        <span class="{{#ifEq status 'REQUIRED'}}dot dot--r-must{{else}}{{/ifEq}}">{{{extraInfoName}}}</span>
                    </p>
                    <div class="sign-up-form__input-wrap">
                        <div class="extra-info-checkbox-group">
                            {{#each extraInfoOptions}}
                            <label class="form-check form-check--md">
                                <input
                                    type="checkbox"
                                    name="{{../extraInfoName}}"
                                    shopby-extra-info-no="{{../extraInfoNo}}"
                                    shopby-extra-info-option-no="{{extraInfoOptionNo}}"
                                    shopby-on:change="CHANGE_EXTRA_INFO_CHECKBOX_OPTION"
                                />
                                <span class="form-check__label">{{{extraInfoOptionName}}}</span>
                            </label>
                            {{/each}}
                        </div>
                    </div>
                    <p class="description invalid-alert">{{#unless isValid}} {{message}} {{/unless}}</p>
                </div>
                {{/ifEq}} {{#ifEq extraInfoType 'DROPDOWN'}}
                <div class="sign-up-form__item">
                    <p class="sign-up-form__title">
                        <span class="{{#ifEq status 'REQUIRED'}}dot dot--r-must{{else}}{{/ifEq}}">{{{extraInfoName}}}</span>
                    </p>
                    <div class="sign-up-form__input-wrap">
                        <span class="select select--md {{#unless isValid}}is-error{{/unless}}">
                            <select name="{{extraInfoName}}" shopby-extra-info-no="{{extraInfoNo}}" shopby-on:change="CHANGE_EXTRA_INFO_SELECT_OPTION">
                                <option value="" selected disabled shopby-disabled>선택</option>
                                {{#each extraInfoOptions}}
                                <option value="{{extraInfoOptionNo}}">{{{extraInfoOptionName}}}</option>
                                {{/each}}
                            </select>
                        </span>
                    </div>
                    <p class="description invalid-alert">{{#unless isValid}} {{message}} {{/unless}}</p>
                </div>
                {{/ifEq}} {{/each}}
            </div>
        </div>
    </profile-extra-information>
</div>

<div class="sign-up-form">
    <div>
        <profile-basic-information>
            <div>
                <!-- 아이디 -->
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="dot dot--r-must">아이디</span>
                    </label>
                    <div slot="memberId" class="sign-up-form__input-wrap">
                        <span class="input-field input-field--sm {{#unless memberId.isValid}}is-error{{/unless}}">
                            <input
                                shopby-focus-field="memberId"
                                type="text"
                                name="member-id"
                                placeholder="아이디"
                                value="{{memberId.value}}"
                                shopby-on:input="INPUT_MEMBER_ID_VALID"
                                shopby-on:change="CHANGE_MEMBER_ID"
                                shopby-on:blur="BLUR_MEMBER_ID"
                                maxlength="35"
                            />
                        </span>
                        <p class="description {{#unless memberId.isValid}}invalid-alert{{/unless}}">{{memberId.message}}</p>
                    </div>
                </div>
                <!-- 아이디 -->
                <!-- 비밀번호 -->
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="dot dot--r-must">비밀번호</span>
                    </label>
                    <div slot="password" class="sign-up-form__input-wrap">
                        <span class="input-field input-field--sm {{#unless password.isValid}}is-error{{/unless}}">
                            <input
                                type="password"
                                autocomplete="new-password"
                                name="password"
                                shopby-focus-field="password"
                                value="{{password.value}}"
                                placeholder="비밀번호 (영문, 숫자, 특수문자 8~20자)"
                                shopby-on:change="CHANGE_PASSWORD"
                                shopby-on:blur="BLUR_PASSWORD"
                                shopby-on:input="INPUT_MEMBER_PASSWORD"
                                maxlength="20"
                            />
                        </span>
                        <p class="description {{#unless password.isValid}}invalid-alert{{/unless}}">{{password.message}}</p>
                    </div>
                </div>
                <!-- 비밀번호 -->
                <!-- 비밀번호 재입력 -->
                <div class="sign-up-form__item">
                    <label class="sign-up-form__title">
                        <span class="dot dot--r-must">비밀번호 재입력</span>
                    </label>
                    <div slot="passwordConfirm" class="sign-up-form__input-wrap">
                        <span class="input-field input-field--sm {{#unless passwordConfirm.isValid}}is-error{{/unless}}">
                            <input
                                type="password"
                                autocomplete="new-password"
                                shopby-focus-field="passwordConfirm"
                                name="password-confirm"
                                placeholder="비밀번호 재입력"
                                value="{{passwordConfirm.value}}"
                                shopby-on:change="CHANGE_PASSWORD_CONFIRM"
                                shopby-on:blur="BLUR_PASSWORD_CONFIRM"
                                shopby-on:input="INPUT_MEMBER_PASSWORD_CONFIRM"
                                maxlength="20"
                            />
                        </span>
                        <p class="description {{#unless passwordConfirm.isValid}}invalid-alert{{/unless}}">{{passwordConfirm.message}}</p>
                    </div>
                </div>
                <!-- 비밀번호 재입력 -->
                <!-- 이름 -->
                <div slot="memberName">
                    {{#if memberName.isVisible}}
                    <div class="sign-up-form__item">
                        <label class="sign-up-form__title">
                            <span class="{{#if memberName.isRequired}}dot dot--r-must{{/if}}">이름</span>
                        </label>
                        <div class="sign-up-form__input-wrap">
                            <span class="input-field input-field--sm {{#unless memberName.isValid}}is-error{{/unless}}">
                                <input
                                    type="text"
                                    name="member-name"
                                    shopby-focus-field="memberName"
                                    placeholder="이름"
                                    value="{{memberName.value}}"
                                    shopby-on:change="CHANGE_MEMBER_NAME"
                                    shopby-on:input="INPUT_MEMBER_NAME_VALID"
                                    shopby-on:blur="BLUR_MEMBER_NAME"
                                    maxlength="20"
                                />
                            </span>
                            <p class="description {{#unless memberName.isValid}}invalid-alert{{/unless}}">{{memberName.message}}</p>
                        </div>
                    </div>
                    {{/if}}
                </div>
                <!-- 이름 -->
            </div>
        </profile-basic-information>
        <!-- 닉네임 -->
        <profile-optional-information shopby-module-key="profile-nickname-information">
            <div>
                <div slot="nickname">
                    {{#if nickname.isVisible}}
                    <div class="sign-up-form__item">
                        <label class="sign-up-form__title">
                            <span class="{{#if nickname.isRequired}}dot dot--r-must{{/if}}">닉네임</span>
                        </label>
                        <div class="sign-up-form__input-wrap">
                            <span class="input-field input-field--sm {{#unless nickname.isValid}}is-error{{/unless}}">
                                <input
                                    type="text"
                                    name="nickname"
                                    shopby-focus-field="nickname"
                                    value="{{nickname.value}}"
                                    placeholder="닉네임"
                                    shopby-on:change="CHANGE_NICKNAME"
                                    shopby-on:input="INPUT_NICKNAME_VALID"
                                    shopby-on:blur="BLUR_NICKNAME"
                                    maxlength="20"
                                />
                            </span>
                            {{#ifNe '' nickname.message}}
                            <p class="description {{#unless nickname.isValid}}invalid-alert{{/unless}}">{{nickname.message}}</p>
                            {{/ifNe}}
                        </div>
                    </div>
                    {{/if}}
                </div>
            </div>
        </profile-optional-information>
        <!-- 닉네임 -->
        <!-- 이메일 -->
        <profile-email-information shopby-auth-time-type="JOIN_TIME">
            <div>
                <div slot="email">
                    {{#if email.isVisible}}
                    <div class="sign-up-form__item">
                        <label class="sign-up-form__title">
                            <span class="{{#if email.isRequired}}dot dot--r-must{{/if}}">이메일 주소</span>
                        </label>
                        <div class="sign-up-form__input-wrap">
                            <div class="email-input">
                                <span class="input-field input-field--sm email-input__id {{#unless email.isValid}}is-error{{/unless}}">
                                    <input
                                        type="text"
                                        value="{{displayEmailId email.value}}"
                                        shopby-focus-field="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--sm email-input__domain {{#unless email.isValid}}is-error{{/unless}}">
                                    <input
                                        type="text"
                                        shopby-focus-field="email"
                                        value="{{displayEmailDomain email.value}}"
                                        name="email-domain"
                                        shopby-on:change="CHANGE_EMAIL_DOMAIN"
                                        shopby-on:input="INPUT_EMAIL_DOMAIN_VALID"
                                        maxlength="255"
                                    />
                                </span>
                            </div>
                            <span class="select select--sm">
                                <select 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 slot="emailCertificationStatus">
                                {{#ifNe emailCertificationStatus 'NONE'}} {{#ifEq emailCertificationStatus 'SUCCESS'}}
                                <button type="button" class="btn btn--line-dark btn--md" shopby-on:click="CLICK_EMAIL_CERTIFICATION">재인증</button>
                                {{else}}
                                <button type="button" class="btn btn--line-dark btn--md" shopby-action="EMAIL_CERTIFICATION">
                                    {{#ifEq emailCertificationStatus 'INITIAL'}} 인증번호 발송 {{else}} 인증번호 재발송 {{/ifEq}}
                                </button>
                                {{/ifEq}} {{/ifNe}}
                            </div>
                            <p class="description {{#unless email.isValid}}invalid-alert{{/unless}}">{{email.message}}</p>
                        </div>
                    </div>
                    {{/if}}
                </div>
                <div slot="directMailAgreed">
                    {{#if directMailAgreed.isVisible}}
                    <!-- 메일 수신 동의 -->
                    <ul class="sign-up-form__agree-list">
                        <li>
                            <div class="sign-up-form__checkbox--partial">
                                <label class="form-check form-check--sm">
                                    <input type="checkbox" name="directMailAgreed" shopby-on:change="CHECK_EMAIL_AGREED" />
                                    <span class="form-check__label">이메일 수신 동의</span>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <!-- 메일 수신 동의 -->
                    {{/if}}
                </div>
            </div>
        </profile-email-information>
        <!-- 이메일 -->
        <!-- 이메일 인증 -->
        <div class="sign-up-form__certification">
            <profile-certification>
                <div>
                    <div slot="certificationType">
                        {{#ifEq certificationType 'EMAIL'}}
                        <div class="sign-up-form__item">
                            <label class="sign-up-form__title">
                                <span class="dot dot--r-must">인증 번호</span>
                            </label>

                            <div class="sign-up-form__input-wrap" slot="certificated">
                                <span class="input-field input-field--sm {{#unless certificated.isValid}}is-error{{/unless}}">
                                    <input
                                        slot="certificatedNumber"
                                        type="text"
                                        shopby-focus-field="certificatedNumber"
                                        maxlength="6"
                                        value="{{certificatedNumber}}"
                                        placeholder="인증번호를 입력해주세요."
                                        shopby-on:input="INPUT_CERTIFICATION_ONLY_NUMBER"
                                        shopby-on:change="CHANGE_CERTIFICATION_NUMBER"
                                    />
                                </span>
                                <button type="button" class="btn btn--line-dark btn--md certification-btn" shopby-on:click="CERTIFICATION_CONFIRM">확인</button>
                                <p class="description invalid-alert">{{certificated.message}}</p>
                            </div>
                        </div>
                        {{/ifEq}}
                    </div>
                </div>
            </profile-certification>
            <shopby-timer>
                <div>
                    <div slot="timerModuleKey">
                        {{#ifEq timerModuleKey 'EMAIL_CERTIFICATION'}}
                        <div class="timer">
                            <span class="count-down" slot="time">
                                <span slot="isExpiredTime">
                                    {{#if isExpiredTime}}
                                    <span class="description invalid-alert">00:00</span>
                                    {{else}}
                                    <span>{{padStart time.minutes}}:{{padStart time.seconds}}</span>
                                    {{/if}}
                                </span>
                            </span>
                        </div>
                        {{/ifEq}}
                    </div>
                </div>
            </shopby-timer>
        </div>

        <!-- 이메일 인증 -->
        <!-- 휴대폰 번호 -->
        <profile-sms-information shopby-auth-time-type="JOIN_TIME">
            <div>
                <div slot="mobileNo">
                    {{#if mobileNo.isVisible}}
                    <div class="sign-up-form__item">
                        <label class="sign-up-form__title">
                            <span class="{{#if mobileNo.isRequired}}dot dot--r-must{{/if}}">휴대폰 번호</span>
                        </label>
                        <div class="sign-up-form__input-wrap">
                            <div class="phone-number-input">
                                <span
                                    class="input-field input-field--sm {{#unless mobileNo.isValid}}is-error{{/unless}} {{#ifEq smsCertificationStatus 'SUCCESS'}}is-disabled{{/ifEq}}"
                                >
                                    <input
                                        type="text"
                                        shopby-focus-field="mobileNo"
                                        maxlength="12"
                                        value="{{mobileNo.value}}"
                                        placeholder="휴대폰 번호 - 없이 입력"
                                        name="telephoneNo"
                                        shopby-on:input="INPUT_PHONE_ONLY_NUMBER"
                                        shopby-on:change="CHANGE_PHONE_NUMBER"
                                    />
                                </span>
                            </div>
                            <div slot="smsCertificationStatus">
                                {{#ifNe smsCertificationStatus 'NONE'}} {{#ifEqOne smsCertificationStatus 'INITIAL' 'PROCESSING' }}
                                <button type="button" class="btn btn--line-dark btn--md" shopby-action="SMS_CERTIFICATION">
                                    {{#ifEq smsCertificationStatus 'INITIAL'}} 인증번호 발송 {{else}} 인증번호 재발송 {{/ifEq}}
                                </button>
                                {{/ifEqOne}} {{#ifEq smsCertificationStatus 'SUCCESS'}}
                                <button type="button" class="btn btn--line-dark btn--md" shopby-on:click="CLICK_SMS_CERTIFICATION">재인증</button>
                                {{/ifEq}} {{#ifEq smsCertificationStatus 'SMS_AUTHENTICATION'}}
                                <button type="button" class="btn btn--line-dark btn--md" shopby-action="AUTHENTICATION_BY_PHONE">휴대폰 본인인증</button>
                                {{/ifEq}} {{/ifNe}}
                            </div>
                            <p class="description invalid-alert">{{mobileNo.message}}</p>
                        </div>
                    </div>
                    {{/if}}
                </div>
                <div slot="smsAgreed">
                    {{#if smsAgreed.isVisible}}
                    <ul class="sign-up-form__agree-list">
                        <li>
                            <div class="sign-up-form__checkbox--partial">
                                <label class="form-check form-check--sm">
                                    <input type="checkbox" name="smsAgreed" shopby-on:change="CHECK_SMS_AGREED" />
                                    <span class="form-check__label">SMS 수신 동의</span>
                                </label>
                            </div>
                        </li>
                    </ul>
                    {{/if}}
                </div>
            </div>
        </profile-sms-information>
        <!-- 휴대폰 번호 -->
        <!-- SMS 인증 -->
        <div class="sign-up-form__certification">
            <profile-certification>
                <div>
                    <div slot="certificationType">
                        {{#ifEq certificationType 'SMS'}}
                        <div class="sign-up-form__item">
                            <label class="sign-up-form__title">
                                <span class="dot dot--r-must">인증 번호</span>
                            </label>

                            <div class="sign-up-form__input-wrap" slot="certificated">
                                <span class="input-field input-field--sm {{#unless certificated.isValid}}is-error{{/unless}}">
                                    <input
                                        type="text"
                                        maxlength="6"
                                        shopby-focus-field="certificatedNumber"
                                        slot="certificatedNumber"
                                        value="{{certificatedNumber}}"
                                        placeholder="인증번호를 입력해주세요."
                                        shopby-on:input="INPUT_CERTIFICATION_ONLY_NUMBER"
                                        shopby-on:change="CHANGE_CERTIFICATION_NUMBER"
                                    />
                                </span>
                                <button type="button" class="btn btn--line-dark btn--md certification-btn" shopby-on:click="CERTIFICATION_CONFIRM">확인</button>
                            </div>
                            <p class="description invalid-alert">{{certificated.message}}</p>
                        </div>
                        {{/ifEq}}
                    </div>
                </div>
            </profile-certification>
            <shopby-timer>
                <div>
                    <div slot="timerModuleKey">
                        {{#ifEq timerModuleKey 'SMS_CERTIFICATION'}}
                        <div class="timer">
                            <span class="count-down" slot="time">
                                <span slot="isExpiredTime">
                                    {{#if isExpiredTime}}
                                    <span class="description invalid-alert">00:00</span>
                                    {{else}}
                                    <span>{{padStart time.minutes}}:{{padStart time.seconds}}</span>
                                    {{/if}}
                                </span>
                            </span>
                        </div>
                        {{/ifEq}}
                    </div>
                </div>
            </shopby-timer>
        </div>
        <!-- SMS 인증 -->
        <profile-optional-information>
            <div>
                <!-- 전화번호 -->
                <div slot="telephoneNo">
                    {{#if telephoneNo.isVisible}}
                    <div class="sign-up-form__item">
                        <label class="sign-up-form__title">
                            <span class="{{#if telephoneNo.isRequired}}dot dot--r-must{{/if}}">전화번호</span>
                        </label>
                        <div class="sign-up-form__input-wrap">
                            <span class="input-field input-field--sm {{#unless telephoneNo.isValid}}is-error{{/unless}}">
                                <input
                                    type="text"
                                    maxlength="12"
                                    value="{{telephoneNo.value}}"
                                    placeholder="전화번호 - 없이 입력"
                                    name="telephoneNo"
                                    shopby-on:input="INPUT_TELEPHONE_ONLY_NUMBER"
                                    shopby-on:change="CHANGE_TELEPHONE_NUMBER"
                                />
                            </span>
                        </div>
                        <p class="description invalid-alert">{{telephoneNo.message}}</p>
                    </div>
                    {{/if}}
                </div>
                <!-- 전화번호 -->
                <!-- 주소 -->
                <div slot="detailAddress">
                    {{#if detailAddress.isVisible}}
                    <div class="sign-up-form__item">
                        <label class="sign-up-form__title">
                            <span class="{{#if detailAddress.isRequired}}dot dot--r-must{{/if}}">주소</span>
                        </label>
                        <div class="sign-up-form__address-wrap sign-up-form__input-wrap">
                            <form class="address-form">
                                <p class="address-form__zip-code">
                                    <span class="input-field input-field--sm is-readonly {{#unless detailAddress.isValid}}is-error{{/unless}}">
                                        <input type="text" readonly="" slot="zipCodeInfo" value="{{zipCd}}" />
                                    </span>
                                    <button type="button" class="btn btn--line-dark btn--md" shopby-action="SEARCH_ZIP_CODE">우편번호 찾기</button>
                                </p>
                                <span class="input-field input-field--sm is-disabled  {{#unless detailAddress.isValid}}is-error{{/unless}}">
                                    <input type="text" disabled="" slot="zipCodeInfo" value="{{address}}" />
                                </span>
                                <span class="input-field input-field--sm {{#unless detailAddress.isValid}}is-error{{/unless}}">
                                    <input
                                        type="text"
                                        maxlength="100"
                                        value="{{detailAddress.value}}"
                                        shopby-on:change="CHANGE_RECEIVER_DETAIL_ADDRESS"
                                        shopby-on:input="INPUT_DETAIL_ADDRESS_VALID"
                                        shopby-action="CHANGE_DETAIL_ADDRESS"
                                        shopby-focus-field="detailAddress"
                                    />
                                </span>
                                <p class="description invalid-alert">{{detailAddress.message}}</p>
                            </form>
                        </div>
                    </div>
                    {{/if}}
                </div>
                <!-- 주소 -->
                <!-- 생년월일 -->
                <div slot="birthday">
                    {{#if birthday.isVisible}}
                    <div class="sign-up-form__item">
                        <label class="sign-up-form__title">
                            <span class="{{#if birthday.isRequired}}dot dot--r-must{{/if}}">생년월일</span>
                        </label>
                        <div class="sign-up-form__input-wrap sign-up-form__birth-wrap">
                            <span class="select select--sm {{#unless birthday.isValid}}is-error{{/unless}}">
                                <select shopby-focus-field="birthday" shopby-on:change="CHANGE_BIRTH_YEAR">
                                    <option value="" selected disabled>년도</option>
                                    {{generateYearRangeOption true}}
                                </select>
                            </span>
                            <span class="select select--sm {{#unless birthday.isValid}}is-error{{/unless}}">
                                <select shopby-focus-field="birthday" shopby-on:change="CHANGE_BIRTH_MONTH">
                                    <option value="" selected disabled>월</option>
                                    {{generateRangeOption 1 12}}
                                </select>
                            </span>
                            <span class="select select--sm {{#unless birthday.isValid}}is-error{{/unless}}">
                                <select shopby-focus-field="birthday" shopby-on:change="CHANGE_BIRTH_DAY">
                                    <option value="" selected disabled>일</option>
                                    {{generateDateRangeOption (extractYearFromHyphenatedDate birthday.value) (extractMonthFromHyphenatedDate birthday.value)}}
                                </select>
                            </span>
                        </div>
                        <p class="description invalid-alert">{{birthday.message}}</p>
                    </div>
                    {{/if}}
                </div>
                <!-- 생년월일 -->
                <!-- 성별 -->
                <div slot="sex">
                    {{#if sex.isVisible}}
                    <div class="sign-up-form__item">
                        <label class="sign-up-form__title">
                            <span class="{{#if sex.isRequired}}dot dot--r-must{{/if}}">성별</span>
                        </label>
                        <div class="sign-up-form__radio-wrap">
                            <div class="radio-group">
                                <label class="form-check form-check--sm {{#if isJoinTimeSmsAuthentication}}is-disabled{{/if}}">
                                    <input type="radio" checked shopby-focus-field="sex" value="" shopby-on:click="CHANGE_SEX" />
                                    <span class="form-check__label">사용 안 함</span>
                                </label>
                                <label class="form-check form-check--sm {{#if isJoinTimeSmsAuthentication}}is-disabled{{/if}}">
                                    <input type="radio" shopby-focus-field="sex" value="M" shopby-on:click="CHANGE_SEX" />
                                    <span class="form-check__label">남자</span>
                                </label>
                                <label class="form-check form-check--sm {{#if isJoinTimeSmsAuthentication}}is-disabled{{/if}}">
                                    <input type="radio" shopby-focus-field="sex" value="F" shopby-on:click="CHANGE_SEX" />
                                    <span class="form-check__label">여자</span>
                                </label>
                            </div>
                            <p class="description invalid-alert">{{sex.message}}</p>
                        </div>
                    </div>
                    {{/if}}
                </div>
                <!-- 성별 -->
            </div>
        </profile-optional-information>

        <profile-extra-information>
            <div>
                <div slot="extraInfoContents">
                    {{#each extraInfoContents}} {{#ifEq extraInfoType 'TEXTBOX'}}
                    <div class="sign-up-form__item">
                        <p class="sign-up-form__title">
                            <span class="{{#ifEq status 'REQUIRED'}}dot dot--r-must{{else}}{{/ifEq}}">{{{extraInfoName}}}</span>
                        </p>
                        <div class="sign-up-form__input-wrap">
                            <span class="input-field input-field--sm {{#unless isValid}}is-error{{/unless}}">
                                <input
                                    type="text"
                                    name="{{extraInfoOptionNo}}"
                                    value="{{extraInfoOptionTextContent}}"
                                    maxlength="300"
                                    shopby-extra-info-no="{{extraInfoNo}}"
                                    shopby-extra-info-option-no="{{extraInfoOptionNo}}"
                                    shopby-on:input="INPUT_EXTRA_INFO_TEXT_OPTION"
                                    shopby-on:change="CHANGE_EXTRA_INFO_TEXT_OPTION"
                                />
                            </span>
                        </div>
                        <p class="description invalid-alert">{{#unless isValid}} {{message}} {{/unless}}</p>
                    </div>
                    {{/ifEq}} {{#ifEq extraInfoType 'RADIOBUTTON'}}
                    <div class="sign-up-form__item">
                        <p class="sign-up-form__title">
                            <span class="{{#ifEq status 'REQUIRED'}}dot dot--r-must{{else}}{{/ifEq}}">{{{extraInfoName}}}</span>
                        </p>
                        <div class="sign-up-form__input-wrap">
                            <div class="extra-info-radio-group">
                                {{#each extraInfoOptions}}
                                <label class="form-check form-check--sm">
                                    <input
                                        type="radio"
                                        name="{{{../extraInfoName}}}"
                                        value="{{extraInfoOptionNo}}"
                                        shopby-extra-info-no="{{../extraInfoNo}}"
                                        shopby-on:change="CHANGE_EXTRA_INFO_RADIO_OPTION"
                                    />
                                    <span class="form-check__label">{{{extraInfoOptionName}}}</span>
                                </label>
                                {{/each}}
                            </div>
                        </div>
                        <p class="description invalid-alert">{{#unless isValid}} {{message}} {{/unless}}</p>
                    </div>
                    {{/ifEq}} {{#ifEq extraInfoType 'CHECKBOX'}}
                    <div class="sign-up-form__item">
                        <p class="sign-up-form__title">
                            <span class="{{#ifEq status 'REQUIRED'}}dot dot--r-must{{else}}{{/ifEq}}">{{{extraInfoName}}}</span>
                        </p>
                        <div class="sign-up-form__input-wrap">
                            <div class="extra-info-checkbox-group">
                                {{#each extraInfoOptions}}
                                <label class="form-check form-check--sm">
                                    <input
                                        type="checkbox"
                                        name="{{../extraInfoName}}"
                                        shopby-extra-info-no="{{../extraInfoNo}}"
                                        shopby-extra-info-option-no="{{extraInfoOptionNo}}"
                                        shopby-on:change="CHANGE_EXTRA_INFO_CHECKBOX_OPTION"
                                    />
                                    <span class="form-check__label">{{{extraInfoOptionName}}}</span>
                                </label>
                                {{/each}}
                            </div>
                        </div>
                        <p class="description invalid-alert">{{#unless isValid}} {{message}} {{/unless}}</p>
                    </div>
                    {{/ifEq}} {{#ifEq extraInfoType 'DROPDOWN'}}
                    <div class="sign-up-form__item">
                        <p class="sign-up-form__title">
                            <span class="{{#ifEq status 'REQUIRED'}}dot dot--r-must{{else}}{{/ifEq}}">{{{extraInfoName}}}</span>
                        </p>
                        <div class="sign-up-form__input-wrap">
                            <span class="select select--sm {{#unless isValid}}is-error{{/unless}}">
                                <select shopby-extra-info-no="{{extraInfoNo}}" shopby-on:change="CHANGE_EXTRA_INFO_SELECT_OPTION">
                                    <option value="" selected disabled shopby-disabled>선택</option>
                                    {{#each extraInfoOptions}}
                                    <option value="{{extraInfoOptionNo}}">{{{extraInfoOptionName}}}</option>
                                    {{/each}}
                                </select>
                            </span>
                        </div>
                        <p class="description invalid-alert">{{#unless isValid}} {{message}} {{/unless}}</p>
                    </div>
                    {{/ifEq}} {{/each}}
                </div>
            </div>
        </profile-extra-information>
    </div>
</div>

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