File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="terms-wrap">
<div class="page-title mb40">
<h2 class="page-sub-title" aria-live="polite">약관동의</h2>
</div>
<div class="terms-use mb40">
<div class="flex justify-between align-center">
<h3 class="content-title2 mb20">이용약관 안내</h3>
<router-link :to="{path:'/aidt/terms/view.page', query: { type: 'use' }}" target="_blank" class="link-text" >이용약관
전문보기</router-link>
</div>
<div class="terms-content overflow-y mb24 radius" tabindex="0">
<Terms1 />
</div>
<div>
<div class="mb5 check-group flex justify-start align-center">
<input type="radio" name="agreeInput1" id="agreement1" v-model="agreeTerms" :value="true"
@change="handleAgreeTerms" />
<label for="agreement1" class="detail-text inline-block ml5">이용약관에 동의합니다.</label>
</div>
<div class="check-group flex justify-start align-center">
<input type="radio" name="agreeInput1" id="nonAgreement1" v-model="agreeTerms" :value="false"
@change="handleAgreeTerms" />
<label for="nonAgreement1" class="detail-text inline-block ml5">이용약관에 미동의합니다.</label>
</div>
</div>
</div>
<div class="terms-privacy mb40">
<div class="flex justify-between align-center">
<h3 class="content-title2 mb20">개인정보 수집·이용 동의</h3>
<router-link :to="{path:'/aidt/terms/view.page', query: { type: 'privacy' }}" target="_blank"
class="link-text">개인정보
처리방침 전문보기</router-link>
</div>
<div class="terms-content overflow-y mb24 radius" tabindex="0">
<ul>
<li class=" mb10">
<p class="detail-text">1. 개인정보의 수집·이용 목적 : AI 디지털교과서 통합지원센터 홈페이지 서비스 제공(회원 관리, 민원 처리, 서비스 개선)
</p>
</li>
<li class=" mb10">
<table class="terms-table">
<caption class="detail-text mb5">2. 수집하는 개인정보의 항목 :</caption>
<colgroup>
<col width="15%">
<col width="70%">
<col width="15%">
</colgroup>
<thead>
<tr>
<th rowspan="2" class="text-ct">회원유형</th>
<th colspan="2" class="text-ct">개인정보항목</th>
</tr>
<tr>
<th class="text-ct">필수 항목</th>
<th class="text-ct">선택항목</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-ct">기업회원</td>
<td class="text-lf">
<ul>
<li>⦁아이디, 비밀번호, 이름, 본인인증정보(DI값), 연락처, 이메일, 기업명, 생년월일 정보</li>
<li>⦁재직증명서(파일)</li>
</ul>
</td>
<td>직위</td>
</tr>
<tr>
<td class="text-ct">일반회원</td>
<td>
<ul>
<li class="text-lf">⦁아이디, 비밀번호, 이름, 본인인증정보(DI값), 연락처, 이메일, 생년월일 정보</li>
</ul>
</td>
<td></td>
</tr>
</tbody>
</table>
</li>
<li class=" mb10">
<p class="detail-text">3. 개인정보의 처리 및 보유기간 : <span class="border-b admin-sec-title">2년</span>
</p>
</li>
<li class=" mb10">
<p class="detail-text">4. 개인정보의 수집·이용 동의 거부 권리 및 동의 거부에 따른 불이익 내용 또는 제한사항 : 위의 개인정보 수집·이용에 대한
동의를 거부할 권리가 있습니다.</p>
<div class="pl15">
<p class="detail-text">- 필수 항목은 서비스 제공에 필수적으로 제공되어야 하는 정보이므로, 동의를 거부하는 경우 회원가입 및 서비스 이용이
제한됩니다.</p>
<p class="detail-text">- 선택항목의 수집·이용에 동의를 거부하시더라도 회원가입 및 서비스 이용의 제한은 없습니다.</p>
</div>
</li>
<li class=" mb10">
<p class="detail-bold">5. 만 14세 미만 아동의 회원가입을 제한합니다.</p>
</li>
</ul>
</div>
<div>
<div class="mb5 check-group flex justify-start align-center">
<input type="radio" name="agreeInput2" id="agreement2" v-model="agreePrivacy" :value="true"
@change="handleAgreePrivacy" />
<label for="agreement2" class="detail-text inline-block ml5">개인정보 수집 및 이용에 동의합니다.</label>
</div>
<div class="check-group flex justify-start align-center mb5">
<input type="radio" name="agreeInput2" id="nonAgreement2" v-model="agreePrivacy" :value="false"
@change="handleAgreePrivacy" />
<label for="nonAgreement2" class="detail-text inline-block ml5">개인정보 수집 및 이용에 미동의합니다.</label>
</div>
<div class="check-group flex justify-start align-center">
<input type="checkbox" name="ageAgree" id="ageAgree" v-model="agreeAge" :value="true"
@change="handleAgreeAge" />
<label for="ageAgree" class="detail-text inline-block ml5">본인은 <span class="detail-bold">만 14세
이상</span>입니다. <span class="detail-bold">(필수)</span></label>
</div>
</div>
</div>
<div class="terms-privacy mb40">
<div class="flex justify-between align-center">
<h3 class="content-title2 mb20">개인정보 수집·이용 동의(선택)</h3>
<!-- <router-link :to="{ name: 'TermsPage', params: { type: 'Privacy' } }" target="_blank"
class="link-text">개인정보
처리방침 전문보기</router-link> -->
</div>
<div class="terms-content overflow-y mb24 radius" tabindex="0">
<ul>
<li class=" mb10">
<p class="detail-text">1. 개인정보의 수집·이용 목적 : AI 디지털교과서 통합지원센터 추후 <span class="border-b">기술지원 신청 및
안내</span> </p>
</li>
<li class=" mb10">
<table class="terms-table">
<caption class="detail-text mb5">2. 수집하는 개인정보의 항목 :</caption>
<colgroup>
<col width="30%">
<col width="70%">
</colgroup>
<thead>
<tr>
<th rowspan="2" class="text-ct">회원유형</th>
<th class="text-ct">개인정보항목</th>
</tr>
<tr>
<th class="text-ct">선택 항목</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-ct">기업회원</td>
<td>
<ul>
<li>⦁이름, 연락처, 이메일, 기업명</li>
</ul>
</td>
</tr>
</tbody>
</table>
</li>
<li class=" mb10">
<p class="detail-text">3. 개인정보의 처리 및 보유기간 : <span class="border-b admin-sec-title">2년</span>
</p>
</li>
<li class=" mb10">
<p class="detail-text">4. 개인정보의 활용 동의를 거부하시더라도 회원가입 및 서비스 이용의 제한은 없습니다. 다만, AI 디지털교과서 통합지원센터의 기술
교육 신청 시 신청정보를 추가로 요구할 수 있습니다. </p>
</li>
</ul>
</div>
<div>
<div class="mb5 check-group flex justify-start align-center">
<input type="radio" name="agreeInput3" id="selectvalue" v-model="agreeOptional" :value="true"
@change="handleAgreeOptional" />
<label for="selectvalue" class="detail-text inline-block ml5">개인정보 수집 및 이용에 동의합니다.</label>
</div>
<div class="check-group flex justify-start align-center mb5">
<input type="radio" name="agreeInput3" id="nonSelectvalue" v-model="agreeOptional" :value="false"
@change="handleAgreeOptional" />
<label for="nonSelectvalue" class="detail-text inline-block ml5">개인정보 수집 및 이용에 미동의합니다.</label>
</div>
</div>
<!-- <div class="check-group flex justify-start align-center">
<input type="checkbox" name="selectvalue" id="selectvalue" v-model="agreeOptional"
@change="handleAgreeOptional" />
<label for="selectvalue" class="detail-text inline-block ml5">개인정보 수집·이용에 동의합니다.(선택)</label>
</div> -->
</div>
<div class="all-terms">
<div class="mb30 flex justify-center align-center">
<input type="checkbox" name="allAgree" id="allAgreement" v-model="agreeAll" @click="allCheck" />
<label for="allAgreement"
class="content-sub-title inline-block ml5"> 이용약관, 개인정보 수집 및 이용에 모두 동의합니다.</label>
</div>
<!-- <div class="check-group flex justify-start align-center">
<input type="checkbox" name="selectvalue" id="selectvalue" v-model="agreeAll" />
<label for="selectvalue" class="detail-text inline-block ml5">이용약관 개인정보 수집 이용 동의에 모두 동의합니다.</label>
</div> -->
<div class="btn-zone flex justify-between no-gutters">
<div class="gd-1">
<button class="large-btn darkg-border-btn ml0" title="뒤로가기" @click="refusal">뒤로가기</button>
</div>
<div class="gd-1">
<button class="large-btn blue-btn ml0" title="다음" @click="termsVaildation">다음</button>
</div>
</div>
</div>
</div>
</template>
<script>
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import ProgressBar from '../../../component/progressbar/ProgressBar.vue';
import Terms1 from '../../../component/terms/Terms1.vue';
export default {
data() {
return {
// 이용약관동의여부
agreeTerms: '',
// 개인정보 수집 및 이용 동의 여부
agreePrivacy: '',
// 14세 이상 동의여부
agreeAge: false,
// 개인정보 수집 및 이용(선택) 동의 여부
agreeOptional: '',
// 모든 동의 여부
agreeAll: false
}
},
methods: {
handleAgreeTerms() {
// this.agreeTerms = !this.agreeTerms;
this.updateAgreeAll();
},
handleAgreePrivacy() {
//this.agreePrivacy = !this.agreePrivacy;
this.updateAgreeAll();
},
handleAgreeAge() {
//this.agreeAge = !this.agreeAge;
this.updateAgreeAll();
},
handleAgreeOptional() {
//this.agreeOptional = !this.agreeOptional;
this.updateAgreeAll();
},
updateAgreeAll() {
this.agreeAll = this.agreeTerms && this.agreePrivacy && this.agreeAge && this.agreeOptional;
},
allCheck() {
if (!this.agreeAll) {
this.agreeTerms = true
this.agreePrivacy = true
this.agreeAge = true
this.agreeOptional = true
} else {
this.agreeTerms = ''
this.agreePrivacy = ''
this.agreeAge = false
this.agreeOptional = ''
}
},
termsVaildation(){
if(this.agreeTerms && this.agreePrivacy && this.agreeAge){
this.$emit('TermsSuccess', 2, this.agreeOptional);
}else{
alert('이용 약관에 동의하셔야 다음 단계로 넘어갈 수 있습니다.');
}
},
refusal() {
window.scrollTo(0, 0);
this.$router.push({ path: '/', query: {} });
}
},
watch: {
},
components: {
'PageNavigationBar': PageNavigationBar,
'ProgressBar': ProgressBar,
'Terms1': Terms1
},
mounted() {
}
}
</script>