@thinkingcat/subscription-ui

ThinkingCat 서비스에서 공통으로 사용하는 구독 UI 컴포넌트 라이브러리입니다.

설치

npm install @thinkingcat/subscription-ui

사용법

1. 프록시 API 라우트 생성

서비스마다 CM_sso의 외부 청구 API를 호출하는 프록시 라우트가 필요합니다.

/api/subscribe/plans/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { getToken } from 'next-auth/jwt';

const SSO_URL = process.env.SUBSCRIPTION_SERVER_URL!;
const SERVICE_KEY = process.env.SUBSCRIPTION_SERVICE_KEY!;
const SERVICE_ID = process.env.SUBSCRIPTION_SERVICE_ID || 'my-service';

export async function GET(req: NextRequest) {
  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET! });
  if (!token?.id) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

  const res = await fetch(`${SSO_URL}/api/external/billing/plans?serviceId=${SERVICE_ID}`, {
    headers: { 'x-auth-service-key': SERVICE_KEY },
    cache: 'no-store',
  });
  return NextResponse.json(await res.json(), { status: res.status });
}

/api/subscribe/cards/route.ts — GET(카드 목록), POST(카드 등록)

/api/subscribe/pay/route.ts — POST(구독 생성/결제)

2. 구독 페이지 생성

/app/subscribe/page.tsx

import { Suspense } from "react";
import { SubscribePage } from "@thinkingcat/subscription-ui";

function SubscribeContent() {
  return (
    <SubscribePage
      plansApiPath="/api/subscribe/plans"
      cardsApiPath="/api/subscribe/cards"
      payApiPath="/api/subscribe/pay"
      serviceName="내 서비스"
      primaryColor="#60A5FA"
    />
  );
}

export default function Page() {
  return (
    <Suspense fallback={<div>불러오는 중...</div>}>
      <SubscribeContent />
    </Suspense>
  );
}

3. 미들웨어 설정

middleware.ts에서 /subscribe를 subscriptionSkipPaths에 추가하고, 미구독 시 /subscribe?callbackUrl=...로 리다이렉트 설정.

SubscribePage Props

| 속성 | 타입 | 기본값 | 설명 | |---|---|---|---| | plansApiPath | string | /api/subscribe/plans | 플랜 조회 API 경로 | | cardsApiPath | string | /api/subscribe/cards | 카드 조회/등록 API 경로 | | payApiPath | string | /api/subscribe/pay | 결제 API 경로 | | callbackUrl | string | / | 구독 완료 후 이동 경로 | | serviceName | string | 서비스 | 헤더에 표시할 서비스명 | | primaryColor | string | #60A5FA | 브랜드 주 색상 | | showExpiredBanner | boolean | true | 구독 만료 안내 배너 표시 여부 |

빌드

npm run build