SamProject/sam-sales
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
김보곤
2025-12-19 10:59:32 +09:00
parent cbf5dc646a
commit 691dd1c3a9
1 changed files with 57 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.php
View File

@@ -124,6 +124,12 @@
cursor: pointer; cursor: pointer;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); 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> </style>
</head> </head>
<body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900"> <body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900">
@@ -170,7 +176,7 @@
</div> </div>
<!-- Mobile Hamburger Button --> <!-- 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="menu" class="w-6 h-6" id="menu-icon"></i>
<i data-lucide="x" class="w-6 h-6 hidden" id="close-icon"></i> <i data-lucide="x" class="w-6 h-6 hidden" id="close-icon"></i>
</button> </button>
@@ -884,7 +890,12 @@
}; };
// Mobile Menu Functions // Mobile Menu Functions
window.toggleMobileMenu = () => { window.toggleMobileMenu = (e) => {
if (e) {
e.preventDefault();
e.stopPropagation();
}
const mobileMenu = document.getElementById('mobile-menu'); const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = document.getElementById('menu-icon'); const menuIcon = document.getElementById('menu-icon');
const closeIcon = document.getElementById('close-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 // Close mobile menu when clicking outside
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
const mobileMenu = document.getElementById('mobile-menu'); 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 // Initialize
init(); init();
</script> </script>