hmw1001
78 lines
2.8 KiB
JavaScript
78 lines
2.8 KiB
JavaScript
// 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 = '<p>데이터를 불러오는 데 실패했습니다.</p>';
|
|
return;
|
|
}
|
|
|
|
if (!itemsData || itemsData.length === 0) {
|
|
itemGrid.innerHTML = '<p>표시할 항목이 없습니다.</p>';
|
|
return;
|
|
}
|
|
|
|
const itemCardsHTML = itemsData.map(item => `
|
|
<div class="item-card js-modal-trigger" data-title="${item.title}" data-desc="${item.description}" data-img="${item.image}">
|
|
<div class="item-image">
|
|
<img src="${item.image}" alt="${item.title}">
|
|
</div>
|
|
<div class="item-info">
|
|
<h3>${item.title}</h3>
|
|
<p>${item.description}</p>
|
|
</div>
|
|
</div>
|
|
`).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; |