From 026ac0c22d5b8377c03b3116dd73d866ea8604b1 Mon Sep 17 00:00:00 2001 From: yeokyoung song Date: Wed, 21 Feb 2024 23:18:14 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A0=9C=EC=B6=9C=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=ED=99=9C=EC=84=B1=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../compositions/question/FinishQuestion.tsx | 11 + pages/assets/questionTrees.tsx | 348 +++++++++--------- pages/surveys/questions/index.tsx | 17 +- 3 files changed, 198 insertions(+), 178 deletions(-) create mode 100644 components/compositions/question/FinishQuestion.tsx diff --git a/components/compositions/question/FinishQuestion.tsx b/components/compositions/question/FinishQuestion.tsx new file mode 100644 index 0000000..89c46fd --- /dev/null +++ b/components/compositions/question/FinishQuestion.tsx @@ -0,0 +1,11 @@ + +const FinishQuestion = () => { + return <> + + + +} + +export default FinishQuestion; + + \ No newline at end of file diff --git a/pages/assets/questionTrees.tsx b/pages/assets/questionTrees.tsx index 35df6bb..08f81c2 100644 --- a/pages/assets/questionTrees.tsx +++ b/pages/assets/questionTrees.tsx @@ -8,14 +8,14 @@ export const TreeSvg = { xmlns="http://www.w3.org/2000/svg" > @@ -24,8 +24,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -38,8 +38,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -48,8 +48,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -58,8 +58,8 @@ export const TreeSvg = { fill="#00BC68" /> @@ -68,20 +68,20 @@ export const TreeSvg = { fill="#00BC68" /> @@ -90,8 +90,8 @@ export const TreeSvg = { fill="#111111" /> @@ -100,8 +100,8 @@ export const TreeSvg = { fill="white" /> @@ -110,8 +110,8 @@ export const TreeSvg = { fill="white" /> @@ -128,8 +128,8 @@ export const TreeSvg = { fill="white" /> @@ -138,8 +138,8 @@ export const TreeSvg = { fill="white" /> @@ -162,14 +162,14 @@ export const TreeSvg = { xmlns="http://www.w3.org/2000/svg" > @@ -178,8 +178,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -188,14 +188,14 @@ export const TreeSvg = { fill="#00BC68" /> @@ -204,8 +204,8 @@ export const TreeSvg = { fill="#111111" /> @@ -214,8 +214,8 @@ export const TreeSvg = { fill="white" /> @@ -224,8 +224,8 @@ export const TreeSvg = { fill="white" /> @@ -256,8 +256,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -266,8 +266,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -276,14 +276,14 @@ export const TreeSvg = { fill="#00BC68" /> @@ -292,8 +292,8 @@ export const TreeSvg = { fill="#111111" /> @@ -302,8 +302,8 @@ export const TreeSvg = { fill="white" /> @@ -312,8 +312,8 @@ export const TreeSvg = { fill="white" /> @@ -334,8 +334,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -344,8 +344,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -354,8 +354,8 @@ export const TreeSvg = { fill="#00BC68" /> @@ -364,14 +364,14 @@ export const TreeSvg = { fill="#111111" /> @@ -380,8 +380,8 @@ export const TreeSvg = { fill="white" /> @@ -390,8 +390,8 @@ export const TreeSvg = { fill="white" /> @@ -412,8 +412,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -422,8 +422,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -432,14 +432,14 @@ export const TreeSvg = { fill="#00BC68" /> @@ -448,8 +448,8 @@ export const TreeSvg = { fill="white" /> @@ -458,8 +458,8 @@ export const TreeSvg = { fill="white" /> @@ -480,8 +480,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -490,8 +490,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -500,14 +500,14 @@ export const TreeSvg = { fill="#00BC68" /> @@ -516,8 +516,8 @@ export const TreeSvg = { fill="white" /> @@ -526,8 +526,8 @@ export const TreeSvg = { fill="white" /> @@ -559,8 +559,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -569,8 +569,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -583,8 +583,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -593,8 +593,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -603,8 +603,8 @@ export const TreeSvg = { fill="#00BC68" /> @@ -613,14 +613,14 @@ export const TreeSvg = { fill="#00BC68" /> @@ -629,14 +629,14 @@ export const TreeSvg = { fill="#111111" /> @@ -645,8 +645,8 @@ export const TreeSvg = { fill="white" /> @@ -655,8 +655,8 @@ export const TreeSvg = { fill="white" /> @@ -673,8 +673,8 @@ export const TreeSvg = { fill="white" /> @@ -683,8 +683,8 @@ export const TreeSvg = { fill="white" /> @@ -715,8 +715,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -725,8 +725,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -735,14 +735,14 @@ export const TreeSvg = { fill="#00BC68" /> @@ -751,8 +751,8 @@ export const TreeSvg = { fill="white" /> @@ -761,8 +761,8 @@ export const TreeSvg = { fill="white" /> @@ -783,8 +783,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -793,8 +793,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -803,14 +803,14 @@ export const TreeSvg = { fill="#00BC68" /> @@ -819,8 +819,8 @@ export const TreeSvg = { fill="#111111" /> @@ -829,8 +829,8 @@ export const TreeSvg = { fill="white" /> @@ -839,8 +839,8 @@ export const TreeSvg = { fill="white" /> @@ -871,8 +871,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -881,8 +881,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -891,14 +891,14 @@ export const TreeSvg = { fill="#00BC68" /> @@ -907,8 +907,8 @@ export const TreeSvg = { fill="white" /> @@ -917,8 +917,8 @@ export const TreeSvg = { fill="white" /> @@ -939,8 +939,8 @@ export const TreeSvg = { fill="#FFEB34" /> @@ -949,8 +949,8 @@ export const TreeSvg = { fill="#8F602C" /> @@ -959,14 +959,14 @@ export const TreeSvg = { fill="#00BC68" /> @@ -975,8 +975,8 @@ export const TreeSvg = { fill="#111111" /> @@ -985,8 +985,8 @@ export const TreeSvg = { fill="white" /> @@ -995,8 +995,8 @@ export const TreeSvg = { fill="white" /> diff --git a/pages/surveys/questions/index.tsx b/pages/surveys/questions/index.tsx index c864cc5..0362eb9 100644 --- a/pages/surveys/questions/index.tsx +++ b/pages/surveys/questions/index.tsx @@ -1,6 +1,6 @@ import { ReactNode, useMemo, useState } from 'react' import { Variants, motion, useAnimate } from 'framer-motion' -import { FormProvider } from 'react-hook-form' +import { FormProvider, SubmitHandler, useFormContext } from 'react-hook-form' import { FunnelProvider } from '@/contexts/useFunnelContext' import createFunnel from '@/components/funnel/createFunnel' @@ -13,6 +13,7 @@ import FormLayout from '@/layout/form-layout' import OXQuestion from '@/components/compositions/question/OXQuestion' import ManualQuestion from '@/components/compositions/question/\bManualQuestion' import { TreeSvg } from '@/pages/assets/questionTrees' +import FinishQuestion from '@/components/compositions/question/FinishQuestion' const { Funnel, Step, useFunnel } = createFunnel([ '1번', @@ -333,6 +334,11 @@ const Page = () => { const questionForm = useQuestionForm() + // const { handleSubmit } = useFormContext() + // const onSubmit: SubmitHandler = (data) => { + // console.log(data) + // } + const stepText = useMemo(() => `${step.replace('번', '')}`, [step]) return ( @@ -373,9 +379,12 @@ const Page = () => { } button={ - //마지막 스텝 버튼만 onClick에 handleSubmit 연결, 제출하기 버튼으로 변경 - } content={