ㅓㅏ

<script>
(function() {
    const LOG_PREFIX = '[TabKeyNav]';

    function log(...args) {
        console.log(LOG_PREFIX, ...args);
    }

    function warn(...args) {
        console.warn(LOG_PREFIX, ...args);
    }

    function initTabKeyNav() {
        log('초기화 시작...');

        const container = document.querySelector('.include-tab');
        if (!container) {
            warn('.include-tab 컨테이너를 찾지 못함 → 500ms 후 재시도');
            setTimeout(initTabKeyNav, 500);
            return;
        }
        log('.include-tab 컨테이너 발견:', container);

        const tabList = container.querySelector('ul.mx-tabcontainer-tabs');
        if (!tabList) {
            warn('ul.mx-tabcontainer-tabs를 찾지 못함 → 500ms 후 재시도');
            setTimeout(initTabKeyNav, 500);
            return;
        }
        log('탭 리스트 발견:', tabList);

        const tabItems = Array.from(tabList.querySelectorAll('li'));
        log(`탭 항목 ${tabItems.length}개 발견, tabindex 부여 중...`);

        tabItems.forEach((li, index) => {
            const anchor = li.querySelector('a') || li;
            anchor.setAttribute('tabindex', '0');
            log(`  탭[${index}] tabindex 설정:`, anchor.textContent.trim());
        });

        log('keydown 이벤트 리스너 등록 완료');

        container.addEventListener('keydown', function(e) {
            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;

            const focused = document.activeElement;
            const tag = focused ? focused.tagName : '';

            if (['INPUT', 'TEXTAREA', 'SELECT'].includes(tag)) {
                log(`포커스가 ${tag}에 있어 방향키 네비게이션 무시`);
                return;
            }

            const currentTabItems = Array.from(tabList.querySelectorAll('li'));
            if (currentTabItems.length === 0) {
                warn('탭 항목이 없음');
                return;
            }

            const activeIndex = currentTabItems.findIndex(li => li.classList.contains('active'));
            if (activeIndex === -1) {
                warn('active 탭을 찾을 수 없음');
                return;
            }

            log(`현재 active 탭 인덱스: ${activeIndex}, 키 입력: ${e.key}`);

            let nextIndex;
            if (e.key === 'ArrowLeft') {
                nextIndex = activeIndex > 0 ? activeIndex - 1 : currentTabItems.length - 1;
            } else {
                nextIndex = activeIndex < currentTabItems.length - 1 ? activeIndex + 1 : 0;
            }

            log(`이동할 탭 인덱스: ${nextIndex}`);

            const nextTab = currentTabItems[nextIndex].querySelector('a') || currentTabItems[nextIndex];
            log(`탭 전환 → "${nextTab.textContent.trim()}"`);

            nextTab.click();
            nextTab.focus();

            e.preventDefault();
        });

        log('초기화 완료 ✅');
    }

    if (document.readyState === 'complete') {
        log('문서 로드 완료 상태 → 즉시 실행');
        initTabKeyNav();
    } else {
        log('문서 로드 대기 중 → load 이벤트 후 실행');
        window.addEventListener('load', initTabKeyNav);
    }
})();
</script>