From d7ecdd78b452196fb2b8dc4cfecfeb62b0f7e7f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=A7=84?= <orobos654@gmail.com>
Date: Thu, 19 Sep 2024 22:17:33 +0900
Subject: [PATCH] feat: add modal component

---
 src/shared/ui/Modal/Modal.module.css | 31 ++++++++++++++++++++++++++++
 src/shared/ui/Modal/Modal.tsx        | 31 ++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/shared/ui/Modal/Modal.module.css
 create mode 100644 src/shared/ui/Modal/Modal.tsx

diff --git a/src/shared/ui/Modal/Modal.module.css b/src/shared/ui/Modal/Modal.module.css
new file mode 100644
index 0000000..e7e83cf
--- /dev/null
+++ b/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;
+}
diff --git a/src/shared/ui/Modal/Modal.tsx b/src/shared/ui/Modal/Modal.tsx
new file mode 100644
index 0000000..1eac7ca
--- /dev/null
+++ b/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>
+      )}
+    </>
+  );
+};