feat: add modal component

src/shared/ui/Modal/Modal.module.css

@@ -0,0 +1,31 @@
+.Modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100%;
+    z-index: var(--z-index-image-modal);
+}
+
+.ModalDim {
+    width: 100%;
+    height: 100%;
+    background-color: #00000080;
+}
+
+.ModalWrapper {
+    position: absolute;
+    top: 50%;
+    left: calc(50% - min(240px, 50%) + 20px);
+    transform: translateY(-50%);
+    width: min(calc(100% - 40px), 440px);
+
+    pointer-events: bounding-box;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: var(--color-neutral-0);
+    border-radius: 16px;
+}

src/shared/ui/Modal/Modal.tsx

@@ -0,0 +1,31 @@
+import { Portal } from '@radix-ui/react-portal';
+import styles from './Modal.module.css';
+import { PropsWithChildren } from 'react';
+
+type ModalProps = PropsWithChildren<{
+  showModal: boolean;
+  closeModal: () => void;
+  closeOnClickOutside?: boolean;
+  wrapperClassName?: string;
+}>;
+
+export const Modal = ({
+  wrapperClassName = '',
+  showModal,
+  closeModal,
+  closeOnClickOutside = true,
+  children,
+}: ModalProps) => {
+  return (
+    <>
+      {showModal && (
+        <Portal>
+          <div className={styles.Modal}>
+            <div className={styles.ModalDim} onClick={closeOnClickOutside ? closeModal : undefined} />
+            <div className={`${styles.ModalWrapper} ${wrapperClassName}`}>{children}</div>
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+};