프론트엔드 퍼널의 베스트 프래티스를 찾아서 - Toss Frontend Accelerator

const EXAMPLE_FUNNEL_ID = "hello-this-is-funnel-id";
const exampleFunnelOptions = funnelOptions({
  steps: ["a", "b", "c"],
  funnelId: EXAMPLE_FUNNEL_ID,
});
 
export default function ExampleFunnel() {
  const [Funnel, controller] = useFunnel(exampleFunnelOptions);
 
  return (
    <div className=" px-4 py-4">
      <Funnel>
        <Funnel.Step name={"a"}>
          <FunnelA nextStep={() => controller.onStepChange("b")} />
        </Funnel.Step>
 
        <Funnel.Step name={"b"}>
          <Funnel.Guard
            condition={async () => {
              if (Math.random() > 0.5) {
                return true;
              }
              await new Promise((res) => setTimeout(res, 1000));
              return false;
            }}
            onFunnelRestrictEvent={async () => {  
              controller.onStepChange("a", { type: "replace" });
            }}
            fallback={<div>fallback..</div>}
          >
            <FunnelB nextStep={() => controller.onStepChange("c")} />
          </Funnel.Guard>
        </Funnel.Step>
 
        <Funnel.Step name={"c"}>
          <FunnelC nextStep={() => controller.onStepChange("a")} />
        </Funnel.Step>
      </Funnel>
    </div>
  );
}
 
  );
}

 
        <Funnel.Step name={"b"}>
          <Funnel.Guard
            condition={async () => {
              if (Math.random() > 0.5) {
                return true;
              }
              await new Promise((res) => setTimeout(res, 1000));
              return false;
            }}
            onFunnelRestrictEvent={async () => {
              await overlay.openAsync(({ close, unmount }) => (
                <div>
                  <div>접근할 수 없는 상태에요</div>
                  <button
                    type="button"
                    onClick={() => {
                      close(true);
                    }}
                  >
                    처음 화면으로 돌아가기
                  </button>
                </div>
              ));
              controller.onStepChange("a", { type: "replace" });
            }}
            fallback={<div>fallback..</div>}
          >
            <FunnelB nextStep={() => controller.onStepChange("c")} />
          </Funnel.Guard>
        </Funnel.Step>
 

const Example = (props:{initialState:string , onCommit:(newValue:string) => void}) => {
  const [state,setState] = useState(props.initialState)
  return (
    <div>
      <input value={state} onChange={(e) => setState(e.target.value)} />
      <button onClick={() => props.onCommit(state)}>commit</button>
    </div>
  )
}

export const useDraft = <T>(initialState: T) => {
  const [draft, setDraft] = useState<T>();
  const value = draft ?? initialState;
  const onChangeValue = useCallback((newValue: T) => setDraft(newValue), []);
 
  return [value, onChangeValue] as const;
};