[#21] 마이페이지, 투자 지표 페이지, 결과 로딩중

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

@@ -0,0 +1,20 @@
+import S from './form.module.css'
+
+interface Props {
+  title: string
+  subTitle?: string
+}
+
+function FormTitle({
+  title,
+  subTitle = '해당 항목의 수치는 어떻게 되나요?',
+}: Props) {
+  return (
+    <div className={S.wrapper}>
+      <span className={S.title}>{title}</span>
+      <p className={S.subTitle}>{subTitle}</p>
+    </div>
+  )
+}
+
+export default FormTitle

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

@@ -0,0 +1,36 @@
+.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.67rem;
+  color: #ff453a;
+}

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,73 @@
+'use client'
+
+import Title from '@/app/_common/text/title'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import Nav from '../list/_components/nav'
+import FormTitle from './_components/form/FormTitle'
+import FormS from './_components/form/form.module.css'
+import S from './indicators.module.css'
+
+//* 투자 지표 입력 페이지입니다.
+//TODO: title에 사용자가 입력했던 요소들이 보여지게 됩니다.
+//TODO: recoil 사용
+//? 피기님이 하신 투자지표 툴로 변경 예정
+function Indicators() {
+  const router = useRouter()
+  const [inputValue, setInputValue] = useState('')
+  const [error, setError] = useState('')
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+    setError('')
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!/^\d+$/.test(inputValue)) {
+      setError('숫자만 입력 가능합니다.')
+    } else {
+      router.push('/result')
+    }
+  }
+
+  return (
+    <>
+      <Nav />
+      <div className={S.wrapper}>
+        <div className={S.paddingWrapper}>
+          <Title title="아이디어 제목" />
+        </div>
+        <form className={S.formWrapper} onSubmit={handleSubmit}>
+          <div className={S.overflowWrapper}>
+            <FormTitle
+              title="전체 이용자 수"
+              subTitle="전체 이용자 수를 가지고 총 결과 지표가 계산됩니다."
+            />
+
+            <div className={FormS.inputWrapper}>
+              <input
+                className={FormS.input}
+                placeholder="수치를 입력해 주세요."
+                value={inputValue}
+                onChange={handleChange}
+              />
+            </div>
+
+            {error && (
+              <span className={FormS.error}>숫자만 입력 가능합니다.</span>
+            )}
+          </div>
+
+          <div className={S.bottomWrapper}>
+            <button type="submit" className={S.submitBtnWrapper}>
+              제출하기
+            </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)/mypage/_components/ideaCard/ideaCard.module.css

@@ -0,0 +1,45 @@
+.wrapper {
+  width: 100%;
+}
+
+.rowWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.columnWrapper {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--gray-100);
+  padding: 13px 17px;
+  border-radius: 11px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.ideaTitle {
+  font-size: 0.98rem;
+  font-weight: 700;
+  letter-spacing: 0.03px;
+}
+
+.ideaTool {
+  font-size: 0.7rem;
+}
+
+.btnWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 70px;
+  height: 40px;
+  font-weight: 500;
+  font-size: 0.9rem;
+  color: white;
+  background-color: var(--purple-700);
+  border-radius: 9px;
+
+  margin-left: 10px;
+}

app/(route)/mypage/_components/ideaCard/index.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import S from './ideaCard.module.css'
+
+//TODO: 아이디어 명과 사용한 툴이 들어가게 됩니다.
+//TODO: 완료된 아이디어일 경우 결과 페이지(/result)로 이동합니다.
+//TODO: 진행중인 아이디어일 경우 투자 지표 페이지(/indicators)로 이동합니다.
+function IdeaCard() {
+  return (
+    <div className={S.wrapper}>
+      <Link href="/indicators">
+        <div className={S.rowWrapper}>
+          <div className={S.columnWrapper}>
+            <span className={S.ideaTitle}>아이디어 제목</span>
+            <p className={S.ideaTool}>아이디어 툴</p>
+          </div>
+
+          <div className={S.btnWrapper}>열람</div>
+        </div>
+      </Link>
+    </div>
+  )
+}
+
+export default IdeaCard

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

@@ -0,0 +1,26 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 18px;
+  padding-bottom: 50px;
+}
+
+.sectionTitle {
+  font-size: 1.3rem;
+  font-weight: 700;
+  margin-top: 26px;
+}
+
+.sectionSubTitle {
+  font-size: 0.86rem;
+  font-weight: 300;
+}
+
+.ideaCardWrapper {
+  display: flex;
+  flex-direction: column;
+
+  gap: 17px;
+  margin: 12px 0 40px 0;
+}

app/(route)/mypage/page.tsx

@@ -1,5 +1,31 @@
+import Nav from '@/app/_common/nav'
+import Title from '@/app/_common/text/title'
+import IdeaCard from './_components/ideaCard'
+import S from './mypage.module.css'
+
+//TODO: 사용자 명, 아이디어 검증 수가 들어갑니다.
+//TODO: 완료된 아이디어, 입력 전 아이디어를 불러옵니다.(get)
 function Mypage() {
-  return
+  return (
+    <>
+      <div className={S.wrapper}>
+        <Nav />
+        <Title title="아이디어" />
+
+        <span className={S.sectionTitle}>완료</span>
+        <p className={S.sectionSubTitle}>투자 지표를 완료한 아이디어</p>
+        <div className={S.ideaCardWrapper}>
+          <IdeaCard />
+        </div>
+
+        <span className={S.sectionTitle}>입력 전</span>
+        <p className={S.sectionSubTitle}>투자 지표를 입력하지 않은 아이디어</p>
+        <div className={S.ideaCardWrapper}>
+          <IdeaCard />
+        </div>
+      </div>
+    </>
+  )
 }
 
 export default Mypage

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

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