Merge branch 'develop' of https://github.com/primus-teoSprint/fe into…

… feat/#6

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

@@ -0,0 +1,134 @@
+.background {
+  background: #6c76f4;
+  width: 100%;
+  height: 100%;
+
+  overflow: hidden;
+}
+
+.wordwrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: 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;
+}
+
+.smallword {
+  color: #fff;
+  text-align: center;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.largeword {
+  color: #fff;
+  text-align: center;
+  font-size: 64px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: normal;
+}
+
+.gray {
+  color: #e8e8e8;
+}
+.blue {
+  color: #183876;
+}
+.topmargin {
+  margin-top: 100px;
+}
+.leftmargin {
+  margin-left: 10px;
+  cursor: pointer;
+}
+.leftmargin:hover {
+  color: #04030d;
+}
+.flex {
+  margin-top: 10px;
+  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;
+
+  color: #04030d;
+  text-align: center;
+  font-size: 20px;
+
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0.1px;
+
+  cursor: pointer;
+}
+
+.intosignin:hover {
+  opacity: 0.8;
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.word {
+  opacity: 0;
+  animation: fadeInUp 2s ease forwards;
+}
+
+.word:nth-child(1) {
+  animation-delay: 0.5s;
+}
+
+.word:nth-child(2) {
+  animation-delay: 1s;
+}
+
+.wrap {
+  opacity: 0;
+  animation: fadeInUp 1s ease forwards;
+}
+.wrap:nth-child(1) {
+  animation-delay: 0.5s;
+}
+
+.wrap:nth-child(2) {
+  animation-delay: 1s;
+}
+.wrap:nth-child(3) {
+  animation-delay: 2s;
+}

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

@@ -0,0 +1,19 @@
+'use client'
+
+import { useState } from 'react'
+import Onboarding from '../_components/OnBoarding'
+import WatchWord from '../_components/WatchWord'
+import styles from '../Onboard.module.css'
+
+function OnboardPage() {
+  const [showWatchWord, setShowWatchWord] = useState(true)
+
+  return (
+    <div className={styles.background}>
+      {showWatchWord && <WatchWord handleView={setShowWatchWord} />}
+      {!showWatchWord && <Onboarding />}
+    </div>
+  )
+}
+
+export default OnboardPage

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

@@ -0,0 +1,54 @@
+'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'
+
+function Onboarding() {
+  const router = useRouter()
+
+  const handleClickSignin = () => {
+    router.push('/signin')
+  }
+
+  const handleCilckSignup = () => {
+    router.push('/singup')
+  }
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.topmargin}>
+        <p className={styles.smallword}>아이디어 검증 툴 서비스</p>
+        <p className={styles.largeword}>프리무스</p>
+      </div>
+      <div style={{ width: '370px', height: '370px' }}>
+        <Image
+          src={rocketLogo}
+          alt="로켓로고"
+          layout="responsive"
+          width={370}
+          height={370}
+        />
+      </div>
+      <div className={styles.topmargin}>
+        <div className={styles.intosignin} onClick={handleClickSignin}>
+          아이디어 검증하러 가기
+        </div>
+        <div className={styles.flex}>
+          <div className={`${styles.smallword} ${styles.gray}`}>
+            아직 회원이 아니시라면?
+          </div>
+          <div
+            className={`${styles.smallword} ${styles.leftmargin}`}
+            onClick={handleCilckSignup}
+          >
+            회원가입
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Onboarding

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

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react'
+import styles from '../Onboard.module.css'
+
+function WatchWord({ handleView }: { handleView: (params: boolean) => void }) {
+  const animationRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const animationend = () => {
+      handleView(false)
+    }
+
+    animationRef.current?.addEventListener('animationend', animationend)
+
+    return () => {
+      animationRef.current?.removeEventListener('animationend', animationend)
+    }
+  }, [])
+  return (
+    <div className={styles.wordwrap} ref={animationRef}>
+      <p className={styles.word}>당신의 아이디어가</p>
+      <p className={styles.word}>로켓처럼 성장하도록</p>
+    </div>
+  )
+}
+
+export default WatchWord

app/(route)/onboard/page.tsx

@@ -1,5 +1,7 @@
+import OnboardPage from './_components/OnBoardPage'
+
 function Onboard() {
-  return
+  return <OnboardPage />
 }
 
 export default Onboard

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

@@ -0,0 +1,40 @@
+.background {
+  background: #6c76f4;
+  width: 100%;
+  height: 100%;
+}
+
+.wordwrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.word {
+  color: #fff;
+  text-align: center;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.intosignup {
+  width: 360px;
+  height: 60px;
+  border-radius: 7px;
+  background: #fff;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: #04030d;
+  text-align: center;
+  font-size: 20px;
+
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0.1px;
+}

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

@@ -0,0 +1,23 @@
+import rocketLogo from '../../../_assets/_images/rocketLogo.png'
+import Image from 'next/image'
+
+function Login() {
+  return (
+    <div>
+      <p>안녕하세요</p>
+      <p>프리무스입니다</p>
+      <p>서비스 이용을 위해서 로그인 해주세요</p>
+      <Image
+        src={rocketLogo}
+        alt="로켓로고"
+        layout="responsive"
+        width={370}
+        height={370}
+      />
+      <div>카카오로 시작하기</div>
+      <div>비회원으로 둘러보기</div>
+    </div>
+  )
+}
+
+export default Login

app/(route)/signin/page.tsx

@@ -1,5 +1,6 @@
+import Login from './_components/Login'
 function Signin() {
-  return
+  return <Login />
 }
 
 export default Signin

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

@@ -3,12 +3,12 @@
   justify-content: center;
   align-items: center;
   border-radius: 999px;
-  background-color: #B9CCFF;
-  color:#939BFF;
-  width:30px;
-  height:30px
+  background-color: #b9ccff;
+  color: #939bff;
+  width: 30px;
+  height: 30px;
 }
 .darken {
-  color: #6C76F4;
-  background-color: #FFFFFF;
+  color: #6c76f4;
+  background-color: #ffffff;
 }

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

@@ -4,7 +4,7 @@
   justify-content: space-between;
 }
 .step_info {
-  color: #FFFFFF;
+  color: #ffffff;
   margin: 24px;
   margin-bottom: 32px;
 }
@@ -17,7 +17,7 @@
   font-size: 24px;
 }
 .survey_container {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   padding: 12px;
@@ -27,7 +27,7 @@
 }
 .input_container > .input_title {
   font-size: 16px;
-  padding:12px 0;
+  padding: 12px 0;
 }
 .input_container > .input_explain {
   font-size: 12px;
@@ -48,7 +48,7 @@
 }
 .next_btn {
   background-color: var(--purple-700);
-  color: #FFFFFF;
+  color: #ffffff;
   padding: 12px 20px;
   font-size: 14px;
   font-weight: bold;

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

@@ -11,7 +11,7 @@
 .textarea_container > textarea {
   width: 100%;
   height: 80px;
-  border:none;
+  border: none;
   outline: none;
   resize: none;
 }