[SMH-91] Funnel 컴포넌트

packages/design-system/src/components/funnel/index.tsx

@@ -0,0 +1,42 @@
+import { Children, isValidElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+
+export type NonEmptyArray<T> = readonly [T, ...T[]];
+
+export interface FunnelProps<Steps extends NonEmptyArray<string>> {
+  steps: Steps;
+  step: Steps[number];
+  children:
+    | Array<ReactElement<StepProps<Steps>>>
+    | ReactElement<StepProps<Steps>>;
+}
+
+export interface StepProps<Steps extends NonEmptyArray<string>> {
+  name: Steps[number];
+  children: ReactNode;
+}
+export const Step = <T extends NonEmptyArray<string>>({
+  children,
+}: StepProps<T>) => {
+  return <>{children}</>;
+};
+
+export const Funnel = <Steps extends NonEmptyArray<string>>({
+  steps,
+  step,
+  children,
+}: FunnelProps<Steps>) => {
+  const validChildren = Children.toArray(children)
+    .filter(isValidElement)
+    .filter((i) =>
+      steps.includes((i.props as Partial<StepProps<Steps>>).name ?? ''),
+    ) as Array<ReactElement<StepProps<Steps>>>;
+
+  const targetStep = validChildren.find((child) => child.props.name === step);
+
+  if (targetStep == null) {
+    throw new Error(`${step} 스텝 컴포넌트를 찾지 못했습니다.`);
+  }
+
+  return <>{targetStep}</>;
+};

packages/design-system/src/hooks/useFunnel.tsx

@@ -0,0 +1,39 @@
+import {
+  Funnel,
+  Step,
+  type FunnelProps,
+  type NonEmptyArray,
+  type StepProps,
+} from '@components/funnel';
+import { useMemo, useState } from 'react';
+
+type RouteFunnelProps<Steps extends NonEmptyArray<string>> = Omit<
+  FunnelProps<Steps>,
+  'steps' | 'step'
+>;
+
+type FunnelComponent<Steps extends NonEmptyArray<string>> = ((
+  props: RouteFunnelProps<Steps>,
+) => JSX.Element) & {
+  Step: (props: StepProps<Steps>) => JSX.Element;
+};
+
+export const useFunnel = <Steps extends NonEmptyArray<string>>(
+  steps: Steps,
+  options?: { initialStep?: Steps[number] },
+): readonly [FunnelComponent<Steps>, (step: Steps[number]) => void] => {
+  const [step, setStep] = useState(options?.initialStep ?? steps[0]);
+
+  const FunnelComponent = useMemo(() => {
+    return Object.assign(
+      function RouteFunnel(props: RouteFunnelProps<Steps>) {
+        return <Funnel<Steps> steps={steps} step={step} {...props} />;
+      },
+      {
+        Step,
+      },
+    );
+  }, [step]);
+
+  return [FunnelComponent, setStep] as const;
+};