Aurora Modules

회사소개/이용약관/개인정보처리방침/이용안내

회사소개/이용약관/개인정보처리방침/이용안내 페이지에서 노출되는 약관 모듈입니다.

URL:
(회사소개) /pages/service/company-introduce.html
(개인정보처리방침) /pages/service/privacy-policy.html
(이용약관) /pages/service/use-terms.html
(이용안내) /pages/service/use-guide.html

관련 API : 🔗 적용 중인 몰 약관 조회 API

모듈명: terms-detail원본소스

약관 정보 모듈입니다.

속성

속성명	타입	기본값	설명
terms-type	MALLINTRODUCTION \| ACCESSGUIDE \| USE \| PI_PROCESS	-	(필수) 약관 타입 MALLINTRODUCTION: 회사소개, ACCESSGUIDE: 이용안내, USE: 이용약관, PI_PROCESS: 개인정보처리방침

사용 가능 변수

변수명	타입	기본값	설명
isShowCompanyMap	boolean	false	회사소개 페이지에서 지도 표시 가능 여부 (정상적인 카키오맵 키가 설정되지 않는 경우 false)
termsDetail	TermsDetail	-	적용 중인 몰 약관 조회 API 응답 중 `termsKey`과 동일 (아래 타입 참조)

TermsDetail 타입

속성명	타입	기본값	설명
used	boolean	false	약관 사용여부
contents	string	-	약관 내용
enforcementDate	string	-	시행일(yyyy-mm-dd)

모듈명: terms-history-selector원본소스

약관 선택 모듈입니다.

속성

속성명	타입	기본값	설명
terms-type	USE \| PI_PROCESS	-	(필수) 약관 타입 USE: 이용약관, PI_PROCESS: 개인정보처리방침

사용 가능 변수

변수명	타입	기본값	설명
termsHistory	TermsHistory[]	[]	약관 변경이력 조회하기 API 응답결과와 동일
unableSelectOption	boolean	false	약관 변경이력 비활성화 여부
shopby-terms-history	string	-	약관 변경이력 select 키

TermsHistory 타입

속성명	타입	기본값	설명
termsEnforcementStatusLabel	string	-	약관 시행일 상태
enforcementDate	string	-	약관 시행일 (yyyy-mm-dd)
termsNo	number	0	약관 번호

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-panel">
    <div class="agreement">
        <h1 class="agreement__title">개인정보처리방침</h1>
        <terms-detail terms-type="PI_PROCESS">
            <div>
                <div class="editor agreement__content" slot="content">{{{termsDetail.contents}}}</div>
            </div>
        </terms-detail>
        <terms-history-selector terms-type="PI_PROCESS">
            <div>
                <div class="agreement__terms-history-select" slot="termsHistory">
                    <span class="select select--sm">
                        <select shopby-on:change="CHANGE_TERMS" shopby-disabled="{{unableSelectOption}}" shopby-terms-history>
                            {{#each termsHistory}}
                            <option value="{{termsNo}}">
                                {{enforcementDate}} {{#if termsEnforcementStatusLabel}} ({{termsEnforcementStatusLabel}}) {{/if}}
                            </option>
                            {{/each}}
                        </select>
                    </span>
                </div>
            </div>
        </terms-history-selector>
    </div>
</main>

<main class="l-content">
    <div class="agreement">
        <p class="agreement__title">개인정보처리방침</p>
        <terms-detail terms-type="PI_PROCESS">
            <div>
                <div class="editor agreement__content" slot="content">{{{termsDetail.contents}}}</div>
            </div>
        </terms-detail>
        <terms-history-selector terms-type="PI_PROCESS">
            <div>
                <div slot="termsHistory">
                    <span class="select select--sm">
                        <select shopby-on:change="CHANGE_TERMS" shopby-disabled="{{unableSelectOption}}" shopby-terms-history>
                            {{#each termsHistory}}
                            <option value="{{termsNo}}">
                                {{enforcementDate}} {{#if termsEnforcementStatusLabel}} ({{termsEnforcementStatusLabel}}) {{/if}}
                            </option>
                            {{/each}}
                        </select>
                    </span>
                </div>
            </div>
        </terms-history-selector>
    </div>
</main>

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