refactor: Funnel 컴포넌트 리팩토링

[bbearcookie]

🧩 이슈 번호

• close Funnel 컴포넌트 리팩토링 #499

✅ 작업 사항

#52 에서 작업했던 Funnel 컴포넌트의 각 Step에 타입을 일일히 제네릭으로 넣어줘야 했던 불편함이 있었어요.
이 부분을 개선해보고자 리팩토링 작업을 진행했어요.

createFunnel 헬퍼 함수

사용하는 측의 steps 배열 정보를 받고 퍼널, 스텝, 훅에 들어가야 할 제네릭을 넣어주게끔 헬퍼 함수를 작성했어요.

const createFunnel = <T extends readonly string[]>(steps: T) => ({
  Funnel: Funnel<T>,
  Step: Step<T>,
  useFunnel: (initialStep?: T[number]) => useFunnel<T>(steps, initialStep)
});

👩‍💻 공유 포인트 및 논의 사항

새로운 사용법

createFunnel 함수를 통해서 Funnel, Step, useFunnel 훅을 가져올 수 있어요.

그러면 이와 같이 Step 컴포넌트의 name에 들어갈 수 있는 문자열의 이름을 정확하게 추론해요.

전체 예시

import { createFunnel } from '@/shared/Funnel';

const { Funnel, Step, useFunnel } = createFunnel([
  '방선택',
  '인증시간',
  '루틴정보',
  '비밀번호',
  '마무리'
] as const);

const Page = () => {
  const { step, hasNext, hasPrev, setStep, toNext, toPrev } = useFunnel();

  return (
    <div className="bg-slate-100">
      <div className="flex min-h-[700px] items-center justify-center text-4xl">
        <Funnel step={step}>
          <Step name="마무리">
            <div>마무리 페이지</div>
            <button onClick={() => setStep('방선택')}>처음으로 이동하기</button>
          </Step>
          <Step name="비밀번호">비밀번호 페이지</Step>
          <Step name="루틴정보">루틴정보 페이지</Step>
          <Step name="인증시간">인증시간 페이지</Step>
          <Step name="방선택">방선택 페이지</Step>
          <div>Step 컴포넌트가 아닌 요소는 렌더링에서 무시돼요.</div>
          <div>
            children에 순서를 뒤죽박죽으로 등록해도 steps 배열에 들어가있는
            순서로 스텝을 보여줘요.
          </div>
          <div>
            또는 각 스텝에서 다음 스텝으로 넘어가는 로직에 setStep을 사용하고
            핸들러로 전달할 수 있어요.
          </div>
        </Funnel>
      </div>
      <div className="absolute bottom-0 w-full">
        <div className="grid w-full grid-cols-2">
          {hasPrev && (
            <button
              className="btn btn-danger col-start-1 w-full rounded-none"
              onClick={toPrev}
            >
              이전으로
            </button>
          )}
          {hasNext && (
            <button
              className="btn btn-success col-start-2 w-full rounded-none"
              onClick={toNext}
            >
              다음으로
            </button>
          )}
        </div>
      </div>
    </div>
  );
}