@designbasekorea/ui 0.2.9 → 0.2.12

package/dist/index.js

@@ -10855,8 +10855,11 @@ Table.displayName = 'Table';
 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) {
@@ -10928,18 +10931,126 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
         }
     }, [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}`, {
@@ -10947,8 +11058,9 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
     }, 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;