diff --git a/index.php b/index.php index 01840d1..04b2b70 100644 --- a/index.php +++ b/index.php @@ -124,6 +124,12 @@ cursor: pointer; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); } + + /* Mobile touch optimization */ + .touch-manipulation { + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + } @@ -170,7 +176,7 @@ - @@ -884,7 +890,12 @@ }; // Mobile Menu Functions - window.toggleMobileMenu = () => { + window.toggleMobileMenu = (e) => { + if (e) { + e.preventDefault(); + e.stopPropagation(); + } + const mobileMenu = document.getElementById('mobile-menu'); const menuIcon = document.getElementById('menu-icon'); const closeIcon = document.getElementById('close-icon'); @@ -922,6 +933,37 @@ } }; + // Mobile menu button event listeners + // 스크립트가 body 끝에 있으므로 DOM은 이미 로드됨 + (function setupMobileMenuButton() { + const mobileMenuButton = document.getElementById('mobile-menu-button'); + + if (mobileMenuButton) { + // 터치 이벤트와 클릭 이벤트 모두 처리 + let touchStartTime = 0; + + mobileMenuButton.addEventListener('touchstart', (e) => { + touchStartTime = Date.now(); + e.stopPropagation(); + }, { passive: true }); + + mobileMenuButton.addEventListener('touchend', (e) => { + e.preventDefault(); + e.stopPropagation(); + // 빠른 터치만 처리 (300ms 이내) + if (Date.now() - touchStartTime < 300) { + toggleMobileMenu(e); + } + }, { passive: false }); + + mobileMenuButton.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + toggleMobileMenu(e); + }); + } + })(); + // Close mobile menu when clicking outside document.addEventListener('click', (e) => { const mobileMenu = document.getElementById('mobile-menu'); @@ -935,6 +977,19 @@ } }); + // Close mobile menu on touch outside (for mobile) + document.addEventListener('touchstart', (e) => { + const mobileMenu = document.getElementById('mobile-menu'); + const mobileMenuButton = document.getElementById('mobile-menu-button'); + + if (mobileMenu && mobileMenuButton && + !mobileMenu.classList.contains('hidden') && + !mobileMenu.contains(e.target) && + !mobileMenuButton.contains(e.target)) { + closeMobileMenu(); + } + }); + // Initialize init();