@thinkingcat/subscription-ui 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +132 -88
- package/dist/index.mjs +133 -88
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -36,8 +36,15 @@ interface SubscribePageConfig {
|
|
|
36
36
|
primaryColor?: string;
|
|
37
37
|
/** 구독 만료 안내 메시지 표시 여부 */
|
|
38
38
|
showExpiredBanner?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* 테마 설정 (default: "system")
|
|
41
|
+
* - "light": 항상 라이트 모드
|
|
42
|
+
* - "dark": 항상 다크 모드
|
|
43
|
+
* - "system": OS/HTML 다크모드 설정 자동 적용
|
|
44
|
+
*/
|
|
45
|
+
theme?: "light" | "dark" | "system";
|
|
39
46
|
}
|
|
40
47
|
|
|
41
|
-
declare function SubscribePage({ plansApiPath, cardsApiPath, payApiPath, callbackUrl, serviceName, primaryColor, showExpiredBanner, }: SubscribePageConfig): react_jsx_runtime.JSX.Element;
|
|
48
|
+
declare function SubscribePage({ plansApiPath, cardsApiPath, payApiPath, callbackUrl, serviceName, primaryColor, showExpiredBanner, theme, }: SubscribePageConfig): react_jsx_runtime.JSX.Element;
|
|
42
49
|
|
|
43
50
|
export { type Card, type Plan, SubscribePage, type SubscribePageConfig };
|
package/dist/index.d.ts
CHANGED
|
@@ -36,8 +36,15 @@ interface SubscribePageConfig {
|
|
|
36
36
|
primaryColor?: string;
|
|
37
37
|
/** 구독 만료 안내 메시지 표시 여부 */
|
|
38
38
|
showExpiredBanner?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* 테마 설정 (default: "system")
|
|
41
|
+
* - "light": 항상 라이트 모드
|
|
42
|
+
* - "dark": 항상 다크 모드
|
|
43
|
+
* - "system": OS/HTML 다크모드 설정 자동 적용
|
|
44
|
+
*/
|
|
45
|
+
theme?: "light" | "dark" | "system";
|
|
39
46
|
}
|
|
40
47
|
|
|
41
|
-
declare function SubscribePage({ plansApiPath, cardsApiPath, payApiPath, callbackUrl, serviceName, primaryColor, showExpiredBanner, }: SubscribePageConfig): react_jsx_runtime.JSX.Element;
|
|
48
|
+
declare function SubscribePage({ plansApiPath, cardsApiPath, payApiPath, callbackUrl, serviceName, primaryColor, showExpiredBanner, theme, }: SubscribePageConfig): react_jsx_runtime.JSX.Element;
|
|
42
49
|
|
|
43
50
|
export { type Card, type Plan, SubscribePage, type SubscribePageConfig };
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
"use client";
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
@@ -35,7 +36,8 @@ function SubscribePage({
|
|
|
35
36
|
callbackUrl = "/",
|
|
36
37
|
serviceName = "\uC11C\uBE44\uC2A4",
|
|
37
38
|
primaryColor = DEFAULT_PRIMARY,
|
|
38
|
-
showExpiredBanner = true
|
|
39
|
+
showExpiredBanner = true,
|
|
40
|
+
theme = "system"
|
|
39
41
|
}) {
|
|
40
42
|
const [step, setStep] = (0, import_react.useState)("plan");
|
|
41
43
|
const [plans, setPlans] = (0, import_react.useState)([]);
|
|
@@ -137,12 +139,15 @@ function SubscribePage({
|
|
|
137
139
|
function fmt(price) {
|
|
138
140
|
return price.toLocaleString("ko-KR") + "\uC6D0";
|
|
139
141
|
}
|
|
140
|
-
|
|
142
|
+
const themeClass = theme === "dark" ? "dark" : theme === "light" ? "light-mode-override" : "";
|
|
143
|
+
if (loading) {
|
|
144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageLayout, { themeClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center h-64 text-gray-400 dark:text-gray-500", children: "\uBD88\uB7EC\uC624\uB294 \uC911..." }) });
|
|
145
|
+
}
|
|
141
146
|
if (success) {
|
|
142
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageLayout, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center h-
|
|
143
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { className: "w-8 h-8 text-green-400" }) }),
|
|
144
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-xl font-bold text-white mb-2", children: "\uAD6C\uB3C5\uC774 \uC2DC\uC791\uB418\uC5C8\uC2B5\uB2C8\uB2E4!" }),
|
|
145
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-400 text-sm", children: "\uC7A0\uC2DC \uD6C4 \uC774\uB3D9\uD569\uB2C8\uB2E4..." })
|
|
147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageLayout, { themeClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center min-h-[60vh]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center px-4", children: [
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { className: "w-8 h-8 text-green-500 dark:text-green-400" }) }),
|
|
149
|
+
/* @__PURE__ */ (0, import_jsx_runtime.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!" }),
|
|
150
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-500 dark:text-gray-400 text-sm", children: "\uC7A0\uC2DC \uD6C4 \uC774\uB3D9\uD569\uB2C8\uB2E4..." })
|
|
146
151
|
] }) }) });
|
|
147
152
|
}
|
|
148
153
|
const steps = [
|
|
@@ -150,56 +155,71 @@ function SubscribePage({
|
|
|
150
155
|
{ key: "card", label: "\uACB0\uC81C\uC218\uB2E8" },
|
|
151
156
|
{ key: "confirm", label: "\uD655\uC778" }
|
|
152
157
|
];
|
|
153
|
-
|
|
154
|
-
|
|
158
|
+
const currentStepIndex = steps.findIndex((s) => s.key === step);
|
|
159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { themeClass, children: [
|
|
160
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-gray-200 dark:border-white/10 px-4 sm:px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime.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: [
|
|
155
161
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
156
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", { className: "text-lg font-bold text-white", children: [
|
|
162
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", { className: "text-base sm:text-lg font-bold text-gray-900 dark:text-white", children: [
|
|
157
163
|
serviceName,
|
|
158
164
|
" \uAD6C\uB3C5"
|
|
159
165
|
] }),
|
|
160
|
-
showExpiredBanner && /* @__PURE__ */ (0, import_jsx_runtime.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." })
|
|
166
|
+
showExpiredBanner && /* @__PURE__ */ (0, import_jsx_runtime.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." })
|
|
161
167
|
] }),
|
|
162
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: steps.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
163
|
-
i > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
164
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
168
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-1 sm:gap-2", children: steps.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 sm:gap-2", children: [
|
|
169
|
+
i > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
165
170
|
"div",
|
|
166
171
|
{
|
|
167
|
-
className: `w-6
|
|
168
|
-
style: step === s.key ? { backgroundColor: primaryColor } : void 0,
|
|
169
|
-
children: i + 1
|
|
172
|
+
className: `w-6 sm:w-10 h-px transition-colors ${i <= currentStepIndex ? "bg-blue-500" : "bg-gray-200 dark:bg-white/20"}`
|
|
170
173
|
}
|
|
171
|
-
)
|
|
174
|
+
),
|
|
175
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
176
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
177
|
+
"div",
|
|
178
|
+
{
|
|
179
|
+
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"}`,
|
|
180
|
+
style: step === s.key ? { backgroundColor: primaryColor } : i < currentStepIndex ? { backgroundColor: primaryColor, opacity: 0.5 } : void 0,
|
|
181
|
+
children: i < currentStepIndex ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { className: "w-3 h-3" }) : i + 1
|
|
182
|
+
}
|
|
183
|
+
),
|
|
184
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
185
|
+
"span",
|
|
186
|
+
{
|
|
187
|
+
className: `hidden sm:inline text-xs font-medium ${step === s.key ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-500"}`,
|
|
188
|
+
children: s.label
|
|
189
|
+
}
|
|
190
|
+
)
|
|
191
|
+
] })
|
|
172
192
|
] }, s.key)) })
|
|
173
193
|
] }) }),
|
|
174
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-3xl mx-auto px-4 pb-
|
|
175
|
-
error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-
|
|
194
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-3xl mx-auto px-4 sm:px-6 py-6 sm:py-8 pb-16", children: [
|
|
195
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime.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 }),
|
|
176
196
|
step === "plan" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
177
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-white font-semibold mb-4", children: "\uD50C\uB79C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694" }),
|
|
197
|
+
/* @__PURE__ */ (0, import_jsx_runtime.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" }),
|
|
178
198
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-3", children: plans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
179
199
|
"button",
|
|
180
200
|
{
|
|
181
201
|
onClick: () => setSelectedPlan(plan),
|
|
182
|
-
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"}`,
|
|
202
|
+
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"}`,
|
|
183
203
|
children: [
|
|
184
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-
|
|
185
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
186
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-white font-medium", children: plan.name }),
|
|
187
|
-
plan.isPopular && /* @__PURE__ */ (0, import_jsx_runtime.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" })
|
|
204
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3 mb-2", children: [
|
|
205
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
206
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-900 dark:text-white font-medium text-sm sm:text-base", children: plan.name }),
|
|
207
|
+
plan.isPopular && /* @__PURE__ */ (0, import_jsx_runtime.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" })
|
|
188
208
|
] }),
|
|
189
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-right", children: [
|
|
190
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-white font-bold", children: fmt(plan.price) }),
|
|
191
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-gray-400 text-xs ml-1", children: [
|
|
209
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-right flex-shrink-0", children: [
|
|
210
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-900 dark:text-white font-bold text-sm sm:text-base", children: fmt(plan.price) }),
|
|
211
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-gray-400 dark:text-gray-500 text-xs ml-1", children: [
|
|
192
212
|
"/ ",
|
|
193
213
|
plan.interval,
|
|
194
214
|
"\uAC1C\uC6D4"
|
|
195
215
|
] })
|
|
196
216
|
] })
|
|
197
217
|
] }),
|
|
198
|
-
plan.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-400 text-sm mb-2", children: plan.description }),
|
|
199
|
-
plan.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "space-y-1", children: plan.features.slice(0, 3).map((f,
|
|
200
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { className: "w-3 h-3 text-green-400 flex-shrink-0" }),
|
|
218
|
+
plan.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-500 dark:text-gray-400 text-sm mb-2", children: plan.description }),
|
|
219
|
+
plan.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "space-y-1", children: plan.features.slice(0, 3).map((f, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-300", children: [
|
|
220
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { className: "w-3 h-3 text-green-500 dark:text-green-400 flex-shrink-0" }),
|
|
201
221
|
f
|
|
202
|
-
] },
|
|
222
|
+
] }, idx)) })
|
|
203
223
|
]
|
|
204
224
|
},
|
|
205
225
|
plan.id
|
|
@@ -210,26 +230,26 @@ function SubscribePage({
|
|
|
210
230
|
disabled: !selectedPlan,
|
|
211
231
|
onClick: () => setStep("card"),
|
|
212
232
|
style: selectedPlan ? { backgroundColor: primaryColor } : void 0,
|
|
213
|
-
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"}`,
|
|
233
|
+
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"}`,
|
|
214
234
|
children: "\uB2E4\uC74C \u2014 \uACB0\uC81C\uC218\uB2E8 \uC120\uD0DD"
|
|
215
235
|
}
|
|
216
236
|
)
|
|
217
237
|
] }),
|
|
218
238
|
step === "card" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
219
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-white font-semibold mb-4", children: "\uACB0\uC81C\uC218\uB2E8\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694" }),
|
|
239
|
+
/* @__PURE__ */ (0, import_jsx_runtime.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" }),
|
|
220
240
|
cards.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-3 mb-4", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
221
241
|
"button",
|
|
222
242
|
{
|
|
223
243
|
onClick: () => setSelectedCard(card),
|
|
224
|
-
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"}`,
|
|
225
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
226
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
227
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-white font-medium", children: card.cardBrand }),
|
|
228
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-400 text-sm ml-2", children: card.maskedCardNumber })
|
|
244
|
+
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"}`,
|
|
245
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
246
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
|
|
247
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-900 dark:text-white font-medium text-sm", children: card.cardBrand }),
|
|
248
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-500 dark:text-gray-400 text-sm ml-2", children: card.maskedCardNumber })
|
|
229
249
|
] }),
|
|
230
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
231
|
-
card.isDefault && /* @__PURE__ */ (0, import_jsx_runtime.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" }),
|
|
232
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-gray-400 text-xs", children: [
|
|
250
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
|
|
251
|
+
card.isDefault && /* @__PURE__ */ (0, import_jsx_runtime.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" }),
|
|
252
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-gray-400 dark:text-gray-500 text-xs", children: [
|
|
233
253
|
card.expiryMonth,
|
|
234
254
|
"/",
|
|
235
255
|
card.expiryYear
|
|
@@ -243,21 +263,21 @@ function SubscribePage({
|
|
|
243
263
|
"button",
|
|
244
264
|
{
|
|
245
265
|
onClick: () => setShowCardForm(true),
|
|
246
|
-
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",
|
|
266
|
+
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",
|
|
247
267
|
children: "+ \uC0C8 \uCE74\uB4DC \uCD94\uAC00"
|
|
248
268
|
}
|
|
249
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5 space-y-3", children: [
|
|
250
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-white text-sm font-medium
|
|
251
|
-
cardError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-xs", children: cardError }),
|
|
252
|
-
[
|
|
253
|
-
{ label: "\uCE74\uB4DC \uBC88\uD638", key: "cardNumber", placeholder: "0000-0000-0000-0000", type: "text" },
|
|
254
|
-
{ label: "\uB9CC\uB8CC\uC77C", key: "expiryDate", placeholder: "MM/YY", type: "text" },
|
|
255
|
-
{ label: "CVC", key: "cvc", placeholder: "3\uC790\uB9AC", type: "password" },
|
|
256
|
-
{ label: "\uCE74\uB4DC \uBE44\uBC00\uBC88\uD638 \uC55E 2\uC790\uB9AC", key: "cardPassword", placeholder: "\u2022\u2022", type: "password" },
|
|
257
|
-
{ label: "\uCE74\uB4DC \uC18C\uC720\uC790\uBA85", key: "cardHolderName", placeholder: "\uD64D\uAE38\uB3D9", type: "text" },
|
|
258
|
-
{ label: "\uC0DD\uB144\uC6D4\uC77C 6\uC790\uB9AC / \uC0AC\uC5C5\uC790\uBC88\uD638 10\uC790\uB9AC", key: "birthNumber", placeholder: "990101", type: "text" }
|
|
259
|
-
].map(({ label, key, placeholder, type }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
260
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "text-xs text-gray-400 block mb-1", children: label }),
|
|
269
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.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: [
|
|
270
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-gray-900 dark:text-white text-sm font-medium", children: "\uCE74\uB4DC \uC815\uBCF4 \uC785\uB825" }),
|
|
271
|
+
cardError && /* @__PURE__ */ (0, import_jsx_runtime.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 }),
|
|
272
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
|
|
273
|
+
{ label: "\uCE74\uB4DC \uBC88\uD638", key: "cardNumber", placeholder: "0000-0000-0000-0000", type: "text", colSpan: true },
|
|
274
|
+
{ label: "\uB9CC\uB8CC\uC77C", key: "expiryDate", placeholder: "MM/YY", type: "text", colSpan: false },
|
|
275
|
+
{ label: "CVC", key: "cvc", placeholder: "3\uC790\uB9AC", type: "password", colSpan: false },
|
|
276
|
+
{ label: "\uCE74\uB4DC \uBE44\uBC00\uBC88\uD638 \uC55E 2\uC790\uB9AC", key: "cardPassword", placeholder: "\u2022\u2022", type: "password", colSpan: false },
|
|
277
|
+
{ label: "\uCE74\uB4DC \uC18C\uC720\uC790\uBA85", key: "cardHolderName", placeholder: "\uD64D\uAE38\uB3D9", type: "text", colSpan: false },
|
|
278
|
+
{ label: "\uC0DD\uB144\uC6D4\uC77C 6\uC790\uB9AC / \uC0AC\uC5C5\uC790\uBC88\uD638 10\uC790\uB9AC", key: "birthNumber", placeholder: "990101", type: "text", colSpan: true }
|
|
279
|
+
].map(({ label, key, placeholder, type, colSpan }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: colSpan ? "sm:col-span-2" : "", children: [
|
|
280
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "text-xs text-gray-500 dark:text-gray-400 block mb-1", children: label }),
|
|
261
281
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
262
282
|
"input",
|
|
263
283
|
{
|
|
@@ -265,10 +285,10 @@ function SubscribePage({
|
|
|
265
285
|
placeholder,
|
|
266
286
|
value: cardForm[key],
|
|
267
287
|
onChange: (e) => setCardForm((f) => ({ ...f, [key]: e.target.value })),
|
|
268
|
-
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"
|
|
288
|
+
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"
|
|
269
289
|
}
|
|
270
290
|
)
|
|
271
|
-
] }, key)),
|
|
291
|
+
] }, key)) }),
|
|
272
292
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 pt-1", children: [
|
|
273
293
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
274
294
|
"button",
|
|
@@ -277,7 +297,7 @@ function SubscribePage({
|
|
|
277
297
|
setShowCardForm(false);
|
|
278
298
|
setCardError("");
|
|
279
299
|
},
|
|
280
|
-
className: "flex-1 py-2 rounded-lg border border-white/10 text-gray-400 text-sm hover:border-white/20 transition-all",
|
|
300
|
+
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",
|
|
281
301
|
children: "\uCDE8\uC18C"
|
|
282
302
|
}
|
|
283
303
|
),
|
|
@@ -287,36 +307,46 @@ function SubscribePage({
|
|
|
287
307
|
onClick: handleRegisterCard,
|
|
288
308
|
disabled: cardSubmitting,
|
|
289
309
|
style: { backgroundColor: primaryColor },
|
|
290
|
-
className: "flex-1 py-2 rounded-lg text-white text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-all",
|
|
310
|
+
className: "flex-1 py-2.5 rounded-lg text-white text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-all",
|
|
291
311
|
children: cardSubmitting ? "\uB4F1\uB85D \uC911..." : "\uCE74\uB4DC \uB4F1\uB85D"
|
|
292
312
|
}
|
|
293
313
|
)
|
|
294
314
|
] })
|
|
295
315
|
] }),
|
|
296
316
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-3 mt-6", children: [
|
|
297
|
-
/* @__PURE__ */ (0, import_jsx_runtime.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" }),
|
|
298
317
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
318
|
+
"button",
|
|
319
|
+
{
|
|
320
|
+
onClick: () => setStep("plan"),
|
|
321
|
+
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",
|
|
322
|
+
children: "\uC774\uC804"
|
|
323
|
+
}
|
|
324
|
+
),
|
|
325
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
299
326
|
"button",
|
|
300
327
|
{
|
|
301
328
|
disabled: !selectedCard,
|
|
302
329
|
onClick: () => setStep("confirm"),
|
|
303
330
|
style: selectedCard ? { backgroundColor: primaryColor } : void 0,
|
|
304
|
-
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"}`,
|
|
305
|
-
children:
|
|
331
|
+
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"}`,
|
|
332
|
+
children: [
|
|
333
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hidden sm:inline", children: "\uB2E4\uC74C \u2014 \uCD5C\uC885 \uD655\uC778" }),
|
|
334
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sm:hidden", children: "\uB2E4\uC74C" })
|
|
335
|
+
]
|
|
306
336
|
}
|
|
307
337
|
)
|
|
308
338
|
] })
|
|
309
339
|
] }),
|
|
310
340
|
step === "confirm" && selectedPlan && selectedCard && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
311
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-white font-semibold mb-
|
|
341
|
+
/* @__PURE__ */ (0, import_jsx_runtime.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" }),
|
|
312
342
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3 mb-6", children: [
|
|
313
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5", children: [
|
|
314
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-gray-400 mb-1", children: "\uC120\uD0DD \uD50C\uB79C" }),
|
|
315
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
316
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-white font-medium", children: selectedPlan.name }),
|
|
317
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-white font-bold", children: [
|
|
343
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5", children: [
|
|
344
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-1.5", children: "\uC120\uD0DD \uD50C\uB79C" }),
|
|
345
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
346
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-900 dark:text-white font-medium text-sm", children: selectedPlan.name }),
|
|
347
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-gray-900 dark:text-white font-bold text-sm flex-shrink-0", children: [
|
|
318
348
|
fmt(selectedPlan.price),
|
|
319
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-gray-400 text-xs font-normal ml-1", children: [
|
|
349
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-gray-400 dark:text-gray-500 text-xs font-normal ml-1", children: [
|
|
320
350
|
"/ ",
|
|
321
351
|
selectedPlan.interval,
|
|
322
352
|
"\uAC1C\uC6D4"
|
|
@@ -324,34 +354,48 @@ function SubscribePage({
|
|
|
324
354
|
] })
|
|
325
355
|
] })
|
|
326
356
|
] }),
|
|
327
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5", children: [
|
|
328
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-gray-400 mb-1", children: "\uACB0\uC81C\uC218\uB2E8" }),
|
|
357
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5", children: [
|
|
358
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-1.5", children: "\uACB0\uC81C\uC218\uB2E8" }),
|
|
329
359
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
330
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-white font-medium", children: selectedCard.cardBrand }),
|
|
331
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-400 text-sm", children: selectedCard.maskedCardNumber })
|
|
360
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-900 dark:text-white font-medium text-sm", children: selectedCard.cardBrand }),
|
|
361
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: selectedCard.maskedCardNumber })
|
|
332
362
|
] })
|
|
333
363
|
] }),
|
|
334
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
364
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
365
|
+
"div",
|
|
366
|
+
{
|
|
367
|
+
className: "p-4 rounded-xl border bg-blue-50/50 dark:bg-blue-500/5",
|
|
368
|
+
style: { borderColor: `${primaryColor}40` },
|
|
369
|
+
children: [
|
|
370
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
371
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-600 dark:text-gray-300 text-sm", children: "\uACB0\uC81C \uAE08\uC561" }),
|
|
372
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-bold text-xl", style: { color: primaryColor }, children: fmt(selectedPlan.price) })
|
|
373
|
+
] }),
|
|
374
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-gray-400 dark:text-gray-500 text-xs mt-1.5", children: [
|
|
375
|
+
"\uC624\uB298 \uACB0\uC81C \uD6C4 ",
|
|
376
|
+
selectedPlan.interval,
|
|
377
|
+
"\uAC1C\uC6D4 \uAC04 \uC774\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4"
|
|
378
|
+
] })
|
|
379
|
+
]
|
|
380
|
+
}
|
|
381
|
+
)
|
|
345
382
|
] }),
|
|
346
383
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-3", children: [
|
|
347
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
384
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
385
|
+
"button",
|
|
386
|
+
{
|
|
387
|
+
onClick: () => setStep("card"),
|
|
388
|
+
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",
|
|
389
|
+
children: "\uC774\uC804"
|
|
390
|
+
}
|
|
391
|
+
),
|
|
348
392
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
349
393
|
"button",
|
|
350
394
|
{
|
|
351
395
|
onClick: handleSubscribe,
|
|
352
396
|
disabled: submitting,
|
|
353
397
|
style: { backgroundColor: primaryColor },
|
|
354
|
-
className: "flex-1 py-3 rounded-xl text-white font-medium hover:opacity-90 disabled:opacity-50 transition-all",
|
|
398
|
+
className: "flex-1 py-3 rounded-xl text-white font-medium text-sm hover:opacity-90 disabled:opacity-50 transition-all shadow-sm",
|
|
355
399
|
children: submitting ? "\uCC98\uB9AC \uC911..." : `${fmt(selectedPlan.price)} \uACB0\uC81C\uD558\uAE30`
|
|
356
400
|
}
|
|
357
401
|
)
|
|
@@ -360,8 +404,8 @@ function SubscribePage({
|
|
|
360
404
|
] })
|
|
361
405
|
] });
|
|
362
406
|
}
|
|
363
|
-
function PageLayout({ children }) {
|
|
364
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-screen bg-gray-950", children });
|
|
407
|
+
function PageLayout({ children, themeClass }) {
|
|
408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: themeClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-screen bg-white dark:bg-gray-950 transition-colors", children }) });
|
|
365
409
|
}
|
|
366
410
|
function CheckIcon({ className }) {
|
|
367
411
|
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" }) });
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
1
3
|
// src/components/SubscribePage.tsx
|
|
2
4
|
import { useState, useEffect } from "react";
|
|
3
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -9,7 +11,8 @@ function SubscribePage({
|
|
|
9
11
|
callbackUrl = "/",
|
|
10
12
|
serviceName = "\uC11C\uBE44\uC2A4",
|
|
11
13
|
primaryColor = DEFAULT_PRIMARY,
|
|
12
|
-
showExpiredBanner = true
|
|
14
|
+
showExpiredBanner = true,
|
|
15
|
+
theme = "system"
|
|
13
16
|
}) {
|
|
14
17
|
const [step, setStep] = useState("plan");
|
|
15
18
|
const [plans, setPlans] = useState([]);
|
|
@@ -111,12 +114,15 @@ function SubscribePage({
|
|
|
111
114
|
function fmt(price) {
|
|
112
115
|
return price.toLocaleString("ko-KR") + "\uC6D0";
|
|
113
116
|
}
|
|
114
|
-
|
|
117
|
+
const themeClass = theme === "dark" ? "dark" : theme === "light" ? "light-mode-override" : "";
|
|
118
|
+
if (loading) {
|
|
119
|
+
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..." }) });
|
|
120
|
+
}
|
|
115
121
|
if (success) {
|
|
116
|
-
return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-
|
|
117
|
-
/* @__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" }) }),
|
|
118
|
-
/* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-white mb-2", children: "\uAD6C\uB3C5\uC774 \uC2DC\uC791\uB418\uC5C8\uC2B5\uB2C8\uB2E4!" }),
|
|
119
|
-
/* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm", children: "\uC7A0\uC2DC \uD6C4 \uC774\uB3D9\uD569\uB2C8\uB2E4..." })
|
|
122
|
+
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: [
|
|
123
|
+
/* @__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" }) }),
|
|
124
|
+
/* @__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!" }),
|
|
125
|
+
/* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400 text-sm", children: "\uC7A0\uC2DC \uD6C4 \uC774\uB3D9\uD569\uB2C8\uB2E4..." })
|
|
120
126
|
] }) }) });
|
|
121
127
|
}
|
|
122
128
|
const steps = [
|
|
@@ -124,56 +130,71 @@ function SubscribePage({
|
|
|
124
130
|
{ key: "card", label: "\uACB0\uC81C\uC218\uB2E8" },
|
|
125
131
|
{ key: "confirm", label: "\uD655\uC778" }
|
|
126
132
|
];
|
|
127
|
-
|
|
128
|
-
|
|
133
|
+
const currentStepIndex = steps.findIndex((s) => s.key === step);
|
|
134
|
+
return /* @__PURE__ */ jsxs(PageLayout, { themeClass, children: [
|
|
135
|
+
/* @__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: [
|
|
129
136
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
130
|
-
/* @__PURE__ */ jsxs("h1", { className: "text-lg font-bold text-white", children: [
|
|
137
|
+
/* @__PURE__ */ jsxs("h1", { className: "text-base sm:text-lg font-bold text-gray-900 dark:text-white", children: [
|
|
131
138
|
serviceName,
|
|
132
139
|
" \uAD6C\uB3C5"
|
|
133
140
|
] }),
|
|
134
|
-
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." })
|
|
141
|
+
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." })
|
|
135
142
|
] }),
|
|
136
|
-
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: steps.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
137
|
-
i > 0 && /* @__PURE__ */ jsx(
|
|
138
|
-
/* @__PURE__ */ jsx(
|
|
143
|
+
/* @__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: [
|
|
144
|
+
i > 0 && /* @__PURE__ */ jsx(
|
|
139
145
|
"div",
|
|
140
146
|
{
|
|
141
|
-
className: `w-6
|
|
142
|
-
style: step === s.key ? { backgroundColor: primaryColor } : void 0,
|
|
143
|
-
children: i + 1
|
|
147
|
+
className: `w-6 sm:w-10 h-px transition-colors ${i <= currentStepIndex ? "bg-blue-500" : "bg-gray-200 dark:bg-white/20"}`
|
|
144
148
|
}
|
|
145
|
-
)
|
|
149
|
+
),
|
|
150
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
151
|
+
/* @__PURE__ */ jsx(
|
|
152
|
+
"div",
|
|
153
|
+
{
|
|
154
|
+
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"}`,
|
|
155
|
+
style: step === s.key ? { backgroundColor: primaryColor } : i < currentStepIndex ? { backgroundColor: primaryColor, opacity: 0.5 } : void 0,
|
|
156
|
+
children: i < currentStepIndex ? /* @__PURE__ */ jsx(CheckIcon, { className: "w-3 h-3" }) : i + 1
|
|
157
|
+
}
|
|
158
|
+
),
|
|
159
|
+
/* @__PURE__ */ jsx(
|
|
160
|
+
"span",
|
|
161
|
+
{
|
|
162
|
+
className: `hidden sm:inline text-xs font-medium ${step === s.key ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-500"}`,
|
|
163
|
+
children: s.label
|
|
164
|
+
}
|
|
165
|
+
)
|
|
166
|
+
] })
|
|
146
167
|
] }, s.key)) })
|
|
147
168
|
] }) }),
|
|
148
|
-
/* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto px-4 pb-
|
|
149
|
-
error && /* @__PURE__ */ jsx("div", { className: "mb-
|
|
169
|
+
/* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto px-4 sm:px-6 py-6 sm:py-8 pb-16", children: [
|
|
170
|
+
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 }),
|
|
150
171
|
step === "plan" && /* @__PURE__ */ jsxs("div", { children: [
|
|
151
|
-
/* @__PURE__ */ jsx("h2", { className: "text-white font-semibold mb-4", children: "\uD50C\uB79C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694" }),
|
|
172
|
+
/* @__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" }),
|
|
152
173
|
/* @__PURE__ */ jsx("div", { className: "grid gap-3", children: plans.map((plan) => /* @__PURE__ */ jsxs(
|
|
153
174
|
"button",
|
|
154
175
|
{
|
|
155
176
|
onClick: () => setSelectedPlan(plan),
|
|
156
|
-
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"}`,
|
|
177
|
+
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"}`,
|
|
157
178
|
children: [
|
|
158
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-
|
|
159
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
160
|
-
/* @__PURE__ */ jsx("span", { className: "text-white font-medium", children: plan.name }),
|
|
161
|
-
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" })
|
|
179
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-2", children: [
|
|
180
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
181
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-medium text-sm sm:text-base", children: plan.name }),
|
|
182
|
+
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" })
|
|
162
183
|
] }),
|
|
163
|
-
/* @__PURE__ */ jsxs("div", { className: "text-right", children: [
|
|
164
|
-
/* @__PURE__ */ jsx("span", { className: "text-white font-bold", children: fmt(plan.price) }),
|
|
165
|
-
/* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-xs ml-1", children: [
|
|
184
|
+
/* @__PURE__ */ jsxs("div", { className: "text-right flex-shrink-0", children: [
|
|
185
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-bold text-sm sm:text-base", children: fmt(plan.price) }),
|
|
186
|
+
/* @__PURE__ */ jsxs("span", { className: "text-gray-400 dark:text-gray-500 text-xs ml-1", children: [
|
|
166
187
|
"/ ",
|
|
167
188
|
plan.interval,
|
|
168
189
|
"\uAC1C\uC6D4"
|
|
169
190
|
] })
|
|
170
191
|
] })
|
|
171
192
|
] }),
|
|
172
|
-
plan.description && /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm mb-2", children: plan.description }),
|
|
173
|
-
plan.features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: plan.features.slice(0, 3).map((f,
|
|
174
|
-
/* @__PURE__ */ jsx(CheckIcon, { className: "w-3 h-3 text-green-400 flex-shrink-0" }),
|
|
193
|
+
plan.description && /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400 text-sm mb-2", children: plan.description }),
|
|
194
|
+
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: [
|
|
195
|
+
/* @__PURE__ */ jsx(CheckIcon, { className: "w-3 h-3 text-green-500 dark:text-green-400 flex-shrink-0" }),
|
|
175
196
|
f
|
|
176
|
-
] },
|
|
197
|
+
] }, idx)) })
|
|
177
198
|
]
|
|
178
199
|
},
|
|
179
200
|
plan.id
|
|
@@ -184,26 +205,26 @@ function SubscribePage({
|
|
|
184
205
|
disabled: !selectedPlan,
|
|
185
206
|
onClick: () => setStep("card"),
|
|
186
207
|
style: selectedPlan ? { backgroundColor: primaryColor } : void 0,
|
|
187
|
-
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"}`,
|
|
208
|
+
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"}`,
|
|
188
209
|
children: "\uB2E4\uC74C \u2014 \uACB0\uC81C\uC218\uB2E8 \uC120\uD0DD"
|
|
189
210
|
}
|
|
190
211
|
)
|
|
191
212
|
] }),
|
|
192
213
|
step === "card" && /* @__PURE__ */ jsxs("div", { children: [
|
|
193
|
-
/* @__PURE__ */ jsx("h2", { className: "text-white font-semibold mb-4", children: "\uACB0\uC81C\uC218\uB2E8\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694" }),
|
|
214
|
+
/* @__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" }),
|
|
194
215
|
cards.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-3 mb-4", children: cards.map((card) => /* @__PURE__ */ jsx(
|
|
195
216
|
"button",
|
|
196
217
|
{
|
|
197
218
|
onClick: () => setSelectedCard(card),
|
|
198
|
-
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"}`,
|
|
199
|
-
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
200
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
201
|
-
/* @__PURE__ */ jsx("span", { className: "text-white font-medium", children: card.cardBrand }),
|
|
202
|
-
/* @__PURE__ */ jsx("span", { className: "text-gray-400 text-sm ml-2", children: card.maskedCardNumber })
|
|
219
|
+
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"}`,
|
|
220
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
|
|
221
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
222
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-medium text-sm", children: card.cardBrand }),
|
|
223
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm ml-2", children: card.maskedCardNumber })
|
|
203
224
|
] }),
|
|
204
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
205
|
-
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" }),
|
|
206
|
-
/* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-xs", children: [
|
|
225
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
|
|
226
|
+
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" }),
|
|
227
|
+
/* @__PURE__ */ jsxs("span", { className: "text-gray-400 dark:text-gray-500 text-xs", children: [
|
|
207
228
|
card.expiryMonth,
|
|
208
229
|
"/",
|
|
209
230
|
card.expiryYear
|
|
@@ -217,21 +238,21 @@ function SubscribePage({
|
|
|
217
238
|
"button",
|
|
218
239
|
{
|
|
219
240
|
onClick: () => setShowCardForm(true),
|
|
220
|
-
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",
|
|
241
|
+
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",
|
|
221
242
|
children: "+ \uC0C8 \uCE74\uB4DC \uCD94\uAC00"
|
|
222
243
|
}
|
|
223
|
-
) : /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5 space-y-3", children: [
|
|
224
|
-
/* @__PURE__ */ jsx("h3", { className: "text-white text-sm font-medium
|
|
225
|
-
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 }),
|
|
226
|
-
[
|
|
227
|
-
{ label: "\uCE74\uB4DC \uBC88\uD638", key: "cardNumber", placeholder: "0000-0000-0000-0000", type: "text" },
|
|
228
|
-
{ label: "\uB9CC\uB8CC\uC77C", key: "expiryDate", placeholder: "MM/YY", type: "text" },
|
|
229
|
-
{ label: "CVC", key: "cvc", placeholder: "3\uC790\uB9AC", type: "password" },
|
|
230
|
-
{ label: "\uCE74\uB4DC \uBE44\uBC00\uBC88\uD638 \uC55E 2\uC790\uB9AC", key: "cardPassword", placeholder: "\u2022\u2022", type: "password" },
|
|
231
|
-
{ label: "\uCE74\uB4DC \uC18C\uC720\uC790\uBA85", key: "cardHolderName", placeholder: "\uD64D\uAE38\uB3D9", type: "text" },
|
|
232
|
-
{ label: "\uC0DD\uB144\uC6D4\uC77C 6\uC790\uB9AC / \uC0AC\uC5C5\uC790\uBC88\uD638 10\uC790\uB9AC", key: "birthNumber", placeholder: "990101", type: "text" }
|
|
233
|
-
].map(({ label, key, placeholder, type }) => /* @__PURE__ */ jsxs("div", { children: [
|
|
234
|
-
/* @__PURE__ */ jsx("label", { className: "text-xs text-gray-400 block mb-1", children: label }),
|
|
244
|
+
) : /* @__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: [
|
|
245
|
+
/* @__PURE__ */ jsx("h3", { className: "text-gray-900 dark:text-white text-sm font-medium", children: "\uCE74\uB4DC \uC815\uBCF4 \uC785\uB825" }),
|
|
246
|
+
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 }),
|
|
247
|
+
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
|
|
248
|
+
{ label: "\uCE74\uB4DC \uBC88\uD638", key: "cardNumber", placeholder: "0000-0000-0000-0000", type: "text", colSpan: true },
|
|
249
|
+
{ label: "\uB9CC\uB8CC\uC77C", key: "expiryDate", placeholder: "MM/YY", type: "text", colSpan: false },
|
|
250
|
+
{ label: "CVC", key: "cvc", placeholder: "3\uC790\uB9AC", type: "password", colSpan: false },
|
|
251
|
+
{ label: "\uCE74\uB4DC \uBE44\uBC00\uBC88\uD638 \uC55E 2\uC790\uB9AC", key: "cardPassword", placeholder: "\u2022\u2022", type: "password", colSpan: false },
|
|
252
|
+
{ label: "\uCE74\uB4DC \uC18C\uC720\uC790\uBA85", key: "cardHolderName", placeholder: "\uD64D\uAE38\uB3D9", type: "text", colSpan: false },
|
|
253
|
+
{ label: "\uC0DD\uB144\uC6D4\uC77C 6\uC790\uB9AC / \uC0AC\uC5C5\uC790\uBC88\uD638 10\uC790\uB9AC", key: "birthNumber", placeholder: "990101", type: "text", colSpan: true }
|
|
254
|
+
].map(({ label, key, placeholder, type, colSpan }) => /* @__PURE__ */ jsxs("div", { className: colSpan ? "sm:col-span-2" : "", children: [
|
|
255
|
+
/* @__PURE__ */ jsx("label", { className: "text-xs text-gray-500 dark:text-gray-400 block mb-1", children: label }),
|
|
235
256
|
/* @__PURE__ */ jsx(
|
|
236
257
|
"input",
|
|
237
258
|
{
|
|
@@ -239,10 +260,10 @@ function SubscribePage({
|
|
|
239
260
|
placeholder,
|
|
240
261
|
value: cardForm[key],
|
|
241
262
|
onChange: (e) => setCardForm((f) => ({ ...f, [key]: e.target.value })),
|
|
242
|
-
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"
|
|
263
|
+
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"
|
|
243
264
|
}
|
|
244
265
|
)
|
|
245
|
-
] }, key)),
|
|
266
|
+
] }, key)) }),
|
|
246
267
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
|
|
247
268
|
/* @__PURE__ */ jsx(
|
|
248
269
|
"button",
|
|
@@ -251,7 +272,7 @@ function SubscribePage({
|
|
|
251
272
|
setShowCardForm(false);
|
|
252
273
|
setCardError("");
|
|
253
274
|
},
|
|
254
|
-
className: "flex-1 py-2 rounded-lg border border-white/10 text-gray-400 text-sm hover:border-white/20 transition-all",
|
|
275
|
+
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",
|
|
255
276
|
children: "\uCDE8\uC18C"
|
|
256
277
|
}
|
|
257
278
|
),
|
|
@@ -261,36 +282,46 @@ function SubscribePage({
|
|
|
261
282
|
onClick: handleRegisterCard,
|
|
262
283
|
disabled: cardSubmitting,
|
|
263
284
|
style: { backgroundColor: primaryColor },
|
|
264
|
-
className: "flex-1 py-2 rounded-lg text-white text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-all",
|
|
285
|
+
className: "flex-1 py-2.5 rounded-lg text-white text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-all",
|
|
265
286
|
children: cardSubmitting ? "\uB4F1\uB85D \uC911..." : "\uCE74\uB4DC \uB4F1\uB85D"
|
|
266
287
|
}
|
|
267
288
|
)
|
|
268
289
|
] })
|
|
269
290
|
] }),
|
|
270
291
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-6", children: [
|
|
271
|
-
/* @__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" }),
|
|
272
292
|
/* @__PURE__ */ jsx(
|
|
293
|
+
"button",
|
|
294
|
+
{
|
|
295
|
+
onClick: () => setStep("plan"),
|
|
296
|
+
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",
|
|
297
|
+
children: "\uC774\uC804"
|
|
298
|
+
}
|
|
299
|
+
),
|
|
300
|
+
/* @__PURE__ */ jsxs(
|
|
273
301
|
"button",
|
|
274
302
|
{
|
|
275
303
|
disabled: !selectedCard,
|
|
276
304
|
onClick: () => setStep("confirm"),
|
|
277
305
|
style: selectedCard ? { backgroundColor: primaryColor } : void 0,
|
|
278
|
-
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"}`,
|
|
279
|
-
children:
|
|
306
|
+
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"}`,
|
|
307
|
+
children: [
|
|
308
|
+
/* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "\uB2E4\uC74C \u2014 \uCD5C\uC885 \uD655\uC778" }),
|
|
309
|
+
/* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "\uB2E4\uC74C" })
|
|
310
|
+
]
|
|
280
311
|
}
|
|
281
312
|
)
|
|
282
313
|
] })
|
|
283
314
|
] }),
|
|
284
315
|
step === "confirm" && selectedPlan && selectedCard && /* @__PURE__ */ jsxs("div", { children: [
|
|
285
|
-
/* @__PURE__ */ jsx("h2", { className: "text-white font-semibold mb-
|
|
316
|
+
/* @__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" }),
|
|
286
317
|
/* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-6", children: [
|
|
287
|
-
/* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5", children: [
|
|
288
|
-
/* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 mb-1", children: "\uC120\uD0DD \uD50C\uB79C" }),
|
|
289
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
290
|
-
/* @__PURE__ */ jsx("span", { className: "text-white font-medium", children: selectedPlan.name }),
|
|
291
|
-
/* @__PURE__ */ jsxs("span", { className: "text-white font-bold", children: [
|
|
318
|
+
/* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5", children: [
|
|
319
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-1.5", children: "\uC120\uD0DD \uD50C\uB79C" }),
|
|
320
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
|
|
321
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-medium text-sm", children: selectedPlan.name }),
|
|
322
|
+
/* @__PURE__ */ jsxs("span", { className: "text-gray-900 dark:text-white font-bold text-sm flex-shrink-0", children: [
|
|
292
323
|
fmt(selectedPlan.price),
|
|
293
|
-
/* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-xs font-normal ml-1", children: [
|
|
324
|
+
/* @__PURE__ */ jsxs("span", { className: "text-gray-400 dark:text-gray-500 text-xs font-normal ml-1", children: [
|
|
294
325
|
"/ ",
|
|
295
326
|
selectedPlan.interval,
|
|
296
327
|
"\uAC1C\uC6D4"
|
|
@@ -298,34 +329,48 @@ function SubscribePage({
|
|
|
298
329
|
] })
|
|
299
330
|
] })
|
|
300
331
|
] }),
|
|
301
|
-
/* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-white/10 bg-white/5", children: [
|
|
302
|
-
/* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 mb-1", children: "\uACB0\uC81C\uC218\uB2E8" }),
|
|
332
|
+
/* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5", children: [
|
|
333
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-1.5", children: "\uACB0\uC81C\uC218\uB2E8" }),
|
|
303
334
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
304
|
-
/* @__PURE__ */ jsx("span", { className: "text-white font-medium", children: selectedCard.cardBrand }),
|
|
305
|
-
/* @__PURE__ */ jsx("span", { className: "text-gray-400 text-sm", children: selectedCard.maskedCardNumber })
|
|
335
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white font-medium text-sm", children: selectedCard.cardBrand }),
|
|
336
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: selectedCard.maskedCardNumber })
|
|
306
337
|
] })
|
|
307
338
|
] }),
|
|
308
|
-
/* @__PURE__ */ jsxs(
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
339
|
+
/* @__PURE__ */ jsxs(
|
|
340
|
+
"div",
|
|
341
|
+
{
|
|
342
|
+
className: "p-4 rounded-xl border bg-blue-50/50 dark:bg-blue-500/5",
|
|
343
|
+
style: { borderColor: `${primaryColor}40` },
|
|
344
|
+
children: [
|
|
345
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
|
|
346
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-300 text-sm", children: "\uACB0\uC81C \uAE08\uC561" }),
|
|
347
|
+
/* @__PURE__ */ jsx("span", { className: "font-bold text-xl", style: { color: primaryColor }, children: fmt(selectedPlan.price) })
|
|
348
|
+
] }),
|
|
349
|
+
/* @__PURE__ */ jsxs("p", { className: "text-gray-400 dark:text-gray-500 text-xs mt-1.5", children: [
|
|
350
|
+
"\uC624\uB298 \uACB0\uC81C \uD6C4 ",
|
|
351
|
+
selectedPlan.interval,
|
|
352
|
+
"\uAC1C\uC6D4 \uAC04 \uC774\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4"
|
|
353
|
+
] })
|
|
354
|
+
]
|
|
355
|
+
}
|
|
356
|
+
)
|
|
319
357
|
] }),
|
|
320
358
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
|
|
321
|
-
/* @__PURE__ */ jsx(
|
|
359
|
+
/* @__PURE__ */ jsx(
|
|
360
|
+
"button",
|
|
361
|
+
{
|
|
362
|
+
onClick: () => setStep("card"),
|
|
363
|
+
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",
|
|
364
|
+
children: "\uC774\uC804"
|
|
365
|
+
}
|
|
366
|
+
),
|
|
322
367
|
/* @__PURE__ */ jsx(
|
|
323
368
|
"button",
|
|
324
369
|
{
|
|
325
370
|
onClick: handleSubscribe,
|
|
326
371
|
disabled: submitting,
|
|
327
372
|
style: { backgroundColor: primaryColor },
|
|
328
|
-
className: "flex-1 py-3 rounded-xl text-white font-medium hover:opacity-90 disabled:opacity-50 transition-all",
|
|
373
|
+
className: "flex-1 py-3 rounded-xl text-white font-medium text-sm hover:opacity-90 disabled:opacity-50 transition-all shadow-sm",
|
|
329
374
|
children: submitting ? "\uCC98\uB9AC \uC911..." : `${fmt(selectedPlan.price)} \uACB0\uC81C\uD558\uAE30`
|
|
330
375
|
}
|
|
331
376
|
)
|
|
@@ -334,8 +379,8 @@ function SubscribePage({
|
|
|
334
379
|
] })
|
|
335
380
|
] });
|
|
336
381
|
}
|
|
337
|
-
function PageLayout({ children }) {
|
|
338
|
-
return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-950", children });
|
|
382
|
+
function PageLayout({ children, themeClass }) {
|
|
383
|
+
return /* @__PURE__ */ jsx("div", { className: themeClass, children: /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-white dark:bg-gray-950 transition-colors", children }) });
|
|
339
384
|
}
|
|
340
385
|
function CheckIcon({ className }) {
|
|
341
386
|
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" }) });
|