first commit 2

2026-06-11 18:47:38 +09:00
parent c768729ce6
commit 6f534e33a6
11095 changed files with 1595758 additions and 0 deletions
@@ -0,0 +1,78 @@
+// 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;