dnssash/theme/rd.dnssash/rb.custom/main_visual_section/module.js

// 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();
};