🚧 Funnel example

apps/app-router-example/app/funnel.tsx

@@ -1,23 +1,11 @@
 "use client";
 
 import { useFunnel } from "@xionhub/funnel-app-router-adapter";
-import { funnelOptions } from "@xionhub/funnel-core";
 import { overlay } from "overlay-kit";
-import { useEffect } from "react";
-
-const EXAMPLE_FUNNEL_ID = "hello-this-is-funnel-id";
-const exampleFunnelOptions = funnelOptions({
-  steps: ["a", "b", "c"],
-  funnelId: EXAMPLE_FUNNEL_ID,
-});
+import { exampleFunnelOptions } from "~/src/example-funnel";
 
 export default function ExampleFunnel() {
-  const [Funnel, controller] = useFunnel(exampleFunnelOptions);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useEffect(() => {
-    controller.onStepChange("a");
-  }, []);
+  const [Funnel, controller] = useFunnel(exampleFunnelOptions());
 
   return (
     <div className=" px-4 py-4">
@@ -43,6 +31,7 @@ export default function ExampleFunnel() {
                     type="button"
                     onClick={() => {
                       close(true);
+                      unmount();
                     }}
                   >
                     처음 화면으로 돌아가기

apps/app-router-example/app/funnel/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from "react";
+import ExampleFunnel from "../funnel";
+
+export default function Page() {
+  return (
+    <div>
+      <Suspense>
+        <ExampleFunnel />
+      </Suspense>
+    </div>
+  );
+}

apps/app-router-example/app/page.tsx

@@ -1,12 +1,13 @@
-import { Suspense } from "react";
-import ExampleFunnel from "./funnel";
+"use client";
+import { FunnelClient } from "@xionhub/funnel-core";
+import Link from "next/link";
+import { exampleFunnelOptions } from "~/src/example-funnel";
 
 export default function Home() {
+  const funnelClient = new FunnelClient(exampleFunnelOptions());
   return (
     <div>
-      <Suspense>
-        <ExampleFunnel />
-      </Suspense>
+      <Link href={`/funnel${funnelClient.createStep("a")}`}>퍼널로 이동하기</Link>
     </div>
   );
 }

apps/app-router-example/src/example-funnel.ts

@@ -0,0 +1,8 @@
+import { FunnelClient, funnelOptions } from "@xionhub/funnel-core";
+
+const EXAMPLE_FUNNEL_ID = "hello-this-is-funnel-id";
+export const exampleFunnelOptions = () =>
+  funnelOptions({
+    steps: ["a", "b", "c"] as const,
+    funnelId: EXAMPLE_FUNNEL_ID,
+  });

packages/funnel-app-router-adapter/src/external/use-funnel-app-router-adapter.tsx

@@ -1,6 +1,5 @@
 import {
   type CreateFunnelStepFunction,
-  type FunnelAdapterReturnType,
   FunnelClient,
   type FunnelOptions,
   type FunnelStepChangeFunction,
@@ -11,7 +10,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 export const useFunnelAppRouterAdapter = <Steps extends NonEmptyArray<string>>(
   options: Omit<FunnelOptions<Steps>, "step">,
-): FunnelAdapterReturnType<Steps> => {
+) => {
   const funnelId = options.funnelId;
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -31,7 +30,7 @@ export const useFunnelAppRouterAdapter = <Steps extends NonEmptyArray<string>>(
       ? options?.deleteQueryParams
       : ([options?.deleteQueryParams].filter(Boolean) as string[]);
 
-    const stepObject = funnelClient.createStep(step, funnelClient.deleteStep(allQueryString, deleteKeyList));
+    const stepObject = funnelClient.createStepObject(step, funnelClient.deleteStep(allQueryString, deleteKeyList));
     return stepObject;
   };
 

packages/funnel-core/src/external/external-utils.ts

@@ -12,6 +12,10 @@ export class FunnelClient<T extends NonEmptyArray<string>> {
     this.steps = props.steps;
   }
 
+  createStep(value: T[number], context?: Record<string, unknown>) {
+    return this.stringifyStep(this.createStepObject(value, context));
+  }
+
   getQueryString<T extends Record<string, unknown>>(searchParams: URLSearchParams) {
     const result = {} as Record<string, unknown>;
     searchParams.forEach((value, key) => {
@@ -20,7 +24,7 @@ export class FunnelClient<T extends NonEmptyArray<string>> {
     return result as T;
   }
 
-  createStep(value: T[number], context?: Record<string, unknown>) {
+  createStepObject(value: T[number], context?: Record<string, unknown>) {
     return { ...context, [this.funnelId]: value } as const;
   }
 

packages/funnel-core/src/external/use-core-funnel.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useDraft } from "../internal/use-draft";
 import { Funnel } from "./funnel";
 import { Guard } from "./guard";