[#24] Indicators 페이지, verification 페이지 개발 및 스타일 수정

primus-teoSprint · Apr 7, 2024 · a96e48d · a96e48d
1 parent 3b0a970
commit a96e48d
Show file tree

Hide file tree

Showing 16 changed files with 163 additions and 91 deletions.
diff --git a/app/(route)/indicators/page.tsx b/app/(route)/indicators/page.tsx
@@ -4,14 +4,14 @@ import Title from '@/app/_common/text/title'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import Nav from '../list/_components/nav'
+import ActiveInvestmentList from '../verification/ibulsin/_components/ActiveInvestmentList'
 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('')
@@ -38,7 +38,8 @@ function Indicators() {
         <div className={S.paddingWrapper}>
           <Title title="아이디어 제목" />
         </div>
-        <form className={S.formWrapper} onSubmit={handleSubmit}>
+
+        <div className={S.formWrapper}>
           <div className={S.overflowWrapper}>
             <FormTitle
               title="전체 이용자 수"
@@ -57,14 +58,20 @@ function Indicators() {
             {error && (
               <span className={FormS.error}>숫자만 입력 가능합니다.</span>
             )}
+
+            <ActiveInvestmentList />
           </div>
 
           <div className={S.bottomWrapper}>
-            <button type="submit" className={S.submitBtnWrapper}>
+            <button
+              type="submit"
+              className={S.submitBtnWrapper}
+              onClick={() => handleSubmit}
+            >
               제출하기
             </button>
           </div>
-        </form>
+        </div>
       </div>
     </>
   )

diff --git a/app/(route)/toolDetail/[toolId]/page.tsx b/app/(route)/toolDetail/[toolId]/page.tsx
@@ -4,8 +4,9 @@ import Nav from '@/app/_common/nav'
 import Title from '@/app/_common/text/title'
 import { useState } from 'react'
 import S from './toolDetail.module.css'
+import Link from 'next/link'
 
-//
+//TODO: 검증하기 누를 시 해당 아이디어 툴의 id로 이동하기
 //TODO: 주석 처리 실제 데이터로 변경하기
 function ToolDetail() {
   const [clickBtn, setClickBtn] = useState(false)
@@ -77,9 +78,9 @@ function ToolDetail() {
         )}
       </div>
 
-      {/* <Link href={`/verification/${toolId}`}>
-          <div>검증하기</div>
-        </Link> */}
+      <Link href={`/verification/ibulsin?step=1`}>
+        <div>검증하기</div>
+      </Link>
     </div>
   )
 }

diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css
@@ -1,21 +1,25 @@
 .item_container {
   display: flex;
-  /* justify-content: space-between; */
-  justify-content: center;
-  margin-bottom: 8px;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  height: 50px;
 }
 .item_input_wrapper {
   display: flex;
 }
 .input {
   all: unset;
-  font-size: 12px;
+  font-size: 0.83rem;
   padding: 8px;
-  border: 1px solid #CDCDCD;
-  border-radius: 4px;
+  padding: 14px 20px;
+  border: 1px solid #efefef;
+  border-radius: 15px;
+  width: 100%;
+  height: auto;
 }
+
 .item_name_input {
-  width: 100px;
+  width: 200px;
   margin-right: 16px;
 }
 .score_container {
@@ -33,12 +37,23 @@
   padding: 4px 8px;
   background-color: rgb(248, 64, 64);
   color: #ffffff;
-  font-size: 12px;
+  font-size: 0.7rem;
+  font-weight: 600;
   border-radius: 8px;
+  width: 30px;
+  height: 20px;
+  text-align: center;
+}
+
+.columnWrapper {
+  display: flex;
+  flex-direction: column;
+
+  gap: 3px;
 }
 
 .input::-webkit-outer-spin-button,
 .input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
-}
+}
diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 
-import React, { useState } from 'react'
-import S from './index.module.css'
+import investmentItemAtom, { ActiveInvestmentItemType } from '@/app/_store/atom'
 import cn from 'classnames'
+import { useState } from 'react'
 import { useRecoilState } from 'recoil'
