🔨 refactor: add title to modal common

:%s

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

@@ -6,10 +6,15 @@
         @apply flex justify-center items-center  min-h-screen;
         .modal{
             @apply inline-block align-bottom bg-white relative;
-            max-width: 50%;
+            max-width: 60rem;
             padding: 3.2rem;
             box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24);
             border-radius: 1.2rem;
+            .title{
+                padding: 0 0.8rem 0 0.8rem;
+                font-size: 3.2rem;
+                line-height: 4rem;
+            }
             .close{
                 @apply absolute;
                 &:hover{

src/components/common/ModalCommon/ModalCommon.tsx

@@ -1,14 +1,16 @@
 import React, { useRef } from 'react'
 import { Close } from 'src/components/icons'
 import { useOnClickOutside } from 'src/utils/useClickOutSide'
-import s from "./ModalCommon.module.scss"
+import s from './ModalCommon.module.scss'
 interface Props {
   onClose: () => void
   visible: boolean
-	children:React.ReactNode
+  children: React.ReactNode
+  title?: string
+  maxWidth?:string
 }
 
-const ModalCommon = ({ onClose, visible,children }: Props) => {
+const ModalCommon = ({ onClose, visible, children, title="Modal",maxWidth }: Props) => {
   const modalRef = useRef<HTMLDivElement>(null)
   const clickOutSide = () => {
     onClose && onClose()
@@ -17,19 +19,17 @@ const ModalCommon = ({ onClose, visible,children }: Props) => {
   return (
     <>
       {visible && (
-        <div
-          className={s.background}
-        >
+        <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 className={s.modal} ref={modalRef} style={{maxWidth}}>
+              <div className={s.top}>
+                <div className={s.title}>{title}</div>
+                <div className={s.close} onClick={clickOutSide}>
+                  <Close />
+                </div>
+              </div>
+              {children}
+            </div>
           </div>
         </div>
       )}