@designbasekorea/figma-ui 0.7.1 → 0.7.2

package/dist/index.esm.js

@@ -53,6 +53,20 @@ const FIGMA_UI_TRANSLATIONS = {
         'form.submit': '제출',
         'form.verifying': '확인 중...',
         'license.youtube_membership': 'YouTube 멤버십',
+        'license.unlock_unlimited': '무제한 사용 활성화',
+        'license.unlock_unlimited_description': '라이선스 키를 등록하면 모든 Designbase 플러그인의 프로 기능과 무제한 사용을 이용할 수 있습니다.',
+        'license.get_key_title': '라이선스 키 받기',
+        'license.get_key_description': '멤버십 회원에게 매월 새 라이선스 키가 제공됩니다.',
+        'license.get_key_step_1_title': '멤버십 가입',
+        'license.get_key_step_1_description': 'Designbase YouTube 채널에서 멤버십에 가입합니다.',
+        'license.get_key_step_2_title': '이번 달 키 복사',
+        'license.get_key_step_2_description': '멤버 전용 커뮤니티 게시글에서 키를 확인합니다.',
+        'license.get_key_step_3_title': '키 등록',
+        'license.get_key_step_3_description': '아래 입력창에 붙여 넣으면 프로 기능이 열립니다.',
+        'license.get_key_cta': '멤버십 가입하고 키 받기',
+        'license.activate_key_title': '라이선스 키 등록',
+        'license.activate_key_description': '이미 키가 있다면 아래에 붙여 넣어 프로 기능을 활성화하세요.',
+        'license.unlock_pro_features': '프로 기능 활성화',
         'license.current_plan': '현재 플랜',
         'license.pro_plan': '프로 플랜',
         'license.membership': '멤버십',
@@ -84,7 +98,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.submit': '활성화',
         'license.verifying': '확인 중...',
         'license.enter_from_email': '이메일로 받은 라이선스 키를 입력하세요.',
-        'license.enter_from_youtube': '멤버 전용 커뮤니티에서 받은 키를 입력하세요.',
+        'license.enter_from_youtube': '멤버 전용 게시글에서 복사한 이번 달 키를 입력하세요.',
         'license.help_link': '라이선스·결제 도움말',
         'license.youtube_membership_howto': '이용 방법',
         'license.youtube_membership_step_1': 'Designbase YouTube 채널 멤버십에 가입합니다.',
@@ -191,6 +205,20 @@ const FIGMA_UI_TRANSLATIONS = {
         'form.submit': 'Activate',
         'form.verifying': 'Verifying...',
         'license.youtube_membership': 'YouTube Membership',
+        'license.unlock_unlimited': 'Unlock Unlimited Access',
+        'license.unlock_unlimited_description': 'Add a license key to unlock Pro features and unlimited use across Designbase plugins.',
+        'license.get_key_title': 'Get a license key',
+        'license.get_key_description': 'Members receive a new license key every month.',
+        'license.get_key_step_1_title': 'Join the membership',
+        'license.get_key_step_1_description': 'Join the Designbase YouTube channel membership.',
+        'license.get_key_step_2_title': 'Copy this month’s key',
+        'license.get_key_step_2_description': 'Find the key in the members-only community post.',
+        'license.get_key_step_3_title': 'Activate the key',
+        'license.get_key_step_3_description': 'Paste it below to unlock Pro features.',
+        'license.get_key_cta': 'Join and get a license key',
+        'license.activate_key_title': 'Activate your license key',
+        'license.activate_key_description': 'Already have a key? Paste it below to unlock Pro features.',
+        'license.unlock_pro_features': 'Unlock Pro features',
         'license.current_plan': 'Current plan',
         'license.pro_plan': 'Pro plan',
         'license.membership': 'Membership',
@@ -222,7 +250,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.submit': 'Activate',
         'license.verifying': 'Verifying...',
         'license.enter_from_email': 'Enter the license key you received by email.',
-        'license.enter_from_youtube': 'Enter the key from the members-only community.',
+        'license.enter_from_youtube': 'Enter this month’s key copied from the members-only post.',
         'license.help_link': 'License · payment help',
         'license.youtube_membership_howto': 'How to use',
         'license.youtube_membership_step_1': 'Join the Designbase YouTube channel membership.',
@@ -329,6 +357,20 @@ const FIGMA_UI_TRANSLATIONS = {
         'form.submit': '有効化',
         'form.verifying': '確認中...',
         'license.youtube_membership': 'YouTubeメンバーシップ',
+        'license.unlock_unlimited': '無制限アクセスを有効化',
+        'license.unlock_unlimited_description': 'ライセンスキーを登録すると、DesignbaseプラグインのPro機能を無制限で利用できます。',
+        'license.get_key_title': 'ライセンスキーを取得',
+        'license.get_key_description': 'メンバーには毎月新しいライセンスキーが提供されます。',
+        'license.get_key_step_1_title': 'メンバーシップに参加',
+        'license.get_key_step_1_description': 'Designbase YouTubeチャンネルのメンバーシップに参加します。',
+        'license.get_key_step_2_title': '今月のキーをコピー',
+        'license.get_key_step_2_description': 'メンバー限定コミュニティの投稿でキーを確認します。',
+        'license.get_key_step_3_title': 'キーを登録',
+        'license.get_key_step_3_description': '下の入力欄に貼り付けるとPro機能が利用できます。',
+        'license.get_key_cta': '参加してライセンスキーを取得',
+        'license.activate_key_title': 'ライセンスキーを登録',
+        'license.activate_key_description': 'キーをお持ちの場合は、下に貼り付けてPro機能を有効化してください。',
+        'license.unlock_pro_features': 'Pro機能を有効化',
         'license.current_plan': '現在のプラン',
         'license.pro_plan': 'Proプラン',
         'license.membership': 'メンバーシップ',
@@ -360,7 +402,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.submit': '有効化',
         'license.verifying': '確認中...',
         'license.enter_from_email': 'メールで受け取ったライセンスキーを入力してください。',
-        'license.enter_from_youtube': 'メンバー限定コミュニティのキーを入力してください。',
+        'license.enter_from_youtube': 'メンバー限定投稿からコピーした今月のキーを入力してください。',
         'license.help_link': 'ライセンス・支払いヘルプ',
         'license.youtube_membership_howto': '利用方法',
         'license.youtube_membership_step_1': 'Designbase YouTubeチャンネルのメンバーシップに参加します。',
@@ -1489,19 +1531,34 @@ const LicenseOffer = ({ joinUrl, guideUrl, membershipUrl, t, locale, className,
     const titleId = `designbase-license-offer-title-${useId().replace(/:/g, '')}`;
     const resolvedJoinUrl = joinUrl || membershipUrl;
     const steps = [
-        resolveText(translate, { key: 'license.youtube_membership_step_1' }, 'Designbase YouTube 채널 멤버십에 가입합니다.'),
-        resolveText(translate, { key: 'license.youtube_membership_step_2' }, '멤버 전용 커뮤니티에서 이번 달 키를 복사합니다.'),
-        resolveText(translate, { key: 'license.youtube_membership_step_3' }, '아래 입력창에 키를 붙여 넣고 활성화합니다.'),
+        {
+            title: resolveText(translate, { key: 'license.get_key_step_1_title' }, '멤버십 가입'),
+            description: resolveText(translate, { key: 'license.get_key_step_1_description' }, 'Designbase YouTube 채널에서 멤버십에 가입합니다.'),
+        },
+        {
+            title: resolveText(translate, { key: 'license.get_key_step_2_title' }, '이번 달 키 복사'),
+            description: resolveText(translate, { key: 'license.get_key_step_2_description' }, '멤버 전용 커뮤니티 게시글에서 키를 확인합니다.'),
+        },
+        {
+            title: resolveText(translate, { key: 'license.get_key_step_3_title' }, '키 등록'),
+            description: resolveText(translate, { key: 'license.get_key_step_3_description' }, '아래 입력창에 붙여 넣으면 프로 기능이 열립니다.'),
+        },
     ];
     return (React.createElement("section", { className: `designbase-figma-license-offer ${className || ''}`, "aria-labelledby": titleId },
-        React.createElement("h3", { id: titleId, className: "designbase-figma-license-offer__title" }, resolveText(translate, { key: 'license.youtube_membership_howto' }, '이용 방법')),
+        React.createElement("header", { className: "designbase-figma-license-offer__header" },
+            React.createElement("span", { className: "designbase-figma-license-offer__section-index", "aria-hidden": "true" }, "1"),
+            React.createElement("div", null,
+                React.createElement("h3", { id: titleId, className: "designbase-figma-license-offer__title" }, resolveText(translate, { key: 'license.get_key_title' }, '라이선스 키 받기')),
+                React.createElement("p", { className: "designbase-figma-license-offer__description" }, resolveText(translate, { key: 'license.get_key_description' }, '멤버십 회원에게 매월 새 라이선스 키가 제공됩니다.')))),
         React.createElement("ol", { className: "designbase-figma-license-offer__steps" }, steps.map((step, index) => (React.createElement("li", { key: index },
-            React.createElement("span", { className: "designbase-figma-license-offer__step-index", "aria-hidden": "true" },
-                index + 1,
-                "."),
-            React.createElement("span", null, step))))),
+            React.createElement("span", { className: "designbase-figma-license-offer__step-index", "aria-hidden": "true" }, index + 1),
+            React.createElement("span", { className: "designbase-figma-license-offer__step-copy" },
+                React.createElement("strong", null, step.title),
+                React.createElement("span", null, step.description)))))),
         (resolvedJoinUrl || guideUrl) && (React.createElement("div", { className: "designbase-figma-license-offer__actions" },
-            resolvedJoinUrl && (React.createElement(Button, { onPress: () => openExternalUrl(resolvedJoinUrl), variant: "primary", size: "m", fullWidth: true }, resolveText(translate, { key: 'license.youtube_membership_join' }, '멤버십 가입'))),
+            resolvedJoinUrl && (React.createElement(Button, { onPress: () => openExternalUrl(resolvedJoinUrl), variant: "primary", size: "m", fullWidth: true },
+                React.createElement("span", null, resolveText(translate, { key: 'license.get_key_cta' }, '멤버십 가입하고 키 받기')),
+                React.createElement(ExternalLinkIcon, { size: 16, "aria-hidden": "true" }))),
             guideUrl && (React.createElement(Button, { onPress: () => openExternalUrl(guideUrl), variant: "secondary", size: "m", fullWidth: true },
                 React.createElement("span", null, resolveText(translate, { key: 'license.youtube_membership_guide' }, '안내보기')),
                 React.createElement(ExternalLinkIcon, { size: 16, "aria-hidden": "true" })))))));
@@ -1933,7 +1990,7 @@ function useFigmaLicenseBridge(options = {}) {
 function formatUsageLabel(state, t) {
     const { remainingUsage, usageUsed, usageLimit, usageReset } = state;
     if (usageLimit === 'unlimited') {
-        return resolveText(t, { key: 'license.usage_unlimited' }, '사용 횟수 제한 없음') ?? '사용 횟수 제한 없음';
+        return (resolveText(t, { key: 'license.usage_unlimited' }, '사용 횟수 제한 없음') ?? '사용 횟수 제한 없음');
     }
     const limit = typeof usageLimit === 'number' ? usageLimit : remainingUsage + usageUsed;
     const remaining = remainingUsage ?? Math.max(0, limit - usageUsed);
@@ -1952,7 +2009,7 @@ function formatUsageLabel(state, t) {
         const translated = resolveText(t, { key: 'license.usage_weekly', values: { remaining, limit } }, fallback) ?? fallback;
         return translated.includes(String(remaining)) ? translated : fallback;
     }
-    return resolveText(t, { key: 'license.usage_generic', values: { remaining, limit } }, `남은 횟수 ${remaining}/${limit}`) ?? `남은 횟수 ${remaining}/${limit}`;
+    return (resolveText(t, { key: 'license.usage_generic', values: { remaining, limit } }, `남은 횟수 ${remaining}/${limit}`) ?? `남은 횟수 ${remaining}/${limit}`);
 }
 const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicenseKey = '', licenseStatus: initialLicenseStatus, licenseSource: initialLicenseSource, accessScope: initialAccessScope, expiresAt: initialExpiresAt, lastVerifiedAt: initialLastVerifiedAt, wordpressLinks, paymentPageUrl, mode = 'pricing', membershipUrl, enableAccountAuth = true, showLicenseKeyInput = true, pricingFeatures, pricing, paymentType = 'subscription', messageTypes, onStateChange, setPaymentStatus, setUsageCount, onLicenseSubmit, usageCount: initialUsageCount = 0, t, locale, className, }) => {
     const { t: translate } = useFigmaUiI18n(locale, t);
@@ -2001,20 +2058,22 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
         React.createElement("div", { className: "designbase-figma-page-license__content" },
             React.createElement("div", { className: "designbase-figma-page-license__header" },
                 React.createElement("div", { className: "designbase-figma-page-license__title" },
-                    React.createElement("h2", null, isMembershipMode
-                        ? resolveText(translate, { key: 'license.youtube_membership' }, 'YouTube 멤버십')
-                        : isPaid
-                            ? resolveText(translate, { key: 'license.pro_account' }, '프로 계정')
+                    React.createElement("h2", null, isPaid
+                        ? resolveText(translate, { key: 'license.pro_account' }, '프로 계정')
+                        : isMembershipMode
+                            ? resolveText(translate, { key: 'license.unlock_unlimited' }, '무제한 사용 활성화')
                             : resolveText(translate, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드')),
                     isPaid && (React.createElement("span", { className: "designbase-figma-page-license__tier" }, resolveText(translate, { key: 'license.pro_plan' }, '프로 플랜')))),
                 React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
                     ? resolveText(translate, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
                     : isMembershipMode
-                        ? resolveText(translate, { key: 'license.youtube_membership_description' }, 'YouTube 멤버십에 가입하면 Designbase 플러그인을 무제한으로 사용할 수 있습니다.')
+                        ? resolveText(translate, { key: 'license.unlock_unlimited_description' }, '라이선스 키를 등록하면 모든 Designbase 플러그인의 프로 기능과 무제한 사용을 이용할 수 있습니다.')
                         : resolveText(translate, { key: 'license.purchase_for_unlimited' }, '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.')),
                 !isPaid && !isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel))),
             !isMembershipMode && (React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: translate })),
-            state.lastMessage && state.lastErrorCode && !state.deactivateMessage && (React.createElement("p", { className: `designbase-figma-page-license__feedback ${state.lastErrorCode ? 'designbase-figma-page-license__feedback--error' : ''}`, "aria-live": "polite" }, state.lastMessage)),
+            state.lastMessage &&
+                state.lastErrorCode &&
+                !state.deactivateMessage && (React.createElement("p", { className: `designbase-figma-page-license__feedback ${state.lastErrorCode ? 'designbase-figma-page-license__feedback--error' : ''}`, "aria-live": "polite" }, state.lastMessage)),
             isPaid && (React.createElement("div", { className: "designbase-figma-page-license__paid-summary" },
                 React.createElement("div", { className: "designbase-figma-page-license__paid-hero" },
                     React.createElement("span", { "aria-hidden": "true" }, "\u221E"),
@@ -2041,7 +2100,8 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                     React.createElement("p", { className: "designbase-figma-page-license__deactivate-hint" }, resolveText(translate, { key: 'license.deactivate_hint' }, '이 기기에서 라이선스 연결을 해제합니다.'))))),
             !isPaid && (React.createElement(React.Fragment, null,
                 isMembershipMode && (React.createElement(LicenseOffer, { joinUrl: links.membershipUrl || links.purchaseUrl, guideUrl: links.helpUrl || links.purchaseUrl, t: translate })),
-                !isMembershipMode && (enableAccountAuth || links.purchaseUrl || links.accountUrl) && (React.createElement("div", { className: "designbase-figma-page-license__section" },
+                !isMembershipMode &&
+                    (enableAccountAuth || links.purchaseUrl || links.accountUrl) && (React.createElement("div", { className: "designbase-figma-page-license__section" },
                     React.createElement("div", { className: "designbase-figma-page-license__section-header" },
                         React.createElement("h3", null, resolveText(translate, { key: 'license.designbase_account' }, '디자인베이스 계정'))),
                     React.createElement("p", { className: "designbase-figma-page-license__hint" }, resolveText(translate, { key: 'license.designbase_account_hint' }, 'WordPress 계정으로 로그인하거나 멤버십을 구매하면 플러그인이 자동으로 활성화됩니다.')),
@@ -2059,8 +2119,20 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                         ? 'designbase-figma-page-license__key-form'
                         : 'designbase-figma-page-license__section' },
                     React.createElement("div", { className: "designbase-figma-page-license__section-header" },
-                        React.createElement("h3", null, resolveText(translate, { key: 'license.enter_key' }, '라이선스 키 입력'))),
-                    React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isVerifying, value: licenseKeyDraft, onValueChange: handleLicenseKeyChange, label: { key: 'license.key' }, submitText: { key: 'license.submit' }, submittingText: { key: 'license.verifying' }, helperText: { key: isMembershipMode ? 'license.enter_from_youtube' : 'license.enter_from_email' }, t: translate }))))),
+                        isMembershipMode && (React.createElement("span", { className: "designbase-figma-page-license__section-index", "aria-hidden": "true" }, "2")),
+                        React.createElement("h3", null, isMembershipMode
+                            ? resolveText(translate, { key: 'license.activate_key_title' }, '라이선스 키 등록')
+                            : resolveText(translate, { key: 'license.enter_key' }, '라이선스 키 입력'))),
+                    isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__hint" }, resolveText(translate, { key: 'license.activate_key_description' }, '이미 키가 있다면 아래에 붙여 넣어 프로 기능을 활성화하세요.'))),
+                    React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isVerifying, value: licenseKeyDraft, onValueChange: handleLicenseKeyChange, label: { key: 'license.key' }, submitText: {
+                            key: isMembershipMode
+                                ? 'license.unlock_pro_features'
+                                : 'license.submit',
+                        }, submittingText: { key: 'license.verifying' }, helperText: {
+                            key: isMembershipMode
+                                ? 'license.enter_from_youtube'
+                                : 'license.enter_from_email',
+                        }, t: translate }))))),
             links.helpUrl && !isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__disclaimer" },
                 React.createElement("button", { type: "button", className: "designbase-figma-page-license__link", onClick: () => openExternalUrl(links.helpUrl) }, resolveText(translate, { key: 'license.help_link' }, '라이선스·결제 도움말'))))),
         React.createElement(Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", iconOnly: true, "aria-label": translate('close') },