From 0400c776f3fa2cba54b4e9f4cc93e81cf8c821fd Mon Sep 17 00:00:00 2001
From: ImxYJL <allensain14@gmail.com>
Date: Wed, 31 Jul 2024 11:31:00 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20useEffect=20=EB=82=B4=EB=B6=80=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=EB=93=A4=EC=9D=84=20=ED=9B=85=20=EC=99=B8?=
 =?UTF-8?q?=EB=B6=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EB=B0=8F=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useModalClose.ts | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/src/hooks/useModalClose.ts b/frontend/src/hooks/useModalClose.ts
index 1c1f9fb72..96b465531 100644
--- a/frontend/src/hooks/useModalClose.ts
+++ b/frontend/src/hooks/useModalClose.ts
@@ -13,6 +13,7 @@ const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject<HTM
     return element instanceof HTMLElement;
   };
 
+  // NOTE: esc 키를 눌렀을 때 햄버거 버튼이 포커싱되는 문제 해결을 위한 함수
   const blurFocusing = () => {
     const activeElement = document.activeElement;
 
@@ -20,21 +21,22 @@ const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject<HTM
     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);