@thinkingcat/subscription-ui 1.0.3 → 1.0.4

package/dist/index.d.mts

@@ -44,7 +44,55 @@ interface SubscribePageConfig {
      */
     theme?: "light" | "dark" | "system";
 }
+interface Subscription {
+    id: string;
+    status: string;
+    startDate: string;
+    endDate: string;
+    currentPeriodStart: string;
+    currentPeriodEnd: string;
+    autoRenew: boolean;
+    isTrial: boolean;
+    plan: {
+        id: string;
+        name: string;
+        price: number;
+        interval: number;
+    };
+    service: {
+        serviceId: string;
+        displayName: string;
+    };
+    remainingDays: number;
+    statusMessage: string;
+}
+interface Payment {
+    id: string;
+    paymentId: string;
+    orderName: string;
+    amount: number;
+    status: string;
+    paidAt: string;
+    createdAt: string;
+    planName: string | null;
+    serviceName: string | null;
+    maskedCardNumber: string | null;
+    cardBrand: string | null;
+    subscriptionId: string | null;
+}
+interface SubscriptionManagementConfig {
+    /** 구독 조회/취소 API 경로 (default: /api/subscribe/subscriptions) */
+    subscriptionsApiPath?: string;
+    /** 결제 이력/취소 API 경로 (default: /api/subscribe/payments) */
+    paymentsApiPath?: string;
+    /** 브랜드 색상 (default: #60A5FA) */
+    primaryColor?: string;
+    /** 테마 (default: "system") */
+    theme?: "light" | "dark" | "system";
+}
 
 declare function SubscribePage({ plansApiPath, cardsApiPath, payApiPath, callbackUrl, serviceName, primaryColor, showExpiredBanner, theme, }: SubscribePageConfig): react_jsx_runtime.JSX.Element;
 
-export { type Card, type Plan, SubscribePage, type SubscribePageConfig };
+declare function SubscriptionManagement({ subscriptionsApiPath, paymentsApiPath, primaryColor, theme, }: SubscriptionManagementConfig): react_jsx_runtime.JSX.Element;
+
+export { type Card, type Payment, type Plan, SubscribePage, type SubscribePageConfig, type Subscription, SubscriptionManagement, type SubscriptionManagementConfig };

package/dist/index.d.ts

@@ -44,7 +44,55 @@ interface SubscribePageConfig {
      */
     theme?: "light" | "dark" | "system";
 }
+interface Subscription {
+    id: string;
+    status: string;
+    startDate: string;
+    endDate: string;
+    currentPeriodStart: string;
+    currentPeriodEnd: string;
+    autoRenew: boolean;
+    isTrial: boolean;
+    plan: {
+        id: string;
+        name: string;
+        price: number;
+        interval: number;
+    };
+    service: {
+        serviceId: string;
+        displayName: string;
+    };
+    remainingDays: number;
+    statusMessage: string;
+}
+interface Payment {
+    id: string;
+    paymentId: string;
+    orderName: string;
+    amount: number;
+    status: string;
+    paidAt: string;
+    createdAt: string;
+    planName: string | null;
+    serviceName: string | null;
+    maskedCardNumber: string | null;
+    cardBrand: string | null;
+    subscriptionId: string | null;
+}
+interface SubscriptionManagementConfig {
+    /** 구독 조회/취소 API 경로 (default: /api/subscribe/subscriptions) */
+    subscriptionsApiPath?: string;
+    /** 결제 이력/취소 API 경로 (default: /api/subscribe/payments) */
+    paymentsApiPath?: string;
+    /** 브랜드 색상 (default: #60A5FA) */
+    primaryColor?: string;
+    /** 테마 (default: "system") */
+    theme?: "light" | "dark" | "system";
+}
 
 declare function SubscribePage({ plansApiPath, cardsApiPath, payApiPath, callbackUrl, serviceName, primaryColor, showExpiredBanner, theme, }: SubscribePageConfig): react_jsx_runtime.JSX.Element;
 
-export { type Card, type Plan, SubscribePage, type SubscribePageConfig };
+declare function SubscriptionManagement({ subscriptionsApiPath, paymentsApiPath, primaryColor, theme, }: SubscriptionManagementConfig): react_jsx_runtime.JSX.Element;
+
+export { type Card, type Payment, type Plan, SubscribePage, type SubscribePageConfig, type Subscription, SubscriptionManagement, type SubscriptionManagementConfig };

