Merge pull request #20 from primus-teoSprint/fix/#15

[#15] 온보딩 페이지, 로그인 페이지 수정

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)/search/page.tsx

@@ -1,6 +1,6 @@
 import SearchBar from '../../_components/search/index'
-import CommonS from '../../page.module.css'
 import Nav from '../list/_components/nav'
+import CommonS from '../main/page.module.css'
 
 //TODO: 검색 결과 카드(toolCard) 가져오기
 function Search() {