[260204] OG 정보 추가, 모달 오픈시 히스토리백 기능 적용

scripts/modal.js

@@ -136,8 +136,11 @@ export function openModal(id) {
         };
     }
 
+    window.history.pushState({ modalOpen: true }, '', '');
+
     modal.classList.remove('hidden');
-    document.body.style.overflow = 'hidden';
+    // document.body.style.overflow = 'hidden';
+    document.body.classList.add('modal-open');
 
     const container = document.getElementById('modal-main-carousel-container');
     container.style.scrollBehavior = 'auto';
@@ -148,7 +151,25 @@ export function openModal(id) {
 
 export function closeModal() {
     document.getElementById('product-modal').classList.add('hidden');
-    document.body.style.overflow = 'auto';
+    document.body.classList.remove('modal-open');
+
+    if (window.history.state && window.history.state.modalOpen) {
+        window.history.back();
+    }
+
     const cleanUrl = window.location.origin + window.location.pathname;
     window.history.replaceState(null, '', cleanUrl);
 }
+
+// --- 뒤로가기 감지 이벤트 리스너 ---
+// 사용자가 브라우저 뒤로가기 버튼(또는 모바일 뒤로가기 제스처)을 누를 때 실행됩니다.
+window.addEventListener('popstate', (event) => {
+    const modal = document.getElementById('product-modal');
+    // 모달이 열려있는 상태에서 뒤로가기가 발생했다면 모달만 닫음
+    if (!modal.classList.contains('hidden')) {
+        // 이때 closeModal()을 호출하되, 이미 뒤로 이동한 상태이므로
+        // closeModal 내부의 history.back()이 중복 실행되지 않게 주의
+        modal.classList.add('hidden');
+        document.body.classList.remove('modal-open');
+    }
+});