package/dist/index.js

@@ -21,7 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  SubscribePage: () => SubscribePage
+  SubscribePage: () => SubscribePage,
+  SubscriptionManagement: () => SubscriptionManagement
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -127,8 +128,10 @@ function SubscribePage({
         return;
       }
       setSuccess(true);
+      const separator = callbackUrl.includes("?") ? "&" : "?";
+      const redirectUrl = `${callbackUrl}${separator}subscribed=true`;
       setTimeout(() => {
-        window.location.href = callbackUrl;
+        window.location.href = redirectUrl;
       }, 2e3);
     } catch {
       setError("\uAD6C\uB3C5 \uCC98\uB9AC \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
@@ -410,7 +413,238 @@ function PageLayout({ children, themeClass }) {
 function CheckIcon({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) });
 }
+
+// src/components/SubscriptionManagement.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_PRIMARY2 = "#60A5FA";
+function SubscriptionManagement({
+  subscriptionsApiPath = "/api/subscribe/subscriptions",
+  paymentsApiPath = "/api/subscribe/payments",
+  primaryColor = DEFAULT_PRIMARY2,
+  theme = "system"
+}) {
+  const [tab, setTab] = (0, import_react2.useState)("subscription");
+  const [subscriptions, setSubscriptions] = (0, import_react2.useState)([]);
+  const [payments, setPayments] = (0, import_react2.useState)([]);
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)("");
+  const [actionLoading, setActionLoading] = (0, import_react2.useState)(null);
+  const [confirmModal, setConfirmModal] = (0, import_react2.useState)(null);
+  const themeClass = theme === "dark" ? "dark" : theme === "light" ? "light-mode-override" : "";
+  (0, import_react2.useEffect)(() => {
+    fetchSubscriptions();
+    fetchPayments();
+  }, []);
+  async function fetchSubscriptions() {
+    try {
+      const res = await fetch(subscriptionsApiPath);
+      const data = await res.json();
+      if (data.success) setSubscriptions(data.subscriptions);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function fetchPayments() {
+    try {
+      const res = await fetch(paymentsApiPath);
+      const data = await res.json();
+      if (data.success) setPayments(data.payments);
+    } catch {
+    }
+  }
+  async function handleCancelSubscription(subscriptionId) {
+    setActionLoading(subscriptionId);
+    setError("");
+    try {
+      const res = await fetch(subscriptionsApiPath, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ subscriptionId })
+      });
+      const data = await res.json();
+      if (!data.success) {
+        setError(data.error || "\uAD6C\uB3C5 \uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+        return;
+      }
+      await fetchSubscriptions();
+    } catch {
+      setError("\uAD6C\uB3C5 \uCDE8\uC18C \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setActionLoading(null);
+      setConfirmModal(null);
+    }
+  }
+  async function handleCancelPayment(paymentId) {
+    setActionLoading(paymentId);
+    setError("");
+    try {
+      const res = await fetch(paymentsApiPath, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ paymentId })
+      });
+      const data = await res.json();
+      if (!data.success) {
+        setError(data.error || "\uACB0\uC81C \uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+        return;
+      }
+      await fetchPayments();
+      await fetchSubscriptions();
+    } catch {
+      setError("\uACB0\uC81C \uCDE8\uC18C \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setActionLoading(null);
+      setConfirmModal(null);
+    }
+  }
+  function fmt(price) {
+    return price.toLocaleString("ko-KR") + "\uC6D0";
+  }
+  function fmtDate(dateStr) {
+    return new Date(dateStr).toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" });
+  }
+  function statusBadge(status) {
+    if (status === "ACTIVE") return { bg: "bg-green-100 dark:bg-green-500/20", text: "text-green-700 dark:text-green-400", label: "\uD65C\uC131" };
+    if (status === "CANCELLED") return { bg: "bg-red-100 dark:bg-red-500/20", text: "text-red-700 dark:text-red-400", label: "\uCDE8\uC18C\uB428" };
+    return { bg: "bg-gray-100 dark:bg-gray-700", text: "text-gray-600 dark:text-gray-400", label: status };
+  }
+  function paymentStatusBadge(status) {
+    if (status === "COMPLETED") return { bg: "bg-green-100 dark:bg-green-500/20", text: "text-green-700 dark:text-green-400", label: "\uC644\uB8CC" };
+    if (status === "CANCELLED") return { bg: "bg-red-100 dark:bg-red-500/20", text: "text-red-700 dark:text-red-400", label: "\uCDE8\uC18C\uB428" };
+    if (status === "FAILED") return { bg: "bg-orange-100 dark:bg-orange-500/20", text: "text-orange-700 dark:text-orange-400", label: "\uC2E4\uD328" };
+    return { bg: "bg-gray-100 dark:bg-gray-700", text: "text-gray-600 dark:text-gray-400", label: status };
+  }
+  function canCancelPayment(p) {
+    if (p.status !== "COMPLETED") return false;
+    const paidDate = new Date(p.paidAt || p.createdAt);
+    const daysDiff = Math.ceil((Date.now() - paidDate.getTime()) / (1e3 * 3600 * 24));
+    return daysDiff <= 7;
+  }
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: themeClass, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-gray-400 py-8 text-center", children: "\uBD88\uB7EC\uC624\uB294 \uC911..." }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: themeClass, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4", children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-3 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 rounded-lg text-red-600 dark:text-red-400 text-sm", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex border-b border-gray-200 dark:border-white/10", children: [
+      { key: "subscription", label: "\uAD6C\uB3C5 \uC815\uBCF4" },
+      { key: "payments", label: "\uACB0\uC81C \uC774\uB825" }
+    ].map(({ key, label }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        onClick: () => setTab(key),
+        className: `px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px ${tab === key ? "border-current text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"}`,
+        style: tab === key ? { color: primaryColor, borderColor: primaryColor } : void 0,
+        children: label
+      },
+      key
+    )) }),
+    tab === "subscription" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-3", children: subscriptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-center py-12 text-gray-400 dark:text-gray-500 text-sm", children: "\uD65C\uC131 \uAD6C\uB3C5\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : subscriptions.map((sub) => {
+      const badge = statusBadge(sub.status);
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-4 sm:p-5 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-2 flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-gray-900 dark:text-white font-semibold text-base", children: sub.plan.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `px-2 py-0.5 rounded-full text-xs font-medium ${badge.bg} ${badge.text}`, children: badge.label }),
+            sub.isTrial && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400", children: "\uCCB4\uD5D8" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-1 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-gray-400 dark:text-gray-500", children: "\uAE08\uC561" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "ml-2 text-gray-700 dark:text-gray-300 font-medium", children: [
+                fmt(sub.plan.price),
+                " / ",
+                sub.plan.interval,
+                "\uAC1C\uC6D4"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-gray-400 dark:text-gray-500", children: "\uC0C1\uD0DC" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 text-gray-700 dark:text-gray-300", children: sub.statusMessage })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-gray-400 dark:text-gray-500", children: "\uC2DC\uC791\uC77C" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 text-gray-700 dark:text-gray-300", children: fmtDate(sub.startDate) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-gray-400 dark:text-gray-500", children: "\uB9CC\uB8CC\uC77C" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 text-gray-700 dark:text-gray-300", children: fmtDate(sub.endDate) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-gray-400 dark:text-gray-500", children: "\uB0A8\uC740 \uAE30\uAC04" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "ml-2 text-gray-700 dark:text-gray-300 font-medium", children: [
+                sub.remainingDays,
+                "\uC77C"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-gray-400 dark:text-gray-500", children: "\uC790\uB3D9\uACB0\uC81C" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 text-gray-700 dark:text-gray-300", children: sub.autoRenew ? "\uC0AC\uC6A9" : "\uD574\uC81C" })
+            ] })
+          ] })
+        ] }),
+        sub.status === "ACTIVE" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: () => setConfirmModal({ type: "cancel_subscription", id: sub.id, label: sub.plan.name }),
+            disabled: actionLoading === sub.id,
+            className: "flex-shrink-0 px-4 py-2 rounded-lg border border-red-200 dark:border-red-500/30 text-red-600 dark:text-red-400 text-sm font-medium hover:bg-red-50 dark:hover:bg-red-500/10 disabled:opacity-50 transition-all",
+            children: "\uAD6C\uB3C5 \uCDE8\uC18C"
+          }
+        )
+      ] }) }, sub.id);
+    }) }),
+    tab === "payments" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-2", children: payments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-center py-12 text-gray-400 dark:text-gray-500 text-sm", children: "\uACB0\uC81C \uC774\uB825\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "border-b border-gray-200 dark:border-white/10", children: ["\uC77C\uC2DC", "\uB0B4\uC6A9", "\uAE08\uC561", "\uACB0\uC81C\uC218\uB2E8", "\uC0C1\uD0DC", ""].map((h) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "text-left py-2.5 px-3 text-xs font-medium text-gray-400 dark:text-gray-500 whitespace-nowrap", children: h }, h)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: payments.map((p) => {
+        const badge = paymentStatusBadge(p.status);
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { className: "border-b border-gray-100 dark:border-white/5 last:border-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "py-3 px-3 text-gray-600 dark:text-gray-300 whitespace-nowrap", children: fmtDate(p.paidAt || p.createdAt) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "py-3 px-3 text-gray-900 dark:text-white font-medium", children: p.orderName }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "py-3 px-3 text-gray-900 dark:text-white font-semibold whitespace-nowrap", children: fmt(p.amount) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "py-3 px-3 text-gray-500 dark:text-gray-400 whitespace-nowrap", children: p.cardBrand && p.maskedCardNumber ? `${p.cardBrand} ${p.maskedCardNumber}` : "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "py-3 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `px-2 py-0.5 rounded-full text-xs font-medium ${badge.bg} ${badge.text}`, children: badge.label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "py-3 px-3", children: canCancelPayment(p) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: () => setConfirmModal({ type: "cancel_payment", id: p.id, label: p.orderName }),
+              disabled: actionLoading === p.id,
+              className: "text-xs text-red-500 dark:text-red-400 hover:underline disabled:opacity-50",
+              children: "\uCDE8\uC18C"
+            }
+          ) })
+        ] }, p.id);
+      }) })
+    ] }) }) }),
+    confirmModal && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-white dark:bg-gray-900 rounded-2xl p-6 max-w-sm w-full shadow-xl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-gray-900 dark:text-white font-semibold text-base mb-2", children: confirmModal.type === "cancel_subscription" ? "\uAD6C\uB3C5 \uCDE8\uC18C" : "\uACB0\uC81C \uCDE8\uC18C" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-gray-500 dark:text-gray-400 text-sm mb-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-gray-900 dark:text-white font-medium", children: confirmModal.label }),
+        confirmModal.type === "cancel_subscription" ? "\uC744(\uB97C) \uCDE8\uC18C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C? \uD604\uC7AC \uAD6C\uB3C5 \uAE30\uAC04\uC774 \uB05D\uB098\uBA74 \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." : "\uC758 \uACB0\uC81C\uB97C \uCDE8\uC18C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C? \uC774 \uC791\uC5C5\uC740 \uB418\uB3CC\uB9B4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: () => setConfirmModal(null),
+            className: "flex-1 py-2.5 rounded-lg border border-gray-200 dark:border-white/10 text-gray-500 dark:text-gray-400 text-sm hover:border-gray-300 dark:hover:border-white/20 transition-all",
+            children: "\uC544\uB2C8\uC624"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: () => confirmModal.type === "cancel_subscription" ? handleCancelSubscription(confirmModal.id) : handleCancelPayment(confirmModal.id),
+            disabled: !!actionLoading,
+            className: "flex-1 py-2.5 rounded-lg bg-red-500 text-white text-sm font-medium hover:bg-red-600 disabled:opacity-50 transition-all",
+            children: actionLoading ? "\uCC98\uB9AC \uC911..." : "\uC608, \uCDE8\uC18C\uD569\uB2C8\uB2E4"
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  SubscribePage
+  SubscribePage,
+  SubscriptionManagement
 });

