Component: Modal

package.json

@@ -17,6 +17,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
+    "react-modal": "^3.15.1",
     "react-toastify": "^9.0.8",
     "zustand": "^4.1.1"
   },
@@ -30,6 +31,7 @@
     "@types/node": "^18.7.13",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@types/react-modal": "^3.13.1",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",
@@ -38,7 +40,7 @@
     "@vitest/ui": "^0.22.1",
     "autoprefixer": "^10.4.8",
     "eruda": "^2.5.0",
-    "eslint": "^8.23.0",
+    "eslint": "8.22.0",
     "eslint-import-resolver-node": "^0.3.6",
     "eslint-import-resolver-typescript": "^3.5.0",
     "eslint-plugin-import": "^2.26.0",

src/assets/css/global.css

@@ -77,6 +77,8 @@ ul {
     --header-padding-x: 16px;
     --keyboard-height: 200px;
     --game-max-width: 500px;
+    --toast-z-index: 1000;
+    --modal-z-index: 2000;
 
     --color-tone-1: #000000;
     --color-tone-2: #787c7e;

src/components/Modal/index.module.scss

@@ -0,0 +1,38 @@
+.modal-overlay {
+    display: flex;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    inset: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--opacity-50);
+    z-index: var(--modal-z-index);
+}
+
+.modal {
+    position: relative;
+    border-radius: 8px;
+    border: 1px solid var(--color-tone-6);
+    background-color: var(--color-tone-7);
+    color: var(--color-tone-1);
+    box-shadow: 0 4px 23px 0 rgb(0 0 0 / 20%);
+    width: 90%;
+    max-height: 100%;
+    overflow-y: auto;
+    max-width: var(--game-max-width);
+    padding: 16px;
+    box-sizing: border-box;
+    outline: none;
+}
+
+@media screen and (max-width: 500px) {
+    .modal-overlay {
+        align-items: flex-end;
+    }
+
+    .modal {
+        min-height: 70%;
+        width: 100%;
+    }
+}

src/components/Modal/index.tsx

@@ -0,0 +1,31 @@
+import ReactModal from 'react-modal'
+import styles from './index.module.scss'
+import type { PropsWithChildren } from 'react'
+import type { Props } from 'react-modal'
+
+
+interface ModalProps {
+  isOpen: boolean
+  closeModalHandler: () => void
+  modalProps?: Omit<Props, 'isOpen' | 'onRequestClose'>
+}
+
+
+const Modal = ({
+  isOpen,
+  closeModalHandler,
+  modalProps = void 0,
+  children = void 0
+}: PropsWithChildren<ModalProps>): JSX.Element => (
+  <ReactModal
+    className={styles.modal}
+    isOpen={isOpen}
+    overlayClassName={styles.modalOverlay}
+    onRequestClose={closeModalHandler}
+    {...modalProps}
+  >
+    {children}
+  </ReactModal>
+)
+
+export default Modal

src/hooks/useKeyboard.ts

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
 import { useCallback, useEffect } from 'react'
 import { GameStatus } from '@/constants'
 import useGameState from '@/store/useGameState'

src/main.tsx

@@ -5,14 +5,18 @@ import { createRoot } from 'react-dom/client'
 import { ErrorBoundary } from 'react-error-boundary'
 import ErrorBoundaryFallback from '@/components/ErrorBoundaryFallback'
 import App from '@/App'
+import ReactModal from 'react-modal'
 import 'react-toastify/dist/ReactToastify.css'
 import '@/assets/css/global.css'
 
 
-createRoot(document.querySelector('#app') as HTMLDivElement).render(
-  <StrictMode>
-    <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
-      <App />
-    </ErrorBoundary>
-  </StrictMode>
-)
+ReactModal.setAppElement('#app')
+
+createRoot(document.querySelector('#app') as HTMLDivElement)
+  .render(
+    <StrictMode>
+      <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+        <App />
+      </ErrorBoundary>
+    </StrictMode>
+  )