Toss의 퍼널(Funnel) 패턴 적용해보기

const [registerData, setRegisterData] = useState()
const [step, setStep] = useState<"가입방식"|"주민번호"|"집주소"|"가입성공">("가입방식")

return (
  <main>
    {step === "가입방식" && <가입방식 onNext={(data) => setStep("주민번호")} />} 
    {step === "주민번호" && <주민번호 onNext={() => setStep("집주소")} />} 
    {step === "집주소" && <집주소 onNext={async () => setStep("가입성공")} />} 
    {step === "가입성공" && <가입성공Step />}
  </main>
)

const [registerData, setRegisterData] = useState()
const [step, setStep] = useState<"가입방식"|"주민번호"|"집주소"|"가입성공">("가입방식")

return (
  <main>
    {step === "가입방식" && <가입방식 onNext={(data) => {
      setRegisterData(prev => ({ ...prev, 가입방식: data })) // 이하 동일
      setStep("주민번호")
    }} />} 
    {step === "주민번호" && <주민번호 onNext={() => setStep("집주소")} />} 
    {step === "집주소" && <집주소 onNext={async () => {
      await fetch("/api/register", { data }) // API 호출 장소 변경
      setStep("가입성공")
    }} />} 
    {step === "가입성공" && <가입성공Step />}
  </main>
)

const [registerData, setRegisterData] = useState()
const [step, setStep] = useState<"가입방식"|"주민번호"|"집주소"|"가입성공">("가입방식")

return (
  <main>
    <Step if={step === "가입방식"}>
      <가입방식 onNext={() => setStep("주민번호")} />
    </Step>
    <Step if={step === "주민번호"}>
      <주민번호 onNext={() => setStep("집주소")} />
    </Step>
  // ...
  </main>
)

const [registerData, setRegisterData] = useState()
const [step, setStep] = useState<"가입방식"|"주민번호"|"집주소"|"가입성공">("가입방식")

return (
  <main>
    <Step name="가입방식">
      <가입방식 onNext={() => setStep("주민번호")} />
    </Step>
    <Step name="주민번호">
      <주민번호 onNext={() => setStep("집주소")} />
    </Step>
   // ...
  </main>
)

function useFunnel() {
  const [step, setStep] = useState()

  const Step = (props) => {
    return <>{props.children}</>
  }

  const Funnel = ({ children }) => {
    // name이 현재 step 상태와 동일한 Step만 렌더링
    const targetStep = children.find(childStep => childStep.props.name === step);
    return Object.assign(targetStep, { Step })
  }

  return [Funnel, setStep]
}

const [registerData, setRegisterData] = useState()
const [step, setStep] = useFunnel<"가입방식"|"주민번호"|"집주소"|"가입성공">("가입방식")

return (
  <Funnel>
    <Funnel.Step name="가입방식">
      <가입방식 onNext={() => setStep("주민번호")} />
    </Funnel.Step>
    <Funnel.Step name="주민번호">
      <주민번호 onNext={() => setStep("집주소")} />
    </Funnel.Step>
    // ...
  </Funnel>
)

import { ReactElement, ReactNode, useState } from 'react';

export interface StepProps {
  name: string;
  children: ReactNode;
}

export interface FunnelProps {
  children: Array<ReactElement<StepProps>>;
}

export const useFunnel = (defaultStep: string) => {
  const [step, setStep] = useState(defaultStep);

  // Step
  const Step = (props: StepProps): ReactElement => {
    return <>{props.children}</>;
  };

  // Funnel
  const Funnel = ({ children }: FunnelProps) => {
    const targetStep = children.find((childStep) => childStep.props.name === step);

    return <>{targetStep}</>;
  };

  const nextClickHandler = (nextStep: string) => {
    setStep(nextStep);
  }

  const prevClickHandler = (prevStep: string) => {
    setStep(prevStep);
  }

  return {
    Funnel,
    Step,
    currentStep: step,
    nextClickHandler,
    prevClickHandler
  } as const;
};

const { Funnel, Step, nextClickHandler, prevClickHandler, currentStep } = useFunnel(steps[0].name);

export const OrderSetup = (
  { 
    steps, 
    Funnel, 
    Step, 
    nextClickHandler, 
    prevClickHandler, 
    order, 
    onSetOrder 
  }: OrderSetupProps) => {

  return (
    <>
      <Funnel>
        <Step name="배송지입력">
          <OrderAddress
            onNext={() => nextClickHandler(steps[1].name)}
            onSetOrder={onSetOrder}
            order={order}
          />
        </Step>

        <Step name="주문목록확인">
          <OrderList
            onPrev={() => prevClickHandler(steps[0].name)}
            onNext={() => nextClickHandler(steps[2].name)}
            order={order}
          />
        </Step>

        <Step name="결제완료">
          <OrderResult />
        </Step>
      </Funnel>
    </>
  )
}