[FE] 사이드바 및 모달 사용성 개선

frontend/src/App.tsx

@@ -9,7 +9,7 @@ const App = () => {
   return (
     <PageLayout>
       {isSidebarModalOpen && (
-        <SideModal isSidebarHidden={isSidebarHidden}>
+        <SideModal isSidebarHidden={isSidebarHidden} closeModal={closeSidebar}>
           <Sidebar closeSidebar={closeSidebar} />
         </SideModal>
       )}

frontend/src/components/common/modals/ModalBackground/index.tsx

@@ -1,9 +1,18 @@
-import React from 'react';
+import React, { PropsWithChildren, useRef } from 'react';
+
+import { useModalClose } from '@/hooks';
 
 import * as S from './styles';
 
-const ModalBackground = ({ children }: React.PropsWithChildren) => {
-  return <S.ModalBackground>{children}</S.ModalBackground>;
+interface ModalBackgroundProps {
+  closeModal: () => void;
+}
+
+const ModalBackground: React.FC<PropsWithChildren<ModalBackgroundProps>> = ({ children, closeModal }) => {
+  const modalBackgroundRef = useRef<HTMLDivElement>(null);
+  useModalClose(closeModal, modalBackgroundRef);
+
+  return <S.ModalBackground ref={modalBackgroundRef}>{children}</S.ModalBackground>;
 };
 
 export default ModalBackground;

frontend/src/components/common/modals/SideModal/index.tsx

@@ -8,12 +8,13 @@ import * as S from './styles';
 
 interface SideModalProps {
   isSidebarHidden: boolean;
+  closeModal: () => void;
 }
 
-const SideModal: React.FC<PropsWithChildren<SideModalProps>> = ({ children: Sidebar, isSidebarHidden }) => {
+const SideModal: React.FC<PropsWithChildren<SideModalProps>> = ({ children: Sidebar, isSidebarHidden, closeModal }) => {
   return (
     <ModalPortal id="sidebarModal-portal">
-      <ModalBackground>
+      <ModalBackground closeModal={closeModal}>
         <S.SidebarWrapper $isSidebarHidden={isSidebarHidden}>{Sidebar}</S.SidebarWrapper>
       </ModalBackground>
     </ModalPortal>

frontend/src/components/common/modals/SideModal/styles.ts

@@ -8,5 +8,5 @@ export const SidebarWrapper = styled.div<SidebarWrapperProps>`
   position: absolute;
   top: 0;
   left: ${(props) => (props.$isSidebarHidden ? '-100%' : 0)};
-  transition: left 1s ease-in-out;
+  transition: left 0.2s ease-in-out;
 `;

frontend/src/components/layouts/Sidebar/index.tsx

@@ -43,7 +43,7 @@ const Sidebar = ({ closeSidebar }: SidebarProps) => {
       <S.MenuList>
         {menuItems.map((item) => (
           <S.MenuItem key={item.path} selected={location.pathname === item.path}>
-            <Link to={item.path}>{item.label}</Link>
+            <Link to={item.path} onClick={closeSidebar}>{item.label}</Link>
           </S.MenuItem>
         ))}
       </S.MenuList>

frontend/src/hooks/index.ts

@@ -1 +1,2 @@
 export { default as useSidebar } from './useSidebar';
+export { default as useModalClose } from './useModalClose';

frontend/src/hooks/useModalClose.ts

@@ -0,0 +1,52 @@
+import { useEffect, RefObject } from 'react';
+
+const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject<HTMLElement>) => {
+  const isNodeElement = (element: EventTarget | null): element is Node => {
+    return element instanceof Node;
+  };
+
+  const isModalBackground = (targetElement: Node | null) => {
+    return modalBackgroundRef.current ? modalBackgroundRef.current === targetElement : false;
+  };
+
+  const isHTMLElement = (element: Element | null): element is HTMLElement => {
+    return element instanceof HTMLElement;
+  };
+
+  // NOTE: esc 키를 눌렀을 때 햄버거 버튼이 포커싱되는 문제 해결을 위한 함수
+  const blurFocusing = () => {
+    const activeElement = document.activeElement;
+
+    if (!isHTMLElement(activeElement)) return;
+    if (typeof activeElement.blur === 'function') activeElement.blur();
+  };
+
+  const handleBackgroundClick = (event: MouseEvent) => {
+    if (isNodeElement(event.target) && isModalBackground(event.target)) {
+      closeModal();
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+
+      blurFocusing();
+      closeModal();
+    }
+  };
+
+  useEffect(() => {
+    const modalBackgroundElement = modalBackgroundRef.current;
+
+    modalBackgroundElement?.addEventListener('click', handleBackgroundClick);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      modalBackgroundElement?.removeEventListener('click', handleBackgroundClick);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [closeModal, modalBackgroundRef]);
+};
+
+export default useModalClose;

frontend/src/hooks/useSidebar.ts

@@ -1,21 +1,19 @@
 import { useState } from 'react';
 
 const useSidebar = () => {
-  const CLOSE_TIME = 1000;
-  const OPEN_TIME = 0.5;
+  const OPEN_TIME = 0.2;
 
   const [isSidebarModalOpen, setIsSidebarModalOpen] = useState(false);
   const [isSidebarHidden, setIsSidebarHidden] = useState(true);
 
   const closeSidebar = () => {
+    setIsSidebarModalOpen(false);
     setIsSidebarHidden(true);
-    setTimeout(() => {
-      setIsSidebarModalOpen(false);
-    }, CLOSE_TIME);
   };
 
   const openSidebar = () => {
     setIsSidebarModalOpen(true);
+
     setTimeout(() => {
       setIsSidebarHidden(false);
     }, OPEN_TIME);