Aurora Modules

회원탈퇴 폼

회원탈퇴 페이지에서 회원탈퇴시 필요한 정보를 입력하는 폼 모듈입니다.

URL: /pages/my/withdrawal.html

모듈명: withdrawal-profile-form원본소스

회원탈퇴 폼 모듈입니다.

속성

속성명	타입	기본값	설명
shopby-max	number	-	input 최대 길이 ( maxlength )

사용 가능 변수

변수명	타입	기본값	설명
termAgreed	boolean	false	탈퇴 약관 동의 여부
memberName	string	-	회원명
memberId	string	-	회원아이디
openIdProviderLabel	string	-	간편 가입 시 제공자
openIdProvider	string	-	간편 가입 시 제공자
termContents	string	-	약관 내용
reason	string	-	탈퇴 사유

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-my-page">
    <div class="withdrawal-form">
        <withdrawal-profile-form>
            <div>
                <div class="withdrawal-form__name-wrap">
                    <p slot="memberName">
                        {{memberName}}
                        <span slot="openIdProviderLabel">
                            ( {{#ifEq openIdProviderLabel ''}} 쇼핑몰 {{else}} {{openIdProviderLabel}} {{/ifEq}} 아이디 회원 )
                        </span>
                    </p>
                </div>
                <div slot="openIdProviderLabel">
                    {{#ifEq openIdProviderLabel ''}}
                    <!-- 아이디 -->
                    <div class="withdrawal-form__item-wrap">
                        <label>
                            <span class="dot dot--r-must">아이디</span>
                        </label>
                        <div class="withdrawal-form__input-wrap" slot="memberId">
                            <span class="input-field input-field--sm is-disabled">
                                <input type="text" disabled name="memberId" value="{{memberId}}" placeholder="아이디" />
                            </span>
                        </div>
                    </div>
                    {{/ifEq}}
                </div>
                <div class="withdrawal-form__item-wrap">
                    <div>
                        <label>
                            <span class="dot dot--r-must">탈퇴사유</span>
                        </label>
                        <div class="character-counter">
                            <div class="withdrawal-form__input-wrap">
                                <textarea
                                    class="text-area"
                                    name="reason"
                                    shopby-max="50"
                                    maxlength="50"
                                    placeholder="탈퇴 사유를 입력해주세요."
                                    shopby-on:input="INPUT_WITHDRAWAL_REASON"
                                ></textarea>
                                <span class="character-counter__status character-counter__status--character">
                                    <span class="character-counter__count" slot="reason">{{convertToKoreanCurrency reason.length}}</span>
                                    <span class="character-counter__limit-count">/ 50</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="withdrawal-form__term-wrap" slot="termContents">{{{termContents}}}</div>
                <div class="withdrawal-form__checkbox-wrap">
                    <div class="withdrawal-form__checkbox">
                        <label class="form-check form-check--sm">
                            <input type="checkbox" slot="termAgreed" shopby-on:change="CHECK_WITHDRAWAL_TERM_AGREED" />
                            <span class="form-check__label">
                                회원탈퇴 시 처리사항에 안내 내용을 확인하였으며,
                                <br />
                                회원탈퇴에 동의합니다.
                            </span>
                        </label>
                    </div>
                </div>
            </div>
        </withdrawal-profile-form>
    </div>
</main>

<main class="l-contents">
    <div class="withdrawal-form">
        <withdrawal-profile-form>
            <div>
                <div class="withdrawal-form__name-wrap">
                    <p slot="memberName">
                        {{memberName}}
                        <span slot="openIdProviderLabel">
                            ( {{#ifEq openIdProviderLabel ''}} 쇼핑몰 {{else}} {{openIdProviderLabel}} {{/ifEq}} 아이디 회원 )
                        </span>
                    </p>
                </div>
                <div slot="openIdProviderLabel">
                    {{#ifEq openIdProviderLabel ''}}
                    <!-- 아이디 -->
                    <div class="withdrawal-form__item-wrap">
                        <label>
                            <span class="dot dot--r-must">아이디</span>
                        </label>
                        <div class="withdrawal-form__input-wrap" slot="memberId">
                            <span class="input-field input-field--sm is-disabled">
                                <input type="text" disabled name="memberId" value="{{memberId}}" placeholder="아이디" />
                            </span>
                        </div>
                    </div>
                    {{/ifEq}}
                </div>
                <div class="withdrawal-form__item-wrap">
                    <div>
                        <label>
                            <span class="dot dot--r-must">탈퇴사유</span>
                        </label>
                        <div class="character-counter">
                            <div class="withdrawal-form__input-wrap">
                                <textarea
                                    class="text-area"
                                    name="reason"
                                    shopby-max="50"
                                    maxlength="50"
                                    placeholder="탈퇴 사유를 입력해주세요."
                                    shopby-on:input="INPUT_WITHDRAWAL_REASON"
                                ></textarea>
                                <span class="character-counter__status character-counter__status--character">
                                    <span class="character-counter__count" slot="reason">{{convertToKoreanCurrency reason.length}}</span>
                                    <span class="character-counter__limit-count">/ 50</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="withdrawal-form__term-wrap" slot="termContents">{{{termContents}}}</div>
                <div class="withdrawal-form__checkbox-wrap">
                    <div class="withdrawal-form__checkbox">
                        <label class="form-check form-check--sm">
                            <input type="checkbox" slot="termAgreed" shopby-on:change="CHECK_WITHDRAWAL_TERM_AGREED" />
                            <span class="form-check__label">
                                회원탈퇴 시 처리사항에 안내 내용을 확인하였으며,
                                <br />
                                회원탈퇴에 동의합니다.
                            </span>
                        </label>
                    </div>
                </div>
            </div>
        </withdrawal-profile-form>
    </div>
</main>

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