hmw1001
102 lines
3.9 KiB
JavaScript
102 lines
3.9 KiB
JavaScript
// 💡 [핵심 수정] 모든 로직을 초기화 함수 안으로 옮기고, 모듈의 고유 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; |