[#21] 투자 지표 페이지, 로딩중 페이지 개발

app/(route)/indicators/_components/form/form.module.css

@@ -0,0 +1,37 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.title {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.subTitle {
+  font-size: 0.7rem;
+  font-weight: 300;
+  margin-bottom: 10px;
+}
+
+.inputWrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  border-radius: 15px;
+  padding: 14px 20px;
+  border: 1px solid #efefef;
+}
+
+.input {
+  all: unset;
+  font-size: 0.83rem;
+}
+
+.error {
+  font-size: 0.6rem;
+  color: #FF453A;
+  margin-top: 4px;
+}

app/(route)/indicators/_components/form/index.tsx

@@ -0,0 +1,24 @@
+import S from './form.module.css'
+
+interface Props {
+  title: string
+  subTitle?: string
+}
+
+function Form({
+  title,
+  subTitle = '해당 항목의 수치는 어떻게 되나요?',
+}: Props) {
+  return (
+    <div className={S.wrapper}>
+      <span className={S.title}>{title}</span>
+      <p className={S.subTitle}>{subTitle}</p>
+      <div className={S.inputWrapper}>
+        <input className={S.input} placeholder="수치를 입력해 주세요." />
+      </div>
+      <span className={S.error}>숫자만 입력 가능합니다.</span>
+    </div>
+  )
+}
+
+export default Form

app/(route)/indicators/_components/result/index.tsx

@@ -0,0 +1,21 @@
+import Nav from '@/app/_common/nav'
+import Title from '@/app/_common/text/title'
+import S from './result.module.css'
+
+//TODO: 사용자가 클릭한 아이디어 이름과 해당 툴을 사용한 사용자 수가 보여집니다.
+function Result() {
+  return (
+    <div className={S.wrapper}>
+      <Nav />
+      <div>
+        <Title title="검증 결과" />
+        <div>
+          <Title title="아이디어 이름" />
+          <span>전체 사용자 162명</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Result

app/(route)/indicators/_components/result/result.module.css

@@ -0,0 +1,6 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 50px;
+  padding: 0 18px;
+}

app/(route)/indicators/indicators.module.css

@@ -0,0 +1,52 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.formWrapper {
+  position: relative;
+  margin-top: 46px;
+  min-height: 100vh;
+  height: 100%;
+}
+
+.paddingWrapper {
+  padding: 0 18px;
+}
+
+.overflowWrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 0 18px;
+  overflow: auto;
+  height: 690px;
+  width: 100%;
+  gap: 14px;
+}
+
+.bottomWrapper {
+  position: absolute;
+  bottom: 0;
+  background-color: #fbfbfb;
+  width: 100%;
+  height: 150px;
+  border-top-left-radius: 38px;
+  border-top-right-radius: 38px;
+}
+
+.submitBtnWrapper {
+  position: absolute;
+  right: 16px;
+  bottom: 50px;
+
+  color: white;
+  font-weight: 700;
+  font-size: 1.2rem;
+  text-align: center;
+  width: 100px;
+  height: auto;
+  padding: 10px 20px;
+  border-radius: 9px;
+  background-color: var(--purple-700);
+}

app/(route)/indicators/page.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import Title from '@/app/_common/text/title'
+import Link from 'next/link'
+import Nav from '../list/_components/nav'
+import Form from './_components/form'
+import S from './indicators.module.css'
+
+//* 투자 지표 입력 페이지입니다.
+//TODO: title에 사용자가 입력했던 요소들이 보여지게 됩니다.
+function Indicators() {
+  return (
+    <>
+      <Nav />
+      <div className={S.wrapper}>
+        <div className={S.paddingWrapper}>
+          <Title title="아이디어 제목" />
+        </div>
+        <form className={S.formWrapper}>
+          <div className={S.overflowWrapper}>
+            <Form
+              title="전체 이용자 수"
+              subTitle="전체 이용자 수를 가지고 총 결과 지표가 계산됩니다."
+            />
+            {/* <Form title="이메일" /> */}
+          </div>
+
+          <div className={S.bottomWrapper}>
+            <button type="submit" className={S.submitBtnWrapper}>
+              <Link href="/result">제출하기</Link>
+            </button>
+          </div>
+        </form>
+      </div>
+    </>
+  )
+}
+
+export default Indicators

app/(route)/list/_components/nav/index.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/navigation'
 import { GoArrowLeft } from 'react-icons/go'
 import S from './nav.module.css'
 
-function Nav({ title }: { title: string }) {
+function Nav({ title }: { title?: string }) {
   const router = useRouter()
 
   return (

app/(route)/main/page.module.css

@@ -36,3 +36,15 @@
   flex-direction: column;
   gap: 18px;
 }
+
+.columnWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex-wrap: wrap;
+  min-height: 100vh;
+  width: 100%;
+  padding-bottom: 300px;
+}

app/(route)/main/page.tsx

@@ -12,7 +12,9 @@ function Main() {
     <main className={S.wrapper}>
       <Nav />
       <div className={S.inWrapper}>
-        <Search />
+        <Link href="/search">
+          <Search />
+        </Link>
         <div className={S.marginWrapper}>
           <Title title="인기 많은 툴" />
         </div>

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

@@ -135,5 +135,5 @@
 }
 
 .wrap:nth-child(3) {
-  animation-delay: 2mss;
+  animation-delay: 2s;
 }

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

@@ -1,7 +1,17 @@
 import { useEffect, useRef } from 'react'
 import styles from '../Onboard.module.css'
 
-function WatchWord({ handleView }: { handleView: (params: boolean) => void }) {
+function WatchWord({
+  handleView,
+  firstText = '당신의 아이디어가',
+  twoText = '로켓처럼 성장하도록.',
+  onAnimationEnd,
+}: {
+  handleView: (params: boolean) => void
+  firstText?: string
+  twoText?: string
+  onAnimationEnd?: () => void
+}) {
   const animationRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -15,10 +25,29 @@ function WatchWord({ handleView }: { handleView: (params: boolean) => void }) {
       animationRef.current?.removeEventListener('animationend', animationend)
     }
   }, [])
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      {
+        onAnimationEnd && onAnimationEnd()
+      }
+    }, 2000)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const handleAnimationEnd = () => {
+    onAnimationEnd && onAnimationEnd()
+  }
+
   return (
-    <div className={styles.wordwrap} ref={animationRef}>
-      <p className={styles.word}>당신의 아이디어가</p>
-      <p className={styles.word}>로켓처럼 성장하도록.</p>
+    <div
+      className={styles.wordwrap}
+      ref={animationRef}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      <p className={styles.word}>{firstText}</p>
+      <p className={styles.word}>{twoText}</p>
     </div>
   )
 }

app/(route)/result/page.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { useState } from 'react'
+import Result from '../indicators/_components/result'
+import styles from '../onboard/Onboard.module.css'
+import WatchWord from '../onboard/_components/WatchWord'
+
+function Loading() {
+  const [showWatchWord, setShowWatchWord] = useState(true)
+
+  const handleAnimationEnd = () => {
+    setShowWatchWord(false)
+  }
+
+  return (
+    <>
+      {showWatchWord ? (
+        <div className={styles.background}>
+          <WatchWord
+            handleView={setShowWatchWord}
+            firstText="아이디어 검증 결과"
+            twoText="정리중입니다!"
+            onAnimationEnd={handleAnimationEnd}
+          />
+        </div>
+      ) : (
+        <Result />
+      )}
+    </>
+  )
+}
+
+export default Loading