[#15] onboard page 수정 및 기본 라우팅 온보딩 페이지로 변경

app/(route)/main/page.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import Link from 'next/link'
+import Nav from '../../_common/nav/index'
+import Title from '../../_common/text/title'
+import Search from '../../_components/search'
+import S from './page.module.css'
+
+//TODO: 주석처리 사항들에 데이터 가져오기
+function Main() {
+  return (
+    <main className={S.wrapper}>
+      <Nav />
+      <div className={S.inWrapper}>
+        <Search />
+        <div className={S.marginWrapper}>
+          <Title title="인기 많은 툴" />
+        </div>
+        <div className={S.toolCardWrapper}>
+          {/* <ToolCard
+            title=""
+            subTitle=""
+            description=""
+            toolImg=""
+          /> */}
+        </div>
+        <div className={S.rowWrapper}>
+          <Title title="검증 툴 리스트" />
+          <Link href="/list">자세히 보기</Link>
+        </div>
+        <div className={S.keyWordCardWrapper}>
+          {/* <KeyWordTool title="" subTitle="" toolImg="" /> */}
+        </div>
+      </div>
+    </main>
+  )
+}
+
+export default Main

app/(route)/onboard/Onboard.module.css

@@ -1,97 +1,100 @@
 .background {
-  background: #6c76f4;
-  width: 100%;
-  height: 100%;
-
-  overflow: hidden;
+  background: var(--purple-700);
+  display: flex;
+  flex-direction: column;
+  padding: 0 22px;
+  min-height: 100vh;
+  height: auto;
 }
 
 .wordwrap {
-  height: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
 }
+
 .wrap {
   height: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 
 .word {
   color: #fff;
   text-align: center;
-  font-size: 36px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
+  font-size: 2.6rem;
+  font-weight: 800;
 }
 
 .smallword {
   color: #fff;
   text-align: center;
-  font-size: 20px;
-  font-style: normal;
+  font-size: 1.35rem;
   font-weight: 600;
-  line-height: normal;
+}
+
+.nonMember {
+  font-size: 0.89rem;
+  color: #fbfbfb;
 }
 
 .largeword {
   color: #fff;
   text-align: center;
-  font-size: 64px;
-  font-style: normal;
-  font-weight: 800;
-  line-height: normal;
+  font-size: 4.3rem;
+  font-weight: 700;
 }
 
-.gray {
-  color: #e8e8e8;
-}
 .blue {
   color: #183876;
 }
+
 .topmargin {
   margin-top: 100px;
 }
+
 .leftmargin {
-  margin-left: 10px;
+  margin-left: 5px;
   cursor: pointer;
+  color: white;
+  font-size: 0.93rem;
 }
-.leftmargin:hover {
-  color: #04030d;
-}
+
 .flex {
-  margin-top: 10px;
+  margin: 13px 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .intosignin {
-  width: 360px;
-  height: 60px;
-  border-radius: 7px;
-  background: #fff;
-
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 55px;
+  gap: 7px;
+  margin-top: 22px;
+  border-radius: 8px;
+  background: #fff;
+  color: #121212;
 
-  color: #04030d;
-  text-align: center;
-  font-size: 20px;
-
-  font-style: normal;
-  font-weight: 600;
-  letter-spacing: 0.1px;
-
+  font-size: 1.15rem;
+  font-weight: 700;
   cursor: pointer;
 }
 
 .intosignin:hover {
   opacity: 0.8;
+  transition: all 0.4s;
+}
+
+.img {
+  width: 430px;
+  height: 430px;
+  margin-top: 48.4px;
 }
 
 @keyframes fadeInUp {
@@ -115,20 +118,22 @@
 }
 
 .word:nth-child(2) {
-  animation-delay: 1s;
+  animation-delay: 1.5s;
 }
 
 .wrap {
   opacity: 0;
-  animation: fadeInUp 1s ease forwards;
+  animation: fadeInUp 1.6s ease forwards;
 }
+
 .wrap:nth-child(1) {
   animation-delay: 0.5s;
 }
 
 .wrap:nth-child(2) {
-  animation-delay: 1s;
+  animation-delay: 2s;
 }
+
 .wrap:nth-child(3) {
-  animation-delay: 2s;
+  animation-delay: 2mss;
 }

app/(route)/onboard/_components/OnBoarding.tsx

@@ -1,19 +1,19 @@
 'use client'
 
-import styles from '../Onboard.module.css'
-import rocketLogo from '../../../_assets/_images/rocketLogo.png'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
+import rocketLogo from '../../../_assets/_images/rocketLogo.png'
+import styles from '../Onboard.module.css'
 
 function Onboarding() {
   const router = useRouter()
 
-  const handleClickSignin = () => {
-    router.push('/signin')
+  const handleClickMain = () => {
+    router.push('/main')
   }
 
   const handleCilckSignup = () => {
-    router.push('/singup')
+    router.push('/signin')
   }
 
   return (
@@ -22,29 +22,28 @@ function Onboarding() {
         <p className={styles.smallword}>아이디어 검증 툴 서비스</p>
         <p className={styles.largeword}>프리무스</p>
       </div>
-      <div style={{ width: '370px', height: '370px' }}>
+      <div className={styles.img}>
         <Image
           src={rocketLogo}
-          alt="로켓로고"
+          alt="로켓 로고"
           layout="responsive"
-          width={370}
-          height={370}
+          width={430}
+          height={430}
         />
       </div>
-      <div className={styles.topmargin}>
-        <div className={styles.intosignin} onClick={handleClickSignin}>
-          아이디어 검증하러 가기
+
+      <div className={styles.intosignin} onClick={handleClickMain}>
+        아이디어 검증하러 가기
+      </div>
+      <div className={styles.flex}>
+        <div className={`${styles.smallword} ${styles.nonMember}`}>
+          아직 회원이 아니시라면?
         </div>
-        <div className={styles.flex}>
-          <div className={`${styles.smallword} ${styles.gray}`}>
-            아직 회원이 아니시라면?
-          </div>
-          <div
-            className={`${styles.smallword} ${styles.leftmargin}`}
-            onClick={handleCilckSignup}
-          >
-            회원가입
-          </div>
+        <div
+          className={`${styles.smallword} ${styles.leftmargin}`}
+          onClick={handleCilckSignup}
+        >
+          회원가입
         </div>
       </div>
     </div>

app/(route)/onboard/_components/WatchWord.tsx

@@ -18,7 +18,7 @@ function WatchWord({ handleView }: { handleView: (params: boolean) => void }) {
   return (
     <div className={styles.wordwrap} ref={animationRef}>
       <p className={styles.word}>당신의 아이디어가</p>
-      <p className={styles.word}>로켓처럼 성장하도록</p>
+      <p className={styles.word}>로켓처럼 성장하도록.</p>
     </div>
   )
 }

app/(route)/signin/Signin.module.css

@@ -16,17 +16,16 @@
 
 .largeword {
   color: #fff;
-  font-size: 29px;
-  font-style: normal;
-  font-weight: 600;
+  font-size: 2.2rem;
+  font-weight: 700;
   line-height: normal;
 }
 
 .smallword {
   color: #fff;
   font-size: 18px;
   font-weight: 300;
-  line-height: normal;
+  margin-top: 3px;
 }
 
 .img {

app/(route)/signin/_components/Login.tsx

@@ -12,7 +12,7 @@ function Login() {
   const router = useRouter()
 
   const handleClickNonMember = () => {
-    router.push('/')
+    router.push('/main')
   }
   const controls = useAnimation()
 
@@ -35,7 +35,7 @@ function Login() {
   }, [])
 
   const handleClicksignin = () => {
-    router.push('/')
+    router.push('/main')
   }
 
   return (

app/(route)/verification/ibulsin/_components/CancelBtn/index.tsx

@@ -1,9 +1,8 @@
 'use client'
 
-import React from 'react'
-import S from './index.module.css'
-import { MdChevronLeft } from 'react-icons/md'
 import { useRouter } from 'next/navigation'
+import { MdChevronLeft } from 'react-icons/md'
+import S from './index.module.css'
 
 function CancelBtn() {
   const router = useRouter()
@@ -14,7 +13,7 @@ function CancelBtn() {
     )
 
     if (verify) {
-      router.push('/')
+      router.push('/main')
     }
   }
 

app/_common/nav/index.tsx

@@ -7,7 +7,7 @@ import S from './nav.module.css'
 function Nav() {
   return (
     <div className={S.nav}>
-      <Link href="/">
+      <Link href="/main">
         <Image src={logo} alt="로고" width={100} height={100} />
       </Link>
 

app/_style/globals.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap');
+
 * {
   margin: 0;
   padding: 0;
@@ -8,9 +10,9 @@
 html,
 body {
   color: black;
-  -ms-overflow-style: none; 
-  scrollbar-width: none; 
-  background-color: rgb(245,245,245);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  background-color: rgb(245, 245, 245);
 }
 
 button,
@@ -23,4 +25,3 @@ a {
 ::-webkit-scrollbar {
   display: none;
 }
-