// 헤더에서 현재 URL과 매칭되는 메뉴의 서브메뉴 데이터 추출 function extractCurrentSubMenuData(currentPath) { if (currentPath === "/" || currentPath === "") { return null; } const menuItems = document.querySelectorAll( ".site-navs .navs-item.has-children" ); for (const menuItem of menuItems) { const subMenuLinks = menuItem.querySelectorAll( ".nav-submenu .navs-item .nav-link" ); const hasMatchingLink = Array.from(subMenuLinks).some((link) => { const href = link.getAttribute("href"); if (!href) return false; // 쿼리스트링 제거 후 경로만 비교 const hrefPath = href.split("?")[0]; // 정확히 일치하거나, 해당 경로로 시작하는 경우 (하위 페이지 포함) return ( currentPath === href || currentPath === hrefPath || currentPath.startsWith(hrefPath + "/") ); }); if (hasMatchingLink) { const items = Array.from(subMenuLinks).map((link) => ({ name: link.querySelector(".nav-text").textContent.trim(), href: link.getAttribute("href"), target: link.getAttribute("target") || "", })); return { items }; } } return null; } // 서브페이지 메뉴바 생성 함수 function createSubMenu() { const currentPath = window.location.pathname; const isMainPage = currentPath === "/" || currentPath === ""; // 메인페이지면 서브비쥬얼 표시 안함 if (isMainPage) return; const menuData = extractCurrentSubMenuData(currentPath); // 현재 페이지 이름과 부모 메뉴 이름 찾기 let currentPageName = ""; let parentMenuName = ""; const menuItems = document.querySelectorAll( ".site-navs .navs-item.has-children" ); for (const menuItem of menuItems) { const parentLink = menuItem.querySelector(".nav-link .nav-text"); const subMenuLinks = menuItem.querySelectorAll( ".nav-submenu .navs-item .nav-link" ); for (const link of subMenuLinks) { const href = link.getAttribute("href"); const hrefPath = href ? href.split("?")[0] : ""; // 정확히 일치하거나, 해당 경로로 시작하는 경우 (하위 페이지 포함) if ( currentPath === href || currentPath === hrefPath || currentPath.startsWith(hrefPath + "/") ) { currentPageName = link .querySelector(".nav-text") .textContent.trim(); parentMenuName = parentLink ? parentLink.textContent.trim() : ""; break; } } if (currentPageName) break; } // sub-visual HTML const subVisualHTML = `

`; // coming-soon 페이지 여부 확인 const isComingSoon = currentPath === "/coming-soon"; // page-title-area HTML (메뉴 매칭된 경우에만 표시) const pageTitleHTML = currentPageName || isComingSoon ? `

${ isComingSoon ? "Coming Soon" : currentPageName }

` : ""; // 탭 메뉴 HTML (메뉴 데이터가 있고, coming-soon이 아닌 경우에만 표시) const tabMenuHTML = menuData && menuData.items.length > 0 && !isComingSoon ? `

${item.name}

` : ""; const subMenuHTML = `

${subVisualHTML} ${pageTitleHTML} ${tabMenuHTML}

`; const header = document.querySelector(".header"); if (header) { header.insertAdjacentHTML("afterend", subMenuHTML); } } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", createSubMenu); } else { createSubMenu(); }