kt-event-marketing-fe/src/app/(main)/events/create/page.tsx

'use client';

import { useFunnel } from '@use-funnel/browser';
import { useRouter } from 'next/navigation';
import ObjectiveStep from './steps/ObjectiveStep';
import RecommendationStep from './steps/RecommendationStep';
import ChannelStep from './steps/ChannelStep';
import ApprovalStep from './steps/ApprovalStep';

// 이벤트 생성 데이터 타입
export type EventObjective = 'new_customer' | 'revisit' | 'sales' | 'awareness';
export type BudgetLevel = 'low' | 'medium' | 'high';
export type EventMethod = 'online' | 'offline';

export interface EventData {
  objective?: EventObjective;
  recommendation?: {
    budget: BudgetLevel;
    method: EventMethod;
    title: string;
    prize: string;
    participationMethod: string;
    expectedParticipants: number;
    estimatedCost: number;
    roi: number;
  };
  contentPreview?: {
    imageStyle: string;
  };
  contentEdit?: {
    title: string;
    prize: string;
    guide: string;
  };
  channels?: string[];
}

export default function EventCreatePage() {
  const router = useRouter();

  const funnel = useFunnel<{
    objective: EventData;
    recommendation: EventData;
    channel: EventData;
    approval: EventData;
  }>({
    id: 'event-creation',
    initial: {
      step: 'objective',
      context: {},
    },
  });

  const handleComplete = () => {
    // 이벤트 생성 완료 후 대시보드로 이동
    router.push('/');
  };

  return (
    <funnel.Render
      objective={({ history }) => (
        <ObjectiveStep
          onNext={(objective) => {
            history.push('recommendation', { objective });
          }}
        />
      )}
      recommendation={({ context, history }) => (
        <RecommendationStep
          objective={context.objective}
          onNext={(recommendation) => {
            history.push('channel', { ...context, recommendation });
          }}
          onBack={() => {
            history.go(-1);
          }}
        />
      )}
      channel={({ context, history }) => (
        <ChannelStep
          onNext={(channels) => {
            history.push('approval', { ...context, channels });
          }}
          onBack={() => {
            history.go(-1);
          }}
        />
      )}
      approval={({ context, history }) => (
        <ApprovalStep
          eventData={context}
          onApprove={handleComplete}
          onBack={() => {
            history.go(-1);
          }}
        />
      )}
    />
  );
}