@designbasekorea/ui 0.1.37 → 0.1.39

package/dist/index.js

@@ -2264,6 +2264,80 @@ const Button = React.forwardRef(({ variant = 'primary', size = 'm', radius, full
 });
 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 = () => {
@@ -8545,70 +8619,70 @@ const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0,
         }) }));
 };
 
-// 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, }) => {
@@ -11193,6 +11267,7 @@ const toggleTheme = () => {
 };
 
 exports.Accordion = Accordion;
+exports.AdBanner = AdBanner;
 exports.Alert = Alert;
 exports.AnimationBackground = AnimationBackground;
 exports.AnimationText = AnimationText;