[SMH-91] Funnel 컴포넌트

[qkdflrgs]

Jira

• SMH-91

배경

회원가입 페이지 및 회원정보 찾기 등 퍼널 패턴에서 사용할 수 있는 컴포넌트입니다.

주요 기능

• Funnel component
• useFunnel hook

사용 예시

회원가입 퍼널 예시

const [Funnel, setStep] = useFunnel(["id", "password", "name"] as const, {
  initialStep: "id"
})

<Funnel>
  <Funnel.Step>
    <IdFunnel onNext={() => setStep("password")} />
  </Funnel.Step>
  <Funnel.Step>
    <PasswordFunnel onNext={() => setStep("name")} />
  </Funnel.Step>
  <Funnel.Step>
    <NameFunnel onNext={() => setStep("success")} />
  </Funnel.Step>
  <Funnel.Step>
    <SuccessFunnel />
  </Funnel.Step>
</Funnel>

기타

[juchanhwang]

처음 보는 패턴인데 흥미롭고 재미있네요
스탭으로 넘어가는 페이지 작업할 때 굉장히 유용한 패턴이었네요! 그동안 어렵게 구현했다는 생각이 드네요! 덕분에 퍼널 패턴 알아갑니다 !!!

[juchanhwang]

여기서 타입 단언을 하는 이유는 무엇인가요?
타입 추론을 못하나요?

[juchanhwang]

string의 배열로 선언해도 되지 않나 생각했는데 string[]
빈 배열이 없다는 것을 타입으 보호하려고 의도한 것이 맞을까요? 실제로 빈 배열일 경우가 없나요?