From 33898263abfca75292239a0eeaed38d14605ddd8 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 6 Apr 2024 21:14:30 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[#6]=20=EC=84=A4=EB=AA=85=20=EB=8D=94=20?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MoreExplainBtn/index.module.css | 10 +++++++ .../_components/MoreExplainBtn/index.tsx | 30 +++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 app/(route)/verification/ibulsin/_components/MoreExplainBtn/index.module.css create mode 100644 app/(route)/verification/ibulsin/_components/MoreExplainBtn/index.tsx diff --git a/app/(route)/verification/ibulsin/_components/MoreExplainBtn/index.module.css b/app/(route)/verification/ibulsin/_components/MoreExplainBtn/index.module.css new file mode 100644 index 0000000..88b47f0 --- /dev/null +++ b/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; +} diff --git a/app/(route)/verification/ibulsin/_components/MoreExplainBtn/index.tsx b/app/(route)/verification/ibulsin/_components/MoreExplainBtn/index.tsx new file mode 100644 index 0000000..d5534a4 --- /dev/null +++ b/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 ( +
+ + {isHover && } +
+ ) +} + +export default MoreExplainBtn From 86e846b42a5bb3c001e152ea3656855f98a8285e Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 6 Apr 2024 21:15:19 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[#6]=20=EC=B6=94=EA=B0=80=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=20=ED=86=A0=EA=B8=80=EC=B0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MoreExplainToggle/index.module.css | 15 +++++++ .../_components/MoreExplainToggle/index.tsx | 41 +++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 app/(route)/verification/ibulsin/_components/MoreExplainToggle/index.module.css create mode 100644 app/(route)/verification/ibulsin/_components/MoreExplainToggle/index.tsx diff --git a/app/(route)/verification/ibulsin/_components/MoreExplainToggle/index.module.css b/app/(route)/verification/ibulsin/_components/MoreExplainToggle/index.module.css new file mode 100644 index 0000000..949cfe6 --- /dev/null +++ b/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%; +} diff --git a/app/(route)/verification/ibulsin/_components/MoreExplainToggle/index.tsx b/app/(route)/verification/ibulsin/_components/MoreExplainToggle/index.tsx new file mode 100644 index 0000000..d6347c6 --- /dev/null +++ b/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 ( +
+ {type === 'marketResponse' && ( +

+ 아이디어: 넷플릭스(초기 DVD 기반 모델) +
+
+ 시장호응가설: 우편 배송 기반의 DVD 대여 서비스를 월정액 요금제, 반납 + 지연 과태료 무료 정책과 결합하여 많은 사람들이 비디오 가게를 이용하는 + 대신 우리 서비스에 가입할 것이다. +
+
+ 이와같이 시장이 우리의 제품이나 서비스를 어떻게 받아들이지에 대해 + 정확한 정의를 내리고, 해당 시장 수요가 존재한다는 증거를 찾아내는 것이 + 시장호응가설이 해야 할 일이에요. +

+ )} + {type === 'XYZ' && ( +

+ X는 표적시장의 몇 퍼센트를 차지할 수 있을지, Y는 어떤 표적시장에 대한, + Z는 표적 시장이 제품에 대해 어떤 방식으로 어느 범위까지 호응 할 까를 + 의미해요 +
+
+ 예제: 적어도 10%의 대기질 지수가 100 이상인 도시에 사는 사람들은 + 120달러 짜리 휴대용 오염 탐지기를 구매할 것이다. +

+ )} +
+ ) +} + +export default MoreExplainToggle From 7df7f62ddec9b66416a88240becfefa1c1359282 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 6 Apr 2024 21:18:19 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[#6]=20=EC=8B=9C=EC=9E=A5=ED=98=B8=EC=9D=91?= =?UTF-8?q?=EA=B0=80=EC=84=A4=EA=B3=BC=20XYZ=20=EA=B0=80=EC=84=A4=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20textarea=20=EB=A5=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ibulsin/_components/Textarea/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/(route)/verification/ibulsin/_components/Textarea/index.tsx b/app/(route)/verification/ibulsin/_components/Textarea/index.tsx index 1e945a3..0bcd7f0 100644 --- a/app/(route)/verification/ibulsin/_components/Textarea/index.tsx +++ b/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 = () => { From cff2e503fe934ecd746360f0f66a45b9d2972703 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 6 Apr 2024 21:19:12 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[#6]=20step2=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/Step2/index.module.css | 64 +++++++++++++++++++ .../ibulsin/_components/Step2/index.tsx | 49 +++++++++++++- 2 files changed, 112 insertions(+), 1 deletion(-) diff --git a/app/(route)/verification/ibulsin/_components/Step2/index.module.css b/app/(route)/verification/ibulsin/_components/Step2/index.module.css index e69de29..fdff868 100644 --- a/app/(route)/verification/ibulsin/_components/Step2/index.module.css +++ b/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; +} diff --git a/app/(route)/verification/ibulsin/_components/Step2/index.tsx b/app/(route)/verification/ibulsin/_components/Step2/index.tsx index 6e941c4..c6b5f7a 100644 --- a/app/(route)/verification/ibulsin/_components/Step2/index.tsx +++ b/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
hello
+ return ( +
+
+

STEP 2

+

+ 시장호응가설과 XYZ가설을 +
+ 세워보아요. +

+
+
+
+
+

시장호응 가설

+ +
+

+ 시장호응가설(Market Engagement Hypothesis)이란 시장이 우리의 + 아이디어를 어떻게 받아들일지에 대한 우리의 핵심 신념이나 가정을 + 얘기해요. +

+