Merge pull request #249 from mash-up-kr/develop

Release v1.3.0 배포
mash-up-kr · May 28, 2023 · 493c3ef · 493c3ef
2 parents e42968b + 24e4059
commit 493c3ef
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/src/components/common/Modal/Modal.component.tsx b/src/components/common/Modal/Modal.component.tsx
@@ -28,7 +28,7 @@ const Modal = ({
 }: ModalProps) => {
   const [mounted, setMounted] = useState(false);
 
-  const dialogRef = useRef<HTMLDivElement>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
 
   const handleCloseModalWithMouseHandler: MouseEventHandler<HTMLDivElement> = ({
     target,
@@ -55,7 +55,7 @@ const Modal = ({
     };
 
     const handleFocusTrap = (e: KeyboardEvent) => {
-      const focusableNodeList = dialogRef.current?.querySelectorAll<HTMLElement>(
+      const focusableNodeList = modalRef.current?.querySelectorAll<HTMLElement>(
         'input, button, textarea, select, [href], [tabindex]',
       );
 
@@ -77,17 +77,9 @@ const Modal = ({
     if (escClose) window.addEventListener('keyup', handleCloseModalWithEscHandler);
 
     if (mounted) {
-      const focusableNodeList = dialogRef.current?.querySelectorAll<HTMLElement>(
-        'input, button, textarea, select, [href], [tabindex]',
-      );
-
-      if (focusableNodeList) {
-        const firstFocusableNode = focusableNodeList[0];
+      modalRef.current?.focus();
 
-        firstFocusableNode?.focus();
-
-        window.addEventListener('keydown', handleFocusTrap);
-      }
+      window.addEventListener('keydown', handleFocusTrap);
     }
 
     if (!mounted) setMounted(true);
@@ -112,7 +104,7 @@ const Modal = ({
     <Portal elementId="modal-root" mounted={mounted}>
       <Styled.OverSizeModal>
         <Styled.Modal
-          ref={dialogRef}
+          ref={modalRef}
           tabIndex={-1}
           onClick={deemClose ? handleCloseModalWithMouseHandler : undefined}
         >

diff --git a/src/components/common/Modal/Modal.styled.ts b/src/components/common/Modal/Modal.styled.ts
@@ -29,5 +29,9 @@ export const Modal = styled.div`
     width: 100%;
     height: 100%;
     padding: 0 2rem;
+
+    &:focus-visible {
+      outline: none;
+    }
   `}
 `;