@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?

interface FormState {
  purpose: Purpose;
  address: string;
  income: number;
}

function Funnel() {
  const [formState, setFormState] = useState<Partial<FormState>>({});
  const [Funnel, setStep] = useFunnel([FunnelName.대출목적선택, FunnelName.담보물선택, FunnelName.연소득입력], {
    initialStep: FunnelName.대출목적선택,
    stepQueryKey: 'mortgage-loan-funnel',
  });

  return (
    <Funnel>
      <Funnel.Step name={FunnelName.대출목적선택}>
        <대출목적선택
          onNext={purpose => 
            setFormState(prev => ({ ...prev, purpose }));
          }}
        />
      </Funnel.Step>
      <Funnel.Step name={FunnelName.담보물선택}>
        <담보물선택
          onNext={(address) => {
            setFormState(prev => ({ ...prev, address }));
          }}
        />   
      </Funnel.Step>
      <Funnel.Step name={FunnelName.연소득입력}>
        <연소득입력
          onNext={(income) => {
            setFormState(prev => ({ ...prev, income }));
          }}
        />   
      </Funnel.Step>
    </Funnel>
  );
};

interface Context {
  purpose: Purpose;
  address: string;
  income: number;
}

type Event = 
| { type: "대출목적선택완료"; payload: { purpose: Purpose }}
| { type: "담보물선택완료"; payload: { address: string }}
| { type: "연소득입력완료"; payload: { income: number }};

type StateType = 
| { value: "대출목적선택"; event: "대출목적선택완료"; context: Partial<Context> }
| { value: "담보물선택"; event: "담보물선택완료"; context: Partial<Context> & Pick<Context, "purpose"> }
| { value: "연소득입력"; event: "연소득입력완료"; context: Partial<Context> & Pick<Context, "purpose" | "address"> }
| { value: "입력완료"; context: Context };

function createFunnelMachine() {
  return (
    createMachine<Partial<Context>, Event, StateType>({
		  id: "mortgage-loan-funnel",
		  initial: "대출목적선택",
		  states: {
				대출목적선택: {
					entry: [assign(context => 대출목적선택State검증(context))],
					on: {
						대출목적선택완료: [
						  {
						    target: "담보물선택",
						    actions: [assign()],
						  }
						]
					}
				},
				담보물선택: {
					entry: [assign(context => 담보물선택State검증(context))],
					on: {
						담보물선택완료: [
						  {
						    target: "연소득입력",
						    actions: [assign()],
						  }
						]
					}
				},
				연소득입력: {
					entry: [assign(context => 연소득입력State검증(context))],
					on: {
						연소득입력완료: [
						  {
						    target: "입력완료",
						    actions: [assign()],
						  }
						]
					}
				},
				입력완료: {
				  entry: [assign(context => 입력완료State검증(context))],
				}
		  }
    })
  );
}

function Funnel() {
  const [funnelMachine] = useState(() => createFunnelMachine());
  // useMachineRouter는 dispatch 시점에 적절한 다음 퍼널로 라우트시켜주는 기능을 구현한 hook이에요
  // 내부적으로 XState의 useMachine을 사용해요
  const [render, state] = useMachineRouter(funnelMachine);

  return (
    <>
      {render({
        대출목적선택: ({ dispatch }) => (
          <대출목적선택
	          onNext={purpose => 
	            dispatch({ type: "대출목적선택완료", payload: { purpose }})
	          }}
	        />
        ),
        담보물선택: ({ dispatch }) => (
          <담보물선택
	          onNext={address => 
	            dispatch({ type: "담보물선택완료", payload: { address }})
	          }}
	        />
        ),
        연소득입력: ({ dispatch }) => (
          <연소득입력
	          onNext={income => 
	            dispatch({ type: "연소득입력완료", payload: { income }})
	          }}
	        />
        ),
        입력완료: ({ context }) => (
          <입력완료 context={context} />
        )
      })}
    </>
  );
}