666 lines
21 KiB
JavaScript
666 lines
21 KiB
JavaScript
/**
|
|
* =====================
|
|
* 사용페이지 : 마이페이지
|
|
* 작 성 자 : ERP기획팀 moon
|
|
* 최초작성일자: 26.03.20.
|
|
* =====================
|
|
*/
|
|
|
|
(function () {
|
|
|
|
/**
|
|
* 마이페이지 초기 진입 시 실행
|
|
* - 학습활동 데이터 로드
|
|
* - 콘텐츠 탭 클릭 재렌더링 이벤트 연결
|
|
* - 최초 로드 완료 후 활성 탭 기준으로 리스트를 다시 렌더링한다
|
|
*/
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// 연도 select 변경 이벤트 연결
|
|
bindYearSelectChange();
|
|
|
|
// 학습활동 초기 데이터 조회
|
|
loadMypageInit();
|
|
|
|
// 콘텐츠 탭 클릭 시 재렌더링 이벤트 연결
|
|
bindContentTabReload();
|
|
});
|
|
|
|
/**
|
|
* 모든 리소스 로드 완료 후 실행
|
|
* - 퍼블리싱용 mypage.js 초기화가 끝난 뒤
|
|
* 현재 활성 탭 기준으로 콘텐츠 리스트를 다시 렌더링한다
|
|
*/
|
|
window.addEventListener("load", function () {
|
|
setTimeout(function () {
|
|
reloadActiveContentTab();
|
|
}, 150);
|
|
});
|
|
|
|
//JS 1단계 (가장 먼저)
|
|
/**
|
|
* 마이페이지 초기 데이터 로드 함수
|
|
* - 서버에서 학습활동 관련 데이터를 가져온다
|
|
* - 연도 select 및 총 학습시간을 화면에 반영한다
|
|
*/
|
|
function loadMypageInit(year = '') {
|
|
fetch('/edu/ajax/get_init_data_for_mypage.php?year=' + year)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
//-----------------------
|
|
// 실패 시 종료
|
|
if (!data.success) return;
|
|
//-----------------------
|
|
// 1. 연도 select 구성
|
|
renderYearSelect(data.year_list, data.selected_year);
|
|
//-----------------------
|
|
// 2. 총 학습시간 표시
|
|
renderMyTotalMinutes(data.my_total_minutes);
|
|
//-----------------------
|
|
// 3. 모바일 총 학습시간 표시
|
|
renderMobileMyTotalMinutes(data.my_total_minutes);
|
|
//-----------------------
|
|
// 4. 전체평균 표시
|
|
renderAvgTotalMinutes(data.avg_total_minutes);
|
|
//-----------------------
|
|
// 5. 상단 총 학습시간 게이지 표시
|
|
renderMyTotalGauge(data.my_total_minutes);
|
|
//-----------------------
|
|
// 6. 마이클래스 항목 표시
|
|
renderMyClassActivity(data.activity_items);
|
|
// 7. 온보딩 학습활동 데이터를 화면에 반영
|
|
renderOnboardingActivity(data.activity_items);
|
|
//-----------------------
|
|
// 8. 법정교육 학습활동 데이터를 화면에 반영
|
|
renderLegalEducationActivity(data.activity_items);
|
|
//-----------------------
|
|
// 9. 리더십 학습활동 데이터를 화면에 반영
|
|
renderLeadershipActivity(data.activity_items);
|
|
//-----------------------
|
|
// 10. 인사이트 학습활동 데이터를 화면에 반영
|
|
renderInsightActivity(data.activity_items);
|
|
//-----------------------
|
|
// 11. 비즈트렌드 학습활동 데이터를 화면에 반영
|
|
renderBizTrendActivity(data.activity_items);
|
|
|
|
});
|
|
}
|
|
|
|
//JS 2단계 (연도 select 채우기)
|
|
function renderYearSelect(yearList, selectedYear) {
|
|
const select = document.getElementById('mypage-year-select');
|
|
if (!select) return;
|
|
|
|
select.innerHTML = '';
|
|
|
|
yearList.forEach(year => {
|
|
const option = document.createElement('option');
|
|
option.value = year;
|
|
option.textContent = year + '년';
|
|
|
|
if (year == selectedYear) {
|
|
option.selected = true;
|
|
}
|
|
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
//AJAX 응답의 my_total_minutes를 #mypage-total-minutes에 넣기
|
|
/**
|
|
* 총 학습시간(분)을 화면에 표시하는 함수
|
|
* - 서버에서 받은 my_total_minutes 값을
|
|
* #mypage-total-minutes 영역에 표시한다.
|
|
* - 숫자는 천단위 콤마 포맷 적용
|
|
*/
|
|
function renderMyTotalMinutes(totalMinutes) {
|
|
// 대상 DOM 가져오기
|
|
const el = document.getElementById('mypage-total-minutes');
|
|
if (!el) return;
|
|
|
|
// 숫자 변환 및 예외 방어 (null, undefined 대비)
|
|
const value = parseInt(totalMinutes, 10) || 0;
|
|
|
|
// 화면에 출력 (예: 1,200)
|
|
el.textContent = value.toLocaleString();
|
|
}
|
|
|
|
/**
|
|
* 모바일 총 학습시간(분)을 화면에 표시하는 함수
|
|
* - 서버에서 받은 my_total_minutes 값을
|
|
* #mobile-mypage-total-minutes 영역에 표시한다.
|
|
* - 숫자는 천단위 콤마 포맷 적용
|
|
*/
|
|
function renderMobileMyTotalMinutes(totalMinutes) {
|
|
// 대상 DOM 가져오기
|
|
const el = document.getElementById('mobile-mypage-total-minutes');
|
|
if (!el) return;
|
|
|
|
// 숫자 변환 및 예외 방어
|
|
const value = parseInt(totalMinutes, 10) || 0;
|
|
|
|
// 화면에 출력
|
|
el.textContent = value.toLocaleString();
|
|
}
|
|
|
|
/**
|
|
* 전체평균 학습시간(분)을 화면에 표시하는 함수
|
|
* - 서버에서 받은 avg_total_minutes 값을
|
|
* #mypage-avg-minutes 영역에 표시한다.
|
|
* - 숫자는 천단위 콤마 포맷 적용
|
|
*/
|
|
function renderAvgTotalMinutes(avgTotalMinutes) {
|
|
// 대상 DOM 가져오기
|
|
const el = document.getElementById('mypage-avg-minutes');
|
|
if (!el) return;
|
|
|
|
// 숫자 변환 및 예외 방어
|
|
const value = parseInt(avgTotalMinutes, 10) || 0;
|
|
|
|
// 화면에 출력
|
|
el.textContent = value.toLocaleString();
|
|
}
|
|
|
|
/**
|
|
* 총 학습시간 게이지를 화면에 반영하는 함수
|
|
* - 서버에서 받은 my_total_minutes 값을 기준으로
|
|
* #mypage-total-gauge의 width 값을 변경한다.
|
|
* - 최대 기준은 40시간(2400분)으로 계산한다.
|
|
* - 2400분을 초과해도 게이지는 100%를 넘지 않도록 제한한다.
|
|
*/
|
|
function renderMyTotalGauge(totalMinutes) {
|
|
// 대상 DOM 가져오기
|
|
const el = document.getElementById('mypage-total-gauge');
|
|
if (!el) return;
|
|
|
|
// 총 학습시간(분) 숫자 변환
|
|
const value = parseInt(totalMinutes, 10) || 0;
|
|
|
|
// 게이지 최대 기준값 (40시간 = 2400분)
|
|
const maxMinutes = 2400;
|
|
|
|
// 퍼센트 계산
|
|
let percent = Math.round((value / maxMinutes) * 100);
|
|
|
|
// 0 ~ 100 범위로 제한
|
|
if (percent < 0) percent = 0;
|
|
if (percent > 100) percent = 100;
|
|
|
|
// 게이지 너비 반영
|
|
el.style.width = percent + '%';
|
|
}
|
|
|
|
/**
|
|
* 연도 select 변경 이벤트를 연결하는 함수
|
|
* - 사용자가 연도를 변경하면
|
|
* 선택한 연도값으로 마이페이지 초기 데이터를 다시 조회한다.
|
|
*/
|
|
function bindYearSelectChange() {
|
|
// 연도 select DOM 가져오기
|
|
const select = document.getElementById('mypage-year-select');
|
|
if (!select) return;
|
|
|
|
// 연도 변경 이벤트 연결
|
|
select.addEventListener('change', function () {
|
|
// 현재 선택된 연도 가져오기
|
|
const selectedYear = this.value || '';
|
|
|
|
// 선택 연도 기준으로 데이터 다시 조회
|
|
loadMypageInit(selectedYear);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 마이클래스(CA10001) 학습활동 데이터를 화면에 반영하는 함수
|
|
* - activity_items 배열에서 마이클래스 항목만 찾아서
|
|
* 해당 li[data-category="CA10001"] 영역의 수치를 갱신한다.
|
|
* - 학습시간, 퍼센트, 게이지, 전체 콘텐츠 개수를 반영한다.
|
|
*/
|
|
function renderMyClassActivity(activityItems) {
|
|
// activity_items가 배열이 아니면 종료
|
|
if (!Array.isArray(activityItems)) return;
|
|
|
|
// 마이클래스 항목 찾기
|
|
const item = activityItems.find(function (row) {
|
|
return row.category_code === 'CA10001';
|
|
});
|
|
if (!item) return;
|
|
|
|
// 마이클래스 li 찾기
|
|
const li = document.querySelector('.activity-list li[data-category="CA10001"]');
|
|
if (!li) return;
|
|
|
|
// 숫자 변환 및 예외 방어
|
|
const totalWatchTm = parseInt(item.total_watch_tm, 10) || 0;
|
|
const percent = parseInt(item.percent, 10) || 0;
|
|
const totalCount = parseInt(item.master_total_cnt, 10) || 0;
|
|
|
|
// 1. 우측 상단 표시값 갱신
|
|
// 예: 74분 (33%)
|
|
const valueEl = li.querySelector('.activity-value');
|
|
if (valueEl) {
|
|
valueEl.innerHTML = '<em>' + totalWatchTm.toLocaleString() + '</em>분 (' + percent + '%)';
|
|
}
|
|
|
|
// 2. 게이지 너비 갱신
|
|
const gaugeEl = li.querySelector('.gauge-fill');
|
|
if (gaugeEl) {
|
|
gaugeEl.style.width = percent + '%';
|
|
}
|
|
|
|
// 3. 분모 표시 갱신
|
|
// 예: 6개
|
|
const endEl = li.querySelector('.gauge-end');
|
|
if (endEl) {
|
|
endEl.textContent = totalCount.toLocaleString() + '개';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 온보딩(CA10002) 학습활동 데이터를 화면에 반영하는 함수
|
|
* - 학습시간, 퍼센트, 게이지, 분모를 표시
|
|
* - 온보딩 기간일 경우에만 "필수 시청 날짜"를 노출한다.
|
|
*/
|
|
function renderOnboardingActivity(activityItems) {
|
|
// 배열 방어
|
|
if (!Array.isArray(activityItems)) return;
|
|
|
|
// 온보딩 항목 찾기
|
|
const item = activityItems.find(function (row) {
|
|
return row.category_code === 'CA10002';
|
|
});
|
|
if (!item) return;
|
|
|
|
// 해당 li 찾기
|
|
const li = document.querySelector('.activity-list li[data-category="CA10002"]');
|
|
if (!li) return;
|
|
|
|
// 값 파싱
|
|
const totalWatchTm = parseInt(item.total_watch_tm, 10) || 0;
|
|
const percent = parseInt(item.percent, 10) || 0;
|
|
const totalCount = parseInt(item.master_total_cnt, 10) || 0;
|
|
|
|
// 1. 학습시간 + 퍼센트 표시
|
|
const valueEl = li.querySelector('.activity-value');
|
|
if (valueEl) {
|
|
valueEl.innerHTML = '<em>' + totalWatchTm.toLocaleString() + '</em>분 (' + percent + '%)';
|
|
}
|
|
|
|
// 2. 게이지
|
|
const gaugeEl = li.querySelector('.gauge-fill');
|
|
if (gaugeEl) {
|
|
gaugeEl.style.width = percent + '%';
|
|
}
|
|
|
|
// 3. 분모 표시
|
|
const endEl = li.querySelector('.gauge-end');
|
|
if (endEl) {
|
|
endEl.textContent = totalCount.toLocaleString() + '개';
|
|
}
|
|
|
|
// 4. 온보딩 안내문구 제어
|
|
const noteEl = li.querySelector('.activity-note');
|
|
const dateEl = li.querySelector('.onboarding-due-date');
|
|
|
|
if (noteEl && dateEl) {
|
|
// 날짜 표시 (yy.mm.dd 형식)
|
|
if (item.onboarding_due_date) {
|
|
const d = new Date(item.onboarding_due_date);
|
|
if (!isNaN(d.getTime())) {
|
|
const yy = String(d.getFullYear()).slice(2);
|
|
const mm = String(d.getMonth() + 1).padStart(2, '0');
|
|
const dd = String(d.getDate()).padStart(2, '0');
|
|
dateEl.textContent = yy + '.' + mm + '.' + dd;
|
|
}
|
|
}
|
|
|
|
// 온보딩 기간 여부에 따라 표시/숨김
|
|
if (item.is_onboarding_period === 'Y') {
|
|
noteEl.style.display = '';
|
|
} else {
|
|
noteEl.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 법정교육(CA10003) 학습활동 데이터를 화면에 반영하는 함수
|
|
* - 학습시간, 퍼센트, 게이지, 분모를 표시한다.
|
|
* - activity_items 배열에서 법정교육 항목만 찾아
|
|
* 해당 li[data-category="CA10003"] 영역을 갱신한다.
|
|
*/
|
|
function renderLegalEducationActivity(activityItems) {
|
|
// 배열이 아니면 종료
|
|
if (!Array.isArray(activityItems)) return;
|
|
|
|
// 법정교육 항목 찾기
|
|
const item = activityItems.find(function (row) {
|
|
return row.category_code === 'CA10003';
|
|
});
|
|
if (!item) return;
|
|
|
|
// 해당 li 찾기
|
|
const li = document.querySelector('.activity-list li[data-category="CA10003"]');
|
|
if (!li) return;
|
|
|
|
// 숫자 변환 및 예외 방어
|
|
const totalWatchTm = parseInt(item.total_watch_tm, 10) || 0;
|
|
const percent = parseInt(item.percent, 10) || 0;
|
|
const totalCount = parseInt(item.master_total_cnt, 10) || 0;
|
|
|
|
// 1. 우측 상단 표시값 갱신
|
|
// 예: 30분 (20%)
|
|
const valueEl = li.querySelector('.activity-value');
|
|
if (valueEl) {
|
|
valueEl.innerHTML = '<em>' + totalWatchTm.toLocaleString() + '</em>분 (' + percent + '%)';
|
|
}
|
|
|
|
// 2. 게이지 너비 갱신
|
|
const gaugeEl = li.querySelector('.gauge-fill');
|
|
if (gaugeEl) {
|
|
gaugeEl.style.width = percent + '%';
|
|
}
|
|
|
|
// 3. 분모 표시 갱신
|
|
// 예: 6개
|
|
const endEl = li.querySelector('.gauge-end');
|
|
if (endEl) {
|
|
endEl.textContent = totalCount.toLocaleString() + '개';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 리더십(CA10004) 학습활동 데이터를 화면에 반영하는 함수
|
|
* - 학습시간, 게이지, 분모(분)를 표시한다.
|
|
* - activity_items 배열에서 리더십 항목만 찾아
|
|
* 해당 li[data-category="CA10004"] 영역을 갱신한다.
|
|
*/
|
|
function renderLeadershipActivity(activityItems) {
|
|
// 배열이 아니면 종료
|
|
if (!Array.isArray(activityItems)) return;
|
|
|
|
// 리더십 항목 찾기
|
|
const item = activityItems.find(function (row) {
|
|
return row.category_code === 'CA10004';
|
|
});
|
|
if (!item) return;
|
|
|
|
// 해당 li 찾기
|
|
const li = document.querySelector('.activity-list li[data-category="CA10004"]');
|
|
if (!li) return;
|
|
|
|
// 숫자 변환 및 예외 방어
|
|
const totalWatchTm = parseInt(item.total_watch_tm, 10) || 0;
|
|
const percent = parseInt(item.percent, 10) || 0;
|
|
const totalContentTm = parseInt(item.total_content_tm, 10) || 0;
|
|
|
|
// 1. 우측 상단 표시값 갱신
|
|
// 예: 60분
|
|
const valueEl = li.querySelector('.activity-value');
|
|
if (valueEl) {
|
|
valueEl.innerHTML = '<em>' + totalWatchTm.toLocaleString() + '</em>분';
|
|
}
|
|
|
|
// 2. 게이지 너비 갱신
|
|
const gaugeEl = li.querySelector('.gauge-fill');
|
|
if (gaugeEl) {
|
|
gaugeEl.style.width = percent + '%';
|
|
}
|
|
|
|
// 3. 분모 표시 갱신
|
|
// 예: 240분
|
|
const endEl = li.querySelector('.gauge-end');
|
|
if (endEl) {
|
|
endEl.textContent = totalContentTm.toLocaleString() + '분';
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* 인사이트(CA10005) 학습활동 데이터를 화면에 반영하는 함수
|
|
* - 학습시간, 게이지, 분모(분)를 표시한다.
|
|
* - activity_items 배열에서 인사이트 항목만 찾아
|
|
* 해당 li[data-category="CA10005"] 영역을 갱신한다.
|
|
*/
|
|
function renderInsightActivity(activityItems) {
|
|
// 배열이 아니면 종료
|
|
if (!Array.isArray(activityItems)) return;
|
|
|
|
// 인사이트 항목 찾기
|
|
const item = activityItems.find(function (row) {
|
|
return row.category_code === 'CA10005';
|
|
});
|
|
if (!item) return;
|
|
|
|
// 해당 li 찾기
|
|
const li = document.querySelector('.activity-list li[data-category="CA10005"]');
|
|
if (!li) return;
|
|
|
|
// 숫자 변환 및 예외 방어
|
|
const totalWatchTm = parseInt(item.total_watch_tm, 10) || 0;
|
|
const percent = parseInt(item.percent, 10) || 0;
|
|
const totalContentTm = parseInt(item.total_content_tm, 10) || 0;
|
|
|
|
// 1. 우측 상단 표시값 갱신
|
|
// 예: 43분
|
|
const valueEl = li.querySelector('.activity-value');
|
|
if (valueEl) {
|
|
valueEl.innerHTML = '<em>' + totalWatchTm.toLocaleString() + '</em>분';
|
|
}
|
|
|
|
// 2. 게이지 너비 갱신
|
|
const gaugeEl = li.querySelector('.gauge-fill');
|
|
if (gaugeEl) {
|
|
gaugeEl.style.width = percent + '%';
|
|
}
|
|
|
|
// 3. 분모 표시 갱신
|
|
// 예: 90분
|
|
const endEl = li.querySelector('.gauge-end');
|
|
if (endEl) {
|
|
endEl.textContent = totalContentTm.toLocaleString() + '분';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 비즈트렌드(CA10006) 학습활동 데이터를 화면에 반영하는 함수
|
|
* - 학습시간, 게이지, 분모(분)를 표시한다.
|
|
* - activity_items 배열에서 비즈트렌드 항목만 찾아
|
|
* 해당 li[data-category="CA10006"] 영역을 갱신한다.
|
|
*/
|
|
function renderBizTrendActivity(activityItems) {
|
|
// 배열이 아니면 종료
|
|
if (!Array.isArray(activityItems)) return;
|
|
|
|
// 비즈트렌드 항목 찾기
|
|
const item = activityItems.find(function (row) {
|
|
return row.category_code === 'CA10006';
|
|
});
|
|
if (!item) return;
|
|
|
|
// 해당 li 찾기
|
|
const li = document.querySelector('.activity-list li[data-category="CA10006"]');
|
|
if (!li) return;
|
|
|
|
// 숫자 변환 및 예외 방어
|
|
const totalWatchTm = parseInt(item.total_watch_tm, 10) || 0;
|
|
const percent = parseInt(item.percent, 10) || 0;
|
|
const totalContentTm = parseInt(item.total_content_tm, 10) || 0;
|
|
|
|
// 1. 우측 상단 표시값 갱신
|
|
// 예: 23분
|
|
const valueEl = li.querySelector('.activity-value');
|
|
if (valueEl) {
|
|
valueEl.innerHTML = '<em>' + totalWatchTm.toLocaleString() + '</em>분';
|
|
}
|
|
|
|
// 2. 게이지 너비 갱신
|
|
const gaugeEl = li.querySelector('.gauge-fill');
|
|
if (gaugeEl) {
|
|
gaugeEl.style.width = percent + '%';
|
|
}
|
|
|
|
// 3. 분모 표시 갱신
|
|
// 예: 80분
|
|
const endEl = li.querySelector('.gauge-end');
|
|
if (endEl) {
|
|
endEl.textContent = totalContentTm.toLocaleString() + '분';
|
|
}
|
|
}//renderBizTrendActivity
|
|
|
|
|
|
/**
|
|
* 시청중인 콘텐츠 목록을 서버에서 조회하여 화면에 표시하는 함수
|
|
* - watching 탭 기준으로 목록 HTML을 받아
|
|
* #mypage-watching-list 영역에 삽입한다.
|
|
* - mypage.js가 먼저 탭/패널 초기화를 수행한 뒤,
|
|
* 이 함수가 실제 콘텐츠 목록을 최종 반영하는 역할을 한다.
|
|
*/
|
|
function loadWatchingContentList() {
|
|
// 시청중 목록 영역 가져오기
|
|
const listEl = document.getElementById('mypage-watching-list');
|
|
if (!listEl) return;
|
|
|
|
// 서버에 시청중 탭 목록 요청
|
|
fetch('/edu/ajax/get_video_list_for_mypage.php?tab=watching&page=1')
|
|
.then(function (res) {
|
|
return res.json();
|
|
})
|
|
.then(function (data) {
|
|
// 응답 성공 여부 확인
|
|
if (!data.success) return;
|
|
|
|
// 서버에서 내려준 HTML을 최종 반영
|
|
listEl.innerHTML = data.html || '';
|
|
|
|
// 디버깅 확인용
|
|
console.log('[watching] 최종 렌더링 완료:', listEl.querySelectorAll('.content-card').length);
|
|
})
|
|
.catch(function (error) {
|
|
console.error('시청중 콘텐츠 목록을 불러오지 못했습니다.', error);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 콘텐츠 탭 클릭 이벤트 감지 후
|
|
* 해당 탭에 맞는 데이터를 다시 렌더링하는 함수
|
|
*
|
|
* - mypage.js가 탭 전환을 처리한 이후 실행된다
|
|
* - 각 탭(watching / completed / saved)에 따라
|
|
* AJAX 호출을 다시 수행하여 리스트를 덮어쓴다
|
|
*/
|
|
function bindContentTabReload() {
|
|
|
|
// 모든 탭 버튼 가져오기
|
|
const tabs = document.querySelectorAll('.content-tab');
|
|
|
|
tabs.forEach(function (tabBtn) {
|
|
|
|
tabBtn.addEventListener('click', function () {
|
|
|
|
const tab = this.getAttribute('data-tab');
|
|
|
|
// 약간의 딜레이를 줘서 mypage.js 처리 이후 실행
|
|
setTimeout(function () {
|
|
|
|
if (tab === 'watching') {
|
|
loadWatchingContentList();
|
|
} else if (tab === 'completed') {
|
|
loadCompletedContentList();
|
|
} else if (tab === 'saved') {
|
|
loadSavedContentList();
|
|
}
|
|
|
|
console.log('[탭 재렌더링]', tab);
|
|
|
|
}, 100);
|
|
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* 시청완료 콘텐츠 목록 로드
|
|
*/
|
|
function loadCompletedContentList() {
|
|
|
|
const listEl = document.querySelector('#panel-completed .content-grid');
|
|
if (!listEl) return;
|
|
|
|
fetch('/edu/ajax/get_video_list_for_mypage.php?tab=completed&page=1')
|
|
.then(res => res.json())
|
|
.then(function (data) {
|
|
|
|
if (!data.success) return;
|
|
|
|
listEl.innerHTML = data.html || '';
|
|
|
|
console.log('[completed] 렌더링 완료');
|
|
|
|
})
|
|
.catch(function (e) {
|
|
console.error('completed 로딩 실패', e);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 저장한 콘텐츠 목록 로드
|
|
*/
|
|
function loadSavedContentList() {
|
|
|
|
const listEl = document.querySelector('#panel-saved .content-grid');
|
|
if (!listEl) return;
|
|
|
|
fetch('/edu/ajax/get_video_list_for_mypage.php?tab=saved&page=1')
|
|
.then(res => res.json())
|
|
.then(function (data) {
|
|
|
|
if (!data.success) return;
|
|
|
|
listEl.innerHTML = data.html || '';
|
|
|
|
console.log('[saved] 렌더링 완료');
|
|
|
|
})
|
|
.catch(function (e) {
|
|
console.error('saved 로딩 실패', e);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 현재 활성화된 콘텐츠 탭을 기준으로
|
|
* 해당 탭의 리스트를 다시 렌더링하는 함수
|
|
*
|
|
* - 최초 페이지 진입 시 사용
|
|
* - mypage.js가 탭/패널 초기화를 끝낸 뒤 실행되어야 한다
|
|
*/
|
|
function reloadActiveContentTab() {
|
|
// 현재 active 상태의 탭 버튼 찾기
|
|
const activeTab = document.querySelector('.content-tab.active');
|
|
if (!activeTab) return;
|
|
|
|
// 활성 탭 종류 확인
|
|
const tab = activeTab.getAttribute('data-tab');
|
|
|
|
// 탭 종류에 따라 해당 리스트 다시 조회
|
|
if (tab === 'watching') {
|
|
loadWatchingContentList();
|
|
} else if (tab === 'completed') {
|
|
loadCompletedContentList();
|
|
} else if (tab === 'saved') {
|
|
loadSavedContentList();
|
|
}
|
|
|
|
console.log('[초기 활성 탭 재렌더링]', tab);
|
|
}
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|