[#44] 모달창, 로딩중

app/(route)/indicators/_components/result/result.module.css

@@ -109,15 +109,15 @@
   position: relative;
   background-color: #e7e9ff;
   width: 480px;
-  height: 150px;
+  height: 110px;
   border-top-left-radius: 38px;
   border-top-right-radius: 38px;
 }
 
 .submitBtnWrapper {
   position: absolute;
-  right: 16px;
-  bottom: 50px;
+  right: 30px;
+  bottom: 35px;
 
   color: white;
   font-weight: 700;
@@ -126,6 +126,6 @@
   width: 160px;
   height: auto;
   padding: 10px 20px;
-  border-radius: 9px;
+  border-radius: 38px;
   background-color: var(--purple-700);
 }

app/(route)/indicators/indicators.module.css

@@ -34,23 +34,23 @@
   bottom: 0;
   background-color: #e3e6ff;
   width: 480px;
-  height: 140px;
+  height: 110px;
   border-top-left-radius: 38px;
   border-top-right-radius: 38px;
 }
 
 .submitBtnWrapper {
   position: absolute;
-  right: 16px;
-  bottom: 45px;
+  right: 30px;
+  bottom: 35px;
 
   color: white;
   font-weight: 700;
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   text-align: center;
   width: 100px;
   height: auto;
   padding: 10px 20px;
-  border-radius: 9px;
+  border-radius: 38px;
   background-color: var(--purple-700);
 }

app/(route)/toolDetail/[toolId]/page.tsx

@@ -1,10 +1,10 @@
 'use client'
 
+import Modal from '@/app/_common/modal'
 import Nav from '@/app/_common/nav'
 import Title from '@/app/_common/text/title'
 import { useState } from 'react'
 import S from './toolDetail.module.css'
-import Link from 'next/link'
 
 //TODO: 검증하기 누를 시 해당 아이디어 툴의 id로 이동하기
 //TODO: 주석 처리 실제 데이터로 변경하기
@@ -78,9 +78,13 @@ function ToolDetail() {
         )}
       </div>
 
-      <Link href={`/verification/ibulsin?step=1`}>
-        <div>검증하기</div>
-      </Link>
+      <Modal
+        open="검증하기"
+        title="아이디어 불패의 법칙"
+        subTitle="선택한 해당 아이디어 툴로 검사를 진행하시겠습니까? :)"
+        buttonTitle="해당 툴로 검증하기"
+        buttonLink="/verification/ibulsin?step=1"
+      ></Modal>
     </div>
   )
 }

app/(route)/verification/ibulsin/_components/Step1/index.module.css

@@ -19,10 +19,10 @@
 .step_info > h3 {
   padding: 12px 0;
   font-weight: 600;
-  font-size: 1.78rem;
+  font-size: 1.7rem;
 }
 .step_info > p {
-  font-size: 1.78rem;
+  font-size: 1.7rem;
 }
 .survey_container {
   background-color: #ffffff;

app/(route)/verification/ibulsin/_components/Step2/index.module.css

@@ -20,10 +20,11 @@
 .step_info > h3 {
   padding: 12px 0;
   font-weight: 500;
-  font-size: 1.78rem;
+  font-size: 1.7rem;
 }
+
 .step_info > p {
-  font-size: 1.78rem;
+  font-size: 1.7rem;
 }
 .survey_container {
   background-color: #ffffff;

app/(route)/verification/ibulsin/_components/Step3/index.module.css

@@ -20,10 +20,10 @@
 .step_info > h3 {
   padding: 12px 0;
   font-weight: 600;
-  font-size: 1.78rem;
+  font-size: 1.7rem;
 }
 .step_info > p {
-  font-size: 1.78rem;
+  font-size: 1.7rem;
 }
 .step {
   font-weight: 700;

app/(route)/verification/ibulsin/page.tsx

@@ -1,9 +1,10 @@
+import Loading from '@/app/_common/loading'
 import { Suspense } from 'react'
 import Step from './_components/Step'
 
 function page() {
   return (
-    <Suspense fallback={<div>loading...</div>}>
+    <Suspense fallback={<Loading />}>
       <Step />
     </Suspense>
   )

app/_common/loading/index.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image'
+import styles from '../../(route)/signin/Signin.module.css'
+import rocketLogo from '../../_assets/_images/rocketLogo.png'
+import S from './loading.module.css'
+
+function Loading() {
+  return (
+    <div className={S.wrapper}>
+      <h1>Loading ...</h1>
+      <div className={styles.img}>
+        <Image
+          src={rocketLogo}
+          alt="로켓 로고"
+          layout="responsive"
+          width={400}
+          height={400}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Loading

app/_common/loading/loading.module.css

@@ -0,0 +1,15 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  width: 480px;
+  min-height: 100vh;
+  height: auto;
+  color: white;
+  font-size: 1.4rem;
+  letter-spacing: 0.2px;
+  margin-top: 10px;
+}

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

app/_common/modal/index.tsx

@@ -0,0 +1,65 @@
+import Link from 'next/link'
+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
+  buttonLink?: string
+}
+
+function Modal({
+  open,
+  children,
+  title,
+  subTitle,
+  buttonTitle,
+  buttonLink,
+}: 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}>
+              {buttonLink ? (
+                <Link href={buttonLink}>{buttonTitle}</Link>
+              ) : (
+                <>{buttonTitle}</>
+              )}
+            </button>
+            <div className={S.closeBtnWrapper}>
+              <button onClick={closeModal} className={S.closeWrapper}>
+                X
+              </button>
+            </div>
+          </div>
+        </ModalPotal>
+      )}
+    </>
+  )
+}
+
+export default Modal

app/_common/modal/modal.module.css

@@ -0,0 +1,84 @@
+.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: 25px 23px;
+}
+
+.closeBtnWrapper {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 0.85rem;
+  color: white;
+  background-color: var(--purple-700);
+  width: 25px;
+  height: 25px;
+}
+
+.closeWrapper {
+  font-weight: 500;
+}
+
+.titleWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+
+.subTitle {
+  font-weight: 300;
+  font-size: 0.8rem;
+  text-align: center;
+  margin-top: 3px;
+  width: 150px;
+}
+
+.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;
+}

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>