Merge pull request #11 from primus-teoSprint/fix/prettier

[fix]프리티어적용
primus-teoSprint · Apr 6, 2024 · dcee803 · dcee803
2 parents da8ac7b + 3b838cb
commit dcee803
Show file tree

Hide file tree

Showing 11 changed files with 230 additions and 229 deletions.
diff --git 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; 
-  }
+}
+
+.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
@@ -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 (
     <div className={styles.background}>
-      {showWatchWord && <WatchWord handleView={setShowWatchWord}/>}
+      {showWatchWord && <WatchWord handleView={setShowWatchWord} />}
       {!showWatchWord && <Onboarding />}
     </div>
-  );
+  )
 }
 
-export default OnboardPage;
+export default OnboardPage
diff --git 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(
-        <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>
+  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;
+export default Onboarding
diff --git 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<HTMLDivElement>(null);
+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>
-    );
+  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;
+export default WatchWord