diff --git a/html/assets/images/icons/icons.svg b/html/assets/images/icons/icons.svg
index 627cc33..8c1750a 100644
--- a/html/assets/images/icons/icons.svg
+++ b/html/assets/images/icons/icons.svg
@@ -35,17 +35,17 @@
-
+
-
- {
// ============================================================
// 메뉴 토글
// ============================================================
- const menuBtn = document.querySelector('.menu-btn');
- const navMenu = document.querySelector('.nav-menu');
+ const menuBtn = document.querySelector('#mobile-menu-btn');
+ const navMenu = document.querySelector('#mobile-menu');
+ const closeBtn = document.querySelector('#close-menu-btn');
if (menuBtn && navMenu) {
+ // 메뉴열기
menuBtn.addEventListener('click', () => {
- navMenu.classList.toggle('open');
+ navMenu.classList.remove('translate-x-full');
menuBtn.classList.toggle('open');
});
+ //메뉴닫기
+ if (closeBtn) {
+ closeBtn.addEventListener('click', () => {
+ navMenu.classList.add('translate-x-full');
+ });
+ }
+ //메뉴 링크 클릭 시 닫기
+ navMenu.querySelectorAll('a').forEach(link => {
+ link.addEventListener('click',() => {
+ navMenu.classList.add('translate-x-full');
+ });
+ });
}
// ============================================================
diff --git a/html/assets/js/모바일메뉴 사라짐.md b/html/assets/js/모바일메뉴 사라짐.md
new file mode 100644
index 0000000..cc5adce
--- /dev/null
+++ b/html/assets/js/모바일메뉴 사라짐.md
@@ -0,0 +1,198 @@
+모바일 메뉴가 동작하지 않는 문제를 찾았습니다! 🔍
+🔴 문제점 발견
+1. 클래스명 불일치 (가장 큰 문제!)
+script.js:
+javascriptconst menuBtn = document.querySelector('.menu-btn'); // ❌ .menu-btn
+const navMenu = document.querySelector('.nav-menu'); // ❌ .nav-menu
+index.html:
+html
+
+
+→ .menu-btn과 .nav-menu 클래스가 HTML에 없습니다!
+
+2. 닫기 버튼도 작동 안 함
+script.js:
+javascriptdocument.querySelectorAll('.modal .close-btn').forEach(btn => {
+ // ❌ .close-btn 클래스를 찾지만...
+});
+index.html:
+html
+
+
+3. 이벤트 핸들러 중복
+script.js 하단:
+javascript// 메뉴 토글 코드가 있는데...
+const menuBtn = document.querySelector('.menu-btn');
+index.html 하단:
+html
+
+📋 문제 요약
+요소script.js에서 찾는 것index.html 실제메뉴 버튼.menu-btn#mobile-menu-btn (클래스 없음)메뉴.nav-menu#mobile-menu (클래스 없음)닫기 버튼.modal .close-btn#close-menu-btn (클래스 없음)
+
+✅ 해결 방법 (3가지 옵션)
+옵션 1: script.js 수정 (권장)
+ID로 찾도록 변경:
+javascriptconst menuBtn = document.querySelector('#mobile-menu-btn'); // ID로 변경
+const navMenu = document.querySelector('#mobile-menu'); // ID로 변경
+옵션 2: index.html 수정
+클래스 추가:
+html