@designbasekorea/ui 0.3.2 → 0.3.3

package/dist/index.js

@@ -2196,9 +2196,13 @@ const Spinner = ({ type = 'circular', size = 'm', color, speed = 1, label = '로
 };
 Spinner.displayName = 'Spinner';
 
-const GAP$1 = 8; // 트리거와의 간격
-const ARW = 6; // 화살표 반쪽 길이(삼각형 변 길이)
-const PAD = 8; // 화살표가 박스 안에서 안전하게 보일 최소 여백
+const GAP$1 = 8; // 트리거와의 간격(박스)
+const ARW = 6; // border 삼각형 사이즈(너 SCSS에서 6px)
+const PAD = 8; // start/end 여백
+// ✅ 네가 말한 “-10이 되어야 제대로”를 상수로 고정
+const OUT = -10; // bottom일 때 top, right일 때 left
+// ✅ top/left는 대칭적으로 “박스에 살짝 겹치게” 만들어 seam 제거
+const INSET = 2; // (pRect.height - 2), (pRect.width - 2)
 const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'default', delay = 200, hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 240, showArrow = true, className, ...props }) => {
     const [visible, setVisible] = React.useState(false);
     const [style, setStyle] = React.useState({});
@@ -2217,115 +2221,110 @@ const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'd
     const groupOf = (p) => p.startsWith('top') ? 'top' :
         p.startsWith('bottom') ? 'bottom' :
             p.startsWith('left') ? 'left' : 'right';
-    // 위치 계산 (⚠️ 뷰포트 클램핑 후 화살표도 보정)
     const calculatePosition = React.useCallback(() => {
         if (!triggerRef.current || !tooltipRef.current)
             return;
         const tRect = triggerRef.current.getBoundingClientRect();
         const pRect = tooltipRef.current.getBoundingClientRect();
         let top = 0, left = 0;
-        // 1차: 이상적(미보정) 화살표 좌표
         let aTop = 0, aLeft = 0;
         switch (position) {
             case 'top':
                 top = tRect.top - pRect.height - GAP$1;
                 left = tRect.left + tRect.width / 2 - pRect.width / 2;
-                aTop = pRect.height;
+                aTop = pRect.height - INSET; // ✅ top은 박스 아래쪽에 살짝 겹침
                 aLeft = pRect.width / 2 - ARW;
                 break;
             case 'top-start':
                 top = tRect.top - pRect.height - GAP$1;
                 left = tRect.left;
-                aTop = pRect.height;
+                aTop = pRect.height - INSET;
                 aLeft = PAD;
                 break;
             case 'top-end':
                 top = tRect.top - pRect.height - GAP$1;
                 left = tRect.right - pRect.width;
-                aTop = pRect.height;
-                aLeft = pRect.width - PAD;
+                aTop = pRect.height - INSET;
+                aLeft = pRect.width - PAD - ARW;
                 break;
             case 'bottom':
                 top = tRect.bottom + GAP$1;
                 left = tRect.left + tRect.width / 2 - pRect.width / 2;
-                aTop = -ARW;
+                aTop = OUT; // ✅ 네 요구: -10
                 aLeft = pRect.width / 2 - ARW;
                 break;
             case 'bottom-start':
                 top = tRect.bottom + GAP$1;
                 left = tRect.left;
-                aTop = -ARW;
+                aTop = OUT; // ✅ -10
                 aLeft = PAD;
                 break;
             case 'bottom-end':
                 top = tRect.bottom + GAP$1;
                 left = tRect.right - pRect.width;
-                aTop = -ARW;
-                aLeft = pRect.width - PAD;
+                aTop = OUT; // ✅ -10
+                aLeft = pRect.width - PAD - ARW;
                 break;
             case 'left':
                 top = tRect.top + tRect.height / 2 - pRect.height / 2;
                 left = tRect.left - pRect.width - GAP$1;
                 aTop = pRect.height / 2 - ARW;
-                aLeft = pRect.width;
+                aLeft = pRect.width - INSET; // ✅ left는 박스 오른쪽에 살짝 겹침
                 break;
             case 'left-start':
                 top = tRect.top;
                 left = tRect.left - pRect.width - GAP$1;
                 aTop = PAD;
-                aLeft = pRect.width;
+                aLeft = pRect.width - INSET;
                 break;
             case 'left-end':
                 top = tRect.bottom - pRect.height;
                 left = tRect.left - pRect.width - GAP$1;
-                aTop = pRect.height - PAD;
-                aLeft = pRect.width;
+                aTop = pRect.height - PAD - ARW;
+                aLeft = pRect.width - INSET;
                 break;
             case 'right':
                 top = tRect.top + tRect.height / 2 - pRect.height / 2;
                 left = tRect.right + GAP$1;
                 aTop = pRect.height / 2 - ARW;
-                aLeft = -ARW;
+                aLeft = OUT; // ✅ 네 요구: left:-10
                 break;
             case 'right-start':
                 top = tRect.top;
                 left = tRect.right + GAP$1;
                 aTop = PAD;
-                aLeft = -ARW;
+                aLeft = OUT; // ✅ -10
                 break;
             case 'right-end':
                 top = tRect.bottom - pRect.height;
                 left = tRect.right + GAP$1;
-                aTop = pRect.height - PAD;
-                aLeft = -ARW;
+                aTop = pRect.height - PAD - ARW;
+                aLeft = OUT; // ✅ -10
                 break;
         }
-        // 뷰포트 클램핑
+        // 뷰포트 클램핑(툴팁 박스)
         const vw = window.innerWidth;
         const vh = window.innerHeight;
-        if (left < 8)
-            left = 8;
-        if (left + pRect.width > vw - 8)
-            left = vw - pRect.width - 8;
-        if (top < 8)
-            top = 8;
-        if (top + pRect.height > vh - 8)
-            top = vh - pRect.height - 8;
-        // 🔁 클램핑으로 박스 위치가 바뀌었을 수 있으니, 화살표를 박스 내부에서 다시 보정
+        const EDGE = 8;
+        if (left < EDGE)
+            left = EDGE;
+        if (left + pRect.width > vw - EDGE)
+            left = vw - pRect.width - EDGE;
+        if (top < EDGE)
+            top = EDGE;
+        if (top + pRect.height > vh - EDGE)
+            top = vh - pRect.height - EDGE;
+        // 클램핑으로 박스가 이동했을 때, 화살표가 트리거를 향하도록 보정
         const g = groupOf(position);
         if (g === 'top' || g === 'bottom') {
-            // 트리거 중앙 X 를 툴팁 좌표계로 변환
             const triggerCenterX = tRect.left + tRect.width / 2;
-            const localX = triggerCenterX - left - ARW; // 화살표 기준점을 고려
-            // 8px ~ (width-8px) 범위로 제한
-            aLeft = Math.min(pRect.width - PAD, Math.max(PAD, localX));
-            // aTop은 이미 위/아래에 고정(-ARW 또는 높이)
+            const localX = triggerCenterX - left - ARW;
+            aLeft = Math.min(pRect.width - PAD - ARW, Math.max(PAD, localX));
         }
         else {
             const triggerCenterY = tRect.top + tRect.height / 2;
             const localY = triggerCenterY - top - ARW;
-            aTop = Math.min(pRect.height - PAD, Math.max(PAD, localY));
-            // aLeft는 이미 좌/우에 고정(-ARW 또는 너비)
+            aTop = Math.min(pRect.height - PAD - ARW, Math.max(PAD, localY));
         }
         setStyle({
             position: 'fixed',
@@ -2333,17 +2332,15 @@ const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'd
             left,
             maxWidth,
             zIndex: 9999,
-            pointerEvents: 'none', // hover 유지
+            pointerEvents: 'none',
         });
         setArrowStyle({ position: 'absolute', top: aTop, left: aLeft });
         setPlacementGroup(g);
     }, [position, maxWidth]);
-    // 초기 페인트 전에 위치 확정
     React.useLayoutEffect(() => {
         if (visible || alwaysShow)
             calculatePosition();
     }, [visible, alwaysShow, calculatePosition]);
-    // 스크롤/리사이즈/크기변화 추적 (rAF 스로틀)
     React.useEffect(() => {
         if (!(visible || alwaysShow))
             return;
@@ -2374,7 +2371,6 @@ const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'd
                 cancelAnimationFrame(rafId.current);
         };
     }, [visible, alwaysShow, calculatePosition]);
