Feature/#99 - refactor use survey

[yookeunbyul]

📄 작업 페이지 및 내용 요약

ex) 메인페이지 - 라우트 연결

useFunnel, useLoadingState, useSuveyState, useUserName이라는 커스텀훅을 생성하고 분리해서 사용했습니다.
상위에서 step을 관리하고 Object.assign을 통해 Funnel 안에 Step이 있도록(종속성이 있도록)하여
토스의 패널 패턴을 구현하고 적용해봤습니다.

📌 이슈 넘버

ex) #이슈번호, #이슈번호

• [ISSUE] useSurvey 리팩토링하기 #99

📝 작업 내용

📸 스크린샷(선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
web-1-1-do-it-together-fe	✅ Ready (Inspect)	Visit Preview	Jan 26, 2025 6:49am

[Eugeeun]

고생하셨어요! 코드 잘 봤습니다! useFunnel 파일에서 Funnel 변수 만드신 부분에서 실력이 보이네요..대박

[Eugeeun]

Step1 - 4까지 jsx부분이 중복이 됩니다..!
하나의 컴포넌트로 분리해서 사용하시면 더 간결해질 것 같아요

React.Fragment를 사용하신 이유가 있으신가요?
이미 motion.div에 모든 요소가 들어가 있는 상태여서 제 생각에는 굳이 사용할 필요가 없어보여서요!

[yookeunbyul]

아 그 최상위 motion.div 안에 버튼이 들어있지않아서 한번 묶어줄 <></> 태그가 필요해서 사용했습니다

[yookeunbyul]

저도 사실 똑같은 UI를 반복해서 쓴다는게 불편하다고 생각했습니다. 토스처럼 다양한 UI가 추가될 것아니고..
근데 지금은 제가 생각했을 땐 재사용성보다는 좀 단계마다 분리하고 구조를 한 눈에 보면서 파악하는게 중요하다고 생각해서 이렇게 구현을 하게되었습니다! 나중에.. 또 한번 고려를해볼게용..하하

[Eugeeun]

type StepType = '첫번째' | '두번째' | '세번째' | '네번째' | '설문결과';와 같이 문자열을 유니언 타입으로 정의하신 이유가 있으신가요?
step을 바꾸는 if문이 꽤 복잡해지는 것 같네요
숫자로 변경하면 handleNextStep 함수는 아래와 같이 간단해질 것 같아요

if (currentStep < 4) {
    setProgressStep(currentStep + 1);
    setStep((currentStep + 1));
  } else if (currentStep === 4) {
    setProgressStep(5);
    await new Promise(resolve => setTimeout(resolve, 700));
    setStep(5);
    setIsLoading(true);
...
}

handlePrevStep도 마찬가지구요..!

[yookeunbyul]

숫자로 바꾸면 로직이 간단해지겠지만 문자열로 사용할 때 타입 안정성도 보장되고 단계가 명확하게 보인다는 점, 중간에 추가하기도 좋다는 점에서 문자열을 사용했습니당!!

[Eugeeun]

type StepProps<T> = {
  children: React.ReactNode;
  name: T;
};

type FunnelProps<T> = {
  children: React.ReactElement<StepProps<T>>[] | React.ReactElement<StepProps<T>>;
};

위 부분을 type 키워드로 정의하신 이유가 무엇인가요?
꼭 필요한 곳이 아니면 interface를 사용하는 것이 일관성에 더 좋아보여요!

const useFunnel = <T extends string>(initialStep: T)

16라인의 string 부분에서 type StepType = '첫번째' | '두번째' | '세번째' | '네번째' | '설문결과';를 활용하시면 더 가독성이 좋아질 것 같네요
읽으셨겠지만 string이 아니라 number로 정의하시고 사용하시면 더 간결하질 거에요!

[yookeunbyul]

StepProps말고는 유니온 타입과, 튜플 타입을 사용하므로 type을 사용햇습니당.. StepProps는 단순한 객체 구조이니 interface로 수정하겟습니다!!

[yookeunbyul]

type import해서 사용하도록 수정했습니다~

[Eugeeun]

이 부분도 따로 정의를 해둔 type을 import해서 사용하는게 더 좋아보여요! 여러 군데에 흩어져있으면 나중에 수정사항이 생기면 찾기 힘들잖아요~~!

[yookeunbyul]

오 좋습니다 따로 type으로 빼서 사용하겠습니당!!

[Eugeeun]

Step 컴포넌트에 이미 motion.div로 애니메이션이 들어가있는데 본문에서 애니메이션을 중복해서 넣으신 이유가 있나요?
만약 중복해서 넣을 이유가 없다면 삭제하거나 Step1 - 4가 중복되므로 제거하면 가독성에 더 도움이 될 것 같아요!

[yookeunbyul]

헐 맞네요 제가 걍 복붙하면서 사용하는 이유를 까먹은거같애요 page에 있는 motion.div는 삭제하겠습니당..!