Files
madeu_petit_home/src/main/resources/templates/web/layout/layoutHeader.html
2025-10-27 22:40:34 +09:00

109 lines
3.9 KiB
HTML

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="layoutHeader">
<th:block th:replace="/web/layout/layoutModal :: layoutModal"></th:block>
<link rel="stylesheet" href="/css/web/quick_menu/quick_menu.css">
<script>
// 디바이스 감지 함수
function isMobileDevice() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|| window.innerWidth <= 768;
}
// 카카오톡 상담 함수 (모든 디바이스에서 동작)
function openKakaoTalk() {
window.open('https://pf.kakao.com/_puZExd', '_blank');
}
// 전화걸기 함수 (모바일에서만 동작)
function makePhoneCall() {
if (isMobileDevice()) {
// 모바일에서만 전화걸기
window.location.href = 'tel:02-547-4711';
} else {
// 데스크톱에서는 동작 안함 (필요시 알림 추가)
console.log('전화걸기는 모바일에서만 가능합니다.');
}
}
function moveDietCenter(){
window.location.href="https://diet.madeu.co.kr/index";
}
// 모바일 여부 확인 함수
function isMobile() {
return window.innerWidth <= 768; // 필요 시 기준 너비 조정
}
// 현재 경로가 /index인지 확인
function isIndexPage() {
return window.location.pathname === '/index'; // '/index.html'인 경우 조정 필요
}
// 퀵메뉴 표시/숨김 함수
function toggleQuickMenu() {
const quickMenu = document.querySelector('.quick-menu-simple');
if (!quickMenu) return; // 요소가 없으면 종료
if (isMobile()) {
// 모바일: /index일 때만 표시
quickMenu.style.display = isIndexPage() ? '' : 'none';
} else {
// 데스크톱: 항상 표시
quickMenu.style.display = '';
}
}
function moveEvent(){
window.location.href="https://petit.madeu.co.kr/webevent/selectListWebEventIntro.do";
}
// 페이지 로드와 리사이즈 이벤트 연결
window.addEventListener('load', toggleQuickMenu);
window.addEventListener('resize', toggleQuickMenu);
</script>
<header>
<div class="inner_wrap">
<button class="mb mbmenu" onClick="openNav()"></button>
<a class="logo" href="/index"><img src="/image/logo_199x54.png" alt="logo"></a>
<nav>
<ul class="depth1">
<li th:each="menu : ${menuList}">
<a class="mmenu" th:href="${menu.menuUrl}" th:text="${menu.menuName}"></a>
<ul class="depth2" th:if="${#lists.size(menu.children) > 0}">
<li></li>
<li th:each="subMenu : ${menu.children}">
<a th:href="${subMenu.menuUrl}" th:text="${subMenu.menuName}"></a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<!-- 퀵메뉴 -->
<div class="quick-menu-simple">
<div class="quick-item" onclick="moveEvent()">
<img src="/image/quick_menu/event.png" alt="이벤트">
</div>
<!-- 다이어트센터 -->
<div class="quick-item" onclick="moveDietCenter()">
<img src="/image/quick_menu/diet_center.png" alt="다이어트센터">
</div>
<!-- 카카오톡 상담 -->
<div class="quick-item kakao-consult" onclick="openKakaoTalk()">
<img src="/image/quick_menu/kakao_consultation.png" alt="카카오톡 상담">
</div>
<!-- 전화 상담 -->
<div class="quick-item phone-consult" onclick="makePhoneCall()">
<div class="phone-default">
<img src="/image/quick_menu/call_consultation.png" alt="전화 상담">
</div>
<div class="phone-number">
<img src="/image/quick_menu/madeu_phone_number.png" alt="전화 상담">
</div>
</div>
</div>
<script src="/js/web/layout/layoutHeader.js?ver=1"></script>
</th:block>
</html>