').text(info.description || '').html().replace(/\n/g, '
');
$modal.find('#modalDesc').html(descHtml);
$modal.find('#modalCategoryName').text(info.categoryName || '리더십');
$modal.find('#modalSubCategory').text(info.subCategory || '');
$modal.find('#modalBadge').text(info.categoryName || '리더십');
// 추천영상 리스트
buildRecommendedList(info.contentId);
// 댓글 로드
loadComments(info.contentId);
resetCommentForm();
// 모달 표시
$modal.show();
$('body').css('overflow', 'hidden');
}
// ── 모달 닫기 (진행상황 저장 후 닫기) ──
function closeModal() {
// 마지막 시청 진행상황 저장
stopTracking();
if (ytPlayer && currentContentId && typeof ytPlayer.getCurrentTime === 'function') {
saveLearningProgress(Math.floor(lastSaveTime), 'N');
}
lastSaveTime = 0;
destroyYTPlayer();
$modal.hide();
$('body').css('overflow', '');
currentContentId = null;
editingCommentId = null;
}
$modal.on('click', '.close', closeModal);
$modal.on('click', function (e) {
if ($(e.target).hasClass('modal')) closeModal();
});
$(document).on('keydown', function (e) {
if (e.key === 'Escape' && $modal.is(':visible')) closeModal();
});
// ── 추천영상 리스트 구성 (현재 페이지 영상 목록 활용) ──
function buildRecommendedList(excludeContentId) {
var $list = $modal.find('#recommendedList');
$list.empty();
var count = 0;
$('#video-list .video-item').each(function () {
var $item = $(this);
var cid = $item.data('content-id') || $item.attr('data-content-id') || '';
if (!cid || String(cid) === String(excludeContentId)) return;
if (count >= 10) return false; // 최대 10개
var videoUrl = $item.data('content-url') || $item.attr('data-content-url') || '';
var title = $item.data('title') || $item.find('.item-title').text().trim() || '';
var catName = $item.data('category-name') || $item.find('.item-category').text().trim() || '리더십';
var thumbSrc = $item.find('.item-thumb img, .thumb img').attr('src') || '/edu/img/video/img_thumb_01.png';
var desc = String($item.data('description') || '');
var subCat = $item.data('sub-category') || '';
var wTm = parseInt($item.data('watch-tm') || $item.attr('data-watch-tm') || '0', 10);
var cTm = parseInt($item.data('content-tm') || $item.attr('data-content-tm') || '0', 10);
var li =
'
' +
'' +
'' +
'' +
'
' + catName + '
' +
'
' + title + '
' +
'
';
$list.append(li);
count++;
});
if (count === 0) {
$list.html('
추천 영상이 없습니다.');
}
}
// ── 추천영상 클릭 → 영상 전환 ──
$modal.on('click', '#recommendedList .list', function (e) {
e.preventDefault();
var $a = $(this);
// 현재 영상 진행상황 저장 후 전환
stopTracking();
if (ytPlayer && currentContentId && typeof ytPlayer.getCurrentTime === 'function') {
saveLearningProgress(Math.floor(lastSaveTime), 'N');
}
lastSaveTime = 0;
openModal({
contentId: $a.data('content-id'),
videoUrl: $a.data('content-url') || '',
title: $a.data('title') || $a.find('.title').text().trim(),
description: $a.data('description') || '',
categoryName: $a.data('category-name') || '리더십',
subCategory: $a.data('sub-category') || '',
watchTm: parseInt($a.data('watch-tm') || '0', 10),
contentTm: parseInt($a.data('content-tm') || '0', 10)
});
});
// ══════════════════════════════════════════════
// 댓글 CRUD
// ══════════════════════════════════════════════
// ── 댓글 목록 로드 ──
function loadComments(contentId) {
var $commentList = $modal.find('.comment-list');
if (!contentId) return;
$.getJSON(API_BASE + '/get_comments.php', { content_id: contentId })
.done(function (data) {
if (data.success && Array.isArray(data.data)) {
renderComments(data.data);
} else {
$commentList.html('
등록된 댓글이 없습니다.');
}
})
.fail(function () {
$commentList.html('
댓글을 불러올 수 없습니다.');
});
}
// ── 댓글 렌더링 (온보딩 모달 동일 구조) ──
function renderComments(comments) {
var $commentList = $modal.find('.comment-list');
if (!comments.length) {
$commentList.html('
등록된 댓글이 없습니다.');
return;
}
var userIconSvg = '
';
var html = comments.map(function (c) {
var safeComment = (c.comment || '')
.replace(/&/g, '&').replace(//g, '>')
.replace(/\n/g, '
');
var safeName = (c.member_name || '익명')
.replace(/&/g, '&').replace(//g, '>');
var buttons = c.is_author
? ''
: '';
return '
' +
'' +
'' +
'' +
buttons +
'
' +
'' +
'';
}).join('');
$commentList.html(html);
}
// ── 댓글 수정 ──
$modal.on('click', '.btn-edit', function () {
var $li = $(this).closest('li');
var content = $li.find('.comment-content').text();
editingCommentId = $(this).data('id');
var $textarea = $modal.find('.comment-box textarea');
$textarea.val(content).focus();
$modal.find('.btn-cancel').prop('disabled', false);
$modal.find('.btn-save').prop('disabled', false).text('수정');
});
// ── 댓글 삭제 ──
$modal.on('click', '.btn-delete', function () {
if (!confirm('댓글을 삭제하시겠습니까?')) return;
var commentId = $(this).data('id');
$.ajax({
url: API_BASE + '/delete_comment.php',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ id: commentId }),
success: function (data) {
if (data.success) {
loadComments(currentContentId);
} else {
alert(data.message || '삭제에 실패했습니다.');
}
},
error: function () { alert('삭제 중 오류가 발생했습니다.'); }
});
});
// ── 댓글 작성/수정 저장 ──
$modal.on('click', '.comment-box .btn-save', function () {
var $textarea = $modal.find('.comment-box textarea');
var comment = $textarea.val().trim();
if (!comment || !currentContentId) return;
var payload = { content_id: currentContentId, comment: comment };
if (editingCommentId) payload.id = editingCommentId;
$.ajax({
url: API_BASE + '/save_comment.php',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(payload),
success: function (data) {
if (data.success) {
resetCommentForm();
loadComments(currentContentId);
} else {
alert(data.message || '저장에 실패했습니다.');
}
},
error: function () { alert('저장 중 오류가 발생했습니다.'); }
});
});
// ── 댓글 취소 ──
$modal.on('click', '.comment-box .btn-cancel', function () {
resetCommentForm();
});
// ── textarea 입력 → 버튼 활성화 ──
$modal.on('input', '.comment-box textarea', function () {
var hasText = $(this).val().trim().length > 0;
$modal.find('.btn-cancel').prop('disabled', !hasText);
$modal.find('.btn-save').prop('disabled', !hasText);
});
function resetCommentForm() {
$modal.find('.comment-box textarea').val('');
$modal.find('.btn-cancel').prop('disabled', true);
$modal.find('.btn-save').prop('disabled', true).text('등록');
editingCommentId = null;
}
});