chore: 포커스 트랩

project-creddit · May 22, 2022 · 111bd43 · 111bd43
1 parent e89207b
commit 111bd43
Show file tree

Hide file tree

Showing 12 changed files with 255 additions and 23 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/@babel-runtime-npm-7.18.0-6481a6d48c-9d0caa5fe6.zip b/.yarn/cache/@babel-runtime-npm-7.18.0-6481a6d48c-9d0caa5fe6.zip
diff --git a/.yarn/cache/detect-node-es-npm-1.1.0-2ad57e0b50-e46307d726.zip b/.yarn/cache/detect-node-es-npm-1.1.0-2ad57e0b50-e46307d726.zip
diff --git a/.yarn/cache/focus-lock-npm-0.11.2-bebce9a7c0-f1a62ea7bb.zip b/.yarn/cache/focus-lock-npm-0.11.2-bebce9a7c0-f1a62ea7bb.zip
diff --git a/.yarn/cache/react-clientside-effect-npm-1.2.6-4c95acf94f-7db6110027.zip b/.yarn/cache/react-clientside-effect-npm-1.2.6-4c95acf94f-7db6110027.zip
diff --git a/.yarn/cache/react-focus-lock-npm-2.9.1-4c80040ff8-4dbc2166ac.zip b/.yarn/cache/react-focus-lock-npm-2.9.1-4c80040ff8-4dbc2166ac.zip
diff --git a/.yarn/cache/tslib-npm-2.4.0-9cb6dc5030-8c4aa6a3c5.zip b/.yarn/cache/tslib-npm-2.4.0-9cb6dc5030-8c4aa6a3c5.zip
diff --git a/.yarn/cache/use-callback-ref-npm-1.3.0-6c0773783f-7913df383a.zip b/.yarn/cache/use-callback-ref-npm-1.3.0-6c0773783f-7913df383a.zip
diff --git a/.yarn/cache/use-sidecar-npm-1.1.2-dfc322e94a-925d1922f9.zip b/.yarn/cache/use-sidecar-npm-1.1.2-dfc322e94a-925d1922f9.zip
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "next-redux-wrapper": "^7.0.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-focus-lock": "^2.9.1",
     "react-redux": "^8.0.1",
     "react-textarea-autosize": "^8.3.3",
     "sockjs-client": "^1.6.0",

diff --git a/src/components/DeleteModal/DeleteModal.tsx b/src/components/DeleteModal/DeleteModal.tsx
@@ -1,6 +1,7 @@
 import Button from 'components/Button';
 import { MouseEventHandler } from 'react';
 import styles from './DeleteModal.module.scss';
+import FocusLock from 'react-focus-lock';
 
 export type DeleteModalProps = {
   title: string;
@@ -10,7 +11,6 @@ export type DeleteModalProps = {
   buttonName?: string;
 };
 
-// TODO: 포커스 트랩
 function DeleteModal({
   title,
   message,
@@ -19,29 +19,31 @@ function DeleteModal({
   buttonName,
 }: DeleteModalProps) {
   return (
-    <div
-      className={styles.container}
-      onClick={(event) => {
-        const target = event.target as HTMLElement;
-        if (target.classList.contains(styles.container)) {
-          onCancel(event);
-        }
-      }}
-      data-testid="delete-modal"
-    >
-      <div className={styles.main}>
-        <h3>{title}</h3>
-        <p>{message}</p>
-        <div className={styles.buttonsContainer}>
-          <Button variant="plain" onClick={onCancel} ariaLabel="삭제 취소">
-            취소
-          </Button>
-          <Button onClick={onConfirm} variant="error">
-            {buttonName || '삭제'}
-          </Button>
+    <FocusLock>
+      <div
+        className={styles.container}
+        onClick={(event) => {
+          const target = event.target as HTMLElement;
+          if (target.classList.contains(styles.container)) {
+            onCancel(event);
+          }
+        }}
+        data-testid="delete-modal"
+      >
+        <div className={styles.main}>
+          <h3>{title}</h3>
+          <p>{message}</p>
+          <div className={styles.buttonsContainer}>
+            <Button variant="plain" onClick={onCancel} ariaLabel="삭제 취소">
+              취소
+            </Button>
+            <Button onClick={onConfirm} variant="error">
+              {buttonName || '삭제'}
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    </FocusLock>
   );
 }