Aurora Modules

쇼핑몰 약관

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

모듈명: terms-information원본소스

이용 약관 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
hasRequiredTerms	boolean	false	필수 약관 여부
isAllChecked	boolean	false	전체 동의 여부
terms	Terms[]	[]	적용 중인 몰 약관 조회 API 응답 결과를 가공 (사용중인 약관 정보) (아래 타입 참조)
customTerms	CustomTerms[]	[]	추가 약관 조회 API 응답 결과를 가공 (사용중인 추가 약관 정보) (아래 타입 참조)

Terms 타입

속성명	타입	기본값	설명
id	boolean	false	약관 구분 키 값
required	boolean	false	필수 약관 여부 (이용약관, 개인정보 수집/이용, 만 14세 이상 약관)
hasDetailView	boolean	false	약관 상세 보기 내용 존재 여부
title	string	-	약관 타입 (이용약관, 전자금융거래 이용약관, 개인정보처리방침 등…)

CustomTerms 타입

속성명	타입	기본값	설명
id	boolean	false	추가약관 구분 키 값
required	boolean	false	추가약관 필수 여부 (이용약관, 개인정보 수집/이용, 만 14세 이상 약관)
hasDetailView	boolean	false	추가약관 상세 보기 내용 존재 여부
title	string	-	추가약관 타입 (이용약관, 전자금융거래 이용약관, 개인정보처리방침 등…)

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div class="sign-up-form">
    <terms-information>
        <div>
            <div class="sign-up-form__item sign-up-form__agree-wrap">
                <p class="sign-up-form__title">약관동의</p>
                <div class="sign-up-form__input-wrap">
                    <div class="sign-up-form__checkbox--all">
                        <label class="form-check form-check--md">
                            <input type="checkbox" slot="isAllChecked" shopby-on:click="CHECK_ALL_TERMS" />
                            <span class="form-check__label">아래 약관에 모두 동의합니다.</span>
                        </label>
                    </div>
                    <ul class="sign-up-form__agree-list">
                        <div slot="terms">
                            {{#each terms}}
                            <li>
                                <div class="sign-up-form__checkbox--partial">
                                    <label class="form-check form-check--md">
                                        <input type="checkbox" value="{{id}}" shopby-on:click="CHECK_TERMS" />
                                        <span class="form-check__label">{{getMandatoryLabel required}} {{title}}</span>
                                    </label>
                                    {{#if hasDetailView}}
                                    <button class="btn btn--default" type="button" shopby-term-id="{{id}}" shopby-action="SHOW_TERM_DETAIL">보기</button>
                                    {{/if}}
                                </div>
                            </li>
                            {{/each}}
                        </div>
                        <div slot="customTerms">
                            {{#each customTerms}}
                            <li>
                                <div class="sign-up-form__checkbox--partial">
                                    <label class="form-check form-check--md">
                                        <input type="checkbox" value="{{id}}" shopby-on:click="CHECK_TERMS" />
                                        <span class="form-check__label">{{getMandatoryLabel required}} {{title}}</span>
                                    </label>
                                    {{#if hasDetailView}}
                                    <button class="btn btn--default" type="button" shopby-term-id="{{id}}" shopby-action="SHOW_TERM_DETAIL">보기</button>
                                    {{/if}}
                                </div>
                            </li>
                            {{/each}}
                        </div>
                    </ul>
                </div>
            </div>
            <div class="sign-up-form__notice-list">
                <p>주문, 결제, 고객 상담 등 원활한 정보 제공을 위해 이메일 주소 및 휴대폰 번호는 정확히 기입하셔야 합니다.</p>
            </div>
        </div>
    </terms-information>
</div>

<div class="sign-up-form">
    <terms-information>
        <div>
            <div class="sign-up-form__item sign-up-form__agree-wrap">
                <p class="sign-up-form__title">약관동의</p>
                <div class="sign-up-form__input-wrap">
                    <div class="sign-up-form__checkbox--all">
                        <label class="form-check form-check--sm">
                            <input type="checkbox" slot="isAllChecked" shopby-on:click="CHECK_ALL_TERMS" />
                            <span class="form-check__label">아래 약관에 모두 동의합니다.</span>
                        </label>
                    </div>
                    <ul class="sign-up-form__agree-list">
                        <div slot="terms">
                            {{#each terms}}
                            <li>
                                <div class="sign-up-form__checkbox--partial">
                                    <label class="form-check form-check--sm">
                                        <input type="checkbox" value="{{id}}" shopby-on:click="CHECK_TERMS" />
                                        <span class="form-check__label">{{getMandatoryLabel required}} {{title}}</span>
                                    </label>
                                    {{#if hasDetailView}}
                                    <button class="btn btn--default" type="button" shopby-term-id="{{id}}" shopby-action="SHOW_TERM_DETAIL">보기</button>
                                    {{/if}}
                                </div>
                            </li>
                            {{/each}}
                        </div>
                        <div slot="customTerms">
                            {{#each customTerms}}
                            <li>
                                <div class="sign-up-form__checkbox--partial">
                                    <label class="form-check form-check--sm">
                                        <input type="checkbox" value="{{id}}" shopby-on:click="CHECK_TERMS" />
                                        <span class="form-check__label">{{getMandatoryLabel required}} {{title}}</span>
                                    </label>
                                    {{#if hasDetailView}}
                                    <button class="btn btn--default" type="button" shopby-term-id="{{id}}" shopby-action="SHOW_TERM_DETAIL">보기</button>
                                    {{/if}}
                                </div>
                            </li>
                            {{/each}}
                        </div>
                    </ul>
                </div>
            </div>
            <div class="sign-up-form__notice-list">
                <p>주문, 결제, 고객 상담 등 원활한 정보 제공을 위해 이메일 주소 및 휴대폰 번호는 정확히 기입하셔야 합니다.</p>
            </div>
        </div>
    </terms-information>
</div>

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