@thinkingcat/subscription-ui 1.0.0 → 1.0.4

package/dist/index.mjs

@@ -1,3 +1,5 @@
+"use client";
+
 // src/components/SubscribePage.tsx
 import { useState, useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +11,8 @@ function SubscribePage({
   callbackUrl = "/",
   serviceName = "\uC11C\uBE44\uC2A4",
   primaryColor = DEFAULT_PRIMARY,
-  showExpiredBanner = true
+  showExpiredBanner = true,
+  theme = "system"
 }) {
   const [step, setStep] = useState("plan");
   const [plans, setPlans] = useState([]);
@@ -99,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.");
@@ -111,12 +116,15 @@ function SubscribePage({
   function fmt(price) {
     return price.toLocaleString("ko-KR") + "\uC6D0";
   }
-  if (loading) return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-64 text-gray-400", children: "\uBD88\uB7EC\uC624\uB294 \uC911..." }) });
+  const themeClass = theme === "dark" ? "dark" : theme === "light" ? "light-mode-override" : "";
+  if (loading) {
+    return /* @__PURE__ */ jsx(PageLayout, { themeClass, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-64 text-gray-400 dark:text-gray-500", children: "\uBD88\uB7EC\uC624\uB294 \uC911..." }) });
+  }
   if (success) {
-    return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx(CheckIcon, { className: "w-8 h-8 text-green-400" }) }),
-      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-white mb-2", children: "\uAD6C\uB3C5\uC774 \uC2DC\uC791\uB418\uC5C8\uC2B5\uB2C8\uB2E4!" }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm", children: "\uC7A0\uC2DC \uD6C4 \uC774\uB3D9\uD569\uB2C8\uB2E4..." })
+    return /* @__PURE__ */ jsx(PageLayout, { themeClass, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[60vh]", children: /* @__PURE__ */ jsxs("div", { className: "text-center px-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx(CheckIcon, { className: "w-8 h-8 text-green-500 dark:text-green-400" }) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: "\uAD6C\uB3C5\uC774 \uC2DC\uC791\uB418\uC5C8\uC2B5\uB2C8\uB2E4!" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400 text-sm", children: "\uC7A0\uC2DC \uD6C4 \uC774\uB3D9\uD569\uB2C8\uB2E4..." })
     ] }) }) });
   }
   const steps = [
@@ -124,56 +132,71 @@ function SubscribePage({
     { key: "card", label: "\uACB0\uC81C\uC218\uB2E8" },
     { key: "confirm", label: "\uD655\uC778" }
   ];
-  return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx("div", { className: "border-b border-white/10 px-4 py-4 mb-8", children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto flex items-center justify-between", children: [
+  const currentStepIndex = steps.findIndex((s) => s.key === step);
+  return /* @__PURE__ */ jsxs(PageLayout, { themeClass, children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 dark:border-white/10 px-4 sm:px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-0 sm:justify-between", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("h1", { className: "text-lg font-bold text-white", children: [
+        /* @__PURE__ */ jsxs("h1", { className: "text-base sm:text-lg font-bold text-gray-900 dark:text-white", children: [
           serviceName,
           " \uAD6C\uB3C5"
         ] }),
-        showExpiredBanner && /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-400 mt-0.5", children: "\uAD6C\uB3C5\uC774 \uB9CC\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uC11C\uBE44\uC2A4\uB97C \uACC4\uC18D \uC774\uC6A9\uD558\uB824\uBA74 \uAD6C\uB3C5\uC774 \uD544\uC694\uD569\uB2C8\uB2E4." })
+        showExpiredBanner && /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-600 dark:text-amber-400 mt-0.5", children: "\uAD6C\uB3C5\uC774 \uB9CC\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uC11C\uBE44\uC2A4\uB97C \uACC4\uC18D \uC774\uC6A9\uD558\uB824\uBA74 \uAD6C\uB3C5\uC774 \uD544\uC694\uD569\uB2C8\uB2E4." })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: steps.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        i > 0 && /* @__PURE__ */ jsx("div", { className: "w-4 h-px bg-white/20" }),
-        /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 sm:gap-2", children: steps.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
+        i > 0 && /* @__PURE__ */ jsx(
           "div",
           {
-            className: `w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${step === s.key ? "text-white" : "bg-white/10 text-gray-400"}`,
-            style: step === s.key ? { backgroundColor: primaryColor } : void 0,
-            children: i + 1
+            className: `w-6 sm:w-10 h-px transition-colors ${i <= currentStepIndex ? "bg-blue-500" : "bg-gray-200 dark:bg-white/20"}`
           }
-        )
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium transition-all ${step === s.key ? "text-white shadow-sm" : i < currentStepIndex ? "text-white" : "bg-gray-100 dark:bg-white/10 text-gray-400 dark:text-gray-500"}`,
+              style: step === s.key ? { backgroundColor: primaryColor } : i < currentStepIndex ? { backgroundColor: primaryColor, opacity: 0.5 } : void 0,
+              children: i < currentStepIndex ? /* @__PURE__ */ jsx(CheckIcon, { className: "w-3 h-3" }) : i + 1
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `hidden sm:inline text-xs font-medium ${step === s.key ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-500"}`,
+              children: s.label
+            }
+          )
+        ] })
       ] }, s.key)) })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto px-4 pb-12", children: [
