From 7495a13a94dca43b8189b916e1acef0a13679086 Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Sun, 7 Apr 2024 13:19:46 +0900
Subject: [PATCH] =?UTF-8?q?[#21]=20=ED=88=AC=EC=9E=90=20=EC=A7=80=ED=91=9C?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80,=20=EB=A1=9C=EB=94=A9=EC=A4=91?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/form/form.module.css          |  37 +++++
 .../indicators/_components/form/index.tsx     |  24 +++
 .../indicators/_components/result/index.tsx   |  21 +++
 .../_components/result/result.module.css      |   6 +
 app/(route)/indicators/indicators.module.css  |  52 +++++++
 app/(route)/indicators/page.tsx               |  39 +++++
 app/(route)/list/_components/nav/index.tsx    |   2 +-
 app/(route)/main/page.module.css              |  12 ++
 app/(route)/main/page.tsx                     |   4 +-
 app/(route)/onboard/Onboard.module.css        |   2 +-
 app/(route)/onboard/_components/WatchWord.tsx |  37 ++++-
 app/(route)/result/page.tsx                   |  33 +++++
 app/(route)/result/result.module.css          | 139 ++++++++++++++++++
 app/(route)/search/page.tsx                   |   5 +-
 14 files changed, 405 insertions(+), 8 deletions(-)
 create mode 100644 app/(route)/indicators/_components/form/form.module.css
 create mode 100644 app/(route)/indicators/_components/form/index.tsx
 create mode 100644 app/(route)/indicators/_components/result/index.tsx
 create mode 100644 app/(route)/indicators/_components/result/result.module.css
 create mode 100644 app/(route)/indicators/indicators.module.css
 create mode 100644 app/(route)/indicators/page.tsx
 create mode 100644 app/(route)/result/page.tsx
 create mode 100644 app/(route)/result/result.module.css

diff --git a/app/(route)/indicators/_components/form/form.module.css b/app/(route)/indicators/_components/form/form.module.css
new file mode 100644
index 0000000..335e174
--- /dev/null
+++ b/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;
+}
diff --git a/app/(route)/indicators/_components/form/index.tsx b/app/(route)/indicators/_components/form/index.tsx
new file mode 100644
index 0000000..826beda
--- /dev/null
+++ b/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
diff --git a/app/(route)/indicators/_components/result/index.tsx b/app/(route)/indicators/_components/result/index.tsx
new file mode 100644
index 0000000..9d8bdc4
--- /dev/null
+++ b/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
diff --git a/app/(route)/indicators/_components/result/result.module.css b/app/(route)/indicators/_components/result/result.module.css
new file mode 100644
index 0000000..5d37d8f
--- /dev/null
+++ b/app/(route)/indicators/_components/result/result.module.css
@@ -0,0 +1,6 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 50px;
+  padding: 0 18px;
+}
diff --git a/app/(route)/indicators/indicators.module.css b/app/(route)/indicators/indicators.module.css
new file mode 100644
index 0000000..c317b80
--- /dev/null
+++ b/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);
+}
diff --git a/app/(route)/indicators/page.tsx b/app/(route)/indicators/page.tsx
new file mode 100644
index 0000000..34fb473
--- /dev/null
+++ b/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
diff --git a/app/(route)/list/_components/nav/index.tsx b/app/(route)/list/_components/nav/index.tsx
index f61fc44..d175a59 100644
--- a/app/(route)/list/_components/nav/index.tsx
+++ b/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 (
diff --git a/app/(route)/main/page.module.css b/app/(route)/main/page.module.css
index 4944c6f..e6c799d 100644
--- a/app/(route)/main/page.module.css
+++ b/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;
+}
diff --git a/app/(route)/main/page.tsx b/app/(route)/main/page.tsx
index 02ba5d1..ffc9c58 100644
--- a/app/(route)/main/page.tsx
+++ b/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>
diff --git a/app/(route)/onboard/Onboard.module.css b/app/(route)/onboard/Onboard.module.css
index 2284acd..9109c7f 100644
--- a/app/(route)/onboard/Onboard.module.css
+++ b/app/(route)/onboard/Onboard.module.css
@@ -135,5 +135,5 @@
 }
 
 .wrap:nth-child(3) {
-  animation-delay: 2mss;
+  animation-delay: 2s;
 }
diff --git a/app/(route)/onboard/_components/WatchWord.tsx b/app/(route)/onboard/_components/WatchWord.tsx
index ed9f223..df29f1e 100644
--- a/app/(route)/onboard/_components/WatchWord.tsx
+++ b/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>
   )
 }
diff --git a/app/(route)/result/page.tsx b/app/(route)/result/page.tsx
new file mode 100644
index 0000000..285f9c1
--- /dev/null
+++ b/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
diff --git a/app/(route)/result/result.module.css b/app/(route)/result/result.module.css
new file mode 100644
index 0000000..2284acd
--- /dev/null
+++ b/app/(route)/result/result.module.css
@@ -0,0 +1,139 @@
+.background {
+  background: var(--purple-700);
+  display: flex;
+  flex-direction: column;
+  padding: 0 22px;
+  min-height: 100vh;
+  height: auto;
+}
+
+.wordwrap {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.word {
+  color: #fff;
+  text-align: center;
+  font-size: 2.6rem;
+  font-weight: 800;
+}
+
+.smallword {
+  color: #fff;
+  text-align: center;
+  font-size: 1.35rem;
+  font-weight: 600;
+}
+
+.nonMember {
+  font-size: 0.89rem;
+  color: #fbfbfb;
+}
+
+.largeword {
+  color: #fff;
+  text-align: center;
+  font-size: 4.3rem;
+  font-weight: 700;
+}
+
+.blue {
+  color: #183876;
+}
+
+.topmargin {
+  margin-top: 100px;
+}
+
+.leftmargin {
+  margin-left: 5px;
+  cursor: pointer;
+  color: white;
+  font-size: 0.93rem;
+}
+
+.flex {
+  margin: 13px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.intosignin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 55px;
+  gap: 7px;
+  margin-top: 22px;
+  border-radius: 8px;
+  background: #fff;
+  color: #121212;
+
+  font-size: 1.15rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.intosignin:hover {
+  opacity: 0.8;
+  transition: all 0.4s;
+}
+
+.img {
+  width: 430px;
+  height: 430px;
+  margin-top: 48.4px;
+}
+
+@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: 1.5s;
+}
+
+.wrap {
+  opacity: 0;
+  animation: fadeInUp 1.6s ease forwards;
+}
+
+.wrap:nth-child(1) {
+  animation-delay: 0.5s;
+}
+
+.wrap:nth-child(2) {
+  animation-delay: 2s;
+}
+
+.wrap:nth-child(3) {
+  animation-delay: 2mss;
+}
diff --git a/app/(route)/search/page.tsx b/app/(route)/search/page.tsx
index 3f50c66..5ca6c94 100644
--- a/app/(route)/search/page.tsx
+++ b/app/(route)/search/page.tsx
@@ -9,7 +9,10 @@ function Search() {
       <Nav title="검색 결과" />
       <div className={CommonS.wrapper}>
         <SearchBar />
-        <span>데이터를 모두 불러왔습니다.</span>
+
+        <div className={CommonS.columnWrapper}>
+          <span>데이터를 모두 불러왔습니다.</span>
+        </div>
       </div>
     </>
   )