diff --git a/app/(route)/indicators/page.tsx b/app/(route)/indicators/page.tsx index 3381b47..89e4912 100644 --- a/app/(route)/indicators/page.tsx +++ b/app/(route)/indicators/page.tsx @@ -4,6 +4,7 @@ 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' @@ -11,7 +12,6 @@ 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> - <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 index 8c3263b..79d053c 100644 --- 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 index a419c59..c40cf3c 100644 --- 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; -} \ No newline at end of file +} diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx index 1bd9e2b..aac1463 100644 --- 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 index bc0f42c..2290d6a 100644 --- 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 index 21eb28b..b99ac0c 100644 --- 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 index 949cfe6..1572271 100644 --- 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 index 279627c..43ef1d5 100644 --- 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 index 31d78e2..f081a35 100644 --- a/app/(route)/verification/ibulsin/_components/Step1/index.module.css +++ b/app/(route)/verification/ibulsin/_components/Step1/index.module.css @@ -3,6 +3,14 @@ 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; @@ -10,29 +18,32 @@ } .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 index 43ecb93..e2bdff9 100644 --- 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 index fdff868..b86e4ef 100644 --- 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; diff --git a/app/(route)/verification/ibulsin/_components/Step3/index.module.css b/app/(route)/verification/ibulsin/_components/Step3/index.module.css index 20c4973..07aed0a 100644 --- a/app/(route)/verification/ibulsin/_components/Step3/index.module.css +++ b/app/(route)/verification/ibulsin/_components/Step3/index.module.css @@ -13,23 +13,32 @@ align-items: center; } .step_info { - color: #FFFFFF; + 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; } +.step { + font-weight: 700; +} + +.step_explain { + font-weight: 700; + line-height: 38px; +} + .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; @@ -37,15 +46,16 @@ .input_title_container { display: flex; align-items: center; + padding-top: 12px; } .input_title { - font-size: 16px; - padding:12px 0; + font-size: 1.19rem; margin-right: 8px; } .input_explain { - font-size: 12px; - margin-bottom: 8px; + font-size: 0.75rem; + margin-bottom: 11px; + color: rgb(28, 28, 28); } .direction_btns { display: flex; @@ -56,16 +66,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; diff --git a/app/(route)/verification/ibulsin/_components/Step3/index.tsx b/app/(route)/verification/ibulsin/_components/Step3/index.tsx index 8de3ae7..93c3535 100644 --- a/app/(route)/verification/ibulsin/_components/Step3/index.tsx +++ b/app/(route)/verification/ibulsin/_components/Step3/index.tsx @@ -1,14 +1,15 @@ 'use client' -import React from 'react' -import S from './index.module.css' +import { ibulsinVariants } from '@/app/_constants/ibulsin' import Link from 'next/link' -import Textarea from '../Textarea' +import { useRouter } from 'next/navigation' import MoreExplainBtn from '../MoreExplainBtn' -import { ibulsinVariants } from '@/app/_constants/ibulsin' +import Textarea from '../Textarea' +import S from './index.module.css' function Step3() { const { xyz, pretotyping } = ibulsinVariants + const router = useRouter() return ( <div className={S.main_container}> @@ -51,8 +52,12 @@ function Step3() { <Link className={S.prev_btn} href={'/verification/ibulsin?step=2'}> 이전 단계 </Link> - <button className={S.next_btn} type="button"> - 제출 하기 + <button + className={S.next_btn} + type="button" + onClick={() => router.push('/mypage')} + > + 제출하기 </button> </div> </div> diff --git a/app/(route)/verification/ibulsin/_components/Textarea/index.module.css b/app/(route)/verification/ibulsin/_components/Textarea/index.module.css index 2d194bd..ccb57e1 100644 --- a/app/(route)/verification/ibulsin/_components/Textarea/index.module.css +++ b/app/(route)/verification/ibulsin/_components/Textarea/index.module.css @@ -1,16 +1,18 @@ .textarea_container { position: relative; - padding: 12px; + padding: 12px 15px; padding-bottom: 28px; - border: 1px solid #ccc; - border-radius: 8px; + border: 1px solid #efefef; + border-radius: 10px; + + font-size: rgb(16, 16, 16); } .textarea_container:focus-within { - border: 1px solid #000000; + border: 1px solid #dcdcdc; } .textarea_container > textarea { width: 100%; - height: 80px; + height: 100px; border: none; outline: none; resize: none; diff --git a/app/(route)/verification/ibulsin/_components/Textarea/index.tsx b/app/(route)/verification/ibulsin/_components/Textarea/index.tsx index ad2fa2b..c00dfd1 100644 --- a/app/(route)/verification/ibulsin/_components/Textarea/index.tsx +++ b/app/(route)/verification/ibulsin/_components/Textarea/index.tsx @@ -1,9 +1,8 @@ 'use client' -import React from 'react' -import S from './index.module.css' import cn from 'classnames' import { useForm } from 'react-hook-form' +import S from './index.module.css' interface TextAreaProps { fieldKey: 'outline' | 'why' | 'marketResponse' | 'XYZ' | 'xyz' | 'pretotyping' diff --git a/app/(route)/verification/ibulsin/page.tsx b/app/(route)/verification/ibulsin/page.tsx index ec8da15..e5a62a4 100644 --- a/app/(route)/verification/ibulsin/page.tsx +++ b/app/(route)/verification/ibulsin/page.tsx @@ -1,13 +1,11 @@ -import React, { Suspense } from 'react' +import { Suspense } from 'react' import Step from './_components/Step' function page() { return ( - <div> - <Suspense fallback={<div>loading...</div>}> - <Step /> - </Suspense> - </div> + <Suspense fallback={<div>loading...</div>}> + <Step /> + </Suspense> ) }