[#44] modal 구현

primus-teoSprint · Apr 8, 2024 · ca4d37b · ca4d37b
1 parent 7cb1f57
commit ca4d37b
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 1 deletion.
diff --git a/app/_common/modal/ModalPortal.tsx b/app/_common/modal/ModalPortal.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+import ReactDOM from 'react-dom'
+import S from './modal.module.css'
+
+interface ModalProps {
+  children: ReactNode
+}
+
+function ModalPotal({ children }: ModalProps) {
+  const modalRoot = document.getElementById('modal-root')
+
+  if (!modalRoot) return null
+
+  return ReactDOM.createPortal(
+    <div className={S.wrapper}>{children}</div>,
+    modalRoot,
+  )
+}
+
+export default ModalPotal
diff --git a/app/_common/modal/index.tsx b/app/_common/modal/index.tsx
@@ -0,0 +1,50 @@
+import { ReactNode, useState } from 'react'
+import ModalPotal from './ModalPortal'
+import S from './modal.module.css'
+
+interface ModalProps {
+  open?: string
+  children: ReactNode
+  title?: string
+  subTitle?: string
+  buttonTitle?: string
+}
+
+function Modal({ open, children, title, subTitle, buttonTitle }: ModalProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const openModal = () => {
+    setIsOpen(true)
+  }
+
+  const closeModal = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      <button onClick={openModal} className={S.buttonWrapper}>
+        {open ? open : '열기'}
+      </button>
+      {isOpen && (
+        <ModalPotal>
+          <div className={S.inWrapper}>
+            <div className={S.titleWrapper}>
+              <span className={S.title}>{title}</span>
+              <p className={S.subTitle}>{subTitle}</p>
+            </div>
+            {children}
+            <button className={S.buttonWrapper}>{buttonTitle}</button>
+            <div className={S.closeBtnWrapper}>
+              <button onClick={closeModal} className={S.closeWrapper}>
+                X
+              </button>
+            </div>
+          </div>
+        </ModalPotal>
+      )}
+    </>
+  )
+}
+
+export default Modal
diff --git a/app/_common/modal/modal.module.css b/app/_common/modal/modal.module.css
@@ -0,0 +1,81 @@
+.wrapper {
+  position: fixed;
+  top: 0;
+  width: 480px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.inWrapper {
+  position: relative;
+  background-color: #f8f9ff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  width: 320px;
+  height: 340px;
+  border-radius: 10px;
+  padding: 20px 23px;
+}
+
+.closeBtnWrapper {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 0.95rem;
+  color: white;
+  background-color: var(--purple-700);
+  width: 30px;
+  height: 30px;
+}
+
+.closeWrapper {
+  font-weight: 500;
+}
+
+.titleWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.4rem;
+}
+
+.subTitle {
+  font-weight: 300;
+  font-size: 0.85rem;
+}
+
+.buttonWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+  width: 100%;
+  height: 55px;
+  letter-spacing: 0.16px;
+  font-weight: 700;
+  font-size: 1.06rem;
+  color: white;
+  background-color: var(--purple-700);
+}
+
+.buttonWrapper:hover,
+.closeBtnWrapper:hover {
+  opacity: 0.8;
+  transition: all 0.4s;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,7 +27,10 @@ function RootLayout({
       <body>
         <Providers>
           <Recoil>
-            <Layout>{children}</Layout>
+            <Layout>
+              {children}
+              <div id="modal-root"></div>
+            </Layout>
           </Recoil>
         </Providers>
       </body>