From ae47a0b2be55ef858ecd262148feab0534de5bc8 Mon Sep 17 00:00:00 2001
From: HaJunRyu <hjr4557@naver.com>
Date: Sat, 1 Apr 2023 17:28:19 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20Modal=EC=98=A4=ED=94=88=EC=8B=9C=20?=
 =?UTF-8?q?=EC=B4=88=EA=B8=B0=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=EB=A5=BC=20foc?=
 =?UTF-8?q?usable=EC=9D=98=20=EC=B2=AB=EB=B2=88=EC=A7=B8=20=EC=9A=94?=
 =?UTF-8?q?=EC=86=8C=EB=A1=9C=20=EB=B3=80=EA=B2=BD=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Modal/Modal.component.tsx          | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/common/Modal/Modal.component.tsx b/src/components/common/Modal/Modal.component.tsx
index 455fafa..c14a5d0 100644
--- a/src/components/common/Modal/Modal.component.tsx
+++ b/src/components/common/Modal/Modal.component.tsx
@@ -59,27 +59,35 @@ const Modal = ({
         'input, button, textarea, select, [href], [tabindex]',
       );
 
-      if (focusableNodeList) {
-        const firstFocusableNode = focusableNodeList[0];
-        const lastFocusableNode = focusableNodeList[focusableNodeList.length - 1];
-
-        if (e.target === firstFocusableNode && e.shiftKey && e.key === 'Tab') {
-          e.preventDefault();
-          lastFocusableNode.focus();
-        }
-        if (e.target === lastFocusableNode && !e.shiftKey && e.key === 'Tab') {
-          e.preventDefault();
-          firstFocusableNode.focus();
-        }
+      if (!focusableNodeList) return;
+
+      const firstFocusableNode = focusableNodeList[0];
+      const lastFocusableNode = focusableNodeList[focusableNodeList.length - 1];
+
+      if (e.target === firstFocusableNode && e.shiftKey && e.key === 'Tab') {
+        e.preventDefault();
+        lastFocusableNode.focus();
+      }
+      if (e.target === lastFocusableNode && !e.shiftKey && e.key === 'Tab') {
+        e.preventDefault();
+        firstFocusableNode.focus();
       }
     };
 
     if (escClose) window.addEventListener('keyup', handleCloseModalWithEscHandler);
 
     if (mounted) {
-      dialogRef.current?.focus();
+      const focusableNodeList = dialogRef.current?.querySelectorAll<HTMLElement>(
+        'input, button, textarea, select, [href], [tabindex]',
+      );
+
+      if (focusableNodeList) {
+        const firstFocusableNode = focusableNodeList[0];
+
+        firstFocusableNode?.focus();
 
-      window.addEventListener('keydown', handleFocusTrap);
+        window.addEventListener('keydown', handleFocusTrap);
+      }
     }
 
     if (!mounted) setMounted(true);