Initial commit: 교육 프로젝트 배포
This commit is contained in:
송대일
@@ -0,0 +1,271 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<?php
|
||||
$SET_PREFIX = 'I'; //L=리더십(기본값), I=인사이트
|
||||
require_once __DIR__ . '/../bbs/leadership_init_data.php';
|
||||
?>
|
||||
<body>
|
||||
<div class="wrap insight">
|
||||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||||
<!-- container -->
|
||||
<div class="container">
|
||||
<!-- editor's pick -->
|
||||
<section class="insight-hero">
|
||||
<div class="insight-inner hero-top hero-breadcrumb">
|
||||
<ul class="breadcrumb" aria-label="breadcrumb">
|
||||
<li><a href="./index.php">홈</a></li>
|
||||
<li><a href="./insight.php">인사이트</a></li>
|
||||
<li><span class="current">경제와 사회</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- editor's pick -->
|
||||
<div class="hero-banner">
|
||||
<div class="swiper hero-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<?php foreach ($array_banner_img as $i => $bn): ?>
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="<?= $bn['normal'] ?>">
|
||||
<source media="(max-width: 768px)" srcset="<?= $bn['mobile'] ?>">
|
||||
<img src="<?= $bn['normal'] ?>" alt="<?= $bn['title'] ?>">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="swiper-pagination hero-pagination" aria-hidden="true"></div>
|
||||
<button type="button" class="swiper-button-prev hero-prev btn-prev" aria-label="이전 슬라이드"></button>
|
||||
<button type="button" class="swiper-button-next hero-next btn-next" aria-label="다음 슬라이드"></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="leadership-tabs" aria-label="카테고리">
|
||||
<div class="leadership-inner">
|
||||
<div class="leadership-tabs-list" role="tablist" aria-label="카테고리 탭">
|
||||
<?php foreach ($array_tab_info as $i => $ti): ?>
|
||||
<button class="leadership-tab <?php if($i==0){?>is-active<?php }?>" type="button" role="tab" aria-selected="<?php if($i==0){?>true<?php }else{?>false<?php }?> " data-cate="<?= $ti['base_code'] ?>">
|
||||
<span class="tab-icon"><img src="<?= $ti['src'] ?>" alt="" /></span>
|
||||
<span class="tab-text"><?= $ti['code_name'] ?></span>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- video list -->
|
||||
|
||||
<section class="insight-video-list">
|
||||
<div class="insight-inner">
|
||||
<div class="list-head">
|
||||
<span class="total">TOTAL <em></em></span>
|
||||
<div class="list-options">
|
||||
<div class="select-wrap">
|
||||
<select class="select-sort" title="정렬">
|
||||
<option value="view" selected>조회수</option>
|
||||
<option value="latest" >업데이트</option>
|
||||
<option value="seen">내가본컨텐츠</option>
|
||||
<option value="unseen">안본컨텐츠</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 탭선택에 따른 동적 컨텐츠영역 -->
|
||||
<ul class="video-grid" id="video-list"></ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- // container -->
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Hero Swiper (리더십과 동일)
|
||||
new Swiper('.hero-swiper', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
speed: 600,
|
||||
pagination: {
|
||||
el: '.hero-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.hero-next',
|
||||
prevEl: '.hero-prev',
|
||||
},
|
||||
});
|
||||
|
||||
// Tabs (리더십과 동일)
|
||||
const tabs = Array.from(document.querySelectorAll('.leadership-tab'));
|
||||
if (tabs.length) {
|
||||
tabs.forEach(function (tab) {
|
||||
tab.addEventListener('click', function () {
|
||||
tabs.forEach(function (t) {
|
||||
t.classList.remove('is-active');
|
||||
t.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
|
||||
let currentText = $(this).find('.tab-text').text();
|
||||
console.log('tabs');
|
||||
console.log(currentText);
|
||||
$('.current').text(currentText);
|
||||
|
||||
tab.classList.add('is-active');
|
||||
tab.setAttribute('aria-selected', 'true');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$( document ).ready(function() {
|
||||
/*
|
||||
let currentText = $('.current').find('.tab-text').text();
|
||||
if(currentText==""){$('.current').text("리더십 입문");}
|
||||
*/
|
||||
let firstTabText = $('.leadership-tab.is-active').find('.tab-text').text();
|
||||
if($('.current').text() == "" && firstTabText != ""){
|
||||
$('.current').text(firstTabText);
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
|
||||
let page = 1;
|
||||
let loading = false;
|
||||
let lastPage = false;
|
||||
let requestSeq = 0;
|
||||
|
||||
//let category = $('.leadership-tab.is-active').data('cate') || 'CA200L01';
|
||||
let category = $('.leadership-tab.is-active').data('cate') || 'CA200<?= $SET_PREFIX ?>01';
|
||||
let sort = $('.select-sort').val() || 'latest';
|
||||
|
||||
loadVideos();
|
||||
|
||||
$('.leadership-tab').on('click', function () {
|
||||
if (loading) return;
|
||||
|
||||
$('.leadership-tab').removeClass('is-active').attr('aria-selected', 'false');
|
||||
$(this).addClass('is-active').attr('aria-selected', 'true');
|
||||
|
||||
category = $(this).data('cate');
|
||||
resetList(true);
|
||||
loadVideos();
|
||||
});
|
||||
|
||||
$('.select-sort').on('change', function () {
|
||||
if (loading) return;
|
||||
|
||||
sort = $(this).val();
|
||||
resetList(true);
|
||||
loadVideos();
|
||||
});
|
||||
|
||||
$('.container').on('scroll', function () {
|
||||
if (loading || lastPage) return;
|
||||
|
||||
const scrollTop = this.scrollTop;
|
||||
const windowHeight = this.clientHeight;
|
||||
const docHeight = this.scrollHeight;
|
||||
|
||||
if (scrollTop + windowHeight >= docHeight - 100) {
|
||||
page++;
|
||||
loadVideos();
|
||||
}
|
||||
});
|
||||
|
||||
function resetList(moveTop) {
|
||||
page = 1;
|
||||
lastPage = false;
|
||||
$('#video-list').empty();
|
||||
|
||||
if (moveTop) {
|
||||
$('.container').scrollTop(0);
|
||||
}
|
||||
}
|
||||
|
||||
function setLoading(isLoading) {
|
||||
loading = isLoading;
|
||||
}
|
||||
|
||||
function loadVideos() {
|
||||
requestSeq++;
|
||||
const currentRequestSeq = requestSeq;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
$.ajax({
|
||||
url: '/edu/ajax/get_video_list.php?SET_PREFIX=<?= $SET_PREFIX ?>',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
cache: false,
|
||||
data: {
|
||||
category: category,
|
||||
sort: sort,
|
||||
page: page
|
||||
},
|
||||
success: function (res) {
|
||||
if (currentRequestSeq !== requestSeq) return;
|
||||
|
||||
if (!res || res.success !== true) {
|
||||
if (page > 1) page--;
|
||||
return;
|
||||
}
|
||||
|
||||
const html = $.trim(res.html || '');
|
||||
const totalCount = parseInt(res.total_count, 10) || 0;
|
||||
|
||||
$('.total em').text(totalCount);
|
||||
|
||||
if (page === 1) {
|
||||
$('#video-list').html(html);
|
||||
|
||||
if (html === '') {
|
||||
lastPage = true;
|
||||
$('#video-list').html(
|
||||
'<li class="video-item video-empty">' +
|
||||
'<div class="item-info">' +
|
||||
'<strong class="item-title">등록된 콘텐츠가 없습니다.</strong>' +
|
||||
'</div>' +
|
||||
'</li>'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (html === '') {
|
||||
lastPage = true;
|
||||
page--;
|
||||
} else {
|
||||
$('#video-list').append(html);
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
if (page > 1) page--;
|
||||
},
|
||||
complete: function () {
|
||||
if (currentRequestSeq === requestSeq) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,388 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap leadership">
|
||||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||||
<!-- container -->
|
||||
<div class="container">
|
||||
<!-- editor's pick -->
|
||||
<section class="leadership-hero">
|
||||
<div class="leadership-inner hero-top hero-breadcrumb">
|
||||
<ul class="breadcrumb" aria-label="breadcrumb">
|
||||
<li><a href="./index.html">홈</a></li>
|
||||
<li><a href="./leadership.html">리더십</a></li>
|
||||
<li><span class="current">셀프 리더십</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- editor's pick -->
|
||||
|
||||
<!-- 리더십 고정 배너 3종: PC 1442×460 / 모바일 360×234 -->
|
||||
<div class="hero-banner">
|
||||
<div class="swiper hero-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_01.png">
|
||||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_01_m.png">
|
||||
<img src="/edu/img/leadership/img_banner_01.png" alt="실천으로 완성하는 리더십">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_02.png">
|
||||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_02_m.png">
|
||||
<img src="/edu/img/leadership/img_banner_02.png" alt="성장하는 리더십 여정">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_03.png">
|
||||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_03_m.png">
|
||||
<img src="/edu/img/leadership/img_banner_03.png" alt="리더로 성장하는 과정">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination hero-pagination" aria-hidden="true"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="leadership-tabs" aria-label="리더십 카테고리">
|
||||
<div class="leadership-inner">
|
||||
<div class="leadership-tabs-list" role="tablist" aria-label="리더십 카테고리 탭">
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_01.svg" alt="" /></span>
|
||||
<span class="tab-text">리더십 입문111</span>
|
||||
</button>
|
||||
<button class="leadership-tab is-active" type="button" role="tab" aria-selected="true">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_02.svg" alt="" /></span>
|
||||
<span class="tab-text">셀프리더십</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_03.svg" alt="" /></span>
|
||||
<span class="tab-text">팀리더십</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_04.svg" alt="" /></span>
|
||||
<span class="tab-text">실전 리더십</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_05.svg" alt="" /></span>
|
||||
<span class="tab-text">인물탐구</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- video list -->
|
||||
|
||||
<section class="leadership-video-list" aria-label="리더십 콘텐츠 목록">
|
||||
<div class="leadership-inner">
|
||||
<div class="list-head">
|
||||
<span class="total">TOTAL <em>8</em></span>
|
||||
<div class="list-options">
|
||||
<div class="select-wrap">
|
||||
<select class="select-sort" title="정렬">
|
||||
<option selected>조회수</option>
|
||||
<option>업데이트</option>
|
||||
<option>내가본컨텐츠</option>
|
||||
<option>안본컨텐츠</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="video-grid">
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l1" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l1" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_01.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">목표관리, 성과관리의 차이? 더 중요한 것은?</strong>
|
||||
<span class="item-desc">리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l2" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l2" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_02.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">[경영 추천도서] 팀장이 처음이신가요? | 팀장 리더십 수업</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l3" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l3" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_03.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">경제경영이론을 이용한 동기부여 이론들</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l4" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l4" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_04.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">DT시대의 애자일 경영, 비즈니스 어질리티</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l1" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l1" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_01.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">목표관리, 성과관리의 차이? 더 중요한 것은?</strong>
|
||||
<span class="item-desc">리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l2" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l2" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_02.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">[경영 추천도서] 팀장이 처음이신가요? | 팀장 리더십 수업</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l3" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l3" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_03.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">경제경영이론을 이용한 동기부여 이론들</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l4" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l4" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_04.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">DT시대의 애자일 경영, 비즈니스 어질리티</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l1" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l1" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_01.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">목표관리, 성과관리의 차이? 더 중요한 것은?</strong>
|
||||
<span class="item-desc">리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l2" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l2" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_02.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">[경영 추천도서] 팀장이 처음이신가요? | 팀장 리더십 수업</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l3" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l3" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_03.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">경제경영이론을 이용한 동기부여 이론들</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l4" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l4" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_04.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">DT시대의 애자일 경영, 비즈니스 어질리티</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l5" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l5" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_05.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">조직문화가 저희의 가장 강력한 무기입니다...</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l6" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l6" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_06.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">꼰대가 되지 않고 건설적인 피드백을 하는 법</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l7" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l7" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_07.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">제대로 된 평가 면담, 어떻게 할 수 있을까? (SAS, 듀폰)</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="video-item">
|
||||
<a href="#" class="card-link">
|
||||
<label class="bookmark" for="like_chk_l8" onclick="event.stopPropagation();">
|
||||
<input type="checkbox" id="like_chk_l8" title="좋아요" />
|
||||
</label>
|
||||
<div class="item-thumb">
|
||||
<img src="/edu/img/video/img_thumb_04.png" alt="" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<strong class="item-title">성장 마인드셋 실패에서 배우기</strong>
|
||||
<span class="item-desc">셀프리더십</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- // container -->
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Hero Swiper
|
||||
new Swiper('.hero-swiper', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
speed: 600,
|
||||
pagination: {
|
||||
el: '.hero-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Tabs
|
||||
const tabs = Array.from(document.querySelectorAll('.leadership-tab'));
|
||||
if (!tabs.length) return;
|
||||
|
||||
tabs.forEach(function (tab) {
|
||||
tab.addEventListener('click', function () {
|
||||
tabs.forEach(function (t) {
|
||||
t.classList.remove('is-active');
|
||||
t.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
tab.classList.add('is-active');
|
||||
tab.setAttribute('aria-selected', 'true');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,334 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap leadership">
|
||||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||||
<!-- container -->
|
||||
<div class="container">
|
||||
<!-- editor's pick -->
|
||||
<section class="leadership-hero">
|
||||
<div class="leadership-inner hero-top hero-breadcrumb">
|
||||
<ul class="breadcrumb" aria-label="breadcrumb">
|
||||
<li><a href="./index.html">홈</a></li>
|
||||
<li><a href="./leadership.html">리더십</a></li>
|
||||
<li><span class="current">셀프 리더십</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- editor's pick -->
|
||||
|
||||
<!-- 리더십 고정 배너 3종: PC 1442×460 / 모바일 360×234 -->
|
||||
<div class="hero-banner">
|
||||
<div class="swiper hero-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_01.png">
|
||||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_01_m.png">
|
||||
<img src="/edu/img/leadership/img_banner_01.png" alt="실천으로 완성하는 리더십">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_02.png">
|
||||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_02_m.png">
|
||||
<img src="/edu/img/leadership/img_banner_02.png" alt="성장하는 리더십 여정">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_03.png">
|
||||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_03_m.png">
|
||||
<img src="/edu/img/leadership/img_banner_03.png" alt="리더로 성장하는 과정">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination hero-pagination" aria-hidden="true"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="leadership-tabs" aria-label="리더십 카테고리">
|
||||
<div class="leadership-inner">
|
||||
<div class="leadership-tabs-list" role="tablist" aria-label="리더십 카테고리 탭">
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L01">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_01.svg" alt="" /></span>
|
||||
<span class="tab-text">리더십 입문</span>
|
||||
</button>
|
||||
<button class="leadership-tab is-active" type="button" role="tab" aria-selected="true" data-cate="CA200L02">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_02.svg" alt="" /></span>
|
||||
<span class="tab-text">셀프리더십</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L03">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_03.svg" alt="" /></span>
|
||||
<span class="tab-text">팀리더십</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L04">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_04.svg" alt="" /></span>
|
||||
<span class="tab-text">실전 리더십</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L05">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_05.svg" alt="" /></span>
|
||||
<span class="tab-text">인물탐구</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- video list -->
|
||||
|
||||
<section class="leadership-video-list" aria-label="리더십 콘텐츠 목록">
|
||||
<div class="leadership-inner">
|
||||
<div class="list-head">
|
||||
<span class="total">TOTAL <em></em></span>
|
||||
<div class="list-options">
|
||||
<div class="select-wrap">
|
||||
<select class="select-sort" title="정렬">
|
||||
<option value="view" selected>조회수</option>
|
||||
<option value="latest" >업데이트</option>
|
||||
<option value="seen">내가본컨텐츠</option>
|
||||
<option value="unseen">안본컨텐츠</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="video-grid" id="video-list">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- // container -->
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Hero Swiper
|
||||
new Swiper('.hero-swiper', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
speed: 600,
|
||||
pagination: {
|
||||
el: '.hero-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Tabs
|
||||
const tabs = Array.from(document.querySelectorAll('.leadership-tab'));
|
||||
if (!tabs.length) return;
|
||||
|
||||
tabs.forEach(function (tab) {
|
||||
tab.addEventListener('click', function () {
|
||||
tabs.forEach(function (t) {
|
||||
t.classList.remove('is-active');
|
||||
t.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
tab.classList.add('is-active');
|
||||
tab.setAttribute('aria-selected', 'true');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
let page = 1;
|
||||
let loading = false;
|
||||
let lastPage = false;
|
||||
let requestSeq = 0;
|
||||
|
||||
let category = $('.leadership-tab.is-active').data('cate') || 'CA200L02';
|
||||
let sort = $('.select-sort').val() || 'view';
|
||||
|
||||
loadVideos();
|
||||
|
||||
/* 탭 클릭 */
|
||||
$('.leadership-tab').on('click', function () {
|
||||
|
||||
if (loading) return;
|
||||
|
||||
$('.leadership-tab').removeClass('is-active').attr('aria-selected', 'false');
|
||||
$(this).addClass('is-active').attr('aria-selected', 'true');
|
||||
|
||||
category = $(this).data('cate');
|
||||
resetList(true);
|
||||
loadVideos();
|
||||
});
|
||||
|
||||
/* 정렬 변경 */
|
||||
$('.select-sort').on('change', function () {
|
||||
|
||||
if (loading) return;
|
||||
|
||||
sort = $(this).val();
|
||||
resetList(true);
|
||||
loadVideos();
|
||||
});
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
|
||||
console.log('scrollTop='+scrollTop);
|
||||
console.log('windowHeight='+windowHeight);
|
||||
console.log('docHeight='+docHeight);
|
||||
|
||||
console.log('scrollTop + windowHeight=');
|
||||
console.log(scrollTop + windowHeight);
|
||||
|
||||
console.log('docHeight - 400=');
|
||||
console.log(docHeight - 450);
|
||||
|
||||
|
||||
|
||||
$(window).on('scroll', function () {
|
||||
|
||||
if (loading || lastPage) return;
|
||||
|
||||
const scrollTop = $(window).scrollTop();
|
||||
const windowHeight = $(window).height();
|
||||
const docHeight = $(document).height();
|
||||
|
||||
|
||||
|
||||
.container
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* 무한스크롤 */
|
||||
$(window).on('scroll', function () {
|
||||
|
||||
if (loading || lastPage) return;
|
||||
|
||||
const scrollTop = $(window).scrollTop();
|
||||
const windowHeight = $(window).height();
|
||||
const docHeight = $(document).height();
|
||||
|
||||
if (scrollTop + windowHeight >= docHeight - 200) {
|
||||
page++;
|
||||
loadVideos();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
function resetList(moveTop) {
|
||||
page = 1;
|
||||
lastPage = false;
|
||||
$('#video-list').empty();
|
||||
|
||||
if (moveTop) {
|
||||
$('html, body').scrollTop(0);
|
||||
}
|
||||
}
|
||||
|
||||
function setLoading(isLoading) {
|
||||
loading = isLoading;
|
||||
|
||||
if (isLoading) {
|
||||
$('#video-loading').show();
|
||||
} else {
|
||||
$('#video-loading').hide();
|
||||
}
|
||||
}
|
||||
|
||||
function loadVideos() {
|
||||
|
||||
requestSeq++;
|
||||
const currentRequestSeq = requestSeq;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
$.ajax({
|
||||
url: '/edu/ajax/get_video_list.php',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
cache: false,
|
||||
data: {
|
||||
category: category,
|
||||
sort: sort,
|
||||
page: page
|
||||
},
|
||||
success: function (res) {
|
||||
|
||||
/* 이전 요청이 늦게 도착한 경우 무시 */
|
||||
if (currentRequestSeq !== requestSeq) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res || res.success !== true) {
|
||||
if (page > 1) {
|
||||
page--;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const html = $.trim(res.html || '');
|
||||
const totalCount = parseInt(res.total_count, 10) || 0;
|
||||
|
||||
$('.total em').text(totalCount);
|
||||
|
||||
if (page === 1) {
|
||||
$('#video-list').html(html);
|
||||
} else {
|
||||
if (html === '') {
|
||||
lastPage = true;
|
||||
page--;
|
||||
} else {
|
||||
$('#video-list').append(html);
|
||||
}
|
||||
}
|
||||
|
||||
if (page === 1 && html === '') {
|
||||
lastPage = true;
|
||||
$('#video-list').html(
|
||||
'<li class="video-item video-empty">' +
|
||||
'<div class="item-info">' +
|
||||
'<strong class="item-title">등록된 콘텐츠가 없습니다.</strong>' +
|
||||
'</div>' +
|
||||
'</li>'
|
||||
);
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
if (page > 1) {
|
||||
page--;
|
||||
}
|
||||
},
|
||||
complete: function () {
|
||||
if (currentRequestSeq === requestSeq) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,278 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap leadership">
|
||||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||||
<!-- container -->
|
||||
<div class="container">
|
||||
<!-- editor's pick -->
|
||||
<section class="leadership-hero">
|
||||
<div class="leadership-inner hero-top hero-breadcrumb">
|
||||
<ul class="breadcrumb" aria-label="breadcrumb">
|
||||
<li><a href="./index.html">홈</a></li>
|
||||
<li><a href="./leadership.html">리더십</a></li>
|
||||
<li><span class="current">셀프 리더십</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- editor's pick -->
|
||||
|
||||
<!-- 리더십 고정 배너 3종: PC 1442×460 / 모바일 360×234 -->
|
||||
<div class="hero-banner">
|
||||
<div class="swiper hero-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_01.png">
|
||||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_01_m.png">
|
||||
<img src="/edu/img/leadership/img_banner_01.png" alt="실천으로 완성하는 리더십">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_02.png">
|
||||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_02_m.png">
|
||||
<img src="/edu/img/leadership/img_banner_02.png" alt="성장하는 리더십 여정">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="banner-img">
|
||||
<picture>
|
||||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_03.png">
|
||||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_03_m.png">
|
||||
<img src="/edu/img/leadership/img_banner_03.png" alt="리더로 성장하는 과정">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination hero-pagination" aria-hidden="true"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="leadership-tabs" aria-label="리더십 카테고리">
|
||||
<div class="leadership-inner">
|
||||
<div class="leadership-tabs-list" role="tablist" aria-label="리더십 카테고리 탭">
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L01">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_01.svg" alt="" /></span>
|
||||
<span class="tab-text">리더십 입문</span>
|
||||
</button>
|
||||
<button class="leadership-tab is-active" type="button" role="tab" aria-selected="true" data-cate="CA200L02">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_02.svg" alt="" /></span>
|
||||
<span class="tab-text">셀프리더십</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L03">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_03.svg" alt="" /></span>
|
||||
<span class="tab-text">팀리더십</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L04">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_04.svg" alt="" /></span>
|
||||
<span class="tab-text">실전 리더십</span>
|
||||
</button>
|
||||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L05">
|
||||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_05.svg" alt="" /></span>
|
||||
<span class="tab-text">인물탐구</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- video list -->
|
||||
|
||||
<section class="leadership-video-list" aria-label="리더십 콘텐츠 목록">
|
||||
<div class="leadership-inner">
|
||||
<div class="list-head">
|
||||
<span class="total">TOTAL <em></em></span>
|
||||
<div class="list-options">
|
||||
<div class="select-wrap">
|
||||
<select class="select-sort" title="정렬">
|
||||
<option value="view" selected>조회수</option>
|
||||
<option value="latest" >업데이트</option>
|
||||
<option value="seen">내가본컨텐츠</option>
|
||||
<option value="unseen">안본컨텐츠</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="video-grid" id="video-list">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- // container -->
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Hero Swiper
|
||||
new Swiper('.hero-swiper', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
speed: 600,
|
||||
pagination: {
|
||||
el: '.hero-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Tabs
|
||||
const tabs = Array.from(document.querySelectorAll('.leadership-tab'));
|
||||
if (!tabs.length) return;
|
||||
|
||||
tabs.forEach(function (tab) {
|
||||
tab.addEventListener('click', function () {
|
||||
tabs.forEach(function (t) {
|
||||
t.classList.remove('is-active');
|
||||
t.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
tab.classList.add('is-active');
|
||||
tab.setAttribute('aria-selected', 'true');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
let page = 1;
|
||||
let loading = false;
|
||||
let lastPage = false;
|
||||
let requestSeq = 0;
|
||||
|
||||
let category = $('.leadership-tab.is-active').data('cate') || 'CA200L02';
|
||||
let sort = $('.select-sort').val() || 'latest';
|
||||
|
||||
loadVideos();
|
||||
|
||||
$('.leadership-tab').on('click', function () {
|
||||
if (loading) return;
|
||||
|
||||
$('.leadership-tab').removeClass('is-active').attr('aria-selected', 'false');
|
||||
$(this).addClass('is-active').attr('aria-selected', 'true');
|
||||
|
||||
category = $(this).data('cate');
|
||||
resetList(true);
|
||||
loadVideos();
|
||||
});
|
||||
|
||||
$('.select-sort').on('change', function () {
|
||||
if (loading) return;
|
||||
|
||||
sort = $(this).val();
|
||||
resetList(true);
|
||||
loadVideos();
|
||||
});
|
||||
|
||||
$('.container').on('scroll', function () {
|
||||
if (loading || lastPage) return;
|
||||
|
||||
const scrollTop = this.scrollTop;
|
||||
const windowHeight = this.clientHeight;
|
||||
const docHeight = this.scrollHeight;
|
||||
|
||||
if (scrollTop + windowHeight >= docHeight - 100) {
|
||||
page++;
|
||||
loadVideos();
|
||||
}
|
||||
});
|
||||
|
||||
function resetList(moveTop) {
|
||||
page = 1;
|
||||
lastPage = false;
|
||||
$('#video-list').empty();
|
||||
|
||||
if (moveTop) {
|
||||
$('.container').scrollTop(0);
|
||||
}
|
||||
}
|
||||
|
||||
function setLoading(isLoading) {
|
||||
loading = isLoading;
|
||||
}
|
||||
|
||||
function loadVideos() {
|
||||
requestSeq++;
|
||||
const currentRequestSeq = requestSeq;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
$.ajax({
|
||||
url: '/edu/ajax/get_video_list.php',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
cache: false,
|
||||
data: {
|
||||
category: category,
|
||||
sort: sort,
|
||||
page: page
|
||||
},
|
||||
success: function (res) {
|
||||
if (currentRequestSeq !== requestSeq) return;
|
||||
|
||||
if (!res || res.success !== true) {
|
||||
if (page > 1) page--;
|
||||
return;
|
||||
}
|
||||
|
||||
const html = $.trim(res.html || '');
|
||||
const totalCount = parseInt(res.total_count, 10) || 0;
|
||||
|
||||
$('.total em').text(totalCount);
|
||||
|
||||
if (page === 1) {
|
||||
$('#video-list').html(html);
|
||||
|
||||
if (html === '') {
|
||||
lastPage = true;
|
||||
$('#video-list').html(
|
||||
'<li class="video-item video-empty">' +
|
||||
'<div class="item-info">' +
|
||||
'<strong class="item-title">등록된 콘텐츠가 없습니다.</strong>' +
|
||||
'</div>' +
|
||||
'</li>'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (html === '') {
|
||||
lastPage = true;
|
||||
page--;
|
||||
} else {
|
||||
$('#video-list').append(html);
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
if (page > 1) page--;
|
||||
},
|
||||
complete: function () {
|
||||
if (currentRequestSeq === requestSeq) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,571 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<link rel="stylesheet" type="text/css" href="/edu/css/main.css" />
|
||||
|
||||
<style>
|
||||
/* 마이페이지 콘텐츠 카드 삭제 버튼 숨김
|
||||
- 정책상 기능은 유지하되, 화면에는 노출하지 않는다. */
|
||||
.mypage .btn-remove-card {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 마이페이지 콘텐츠 빈 상태 문구 */
|
||||
.mypage .content-empty {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 마이페이지 한줄소감
|
||||
- 사용자명/프로필 이미지 영역 제거 후 레이아웃 최소 보정 */
|
||||
.mypage .review-comment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mypage .review-comment-text {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mypage .review-comment-text strong {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 한줄소감 빈 상태 문구 */
|
||||
.mypage .review-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<?php
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_01.php';
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_02.php';
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_05.php';
|
||||
?>
|
||||
<?php
|
||||
$profileData = $profileData ?? [];
|
||||
$profileBadges = $profileBadges ?? [];
|
||||
|
||||
$profileName = $profileData['name'] ?? '사용자';
|
||||
$profileRankName = $profileData['rank_name'] ?? '';
|
||||
$profileWorkingComp = $profileData['working_comp'] ?? '';
|
||||
$profileLevelLabel = $profileData['learning_level'] ?? 'Rookie';
|
||||
$profileLevelClass = $profileData['level_class'] ?? 'rookie';
|
||||
$profileLevelIcon = $profileData['level_icon'] ?? '/edu/img/ico/ico_level_rookie.svg';
|
||||
$profileTotalMinutes = (int)($profileData['total_minutes'] ?? 0);
|
||||
$profileImage = $profileData['profile_image'] ?? '/edu/img/insight/profile.png';
|
||||
|
||||
$badgeHat = $profileBadges['hat'] ?? null;
|
||||
$badgePencil = $profileBadges['pencil'] ?? null;
|
||||
$badgePick = $profileBadges['pick'] ?? null;
|
||||
?>
|
||||
<?php
|
||||
/* 제안하기 */
|
||||
$offerHistory = $offerHistory ?? [];
|
||||
$offerDefaultTypeCode = $offerDefaultTypeCode ?? 'OF10001';
|
||||
$offerDefaultStatusCode = $offerDefaultStatusCode ?? 'OF10002';
|
||||
?>
|
||||
<body>
|
||||
<!--
|
||||
========================================
|
||||
마이페이지 레이아웃 구조
|
||||
========================================
|
||||
[좌측] aside.mypage-sidebar : 프로필 + 컨텐츠 제안
|
||||
[우측] main.mypage-main : 학습 활동 + 시청/저장/소감 목록
|
||||
-->
|
||||
<div class="wrap mypage">
|
||||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||||
<div class="container">
|
||||
<div class="mypage-inner">
|
||||
<!--
|
||||
좌측 사이드바: 프로필 카드 + 컨텐츠 제안 폼
|
||||
수정 시: profile-card 내 이름, 직급, 학습레벨 등 변경
|
||||
-->
|
||||
<aside class="mypage-sidebar">
|
||||
<h2 class="mypage-title">마이페이지</h2>
|
||||
<div class="profile-area">
|
||||
<div class="profile-card">
|
||||
<div class="profile-photo-wrap">
|
||||
<div class="profile-photo">
|
||||
<!--
|
||||
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필" />
|
||||
-->
|
||||
<img src="<?= htmlspecialchars($profileImage, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($profileName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?> 프로필" />
|
||||
|
||||
</div>
|
||||
<!-- PC 전용 프로필 배지 아이콘 -->
|
||||
<!--
|
||||
<div class="profile-photo-badges" aria-hidden="true">
|
||||
<span class="badge-item badge-item-hat">
|
||||
<img src="/edu/img/mypage/ico_school.png" alt="" />
|
||||
</span>
|
||||
<span class="badge-item badge-item-pencil">
|
||||
<img src="/edu/img/mypage/ico_pencil.png" alt="" />
|
||||
</span>
|
||||
<span class="badge-item badge-item-pick">
|
||||
<img src="/edu/img/mypage/ico_pick_2.png" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
-->
|
||||
<div class="profile-photo-badges" aria-hidden="true">
|
||||
<?php if (!empty($badgeHat)): ?>
|
||||
<span class="badge-item badge-item-hat">
|
||||
<img src="<?= htmlspecialchars($badgeHat['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgeHat['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($badgePencil)): ?>
|
||||
<span class="badge-item badge-item-pencil">
|
||||
<img src="<?= htmlspecialchars($badgePencil['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgePencil['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($badgePick)): ?>
|
||||
<span class="badge-item badge-item-pick">
|
||||
<img src="<?= htmlspecialchars($badgePick['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgePick['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!--
|
||||
<p class="profile-name">
|
||||
<em>
|
||||
<span class="ico-level">
|
||||
<img src="/edu/img/ico/ico_level_master.svg" alt="학습레벨" />
|
||||
</span>
|
||||
홍길동
|
||||
</em>
|
||||
<span>선임연구원</span>
|
||||
</p>
|
||||
<p class="profile-role">바론컨설턴트</p>
|
||||
-->
|
||||
<p class="profile-name">
|
||||
<em>
|
||||
<span class="ico-level">
|
||||
<img src="<?= htmlspecialchars($profileLevelIcon, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" alt="학습레벨" />
|
||||
</span>
|
||||
<?= htmlspecialchars($profileName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</em>
|
||||
<span><?= htmlspecialchars($profileRankName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></span>
|
||||
</p>
|
||||
<p class="profile-role"><?= htmlspecialchars($profileWorkingComp, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></p>
|
||||
|
||||
<!-- badge-level master일때만 클래스명 추가 -->
|
||||
<!-- <div class="badge-level master"> -->
|
||||
<div
|
||||
class="badge-level <?= htmlspecialchars($profileLevelClass, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
id="mypage-level-box"
|
||||
>
|
||||
|
||||
<span class="badge-level-title">학습레벨</span>
|
||||
<!--
|
||||
<span class="badge-level-value">
|
||||
<i class="ico-level">
|
||||
<img src="/edu/img/ico/ico_level_master.svg" alt="학습레벨" />
|
||||
</i>
|
||||
Master
|
||||
</span>
|
||||
-->
|
||||
<span class="badge-level-value">
|
||||
<i class="ico-level">
|
||||
<img
|
||||
id="mypage-level-icon"
|
||||
src="<?= htmlspecialchars($profileLevelIcon, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="학습레벨"
|
||||
/>
|
||||
</i>
|
||||
<span id="mypage-level-label">
|
||||
<?= htmlspecialchars($profileLevelLabel, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="ico-info-wrap">
|
||||
<i class="ico-info" aria-describedby="level-tooltip"></i>
|
||||
<span class="ico-info-tooltip" role="tooltip" id="level-tooltip">
|
||||
<span class="ico-info-tooltip-desc">누적된 학습 시간에 따라<br>4단계의 레벨이<br>자동 설정됩니다.</span>
|
||||
<ul class="ico-info-tooltip-list">
|
||||
<li><em>Master</em><span>40시간 이상</span></li>
|
||||
<li><em>Elite</em><span>20 ~ 40시간</span></li>
|
||||
<li><em>Learner</em><span>8 ~ 20시간</span></li>
|
||||
<li><em>Rookie</em><span>0 ~ 8시간</span></li>
|
||||
</ul>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MOBILE: 총 학습시간 버튼 (모바일에서만 표시, 클릭 시 활동 모달 오픈) -->
|
||||
<!--
|
||||
<button class="mobile-total-time-btn" type="button" id="mobileActivityBtn" aria-label="총 학습시간 상세보기">
|
||||
<span>총 학습시간 <strong>340</strong>분</span> <span class="mobile-total-time-chevron" aria-hidden="true"></span>
|
||||
</button>
|
||||
-->
|
||||
<button class="mobile-total-time-btn" type="button" id="mobileActivityBtn" aria-label="총 학습시간 상세보기">
|
||||
<span>총 학습시간 <strong id="mobile-mypage-total-minutes"><?= number_format($profileTotalMinutes) ?></strong>분</span>
|
||||
<span class="mobile-total-time-chevron" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 컨텐츠 제안하기 Start -->
|
||||
<section class="suggest-section">
|
||||
<h3 class="suggest-title">컨텐츠 제안하기</h3>
|
||||
|
||||
<form id="offerForm" method="post" action="/edu/ajax/insert_offer.php">
|
||||
<input type="hidden" name="type_code" value="<?= htmlspecialchars($offerDefaultTypeCode, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">
|
||||
<input type="hidden" name="status_code" value="<?= htmlspecialchars($offerDefaultStatusCode, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">
|
||||
|
||||
<div class="suggest-fields">
|
||||
<input
|
||||
type="url"
|
||||
class="suggest-input suggest-url"
|
||||
placeholder="URL"
|
||||
id="suggest-url"
|
||||
name="reference_url"
|
||||
/>
|
||||
<textarea
|
||||
class="suggest-input suggest-reason"
|
||||
placeholder="추천이유"
|
||||
rows="4"
|
||||
id="suggest-reason"
|
||||
name="reason"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary btn-full" disabled>
|
||||
제안 보내기
|
||||
<i class="ico-arrow"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="suggest-status accordion">
|
||||
<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="suggest-status-content">
|
||||
<span class="accordion-title">제안현황</span>
|
||||
<i class="ico-chevron" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<div id="suggest-status-content" class="accordion-content" hidden>
|
||||
<ul class="suggest-status-list">
|
||||
<?php if (!empty($offerHistory)): ?>
|
||||
<?php foreach ($offerHistory as $row): ?>
|
||||
<li
|
||||
class="<?= !empty($row['is_consider']) ? 'consider' : '' ?>"
|
||||
data-offer-id="<?= htmlspecialchars($row['offer_id'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
>
|
||||
<span class="suggest-date">
|
||||
<?= htmlspecialchars($row['created_at_dot'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
|
||||
<?php if (!empty($row['is_consider'])): ?>
|
||||
<span class="suggest-dots"></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<span class="suggest-state">
|
||||
<?= htmlspecialchars($row['status_name'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<?php else: ?>
|
||||
<li>
|
||||
<span class="suggest-date">-</span>
|
||||
<span class="suggest-state">등록된 제안이 없습니다.</span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 컨텐츠 제안하기 End -->
|
||||
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!--
|
||||
우측 메인: 학습 활동 통계 + 시청/저장/소감 목록
|
||||
학습 시간 수정: total-time-text의 strong, gauge-fill의 width 값
|
||||
-->
|
||||
<main class="mypage-main">
|
||||
<section class="activity-section">
|
||||
<h3 class="section-title">
|
||||
<i class="ico-pin"></i>
|
||||
나의 학습 활동
|
||||
<div class="select-box">
|
||||
<label class="year-badge" style="display: none;">(2026년 기준)</label>
|
||||
<select id="mypage-year-select">
|
||||
<option>년</option>
|
||||
</select>
|
||||
</div>
|
||||
</h3>
|
||||
<div class="total-time-area">
|
||||
<div class="total-time-inner">
|
||||
<div class="total-time">
|
||||
<p class="total-time-text">
|
||||
총 학습시간 <strong id="mypage-total-minutes"></strong>분
|
||||
</p>
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" id="mypage-total-gauge" style="width:50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="total-average">전체평균 <em id="mypage-avg-minutes">0</em>분</span>
|
||||
</div>
|
||||
|
||||
<ul class="activity-list">
|
||||
<li class="activity-item gauge" data-category="CA10001">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">마이클래스</span>
|
||||
<span class="activity-value"><em></em>분 (0%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 33%"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">6개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item gauge" data-category="CA10002">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">온보딩</span>
|
||||
<span class="activity-value"><em>110</em>분 (80%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 80%"></div>
|
||||
<p class="activity-note" style="display:none;">
|
||||
<span class="activity-note-num">①</span> 필수 시청: <span class="onboarding-due-date">26.01.14</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">10개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item gauge" data-category="CA10003">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">법정교육</span>
|
||||
<span class="activity-value"><em>30</em>분 (20%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">6개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10004">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">리더십</span>
|
||||
<span class="activity-value"><em>60</em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 40%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">240분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10005">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">인사이트</span>
|
||||
<span class="activity-value"><em>43</em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 60%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">90분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10006">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">비즈트렌드</span>
|
||||
<span class="activity-value"><em>23</em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 20%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">80분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="mylist-area">
|
||||
<!-- MOBILE: 2탭 네비게이션 (시청완료 <> 슬라이더 + 한줄소감) -->
|
||||
<div class="mobile-list-tab-header">
|
||||
<button class="mobile-list-tab active" type="button" id="mobileTabContent" data-mobile-tab="content" aria-selected="true">
|
||||
<span class="mobile-tab-arrow mobile-tab-prev" aria-label="이전" aria-hidden="true">‹</span>
|
||||
<span class="mobile-tab-label">시청완료</span>
|
||||
<span class="mobile-tab-arrow mobile-tab-next" aria-label="다음" aria-hidden="true">›</span>
|
||||
</button>
|
||||
<button class="mobile-list-tab" type="button" id="mobileTabReview" data-mobile-tab="review" aria-selected="false">
|
||||
<span class="ico-mobile-pencil" aria-hidden="true"></span>
|
||||
한줄 소감
|
||||
</button>
|
||||
</div>
|
||||
<!-- 콘텐츠 탭 영역 -->
|
||||
<div class="content-tab-wrap">
|
||||
<div class="content-tabs" role="tablist">
|
||||
<button type="button" class="content-tab active" role="tab" aria-selected="true" aria-controls="panel-watching" id="tab-watching" data-tab="watching">
|
||||
시청중인 콘텐츠 <span class="count">15</span>
|
||||
</button>
|
||||
<button type="button" class="content-tab" role="tab" aria-selected="false" aria-controls="panel-completed" id="tab-completed" data-tab="completed">
|
||||
시청완료 콘텐츠 <span class="count">15</span>
|
||||
</button>
|
||||
<button type="button" class="content-tab" role="tab" aria-selected="false" aria-controls="panel-saved" id="tab-saved" data-tab="saved">
|
||||
저장한 콘텐츠 <span class="count">3</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="content-panels">
|
||||
<!-- 시청중인 콘텐츠 -->
|
||||
<section class="content-section content-panel active" id="panel-watching" role="tabpanel" aria-labelledby="tab-watching" data-panel="watching">
|
||||
<ul class="content-grid" id="mypage-watching-list"></ul>
|
||||
</section>
|
||||
|
||||
<!-- 시청완료 콘텐츠 -->
|
||||
<section class="content-section content-panel" id="panel-completed" role="tabpanel" aria-labelledby="tab-completed" data-panel="completed">
|
||||
<ul class="content-grid"></ul>
|
||||
</section>
|
||||
|
||||
<!-- 저장한 콘텐츠 -->
|
||||
<section class="content-section content-panel" id="panel-saved" role="tabpanel" aria-labelledby="tab-saved" data-panel="saved">
|
||||
<ul class="content-grid"></ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 한줄 소감 -->
|
||||
<section class="review-section">
|
||||
<h3 class="section-title">
|
||||
<i class="ico-pin-list" aria-hidden="true"></i>
|
||||
한줄 소감 <span class="count" id="mypage-review-count">0</span>
|
||||
</h3>
|
||||
|
||||
<ul class="review-list" id="mypage-review-list"></ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- MOBILE: 하단 목록 카운트 + 컨텐츠 제안 바 (모바일에서만 표시) -->
|
||||
<nav class="mobile-bottom-nav" aria-label="모바일 콘텐츠 탐색">
|
||||
<button class="mobile-nav-item mobile-nav-item--suggest" type="button" id="mobileSuggestBtn">
|
||||
<span class="mobile-nav-ico mobile-nav-ico--send" aria-hidden="true"></span>
|
||||
<span class="mobile-nav-label">컨텐츠 제안하기</span>
|
||||
<span class="mobile-nav-chevron mobile-nav-chevron--right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // container -->
|
||||
|
||||
<!-- MOBILE: 학습 활동 팝업 모달 -->
|
||||
<div class="mobile-activity-modal" id="mobileActivityModal" role="dialog" aria-modal="true" aria-labelledby="mobileModalTitle" hidden>
|
||||
<div class="modal-backdrop" id="mobileActivityBackdrop"></div>
|
||||
<div class="modal-panel">
|
||||
<div class="modal-header">
|
||||
<p class="modal-title" id="mobileModalTitle">
|
||||
<span class="titile-label">총 학습시간</span> <strong>340</strong><span>분</span></p>
|
||||
<div class="modal-gauge-wrap">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 63%"></div>
|
||||
</div>
|
||||
<span class="modal-average-badge">전체 평균</span>
|
||||
</div>
|
||||
<button class="modal-close-btn" type="button" id="mobileActivityClose" aria-label="닫기">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul class="modal-activity-list">
|
||||
<li>
|
||||
<span class="modal-label">마이클래스</span>
|
||||
<span class="modal-value modal-value--green"><em>74</em>분(33%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">온보딩 <span class="modal-required"><i class="ico-info-xs" aria-hidden="true"></i> 필수 시청 <em>26.01.14</em></span></span>
|
||||
<span class="modal-value modal-value--green"><em>110</em>분(80%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">법정교육 <span class="modal-required"><i class="ico-info-xs" aria-hidden="true"></i> 필수 시청 <em>26.01.14</em></span></span>
|
||||
<span class="modal-value modal-value--green"><em>30</em>분(20%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">리더십</span>
|
||||
<span class="modal-value modal-value--brown"><em>60</em>분</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">인사이트</span>
|
||||
<span class="modal-value modal-value--brown"><em>43</em>분</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">비즈트렌드</span>
|
||||
<span class="modal-value modal-value--brown"><em>23</em>분</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE: 컨텐츠 제안 바텀시트 -->
|
||||
<div class="mobile-suggest-sheet" id="mobileSuggestSheet" role="dialog" aria-modal="true" hidden>
|
||||
<div class="sheet-backdrop" id="mobileSuggestBackdrop"></div>
|
||||
<div class="sheet-panel">
|
||||
<div class="sheet-header">
|
||||
<span class="sheet-header-ico" aria-hidden="true"></span>
|
||||
<p class="sheet-title">컨텐츠 제안하기</p>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div class="suggest-fields">
|
||||
<input type="url" class="suggest-input sheet-url" placeholder="URL" id="sheet-url" />
|
||||
<textarea class="suggest-input sheet-reason" placeholder="추천이유" rows="5" id="sheet-reason"></textarea>
|
||||
</div>
|
||||
<button type="button" class="btn-sheet-confirm" id="btnSheetConfirm" disabled>확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 마이페이지 전용 스크립트: 제안 폼 버튼 활성화, 제안현황 아코디언 -->
|
||||
<script src="/edu/js/mypage.js" defer></script>
|
||||
<!-- ERP기획 : 26.03.20 moon -->
|
||||
<script src="/edu/js/apply_page/add_mypage.js" defer></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,542 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<link rel="stylesheet" type="text/css" href="/edu/css/main.css" />
|
||||
|
||||
<style>
|
||||
/* 마이페이지 콘텐츠 카드 삭제 버튼 숨김
|
||||
- 정책상 기능은 유지하되, 화면에는 노출하지 않는다. */
|
||||
.mypage .btn-remove-card {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 마이페이지 콘텐츠 빈 상태 문구 */
|
||||
.mypage .content-empty {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 마이페이지 한줄소감
|
||||
- 사용자명/프로필 이미지 영역 제거 후 레이아웃 최소 보정 */
|
||||
.mypage .review-comment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mypage .review-comment-text {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mypage .review-comment-text strong {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 한줄소감 빈 상태 문구 */
|
||||
.mypage .review-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<?php
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_01.php';//개인정보
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_02.php';//제안하기 초기정보
|
||||
?>
|
||||
<?php
|
||||
$profileData = $profileData ?? [];
|
||||
$profileBadges = $profileBadges ?? [];
|
||||
|
||||
$profileName = $profileData['name'] ?? '사용자';
|
||||
$profileRankName = $profileData['rank_name'] ?? '';
|
||||
$profileWorkingComp = $profileData['working_comp'] ?? '';
|
||||
$profileBelongCompCd = $profileData['belong_comp_code'] ?? '';//소속회사 코드
|
||||
$profileBelongComp = $profileData['belong_comp_name'] ?? '';//소속회사 명
|
||||
$profileLevelLabel = $profileData['learning_level'] ?? 'Rookie';
|
||||
$profileLevelClass = $profileData['level_class'] ?? 'rookie';
|
||||
$profileLevelIcon = $profileData['level_icon'] ?? '/edu/img/ico/ico_level_rookie.svg';
|
||||
$profileTotalMinutes = (int)($profileData['total_minutes'] ?? 0);
|
||||
$profileImage = $profileData['profile_image'] ?? '/edu/img/ico/ico_user.svg';
|
||||
|
||||
$badgeHat = $profileBadges['hat'] ?? null;
|
||||
$badgePencil = $profileBadges['pencil'] ?? null;
|
||||
$badgePick = $profileBadges['pick'] ?? null;
|
||||
?>
|
||||
<?php
|
||||
/* 제안하기 */
|
||||
$offerHistory = $offerHistory ?? [];
|
||||
$offerDefaultTypeCode = $offerDefaultTypeCode ?? 'OF10001';
|
||||
$offerDefaultStatusCode = $offerDefaultStatusCode ?? 'OF10002';
|
||||
?>
|
||||
<body>
|
||||
<!--
|
||||
========================================
|
||||
마이페이지 레이아웃 구조
|
||||
========================================
|
||||
[좌측] aside.mypage-sidebar : 프로필 + 컨텐츠 제안
|
||||
[우측] main.mypage-main : 학습 활동 + 시청/저장/소감 목록
|
||||
-->
|
||||
<div class="wrap mypage">
|
||||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||||
<div class="container">
|
||||
<div class="mypage-inner">
|
||||
<!--
|
||||
좌측 사이드바: 프로필 카드 + 컨텐츠 제안 폼
|
||||
수정 시: profile-card 내 이름, 직급, 학습레벨 등 변경
|
||||
-->
|
||||
<aside class="mypage-sidebar">
|
||||
<h2 class="mypage-title">마이페이지</h2>
|
||||
<div class="profile-area">
|
||||
<div class="profile-card">
|
||||
<div class="profile-photo-wrap">
|
||||
<!--
|
||||
<div class="profile-photo">
|
||||
<img src="<?= htmlspecialchars($profileImage, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($profileName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?> 프로필" referrerpolicy="no-referrer"/>
|
||||
</div>
|
||||
-->
|
||||
<!--
|
||||
<div class="profile-photo" id="profile-upload-trigger" style="cursor:pointer;">
|
||||
-->
|
||||
<div class="profile-photo" id="" style="cursor:pointer;">
|
||||
<img id="profile-image" src="<?= $profileImage ?>">
|
||||
</div>
|
||||
<input type="file" id="profile-file-input" accept="image/png, image/jpeg" style="display:none;">
|
||||
|
||||
<!-- PC 전용 프로필 배지 아이콘 -->
|
||||
<div class="profile-photo-badges" aria-hidden="true">
|
||||
<?php if (!empty($badgeHat)): ?>
|
||||
<span class="badge-item badge-item-hat">
|
||||
<img src="<?= htmlspecialchars($badgeHat['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgeHat['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($badgePencil)): ?>
|
||||
<span class="badge-item badge-item-pencil">
|
||||
<img src="<?= htmlspecialchars($badgePencil['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgePencil['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($badgePick)): ?>
|
||||
<span class="badge-item badge-item-pick">
|
||||
<img src="<?= htmlspecialchars($badgePick['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgePick['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="profile-name">
|
||||
<em>
|
||||
<span class="ico-level">
|
||||
<img src="<?= htmlspecialchars($profileLevelIcon, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" alt="학습레벨" />
|
||||
</span>
|
||||
<?= htmlspecialchars($profileName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</em>
|
||||
<span><?= htmlspecialchars($profileRankName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></span>
|
||||
</p>
|
||||
<p class="profile-role"><?= htmlspecialchars($profileBelongComp, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></p>
|
||||
|
||||
<!-- badge-level master일때만 클래스명 추가 -->
|
||||
<!-- <div class="badge-level master"> -->
|
||||
<div
|
||||
class="badge-level <?= htmlspecialchars($profileLevelClass, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
id="mypage-level-box"
|
||||
>
|
||||
|
||||
<span class="badge-level-title">학습레벨</span>
|
||||
|
||||
<span class="badge-level-value">
|
||||
<i class="ico-level">
|
||||
<img
|
||||
id="mypage-level-icon"
|
||||
src="<?= htmlspecialchars($profileLevelIcon, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="학습레벨"
|
||||
/>
|
||||
</i>
|
||||
<span id="mypage-level-label">
|
||||
<?= htmlspecialchars($profileLevelLabel, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="ico-info-wrap">
|
||||
<i class="ico-info" aria-describedby="level-tooltip"></i>
|
||||
<span class="ico-info-tooltip" role="tooltip" id="level-tooltip">
|
||||
<span class="ico-info-tooltip-desc">누적된 학습 시간에 따라<br>4단계의 레벨이<br>자동 설정됩니다.</span>
|
||||
<ul class="ico-info-tooltip-list">
|
||||
<li><em>Master</em><span>40시간 이상</span></li>
|
||||
<li><em>Elite</em><span>20 ~ 40시간</span></li>
|
||||
<li><em>Learner</em><span>8 ~ 20시간</span></li>
|
||||
<li><em>Rookie</em><span>0 ~ 8시간</span></li>
|
||||
</ul>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MOBILE: 총 학습시간 버튼 (모바일에서만 표시, 클릭 시 활동 모달 오픈) -->
|
||||
<button class="mobile-total-time-btn" type="button" id="mobileActivityBtn" aria-label="총 학습시간 상세보기">
|
||||
<span>총 학습시간 <strong id="mobile-mypage-total-minutes"><?= number_format($profileTotalMinutes) ?></strong>분</span>
|
||||
<span class="mobile-total-time-chevron" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 컨텐츠 제안하기 Start -->
|
||||
<section class="suggest-section">
|
||||
<h3 class="suggest-title">컨텐츠 제안하기</h3>
|
||||
|
||||
<form id="offerForm" method="post" action="/edu/ajax/insert_offer.php">
|
||||
<input type="hidden" name="type_code" value="<?= htmlspecialchars($offerDefaultTypeCode, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">
|
||||
<input type="hidden" name="status_code" value="<?= htmlspecialchars($offerDefaultStatusCode, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">
|
||||
|
||||
<div class="suggest-fields">
|
||||
<input
|
||||
type="url"
|
||||
class="suggest-input suggest-url"
|
||||
placeholder="URL"
|
||||
id="suggest-url"
|
||||
name="reference_url"
|
||||
/>
|
||||
<textarea
|
||||
class="suggest-input suggest-reason"
|
||||
placeholder="추천이유"
|
||||
rows="4"
|
||||
id="suggest-reason"
|
||||
name="reason"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary btn-full" disabled>
|
||||
제안 보내기
|
||||
<i class="ico-arrow"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="suggest-status accordion">
|
||||
<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="suggest-status-content">
|
||||
<span class="accordion-title">제안현황</span>
|
||||
<i class="ico-chevron" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<div id="suggest-status-content" class="accordion-content" hidden>
|
||||
<ul class="suggest-status-list">
|
||||
<?php if (!empty($offerHistory)): ?>
|
||||
<?php foreach ($offerHistory as $row): ?>
|
||||
<li
|
||||
class="<?= !empty($row['is_consider']) ? 'consider' : '' ?>"
|
||||
data-offer-id="<?= htmlspecialchars($row['offer_id'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
>
|
||||
<span class="suggest-date">
|
||||
<?= htmlspecialchars($row['created_at_dot'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
|
||||
<?php if (!empty($row['is_consider'])): ?>
|
||||
<span class="suggest-dots"></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<span class="suggest-state">
|
||||
<?= htmlspecialchars($row['status_name'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<?php else: ?>
|
||||
<li>
|
||||
<span class="suggest-date">-</span>
|
||||
<span class="suggest-state">등록된 제안이 없습니다.</span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 컨텐츠 제안하기 End -->
|
||||
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!--
|
||||
우측 메인: 학습 활동 통계 + 시청/저장/소감 목록
|
||||
학습 시간 수정: total-time-text의 strong, gauge-fill의 width 값
|
||||
-->
|
||||
<main class="mypage-main">
|
||||
<section class="activity-section">
|
||||
<h3 class="section-title">
|
||||
<i class="ico-pin"></i>
|
||||
나의 학습 활동
|
||||
<div class="select-box">
|
||||
<label class="year-badge" style="display: none;"></label>
|
||||
<select id="mypage-year-select">
|
||||
<option>년</option>
|
||||
</select>
|
||||
</div>
|
||||
</h3>
|
||||
<div class="total-time-area">
|
||||
<div class="total-time-inner">
|
||||
<div class="total-time">
|
||||
<p class="total-time-text">
|
||||
총 학습시간 <strong id="mypage-total-minutes"></strong>분
|
||||
</p>
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" id="mypage-total-gauge" style="width:50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="total-average">전체평균 <em id="mypage-avg-minutes">0</em>분</span>
|
||||
</div>
|
||||
|
||||
<ul class="activity-list">
|
||||
<li class="activity-item gauge" data-category="CA10001">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">마이클래스</span>
|
||||
<span class="activity-value"><em></em>분 (0%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 33%"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item gauge" data-category="CA10002">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">온보딩</span>
|
||||
<span class="activity-value"><em></em>분 (80%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 80%"></div>
|
||||
<p class="activity-note" style="display:none;">
|
||||
<span class="activity-note-num">①</span> 필수 시청: <span class="onboarding-due-date">26.01.14</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item gauge" data-category="CA10003">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">법정교육</span>
|
||||
<span class="activity-value"><em></em>분 (20%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10004">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">리더십</span>
|
||||
<span class="activity-value"><em></em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 40%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10005">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">인사이트</span>
|
||||
<span class="activity-value"><em></em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 60%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10006">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">비즈트렌드</span>
|
||||
<span class="activity-value"><em></em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 20%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="mylist-area">
|
||||
<!-- MOBILE: 2탭 네비게이션 (시청완료 <> 슬라이더 + 한줄소감) -->
|
||||
<div class="mobile-list-tab-header">
|
||||
<button class="mobile-list-tab active" type="button" id="mobileTabContent" data-mobile-tab="content" aria-selected="true">
|
||||
<span class="mobile-tab-arrow mobile-tab-prev" aria-label="이전" aria-hidden="true">‹</span>
|
||||
<span class="mobile-tab-label">시청완료</span>
|
||||
<span class="mobile-tab-arrow mobile-tab-next" aria-label="다음" aria-hidden="true">›</span>
|
||||
</button>
|
||||
<button class="mobile-list-tab" type="button" id="mobileTabReview" data-mobile-tab="review" aria-selected="false">
|
||||
<span class="ico-mobile-pencil" aria-hidden="true"></span>
|
||||
한줄 소감
|
||||
</button>
|
||||
</div>
|
||||
<!-- 콘텐츠 탭 영역 -->
|
||||
<div class="content-tab-wrap">
|
||||
<div class="content-tabs" role="tablist">
|
||||
<button type="button" class="content-tab active" role="tab" aria-selected="true" aria-controls="panel-watching" id="tab-watching" data-tab="watching">
|
||||
시청중인 콘텐츠 <span class="count"></span>
|
||||
</button>
|
||||
<button type="button" class="content-tab" role="tab" aria-selected="false" aria-controls="panel-completed" id="tab-completed" data-tab="completed">
|
||||
시청완료 콘텐츠 <span class="count"></span>
|
||||
</button>
|
||||
<button type="button" class="content-tab" role="tab" aria-selected="false" aria-controls="panel-saved" id="tab-saved" data-tab="saved">
|
||||
저장한 콘텐츠 <span class="count"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="content-panels">
|
||||
<!-- 시청중인 콘텐츠 -->
|
||||
<section class="content-section content-panel active" id="panel-watching" role="tabpanel" aria-labelledby="tab-watching" data-panel="watching">
|
||||
<ul class="content-grid" id="mypage-watching-list"></ul>
|
||||
</section>
|
||||
|
||||
<!-- 시청완료 콘텐츠 -->
|
||||
<section class="content-section content-panel" id="panel-completed" role="tabpanel" aria-labelledby="tab-completed" data-panel="completed">
|
||||
<ul class="content-grid" id="mypage-completed-list"></ul>
|
||||
</section>
|
||||
<!-- 저장한 콘텐츠 -->
|
||||
<section class="content-section content-panel" id="panel-saved" role="tabpanel" aria-labelledby="tab-saved" data-panel="saved">
|
||||
<ul class="content-grid" id="mypage-saved-list"></ul>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 한줄 소감 -->
|
||||
<section class="review-section">
|
||||
<h3 class="section-title">
|
||||
<i class="ico-pin-list" aria-hidden="true"></i>
|
||||
한줄 소감 <span class="count" id="mypage-review-count">0</span>
|
||||
</h3>
|
||||
|
||||
<ul class="review-list" id="mypage-review-list"></ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- MOBILE: 하단 목록 카운트 + 컨텐츠 제안 바 (모바일에서만 표시) -->
|
||||
<nav class="mobile-bottom-nav" aria-label="모바일 콘텐츠 탐색">
|
||||
<button class="mobile-nav-item mobile-nav-item--suggest" type="button" id="mobileSuggestBtn">
|
||||
<span class="mobile-nav-ico mobile-nav-ico--send" aria-hidden="true"></span>
|
||||
<span class="mobile-nav-label">컨텐츠 제안하기</span>
|
||||
<span class="mobile-nav-chevron mobile-nav-chevron--right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // container -->
|
||||
|
||||
<!-- MOBILE: 학습 활동 팝업 모달 -->
|
||||
<div class="mobile-activity-modal" id="mobileActivityModal" role="dialog" aria-modal="true" aria-labelledby="mobileModalTitle" hidden>
|
||||
<div class="modal-backdrop" id="mobileActivityBackdrop"></div>
|
||||
<div class="modal-panel">
|
||||
<div class="modal-header">
|
||||
<p class="modal-title" id="mobileModalTitle">
|
||||
<span class="titile-label">총 학습시간</span> <strong>340</strong><span>분</span></p>
|
||||
<div class="modal-gauge-wrap">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 63%"></div>
|
||||
</div>
|
||||
<span class="modal-average-badge">전체 평균</span>
|
||||
</div>
|
||||
<button class="modal-close-btn" type="button" id="mobileActivityClose" aria-label="닫기">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul class="modal-activity-list">
|
||||
<li>
|
||||
<span class="modal-label">마이클래스</span>
|
||||
<span class="modal-value modal-value--green"><em>74</em>분(33%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">온보딩 <span class="modal-required"><i class="ico-info-xs" aria-hidden="true"></i> 필수 시청 <em>26.01.14</em></span></span>
|
||||
<span class="modal-value modal-value--green"><em>110</em>분(80%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">법정교육 <span class="modal-required"><i class="ico-info-xs" aria-hidden="true"></i> 필수 시청 <em>26.01.14</em></span></span>
|
||||
<span class="modal-value modal-value--green"><em>30</em>분(20%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">리더십</span>
|
||||
<span class="modal-value modal-value--brown"><em>60</em>분</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">인사이트</span>
|
||||
<span class="modal-value modal-value--brown"><em>43</em>분</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">비즈트렌드</span>
|
||||
<span class="modal-value modal-value--brown"><em>23</em>분</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE: 컨텐츠 제안 바텀시트 -->
|
||||
<div class="mobile-suggest-sheet" id="mobileSuggestSheet" role="dialog" aria-modal="true" hidden>
|
||||
<div class="sheet-backdrop" id="mobileSuggestBackdrop"></div>
|
||||
<div class="sheet-panel">
|
||||
<div class="sheet-header">
|
||||
<span class="sheet-header-ico" aria-hidden="true"></span>
|
||||
<p class="sheet-title">컨텐츠 제안하기</p>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div class="suggest-fields">
|
||||
<input type="url" class="suggest-input sheet-url" placeholder="URL" id="sheet-url" />
|
||||
<textarea class="suggest-input sheet-reason" placeholder="추천이유" rows="5" id="sheet-reason"></textarea>
|
||||
</div>
|
||||
<button type="button" class="btn-sheet-confirm" id="btnSheetConfirm" disabled>확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 마이페이지 전용 스크립트: 제안 폼 버튼 활성화, 제안현황 아코디언 -->
|
||||
<script src="/edu/js/mypage.js" defer></script>
|
||||
<!-- ERP기획 : 26.03.20 moon -->
|
||||
<script src="/edu/js/apply_page/add_mypage.js" defer></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,536 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<link rel="stylesheet" type="text/css" href="/edu/css/main.css" />
|
||||
|
||||
<style>
|
||||
/* 마이페이지 콘텐츠 카드 삭제 버튼 숨김
|
||||
- 정책상 기능은 유지하되, 화면에는 노출하지 않는다. */
|
||||
.mypage .btn-remove-card {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 마이페이지 콘텐츠 빈 상태 문구 */
|
||||
.mypage .content-empty {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 마이페이지 한줄소감
|
||||
- 사용자명/프로필 이미지 영역 제거 후 레이아웃 최소 보정 */
|
||||
.mypage .review-comment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mypage .review-comment-text {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mypage .review-comment-text strong {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 한줄소감 빈 상태 문구 */
|
||||
.mypage .review-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<?php
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_01.php';//개인정보
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_02.php';//제안하기 초기정보
|
||||
?>
|
||||
<?php
|
||||
$profileData = $profileData ?? [];
|
||||
$profileBadges = $profileBadges ?? [];
|
||||
|
||||
$profileName = $profileData['name'] ?? '사용자';
|
||||
$profileRankName = $profileData['rank_name'] ?? '';
|
||||
$profileWorkingComp = $profileData['working_comp'] ?? '';
|
||||
$profileBelongCompCd = $profileData['belong_comp_code'] ?? '';//소속회사 코드
|
||||
$profileBelongComp = $profileData['belong_comp_name'] ?? '';//소속회사 명
|
||||
$profileLevelLabel = $profileData['learning_level'] ?? 'Rookie';
|
||||
$profileLevelClass = $profileData['level_class'] ?? 'rookie';
|
||||
$profileLevelIcon = $profileData['level_icon'] ?? '/edu/img/ico/ico_level_rookie.svg';
|
||||
$profileTotalMinutes = (int)($profileData['total_minutes'] ?? 0);
|
||||
$profileImage = $profileData['profile_image'] ?? '/edu/img/ico/ico_user.svg';
|
||||
|
||||
$badgeHat = $profileBadges['hat'] ?? null;
|
||||
$badgePencil = $profileBadges['pencil'] ?? null;
|
||||
$badgePick = $profileBadges['pick'] ?? null;
|
||||
?>
|
||||
<?php
|
||||
/* 제안하기 */
|
||||
$offerHistory = $offerHistory ?? [];
|
||||
$offerDefaultTypeCode = $offerDefaultTypeCode ?? 'OF10001';
|
||||
$offerDefaultStatusCode = $offerDefaultStatusCode ?? 'OF10002';
|
||||
?>
|
||||
<body>
|
||||
<!--
|
||||
========================================
|
||||
마이페이지 레이아웃 구조
|
||||
========================================
|
||||
[좌측] aside.mypage-sidebar : 프로필 + 컨텐츠 제안
|
||||
[우측] main.mypage-main : 학습 활동 + 시청/저장/소감 목록
|
||||
-->
|
||||
<div class="wrap mypage">
|
||||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||||
<div class="container">
|
||||
<div class="mypage-inner">
|
||||
<!--
|
||||
좌측 사이드바: 프로필 카드 + 컨텐츠 제안 폼
|
||||
수정 시: profile-card 내 이름, 직급, 학습레벨 등 변경
|
||||
-->
|
||||
<aside class="mypage-sidebar">
|
||||
<h2 class="mypage-title">마이페이지</h2>
|
||||
<div class="profile-area">
|
||||
<div class="profile-card">
|
||||
<div class="profile-photo-wrap">
|
||||
<div class="profile-photo">
|
||||
<!--
|
||||
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필" />
|
||||
-->
|
||||
<img src="<?= htmlspecialchars($profileImage, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($profileName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?> 프로필" referrerpolicy="no-referrer"/>
|
||||
|
||||
</div>
|
||||
<!-- PC 전용 프로필 배지 아이콘 -->
|
||||
<div class="profile-photo-badges" aria-hidden="true">
|
||||
<?php if (!empty($badgeHat)): ?>
|
||||
<span class="badge-item badge-item-hat">
|
||||
<img src="<?= htmlspecialchars($badgeHat['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgeHat['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($badgePencil)): ?>
|
||||
<span class="badge-item badge-item-pencil">
|
||||
<img src="<?= htmlspecialchars($badgePencil['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgePencil['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($badgePick)): ?>
|
||||
<span class="badge-item badge-item-pick">
|
||||
<img src="<?= htmlspecialchars($badgePick['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgePick['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="profile-name">
|
||||
<em>
|
||||
<span class="ico-level">
|
||||
<img src="<?= htmlspecialchars($profileLevelIcon, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" alt="학습레벨" />
|
||||
</span>
|
||||
<?= htmlspecialchars($profileName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</em>
|
||||
<span><?= htmlspecialchars($profileRankName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></span>
|
||||
</p>
|
||||
<p class="profile-role"><?= htmlspecialchars($profileBelongComp, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></p>
|
||||
|
||||
<!-- badge-level master일때만 클래스명 추가 -->
|
||||
<!-- <div class="badge-level master"> -->
|
||||
<div
|
||||
class="badge-level <?= htmlspecialchars($profileLevelClass, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
id="mypage-level-box"
|
||||
>
|
||||
|
||||
<span class="badge-level-title">학습레벨</span>
|
||||
|
||||
<span class="badge-level-value">
|
||||
<i class="ico-level">
|
||||
<img
|
||||
id="mypage-level-icon"
|
||||
src="<?= htmlspecialchars($profileLevelIcon, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="학습레벨"
|
||||
/>
|
||||
</i>
|
||||
<span id="mypage-level-label">
|
||||
<?= htmlspecialchars($profileLevelLabel, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="ico-info-wrap">
|
||||
<i class="ico-info" aria-describedby="level-tooltip"></i>
|
||||
<span class="ico-info-tooltip" role="tooltip" id="level-tooltip">
|
||||
<span class="ico-info-tooltip-desc">누적된 학습 시간에 따라<br>4단계의 레벨이<br>자동 설정됩니다.</span>
|
||||
<ul class="ico-info-tooltip-list">
|
||||
<li><em>Master</em><span>40시간 이상</span></li>
|
||||
<li><em>Elite</em><span>20 ~ 40시간</span></li>
|
||||
<li><em>Learner</em><span>8 ~ 20시간</span></li>
|
||||
<li><em>Rookie</em><span>0 ~ 8시간</span></li>
|
||||
</ul>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MOBILE: 총 학습시간 버튼 (모바일에서만 표시, 클릭 시 활동 모달 오픈) -->
|
||||
<button class="mobile-total-time-btn" type="button" id="mobileActivityBtn" aria-label="총 학습시간 상세보기">
|
||||
<span>총 학습시간 <strong id="mobile-mypage-total-minutes"><?= number_format($profileTotalMinutes) ?></strong>분</span>
|
||||
<span class="mobile-total-time-chevron" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 컨텐츠 제안하기 Start -->
|
||||
<section class="suggest-section">
|
||||
<h3 class="suggest-title">컨텐츠 제안하기</h3>
|
||||
|
||||
<form id="offerForm" method="post" action="/edu/ajax/insert_offer.php">
|
||||
<input type="hidden" name="type_code" value="<?= htmlspecialchars($offerDefaultTypeCode, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">
|
||||
<input type="hidden" name="status_code" value="<?= htmlspecialchars($offerDefaultStatusCode, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">
|
||||
|
||||
<div class="suggest-fields">
|
||||
<input
|
||||
type="url"
|
||||
class="suggest-input suggest-url"
|
||||
placeholder="URL"
|
||||
id="suggest-url"
|
||||
name="reference_url"
|
||||
/>
|
||||
<textarea
|
||||
class="suggest-input suggest-reason"
|
||||
placeholder="추천이유"
|
||||
rows="4"
|
||||
id="suggest-reason"
|
||||
name="reason"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary btn-full" disabled>
|
||||
제안 보내기
|
||||
<i class="ico-arrow"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="suggest-status accordion">
|
||||
<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="suggest-status-content">
|
||||
<span class="accordion-title">제안현황</span>
|
||||
<i class="ico-chevron" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<div id="suggest-status-content" class="accordion-content" hidden>
|
||||
<ul class="suggest-status-list">
|
||||
<?php if (!empty($offerHistory)): ?>
|
||||
<?php foreach ($offerHistory as $row): ?>
|
||||
<li
|
||||
class="<?= !empty($row['is_consider']) ? 'consider' : '' ?>"
|
||||
data-offer-id="<?= htmlspecialchars($row['offer_id'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
>
|
||||
<span class="suggest-date">
|
||||
<?= htmlspecialchars($row['created_at_dot'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
|
||||
<?php if (!empty($row['is_consider'])): ?>
|
||||
<span class="suggest-dots"></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<span class="suggest-state">
|
||||
<?= htmlspecialchars($row['status_name'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<?php else: ?>
|
||||
<li>
|
||||
<span class="suggest-date">-</span>
|
||||
<span class="suggest-state">등록된 제안이 없습니다.</span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 컨텐츠 제안하기 End -->
|
||||
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!--
|
||||
우측 메인: 학습 활동 통계 + 시청/저장/소감 목록
|
||||
학습 시간 수정: total-time-text의 strong, gauge-fill의 width 값
|
||||
-->
|
||||
<main class="mypage-main">
|
||||
<section class="activity-section">
|
||||
<h3 class="section-title">
|
||||
<i class="ico-pin"></i>
|
||||
나의 학습 활동
|
||||
<div class="select-box">
|
||||
<label class="year-badge" style="display: none;"></label>
|
||||
<select id="mypage-year-select">
|
||||
<option>년</option>
|
||||
</select>
|
||||
</div>
|
||||
</h3>
|
||||
<div class="total-time-area">
|
||||
<div class="total-time-inner">
|
||||
<div class="total-time">
|
||||
<p class="total-time-text">
|
||||
총 학습시간 <strong id="mypage-total-minutes"></strong>분
|
||||
</p>
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" id="mypage-total-gauge" style="width:50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="total-average">전체평균 <em id="mypage-avg-minutes">0</em>분</span>
|
||||
</div>
|
||||
|
||||
<ul class="activity-list">
|
||||
<li class="activity-item gauge" data-category="CA10001">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">마이클래스</span>
|
||||
<span class="activity-value"><em></em>분 (0%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 33%"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item gauge" data-category="CA10002">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">온보딩</span>
|
||||
<span class="activity-value"><em></em>분 (80%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 80%"></div>
|
||||
<p class="activity-note" style="display:none;">
|
||||
<span class="activity-note-num">①</span> 필수 시청: <span class="onboarding-due-date">26.01.14</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item gauge" data-category="CA10003">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">법정교육</span>
|
||||
<span class="activity-value"><em></em>분 (20%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10004">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">리더십</span>
|
||||
<span class="activity-value"><em></em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 40%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10005">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">인사이트</span>
|
||||
<span class="activity-value"><em></em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 60%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10006">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">비즈트렌드</span>
|
||||
<span class="activity-value"><em></em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 20%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="mylist-area">
|
||||
<!-- MOBILE: 2탭 네비게이션 (시청완료 <> 슬라이더 + 한줄소감) -->
|
||||
<div class="mobile-list-tab-header">
|
||||
<button class="mobile-list-tab active" type="button" id="mobileTabContent" data-mobile-tab="content" aria-selected="true">
|
||||
<span class="mobile-tab-arrow mobile-tab-prev" aria-label="이전" aria-hidden="true">‹</span>
|
||||
<span class="mobile-tab-label">시청완료</span>
|
||||
<span class="mobile-tab-arrow mobile-tab-next" aria-label="다음" aria-hidden="true">›</span>
|
||||
</button>
|
||||
<button class="mobile-list-tab" type="button" id="mobileTabReview" data-mobile-tab="review" aria-selected="false">
|
||||
<span class="ico-mobile-pencil" aria-hidden="true"></span>
|
||||
한줄 소감
|
||||
</button>
|
||||
</div>
|
||||
<!-- 콘텐츠 탭 영역 -->
|
||||
<div class="content-tab-wrap">
|
||||
<div class="content-tabs" role="tablist">
|
||||
<button type="button" class="content-tab active" role="tab" aria-selected="true" aria-controls="panel-watching" id="tab-watching" data-tab="watching">
|
||||
시청중인 콘텐츠 <span class="count"></span>
|
||||
</button>
|
||||
<button type="button" class="content-tab" role="tab" aria-selected="false" aria-controls="panel-completed" id="tab-completed" data-tab="completed">
|
||||
시청완료 콘텐츠 <span class="count"></span>
|
||||
</button>
|
||||
<button type="button" class="content-tab" role="tab" aria-selected="false" aria-controls="panel-saved" id="tab-saved" data-tab="saved">
|
||||
저장한 콘텐츠 <span class="count"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="content-panels">
|
||||
<!-- 시청중인 콘텐츠 -->
|
||||
<section class="content-section content-panel active" id="panel-watching" role="tabpanel" aria-labelledby="tab-watching" data-panel="watching">
|
||||
<ul class="content-grid" id="mypage-watching-list"></ul>
|
||||
</section>
|
||||
|
||||
<!-- 시청완료 콘텐츠 -->
|
||||
<section class="content-section content-panel" id="panel-completed" role="tabpanel" aria-labelledby="tab-completed" data-panel="completed">
|
||||
<ul class="content-grid" id="mypage-completed-list"></ul>
|
||||
</section>
|
||||
<!-- 저장한 콘텐츠 -->
|
||||
<section class="content-section content-panel" id="panel-saved" role="tabpanel" aria-labelledby="tab-saved" data-panel="saved">
|
||||
<ul class="content-grid" id="mypage-saved-list"></ul>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 한줄 소감 -->
|
||||
<section class="review-section">
|
||||
<h3 class="section-title">
|
||||
<i class="ico-pin-list" aria-hidden="true"></i>
|
||||
한줄 소감 <span class="count" id="mypage-review-count">0</span>
|
||||
</h3>
|
||||
|
||||
<ul class="review-list" id="mypage-review-list"></ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- MOBILE: 하단 목록 카운트 + 컨텐츠 제안 바 (모바일에서만 표시) -->
|
||||
<nav class="mobile-bottom-nav" aria-label="모바일 콘텐츠 탐색">
|
||||
<button class="mobile-nav-item mobile-nav-item--suggest" type="button" id="mobileSuggestBtn">
|
||||
<span class="mobile-nav-ico mobile-nav-ico--send" aria-hidden="true"></span>
|
||||
<span class="mobile-nav-label">컨텐츠 제안하기</span>
|
||||
<span class="mobile-nav-chevron mobile-nav-chevron--right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // container -->
|
||||
|
||||
<!-- MOBILE: 학습 활동 팝업 모달 -->
|
||||
<div class="mobile-activity-modal" id="mobileActivityModal" role="dialog" aria-modal="true" aria-labelledby="mobileModalTitle" hidden>
|
||||
<div class="modal-backdrop" id="mobileActivityBackdrop"></div>
|
||||
<div class="modal-panel">
|
||||
<div class="modal-header">
|
||||
<p class="modal-title" id="mobileModalTitle">
|
||||
<span class="titile-label">총 학습시간</span> <strong>340</strong><span>분</span></p>
|
||||
<div class="modal-gauge-wrap">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 63%"></div>
|
||||
</div>
|
||||
<span class="modal-average-badge">전체 평균</span>
|
||||
</div>
|
||||
<button class="modal-close-btn" type="button" id="mobileActivityClose" aria-label="닫기">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul class="modal-activity-list">
|
||||
<li>
|
||||
<span class="modal-label">마이클래스</span>
|
||||
<span class="modal-value modal-value--green"><em>74</em>분(33%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">온보딩 <span class="modal-required"><i class="ico-info-xs" aria-hidden="true"></i> 필수 시청 <em>26.01.14</em></span></span>
|
||||
<span class="modal-value modal-value--green"><em>110</em>분(80%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">법정교육 <span class="modal-required"><i class="ico-info-xs" aria-hidden="true"></i> 필수 시청 <em>26.01.14</em></span></span>
|
||||
<span class="modal-value modal-value--green"><em>30</em>분(20%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">리더십</span>
|
||||
<span class="modal-value modal-value--brown"><em>60</em>분</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">인사이트</span>
|
||||
<span class="modal-value modal-value--brown"><em>43</em>분</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">비즈트렌드</span>
|
||||
<span class="modal-value modal-value--brown"><em>23</em>분</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE: 컨텐츠 제안 바텀시트 -->
|
||||
<div class="mobile-suggest-sheet" id="mobileSuggestSheet" role="dialog" aria-modal="true" hidden>
|
||||
<div class="sheet-backdrop" id="mobileSuggestBackdrop"></div>
|
||||
<div class="sheet-panel">
|
||||
<div class="sheet-header">
|
||||
<span class="sheet-header-ico" aria-hidden="true"></span>
|
||||
<p class="sheet-title">컨텐츠 제안하기</p>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div class="suggest-fields">
|
||||
<input type="url" class="suggest-input sheet-url" placeholder="URL" id="sheet-url" />
|
||||
<textarea class="suggest-input sheet-reason" placeholder="추천이유" rows="5" id="sheet-reason"></textarea>
|
||||
</div>
|
||||
<button type="button" class="btn-sheet-confirm" id="btnSheetConfirm" disabled>확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 마이페이지 전용 스크립트: 제안 폼 버튼 활성화, 제안현황 아코디언 -->
|
||||
<script src="/edu/js/mypage.js" defer></script>
|
||||
<!-- ERP기획 : 26.03.20 moon -->
|
||||
<script src="/edu/js/apply_page/add_mypage.js" defer></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user