[#21] 마이페이지 개발

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

@@ -5,20 +5,16 @@ interface Props {
   subTitle?: string
 }
 
-function Form({
+function FormTitle({
   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
+export default FormTitle

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

@@ -31,7 +31,6 @@
 }
 
 .error {
-  font-size: 0.6rem;
-  color: #FF453A;
-  margin-top: 4px;
+  font-size: 0.67rem;
+  color: #ff453a;
 }

app/(route)/indicators/page.tsx

@@ -1,33 +1,67 @@
 'use client'
 
 import Title from '@/app/_common/text/title'
-import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
 import Nav from '../list/_components/nav'
-import Form from './_components/form'
+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}>
+        <form className={S.formWrapper} onSubmit={handleSubmit}>
           <div className={S.overflowWrapper}>
-            <Form
+            <FormTitle
               title="전체 이용자 수"
               subTitle="전체 이용자 수를 가지고 총 결과 지표가 계산됩니다."
             />
-            {/* <Form title="이메일" /> */}
+
+            <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}>
-              <Link href="/result">제출하기</Link>
+              제출하기
             </button>
           </div>
         </form>

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