Initial commit: 교육 프로젝트 배포
This commit is contained in:
송대일
@@ -0,0 +1,665 @@
|
||||
/**
|
||||
* =====================
|
||||
* 사용페이지 : 마이페이지
|
||||
* 작 성 자 : 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);
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user