// main_visual_section 모듈을 위한 JavaScript (ES6+ 버전) window.initMainVisualModule = function(moduleId) { const mainVisualModule = document.getElementById(moduleId); if (!mainVisualModule) { console.warn(`Main Visual Module (ID: ${moduleId}) 요소를 찾을 수 없습니다.`); return; } const menuItems = mainVisualModule.querySelectorAll('.main-visual-right .menu-item'); const rightMenuRollingEnabled = mainVisualModule.dataset.rightMenuRolling === 'true'; const rightMenuRollingTime = parseInt(mainVisualModule.dataset.rightMenuRollingTime, 10) || 0; const rightMenuVisibleItems = parseInt(mainVisualModule.dataset.rightMenuVisibleItems, 10) || 5; const rightMenuItemHeightPx = parseInt(mainVisualModule.dataset.rightMenuItemHeightPx, 10) || 92; let currentActiveIndex = 0; let rightMenuAutoRollingInterval; // 오른쪽 메뉴 롤링 인터벌 const menuList = mainVisualModule.querySelector('.main-visual-right .menu-list'); if (menuList) { menuItems.forEach(item => { item.style.height = `${rightMenuItemHeightPx}px`; }); let actualMenuListHeight = 0; menuItems.forEach(item => { actualMenuListHeight += item.offsetHeight; }); if (rightMenuRollingEnabled) { menuList.style.height = `${rightMenuVisibleItems * rightMenuItemHeightPx}px`; } else { menuList.style.height = `${actualMenuListHeight}px`; menuList.classList.add('static-menu'); } mainVisualModule.style.height = menuList.style.height; } function activateLeftContent(index) { menuItems.forEach(item => item.classList.remove('active')); if (menuItems[index]) { menuItems[index].classList.add('active'); } currentActiveIndex = index; mainVisualModule.querySelectorAll('.main-visual-left .content-group').forEach(group => { group.style.display = 'none'; }); const targetBoardId = menuItems[index].dataset.id; const targetContentGroup = mainVisualModule.querySelector(`.main-visual-left .content-group[data-id="${targetBoardId}"]`); if (targetContentGroup) { targetContentGroup.style.display = 'block'; const leftContentType = menuItems[index].dataset.leftContentType; const leftContentRollingTime = parseInt(menuItems[index].dataset.leftContentRollingTime, 10) || 0; if (leftContentType === 'slider') { const targetHeadmainWrap = targetContentGroup.querySelector('.headmain_wrap'); if (targetHeadmainWrap) { targetHeadmainWrap.style.display = 'block'; const targetSliderContainer = targetHeadmainWrap.querySelector(`.headmain-slider-${targetBoardId}`); if (targetSliderContainer) { if (typeof jQuery !== 'undefined' && jQuery.fn.cycle) { if (jQuery(targetSliderContainer).data('cycle.opts')) { jQuery(targetSliderContainer).cycle('destroy'); } // 💡 [핵심] Cycle2가 prev/next 옵션을 통해 버튼을 직접 제어하도록 위임합니다. jQuery(targetSliderContainer).cycle({ fx: 'scrollHorz', timeout: leftContentRollingTime, slides: '> .main_visual', prev: jQuery(targetHeadmainWrap).find('.btn_left'), next: jQuery(targetHeadmainWrap).find('.btn_right'), log: false }); } else { console.warn("jQuery Cycle2 라이브러리가 로드되지 않았습니다. 슬라이더 기능이 작동하지 않습니다."); } } } } } } function startRightMenuRolling() { if (!rightMenuRollingEnabled) return; stopRightMenuRolling(); rightMenuAutoRollingInterval = setInterval(() => { let nextIndex = (currentActiveIndex + 1) % menuItems.length; if (typeof jQuery !== 'undefined' && jQuery.fn.cycle) { jQuery('.main-visual-right .menu-list').cycle('goto', nextIndex); } activateLeftContent(nextIndex); }, rightMenuRollingTime); } function stopRightMenuRolling() { clearInterval(rightMenuAutoRollingInterval); } menuItems.forEach((menuItem, index) => { menuItem.addEventListener('click', (e) => { const linkToBoard = menuItem.dataset.linkToBoard === 'true'; if (rightMenuRollingEnabled || !linkToBoard) { e.preventDefault(); } activateLeftContent(index); stopRightMenuRolling(); if (rightMenuRollingEnabled && typeof jQuery !== 'undefined' && jQuery.fn.cycle) { jQuery('.main-visual-right .menu-list').cycle('goto', index); } }); }); // 💡 [최종 수정] 불필요하고 충돌을 일으키는 수동 버튼 제어 로직을 완전히 제거합니다. /* mainVisualModule.querySelectorAll('.headmain_wrap .btn_left').forEach(btn => { btn.addEventListener('click', () => { ... }); }); mainVisualModule.querySelectorAll('.headmain_wrap .btn_right').forEach(btn => { btn.addEventListener('click', () => { ... }); }); */ mainVisualModule.addEventListener('mouseenter', stopRightMenuRolling); mainVisualModule.addEventListener('mouseleave', startRightMenuRolling); if (rightMenuRollingEnabled && typeof jQuery !== 'undefined' && jQuery.fn.cycle) { jQuery('.main-visual-right .menu-list').cycle({ fx: 'carousel', timeout: rightMenuRollingTime, slides: '> li', vertical: true, carouselVisible: rightMenuVisibleItems, allowWrap: true, log: false }); jQuery('.main-visual-right .menu-list').on('cycle-before', (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) => { const incomingIndex = jQuery(incomingSlideEl).index(); activateLeftContent(incomingIndex); }); } activateLeftContent(0); startRightMenuRolling(); };