@designbasekorea/ui 0.1.37 → 0.1.39

package/dist/index.umd.js

@@ -2263,6 +2263,80 @@
     });
     Button.displayName = 'Button';
 
+    const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText, onCtaClick, onClose, autoClose = false, closeDelay = 5000, icon, className, }) => {
+        const [isVisible, setIsVisible] = React.useState(true);
+        const [progress, setProgress] = React.useState(100);
+        React.useEffect(() => {
+            if (autoClose) {
+                const interval = setInterval(() => {
+                    setProgress(prev => {
+                        const newProgress = prev - (100 / (closeDelay / 100));
+                        if (newProgress <= 0) {
+                            handleClose();
+                            clearInterval(interval);
+                            return 0;
+                        }
+                        return newProgress;
+                    });
+                }, 100);
+                return () => clearInterval(interval);
+            }
+        }, [autoClose, closeDelay]);
+        const handleClose = () => {
+            setIsVisible(false);
+            onClose?.();
+        };
+        const handleCtaClick = () => {
+            onCtaClick?.();
+        };
+        if (!isVisible)
+            return null;
+        const classes = clsx('designbase-ad-banner', `designbase-ad-banner--type-${type}`, `designbase-ad-banner--variant-${variant}`, {
+            'designbase-ad-banner--auto-close': autoClose,
+        }, className);
+        // 기본 아이콘
+        const defaultIcons = {
+            hero: jsxRuntime.jsx(icons.StarIcon, { size: 24 }),
+            topbar: jsxRuntime.jsx(icons.TrendingUpIcon, { size: 24 }),
+            card: jsxRuntime.jsx(icons.StarFilledIcon, { size: 32 }),
+            floating: jsxRuntime.jsx(icons.CartIcon, { size: 28 }),
+        };
+        const displayIcon = icon || defaultIcons[type];
+        const displayTitle = title || getDefaultTitle(type);
+        const displaySubtitle = subtitle || getDefaultSubtitle(type);
+        const displayCtaText = ctaText || getDefaultCtaText(type);
+        return (jsxRuntime.jsx("div", { className: classes, children: jsxRuntime.jsxs("div", { className: "designbase-ad-banner__content", children: [jsxRuntime.jsx("button", { className: "designbase-ad-banner__close", onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: jsxRuntime.jsx(icons.CloseIcon, { size: type === 'hero' ? 20 : 18 }) }), type === 'hero' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--top" }), jsxRuntime.jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--bottom" })] })), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__main", children: [jsxRuntime.jsxs("div", { className: "designbase-ad-banner__icon", children: [displayIcon, type === 'topbar' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__label", children: "\uD2B9\uBCC4 \uC774\uBCA4\uD2B8" })), type === 'floating' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__badge", children: "HOT DEAL" }))] }), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__text", children: [jsxRuntime.jsx("h2", { className: "designbase-ad-banner__title", children: displayTitle }), jsxRuntime.jsx("p", { className: "designbase-ad-banner__subtitle", children: displaySubtitle })] }), jsxRuntime.jsx("div", { className: "designbase-ad-banner__actions", children: jsxRuntime.jsxs(Button, { variant: "primary", size: type === 'hero' ? 'l' : type === 'card' ? 's' : 'm', onPress: handleCtaClick, className: "designbase-ad-banner__cta", fullWidth: type === 'floating', children: [displayCtaText, jsxRuntime.jsx(icons.ArrowRightIcon, { size: type === 'hero' ? 20 : 16 })] }) })] }), autoClose && (jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress", children: jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress-bar", style: { width: `${progress}%` } }) }))] }) }));
+    };
+    // 기본 텍스트 헬퍼
+    function getDefaultTitle(type) {
+        const titles = {
+            hero: '지금 바로 시작하세요',
+            topbar: '🎉 신규 가입 시 10,000원 적립금 증정!',
+            card: '프리미엄 멤버십',
+            floating: '오늘만 특가!',
+        };
+        return titles[type];
+    }
+    function getDefaultSubtitle(type) {
+        const subtitles = {
+            hero: '최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!',
+            topbar: '오늘 하루만 특별 혜택',
+            card: '무제한 서비스 이용권을 특별가에 만나보세요',
+            floating: '장바구니에 담긴 상품 추가 20% 할인',
+        };
+        return subtitles[type];
+    }
+    function getDefaultCtaText(type) {
+        const ctaTexts = {
+            hero: '자세히 보기',
+            topbar: '지금 가입하기',
+            card: '알아보기',
+            floating: '할인받기',
+        };
+        return ctaTexts[type];
+    }
+    AdBanner.displayName = 'AdBanner';
+
     const Alert = ({ title, children, variant = 'info', size = 'm', showIcon = true, closable = true, actions, actionButtons, onClose, className, ...props }) => {
         const [isVisible, setIsVisible] = React.useState(true);
         const handleClose = () => {
@@ -8544,70 +8618,70 @@
             }) }));
     };
 
