From 5c5cda8bd8b96a206fcd25b5b0dc2c6c474a5c66 Mon Sep 17 00:00:00 2001 From: chaduhwan Date: Sat, 6 Apr 2024 19:53:55 +0900 Subject: [PATCH] =?UTF-8?q?[#5]=EC=98=A8=EB=B3=B4=EB=94=A9=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20ui=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20?= =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(route)/onboard/Onboard.module.css | 135 ++++++++++++++++++ app/(route)/onboard/_components/.gitkeep | 0 .../onboard/_components/OnBoardPage.tsx | 20 +++ .../onboard/_components/OnBoarding.tsx | 45 ++++++ app/(route)/onboard/_components/WatchWord.tsx | 26 ++++ app/(route)/onboard/page.tsx | 10 +- app/(route)/signin/Signin.module.css | 40 ++++++ app/(route)/signin/_components/.gitkeep | 0 app/(route)/signin/_components/Login.tsx | 23 +++ app/(route)/signin/page.tsx | 5 +- app/layout.tsx | 12 +- 11 files changed, 308 insertions(+), 8 deletions(-) create mode 100644 app/(route)/onboard/Onboard.module.css delete mode 100644 app/(route)/onboard/_components/.gitkeep create mode 100644 app/(route)/onboard/_components/OnBoardPage.tsx create mode 100644 app/(route)/onboard/_components/OnBoarding.tsx create mode 100644 app/(route)/onboard/_components/WatchWord.tsx create mode 100644 app/(route)/signin/Signin.module.css delete mode 100644 app/(route)/signin/_components/.gitkeep create mode 100644 app/(route)/signin/_components/Login.tsx diff --git a/app/(route)/onboard/Onboard.module.css b/app/(route)/onboard/Onboard.module.css new file mode 100644 index 0000000..effa61d --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/app/(route)/onboard/_components/.gitkeep b/app/(route)/onboard/_components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/app/(route)/onboard/_components/OnBoardPage.tsx b/app/(route)/onboard/_components/OnBoardPage.tsx new file mode 100644 index 0000000..80e2476 --- /dev/null +++ b/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 ( +
+ {showWatchWord && } + {!showWatchWord && } +
+ ); +} + +export default OnboardPage; diff --git a/app/(route)/onboard/_components/OnBoarding.tsx b/app/(route)/onboard/_components/OnBoarding.tsx new file mode 100644 index 0000000..ad1b494 --- /dev/null +++ b/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( +
+
+

아이디어 검증 툴 서비스

+

프리무스

+
+
+ 로켓로고 +
+
+
아이디어 검증하러 가기
+
+
아직 회원이 아니시라면?
+
회원가입
+
+
+
+ ); +} + +export default Onboarding; diff --git a/app/(route)/onboard/_components/WatchWord.tsx b/app/(route)/onboard/_components/WatchWord.tsx new file mode 100644 index 0000000..f2cd3f9 --- /dev/null +++ b/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(null); + + useEffect(() => { + const animationend = () => { + handleView(false) + } + + animationRef.current?.addEventListener('animationend', animationend); + + return () => { + animationRef.current?.removeEventListener('animationend', animationend); + }; + }, []); + return ( +
+

당신의 아이디어가

+

로켓처럼 성장하도록

+
+ ); +} + +export default WatchWord; diff --git a/app/(route)/onboard/page.tsx b/app/(route)/onboard/page.tsx index e767d95..9cc9dc9 100644 --- a/app/(route)/onboard/page.tsx +++ b/app/(route)/onboard/page.tsx @@ -1,5 +1,11 @@ +import OnboardPage from "./_components/OnBoardPage"; + function Onboard() { - return + + + return ( + + ); } -export default Onboard +export default Onboard; diff --git a/app/(route)/signin/Signin.module.css b/app/(route)/signin/Signin.module.css new file mode 100644 index 0000000..a8e3aff --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/app/(route)/signin/_components/.gitkeep b/app/(route)/signin/_components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/app/(route)/signin/_components/Login.tsx b/app/(route)/signin/_components/Login.tsx new file mode 100644 index 0000000..05026b7 --- /dev/null +++ b/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( + +
+

안녕하세요

+

프리무스입니다

+

서비스 이용을 위해서 로그인 해주세요

+ 로켓로고 +
카카오로 시작하기
+
비회원으로 둘러보기
+
+ ) +} + +export default Login \ No newline at end of file diff --git a/app/(route)/signin/page.tsx b/app/(route)/signin/page.tsx index 1109452..308b48d 100644 --- a/app/(route)/signin/page.tsx +++ b/app/(route)/signin/page.tsx @@ -1,5 +1,8 @@ +import Login from "./_components/Login" function Signin() { - return + return ( + + ) } export default Signin diff --git a/app/layout.tsx b/app/layout.tsx index c7a4983..a4e9c63 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -11,11 +11,13 @@ function RootLayout({ }>) { return ( - - - {children} - - + + + + {children} + + + ) }