Stripe 구독 플랜 선택 UI 구현

[플랜 선택 UI (자체 구현)] → [Stripe Checkout (호스팅)] → [결제 완료 후 리다이렉트]

type PlanAction = 'free' | 'stripe' | 'contact';

type PlanConfig = {
  title: string;
  caption: string | React.ReactNode;
  action: PlanAction;
  showBilling: boolean;
  monthlyPrice?: number;
  annualPrice?: number;
};

const PLAN_CONFIGS: Record<string, PlanConfig> = {
  free: {
    title: 'Free',
    caption: '$0 / member / month',
    action: 'free',
    showBilling: false,
  },
  team: {
    title: 'Team',
    caption: '$1.99 / member / month',
    action: 'stripe',
    showBilling: true,
    monthlyPrice: 1.99,
    annualPrice: 64.9,
  },
  pro: {
    title: 'Pro',
    caption: '$7.99 / member / month',
    action: 'stripe',
    showBilling: true,
    monthlyPrice: 7.99,
    annualPrice: 95.88,
  },
  enterprise: {
    title: 'Enterprise',
    caption: 'Contact sales',
    action: 'contact',
    showBilling: false,
  },
};

type Plan = {
  id: string;
  name: string;
  priceId: string;
  amount: number;
  interval: 'month' | 'year';
};

// React Query로 캐싱
const { data: plans } = useQuery({
  queryKey: ['plans'],
  queryFn: () => api.getPlans(),
});

const findTargetPlan = (planTitle: string, billing: 'monthly' | 'annual') => {
  if (billing === 'monthly') {
    return plans.find(p => p.name === planTitle);
  }
  return plans.find(p => p.name === `${planTitle} (Yearly)`);
};

function BillingSelector({ plan, billing, onChange }: Props) {
  if (!plan.showBilling) return null;

  return (
    <RadioGroup value={billing} onValueChange={onChange}>
      <RadioItem
        value="monthly"
        title="Monthly billing"
        description={`$${plan.monthlyPrice} / member / month`}
      />
      <RadioItem
        value="annual"
        title="Annual billing"
        description={`$${plan.annualPrice} / member / year`}
      />
    </RadioGroup>
  );
}

const handleContinue = async () => {
  if (!selectedPlan) return;
  
  const config = PLAN_CONFIGS[selectedPlan];

  switch (config.action) {
    case 'free':
      // 리소스만 생성하고 끝
      await createResource({ name: resourceName });
      router.push('/dashboard');
      break;

    case 'stripe': {
      // 리소스 생성 → Stripe Checkout 리다이렉트
      const resource = await createResource({ name: resourceName });
      const targetPlan = findTargetPlan(config.title, billingType);
      
      const { url } = await api.startSubscription(resource.id, {
        planId: targetPlan.id,
        successUri: `${window.location.origin}/resource/${resource.id}`,
        cancelUri: `${window.location.origin}/resource/${resource.id}`,
      });
      
      router.push(url); // Stripe Checkout 페이지로 이동
      break;
    }

    case 'contact':
      // 영업팀 연락 폼
      openContactForm();
      break;
  }
};

리소스 생성 → 아바타 업로드(선택) → Stripe Checkout Session 생성 → 리다이렉트

[프론트] POST /api/resources/:id/subscription
  body: { planId, successUri, cancelUri }
  
[백엔드] Stripe.checkout.sessions.create({
  mode: 'subscription',
  line_items: [{ price: priceId, quantity: 1 }],
  success_url: successUri,
  cancel_url: cancelUri,
  metadata: { resourceId },
})

[응답] { url: "https://checkout.stripe.com/c/pay/cs_..." }

[프론트] router.push(url)  // 브라우저가 Stripe 페이지로 이동

const useStartSubscription = () => {
  const router = useRouter();

  return useMutation({
    mutationFn: ({ id, data }: {
      id: string;
      data: { planId: string; successUri: string; cancelUri: string };
    }) => api.startSubscription(id, data),
    onSuccess: (data) => {
      router.push(data.url); // Stripe Checkout으로 리다이렉트
    },
  });
};

const usePortalSubscription = () => {
  const router = useRouter();

  return useMutation({
    mutationFn: ({ resourceId, returnUri }: {
      resourceId: string;
      returnUri: string;
    }) => api.portalSubscription(resourceId, returnUri),
    onSuccess: (data) => {
      router.push(data.url);
    },
  });
};

[설정 페이지] "Manage subscription" 클릭
→ POST /api/resources/:id/portal { returnUri }
→ Stripe Customer Portal 페이지로 이동
→ 사용자가 설정 변경 후 returnUri로 돌아옴