@designbasekorea/ui 0.2.9 → 0.2.12

package/dist/index.umd.js

@@ -10854,8 +10854,11 @@
     const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal', size = 'm', fullWidth = false, variant = 'default', className, onTabChange, ...props }) => {
         const [activeTabId, setActiveTabId] = React.useState(selectedId ?? defaultSelectedId ?? items[0]?.id ?? '');
         const [focusedTabId, setFocusedTabId] = React.useState('');
+        const [isDragging, setIsDragging] = React.useState(false);
         const tabListRef = React.useRef(null);
         const tabRefs = React.useRef(new Map());
+        const dragStartRef = React.useRef(null);
+        const clickStartRef = React.useRef(null);
         // 제어 컴포넌트 처리
         React.useEffect(() => {
             if (selectedId !== undefined) {
@@ -10927,18 +10930,126 @@
             }
         }, [items, orientation]);
         const handleTabSelect = React.useCallback((tabId) => {
+            // 드래그 중이면 탭 선택 무시
+            if (isDragging)
+                return;
             const tab = items.find(item => item.id === tabId);
             if (tab && !tab.disabled) {
                 setActiveTabId(tabId);
                 onTabChange?.(tabId);
             }
-        }, [items, onTabChange]);
+        }, [items, onTabChange, isDragging]);
         const handleTabFocus = React.useCallback((tabId) => {
             setFocusedTabId(tabId);
         }, []);
         const handleTabBlur = React.useCallback(() => {
             setFocusedTabId('');
         }, []);
+        // 드래그 스크롤 핸들러들
+        const handleMouseDown = React.useCallback((e) => {
+            if (orientation !== 'horizontal' || !tabListRef.current)
+                return;
+            // 클릭 시작 위치와 시간 기록
+            clickStartRef.current = {
+                x: e.pageX,
+                y: e.pageY,
+                time: Date.now()
+            };
+            dragStartRef.current = {
+                x: e.pageX - tabListRef.current.offsetLeft,
+                scrollLeft: tabListRef.current.scrollLeft
+            };
+        }, [orientation]);
+        const handleMouseMove = React.useCallback((e) => {
+            if (!dragStartRef.current || !tabListRef.current)
+                return;
+            // 아직 드래그가 시작되지 않았다면 드래그 시작 여부 판단
+            if (!isDragging && clickStartRef.current) {
+                const deltaX = Math.abs(e.pageX - clickStartRef.current.x);
+                const deltaY = Math.abs(e.pageY - clickStartRef.current.y);
+                const deltaTime = Date.now() - clickStartRef.current.time;
+                // 5px 이상 이동하거나 200ms 이상 지났으면 드래그 시작
+                if (deltaX > 5 || deltaY > 5 || deltaTime > 200) {
+                    setIsDragging(true);
+                }
+            }
+            if (!isDragging || !dragStartRef.current)
+                return;
+            e.preventDefault();
+            const x = e.pageX - tabListRef.current.offsetLeft;
+            const walk = (x - dragStartRef.current.x) * 2; // 스크롤 속도 조절
+            tabListRef.current.scrollLeft = dragStartRef.current.scrollLeft - walk;
+        }, [isDragging]);
+        const handleMouseUp = React.useCallback(() => {
+            setIsDragging(false);
+            dragStartRef.current = null;
+            clickStartRef.current = null;
+        }, []);
+        const handleMouseLeave = React.useCallback(() => {
+            setIsDragging(false);
+            dragStartRef.current = null;
+            clickStartRef.current = null;
+        }, []);
+        // 터치 이벤트 핸들러들
+        const handleTouchStart = React.useCallback((e) => {
+            if (orientation !== 'horizontal' || !tabListRef.current)
+                return;
+            const touch = e.touches[0];
+            // 클릭 시작 위치와 시간 기록
+            clickStartRef.current = {
+                x: touch.pageX,
+                y: touch.pageY,
+                time: Date.now()
+            };
+            dragStartRef.current = {
+                x: touch.pageX - tabListRef.current.offsetLeft,
+                scrollLeft: tabListRef.current.scrollLeft
+            };
+        }, [orientation]);
+        const handleTouchMove = React.useCallback((e) => {
+            if (!dragStartRef.current || !tabListRef.current)
+                return;
+            // 아직 드래그가 시작되지 않았다면 드래그 시작 여부 판단
+            if (!isDragging && clickStartRef.current) {
+                const touch = e.touches[0];
+                const deltaX = Math.abs(touch.pageX - clickStartRef.current.x);
+                const deltaY = Math.abs(touch.pageY - clickStartRef.current.y);
+                const deltaTime = Date.now() - clickStartRef.current.time;
+                // 5px 이상 이동하거나 200ms 이상 지났으면 드래그 시작
+                if (deltaX > 5 || deltaY > 5 || deltaTime > 200) {
+                    setIsDragging(true);
+                }
+            }
+            if (!isDragging || !dragStartRef.current)
+                return;
+            e.preventDefault();
+            const touch = e.touches[0];
+            const x = touch.pageX - tabListRef.current.offsetLeft;
+            const walk = (x - dragStartRef.current.x) * 2; // 스크롤 속도 조절
+            tabListRef.current.scrollLeft = dragStartRef.current.scrollLeft - walk;
+        }, [isDragging]);
+        const handleTouchEnd = React.useCallback(() => {
+            setIsDragging(false);
+            dragStartRef.current = null;
+            clickStartRef.current = null;
+        }, []);
+        // 드래그 이벤트 리스너 등록/해제
+        React.useEffect(() => {
+            if (isDragging) {
+                document.addEventListener('mousemove', handleMouseMove);
+                document.addEventListener('mouseup', handleMouseUp);
+                document.addEventListener('mouseleave', handleMouseLeave);
+                document.addEventListener('touchmove', handleTouchMove, { passive: false });
+                document.addEventListener('touchend', handleTouchEnd);
+            }
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                document.removeEventListener('mouseleave', handleMouseLeave);
+                document.removeEventListener('touchmove', handleTouchMove);
+                document.removeEventListener('touchend', handleTouchEnd);
+            };
+        }, [isDragging, handleMouseMove, handleMouseUp, handleMouseLeave, handleTouchMove, handleTouchEnd]);
         const activeTab = items.find(item => item.id === activeTabId);
         items.findIndex(item => item.id === activeTabId);
         const classes = clsx('designbase-tabs', `designbase-tabs--${orientation}`, `designbase-tabs--${size}`, `designbase-tabs--${variant}`, {
@@ -10946,8 +11057,9 @@
         }, className);
         const tabListClasses = clsx('designbase-tabs__list', `designbase-tabs__list--${orientation}`, {
             'designbase-tabs__list--full-width': fullWidth,
+            'designbase-tabs__list--dragging': isDragging,
         });
-        return (jsxRuntime.jsxs("div", { className: classes, ...props, children: [jsxRuntime.jsx("div", { ref: tabListRef, className: tabListClasses, role: "tablist", "aria-orientation": orientation, "aria-label": "\uD0ED \uBAA9\uB85D", children: items.map((item, index) => {
+        return (jsxRuntime.jsxs("div", { className: classes, ...props, children: [jsxRuntime.jsx("div", { ref: tabListRef, className: tabListClasses, role: "tablist", "aria-orientation": orientation, "aria-label": "\uD0ED \uBAA9\uB85D", onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: items.map((item, index) => {
                         const isSelected = item.id === activeTabId;
                         const isFocused = item.id === focusedTabId;
                         const isDisabled = item.disabled;