feat(@yourssu/react): create useFunnel

[jonique98]

1️⃣ 어떤 작업을 했나요? (Summary)

• resolved feat: useFunnel 배포 #65

기존 코드에 영향을 미치지 않는 변경사항

• useFunnel을 패키지로 옮겼습니다

기존 코드에 영향을 미치는 변경사항

기존의 useFunnel과 다른 변경사항이 존재합니다

function useFunnel(initialStep: string, steps: string[]);

• initialStep (string): 퍼널의 초기 스텝을 설정합니다.
• totalSteps (string[]): 퍼널의 전체 스텝을 설정합니다.

Return value

• Funnel: 퍼널 객체입니다. 상위 컴포넌트로 활용합니다.
• next: 다음 스텝의 컴포넌트로 이동합니다.
• prev: 이전 스텝의 컴포넌트로 이동합니다.
• setStep: 특정 스텝의 컴포넌트로 이동합니다.

example

const MyComponent = () => {
  const { Funnel, next, prev, setStep } 
  	= useFunnel('step1', ['step1', 'step2', 'step3']);

  return (
	<Funnel>
	  <Funnel.Step name="step1">
	  	<div>Step1 Component</div>
	  	<button onClick={next}>Next</button>
	  </Funnel.step>
       <Funnel>

버그 픽스

2️⃣ 알아두시면 좋아요!

• 처음해봐서 빼먹은 작업있을 수 있습니다 알려주시면 바로 할게요

3️⃣ 추후 작업

4️⃣ 체크리스트 (Checklist)

• main 브랜치의 최신 코드를 pull 받았나요?

[fecapark]

p4) 여기서 리턴 방식을 객체로 변경하신 이유가 있을까요?
이 훅같은 경우는 사용처에 따라 Funnel 컴포넌트의 이름이 바뀔 가능성이 큰데 배열로 리턴하면 그런 변경에 좀 더 유연하지 않을까 싶어요.

ex)

// 리턴 부분
return [Object.assign(Funnel, { Step }), { next, prev, setStep }] as const;

// 사용 부분
const [회원가입퍼널, { setStep }] = useFunnel(...)

느낌으로요.

[jonique98]

반영했습니다!
dbc872c

[owl1753]

수고하셨습니다!

[fecapark]

컨필릭 수정만 해주시면 될 것 같네요!