Initial commit: 교육 프로젝트 배포

2026-07-01 18:32:42 +09:00
commit be6dccd120
1483 changed files with 5082202 additions and 0 deletions
@@ -0,0 +1,165 @@
+<!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>