QA 추가 이슈 수정 (#7)

* refactor: 모바일 자동입력 시 노랑 배경 제거

* refactor: 햄버거 메뉴에서 스크롤 방지

* refactor: esc키로 메뉴 닫기

* refactor: 스와이프 문제 수정 및 키워드 Menu로 변경

src/layout/Header/MobilePanel/index.tsx

@@ -1,10 +1,12 @@
+import { useEffect } from 'react';
+
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import BackArrowIcon from 'assets/svg/common/back-arrow.svg?react';
 import MenuIcon from 'assets/svg/common/hamburger-menu.svg?react';
 import MobileLogoIcon from 'assets/svg/common/mobile-koin-logo.svg?react';
 import useMediaQuery from 'hooks/useMediaQuery';
-import useMobileSidebar from 'layout/Header/hooks/useMobileSidebar';
+import useMobileMenu from 'layout/Header/hooks/useMobileMenu';
 import { HEADER_CATEGORY, HeaderCategory } from 'models/headerCategory';
 import { useCoopMe, useLogout } from 'query/auth';
 import cn from 'utils/className';
@@ -14,17 +16,17 @@ import { createPortal } from 'react-dom';
 import styles from './MobilePanel.module.scss';
 
 interface PanelContentProps {
-  hideSidebar: () => void;
+  closeMenu: () => void;
   category: HeaderCategory;
 }
 
-function PanelContent({ hideSidebar, category }: PanelContentProps) {
+function PanelContent({ closeMenu, category }: PanelContentProps) {
   const navigate = useNavigate();
   const { title, submenu } = category;
 
   const handleClick = (link: string) => {
     navigate(link);
-    hideSidebar();
+    closeMenu();
   };
 
   return (
@@ -53,19 +55,60 @@ export default function MobilePanel() {
   const { isMobile } = useMediaQuery();
   const { user } = useCoopMe();
   const { logout } = useLogout();
-  const navigate = useNavigate();
 
   const {
-    isExpanded: isMobileSidebarExpanded,
-    expandSidebar,
-    hideSidebar,
-  } = useMobileSidebar(pathname, isMobile);
-
-  const handleHamburgerClick = () => {
-    navigate(pathname, { replace: true });
-    expandSidebar();
+    isMenuOpen: isMobileMenuOpen,
+    openMenu,
+    closeMenu,
+  } = useMobileMenu(pathname, isMobile);
+
+  const handleMenuClick = () => {
+    if (!isMobileMenuOpen) {
+      window.history.pushState({ menuOpen: true }, '');
+    }
+    openMenu();
   };
 
+  useEffect(() => {
+    const handlePopState = (event: PopStateEvent) => {
+      if (isMobileMenuOpen) {
+        event.preventDefault();
+        closeMenu();
+      }
+    };
+
+    window.addEventListener('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) => {
+      if (event.key === 'Escape' && isMobileMenuOpen) {
+        closeMenu();
+      }
+    });
+
+    return () => {
+      window.removeEventListener('keydown', (event) => {
+        if (event.key === 'Escape' && isMobileMenuOpen) {
+          closeMenu();
+        }
+      });
+    };
+  }, [isMobileMenuOpen, closeMenu]);
+
   return (
     <>
       <div
@@ -87,8 +130,8 @@ export default function MobilePanel() {
             [styles['mobile-header__icon']]: true,
             [styles['mobile-header__icon--right']]: true,
           })}
-          onClick={handleHamburgerClick}
-          aria-expanded={isMobileSidebarExpanded}
+          onClick={handleMenuClick}
+          aria-expanded={isMobileMenuOpen}
         >
           <MenuIcon title="메뉴" />
         </button>
@@ -98,15 +141,15 @@ export default function MobilePanel() {
           <nav className={cn({
             [styles['mobile-header__panel']]: true,
             [styles['mobile-header__panel--logged-in']]: true,
-            [styles['mobile-header__panel--show']]: isMobileSidebarExpanded,
+            [styles['mobile-header__panel--show']]: isMobileMenuOpen,
           })}
           >
             <div className={styles['mobile-header__user']}>
               <button
                 type="button"
                 aria-label="뒤로 가기 버튼"
                 className={styles['mobile-header__backspace']}
-                onClick={hideSidebar}
+                onClick={closeMenu}
               >
                 <BackArrowIcon title="뒤로 가기 버튼" />
               </button>
@@ -131,7 +174,7 @@ export default function MobilePanel() {
             {HEADER_CATEGORY.map((category: HeaderCategory) => (
               <PanelContent
                 key={category.title}
-                hideSidebar={hideSidebar}
+                closeMenu={closeMenu}
                 category={category}
               />
             ))}

src/layout/Header/hooks/useMobileMenu.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+import useBooleanState from 'hooks/useBooleanState';
+
+const useMobileMenu = (pathname: string, isMobile: boolean) => {
+  const [isExpanded, , openMenu, closeMenu] = useBooleanState(false);
+
+  useEffect(() => {
+    if (!isMobile) {
+      closeMenu();
+    }
+  }, [closeMenu, isMobile]);
+
+  useEffect(() => {
+    closeMenu();
+  }, [closeMenu, pathname]);
+
+  return {
+    isMenuOpen: isExpanded,
+    openMenu,
+    closeMenu,
+  };
+};
+
+export default useMobileMenu;

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

@@ -25,9 +25,7 @@ export default function ConfirmModal({
     overflow: hidden;`;
 
     return () => {
-      const scrollY = document.body.style.top;
       document.body.style.cssText = '';
-      window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
     };
   }, []);
 

src/pages/Login/Login.module.scss

@@ -74,6 +74,10 @@
       height: 46px;
     }
 
+    &:-webkit-autofill {
+      -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset; // 모바일 자동입력 시 노랑 배경 제거
+    }
+
     &::placeholder {
       font-weight: 400;
       font-size: 14px;

src/query/auth.ts

@@ -31,7 +31,7 @@ export const useLogin = () => {
 
       await queryClient.invalidateQueries({ queryKey: userKeys.all });
       setLoginErrorMessage('');
-      navigate('/');
+      navigate('/', { replace: true });
     },
     onError: (err) => {
       if (isKoinError(err)) {