Merge pull request #25 from primus-teoSprint/feat/#7

[#7][#23] step3 페이지 ui 및 추가설명 토글창 구현 / 적극적 투자지표 컴포넌트 구현

app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css

@@ -0,0 +1,44 @@
+.item_container {
+  display: flex;
+  /* justify-content: space-between; */
+  justify-content: center;
+  margin-bottom: 8px;
+}
+.item_input_wrapper {
+  display: flex;
+}
+.input {
+  all: unset;
+  font-size: 12px;
+  padding: 8px;
+  border: 1px solid #CDCDCD;
+  border-radius: 4px;
+}
+.item_name_input {
+  width: 100px;
+  margin-right: 16px;
+}
+.score_container {
+  margin-right: 16px;
+}
+.score_container > span {
+  font-size: 14px;
+  font-weight: bold;
+}
+.item_score_input {
+  width: 40px;
+  margin-right: 4px;
+}
+.delete_btn {
+  padding: 4px 8px;
+  background-color: rgb(248, 64, 64);
+  color: #ffffff;
+  font-size: 12px;
+  border-radius: 8px;
+}
+
+.input::-webkit-outer-spin-button,
+.input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}

app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+
+import React, { useState } from 'react'
+import S from './index.module.css'
+import cn from 'classnames'
+import { useRecoilState } from 'recoil'
+import investmentItemAtom, { ActiveInvestmentItemType } from '@/app/_store/atom'
+
+interface ActiveInvestmentItemProps {
+  item: ActiveInvestmentItemType
+}
+
+function ActiveInvestmentItem({ item }: ActiveInvestmentItemProps) {
+  const [investmentItem, setInvestmentItem] = useRecoilState(investmentItemAtom)
+  const [itemName, setItemName] = useState(item?.name ?? '')
+  const [itemScore, setItemScore] = useState(item?.score ?? 0)
+
+  const handleDeleteItem = () => {
+    if (investmentItem.length <= 1) {
+      return
+    }
+
+    setInvestmentItem((prev) => {
+      const next = prev.filter(
+        (investmentItem) => investmentItem.id !== item.id,
+      )
+      console.log(next)
+
+      return next
+    })
+  }
+
+  const handleChangeNameInput = (e: any) => {
+    const { value } = e.target
+    setItemName(value)
+
+    setInvestmentItem((prev) =>
+      prev.map((investmentItem) =>
+        investmentItem.id === item.id
+          ? { ...item, name: value }
+          : investmentItem,
+      ),
+    )
+  }
+  const handleChangeScoreInput = (e: any) => {
+    const { value } = e.target
+    setItemScore(value)
+
+    setInvestmentItem((prev) =>
+      prev.map((investmentItem) =>
+        investmentItem.id === item.id
+          ? { ...item, name: value }
+          : investmentItem,
+      ),
+    )
+  }
+
+  return (
+    <div className={S.item_container}>
+      <div className={S.item_input_wrapper}>
+        <input
+          className={cn(S.item_name_input, S.input)}
+          placeholder="아이템1"
+          value={itemName}
+          onChange={(e) => handleChangeNameInput(e)}
+        />
+        <div className={S.score_container}>
+          <input
+            className={cn(S.item_score_input, S.input)}
+            type="number"
+            placeholder="2"
+            value={itemScore}
+            onChange={(e) => handleChangeScoreInput(e)}
+          />
+          <span>점</span>
+        </div>
+      </div>
+      <button className={S.delete_btn} onClick={handleDeleteItem}>
+        삭제
+      </button>
+    </div>
+  )
+}
+
+export default ActiveInvestmentItem

app/(route)/verification/ibulsin/_components/ActiveInvestmentList/index.tsx

@@ -0,0 +1,21 @@
+'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'
+
+function ActiveInvestmentList() {
+  const investmentItem = useRecoilValue(investmentItemAtom)
+
+  return (
+    <div className={S.main}>
+      {investmentItem.map((item) => {
+        return <ActiveInvestmentItem key={item.id} item={item} />
+      })}
+    </div>
+  )
+}
+
+export default ActiveInvestmentList

app/(route)/verification/ibulsin/_components/ItemAddBtn/index.module.css

@@ -0,0 +1,8 @@
+.btn {
+  font-size: 12px;
+  background-color: var(--purple-700);
+  color: #FFFFFF;
+  border-radius: 4px;
+  padding: 4px 8px;
+  height: 20px;
+}

app/(route)/verification/ibulsin/_components/ItemAddBtn/index.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import React from 'react'
+import S from './index.module.css'
+import { useSetRecoilState } from 'recoil'
+import investmentItemAtom, { ActiveInvestmentItemType } from '@/app/_store/atom'
+
+function ItemAddBtn() {
+  const setInvestmentItem = useSetRecoilState(investmentItemAtom)
+
+  const handleAddItem = () => {
+    const newItem: ActiveInvestmentItemType = {
+      id: new Date().toISOString(),
+      name: '',
+      score: 0,
+    }
+    setInvestmentItem((prev) => [...prev, newItem])
+  }
+
+  return (
+    <button type="button" className={S.btn} onClick={handleAddItem}>
+      추가
+    </button>
+  )
+}
+
+export default ItemAddBtn

app/(route)/verification/ibulsin/_components/MoreExplainToggle/index.tsx

@@ -1,39 +1,22 @@
 import React from 'react'
 import S from './index.module.css'
