Merge pull request #16 from primus-teoSprint/feat/#6

[#6] step2 페이지 ui 및 추가설명 토글창 구현

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

@@ -0,0 +1,10 @@
+.question_icon_container {
+  display: flex;
+  position:relative;
+  justify-content: center;
+  align-items: center;
+}
+.question_icon {
+  color:var(--purple-700);
+  cursor: pointer;
+}

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

@@ -0,0 +1,30 @@
+'use client'
+
+import React, { useState } from 'react'
+import S from './index.module.css'
+import { BsFillQuestionCircleFill } from 'react-icons/bs'
+import MoreExplainToggle from '../MoreExplainToggle'
+
+function MoreExplainBtn({ type }: { type: string }) {
+  const [isHover, setIsHover] = useState(false)
+
+  const handleMouseOver = () => {
+    setIsHover(true)
+  }
+  const handleMouseOut = () => {
+    setIsHover(false)
+  }
+
+  return (
+    <div className={S.question_icon_container}>
+      <BsFillQuestionCircleFill
+        className={S.question_icon}
+        onMouseOver={handleMouseOver}
+        onMouseOut={handleMouseOut}
+      />
+      {isHover && <MoreExplainToggle type={type} />}
+    </div>
+  )
+}
+
+export default MoreExplainBtn

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

@@ -0,0 +1,15 @@
+.toggle_container {
+  position:absolute;
+  width: 240px;
+  top: 20px;
+  left:10px;
+  background-color: white;
+  z-index: 999;
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  padding: 8px;
+}
+.toggle_container > p {
+  font-size: 10px;
+  width: 100%;
+}

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import S from './index.module.css'
+
+interface MoreExplainToggleProps {
+  type: string
+}
+
+function MoreExplainToggle({ type }: MoreExplainToggleProps) {
+  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달러 짜리 휴대용 오염 탐지기를 구매할 것이다.
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default MoreExplainToggle

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

@@ -0,0 +1,64 @@
+.main_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.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_container > .input_title {
+  font-size: 16px;
+  padding:12px 0;
+  margin-right: 8px;
+}
+.input_container > .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/Step2/index.tsx

@@ -2,9 +2,56 @@
 
 import React from 'react'
 import S from './index.module.css'
+import Link from 'next/link'
+import Textarea from '../Textarea'
+import MoreExplainBtn from '../MoreExplainBtn'
 
 function Step2() {
-  return <div className={S.main}>hello</div>
+  return (
+    <div className={S.main_container}>
+      <div className={S.step_info}>
+        <h3 className={S.step}>STEP 2</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}>시장호응 가설</h3>
+            <MoreExplainBtn type={'marketResponse'} />
+          </div>
+          <p className={S.input_explain}>
+            시장호응가설(Market Engagement Hypothesis)이란 시장이 우리의
+            아이디어를 어떻게 받아들일지에 대한 우리의 핵심 신념이나 가정을
+            얘기해요.
+          </p>
+          <Textarea fieldKey={'marketResponse'} />
+        </div>
+        <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}>
+            적어도 X퍼센트의 Y는 Z 할 것이다 라는 형태의 가설이에요. 시장호응
+            가설을 바탕으로 숫자로 치환에 좀 더 치밀하게 하는 도구예요
+          </p>
+          <Textarea fieldKey={'XYZ'} />
+        </div>
+        <div className={S.direction_btns}>
+          <Link className={S.prev_btn} href={'/verification/ibulsin?step=1'}>
+            이전 단계
+          </Link>
+          <Link className={S.next_btn} href={'/verification/ibulsin?step=3'}>
+            다음 단계
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default Step2

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

@@ -6,7 +6,7 @@ import cn from 'classnames'
 import { useForm } from 'react-hook-form'
 
 interface TextAreaProps {
-  fieldKey: 'outline' | 'why'
+  fieldKey: 'outline' | 'why' | 'marketResponse' | 'XYZ'
 }
 
 function Textarea({ fieldKey }: TextAreaProps) {
@@ -29,6 +29,14 @@ function Textarea({ fieldKey }: TextAreaProps) {
       register: whyField,
       MaxLength: 500,
     },
+    marketResponse: {
+      register: whyField,
+      MaxLength: 500,
+    },
+    XYZ: {
+      register: whyField,
+      MaxLength: 500,
+    },
   }
 
   const countCharacters = () => {