166 lines
5.5 KiB
PHP
166 lines
5.5 KiB
PHP
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<?php include(__DIR__ . "/_include/_head.php") ?>
|
|
<link rel="stylesheet" type="text/css" href="/css/main.css" />
|
|
</head>
|
|
<body>
|
|
<div class="wrap"></div>
|
|
|
|
<!-- 메인 페이지 스크립트 (의존성 순서 유지하며 defer로 비동기 로드) -->
|
|
<script src="/js/main/Videomodalmanager.js" defer></script>
|
|
<script>
|
|
// defer 스크립트가 로드된 후 실행되도록 DOMContentLoaded 사용
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const videos = [
|
|
{
|
|
id: 1,
|
|
url: "Qjig6SHwZyE",
|
|
category: "리더십",
|
|
subcate: "코칭",
|
|
bookmark: true,
|
|
title: "목표관리, 성과관리의 차이? 더 중요한 것은?",
|
|
picker: "홍길동",
|
|
type: "main",
|
|
keywords: ["소통", "건강"],
|
|
gauge: 8,
|
|
},
|
|
{
|
|
id: 2,
|
|
url: "a2l1uZfsRi0",
|
|
category: "인사이트",
|
|
subcate: "경제와사회",
|
|
bookmark: false,
|
|
title: "회계를 조금이라도 이해하면 인생이 달라지는 이유",
|
|
picker: "",
|
|
type: "comment",
|
|
keywords: ["소통", "코칭"],
|
|
gauge: 80,
|
|
},
|
|
{
|
|
id: 3,
|
|
url: "8MugD6Cwhl8",
|
|
category: "온보딩",
|
|
subcate: "축적의 시간",
|
|
bookmark: false,
|
|
title: "축적의 시간 - 착각의 시간",
|
|
picker: "",
|
|
type: "onboarding",
|
|
keywords: ["마인드셋", "자기개발"],
|
|
gauge: 35,
|
|
},
|
|
{
|
|
id: 4,
|
|
url: "Py7nutVN53s",
|
|
category: "법정교육",
|
|
subcate: "",
|
|
title: "개인정보보호",
|
|
type: "learning",
|
|
keywords: ["안전", "중간관리자"],
|
|
},
|
|
];
|
|
|
|
// 비디오 모달 매니저 초기화
|
|
const modalManager = new VideoModalManager({
|
|
videos: videos,
|
|
});
|
|
|
|
// 모달 매니저 초기화
|
|
modalManager.init();
|
|
|
|
// ========================================
|
|
// URL 파라미터로 모달 자동 오픈
|
|
// ========================================
|
|
|
|
// VideoModalManager는 각 비디오의 type에 따라 자동으로 다른 모달 HTML을 로드합니다:
|
|
// ?video=1 (type: "main") → ./_modal/video.html
|
|
// ?video=2 (type: "comment") → ./_modal/video-comment.html
|
|
// ?video=3 (type: "onboarding") → ./_modal/video-onboarding.html
|
|
// ?video=4 (type: "learning") → ./_modal/video-learning.html
|
|
// ?keyword=true → ./_modal/keyword.html
|
|
|
|
// 키워드 모달 Ajax 로드 함수
|
|
async function loadKeywordModal() {
|
|
try {
|
|
const response = await fetch("/skin/_modal/keyword.php");
|
|
if (!response.ok) {
|
|
throw new Error("키워드 모달 로드 실패");
|
|
}
|
|
|
|
const modalHTML = await response.text();
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(modalHTML, "text/html");
|
|
const modalElement = doc.querySelector(".modal.keyword");
|
|
|
|
if (!modalElement) {
|
|
throw new Error("키워드 모달 요소를 찾을 수 없습니다");
|
|
}
|
|
|
|
// DOM에 추가
|
|
document.body.appendChild(modalElement);
|
|
|
|
// 모달 표시
|
|
setTimeout(() => {
|
|
modalElement.style.display = "block";
|
|
}, 50);
|
|
|
|
// 닫기 이벤트 설정
|
|
setupKeywordModalCloseEvents(modalElement);
|
|
} catch (error) {
|
|
console.error("키워드 모달 로드 오류:", error);
|
|
alert("키워드 모달을 로드하는 중 오류가 발생했습니다.");
|
|
}
|
|
}
|
|
|
|
// 키워드 모달 닫기 이벤트 (ModalUtils 활용)
|
|
function setupKeywordModalCloseEvents(modal) {
|
|
// ModalUtils를 사용하여 공통 닫기 이벤트 설정
|
|
ModalUtils.setupCloseEvents(modal, {
|
|
closeSelector: ".ico-check", // 키워드 모달은 .ico-check를 닫기 버튼으로 사용
|
|
onClose: () => {
|
|
ModalUtils.remove(modal, { duration: 300 });
|
|
},
|
|
});
|
|
}
|
|
|
|
function checkURLParamsAndOpenModal() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
// 비디오 모달 오픈: ?video=1
|
|
const videoId = urlParams.get("video");
|
|
if (videoId) {
|
|
const id = parseInt(videoId);
|
|
if (!isNaN(id)) {
|
|
const video = videos.find((v) => v.id === id);
|
|
if (video) {
|
|
console.log(
|
|
`비디오 모달 자동 오픈: ID ${id}, Type: ${video.type}`
|
|
);
|
|
setTimeout(() => {
|
|
modalManager.loadVideoModal(id);
|
|
}, 500);
|
|
} else {
|
|
console.error(`비디오 ID ${id}를 찾을 수 없습니다.`);
|
|
}
|
|
return; // 비디오 모달 열면 종료
|
|
}
|
|
}
|
|
|
|
// 키워드 모달 오픈: ?keyword=true
|
|
const openKeyword = urlParams.get("keyword");
|
|
if (openKeyword === "true") {
|
|
console.log("키워드 모달 자동 오픈 (Ajax 로드)");
|
|
setTimeout(() => {
|
|
loadKeywordModal();
|
|
}, 500);
|
|
return; // 키워드 모달 열면 종료
|
|
}
|
|
}
|
|
|
|
// 페이지 로드 완료 후 URL 파라미터 체크
|
|
window.addEventListener("DOMContentLoaded", checkURLParamsAndOpenModal);
|
|
}); // DOMContentLoaded 종료
|
|
</script>
|
|
</body>
|
|
</html>
|