+import { explainData } from '@/app/_constants/ibulsin'
 
 interface MoreExplainToggleProps {
   type: string
 }
 
 function MoreExplainToggle({ type }: MoreExplainToggleProps) {
+  const filteredData = explainData.filter(
+    (explainItem) => explainItem.type === type,
+  )
   return (
     <div className={S.toggle_container}>
-      {type === 'marketResponse' && (
-        <p>
-          아이디어: 넷플릭스(초기 DVD 기반 모델)
-          <br />
-          <br />
-          시장호응가설: 우편 배송 기반의 DVD 대여 서비스를 월정액 요금제, 반납
-          지연 과태료 무료 정책과 결합하여 많은 사람들이 비디오 가게를 이용하는
-          대신 우리 서비스에 가입할 것이다.
-          <br />
-          <br />
-          이와같이 시장이 우리의 제품이나 서비스를 어떻게 받아들이지에 대해
-          정확한 정의를 내리고, 해당 시장 수요가 존재한다는 증거를 찾아내는 것이
-          시장호응가설이 해야 할 일이에요.
-        </p>
-      )}
-      {type === 'XYZ' && (
-        <p>
-          X는 표적시장의 몇 퍼센트를 차지할 수 있을지, Y는 어떤 표적시장에 대한,
-          Z는 표적 시장이 제품에 대해 어떤 방식으로 어느 범위까지 호응 할 까를
-          의미해요
-          <br />
-          <br />
-          예제: 적어도 10%의 대기질 지수가 100 이상인 도시에 사는 사람들은
-          120달러 짜리 휴대용 오염 탐지기를 구매할 것이다.
+      {filteredData.map((explainItem, idx) => (
+        <p key={idx} style={{ whiteSpace: 'pre-line' }}>
+          {explainItem.content}
         </p>
-      )}
+      ))}
     </div>
   )
 }

app/(route)/verification/ibulsin/_components/Step3/index.module.css

@@ -0,0 +1,73 @@
+.main_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.flex_between_wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex_wrapper {
+  display: flex;
+  align-items: center;
+}
+.step_info {
+  color: #FFFFFF;
+  margin: 24px;
+  margin-bottom: 32px;
+}
+.step_info > h3 {
+  padding: 12px 0;
+  font-weight: 500;
+  font-size: 24px;
+}
+.step_info > p {
+  font-size: 24px;
+}
+.survey_container {
+  background-color: #FFFFFF;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  padding: 12px;
+}
+.input_container {
+  margin-bottom: 8px;
+}
+.input_title_container {
+  display: flex;
+  align-items: center;
+}
+.input_title {
+  font-size: 16px;
+  padding:12px 0;
+  margin-right: 8px;
+}
+.input_explain {
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+.direction_btns {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.direction_btns > a {
+  margin: 0 8px;
+}
+.prev_btn {
+  background-color: #FFFFFF;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: bold;
+  border: 1px solid #DCDCDC;
+  border-radius: 8px;
+}
+.next_btn {
+  background-color: var(--purple-700);
+  color: #FFFFFF;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: bold;
+  border-radius: 8px;
+}

app/(route)/verification/ibulsin/_components/Step3/index.tsx

@@ -2,9 +2,62 @@
 
 import React from 'react'
 import S from './index.module.css'
+import Link from 'next/link'
+import Textarea from '../Textarea'
+import MoreExplainBtn from '../MoreExplainBtn'
+import { ibulsinVariants } from '@/app/_constants/ibulsin'
 
 function Step3() {
-  return <div className={S.main}>hello</div>
+  const { xyz, pretotyping } = ibulsinVariants
+
+  return (
+    <div className={S.main_container}>
+      <div className={S.step_info}>
+        <h3 className={S.step}>STEP 3</h3>
+        <p className={S.step_explain}>
+          xyz 가설과 적극적 투자지표를
+          <br />
+          세워보아요.
+        </p>
+      </div>
+      <div className={S.survey_container}>
+        <div className={S.input_container}>
+          <div className={S.input_title_container}>
+            <h3 className={S.input_title}>xyz 가설</h3>
+            <MoreExplainBtn type={xyz} />
+          </div>
+          <p className={S.input_explain}>
+            XYZ 법칙으로 표현된 시장 호응 가설의 범위를 잘게 쪼개 xyz법칙으로
+            표현해보세요.
+          </p>
+          <Textarea fieldKey={xyz} />
+        </div>
+        <div className={S.input_container}>
+          <div className={S.flex_between_wrapper}>
+            <div className={S.flex_wrapper}>
+              <h3 className={S.input_title}>프로토 타이핑 계획</h3>
+              <MoreExplainBtn type={pretotyping} />
+            </div>
+          </div>
+          <p className={S.input_explain}>
+            {`xyz가설로 표현된 시장 호응 가설을 빠르게 적은 비용으로 테스트를
+            시도해보는 것을 '프리토타이핑' 이라구해요. 시제품을 의미하는 프로토타입과는 
+            다르게 시제품이 없어도 다른 방법을 만들어 가설을 확인하는 테스트 방법이에요.
+            `}
+          </p>
+          <Textarea fieldKey={pretotyping} />
+        </div>
+        <div className={S.direction_btns}>
+          <Link className={S.prev_btn} href={'/verification/ibulsin?step=2'}>
+            이전 단계
+          </Link>
+          <button className={S.next_btn} type="button">
+            제출 하기
+          </button>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default Step3