-    // Designbase 테마 변수 기반 색상 계열
+    // Designbase 테마 기반 색상 계열 (hex 값 사용)
     const colorSchemes = {
         primary: [
-            'var(--color-foundation-blue-400)',
-            'var(--color-foundation-blue-500)',
-            'var(--color-foundation-blue-600)',
-            'var(--color-foundation-indigo-500)',
-            'var(--color-foundation-indigo-600)',
+            '#48c3ff', // blue-400
+            '#1ea2ff', // blue-500
+            '#0683ff', // blue-600
+            '#006fff', // blue-700
+            '#0855c5', // blue-800
         ],
         secondary: [
-            'var(--color-foundation-gray-400)',
-            'var(--color-foundation-gray-500)',
-            'var(--color-foundation-gray-600)',
-            'var(--color-foundation-slate-500)',
-            'var(--color-foundation-slate-600)',
+            '#a4adb2', // neutral-400
+            '#8c9499', // neutral-500
+            '#757b80', // neutral-600
+            '#5e6366', // neutral-700
+            '#464a4d', // neutral-800
         ],
         success: [
-            'var(--color-foundation-green-400)',
-            'var(--color-foundation-green-500)',
-            'var(--color-foundation-green-600)',
-            'var(--color-foundation-emerald-500)',
-            'var(--color-foundation-teal-500)',
+            '#4ade80', // green-400
+            '#22c55e', // green-500
+            '#16a34a', // green-600
+            '#14b8a6', // teal-500
+            '#0d9485', // teal-600
         ],
         warning: [
-            'var(--color-foundation-amber-400)',
-            'var(--color-foundation-amber-500)',
-            'var(--color-foundation-orange-400)',
-            'var(--color-foundation-orange-500)',
-            'var(--color-foundation-yellow-500)',
+            '#ff8c32', // orange-400
+            '#ff6b0a', // orange-500
+            '#ff5100', // orange-600
+            '#ffe50d', // yellow-400
+            '#ffd600', // yellow-500
         ],
         error: [
-            'var(--color-foundation-red-400)',
-            'var(--color-foundation-red-500)',
-            'var(--color-foundation-red-600)',
-            'var(--color-foundation-rose-500)',
-            'var(--color-foundation-pink-500)',
+            '#f87171', // red-400
+            '#ef4444', // red-500
+            '#dc2626', // red-600
+            '#b91c1c', // red-700
+            '#991b1b', // red-800
         ],
         info: [
-            'var(--color-foundation-cyan-400)',
-            'var(--color-foundation-cyan-500)',
-            'var(--color-foundation-sky-400)',
-            'var(--color-foundation-sky-500)',
-            'var(--color-foundation-blue-400)',
+            '#48c3ff', // blue-400
+            '#1ea2ff', // blue-500
+            '#0683ff', // blue-600
+            '#006fff', // blue-700
+            '#0855c5', // blue-800
         ],
         purple: [
-            'var(--color-foundation-purple-400)',
-            'var(--color-foundation-purple-500)',
-            'var(--color-foundation-purple-600)',
-            'var(--color-foundation-violet-500)',
-            'var(--color-foundation-fuchsia-500)',
+            '#a385ff', // purple-400
+            '#8a58ff', // purple-500
+            '#7830f7', // purple-600
+            '#6a1ee3', // purple-700
+            '#5818bf', // purple-800
         ],
         ocean: [
-            'var(--color-foundation-blue-500)',
-            'var(--color-foundation-cyan-500)',
-            'var(--color-foundation-teal-500)',
-            'var(--color-foundation-sky-500)',
-            'var(--color-foundation-indigo-500)',
+            '#1ea2ff', // blue-500
+            '#48c3ff', // blue-400
+            '#2dd4c2', // teal-400
+            '#14b8a6', // teal-500
+            '#0d9485', // teal-600
         ],
         sunset: [
-            'var(--color-foundation-orange-400)',
-            'var(--color-foundation-orange-500)',
-            'var(--color-foundation-red-400)',
-            'var(--color-foundation-pink-400)',
-            'var(--color-foundation-rose-400)',
+            '#ff8c32', // orange-400
+            '#ff6b0a', // orange-500
+            '#ff5100', // orange-600
+            '#ef4444', // red-500
+            '#f87171', // red-400
         ],
     };
     const RandomGradient = ({ scheme = 'primary', width = '100%', height = '600px', blur = 60, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
@@ -11192,6 +11266,7 @@
     };
 
     exports.Accordion = Accordion;
+    exports.AdBanner = AdBanner;
     exports.Alert = Alert;
     exports.AnimationBackground = AnimationBackground;
     exports.AnimationText = AnimationText;