fix: 모달 포커스트랩으로인해 인풋 포커스안되는 버그 수정

woowacourse-teams · Oct 24, 2024 · 2094e65 · 2094e65
1 parent 2c94777
commit 2094e65
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/frontend/src/components/_common/Modal/Modal.tsx b/frontend/src/components/_common/Modal/Modal.tsx
@@ -38,23 +38,26 @@ const Modal = ({
 }: ModalProps) => {
   if (!modalRoot) return null;
 
-  return createPortal(
-    <FocusTrap onEscapeFocusTrap={onClose}>
-      <S.ModalWrapper open={isOpen}>
-        {hasDim && <S.ModalBackground onClick={hasDim ? onClose : () => {}} hasDim={hasDim} />}
-        <S.ModalOuter $position={position} $size={size} color={color} isOpen={isOpen}>
-          <S.ModalInner isOpen={isOpen}>
-            {children}
-            {hasCloseButton && (
-              <S.CloseButton role="button" onClick={onClose} aria-label="모달 끄기">
-                <CloseIcon />
-              </S.CloseButton>
-            )}
-          </S.ModalInner>
-        </S.ModalOuter>
-      </S.ModalWrapper>
-    </FocusTrap>,
-    modalRoot,
+  return (
+    isOpen &&
+    createPortal(
+      <FocusTrap onEscapeFocusTrap={onClose}>
+        <S.ModalWrapper open={isOpen}>
+          {hasDim && <S.ModalBackground onClick={hasDim ? onClose : () => {}} hasDim={hasDim} />}
+          <S.ModalOuter $position={position} $size={size} color={color} isOpen={isOpen}>
+            <S.ModalInner isOpen={isOpen}>
+              {children}
+              {hasCloseButton && (
+                <S.CloseButton role="button" onClick={onClose} aria-label="모달 끄기">
+                  <CloseIcon />
+                </S.CloseButton>
+              )}
+            </S.ModalInner>
+          </S.ModalOuter>
+        </S.ModalWrapper>
+      </FocusTrap>,
+      modalRoot,
+    )
   );
 };