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="content" style="background-color: #f8f8f8;">
<div :class="{ 'top-banner banner': true, [bannerId]: true }" v-if="this.$route.path.startsWith('/aidt')">
<div class="flex-column align-center justify-center content">
<h1 class="banner-title text-ct white" aria-live="assertive">{{ $getMenuInfo().menuNm }}</h1>
<p class="box-title text-ct white">{{ $getMenuInfo().menuCn }}</p>
</div>
</div>
<PageNavigationBar v-if="this.$route.path.startsWith('/aidt')" />
<div class="pt100 pb100 relative introduce-page">
<div class="w1280">
<div class="pt50 pb50">
<h2 class="page-title text-ct mb30" aria-live="polite">AI 디지털교과서란?</h2>
<p class="box-title text-ct mb15">
학생 개인의 능력과 수준에 맞는 맞춤 학습 기회를 지원할 수 있도록<br />
인공지능을 포함한 지능정보기술을 활용하여 다양한 학습자료 및 학습지원 기능 등을 탑재한 교과서입니다.
</p>
<div class="aidt-list flex align-start mb30">
<div class="gd-3 mb10">
<div class="aidt-item radius pd30 text-ct flex-column justify-center">
<h3 class="box-bold-title"><span class="blue">A</span>daptive<br /> Learning</h3>
<p class="box-title">맞춤학습</p>
</div>
</div>
<div class="gd-3 mb10">
<div class="aidt-item radius pd30 text-ct flex-column justify-center">
<h3 class="box-bold-title"><span class="blue">I</span>nteresting &<br />Immersion</h3>
<p class="box-title">흥미와 몰입</p>
</div>
</div>
<div class="gd-3 mb10">
<div class="aidt-item radius pd30 text-ct flex-column justify-center">
<h3 class="box-bold-title"><span class="blue">D</span>iversity &<br /> Data-driven</h3>
<p class="box-title">다양성과 데이터 기반</p>
</div>
</div>
<div class="gd-3 mb10">
<div class="aidt-item radius pd30 text-ct flex-column justify-center">
<h3 class="box-bold-title">High<br /><span class="blue">T</span>echnology</h3>
<p class="box-title">첨단 기술 적용</p>
</div>
</div>
</div>
<div class="flex align-start policy-materials radius">
<div class="gd-2 pd30 radius content flex-column justify-center">
<h2 class="page-sub-title text-ct pd10">정책자료</h2>
</div>
<div class="gd-10 pd20 pt30"
style="background-color: var(--light); border-radius:0 1rem 1rem 0;">
<ul class="flex align-center">
<li class="gd-6 mb10">
<div class="flex justify-between align-center download-item pd10 radius no-gutters">
<p class="gd-10 ellipsis default-text" title="디지털 기반 교육혁신 방안(23.2)">
디지털 기반 교육혁신 방안(23.2)
</p>
<div class="flex justify-end align-center gd-2 pd0">
<button class="icon-btn cursor" aria-label="디지털 기반 교육혁신 방안(23.2) pdf 보기 버튼" id="pdfPreviewButton"
@click="$openPdfViewrWindwow('FILE_0000000005', pageAuth)" title="미리보기">
<svg-icon type="mdi" :path="pdfPath" role="img"
aria-labelledby="pdfPreviewButton"></svg-icon></button>
<button class="icon-btn cursor" aria-label="디지털 기반 교육혁신 방안(23.2) 다운로드 버튼" id="downloadButton"
@click="$downloadFileById('FILE_0000000005', 'CMMN_FILE_0000000005', 'AI 디지털 기반 교육혁신 방안.pdf', 'BBS_0000000031', pageAuth)"
title="다운로드"> <svg-icon type="mdi" :path="downloadPath" role="img"
aria-labelledby="downloadButton"></svg-icon></button>
</div>
</div>
</li>
<li class="gd-6 mb10">
<div class="flex justify-between align-center download-item pd10 radius no-gutters">
<p class="gd-10 ellipsis default-text" title="AI 디지털교과서 추진 방안(23.6)">
AI 디지털교과서 추진 방안(23.6)
</p>
<div class="flex justify-end align-center gd-2 pd0">
<button class="icon-btn cursor" aria-label="AI 디지털교과서 추진 방안(23.6) pdf 보기 버튼" id="pdfPreviewButton"
@click="$openPdfViewrWindwow('FILE_0000000006', pageAuth)" title="미리보기">
<svg-icon type="mdi" :path="pdfPath" role="img"
aria-labelledby="pdfPreviewButton"></svg-icon></button>
<button class="icon-btn cursor" aria-label="AI 디지털교과서 추진 방안(23.6) 다운로드 버튼" id="downloadButton"
@click="$downloadFileById('FILE_0000000006', 'CMMN_FILE_0000000006', 'AI 디지털교과서 추진 방안.pdf', 'BBS_0000000031', pageAuth)"
title="다운로드"> <svg-icon type="mdi" :path="downloadPath" role="img"
aria-labelledby="downloadButton"></svg-icon></button>
</div>
</div>
</li>
<li class="gd-6 mb10">
<div class="flex justify-between align-center download-item pd10 radius no-gutters">
<p class="gd-10 ellipsis default-text" title="디지털 기반 교육혁신 역량강화 지원 방안(24.4)">
디지털 기반 교육혁신 역량강화 지원 방안(24.4)
</p>
<div class="flex justify-end align-center gd-2 pd0">
<button class="icon-btn cursor" aria-label="디지털 기반 교육혁신 역량강화 지원 방안(24.4) pdf 보기 버튼" id="pdfPreviewButton"
@click="$openPdfViewrWindwow('FILE_0000000008', pageAuth)" title="미리보기">
<svg-icon type="mdi" :path="pdfPath" role="img"
aria-labelledby="pdfPreviewButton"></svg-icon></button>
<button class="icon-btn cursor" aria-label="디지털 기반 교육혁신 역량강화 지원 방안(24.4) 다운로드 버튼" id="downloadButton"
@click="$downloadFileById('FILE_0000000008', 'CMMN_FILE_0000000008', '디지털 기반 교육혁신 역량강화 지원 방안.pdf', 'BBS_0000000031', pageAuth)"
title="다운로드"> <svg-icon type="mdi" :path="downloadPath" role="img"
aria-labelledby="downloadButton"></svg-icon></button>
</div>
</div>
</li>
<li class="gd-6 mb10">
<div class="flex justify-between align-center download-item pd10 radius no-gutters">
<p class="gd-10 ellipsis default-text" title="디지털 교육 규범(24.7)">
디지털 교육 규범(24.7)
</p>
<div class="flex justify-end align-center gd-2 pd0">
<button class="icon-btn cursor" aria-label="디지털 교육 규범(24.7) pdf 보기 버튼" id="pdfPreviewButton"
@click="$openPdfViewrWindwow('FILE_0000001274', pageAuth)" title="미리보기">
<svg-icon type="mdi" :path="pdfPath" role="img"
aria-labelledby="pdfPreviewButton"></svg-icon></button>
<button class="icon-btn cursor" aria-label="디지털 교육 규범(24.7) 다운로드 버튼" id="downloadButton"
@click="$downloadFileById('FILE_0000001274', 'CMMN_FILE_0000001013', '디지털 교육 규범.pdf', 'BBS_0000000031', pageAuth)"
title="다운로드"> <svg-icon type="mdi" :path="downloadPath" role="img"
aria-labelledby="downloadButton"></svg-icon></button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="pt50 pb50">
<h2 class="page-title text-ct mb30">AI 디지털교과서 통합지원센터란?</h2>
<ul class="flex justify-center">
<li class="gd-4 mb20 relative">
<div class="introduce-item pd30 radius introduce1">
<h3 class="box-title blue" style="font-weight: 700;">정책</h3>
<p class="box-title ">AIDT 개발의 기술표준 및 정책 연구</p>
</div>
</li>
<li class="gd-4 mb20 relative">
<div class="pd30 radius introduce2 introduce-item">
<h3 class="box-title blue" style="font-weight: 700;">네트워킹</h3>
<p class="box-title ">소통과 협력 기반의 개발 환경 조성</p>
</div>
</li>
<li class="gd-4 mb20 relative">
<div class="pd30 radius introduce3 introduce-item">
<h3 class="box-title blue" style="font-weight: 700;">연계</h3>
<p class="box-title ">공공 서비스와 민간 서비스의 원활한<br />연계 지원</p>
</div>
</li>
<li class="gd-4 mb20 relative">
<div class="pd30 radius introduce4 introduce-item">
<h3 class="box-title blue" style="font-weight: 700;">동향</h3>
<p class="box-title ">AIDT 모델 및 최신 기술 동향 정보 제공</p>
</div>
</li>
<li class="gd-4 mb20 relative">
<div class="pd30 radius introduce5 introduce-item">
<h3 class="box-title blue" style="font-weight: 700;">활용</h3>
<p class="box-title ">AIDT 개발 및 운영 현황분석을 통한<br />활용 활성화</p>
</div>
</li>
</ul>
</div>
<div class="flex">
<div :class="{ 'introduce-wrap gd-4': true, 'mt60': index === 0 || index === 2, 'mb60': index === 1 }"
v-for="(item, index) in items" :key="index">
<div class="introduce-list pd30 radius cursor relative" @mouseover="item.isActive = true"
@mouseout="item.isActive = false">
<div class="content flex-column justify-center align-center">
<div :class="{ 'hov-before text-ct': true, 'none': item.isActive }">
<h3 class="page-sub-title text-ct mb15 white">{{ item.title }}</h3>
<button class="pd15 detail-text" :aria-label="item.title + '자세히 보기'" @click="item.isActive = true">자세히보기</button>
</div>
<div :class="{ 'hov-affter': true, 'active': item.isActive }">
<h3 class="page-sub-title text-ct mb15 white">{{ item.title }}</h3>
<div class="pd20 mb20 sub-item radius">
<div class="pb10 border-b mb10">
<h4 class="box-bold-title text-ct white">{{ item.subtitle1 }}</h4>
</div>
<ul>
<li class="text-ct">{{ item.detail1 }}</li>
<li class="text-ct">{{ item.detail2 }}</li>
</ul>
</div>
<div class="pd20 mb20 sub-item radius">
<div class="pb10 border-b mb10">
<h4 class="box-bold-title text-ct white">{{ item.subtitle2 }}</h4>
</div>
<ul>
<li class="text-ct">{{ item.detail3 }}</li>
<li class="text-ct">{{ item.detail4 }}</li>
<li class="text-ct">{{ item.detail5 }}</li>
</ul>
</div>
<div class="pd20 sub-item radius" v-if="item.subtitle3">
<div class="pb10 border-b mb10">
<h4 class="box-bold-title text-ct white">{{ item.subtitle3 }}</h4>
</div>
<ul>
<li class="text-ct">{{ item.detail6 }}</li>
<li class="text-ct">{{ item.detail7 }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import { mdiFileDownloadOutline, mdiFileSearchOutline } from '@mdi/js';
import { findAllFile } from '../../../../resources/api/bbsCn.js'
import { defaultSearchParams } from '../../../../resources/js/defaultSearchParams';
import { toRaw } from 'vue'
export default {
data() {
return {
pageAuth: this.$store.state.pageAuth,
downloadPath: mdiFileDownloadOutline,
pdfPath: mdiFileSearchOutline,
bannerId: 'introduce-banner',
path: this.$store.state.path,
search: { ...defaultSearchParams },
items: [
{
title: '기술표준 연구',
subtitle1: '가이드라인 제・개정',
detail1: '기술영역별 전문가 협의체 구성 및 운영',
detail2: '제・개정 관련 개발 현황 점검 및 의견수렴',
subtitle2: '개발 표준 제공',
detail3: 'AIDT 교육과정 표준체계',
detail4: '통합인증, 학습데이터 수집 체계',
subtitle3: '개발 생태계 조성',
detail5: '신기술 활용 및 도입 기반 지원',
detail6: '협력 네트워킹 지원',
detail7: 'AI 디지털교과서 모델 제시',
isActive: false
},
{
title: '연계 및 공동자원 지원',
subtitle1: '공공 연계 지원',
detail1: 'API 테스트 및 연계 지원',
detail2: '공공 연계 서비스 안내',
subtitle2: '개발 공동자원 활용 지원',
detail3: '공동 활용 콘텐츠 확보・보급',
detail4: '테스트랩・테스트베드 활용 신청',
detail5: 'AI 트레이닝 데이터셋 제공',
isActive: false
},
{
title: '활용・활성화 지원',
subtitle1: '활용 환경 조성',
detail1: '고객 서비스(CS) 지원',
detail2: '현장 활용 및 활성화 정책 수립',
subtitle2: '활성화 촉진',
detail3: '운영・유지관리 현황 모니터링',
detail4: '운영 결과 분석 및 정책 환류',
isActive: false
}
],
list: [], // 게시판 내용 목록
ntcList: [],
}
},
methods: {
async findAll() {
this.search.id = 'BBS_MNG_0000000005'
this.$setLoading(true);
try {
const res = await findAllFile(toRaw(this.search));
this.ntcList = res.data.data.ntcList;
} catch (error) {
// alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
alert(this.$getCmmnMessage('err005'));
} finally {
this.$setLoading(false);
}
},
// 파일사이즈
formatFileSize: function (size) {
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let i;
// 파일 크기를 적절한 단위로 변환
for (i = 0; size >= 1024 && i < units.length - 1; i++) {
size /= 1024;
}
// 파일 크기와 단위를 문자열로 반환
if (i === units.length - 1) {
return `${size.toFixed(2)} ${units[i]}`;
} else {
return `${size.toFixed(2)} ${units[i]}`;
}
},
},
watch: {
},
computed: {
},
components: {
'PageNavigationBar': PageNavigationBar,
},
created() {
this.findAll();
},
mounted() {
}
}
</script>