-      error && /* @__PURE__ */ jsx("div", { className: "mb-6 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto px-4 sm:px-6 py-6 sm:py-8 pb-16", children: [
+      error && /* @__PURE__ */ jsx("div", { className: "mb-5 p-3 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 rounded-xl text-red-600 dark:text-red-400 text-sm", children: error }),
       step === "plan" && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-white font-semibold mb-4", children: "\uD50C\uB79C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-gray-900 dark:text-white font-semibold mb-4 text-sm sm:text-base", children: "\uD50C\uB79C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694" }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: plans.map((plan) => /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: () => setSelectedPlan(plan),
-            className: `w-full text-left p-4 rounded-xl border transition-all ${selectedPlan?.id === plan.id ? "border-blue-500 bg-blue-500/10" : "border-white/10 bg-white/5 hover:border-white/20"}`,
+            className: `w-full text-left p-4 rounded-xl border transition-all ${selectedPlan?.id === plan.id ? "border-blue-500 bg-blue-50 dark:bg-blue-500/10" : "border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 hover:border-gray-300 dark:hover:border-white/20 hover:bg-gray-50 dark:hover:bg-white/8"}`,
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-white font-medium", children: plan.name }),
-                  plan.isPopular && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 bg-blue-500/20 text-blue-400 text-xs rounded-full border border-blue-500/30", children: "\uC778\uAE30" })
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-medium text-sm sm:text-base", children: plan.name }),
+                  plan.isPopular && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 bg-blue-100 dark:bg-blue-500/20 text-blue-600 dark:text-blue-400 text-xs rounded-full border border-blue-200 dark:border-blue-500/30", children: "\uC778\uAE30" })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-white font-bold", children: fmt(plan.price) }),
-                  /* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-xs ml-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-right flex-shrink-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-bold text-sm sm:text-base", children: fmt(plan.price) }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-gray-400 dark:text-gray-500 text-xs ml-1", children: [
                     "/ ",
                     plan.interval,
                     "\uAC1C\uC6D4"
                   ] })
                 ] })
               ] }),
-              plan.description && /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm mb-2", children: plan.description }),
-              plan.features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: plan.features.slice(0, 3).map((f, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5 text-xs text-gray-300", children: [
-                /* @__PURE__ */ jsx(CheckIcon, { className: "w-3 h-3 text-green-400 flex-shrink-0" }),
+              plan.description && /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400 text-sm mb-2", children: plan.description }),
+              plan.features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: plan.features.slice(0, 3).map((f, idx) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-300", children: [
+                /* @__PURE__ */ jsx(CheckIcon, { className: "w-3 h-3 text-green-500 dark:text-green-400 flex-shrink-0" }),
                 f
-              ] }, i)) })
+              ] }, idx)) })
             ]
           },
           plan.id
@@ -184,26 +207,26 @@ function SubscribePage({
             disabled: !selectedPlan,
             onClick: () => setStep("card"),
             style: selectedPlan ? { backgroundColor: primaryColor } : void 0,
-            className: `mt-6 w-full py-3 rounded-xl font-medium transition-all ${selectedPlan ? "text-white hover:opacity-90" : "bg-white/10 text-gray-500 cursor-not-allowed"}`,
+            className: `mt-6 w-full py-3 rounded-xl font-medium transition-all text-sm sm:text-base ${selectedPlan ? "text-white hover:opacity-90 shadow-sm" : "bg-gray-100 dark:bg-white/10 text-gray-400 dark:text-gray-500 cursor-not-allowed"}`,
             children: "\uB2E4\uC74C \u2014 \uACB0\uC81C\uC218\uB2E8 \uC120\uD0DD"
           }
         )
       ] }),
       step === "card" && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-white font-semibold mb-4", children: "\uACB0\uC81C\uC218\uB2E8\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-gray-900 dark:text-white font-semibold mb-4 text-sm sm:text-base", children: "\uACB0\uC81C\uC218\uB2E8\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694" }),
         cards.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-3 mb-4", children: cards.map((card) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => setSelectedCard(card),