package/dist/index.mjs

@@ -102,8 +102,10 @@ function SubscribePage({
         return;
       }
       setSuccess(true);
+      const separator = callbackUrl.includes("?") ? "&" : "?";
+      const redirectUrl = `${callbackUrl}${separator}subscribed=true`;
       setTimeout(() => {
-        window.location.href = callbackUrl;
+        window.location.href = redirectUrl;
       }, 2e3);
     } catch {
       setError("\uAD6C\uB3C5 \uCC98\uB9AC \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
@@ -385,6 +387,237 @@ function PageLayout({ children, themeClass }) {
 function CheckIcon({ className }) {
   return /* @__PURE__ */ jsx("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) });
 }
+
+// src/components/SubscriptionManagement.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_PRIMARY2 = "#60A5FA";
+function SubscriptionManagement({
+  subscriptionsApiPath = "/api/subscribe/subscriptions",
+  paymentsApiPath = "/api/subscribe/payments",
+  primaryColor = DEFAULT_PRIMARY2,
+  theme = "system"
+}) {
+  const [tab, setTab] = useState2("subscription");
+  const [subscriptions, setSubscriptions] = useState2([]);
+  const [payments, setPayments] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2("");
+  const [actionLoading, setActionLoading] = useState2(null);
+  const [confirmModal, setConfirmModal] = useState2(null);
+  const themeClass = theme === "dark" ? "dark" : theme === "light" ? "light-mode-override" : "";
+  useEffect2(() => {
+    fetchSubscriptions();
+    fetchPayments();
+  }, []);
+  async function fetchSubscriptions() {
+    try {
+      const res = await fetch(subscriptionsApiPath);
+      const data = await res.json();
+      if (data.success) setSubscriptions(data.subscriptions);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function fetchPayments() {
+    try {
+      const res = await fetch(paymentsApiPath);
+      const data = await res.json();
+      if (data.success) setPayments(data.payments);
+    } catch {
+    }
+  }
+  async function handleCancelSubscription(subscriptionId) {
+    setActionLoading(subscriptionId);
+    setError("");
+    try {
+      const res = await fetch(subscriptionsApiPath, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ subscriptionId })
+      });
+      const data = await res.json();
+      if (!data.success) {
+        setError(data.error || "\uAD6C\uB3C5 \uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+        return;
+      }
+      await fetchSubscriptions();
+    } catch {
+      setError("\uAD6C\uB3C5 \uCDE8\uC18C \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setActionLoading(null);
+      setConfirmModal(null);
+    }
+  }
+  async function handleCancelPayment(paymentId) {
+    setActionLoading(paymentId);
+    setError("");
+    try {
+      const res = await fetch(paymentsApiPath, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ paymentId })
+      });
+      const data = await res.json();
+      if (!data.success) {
+        setError(data.error || "\uACB0\uC81C \uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+        return;
+      }
+      await fetchPayments();
+      await fetchSubscriptions();
+    } catch {
+      setError("\uACB0\uC81C \uCDE8\uC18C \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setActionLoading(null);
+      setConfirmModal(null);
+    }
+  }
+  function fmt(price) {
+    return price.toLocaleString("ko-KR") + "\uC6D0";
+  }
+  function fmtDate(dateStr) {
+    return new Date(dateStr).toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" });
+  }
+  function statusBadge(status) {
+    if (status === "ACTIVE") return { bg: "bg-green-100 dark:bg-green-500/20", text: "text-green-700 dark:text-green-400", label: "\uD65C\uC131" };
+    if (status === "CANCELLED") return { bg: "bg-red-100 dark:bg-red-500/20", text: "text-red-700 dark:text-red-400", label: "\uCDE8\uC18C\uB428" };
+    return { bg: "bg-gray-100 dark:bg-gray-700", text: "text-gray-600 dark:text-gray-400", label: status };
+  }
+  function paymentStatusBadge(status) {
+    if (status === "COMPLETED") return { bg: "bg-green-100 dark:bg-green-500/20", text: "text-green-700 dark:text-green-400", label: "\uC644\uB8CC" };
+    if (status === "CANCELLED") return { bg: "bg-red-100 dark:bg-red-500/20", text: "text-red-700 dark:text-red-400", label: "\uCDE8\uC18C\uB428" };
+    if (status === "FAILED") return { bg: "bg-orange-100 dark:bg-orange-500/20", text: "text-orange-700 dark:text-orange-400", label: "\uC2E4\uD328" };
+    return { bg: "bg-gray-100 dark:bg-gray-700", text: "text-gray-600 dark:text-gray-400", label: status };
+  }
+  function canCancelPayment(p) {
+    if (p.status !== "COMPLETED") return false;
+    const paidDate = new Date(p.paidAt || p.createdAt);
+    const daysDiff = Math.ceil((Date.now() - paidDate.getTime()) / (1e3 * 3600 * 24));
+    return daysDiff <= 7;
+  }
+  if (loading) return /* @__PURE__ */ jsx2("div", { className: themeClass, children: /* @__PURE__ */ jsx2("div", { className: "text-gray-400 py-8 text-center", children: "\uBD88\uB7EC\uC624\uB294 \uC911..." }) });
+  return /* @__PURE__ */ jsx2("div", { className: themeClass, children: /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+    error && /* @__PURE__ */ jsx2("div", { className: "p-3 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 rounded-lg text-red-600 dark:text-red-400 text-sm", children: error }),
+    /* @__PURE__ */ jsx2("div", { className: "flex border-b border-gray-200 dark:border-white/10", children: [
+      { key: "subscription", label: "\uAD6C\uB3C5 \uC815\uBCF4" },
+      { key: "payments", label: "\uACB0\uC81C \uC774\uB825" }
+    ].map(({ key, label }) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: () => setTab(key),
+        className: `px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px ${tab === key ? "border-current text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"}`,
+        style: tab === key ? { color: primaryColor, borderColor: primaryColor } : void 0,
+        children: label
+      },
+      key
+    )) }),
+    tab === "subscription" && /* @__PURE__ */ jsx2("div", { className: "space-y-3", children: subscriptions.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "text-center py-12 text-gray-400 dark:text-gray-500 text-sm", children: "\uD65C\uC131 \uAD6C\uB3C5\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : subscriptions.map((sub) => {
+      const badge = statusBadge(sub.status);
+      return /* @__PURE__ */ jsx2("div", { className: "p-4 sm:p-5 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5", children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-2 flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 flex-wrap", children: [
+            /* @__PURE__ */ jsx2("span", { className: "text-gray-900 dark:text-white font-semibold text-base", children: sub.plan.name }),
+            /* @__PURE__ */ jsx2("span", { className: `px-2 py-0.5 rounded-full text-xs font-medium ${badge.bg} ${badge.text}`, children: badge.label }),
+            sub.isTrial && /* @__PURE__ */ jsx2("span", { className: "px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400", children: "\uCCB4\uD5D8" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-1 text-sm", children: [
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-gray-400 dark:text-gray-500", children: "\uAE08\uC561" }),
+              /* @__PURE__ */ jsxs2("span", { className: "ml-2 text-gray-700 dark:text-gray-300 font-medium", children: [
+                fmt(sub.plan.price),
+                " / ",
+                sub.plan.interval,
+                "\uAC1C\uC6D4"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-gray-400 dark:text-gray-500", children: "\uC0C1\uD0DC" }),
+              /* @__PURE__ */ jsx2("span", { className: "ml-2 text-gray-700 dark:text-gray-300", children: sub.statusMessage })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-gray-400 dark:text-gray-500", children: "\uC2DC\uC791\uC77C" }),
+              /* @__PURE__ */ jsx2("span", { className: "ml-2 text-gray-700 dark:text-gray-300", children: fmtDate(sub.startDate) })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-gray-400 dark:text-gray-500", children: "\uB9CC\uB8CC\uC77C" }),
+              /* @__PURE__ */ jsx2("span", { className: "ml-2 text-gray-700 dark:text-gray-300", children: fmtDate(sub.endDate) })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-gray-400 dark:text-gray-500", children: "\uB0A8\uC740 \uAE30\uAC04" }),
+              /* @__PURE__ */ jsxs2("span", { className: "ml-2 text-gray-700 dark:text-gray-300 font-medium", children: [
+                sub.remainingDays,
+                "\uC77C"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-gray-400 dark:text-gray-500", children: "\uC790\uB3D9\uACB0\uC81C" }),
+              /* @__PURE__ */ jsx2("span", { className: "ml-2 text-gray-700 dark:text-gray-300", children: sub.autoRenew ? "\uC0AC\uC6A9" : "\uD574\uC81C" })
+            ] })
+          ] })
+        ] }),
+        sub.status === "ACTIVE" && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setConfirmModal({ type: "cancel_subscription", id: sub.id, label: sub.plan.name }),
+            disabled: actionLoading === sub.id,
+            className: "flex-shrink-0 px-4 py-2 rounded-lg border border-red-200 dark:border-red-500/30 text-red-600 dark:text-red-400 text-sm font-medium hover:bg-red-50 dark:hover:bg-red-500/10 disabled:opacity-50 transition-all",
+            children: "\uAD6C\uB3C5 \uCDE8\uC18C"
+          }
+        )
+      ] }) }, sub.id);
+    }) }),
+    tab === "payments" && /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: payments.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "text-center py-12 text-gray-400 dark:text-gray-500 text-sm", children: "\uACB0\uC81C \uC774\uB825\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { className: "border-b border-gray-200 dark:border-white/10", children: ["\uC77C\uC2DC", "\uB0B4\uC6A9", "\uAE08\uC561", "\uACB0\uC81C\uC218\uB2E8", "\uC0C1\uD0DC", ""].map((h) => /* @__PURE__ */ jsx2("th", { className: "text-left py-2.5 px-3 text-xs font-medium text-gray-400 dark:text-gray-500 whitespace-nowrap", children: h }, h)) }) }),
+      /* @__PURE__ */ jsx2("tbody", { children: payments.map((p) => {
+        const badge = paymentStatusBadge(p.status);
+        return /* @__PURE__ */ jsxs2("tr", { className: "border-b border-gray-100 dark:border-white/5 last:border-0", children: [
+          /* @__PURE__ */ jsx2("td", { className: "py-3 px-3 text-gray-600 dark:text-gray-300 whitespace-nowrap", children: fmtDate(p.paidAt || p.createdAt) }),
+          /* @__PURE__ */ jsx2("td", { className: "py-3 px-3 text-gray-900 dark:text-white font-medium", children: p.orderName }),
+          /* @__PURE__ */ jsx2("td", { className: "py-3 px-3 text-gray-900 dark:text-white font-semibold whitespace-nowrap", children: fmt(p.amount) }),
+          /* @__PURE__ */ jsx2("td", { className: "py-3 px-3 text-gray-500 dark:text-gray-400 whitespace-nowrap", children: p.cardBrand && p.maskedCardNumber ? `${p.cardBrand} ${p.maskedCardNumber}` : "-" }),
+          /* @__PURE__ */ jsx2("td", { className: "py-3 px-3", children: /* @__PURE__ */ jsx2("span", { className: `px-2 py-0.5 rounded-full text-xs font-medium ${badge.bg} ${badge.text}`, children: badge.label }) }),
+          /* @__PURE__ */ jsx2("td", { className: "py-3 px-3", children: canCancelPayment(p) && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: () => setConfirmModal({ type: "cancel_payment", id: p.id, label: p.orderName }),
+              disabled: actionLoading === p.id,
+              className: "text-xs text-red-500 dark:text-red-400 hover:underline disabled:opacity-50",
+              children: "\uCDE8\uC18C"
+            }
+          ) })
+        ] }, p.id);
+      }) })
+    ] }) }) }),
+    confirmModal && /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: /* @__PURE__ */ jsxs2("div", { className: "bg-white dark:bg-gray-900 rounded-2xl p-6 max-w-sm w-full shadow-xl", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "text-gray-900 dark:text-white font-semibold text-base mb-2", children: confirmModal.type === "cancel_subscription" ? "\uAD6C\uB3C5 \uCDE8\uC18C" : "\uACB0\uC81C \uCDE8\uC18C" }),
+      /* @__PURE__ */ jsxs2("p", { className: "text-gray-500 dark:text-gray-400 text-sm mb-5", children: [
+        /* @__PURE__ */ jsx2("span", { className: "text-gray-900 dark:text-white font-medium", children: confirmModal.label }),
+        confirmModal.type === "cancel_subscription" ? "\uC744(\uB97C) \uCDE8\uC18C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C? \uD604\uC7AC \uAD6C\uB3C5 \uAE30\uAC04\uC774 \uB05D\uB098\uBA74 \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." : "\uC758 \uACB0\uC81C\uB97C \uCDE8\uC18C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C? \uC774 \uC791\uC5C5\uC740 \uB418\uB3CC\uB9B4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setConfirmModal(null),
+            className: "flex-1 py-2.5 rounded-lg border border-gray-200 dark:border-white/10 text-gray-500 dark:text-gray-400 text-sm hover:border-gray-300 dark:hover:border-white/20 transition-all",
+            children: "\uC544\uB2C8\uC624"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => confirmModal.type === "cancel_subscription" ? handleCancelSubscription(confirmModal.id) : handleCancelPayment(confirmModal.id),
+            disabled: !!actionLoading,
+            className: "flex-1 py-2.5 rounded-lg bg-red-500 text-white text-sm font-medium hover:bg-red-600 disabled:opacity-50 transition-all",
+            children: actionLoading ? "\uCC98\uB9AC \uC911..." : "\uC608, \uCDE8\uC18C\uD569\uB2C8\uB2E4"
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+}
 export {
-  SubscribePage
+  SubscribePage,
+  SubscriptionManagement
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Subscription UI components for ThinkingCat services",
   "main": "dist/index.js",
   "module": "dist/index.mjs",