-import investmentItemAtom, { ActiveInvestmentItemType } from '@/app/_store/atom'
+import ItemAddBtn from '../ItemAddBtn'
+import S from './index.module.css'
 
 interface ActiveInvestmentItemProps {
   item: ActiveInvestmentItemType
@@ -61,7 +62,7 @@ function ActiveInvestmentItem({ item }: ActiveInvestmentItemProps) {
       <div className={S.item_input_wrapper}>
         <input
           className={cn(S.item_name_input, S.input)}
-          placeholder="아이템1"
+          placeholder="아이템 이름을 입력해 주세요."
           value={itemName}
           onChange={(e) => handleChangeNameInput(e)}
         />
@@ -76,9 +77,16 @@ function ActiveInvestmentItem({ item }: ActiveInvestmentItemProps) {
           <span>점</span>
         </div>
       </div>
-      <button className={S.delete_btn} onClick={handleDeleteItem}>
-        삭제
-      </button>
+      <div className={S.columnWrapper}>
+        <button
+          type="button"
+          className={S.delete_btn}
+          onClick={handleDeleteItem}
+        >
+          삭제
+        </button>
+        <ItemAddBtn />
+      </div>
     </div>
   )
 }

diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentList/index.tsx b/app/(route)/verification/ibulsin/_components/ActiveInvestmentList/index.tsx
@@ -1,10 +1,9 @@
 'use client'
 
-import React from 'react'
-import S from './index.module.css'
-import ActiveInvestmentItem from '../ActiveInvestmentItem'
-import { useRecoilValue } from 'recoil'
 import investmentItemAtom from '@/app/_store/atom'
+import { useRecoilValue } from 'recoil'
+import ActiveInvestmentItem from '../ActiveInvestmentItem'
+import S from './index.module.css'
 
 function ActiveInvestmentList() {
   const investmentItem = useRecoilValue(investmentItemAtom)

diff --git a/app/(route)/verification/ibulsin/_components/ItemAddBtn/index.module.css b/app/(route)/verification/ibulsin/_components/ItemAddBtn/index.module.css
@@ -1,8 +1,11 @@
 .btn {
-  font-size: 12px;
   background-color: var(--purple-700);
-  color: #FFFFFF;
-  border-radius: 4px;
+  color: #ffffff;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border-radius: 8px;
   padding: 4px 8px;
+  width: 30px;
   height: 20px;
+  text-align: center;
 }
diff --git a/app/(route)/verification/ibulsin/_components/MoreExplainToggle/index.module.css b/app/(route)/verification/ibulsin/_components/MoreExplainToggle/index.module.css
@@ -1,11 +1,11 @@
 .toggle_container {
-  position:absolute;
+  position: absolute;
   width: 240px;
   top: 20px;
-  left:10px;
+  left: 10px;
   background-color: white;
   z-index: 999;
-  border: 1px solid #c9c9c9;
+  border: 1px solid #ececec;
   border-radius: 4px;
   padding: 8px;
 }

diff --git a/app/(route)/verification/ibulsin/_components/Step/index.module.css b/app/(route)/verification/ibulsin/_components/Step/index.module.css
@@ -11,6 +11,8 @@
   padding: 12px;
   align-items: center;
   justify-content: space-between;
+
+  font-weight: 700;
 }
 .main_container > .survey_header > .fake {
   width: 24px;

diff --git a/app/(route)/verification/ibulsin/_components/Step1/index.module.css b/app/(route)/verification/ibulsin/_components/Step1/index.module.css
@@ -3,36 +3,47 @@
   flex-direction: column;
   justify-content: space-between;
 }
+.step {
+  font-weight: 700;
+}
+
+.step_explain {
+  font-weight: 700;
+  line-height: 38px;
+}
 .step_info {
   color: #ffffff;
   margin: 24px;
   margin-bottom: 32px;
 }
 .step_info > h3 {
   padding: 12px 0;
-  font-weight: 500;
-  font-size: 24px;
+  font-weight: 600;
+  font-size: 1.78rem;
 }
 .step_info > p {
-  font-size: 24px;
+  font-size: 1.78rem;
 }
 .survey_container {
   background-color: #ffffff;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  padding: 12px;
+  padding: 12px 19px;
 }
 .input_container {
-  margin-bottom: 8px;
+  margin-bottom: 13px;
 }
 .input_container > .input_title {
-  font-size: 16px;
-  padding: 12px 0;
+  font-size: 1.19rem;
+  padding-top: 12px;
 }
+
 .input_container > .input_explain {
-  font-size: 12px;
-  margin-bottom: 8px;
+  font-size: 0.75rem;
+  margin-bottom: 11px;
+  color: rgb(28, 28, 28);
 }
+
 .input_container > .input_textarea {
   font-size: 14px;
   width: 100%;

diff --git a/app/(route)/verification/ibulsin/_components/Step1/index.tsx b/app/(route)/verification/ibulsin/_components/Step1/index.tsx
@@ -1,9 +1,8 @@
 'use client'
 
-import React from 'react'
-import style from './index.module.css'
 import Link from 'next/link'
 import Textarea from '../Textarea'
+import style from './index.module.css'
 
 function Step1() {
   return (
@@ -13,7 +12,7 @@ function Step1() {
         <p className={style.step_explain}>
           생각한 아이디어를
           <br />
-          작성해주세요
+          작성해 주세요.
         </p>
       </div>
       <div className={style.survey_container}>

diff --git a/app/(route)/verification/ibulsin/_components/Step2/index.module.css b/app/(route)/verification/ibulsin/_components/Step2/index.module.css
@@ -3,41 +3,54 @@
   flex-direction: column;
   justify-content: space-between;
 }
+.step {
+  font-weight: 700;
+}
+
+.step_explain {
+  font-weight: 700;
+  line-height: 38px;
+}
+
 .step_info {
-  color: #FFFFFF;
+  color: #ffffff;
   margin: 24px;
   margin-bottom: 32px;
 }
 .step_info > h3 {
   padding: 12px 0;
   font-weight: 500;
-  font-size: 24px;
+  font-size: 1.78rem;
 }
 .step_info > p {
-  font-size: 24px;
+  font-size: 1.78rem;
 }
 .survey_container {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  padding: 12px;
+  padding: 12px 19px;
 }
 .input_container {
-  margin-bottom: 8px;
+  margin-bottom: 13px;
 }
 .input_title_container {
   display: flex;
+  flex-direction: row;
   align-items: center;
+  padding-top: 12px;
 }
+
 .input_title_container > .input_title {
-  font-size: 16px;
-  padding:12px 0;
+  font-size: 1.19rem;
   margin-right: 8px;
 }
 .input_container > .input_explain {
-  font-size: 12px;
-  margin-bottom: 8px;
+  font-size: 0.75rem;
+  margin-bottom: 11px;
+  color: rgb(28, 28, 28);
 }
+
 .direction_btns {
   display: flex;
   align-items: center;
@@ -47,16 +60,16 @@
   margin: 0 8px;
 }
 .prev_btn {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   padding: 12px 20px;
   font-size: 14px;
   font-weight: bold;
-  border: 1px solid #DCDCDC;
+  border: 1px solid #dcdcdc;
   border-radius: 8px;
 }
 .next_btn {
   background-color: var(--purple-700);
-  color: #FFFFFF;
+  color: #ffffff;
   padding: 12px 20px;
   font-size: 14px;
   font-weight: bold;