@designbasekorea/ui 0.1.34 → 0.1.35

package/dist/index.umd.js

@@ -5100,6 +5100,76 @@
     };
     Confirm.displayName = 'Confirm';
 
+    const Countdown = ({ endDate, duration, size = 'm', variant = 'default', showDays = true, showHours = true, showMinutes = true, showSeconds = true, showLabels = true, labels = {
+        days: '일',
+        hours: '시간',
+        minutes: '분',
+        seconds: '초',
+    }, onComplete, onTick, className, }) => {
+        // 종료 시간 계산
+        const targetTime = React.useMemo(() => {
+            if (endDate) {
+                return typeof endDate === 'string' ? new Date(endDate).getTime() : endDate.getTime();
+            }
+            if (duration) {
+                return Date.now() + duration * 1000;
+            }
+            return Date.now();
+        }, [endDate, duration]);
+        // 남은 시간 계산 함수
+        const calculateTimeRemaining = () => {
+            const now = Date.now();
+            const total = targetTime - now;
+            if (total <= 0) {
+                return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
+            }
+            const seconds = Math.floor((total / 1000) % 60);
+            const minutes = Math.floor((total / 1000 / 60) % 60);
+            const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
+            const days = Math.floor(total / (1000 * 60 * 60 * 24));
+            return { days, hours, minutes, seconds, total };
+        };
+        const [timeRemaining, setTimeRemaining] = React.useState(calculateTimeRemaining());
+        React.useEffect(() => {
+            const timer = setInterval(() => {
+                const newTimeRemaining = calculateTimeRemaining();
+                setTimeRemaining(newTimeRemaining);
+                onTick?.(newTimeRemaining);
+                if (newTimeRemaining.total <= 0) {
+                    clearInterval(timer);
+                    onComplete?.();
+                }
+            }, 1000);
+            return () => clearInterval(timer);
+        }, [targetTime, onComplete, onTick]);
+        const classes = clsx('designbase-countdown', `designbase-countdown--${size}`, `designbase-countdown--${variant}`, {
+            'designbase-countdown--with-labels': showLabels,
+            'designbase-countdown--expired': timeRemaining.total <= 0,
+        }, className);
+        // 숫자를 두 자리로 포맷
+        const formatNumber = (num) => {
+            return num.toString().padStart(2, '0');
+        };
+        const renderTimeUnit = (value, label, show) => {
+            if (!show)
+                return null;
+            return (jsxRuntime.jsxs("div", { className: "designbase-countdown__unit", children: [jsxRuntime.jsx("div", { className: "designbase-countdown__value", children: formatNumber(value) }), showLabels && (jsxRuntime.jsx("div", { className: "designbase-countdown__label", children: label }))] }));
+        };
+        const renderSeparator = () => {
+            if (variant === 'minimal')
+                return null;
+            return jsxRuntime.jsx("div", { className: "designbase-countdown__separator", children: ":" });
+        };
+        const units = [
+            { value: timeRemaining.days, label: labels.days || '일', show: showDays },
+            { value: timeRemaining.hours, label: labels.hours || '시간', show: showHours },
+            { value: timeRemaining.minutes, label: labels.minutes || '분', show: showMinutes },
+            { value: timeRemaining.seconds, label: labels.seconds || '초', show: showSeconds },
+        ].filter(unit => unit.show);
+        return (jsxRuntime.jsx("div", { className: classes, children: units.map((unit, index) => (jsxRuntime.jsxs(React.Fragment, { children: [renderTimeUnit(unit.value, unit.label, unit.show), index < units.length - 1 && renderSeparator()] }, unit.label))) }));
+    };
+    Countdown.displayName = 'Countdown';
+
     const Container = ({ size = 'l', maxWidth, variant = 'plain', padding = 'm', margin = 'none', backgroundColor, border = false, rounded = false, shadow = false, className, children, }) => {
         // 크기별 최대 폭 설정 (토큰 기반)
         const getMaxWidth = () => {
@@ -11024,6 +11094,7 @@
     exports.Confirm = Confirm;
     exports.Container = Container;
     exports.ContextMenu = ContextMenu;
+    exports.Countdown = Countdown;
     exports.DatePicker = DatePicker;
     exports.Divider = Divider;
     exports.Drawer = Drawer;