// TODO: 'initBaseModule'을 고유한 함수 이름으로 변경하세요. (예: initNewsModule)
function initBaseModule(moduleId) {
const moduleElement = document.getElementById(moduleId);
if (!moduleElement || moduleElement.classList.contains('initialized')) {
return;
}
const section = moduleElement.querySelector('.base-section');
const itemGrid = moduleElement.querySelector('.item-grid');
const modal = moduleElement.querySelector('.image-modal');
if (!section || !itemGrid || !modal) {
return;
}
function renderGrid() {
const itemsJson = section.dataset.items;
let itemsData;
try {
itemsData = JSON.parse(itemsJson);
} catch (e) {
itemGrid.innerHTML = '
데이터를 불러오는 데 실패했습니다.
';
return;
}
if (!itemsData || itemsData.length === 0) {
itemGrid.innerHTML = '표시할 항목이 없습니다.
';
return;
}
const itemCardsHTML = itemsData.map(item => `
${item.title}
${item.description}
`).join('');
itemGrid.innerHTML = itemCardsHTML;
}
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');
function closeModal() {
modal.classList.remove('is-active');
}
itemGrid.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');
}
});
closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => (e.target === modal) && closeModal());
document.addEventListener('keydown', (e) => (e.key === 'Escape' && modal.classList.contains('is-active')) && closeModal());
}
renderGrid();
setupModalEvents();
moduleElement.classList.add('initialized');
}
// TODO: 'initBaseModule'을 고유한 함수 이름으로 변경하세요.
window.initBaseModule = initBaseModule;