[#44] modal 적용

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

Hide file tree

Showing 8 changed files with 51 additions and 28 deletions.
diff --git a/app/(route)/indicators/_components/result/result.module.css b/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);
 }
diff --git a/app/(route)/indicators/indicators.module.css b/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);
 }
diff --git a/app/(route)/toolDetail/[toolId]/page.tsx b/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>
   )
 }

diff --git a/app/(route)/verification/ibulsin/_components/Step1/index.module.css b/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;

diff --git a/app/(route)/verification/ibulsin/_components/Step2/index.module.css b/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;

diff --git a/app/(route)/verification/ibulsin/_components/Step3/index.module.css b/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;

diff --git a/app/_common/modal/index.tsx b/app/_common/modal/index.tsx
@@ -1,16 +1,25 @@
+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
+  children?: ReactNode
   title?: string
   subTitle?: string
   buttonTitle?: string
+  buttonLink?: string
 }
 
-function Modal({ open, children, title, subTitle, buttonTitle }: ModalProps) {
+function Modal({
+  open,
+  children,
+  title,
+  subTitle,
+  buttonTitle,
+  buttonLink,
+}: ModalProps) {
   const [isOpen, setIsOpen] = useState(false)
 
   const openModal = () => {
@@ -34,7 +43,13 @@ function Modal({ open, children, title, subTitle, buttonTitle }: ModalProps) {
               <p className={S.subTitle}>{subTitle}</p>
             </div>
             {children}
-            <button className={S.buttonWrapper}>{buttonTitle}</button>
+            <button className={S.buttonWrapper}>
+              {buttonLink ? (
+                <Link href={buttonLink}>{buttonTitle}</Link>
+              ) : (
+                <>{buttonTitle}</>
+              )}
+            </button>
             <div className={S.closeBtnWrapper}>
               <button onClick={closeModal} className={S.closeWrapper}>
                 X

diff --git a/app/_common/modal/modal.module.css b/app/_common/modal/modal.module.css
@@ -20,7 +20,7 @@
   width: 320px;
   height: 340px;
   border-radius: 10px;
-  padding: 20px 23px;
+  padding: 25px 23px;
 }
 
 .closeBtnWrapper {
@@ -32,11 +32,11 @@
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  font-size: 0.95rem;
+  font-size: 0.85rem;
   color: white;
   background-color: var(--purple-700);
-  width: 30px;
-  height: 30px;
+  width: 25px;
+  height: 25px;
 }
 
 .closeWrapper {
@@ -52,12 +52,15 @@
 
 .title {
   font-weight: 700;
-  font-size: 1.4rem;
+  font-size: 1.5rem;
 }
 
 .subTitle {
   font-weight: 300;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
+  text-align: center;
+  margin-top: 3px;
+  width: 150px;
 }
 
 .buttonWrapper {