From ec5e96180136ae12da99630da57b4f423817cd61 Mon Sep 17 00:00:00 2001 From: yook Date: Sun, 26 Jan 2025 00:21:14 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=94=A5=20Remove:=20useSurvey=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useSurvey.ts | 128 ----------------------------------------- 1 file changed, 128 deletions(-) delete mode 100644 src/hooks/useSurvey.ts diff --git a/src/hooks/useSurvey.ts b/src/hooks/useSurvey.ts deleted file mode 100644 index 20858082..00000000 --- a/src/hooks/useSurvey.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { useState, useEffect, useCallback } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { postPersonalKeyword } from '@/services/onboarding/postPersonalKeyword'; -import { patchMyInitState } from '@/services/user/patchMyInitState'; -import { getMyInfo } from '@/services/user/getMyInfo'; -import { - DUMMY_QUESTION_STEP1, - DUMMY_QUESTION_STEP2, - DUMMY_QUESTION_STEP3, - DUMMY_QUESTION_STEP4, -} from '@/constants/onBoarding'; - -export const useSurvey = () => { - const [step, setStep] = useState(1); - const [progressStep, setProgressStep] = useState(1); - const [answer, setAnswer] = useState([]); - const [answerLength, setAnswerLength] = useState(0); - const [isCompleted, setIsCompleted] = useState(false); - const [result, setResult] = useState([]); - const [username, setUserName] = useState('사용자'); - const [loading, setLoading] = useState(false); - const navigate = useNavigate(); - - useEffect(() => { - if (step !== 5) return; - - const fetchMyInfo = async () => { - try { - const response = await getMyInfo(); - setUserName(response.result.nickName); - } catch (error) { - console.error('내 정보 조회 실패:', error); - } - }; - - fetchMyInfo(); - }, [step]); - - const setNextStep = useCallback(async () => { - if (step === 4) { - setProgressStep(5); - await new Promise(resolve => setTimeout(resolve, 500)); - setStep(prev => prev + 1); - setLoading(true); - setIsCompleted(false); - await new Promise(resolve => setTimeout(resolve, 2000)); - - try { - const response = await postPersonalKeyword({ - surveyResultText: answer, - }); - setResult(response.result.keywords); - setIsCompleted(true); - await new Promise(resolve => setTimeout(resolve, 1000)); - setLoading(false); - } catch (error) { - console.error('성향 분석 실패:', error); - setLoading(false); - } - return; - } - - if (step === 5) { - try { - await patchMyInitState(); - navigate('/group-select'); - } catch (error) { - console.error('초기 상태 변경 실패:', error); - } - return; - } - - setStep(prev => prev + 1); - setProgressStep(prev => prev + 1); - }, [step, answer, navigate]); - - const setPrevStep = useCallback(() => { - if (step === 1) { - navigate('/survey-intro'); - } - setStep(prev => prev - 1); - setProgressStep(prev => prev - 1); - }, [step]); - - const handleAnswer = useCallback((select: string) => { - setAnswer(prev => [...prev, select]); - setAnswerLength(prev => prev + 1); - }, []); - - const isStepValid = useCallback(() => { - if (step === 5) return true; - return answerLength >= step; - }, [step, answerLength]); - - const stepComponents = [ - { - questions: DUMMY_QUESTION_STEP1, - title: `평소 정리정돈에 대해\n어떻게 생각하시나요?`, - }, - { - questions: DUMMY_QUESTION_STEP2, - title: `어떤 방식으로 일하는 것을\n선호하시나요?`, - }, - { - questions: DUMMY_QUESTION_STEP3, - title: `주변 환경이\n작업에 얼마나 영향을 주나요?`, - }, - { - questions: DUMMY_QUESTION_STEP4, - title: `집안일을 할 때\n어떤 감정을 느끼시나요?`, - }, - ]; - - return { - step, - progressStep, - answer, - isCompleted, - result, - username, - loading, - setNextStep, - setPrevStep, - handleAnswer, - isStepValid, - stepComponents, - }; -}; From 97683a89910ca82fd66d6ff0af599a35547c90b6 Mon Sep 17 00:00:00 2001 From: yook Date: Sun, 26 Jan 2025 00:22:14 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=94=A7=20Wrench:=20=EC=8A=A4=EB=8B=88?= =?UTF-8?q?=ED=8E=AB=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/typescriptreact.code-snippets | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.vscode/typescriptreact.code-snippets b/.vscode/typescriptreact.code-snippets index ec679af2..3b6d79c7 100644 --- a/.vscode/typescriptreact.code-snippets +++ b/.vscode/typescriptreact.code-snippets @@ -19,12 +19,11 @@ "body": [ "import React from 'react'", "", - "interface ${1:${TM_FILENAME_BASE}}Props {", " $2", "};", "", - "const ${1:${TM_FILENAME_BASE}}: React.FC<${1:${TM_FILENAME_BASE}}Props> = ({ $2 } ) => {", + "const ${1:${TM_FILENAME_BASE}} = ({ $2 }: ${1:${TM_FILENAME_BASE}}Props) => {", " return (", "
", " ${1:${TM_FILENAME_BASE}}", From c6e9494b0b44776f1e9db80a1fb376fbc647b109 Mon Sep 17 00:00:00 2001 From: yook Date: Sun, 26 Jan 2025 00:23:02 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=85=80=ED=9B=85=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/survey/useLoadingState.ts | 10 +++ src/hooks/survey/useSurveyState.ts | 101 ++++++++++++++++++++++++++++ src/hooks/survey/useUserName.ts | 24 +++++++ src/hooks/useFunnel.tsx | 36 ++++++++++ 4 files changed, 171 insertions(+) create mode 100644 src/hooks/survey/useLoadingState.ts create mode 100644 src/hooks/survey/useSurveyState.ts create mode 100644 src/hooks/survey/useUserName.ts create mode 100644 src/hooks/useFunnel.tsx diff --git a/src/hooks/survey/useLoadingState.ts b/src/hooks/survey/useLoadingState.ts new file mode 100644 index 00000000..160fdd8c --- /dev/null +++ b/src/hooks/survey/useLoadingState.ts @@ -0,0 +1,10 @@ +import { useState } from 'react'; + +const useLoadingState = () => { + const [isLoading, setIsLoading] = useState(false); + const [isCompleted, setIsCompleted] = useState(false); + + return { isLoading, setIsLoading, isCompleted, setIsCompleted }; +}; + +export default useLoadingState; diff --git a/src/hooks/survey/useSurveyState.ts b/src/hooks/survey/useSurveyState.ts new file mode 100644 index 00000000..f0fb0bf3 --- /dev/null +++ b/src/hooks/survey/useSurveyState.ts @@ -0,0 +1,101 @@ +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { postPersonalKeyword } from '@/services/onboarding/postPersonalKeyword'; +import { patchMyInitState } from '@/services/user/patchMyInitState'; + +type StepType = '첫번째' | '두번째' | '세번째' | '네번째' | '설문결과'; + +interface useSurveyStateProps { + currentStep: StepType; + setStep: React.Dispatch>; + setIsLoading: React.Dispatch>; + setIsCompleted: React.Dispatch>; +} + +const useSurveyState = ({ + currentStep, + setStep, + setIsLoading, + setIsCompleted, +}: useSurveyStateProps) => { + const [answer, setAnswer] = useState([]); + const [progressStep, setProgressStep] = useState(1); + const [result, setResult] = useState([]); + + const navigate = useNavigate(); + + const handleNextStep = async (selectedItem?: string) => { + if (selectedItem) { + setAnswer(prev => [...prev, selectedItem]); + } + + if (currentStep === '첫번째') { + setProgressStep(2); + setStep('두번째'); + } else if (currentStep === '두번째') { + setProgressStep(3); + setStep('세번째'); + } else if (currentStep === '세번째') { + setProgressStep(4); + setStep('네번째'); + } else if (currentStep === '네번째') { + setProgressStep(5); + await new Promise(resolve => setTimeout(resolve, 700)); + setStep('설문결과'); + //분석중입니다. + setIsLoading(true); + + try { + const response = await postPersonalKeyword({ + surveyResultText: answer, + }); + setResult(response.result.keywords); + await new Promise(resolve => setTimeout(resolve, 1500)); + //분석이 완료되었습니다. + setIsCompleted(true); + await new Promise(resolve => setTimeout(resolve, 1000)); + setIsLoading(false); + } catch (error) { + console.error('성향 분석 실패:', error); + setIsLoading(false); + } + return; + } + }; + + const handleDone = async () => { + try { + await patchMyInitState(); + navigate('/group-select'); + } catch (error) { + console.error('초기 상태 변경 실패:', error); + } + return; + }; + + const handlePrevStep = () => { + //프로그레스바 width 조절 + setProgressStep(prev => prev - 1); + //뒤로가면 최근에 추가한 answer 값 초기화 + setAnswer(prev => prev.slice(0, -1)); + + if (currentStep === '첫번째') { + navigate('/survey-intro'); + } else if (currentStep === '두번째') { + setStep('첫번째'); + } else if (currentStep === '세번째') { + setStep('두번째'); + } else if (currentStep === '네번째') { + setStep('세번째'); + } + }; + return { + progressStep, + result, + handleNextStep, + handleDone, + handlePrevStep, + }; +}; + +export default useSurveyState; diff --git a/src/hooks/survey/useUserName.ts b/src/hooks/survey/useUserName.ts new file mode 100644 index 00000000..37337516 --- /dev/null +++ b/src/hooks/survey/useUserName.ts @@ -0,0 +1,24 @@ +import { getMyInfo } from '@/services/user/getMyInfo'; +import { useEffect, useState } from 'react'; + +const useUserName = (currentStep: string) => { + const [username, setUserName] = useState('사용자'); + + useEffect(() => { + if (currentStep !== '설문결과') return; + + const fetchMyInfo = async () => { + try { + const response = await getMyInfo(); + setUserName(response.result.nickName); + } catch (error) { + console.error('내 정보 조회 실패:', error); + } + }; + + fetchMyInfo(); + }, [currentStep]); + return { username }; +}; + +export default useUserName; diff --git a/src/hooks/useFunnel.tsx b/src/hooks/useFunnel.tsx new file mode 100644 index 00000000..3542b14e --- /dev/null +++ b/src/hooks/useFunnel.tsx @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; + +type StepProps = { + children: React.ReactNode; + name: T; +}; + +type FunnelProps = { + children: React.ReactElement>[] | React.ReactElement>; +}; + +type FunnelComponent = React.FC> & { + Step: React.FC>; +}; + +const useFunnel = (initialStep: T) => { + const [step, setStep] = useState(initialStep); + + const Step = (props: StepProps) => { + return <>{props.children}; + }; + + const Funnel: FunnelComponent = Object.assign( + ({ children }: FunnelProps) => { + const targetStep = React.Children.toArray(children).find( + childStep => (childStep as React.ReactElement).props.name === step + ); + return targetStep as React.ReactElement; + }, + { Step } + ); + + return [Funnel, setStep, step] as const; +}; + +export default useFunnel; From c2344a49ca5d520f96f4587ee84783a71f3fe75a Mon Sep 17 00:00:00 2001 From: yook Date: Sun, 26 Jan 2025 00:23:32 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20=ED=8D=BC?= =?UTF-8?q?=EB=84=90=20=ED=8C=A8=ED=84=B4=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/survey/steps/Step1.tsx | 79 +++++++----- src/components/survey/steps/Step2.tsx | 72 +++++++---- src/components/survey/steps/Step3.tsx | 72 +++++++---- src/components/survey/steps/Step4.tsx | 72 +++++++---- src/components/survey/steps/Step5.tsx | 49 ++++--- src/pages/survey/SurveyPage.tsx | 177 ++++++++++++++++---------- 6 files changed, 324 insertions(+), 197 deletions(-) diff --git a/src/components/survey/steps/Step1.tsx b/src/components/survey/steps/Step1.tsx index de0b5883..b592f074 100644 --- a/src/components/survey/steps/Step1.tsx +++ b/src/components/survey/steps/Step1.tsx @@ -1,25 +1,30 @@ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import SurveyTitle from '@/components/survey/SurveyTitle/SurveyTitle'; import MenuSelect from '@/components/survey/MenuSelect/MenuSelect'; import { motion } from 'framer-motion'; +import { Button } from '@/components/common/ui/button'; interface Step1Props { title: string; questions: string[]; - handleAnswer: (text: string) => void; + handleNextStep: (selectedItem?: string) => void; } -const Step1 = ({ title, questions, handleAnswer }: Step1Props) => { +const Step1 = ({ title, questions, handleNextStep }: Step1Props) => { const [activeItem, setActiveItem] = useState(''); const memoizedTitle = useMemo(() => title, [title]); - const handleSelect = useCallback( - (content: string) => { + const handleSelect = (content: string) => { + if (activeItem === content) { + setActiveItem(''); + } else { setActiveItem(content); - handleAnswer(content); - }, - [handleAnswer] - ); + } + }; + + const onNext = () => { + handleNextStep(activeItem); + }; const container = { hidden: { opacity: 0, y: -20 }, @@ -34,28 +39,40 @@ const Step1 = ({ title, questions, handleAnswer }: Step1Props) => { }; return ( - -
- -
- -
- {questions.map(question => ( - handleSelect(question)} - /> - ))} -
- + <> + +
+ +
+ +
+ {questions.map(question => ( + handleSelect(question)} + /> + ))} +
+ + + + + ); }; diff --git a/src/components/survey/steps/Step2.tsx b/src/components/survey/steps/Step2.tsx index 1dbcecf6..569a71e2 100644 --- a/src/components/survey/steps/Step2.tsx +++ b/src/components/survey/steps/Step2.tsx @@ -2,21 +2,29 @@ import React, { useMemo, useState } from 'react'; import SurveyTitle from '@/components/survey/SurveyTitle/SurveyTitle'; import MenuSelect from '@/components/survey/MenuSelect/MenuSelect'; import { motion } from 'framer-motion'; +import { Button } from '@/components/common/ui/button'; interface Step2Props { title: string; questions: string[]; - handleAnswer: (text: string) => void; + handleNextStep: (selectedItem?: string) => void; } -const Step2: React.FC = ({ title, questions, handleAnswer }) => { +const Step2: React.FC = ({ title, questions, handleNextStep }) => { const [activeItem, setActiveItem] = useState(''); const memoizedTitle = useMemo(() => title, [title]); const handleSelect = (content: string) => { - setActiveItem(content); - handleAnswer(content); + if (activeItem === content) { + setActiveItem(''); + } else { + setActiveItem(content); + } + }; + + const onNext = () => { + handleNextStep(activeItem); }; const container = { @@ -32,28 +40,40 @@ const Step2: React.FC = ({ title, questions, handleAnswer }) => { }; return ( - -
- -
- -
- {questions.map(question => ( - handleSelect(question)} - /> - ))} -
- + <> + +
+ +
+ +
+ {questions.map(question => ( + handleSelect(question)} + /> + ))} +
+ + + + + ); }; diff --git a/src/components/survey/steps/Step3.tsx b/src/components/survey/steps/Step3.tsx index 7b053b9d..01562382 100644 --- a/src/components/survey/steps/Step3.tsx +++ b/src/components/survey/steps/Step3.tsx @@ -2,21 +2,29 @@ import React, { useMemo, useState } from 'react'; import SurveyTitle from '@/components/survey/SurveyTitle/SurveyTitle'; import MenuSelect from '@/components/survey/MenuSelect/MenuSelect'; import { motion } from 'framer-motion'; +import { Button } from '@/components/common/ui/button'; interface Step3Props { title: string; questions: string[]; - handleAnswer: (text: string) => void; + handleNextStep: (selectedItem?: string) => void; } -const Step3: React.FC = ({ title, questions, handleAnswer }) => { +const Step3: React.FC = ({ title, questions, handleNextStep }) => { const [activeItem, setActiveItem] = useState(''); const memoizedTitle = useMemo(() => title, [title]); const handleSelect = (content: string) => { - setActiveItem(content); - handleAnswer(content); + if (activeItem === content) { + setActiveItem(''); + } else { + setActiveItem(content); + } + }; + + const onNext = () => { + handleNextStep(activeItem); }; const container = { @@ -32,28 +40,40 @@ const Step3: React.FC = ({ title, questions, handleAnswer }) => { }; return ( - -
- -
- -
- {questions.map(question => ( - handleSelect(question)} - /> - ))} -
- + <> + +
+ +
+ +
+ {questions.map(question => ( + handleSelect(question)} + /> + ))} +
+ + + + + ); }; diff --git a/src/components/survey/steps/Step4.tsx b/src/components/survey/steps/Step4.tsx index 1c3e4ac2..c4c17a4e 100644 --- a/src/components/survey/steps/Step4.tsx +++ b/src/components/survey/steps/Step4.tsx @@ -2,21 +2,29 @@ import React, { useMemo, useState } from 'react'; import SurveyTitle from '@/components/survey/SurveyTitle/SurveyTitle'; import MenuSelect from '@/components/survey/MenuSelect/MenuSelect'; import { motion } from 'framer-motion'; +import { Button } from '@/components/common/ui/button'; interface Step4Props { title: string; questions: string[]; - handleAnswer: (text: string) => void; + handleNextStep: (selectedItem?: string) => void; } -const Step4: React.FC = ({ title, questions, handleAnswer }) => { +const Step4: React.FC = ({ title, questions, handleNextStep }) => { const [activeItem, setActiveItem] = useState(''); const memoizedTitle = useMemo(() => title, [title]); const handleSelect = (content: string) => { - setActiveItem(content); - handleAnswer(content); + if (activeItem === content) { + setActiveItem(''); + } else { + setActiveItem(content); + } + }; + + const onNext = () => { + handleNextStep(activeItem); }; const container = { @@ -32,28 +40,40 @@ const Step4: React.FC = ({ title, questions, handleAnswer }) => { }; return ( - -
- -
- -
- {questions.map(question => ( - handleSelect(question)} - /> - ))} -
- + <> + +
+ +
+ +
+ {questions.map(question => ( + handleSelect(question)} + /> + ))} +
+ + + + + ); }; diff --git a/src/components/survey/steps/Step5.tsx b/src/components/survey/steps/Step5.tsx index 2d20421e..e1583ae0 100644 --- a/src/components/survey/steps/Step5.tsx +++ b/src/components/survey/steps/Step5.tsx @@ -1,13 +1,15 @@ import SurveyTitle from '@/components/survey/SurveyTitle/SurveyTitle'; import TextTag from '@/components/common/tag/TextTag/TextTag'; import { motion } from 'framer-motion'; +import { Button } from '@/components/common/ui/button'; interface Step5Props { title: string; results: string[]; + handleDone: () => void; } -const Step5: React.FC = ({ title, results }) => { +const Step5: React.FC = ({ title, results, handleDone }) => { const container = { hidden: { opacity: 0 }, show: { @@ -41,27 +43,34 @@ const Step5: React.FC = ({ title, results }) => { }; return ( - - - - + <> + + + + - - {results.map(result => ( - - ))} + + {results.map(result => ( + + ))} + + + + - + ); }; diff --git a/src/pages/survey/SurveyPage.tsx b/src/pages/survey/SurveyPage.tsx index ab8089da..f37503d2 100644 --- a/src/pages/survey/SurveyPage.tsx +++ b/src/pages/survey/SurveyPage.tsx @@ -1,28 +1,20 @@ -import React from 'react'; import { motion } from 'framer-motion'; import BackBtn from '@/components/common/button/BackBtn/BackBtn'; import { Progress } from '@/components/common/ui/progress'; -import { Button } from '@/components/common/ui/button'; import { Step1, Step2, Step3, Step4, Step5, LoadingScreen } from '@/components/survey'; -import { useSurvey } from '@/hooks/useSurvey'; import MetaTags from '@/components/common/metaTags/MetaTags'; -import { BUTTON_TEXT } from '@/constants/onBoarding'; - -const SurveyPage: React.FC = () => { - const { - step, - progressStep, - isCompleted, - result, - username, - loading, - setNextStep, - setPrevStep, - handleAnswer, - isStepValid, - stepComponents, - } = useSurvey(); +import { + DUMMY_QUESTION_STEP1, + DUMMY_QUESTION_STEP2, + DUMMY_QUESTION_STEP3, + DUMMY_QUESTION_STEP4, +} from '@/constants/onBoarding'; +import useFunnel from '@/hooks/useFunnel'; +import useLoadingState from '@/hooks/survey/useLoadingState'; +import useUserName from '@/hooks/survey/useUserName'; +import useSurveyState from '@/hooks/survey/useSurveyState'; +const SurveyPage = () => { const item = { hidden: { opacity: 0 }, show: { @@ -34,44 +26,21 @@ const SurveyPage: React.FC = () => { }, }; - const isValid = isStepValid(); - - const renderStep = () => { - if (step <= 4) { - const StepComponent = [Step1, Step2, Step3, Step4][step - 1]; - const { questions, title } = stepComponents[step - 1]; - return ; - } - return ( -
- -
- ); - }; - - const renderContent = () => ( - - {renderStep()} - - ); + const [Funnel, setStep, currentStep] = useFunnel< + '첫번째' | '두번째' | '세번째' | '네번째' | '설문결과' + >('첫번째'); - const renderButton = () => ( - - - - ); + //로딩 상태 관리 커스텀 훅 + const { isLoading, isCompleted, setIsLoading, setIsCompleted } = useLoadingState(); + //사용자 이름을 가져오는 커스텀 훅 + const { username } = useUserName(currentStep); + //설문을 관리하는 커스텀 훅 + const { progressStep, result, handleNextStep, handleDone, handlePrevStep } = useSurveyState({ + currentStep, + setStep, + setIsLoading, + setIsCompleted, + }); return (
@@ -80,23 +49,95 @@ const SurveyPage: React.FC = () => { description={'나의 집안일 스타일을 알아보세요.'} url={`https://doit-together.vercel.app/survey/`} /> - {step <= 4 && ( - -
- -
- - + + {currentStep !== '설문결과' && ( + <> + {/* 헤더 */} + +
+ +
+ + + )} - {loading ? ( -
+ {isLoading ? ( + <> -
+ ) : ( <> - {renderContent()} - {renderButton()} + {/* 본문 */} + + + + + + + + + + + + + + + + + + + {progressStep !== 5 && ( + + )} + + + +
+ +
+ + )}
From 2a21c1a54efa6bcb10b7ad50209ace2f322b22df Mon Sep 17 00:00:00 2001 From: yook Date: Sun, 26 Jan 2025 15:01:59 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20motion.div?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/survey/steps/Step1.tsx | 4 +- src/components/survey/steps/Step2.tsx | 4 +- src/components/survey/steps/Step3.tsx | 4 +- src/components/survey/steps/Step4.tsx | 4 +- src/components/survey/steps/Step5.tsx | 4 +- src/pages/survey/SurveyPage.tsx | 84 +++++++++------------------ 6 files changed, 37 insertions(+), 67 deletions(-) diff --git a/src/components/survey/steps/Step1.tsx b/src/components/survey/steps/Step1.tsx index b592f074..0b081923 100644 --- a/src/components/survey/steps/Step1.tsx +++ b/src/components/survey/steps/Step1.tsx @@ -41,7 +41,7 @@ const Step1 = ({ title, questions, handleNextStep }: Step1Props) => { return ( <> { ))}
- + diff --git a/src/pages/survey/SurveyPage.tsx b/src/pages/survey/SurveyPage.tsx index f37503d2..0f108e72 100644 --- a/src/pages/survey/SurveyPage.tsx +++ b/src/pages/survey/SurveyPage.tsx @@ -71,71 +71,41 @@ const SurveyPage = () => { {/* 본문 */} - - - + - - - + - - - + - - {progressStep !== 5 && ( - - )} - + {progressStep !== 5 && ( + + )} -
- -
+ From 5d2f9b9f497d66162c323c2995b2d51ca6e75ce4 Mon Sep 17 00:00:00 2001 From: yook Date: Sun, 26 Jan 2025 15:20:30 +0900 Subject: [PATCH 6/7] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20interface?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useFunnel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useFunnel.tsx b/src/hooks/useFunnel.tsx index 3542b14e..a819bbd5 100644 --- a/src/hooks/useFunnel.tsx +++ b/src/hooks/useFunnel.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; -type StepProps = { +interface StepProps { children: React.ReactNode; name: T; -}; +} type FunnelProps = { children: React.ReactElement>[] | React.ReactElement>; From f0e0ad12c91d919385fb47d206516106be4d1a11 Mon Sep 17 00:00:00 2001 From: yook Date: Sun, 26 Jan 2025 15:48:31 +0900 Subject: [PATCH 7/7] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20StepType?= =?UTF-8?q?=20=EC=A0=95=EC=9D=98=20=EB=B0=8F=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/survey/useSurveyState.ts | 3 +-- src/hooks/useFunnel.tsx | 3 ++- src/pages/survey/SurveyPage.tsx | 5 ++--- src/types/surveySteps.ts | 1 + 4 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 src/types/surveySteps.ts diff --git a/src/hooks/survey/useSurveyState.ts b/src/hooks/survey/useSurveyState.ts index f0fb0bf3..0a243019 100644 --- a/src/hooks/survey/useSurveyState.ts +++ b/src/hooks/survey/useSurveyState.ts @@ -1,10 +1,9 @@ +import { StepType } from './../../types/surveySteps'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { postPersonalKeyword } from '@/services/onboarding/postPersonalKeyword'; import { patchMyInitState } from '@/services/user/patchMyInitState'; -type StepType = '첫번째' | '두번째' | '세번째' | '네번째' | '설문결과'; - interface useSurveyStateProps { currentStep: StepType; setStep: React.Dispatch>; diff --git a/src/hooks/useFunnel.tsx b/src/hooks/useFunnel.tsx index a819bbd5..84f64f5e 100644 --- a/src/hooks/useFunnel.tsx +++ b/src/hooks/useFunnel.tsx @@ -1,3 +1,4 @@ +import { StepType } from '@/types/surveySteps'; import React, { useState } from 'react'; interface StepProps { @@ -13,7 +14,7 @@ type FunnelComponent = React.FC> & { Step: React.FC>; }; -const useFunnel = (initialStep: T) => { +const useFunnel = (initialStep: T) => { const [step, setStep] = useState(initialStep); const Step = (props: StepProps) => { diff --git a/src/pages/survey/SurveyPage.tsx b/src/pages/survey/SurveyPage.tsx index 0f108e72..10b9fce2 100644 --- a/src/pages/survey/SurveyPage.tsx +++ b/src/pages/survey/SurveyPage.tsx @@ -13,6 +13,7 @@ import useFunnel from '@/hooks/useFunnel'; import useLoadingState from '@/hooks/survey/useLoadingState'; import useUserName from '@/hooks/survey/useUserName'; import useSurveyState from '@/hooks/survey/useSurveyState'; +import { StepType } from '@/types/surveySteps'; const SurveyPage = () => { const item = { @@ -26,9 +27,7 @@ const SurveyPage = () => { }, }; - const [Funnel, setStep, currentStep] = useFunnel< - '첫번째' | '두번째' | '세번째' | '네번째' | '설문결과' - >('첫번째'); + const [Funnel, setStep, currentStep] = useFunnel('첫번째'); //로딩 상태 관리 커스텀 훅 const { isLoading, isCompleted, setIsLoading, setIsCompleted } = useLoadingState(); diff --git a/src/types/surveySteps.ts b/src/types/surveySteps.ts new file mode 100644 index 00000000..43b19371 --- /dev/null +++ b/src/types/surveySteps.ts @@ -0,0 +1 @@ +export type StepType = '첫번째' | '두번째' | '세번째' | '네번째' | '설문결과';