-    // show/hide
     const show = React.useCallback(() => {
         if (disabled)
             return;
@@ -2388,10 +2384,12 @@ const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'd
         timers.current.t = setTimeout(() => setVisible(false), Math.max(0, hideDelay));
     }, [disabled, hideDelay]);
     React.useEffect(() => () => clearTimer(), []);
-    React.useEffect(() => { if (!disabled && alwaysShow)
-        setVisible(true);
-    else if (!alwaysShow)
-        setVisible(false); }, [alwaysShow, disabled]);
+    React.useEffect(() => {
+        if (!disabled && alwaysShow)
+            setVisible(true);
+        else if (!alwaysShow)
+            setVisible(false);
+    }, [alwaysShow, disabled]);
     const onKeyDown = React.useCallback((e) => {
         if (e.key === 'Escape') {
             clearTimer();
@@ -4919,23 +4917,7 @@ const Image$1 = ({ src, alt = '', ratio = 'auto', fit = 'cover', loading = 'lazy
             onError?.();
         }
     };
-    // aspect ratio 계산
-    const getAspectRatioStyle = () => {
-        if (ratio === 'auto')
-            return {};
-        const ratios = {
-            '1:1': '100%',
-            '16:9': '56.25%',
-            '4:3': '75%',
-            '3:2': '66.67%',
-            '3:4': '133.33%',
-            '2:1': '50%',
-            'auto': 'auto',
-        };
-        return {
-            paddingBottom: ratios[ratio],
-        };
-    };
+    // aspect ratio는 CSS 클래스로 처리되므로 인라인 스타일 불필요
     // 둥근 모서리 클래스 계산
     const getRoundedClass = () => {
         if (rounded === true)
@@ -4962,7 +4944,6 @@ const Image$1 = ({ src, alt = '', ratio = 'auto', fit = 'cover', loading = 'lazy
         height: fullHeight ? '100%' : height,
         maxWidth,
         maxHeight,
-        ...getAspectRatioStyle(),
     };
     const getRatioClass = () => {
         if (ratio === 'auto')
@@ -6319,7 +6300,7 @@ const ContextMenu = ({ items, open, x, y, onClose, className, }) => {
         }
         const hasSubMenu = item.subItems && item.subItems.length > 0;
         const isSubMenuOpen = activeSubMenu === item.id;
-        return (jsxRuntime.jsxs("div", { className: "designbase-context-menu__item-wrapper", children: [jsxRuntime.jsx(MenuItem, { id: item.id, label: item.label || '', icon: item.icon, onClick: () => handleItemClick(item), disabled: item.disabled, variant: item.variant, className: item.className }), hasSubMenu && (jsxRuntime.jsx("div", { ref: (el) => (subMenuRefs.current[item.id] = el), className: clsx('designbase-context-menu__submenu', {
+        return (jsxRuntime.jsxs("div", { className: "designbase-context-menu__item-wrapper", children: [jsxRuntime.jsx(MenuItem, { id: item.id, label: item.label || '', icon: item.icon, onClick: () => handleItemClick(item), disabled: item.disabled, variant: item.variant, className: item.className }), hasSubMenu && (jsxRuntime.jsx("div", { ref: (el) => { subMenuRefs.current[item.id] = el; }, className: clsx('designbase-context-menu__submenu', {
                         'designbase-context-menu__submenu--open': isSubMenuOpen,
                     }), onMouseEnter: () => setActiveSubMenu(item.id), onMouseLeave: handleSubMenuClose, children: item.subItems.map((subItem, subIndex) => renderMenuItem(subItem, subIndex)) }))] }, item.id));
     }, [activeSubMenu, handleItemClick, handleSubMenuOpen, handleSubMenuClose]);
@@ -8844,7 +8825,7 @@ const Masonry = ({ images, columns = 3, spacing = 'm', ratio = 'auto', fit = 'co
         'designbase-masonry--infinite-scroll': infiniteScroll,
     }, className);
     const distributedImages = distributeImages();
-    const renderImage = (image, index, columnIndex) => (jsxRuntime.jsxs("div", { ref: (el) => (imageRefs.current[index] = el), className: clsx('designbase-masonry__item', {
+    const renderImage = (image, index, columnIndex) => (jsxRuntime.jsxs("div", { ref: (el) => { imageRefs.current[index] = el; }, className: clsx('designbase-masonry__item', {
             'designbase-masonry__item--visible': visibleImages.includes(index),
         }), style: {
             animationDelay: `${index * animationDelay}ms`,
@@ -9557,15 +9538,16 @@ hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 300, showArrow
     const classes = clsx('designbase-popover', `designbase-popover--${size}`, `designbase-popover--${variant}`, `designbase-popover--${position}`, { 'designbase-popover--visible': isOpen, 'designbase-popover--disabled': disabled }, className);
     const arrowClasses = clsx('designbase-popover__arrow', `designbase-popover__arrow--${position}`);
     // 자식에 트리거 이벤트 주입
+    const childProps = children.props;
     const enhancedChildren = React.cloneElement(children, {
         ref: triggerRef,
-        onClick: (e) => { children.props.onClick?.(e); handleClick(e); },
-        onMouseEnter: (e) => { children.props.onMouseEnter?.(e); handleMouseEnter(); },
-        onMouseLeave: (e) => { children.props.onMouseLeave?.(e); handleMouseLeave(); },
-        onFocus: (e) => { children.props.onFocus?.(e); handleFocus(); },
-        onBlur: (e) => { children.props.onBlur?.(e); handleBlur(); },
-        onKeyDown: (e) => { children.props.onKeyDown?.(e); handleKeyDown(e); },
-        tabIndex: children.props.tabIndex ?? 0,
+        onClick: (e) => { childProps.onClick?.(e); handleClick(e); },
+        onMouseEnter: (e) => { childProps.onMouseEnter?.(e); handleMouseEnter(); },
+        onMouseLeave: (e) => { childProps.onMouseLeave?.(e); handleMouseLeave(); },
+        onFocus: (e) => { childProps.onFocus?.(e); handleFocus(); },
+        onBlur: (e) => { childProps.onBlur?.(e); handleBlur(); },
+        onKeyDown: (e) => { childProps.onKeyDown?.(e); handleKeyDown(e); },
+        tabIndex: childProps.tabIndex ?? 0,
         'aria-expanded': isOpen,
         'aria-haspopup': 'dialog',
     });
@@ -9616,16 +9598,20 @@ const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0,
             const status = getStepStatus(index, item.status);
             const isLast = index === items.length - 1;
             const isClickable = clickable && !disabled && !item.disabled;
+            // 연결선의 상태 결정: 현재 단계가 완료되었으면 completed로 표시
+            const prevStatus = index > 0 ? getStepStatus(index - 1, items[index - 1].status) : 'pending';
+            const connectorStatus = prevStatus === 'completed' ? 'completed' : status;
             const stepClasses = clsx('designbase-progress-step__item', `designbase-progress-step__item--${status}`, {
                 'designbase-progress-step__item--clickable': isClickable,
                 'designbase-progress-step__item--disabled': item.disabled,
             });
-            return (jsxRuntime.jsxs("div", { className: stepClasses, children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__indicator-container", children: [jsxRuntime.jsx("div", { className: "designbase-progress-step__indicator", onClick: () => handleStepClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 단계로 이동`, onKeyDown: (e) => {
+            const connectorClasses = clsx('designbase-progress-step__connector', `designbase-progress-step__connector--${connectorStatus}`);
+            return (jsxRuntime.jsxs("div", { className: stepClasses, children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__indicator-container", children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__indicator", onClick: () => handleStepClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 단계로 이동`, onKeyDown: (e) => {
                                     if (e.key === 'Enter' || e.key === ' ') {
                                         e.preventDefault();
                                         handleStepClick(item, index);
                                     }
-                                }, children: item.icon ? (jsxRuntime.jsx("div", { className: "designbase-progress-step__icon", children: item.icon })) : (jsxRuntime.jsx("span", { className: "designbase-progress-step__number", children: index + 1 })) }), !isLast && (jsxRuntime.jsx("div", { className: "designbase-progress-step__connector" }))] }), jsxRuntime.jsxs("div", { className: "designbase-progress-step__content", children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__header", children: [jsxRuntime.jsx("h3", { className: "designbase-progress-step__title", children: item.title }), item.timestamp && (jsxRuntime.jsx("span", { className: "designbase-progress-step__timestamp", children: item.timestamp }))] }), item.description && (jsxRuntime.jsx("p", { className: "designbase-progress-step__description", children: item.description }))] })] }, item.id));
+                                }, children: [status === 'active' && (jsxRuntime.jsx("div", { className: "designbase-progress-step__pulse" })), item.icon ? (jsxRuntime.jsx("div", { className: "designbase-progress-step__icon", children: item.icon })) : (jsxRuntime.jsx("span", { className: "designbase-progress-step__number", children: index + 1 }))] }), !isLast && (jsxRuntime.jsx("div", { className: connectorClasses }))] }), jsxRuntime.jsxs("div", { className: "designbase-progress-step__content", children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__header", children: [jsxRuntime.jsx("h3", { className: "designbase-progress-step__title", children: item.title }), item.timestamp && (jsxRuntime.jsx("span", { className: "designbase-progress-step__timestamp", children: item.timestamp }))] }), item.description && (jsxRuntime.jsx("p", { className: "designbase-progress-step__description", children: item.description }))] })] }, item.id));
         }) }));
 };
 
@@ -11385,7 +11371,7 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
 };
 Tabs.displayName = 'Tabs';
 
-const Timeline = ({ items, position = 'alternate', variant = 'default', size = 'm', color = 'primary', clickable = false, fullWidth = false, disabled = false, className, style, onItemClick, }) => {
+const Timeline = ({ items, type = 'alternate', variant = 'default', size = 'm', color = 'primary', clickable = false, fullWidth = false, disabled = false, className, style, onItemClick, }) => {
     const handleItemClick = (item, index) => {
         if (disabled || item.disabled || !clickable)
             return;
@@ -11393,20 +11379,13 @@ const Timeline = ({ items, position = 'alternate', variant = 'default', size = '
         onItemClick?.(item, index);
     };
     const getItemPosition = (index) => {
-        switch (position) {
-            case 'left':
-                return 'left';
-            case 'right':
-                return 'right';
-            case 'alternate':
-                return index % 2 === 0 ? 'left' : 'right';
-            case 'reverse-alternate':
-                return index % 2 === 0 ? 'right' : 'left';
-            default:
-                return 'left';
+        if (type === 'left') {
+            return 'left';
         }
+        // alternate 타입: 짝수는 왼쪽, 홀수는 오른쪽
+        return index % 2 === 0 ? 'left' : 'right';
     };
-    const classes = clsx('designbase-timeline', `designbase-timeline--${position}`, `designbase-timeline--${variant}`, `designbase-timeline--${size}`, {
+    const classes = clsx('designbase-timeline', `designbase-timeline--${type}`, `designbase-timeline--${variant}`, `designbase-timeline--${size}`, {
         'designbase-timeline--clickable': clickable,
         'designbase-timeline--full-width': fullWidth,
         'designbase-timeline--disabled': disabled,
@@ -11421,30 +11400,29 @@ const Timeline = ({ items, position = 'alternate', variant = 'default', size = '
                     'designbase-timeline__item--disabled': item.disabled,
                 });
                 const contentClasses = clsx('designbase-timeline__content', `designbase-timeline__content--${itemPosition}`);
-                const separatorClasses = clsx('designbase-timeline__separator', `designbase-timeline__separator--${itemPosition}`);
                 const dotClasses = clsx('designbase-timeline__dot', `designbase-timeline__dot--${itemColor}`, `designbase-timeline__dot--${variant}`, {
                     'designbase-timeline__dot--clickable': isClickable,
                 });
-                return (jsxRuntime.jsxs("div", { className: itemClasses, children: [jsxRuntime.jsx("div", { className: contentClasses, children: jsxRuntime.jsxs("div", { className: "designbase-timeline__content-inner", onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인 아이템`, onKeyDown: (e) => {
-                                    if (e.key === 'Enter' || e.key === ' ') {
-                                        e.preventDefault();
-                                        handleItemClick(item, index);
-                                    }
-                                }, children: [item.timestamp && (jsxRuntime.jsx("div", { className: "designbase-timeline__timestamp", children: item.timestamp })), jsxRuntime.jsx("h3", { className: "designbase-timeline__title", children: item.title }), item.description && (jsxRuntime.jsx("p", { className: "designbase-timeline__description", children: item.description }))] }) }), jsxRuntime.jsxs("div", { className: separatorClasses, children: [jsxRuntime.jsx("div", { className: dotClasses, onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인 점`, onKeyDown: (e) => {
+                return (jsxRuntime.jsxs("div", { className: itemClasses, children: [jsxRuntime.jsxs("div", { className: "designbase-timeline__indicator-container", children: [jsxRuntime.jsx("div", { className: dotClasses, onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인 점`, onKeyDown: (e) => {
                                         if (e.key === 'Enter' || e.key === ' ') {
                                             e.preventDefault();
                                             handleItemClick(item, index);
                                         }
-                                    }, children: item.icon ? (jsxRuntime.jsx("div", { className: "designbase-timeline__icon", children: item.icon })) : (jsxRuntime.jsx("div", { className: "designbase-timeline__dot-inner" })) }), !isLast && (jsxRuntime.jsx("div", { className: "designbase-timeline__connector" }))] })] }, item.id));
+                                    }, children: item.icon ? (jsxRuntime.jsx("div", { className: "designbase-timeline__icon", children: item.icon })) : (jsxRuntime.jsx("span", { className: "designbase-timeline__number", children: index + 1 })) }), !isLast && (jsxRuntime.jsx("div", { className: "designbase-timeline__connector" }))] }), jsxRuntime.jsx("div", { className: contentClasses, children: jsxRuntime.jsxs("div", { className: "designbase-timeline__content-inner", onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인 아이템`, onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        handleItemClick(item, index);
+                                    }
+                                }, children: [item.timestamp && (jsxRuntime.jsx("div", { className: "designbase-timeline__timestamp", children: item.timestamp })), jsxRuntime.jsx("h3", { className: "designbase-timeline__title", children: item.title }), item.description && (jsxRuntime.jsx("p", { className: "designbase-timeline__description", children: item.description }))] }) })] }, item.id));
             }) }) }));
 };
 
-const Toast = ({ id, status = 'info', title, description, icon: Icon, duration = 5000, showProgress = false, showCloseButton = true, position = 'top-right', onClose, className, }) => {
+const Toast = ({ id, status = 'info', title, description, icon: Icon, duration = 5000, showProgress = false, showCloseButton = true, onClose, className, }) => {
     const [isVisible, setIsVisible] = React.useState(false);
     const [progress, setProgress] = React.useState(100);
     const progressRef = React.useRef(null);
-    const timeoutRef = React.useRef();
-    const progressIntervalRef = React.useRef();
+    const timeoutRef = React.useRef(undefined);
+    const progressIntervalRef = React.useRef(undefined);
     // 토스트 표시 애니메이션
     React.useEffect(() => {
         const timer = setTimeout(() => setIsVisible(true), 50);
@@ -11490,7 +11468,7 @@ const Toast = ({ id, status = 'info', title, description, icon: Icon, duration =
             clearInterval(progressIntervalRef.current);
         handleClose();
     };
-    const classes = clsx('designbase-toast', `designbase-toast--${status}`, `designbase-toast--${position}`, {
+    const classes = clsx('designbase-toast', `designbase-toast--${status}`, {
         'designbase-toast--visible': isVisible,
         'designbase-toast--with-icon': Icon,
         'designbase-toast--with-description': description,
@@ -11552,7 +11530,7 @@ const useToast = () => {
     }
     return context;
 };
-const ToastProvider = ({ children }) => {
+const ToastProvider = ({ children, position = 'top-right' }) => {
     const [toasts, setToasts] = React.useState([]);
     const addToast = React.useCallback((toast) => {
         const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
@@ -11569,7 +11547,7 @@ const ToastProvider = ({ children }) => {
     const removeToast = React.useCallback((id) => {
         setToasts(prev => prev.filter(toast => toast.id !== id));
     }, []);
-    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, jsxRuntime.jsx(ToastContainer, { toasts: toasts, onRemoveToast: removeToast })] }));
+    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, jsxRuntime.jsx(ToastContainer, { toasts: toasts, position: position, onRemoveToast: removeToast })] }));
 };
 
 const Toggle = React.forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, size = 'm', children, className, onChange, ...props }, forwardedRef) => {