Merge pull request #9 from primus-teoSprint/feat/#5

[#5]온보딩페이지 ui 구현 및 애니메이션 구현

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

@@ -0,0 +1,135 @@
+.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,20 @@
+'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,45 @@
+'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: any }) {
+    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,11 @@
+import OnboardPage from "./_components/OnBoardPage";
+
 function Onboard() {
-  return
+
+
+  return (
+    <OnboardPage/>
+  );
 }
 
-export default Onboard
+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,8 @@
+import Login from "./_components/Login"
 function Signin() {
-  return
+  return (
+    <Login/>
+  )
 }
 
 export default Signin