fix: 스와이프 문제

src/layout/Header/MobilePanel/MobilePanel.module.scss

@@ -76,6 +76,10 @@
     &--show {
       transform: translateX(0);
     }
+
+    &--transition-prevented {
+      transition: none;
+    }
   }
 
   &__user {

src/layout/Header/MobilePanel/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -55,59 +55,58 @@ export default function MobilePanel() {
   const { isMobile } = useMediaQuery();
   const { user } = useCoopMe();
   const { logout } = useLogout();
+  const [transitionPrevented, setTransitionPrevented] = useState(false);
 
   const {
-    isMenuOpen: isMobileMenuOpen,
-    openMenu,
-    closeMenu,
+    isMenuOpen: isMobileMenuOpen, openMenu, closeMenu,
   } = useMobileMenu(pathname, isMobile);
 
   const handleMenuClick = () => {
-    if (!isMobileMenuOpen) {
-      window.history.pushState({ menuOpen: true }, '');
-    }
+    window.history.pushState({ menuOpen: true }, '');
     openMenu();
+    setTimeout(() => setTransitionPrevented(true), 300);
+  };
+
+  const handleMenuClose = () => {
+    setTransitionPrevented(false);
+    closeMenu();
   };
 
   useEffect(() => {
     const handlePopState = (event: PopStateEvent) => {
       if (isMobileMenuOpen) {
         event.preventDefault();
         closeMenu();
+        setTimeout(() => setTransitionPrevented(false), 300);
       }
     };
 
     window.addEventListener('popstate', handlePopState);
-
-    return () => {
-      window.removeEventListener('popstate', handlePopState);
-    };
+    return () => window.removeEventListener('popstate', handlePopState);
   }, [isMobileMenuOpen, closeMenu]);
 
   useEffect(() => {
-    document.body.style.cssText = `
-    overflow: hidden;`;
-
-    return () => {
-      document.body.style.cssText = '';
-    };
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener('keydown', (event) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && isMobileMenuOpen) {
         closeMenu();
       }
-    });
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isMobileMenuOpen, closeMenu]);
+
+  useEffect(() => {
+    if (isMobileMenuOpen) {
+      document.body.style.cssText = 'overflow: hidden;';
+    } else {
+      document.body.style.cssText = '';
+    }
 
     return () => {
-      window.removeEventListener('keydown', (event) => {
-        if (event.key === 'Escape' && isMobileMenuOpen) {
-          closeMenu();
-        }
-      });
+      document.body.style.cssText = '';
     };
-  }, [isMobileMenuOpen, closeMenu]);
+  }, [isMobileMenuOpen]);
 
   return (
     <>
@@ -142,14 +141,15 @@ export default function MobilePanel() {
             [styles['mobile-header__panel']]: true,
             [styles['mobile-header__panel--logged-in']]: true,
             [styles['mobile-header__panel--show']]: isMobileMenuOpen,
+            [styles['mobile-header__panel--transition-prevented']]: transitionPrevented,
           })}
           >
             <div className={styles['mobile-header__user']}>
               <button
                 type="button"
                 aria-label="뒤로 가기 버튼"
                 className={styles['mobile-header__backspace']}
-                onClick={closeMenu}
+                onClick={handleMenuClose}
               >
                 <BackArrowIcon title="뒤로 가기 버튼" />
               </button>

src/pages/Coop/components/ConfirmModal/index.tsx

@@ -21,8 +21,7 @@ export default function ConfirmModal({
   confirm,
 }: ConfirmModalProps) {
   useEffect(() => {
-    document.body.style.cssText = `
-    overflow: hidden;`;
+    document.body.style.cssText = 'overflow: hidden;';
 
     return () => {
       document.body.style.cssText = '';