first commit 2

theme/rb.basic/rb.custom/tech_section/module.js

@@ -0,0 +1,102 @@
+// 💡 [핵심 수정] 모든 로직을 초기화 함수 안으로 옮기고, 모듈의 고유 ID를 인자로 받도록 변경합니다.
+function initTechSectionModule(moduleId) {
+    // 💡 [핵심 수정] document가 아닌, 전달받은 moduleId를 기준으로 요소를 찾습니다.
+    const moduleElement = document.getElementById(moduleId);
+    if (!moduleElement) return;
+
+    // 이미 초기화된 모듈은 다시 실행하지 않습니다.
+    if (moduleElement.classList.contains('initialized')) {
+        return;
+    }
+
+    const section = moduleElement.querySelector('.products-trend-section');
+    const patentGrid = moduleElement.querySelector('.product-grid');
+    const modal = moduleElement.querySelector('.image-modal');
+
+    if (!section || !patentGrid || !modal) {
+        console.error('Module elements not found in:', moduleId);
+        return;
+    }
+
+    /**
+     * 그리드에 특허 카드를 렌더링하는 함수
+     */
+    function renderGrid() {
+        const patentsJson = section.dataset.patents;
+        let patentsData;
+
+        try {
+            patentsData = JSON.parse(patentsJson);
+        } catch (e) {
+            patentGrid.innerHTML = '<p style="text-align:center; padding: 40px 0; color: #d9534f;">기술 자료를 불러오는 데 실패했습니다.</p>';
+            return;
+        }
+
+        if (!patentsData || patentsData.length === 0) {
+            patentGrid.innerHTML = '<p style="text-align:center; padding: 40px 0; color: #888;">표시할 기술 자료가 없습니다.</p>';
+            return;
+        }
+
+        const patentCardsHTML = patentsData.map(item => `
+            <div class="product-card-trend js-modal-trigger" data-title="${item.title}" data-desc="${item.description}" data-img="${item.image}">
+                <div class="product-image-trend is-patent">
+                    <img src="${item.image}" alt="${item.title}">
+                </div>
+                <div class="product-info-trend">
+                    <h3>${item.title}</h3>
+                    <p>${item.description}</p>
+                </div>
+            </div>
+        `).join('');
+
+        patentGrid.innerHTML = patentCardsHTML;
+    }
+
+    /**
+     * 모달 관련 이벤트를 설정하는 함수
+     */
+    function setupModalEvents() {
+        const modalImage = modal.querySelector('.modal-image');
+        const modalTitle = modal.querySelector('.modal-title');
+        const modalDesc = modal.querySelector('.modal-desc');
+        const closeBtn = modal.querySelector('.close-btn');
+
+        // 모달 열기 (이벤트 위임)
+        patentGrid.addEventListener('click', function(event) {
+            const card = event.target.closest('.js-modal-trigger');
+            if (card) {
+                modalImage.src = card.dataset.img;
+                modalTitle.textContent = card.dataset.title;
+                modalDesc.textContent = card.dataset.desc;
+                modal.classList.add('is-active');
+            }
+        });
+
+        // 모달 닫기 함수
+        function closeModal() {
+            modal.classList.remove('is-active');
+        }
+
+        // 이벤트 리스너 등록
+        closeBtn.addEventListener('click', closeModal);
+        modal.addEventListener('click', function(event) {
+            if (event.target === modal) closeModal();
+        });
+        // ESC 키 이벤트는 document에 등록해야 하므로, 모달이 활성화 상태일 때만 동작하도록 조건 추가
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape' && modal.classList.contains('is-active')) {
+                closeModal();
+            }
+        });
+    }
+
+    // 함수 실행
+    renderGrid();
+    setupModalEvents();
+
+    // 초기화 완료 클래스 추가
+    moduleElement.classList.add('initialized');
+}
+
+// 💡 [핵심 수정] 다른 곳에서 이 함수를 다시 호출할 수 있도록 전역에 노출시킵니다.
+window.initTechSectionModule = initTechSectionModule;