refactor: useEffect 내부 함수들을 훅 외부로 이동 및 주석 추가

frontend/src/hooks/useModalClose.ts

@@ -13,28 +13,30 @@ const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject<HTM
     return element instanceof HTMLElement;
   };
 
+  // NOTE: esc 키를 눌렀을 때 햄버거 버튼이 포커싱되는 문제 해결을 위한 함수
   const blurFocusing = () => {
     const activeElement = document.activeElement;
 
     if (!isHTMLElement(activeElement)) return;
     if (typeof activeElement.blur === 'function') activeElement.blur();
   };
 
-  useEffect(() => {
-    const handleBackgroundClick = (event: MouseEvent) => {
-      if (isNodeElement(event.target) && isModalBackground(event.target)) {
-        closeModal();
-      }
-    };
+  const handleBackgroundClick = (event: MouseEvent) => {
+    if (isNodeElement(event.target) && isModalBackground(event.target)) {
+      closeModal();
+    }
+  };
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        blurFocusing();
-        closeModal();
-      }
-    };
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
 
+      blurFocusing();
+      closeModal();
+    }
+  };
+
+  useEffect(() => {
     const modalBackgroundElement = modalBackgroundRef.current;
 
     modalBackgroundElement?.addEventListener('click', handleBackgroundClick);