diff --git a/app/(route)/onboard/Onboard.module.css b/app/(route)/onboard/Onboard.module.css index effa61d..ddd721c 100644 --- a/app/(route)/onboard/Onboard.module.css +++ b/app/(route)/onboard/Onboard.module.css @@ -1,135 +1,134 @@ .background { - background: #6C76F4; - width: 100%; - height: 100%; + background: #6c76f4; + width: 100%; + height: 100%; - overflow: hidden; + overflow: hidden; } .wordwrap { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; } -.wrap{ - height: 100%; - display: flex; - flex-direction: column; - 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; + 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; +.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; + color: #fff; + text-align: center; + font-size: 64px; + font-style: normal; + font-weight: 800; + line-height: normal; } .gray { - color: #E8E8E8; + color: #e8e8e8; } .blue { - color: #183876; + color: #183876; } .topmargin { - margin-top: 100px; + margin-top: 100px; } .leftmargin { - margin-left: 10px; - cursor: pointer; + margin-left: 10px; + cursor: pointer; } .leftmargin:hover { - color: #04030D; + color: #04030d; } .flex { - margin-top: 10px; - display: flex; - align-items: center; - justify-content: center; + margin-top: 10px; + display: flex; + align-items: center; + justify-content: center; } .intosignin { - width: 360px; - height: 60px; - border-radius: 7px; - background: #FFF; + width: 360px; + height: 60px; + border-radius: 7px; + background: #fff; - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; - color: #04030D; - text-align: center; - font-size: 20px; + color: #04030d; + text-align: center; + font-size: 20px; - font-style: normal; - font-weight: 600; - letter-spacing: 0.1px; + font-style: normal; + font-weight: 600; + letter-spacing: 0.1px; - cursor: pointer; + cursor: pointer; } .intosignin:hover { - opacity: 0.8; + 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{ + 0% { opacity: 0; - animation: fadeInUp 1s ease forwards; + transform: translateY(20px); } - .wrap:nth-child(1) { - animation-delay: 0.5s; + 100% { + opacity: 1; + transform: translateY(0); } - - .wrap:nth-child(2) { - animation-delay: 1s; - } - .wrap:nth-child(3) { - animation-delay: 2s; - } \ No newline at end of file +} + +.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; +} diff --git a/app/(route)/onboard/_components/OnBoardPage.tsx b/app/(route)/onboard/_components/OnBoardPage.tsx index 80e2476..bb8cad4 100644 --- a/app/(route)/onboard/_components/OnBoardPage.tsx +++ b/app/(route)/onboard/_components/OnBoardPage.tsx @@ -1,20 +1,19 @@ 'use client' -import { useState } from 'react'; -import Onboarding from "../_components/OnBoarding"; -import WatchWord from "../_components/WatchWord"; -import styles from '../Onboard.module.css'; +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); - + const [showWatchWord, setShowWatchWord] = useState(true) return (
- {showWatchWord && } + {showWatchWord && } {!showWatchWord && }
- ); + ) } -export default OnboardPage; +export default OnboardPage diff --git a/app/(route)/onboard/_components/OnBoarding.tsx b/app/(route)/onboard/_components/OnBoarding.tsx index ad1b494..50fe0ad 100644 --- a/app/(route)/onboard/_components/OnBoarding.tsx +++ b/app/(route)/onboard/_components/OnBoarding.tsx @@ -1,45 +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'; +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') - } +function Onboarding() { + const router = useRouter() - const handleCilckSignup = () => { - router.push('/singup') - } + const handleClickSignin = () => { + router.push('/signin') + } - return( -
-
-

아이디어 검증 툴 서비스

-

프리무스

-
-
- 로켓로고 -
-
-
아이디어 검증하러 가기
-
-
아직 회원이 아니시라면?
-
회원가입
-
-
+ const handleCilckSignup = () => { + router.push('/singup') + } + + return ( +
+
+

아이디어 검증 툴 서비스

+

프리무스

+
+
+ 로켓로고 +
+
+
+ 아이디어 검증하러 가기 +
+
+
+ 아직 회원이 아니시라면? +
+
+ 회원가입 +
- ); +
+
+ ) } -export default Onboarding; +export default Onboarding diff --git a/app/(route)/onboard/_components/WatchWord.tsx b/app/(route)/onboard/_components/WatchWord.tsx index f2cd3f9..2a71652 100644 --- a/app/(route)/onboard/_components/WatchWord.tsx +++ b/app/(route)/onboard/_components/WatchWord.tsx @@ -1,26 +1,26 @@ -import { useEffect,useRef } from 'react'; -import styles from '../Onboard.module.css'; +import { useEffect, useRef } from 'react' +import styles from '../Onboard.module.css' -function WatchWord ({ handleView }: { handleView: any }) { - const animationRef = useRef(null); +function WatchWord({ handleView }: { handleView: (params: boolean) => void }) { + const animationRef = useRef(null) - useEffect(() => { - const animationend = () => { - handleView(false) - } - - animationRef.current?.addEventListener('animationend', animationend); - - return () => { - animationRef.current?.removeEventListener('animationend', animationend); - }; - }, []); - return ( -
-

당신의 아이디어가

-

로켓처럼 성장하도록

-
- ); + useEffect(() => { + const animationend = () => { + handleView(false) + } + + animationRef.current?.addEventListener('animationend', animationend) + + return () => { + animationRef.current?.removeEventListener('animationend', animationend) + } + }, []) + return ( +
+

당신의 아이디어가

+

로켓처럼 성장하도록

+
+ ) } -export default WatchWord; +export default WatchWord diff --git a/app/(route)/onboard/page.tsx b/app/(route)/onboard/page.tsx index 9cc9dc9..a61c160 100644 --- a/app/(route)/onboard/page.tsx +++ b/app/(route)/onboard/page.tsx @@ -1,11 +1,7 @@ -import OnboardPage from "./_components/OnBoardPage"; +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 index a8e3aff..c7e0db4 100644 --- a/app/(route)/signin/Signin.module.css +++ b/app/(route)/signin/Signin.module.css @@ -1,40 +1,40 @@ .background { - background: #6C76F4; - width: 100%; - height: 100%; + background: #6c76f4; + width: 100%; + height: 100%; } .wordwrap { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; + 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; + 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; + width: 360px; + height: 60px; + border-radius: 7px; + background: #fff; - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; - color: #04030D; - text-align: center; - font-size: 20px; + color: #04030d; + text-align: center; + font-size: 20px; - font-style: normal; - font-weight: 600; - letter-spacing: 0.1px; -} \ No newline at end of file + font-style: normal; + font-weight: 600; + letter-spacing: 0.1px; +} diff --git a/app/(route)/signin/_components/Login.tsx b/app/(route)/signin/_components/Login.tsx index 05026b7..70660f7 100644 --- a/app/(route)/signin/_components/Login.tsx +++ b/app/(route)/signin/_components/Login.tsx @@ -1,23 +1,23 @@ -import rocketLogo from '../../../_assets/_images/rocketLogo.png'; -import Image from 'next/image'; +import rocketLogo from '../../../_assets/_images/rocketLogo.png' +import Image from 'next/image' -function Login(){ - return( - -
-

안녕하세요

-

프리무스입니다

-

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

- 로켓로고 -
카카오로 시작하기
-
비회원으로 둘러보기
-
- ) +function Login() { + return ( +
+

안녕하세요

+

프리무스입니다

+

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

+ 로켓로고 +
카카오로 시작하기
+
비회원으로 둘러보기
+
+ ) } -export default Login \ No newline at end of file +export default Login diff --git a/app/(route)/signin/page.tsx b/app/(route)/signin/page.tsx index 308b48d..c869103 100644 --- a/app/(route)/signin/page.tsx +++ b/app/(route)/signin/page.tsx @@ -1,8 +1,6 @@ -import Login from "./_components/Login" +import Login from './_components/Login' function Signin() { - return ( - - ) + return } export default Signin diff --git a/app/(route)/verification/ibulsin/_components/PaginationBtn/index.module.css b/app/(route)/verification/ibulsin/_components/PaginationBtn/index.module.css index 6136b3f..1649000 100644 --- a/app/(route)/verification/ibulsin/_components/PaginationBtn/index.module.css +++ b/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; } diff --git a/app/(route)/verification/ibulsin/_components/Step1/index.module.css b/app/(route)/verification/ibulsin/_components/Step1/index.module.css index 6ace6fe..31d78e2 100644 --- a/app/(route)/verification/ibulsin/_components/Step1/index.module.css +++ b/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; diff --git a/app/(route)/verification/ibulsin/_components/Textarea/index.module.css b/app/(route)/verification/ibulsin/_components/Textarea/index.module.css index 78d1625..2d194bd 100644 --- a/app/(route)/verification/ibulsin/_components/Textarea/index.module.css +++ b/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; }