-            className: `w-full text-left p-4 rounded-xl border transition-all ${selectedCard?.id === card.id ? "border-blue-500 bg-blue-500/10" : "border-white/10 bg-white/5 hover:border-white/20"}`,
-            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-white font-medium", children: card.cardBrand }),
-                /* @__PURE__ */ jsx("span", { className: "text-gray-400 text-sm ml-2", children: card.maskedCardNumber })
+            className: `w-full text-left p-4 rounded-xl border transition-all ${selectedCard?.id === card.id ? "border-blue-500 bg-blue-50 dark:bg-blue-500/10" : "border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 hover:border-gray-300 dark:hover:border-white/20"}`,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-medium text-sm", children: card.cardBrand }),
+                /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm ml-2", children: card.maskedCardNumber })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                card.isDefault && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 bg-blue-500/20 text-blue-400 text-xs rounded-full border border-blue-500/30", children: "\uAE30\uBCF8" }),
-                /* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-xs", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+                card.isDefault && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 bg-blue-100 dark:bg-blue-500/20 text-blue-600 dark:text-blue-400 text-xs rounded-full border border-blue-200 dark:border-blue-500/30", children: "\uAE30\uBCF8" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-gray-400 dark:text-gray-500 text-xs", children: [
                   card.expiryMonth,
                   "/",
                   card.expiryYear
@@ -217,21 +240,21 @@ function SubscribePage({
           "button",
           {
             onClick: () => setShowCardForm(true),
-            className: "w-full p-4 rounded-xl border border-dashed border-white/20 text-gray-400 hover:border-white/40 hover:text-gray-300 transition-all text-sm",
+            className: "w-full p-4 rounded-xl border border-dashed border-gray-300 dark:border-white/20 text-gray-400 dark:text-gray-500 hover:border-gray-400 dark:hover:border-white/40 hover:text-gray-500 dark:hover:text-gray-300 transition-all text-sm",
             children: "+ \uC0C8 \uCE74\uB4DC \uCD94\uAC00"
           }
-        ) : /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5 space-y-3", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-white text-sm font-medium mb-1", children: "\uCE74\uB4DC \uC815\uBCF4 \uC785\uB825" }),
-          cardError && /* @__PURE__ */ jsx("div", { className: "p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-xs", children: cardError }),
-          [
-            { label: "\uCE74\uB4DC \uBC88\uD638", key: "cardNumber", placeholder: "0000-0000-0000-0000", type: "text" },
-            { label: "\uB9CC\uB8CC\uC77C", key: "expiryDate", placeholder: "MM/YY", type: "text" },
-            { label: "CVC", key: "cvc", placeholder: "3\uC790\uB9AC", type: "password" },
-            { label: "\uCE74\uB4DC \uBE44\uBC00\uBC88\uD638 \uC55E 2\uC790\uB9AC", key: "cardPassword", placeholder: "\u2022\u2022", type: "password" },
-            { label: "\uCE74\uB4DC \uC18C\uC720\uC790\uBA85", key: "cardHolderName", placeholder: "\uD64D\uAE38\uB3D9", type: "text" },
-            { label: "\uC0DD\uB144\uC6D4\uC77C 6\uC790\uB9AC / \uC0AC\uC5C5\uC790\uBC88\uD638 10\uC790\uB9AC", key: "birthNumber", placeholder: "990101", type: "text" }
-          ].map(({ label, key, placeholder, type }) => /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "text-xs text-gray-400 block mb-1", children: label }),
+        ) : /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 space-y-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-gray-900 dark:text-white text-sm font-medium", children: "\uCE74\uB4DC \uC815\uBCF4 \uC785\uB825" }),
+          cardError && /* @__PURE__ */ 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-xs", children: cardError }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
+            { label: "\uCE74\uB4DC \uBC88\uD638", key: "cardNumber", placeholder: "0000-0000-0000-0000", type: "text", colSpan: true },
+            { label: "\uB9CC\uB8CC\uC77C", key: "expiryDate", placeholder: "MM/YY", type: "text", colSpan: false },
+            { label: "CVC", key: "cvc", placeholder: "3\uC790\uB9AC", type: "password", colSpan: false },
+            { label: "\uCE74\uB4DC \uBE44\uBC00\uBC88\uD638 \uC55E 2\uC790\uB9AC", key: "cardPassword", placeholder: "\u2022\u2022", type: "password", colSpan: false },
+            { label: "\uCE74\uB4DC \uC18C\uC720\uC790\uBA85", key: "cardHolderName", placeholder: "\uD64D\uAE38\uB3D9", type: "text", colSpan: false },
+            { label: "\uC0DD\uB144\uC6D4\uC77C 6\uC790\uB9AC / \uC0AC\uC5C5\uC790\uBC88\uD638 10\uC790\uB9AC", key: "birthNumber", placeholder: "990101", type: "text", colSpan: true }
+          ].map(({ label, key, placeholder, type, colSpan }) => /* @__PURE__ */ jsxs("div", { className: colSpan ? "sm:col-span-2" : "", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-xs text-gray-500 dark:text-gray-400 block mb-1", children: label }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -239,10 +262,10 @@ function SubscribePage({
                 placeholder,
                 value: cardForm[key],
                 onChange: (e) => setCardForm((f) => ({ ...f, [key]: e.target.value })),
-                className: "w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-blue-500"
+                className: "w-full bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg px-3 py-2 text-gray-900 dark:text-white text-sm placeholder-gray-300 dark:placeholder-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500 transition-colors"
               }
             )
-          ] }, key)),
+          ] }, key)) }),
           /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
             /* @__PURE__ */ jsx(
               "button",
@@ -251,7 +274,7 @@ function SubscribePage({
                   setShowCardForm(false);
                   setCardError("");
                 },
-                className: "flex-1 py-2 rounded-lg border border-white/10 text-gray-400 text-sm hover:border-white/20 transition-all",
+                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: "\uCDE8\uC18C"
               }
             ),
