// ๐Ÿ’ก [ํ•ต์‹ฌ ์ˆ˜์ •] ๋ชจ๋“  ๋กœ์ง์„ ์ดˆ๊ธฐํ™” ํ•จ์ˆ˜ ์•ˆ์œผ๋กœ ์˜ฎ๊ธฐ๊ณ , ๋ชจ๋“ˆ์˜ ๊ณ ์œ  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 = '

๊ธฐ์ˆ  ์ž๋ฃŒ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐ ์‹คํŒจํ–ˆ์Šต๋‹ˆ๋‹ค.

'; return; } if (!patentsData || patentsData.length === 0) { patentGrid.innerHTML = '

ํ‘œ์‹œํ•  ๊ธฐ์ˆ  ์ž๋ฃŒ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

'; return; } const patentCardsHTML = patentsData.map(item => `
${item.title}

${item.title}

${item.description}

`).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;