✨ feat: ModalCommon

:%s

src/components/common/ModalCommon/ModalCommon.module.scss

@@ -0,0 +1,24 @@
+.background{
+    @apply fixed inset-0 overflow-y-auto;
+    background: rgba(20, 20, 20, 0.65);
+    z-index: 10000;
+    .warpper{
+        @apply flex justify-center items-center  min-h-screen;
+        .modal{
+            // @apply bg-white inline-block;
+            @apply inline-block align-bottom bg-white relative;
+            max-width: 50%;
+            padding: 3.2rem;
+            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24);
+            border-radius: 1.2rem;
+            .close{
+                @apply absolute;
+                &:hover{
+                    cursor: pointer;
+                }
+                top:4.4rem;
+                right: 4.4rem;
+            }
+        }
+    }
+}

src/components/common/ModalCommon/ModalCommon.tsx

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react'
+import { Close } from 'src/components/icons'
+import { useOnClickOutside } from 'src/utils/useClickOutSide'
+import s from "./ModalCommon.module.scss"
+interface Props {
+  onClose: () => void
+  visible: boolean
+	children:React.ReactNode
+}
+
+const ModalCommon = ({ onClose, visible,children }: Props) => {
+  const modalRef = useRef<HTMLDivElement>(null)
+  const clickOutSide = () => {
+    onClose && onClose()
+  }
+  useOnClickOutside(modalRef, clickOutSide)
+  return (
+    <>
+      {visible && (
+        <div
+          className={s.background}
+        >
+          <div className={s.warpper}>
+            <div
+              className={s.modal}
+              ref={modalRef}
+            >
+							<div className={s.close} onClick={clickOutSide}>
+								<Close/>
+							</div>
+							{children}
+						</div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default ModalCommon

src/components/common/index.ts

@@ -24,3 +24,4 @@ export { default as MenuDropdown} from './MenuDropdown/MenuDropdown'
 export { default as NotiMessage} from './NotiMessage/NotiMessage'
 export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
 export { default as SelectCommon} from './SelectCommon/SelectCommon'
+export { default as ModalCommon} from './ModalCommon/ModalCommon'