Merge branch 'main' into develop

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

@@ -111,15 +111,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;
@@ -128,6 +128,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)/signin/_components/Login.tsx

@@ -4,6 +4,7 @@ import { motion, useAnimation } from 'framer-motion'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
+
 import { RiKakaoTalkFill } from 'react-icons/ri'
 import rocketLogo from '../../../_assets/_images/rocketLogo.png'
 import styles from '../Signin.module.css'
@@ -14,20 +15,23 @@ function Login() {
   const handleClickNonMember = () => {
     router.push('/main')
   }
+
   const controls = useAnimation()
 
   const animateDiagonal = async () => {
-    await controls.start({
+    const animationStart = controls.start({
       x: '25px',
       y: '-28px',
       transition: { duration: 5 },
     })
-    await controls.start({
+    const animationEnd = controls.start({
       x: '-20px',
       y: '-10px',
       transition: { duration: 5 },
     })
-    animateDiagonal()
+
+    await animationStart
+    await animationEnd
   }
 
   useEffect(() => {

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

@@ -1,5 +1,6 @@
 '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'
@@ -106,10 +107,13 @@ function ToolDetail() {
           </div>
         )}
       </div>
-
-      <Link href={`/verification/ibulsin?step=1`}>
-        <div className={S.verification}>검증하기</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>