@@ -261,36 +284,46 @@ function SubscribePage({
                 onClick: handleRegisterCard,
                 disabled: cardSubmitting,
                 style: { backgroundColor: primaryColor },
-                className: "flex-1 py-2 rounded-lg text-white text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-all",
+                className: "flex-1 py-2.5 rounded-lg text-white text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-all",
                 children: cardSubmitting ? "\uB4F1\uB85D \uC911..." : "\uCE74\uB4DC \uB4F1\uB85D"
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-6", children: [
-          /* @__PURE__ */ jsx("button", { onClick: () => setStep("plan"), className: "flex-1 py-3 rounded-xl border border-white/10 text-gray-400 font-medium hover:border-white/20 transition-all", children: "\uC774\uC804" }),
           /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setStep("plan"),
+              className: "flex-1 py-3 rounded-xl border border-gray-200 dark:border-white/10 text-gray-500 dark:text-gray-400 font-medium text-sm hover:border-gray-300 dark:hover:border-white/20 transition-all",
+              children: "\uC774\uC804"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
             "button",
             {
               disabled: !selectedCard,
               onClick: () => setStep("confirm"),
               style: selectedCard ? { backgroundColor: primaryColor } : void 0,
-              className: `flex-1 py-3 rounded-xl font-medium transition-all ${selectedCard ? "text-white hover:opacity-90" : "bg-white/10 text-gray-500 cursor-not-allowed"}`,
-              children: "\uB2E4\uC74C \u2014 \uCD5C\uC885 \uD655\uC778"
+              className: `flex-1 py-3 rounded-xl font-medium text-sm transition-all ${selectedCard ? "text-white hover:opacity-90 shadow-sm" : "bg-gray-100 dark:bg-white/10 text-gray-400 dark:text-gray-500 cursor-not-allowed"}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "\uB2E4\uC74C \u2014 \uCD5C\uC885 \uD655\uC778" }),
+                /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "\uB2E4\uC74C" })
+              ]
             }
           )
         ] })
       ] }),
       step === "confirm" && selectedPlan && selectedCard && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-white font-semibold mb-6", children: "\uAD6C\uB3C5 \uB0B4\uC6A9\uC744 \uD655\uC778\uD574\uC8FC\uC138\uC694" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-gray-900 dark:text-white font-semibold mb-5 text-sm sm:text-base", children: "\uAD6C\uB3C5 \uB0B4\uC6A9\uC744 \uD655\uC778\uD574\uC8FC\uC138\uC694" }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-6", children: [
-          /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 mb-1", children: "\uC120\uD0DD \uD50C\uB79C" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-white font-medium", children: selectedPlan.name }),
-              /* @__PURE__ */ jsxs("span", { className: "text-white font-bold", children: [
+          /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-1.5", children: "\uC120\uD0DD \uD50C\uB79C" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-medium text-sm", children: selectedPlan.name }),
+              /* @__PURE__ */ jsxs("span", { className: "text-gray-900 dark:text-white font-bold text-sm flex-shrink-0", children: [
                 fmt(selectedPlan.price),
-                /* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-xs font-normal ml-1", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-gray-400 dark:text-gray-500 text-xs font-normal ml-1", children: [
                   "/ ",
                   selectedPlan.interval,
                   "\uAC1C\uC6D4"
@@ -298,34 +331,48 @@ function SubscribePage({
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 mb-1", children: "\uACB0\uC81C\uC218\uB2E8" }),
+          /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-1.5", children: "\uACB0\uC81C\uC218\uB2E8" }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-white font-medium", children: selectedCard.cardBrand }),
-              /* @__PURE__ */ jsx("span", { className: "text-gray-400 text-sm", children: selectedCard.maskedCardNumber })
+              /* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-medium text-sm", children: selectedCard.cardBrand }),
+              /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: selectedCard.maskedCardNumber })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5", style: { borderColor: `${primaryColor}4D` }, children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-gray-300 text-sm", children: "\uACB0\uC81C \uAE08\uC561" }),
-              /* @__PURE__ */ jsx("span", { className: "font-bold text-lg", style: { color: primaryColor }, children: fmt(selectedPlan.price) })
-            ] }),
-            /* @__PURE__ */ jsxs("p", { className: "text-gray-500 text-xs mt-1", children: [
-              "\uC624\uB298 \uACB0\uC81C \uD6C4 ",
-              selectedPlan.interval,
-              "\uAC1C\uC6D4 \uAC04 \uC774\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4"
-            ] })
-          ] })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "p-4 rounded-xl border bg-blue-50/50 dark:bg-blue-500/5",
+              style: { borderColor: `${primaryColor}40` },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-300 text-sm", children: "\uACB0\uC81C \uAE08\uC561" }),
+                  /* @__PURE__ */ jsx("span", { className: "font-bold text-xl", style: { color: primaryColor }, children: fmt(selectedPlan.price) })
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "text-gray-400 dark:text-gray-500 text-xs mt-1.5", children: [
+                  "\uC624\uB298 \uACB0\uC81C \uD6C4 ",
+                  selectedPlan.interval,
+                  "\uAC1C\uC6D4 \uAC04 \uC774\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4"
+                ] })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ jsx("button", { onClick: () => setStep("card"), className: "flex-1 py-3 rounded-xl border border-white/10 text-gray-400 font-medium hover:border-white/20 transition-all", children: "\uC774\uC804" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setStep("card"),
+              className: "flex-1 py-3 rounded-xl border border-gray-200 dark:border-white/10 text-gray-500 dark:text-gray-400 font-medium text-sm hover:border-gray-300 dark:hover:border-white/20 transition-all",
+              children: "\uC774\uC804"
+            }
+          ),
           /* @__PURE__ */ jsx(
             "button",
             {
               onClick: handleSubscribe,
               disabled: submitting,
               style: { backgroundColor: primaryColor },
-              className: "flex-1 py-3 rounded-xl text-white font-medium hover:opacity-90 disabled:opacity-50 transition-all",
+              className: "flex-1 py-3 rounded-xl text-white font-medium text-sm hover:opacity-90 disabled:opacity-50 transition-all shadow-sm",
               children: submitting ? "\uCC98\uB9AC \uC911..." : `${fmt(selectedPlan.price)} \uACB0\uC81C\uD558\uAE30`
             }
           )
@@ -334,12 +381,243 @@ function SubscribePage({
     ] })
   ] });
 }
-function PageLayout({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-950", children });
+function PageLayout({ children, themeClass }) {
+  return /* @__PURE__ */ jsx("div", { className: themeClass, children: /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-white dark:bg-gray-950 transition-colors", children }) });
 }
 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
 };