모바일 상단 메뉴 터치 환경 개선#1

2025-12-19 10:59:32 +09:00
parent cbf5dc646a
commit 691dd1c3a9
1 changed files with 57 additions and 2 deletions
--- 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;
+      }
    </style>
 </head>
 <body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900">
@@ -170,7 +176,7 @@
                </div>

                <!-- Mobile Hamburger Button -->
-                <button id="mobile-menu-button" class="md:hidden p-2 rounded-lg text-slate-600 hover:bg-slate-100 transition-colors" onclick="toggleMobileMenu()">
+                <button id="mobile-menu-button" class="md:hidden p-2 rounded-lg text-slate-600 hover:bg-slate-100 active:bg-slate-200 transition-colors touch-manipulation">
                    <i data-lucide="menu" class="w-6 h-6" id="menu-icon"></i>
                    <i data-lucide="x" class="w-6 h-6 hidden" id="close-icon"></i>
                </button>
@@ -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();
    </script>