@watcha-authentic/react-slider 0.1.1 → 0.1.3

package/README.md

@@ -38,12 +38,49 @@ function App() {
       items={items}
       onItemKey={(item) => item.id}
       onCreateItemView={(item) => <div>{item.title}</div>}
-      onIndexChange={(newIndex) => console.log("Index changed:", newIndex)}
+      onIndexChange={(newIndex, cause) =>
+        console.log("Index changed:", newIndex, cause)
+      }
     />
   );
 }
 ```
 
+### Ref를 사용한 네비게이션
+
+`ref`를 통해 `doNext()`와 `doPrev()` 메서드를 사용하여 슬라이더를 제어할 수 있습니다.
+
+```tsx
+import { Slider, type SliderRef } from "@watcha-authentic/react-slider";
+import { useRef } from "react";
+
+function App() {
+  const sliderRef = useRef<SliderRef>(null);
+
+  const handlePrev = () => {
+    sliderRef.current?.doPrev();
+  };
+
+  const handleNext = () => {
+    sliderRef.current?.doNext();
+  };
+
+  return (
+    <>
+      <button onClick={handlePrev}>Previous</button>
+      <button onClick={handleNext}>Next</button>
+      <Slider
+        ref={sliderRef}
+        items={items}
+        onItemKey={(item) => item.id}
+        onCreateItemView={(item) => <div>{item.title}</div>}
+        defaultIndex={0}
+      />
+    </>
+  );
+}
+```
+
 ### 스타일 import
 
 CSS 스타일을 import하여 사용할 수 있습니다:
@@ -54,31 +91,64 @@ import "@watcha-authentic/react-slider/style.css";
 
 ### Context 사용
 
-```tsx
-import {
-  Slider,
-  SliderContextProvider,
-  useSliderContext,
-} from "@watcha-authentic/react-slider";
-
-function CustomNavigation() {
-  const { currentIndex, goToIndex } = useSliderContext();
+아이템 내부에서 슬라이더 컨텍스트를 사용하여 포커스 상태나 전환 애니메이션을 처리할 수 있습니다.
 
-  return (
-    <div>
-      <button onClick={() => goToIndex(currentIndex - 1)}>Previous</button>
-      <span>Current: {currentIndex}</span>
-      <button onClick={() => goToIndex(currentIndex + 1)}>Next</button>
-    </div>
-  );
+```tsx
+import { Slider, useSliderContext } from "@watcha-authentic/react-slider";
+
+function CustomItem({ item }: { item: { id: number; title: string } }) {
+  useSliderContext({
+    onFocus: (isAutoSlide) => {
+      console.log("Item focused", isAutoSlide);
+    },
+    onBlur: () => {
+      console.log("Item blurred");
+    },
+    onTransitionChange: (t, immediate) => {
+      // t: 0 ~ 1 사이의 값 (0: fade in, 1: fade out)
+      // immediate: true면 실시간 값 변경, false면 애니메이션 트리거 가능
+    },
+  });
+
+  return <div>{item.title}</div>;
 }
 
 function App() {
   return (
-    <SliderContextProvider>
-      <Slider items={items} onItemKey={(item) => item.id} onCreateItemView={(item) => <div>{item.title}</div>} />
-      <CustomNavigation />
-    </SliderContextProvider>
+    <Slider
+      items={items}
+      onItemKey={(item) => item.id}
+      onCreateItemView={(item) => <CustomItem item={item} />}
+    />
   );
 }
 ```
+
+## 주요 Props
+
+### `defaultIndex?: number`
+
+- 초기 인덱스를 설정합니다.
+- 기본값은 `0`입니다.
+- **참고**: `index` prop은 제거되었습니다. 슬라이더 제어는 `ref`의 `doNext()`와 `doPrev()` 메서드를 사용하거나 `onIndexChange` 콜백을 통해 처리하세요.
+
+### `ref: React.Ref<SliderRef>`
+
+- `SliderRef` 타입의 ref를 전달하면 다음 메서드에 접근할 수 있습니다:
+  - `doNext()`: 다음 슬라이드로 이동
+  - `doPrev()`: 이전 슬라이드로 이동
+- 또한 `HTMLUListElement`의 모든 속성과 메서드도 사용할 수 있습니다.
+
+### `onIndexChange?: (newIndex: number, cause: SlideTriggerEvent) => void`
+
+- 인덱스가 변경될 때 호출되는 콜백입니다.
+- `cause`: 슬라이드 원인 (`'swipe'`: 키보드 네비게이션, `'drag'`: 드래그/스와이프, `'pending'`: 초기 상태)
+
+### 기타 Props
+
+- `items`: 슬라이더에 표시할 아이템 배열
+- `onCreateItemView`: 각 아이템을 렌더링하는 함수
+- `onItemKey`: 각 아이템의 고유 키를 반환하는 함수
+- `animationDuration`: 애니메이션 지속 시간 (기본값: 500ms)
+- `enableDrag`: 드래그 기능 활성화 여부 (기본값: true)
+- `visibleCount`: 중앙 기준 좌우로 보여줄 요소 개수 (기본값: 1)

package/dist/cjs/component/view/slider.js

@@ -19,7 +19,7 @@ const _slidercontextprovider = require("../context/slider-context-provider");
  * - 드래그로 페이지 전환을 트리거하는 임계값 비율 (아이템 너비 기준)
  */ const CAN_SCROLL_THRESHOLD_RATIO = 0.15;
 const DEFAULT_SCROLL_THRESHOLD = 125;
-const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", defaultIndex = 0, enableDrag = true, estimateSizeFromEveryElements = false, gap = 0, index = defaultIndex, itemProps, contentProps, items, visibleCount = 1, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
+const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
     const stableOnIndexChange = (0, _reacteventcallback.useEventCallback)(onIndexChange);
     /**
    * - 아이템이 부족할 경우 복제하여 확장된 아이템 배열을 생성합니다.
@@ -58,7 +58,7 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
    */ const [enableScrollAnimator, setEnableScrollAnimator] = (0, _react.useState)(false);
     // slider 페이지 인덱스, 아이템 포지션 정보 등
     const [sliderInfo, setSliderInfo] = (0, _react.useState)({
-        currentIndex: index,
+        currentIndex: defaultIndex,
         elementStates: [],
         height: 0
     });
@@ -66,11 +66,30 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
     // 아이템 element ref 값
     const elementInfos = (0, _react.useRef)(new Map());
     // 콜백 호출용 인덱스 값
-    const prevCallbackIndexRef = (0, _react.useRef)(sliderInfo.currentIndex);
+    const prevCallbackIndex = (0, _react.useRef)(sliderInfo.currentIndex);
     // 드래그 임계값 (px, 동적으로 계산됨)
-    const canScrollThresholdRef = (0, _react.useRef)(DEFAULT_SCROLL_THRESHOLD);
-    const lastSlideTriggerEvent = (0, _react.useRef)("swipe");
-    (0, _react.useImperativeHandle)(ref, ()=>wrapRef.current, []);
+    const canScrollThreshold = (0, _react.useRef)(DEFAULT_SCROLL_THRESHOLD);
+    const lastSlideTriggerEvent = (0, _react.useRef)("pending");
+    const lastSliderInfoCurrentIndex = (0, _react.useRef)(sliderInfo.currentIndex);
+    const animateNow = (0, _react.useRef)(false);
+    const animateChecker = (0, _react.useRef)(undefined);
+    const capturedDefaultIndex = (0, _react.useRef)(defaultIndex);
+    const stopAnimateCheck = (0, _react.useCallback)(()=>{
+        clearTimeout(animateChecker.current);
+        animateChecker.current = undefined;
+    }, []);
+    const startAnimateCheck = (0, _react.useCallback)(()=>{
+        stopAnimateCheck();
+        return new Promise((resolve)=>{
+            animateChecker.current = setTimeout(()=>{
+                animateNow.current = false;
+                resolve();
+            }, animationDuration);
+        });
+    }, [
+        animationDuration,
+        stopAnimateCheck
+    ]);
     /**
    * - element reference 를 저장 합니다.
    */ const updateElement = (0, _react.useCallback)(({ elementInfo: { content, item }, index })=>{
@@ -202,7 +221,7 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
     /**
    * - 페이지를 기준으로 element 의 상태를 업데이트 합니다.
    * - currentIndex 도 함께 업데이트 합니다.
-   */ const updateStateByPageIndex = (0, _react.useCallback)(({ centerIndex, withAnimate = true })=>{
+   */ const updateStateByPageIndex = (0, _react.useCallback)(async ({ centerIndex, withAnimate = true })=>{
         setEnableScrollAnimator(withAnimate);
         setSliderInfo((prev)=>({
                 ...prev,
@@ -214,14 +233,20 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
                     prevStates: prev.elementStates
                 })
             }));
+        if (withAnimate) {
+            await startAnimateCheck();
+        } else {
+            stopAnimateCheck();
+        }
     }, [
-        getNewStatesByItems
+        getNewStatesByItems,
+        startAnimateCheck,
+        stopAnimateCheck
     ]);
     /**
    * - 포인터 드래그에 의해 레이아웃을 조정합니다.
    * - 뷰포트에 보여질 엘리먼트만 영향을 받습니다. (visibleCount 기준)
    */ const updateStateByDrag = (0, _react.useCallback)((diff)=>{
-        setEnableScrollAnimator(false);
         setSliderInfo((prev)=>{
             const { currentIndex } = prev;
             const { length } = extendedItems;
@@ -310,145 +335,59 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
         extendedItems,
         getNewStatesByItems
     ]);
-    /**
-   * - 첫로드 또는 리사이즈 이벤트가 실행되면, 초기 높이와 위치를 초기화 합니다.
-   */ (0, _react.useLayoutEffect)(()=>{
-        const handleResize = ()=>{
-            requestAnimationFrame(()=>{
-                if (!wrapRef.current) {
-                    console.error("Slider 필수 요소에 접근할 수 없습니다.");
-                    return;
-                }
-                // 높이, 드래그 임계값 계산
-                let estimatedHeight = 0;
-                let estimatedScrollThreshold = 0;
-                if (estimateSizeFromEveryElements) {
-                    for (const [, { content }] of elementInfos.current){
-                        if (content) {
-                            const rect = content.getBoundingClientRect();
-                            const { height } = rect;
-                            if (height > estimatedHeight) {
-                                estimatedHeight = height;
-                            }
-                            if (rect.width > estimatedScrollThreshold) {
-                                estimatedScrollThreshold = rect.width * CAN_SCROLL_THRESHOLD_RATIO;
-                            }
-                        }
-                    }
-                } else {
-                    const firstElementInfo = elementInfos.current.get(0);
-                    const rect = firstElementInfo?.content?.getBoundingClientRect();
-                    estimatedHeight = rect?.height ?? 0;
-                    estimatedScrollThreshold = (rect?.width ?? DEFAULT_SCROLL_THRESHOLD) * CAN_SCROLL_THRESHOLD_RATIO;
-                }
-                wrapRef.current.style.height = `${estimatedHeight}px`;
-                canScrollThresholdRef.current = estimatedScrollThreshold;
-                // 아이템 위치 계산
-                setSliderInfo((prevSliderInfo)=>{
-                    return {
-                        ...prevSliderInfo,
-                        elementStates: getNewStatesByItems({
-                            centerIndex: prevSliderInfo.currentIndex,
-                            itemIndexs: prevSliderInfo.elementStates.map((_, index)=>index),
-                            prevStates: prevSliderInfo.elementStates
-                        })
-                    };
-                });
-            });
-        };
-        // 초기 로드 시 높이 계산
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return ()=>{
-            window.removeEventListener("resize", handleResize);
-        };
-    }, [
-        calcElementState,
-        estimateSizeFromEveryElements,
-        getNewStatesByItems
-    ]);
-    /**
-   * - 외부 index 프롭스 변경 시 currentIndex에 반영합니다.
-   * - 외부 index는 원본 인덱스이므로, 현재 위치에서 가장 가까운 확장 인덱스를 찾습니다.
-   */ (0, _react.useLayoutEffect)(()=>{
-        const currentOriginalIndex = items.length > 0 ? sliderInfo.currentIndex % items.length : 0;
-        if (currentOriginalIndex !== index) {
-            // 현재 위치에서 가장 가까운 해당 원본 인덱스의 확장 인덱스 찾기
-            const candidateIndexes = extendedItems.filter((ei)=>ei.originalIndex === index).map((ei)=>ei.extendedIndex);
-            if (candidateIndexes.length > 0) {
-                // 현재 인덱스에서 가장 가까운 후보 찾기
-                let closestIndex = candidateIndexes[0];
-                if (closestIndex === undefined) {
-                    console.warn("가장 가까운 후보 인덱스를 찾을 수 없습니다.", {
-                        candidateIndexes,
-                        sliderInfoCurrentIndex: sliderInfo.currentIndex,
-                        extendedItems,
-                        index
-                    });
-                    closestIndex = 0;
-                }
-                let minDistance = Math.abs(closestIndex - sliderInfo.currentIndex);
-                for (const candidate of candidateIndexes){
-                    const distance = Math.abs(candidate - sliderInfo.currentIndex);
-                    if (distance < minDistance) {
-                        minDistance = distance;
-                        closestIndex = candidate;
-                    }
-                }
-                lastSlideTriggerEvent.current = "swipe";
-                setSliderInfo((prev)=>({
-                        ...prev,
-                        currentIndex: closestIndex
-                    }));
-            }
-        }
+    const handleSwipe = (0, _react.useCallback)(async ()=>{
+        lastSlideTriggerEvent.current = "swipe";
+        await updateStateByPageIndex({
+            centerIndex: sliderInfo.currentIndex,
+            withAnimate: true
+        });
+        lastSlideTriggerEvent.current = "pending";
     }, [
-        extendedItems,
-        index,
-        items.length,
-        sliderInfo.currentIndex
+        sliderInfo.currentIndex,
+        updateStateByPageIndex
     ]);
     /**
    * - currentIndex 변경 시 애니메이션을 적용합니다.
    * - doNext/doPrev 또는 외부 index prop 변경 모두 처리합니다.
-   */ const prevIndexRef = (0, _react.useRef)(sliderInfo.currentIndex);
-    const animateNow = (0, _react.useRef)(false);
-    (0, _react.useLayoutEffect)(()=>{
-        if (prevIndexRef.current !== sliderInfo.currentIndex) {
-            updateStateByPageIndex({
-                centerIndex: sliderInfo.currentIndex,
-                withAnimate: true
-            });
-            prevIndexRef.current = sliderInfo.currentIndex;
-            animateNow.current = true;
-            const animateCheck = setTimeout(()=>{
-                animateNow.current = false;
-            }, animationDuration);
-            return ()=>{
-                animateNow.current = false;
-                clearTimeout(animateCheck);
-            };
+   */ (0, _react.useLayoutEffect)(()=>{
+        if (lastSliderInfoCurrentIndex.current !== sliderInfo.currentIndex) {
+            lastSliderInfoCurrentIndex.current = sliderInfo.currentIndex;
+            handleSwipe();
         }
     }, [
-        animationDuration,
         sliderInfo.currentIndex,
-        updateStateByPageIndex
+        handleSwipe
     ]);
     /**
    * - currentIndex 변경 시 콜백을 호출합니다.
    * - 원본 인덱스로 변환하여 전달합니다.
    */ (0, _react.useEffect)(()=>{
-        if (prevCallbackIndexRef.current !== sliderInfo.currentIndex) {
+        if (prevCallbackIndex.current !== sliderInfo.currentIndex && lastSlideTriggerEvent.current) {
             // 원본 인덱스로 변환
             const originalIndex = items.length > 0 ? sliderInfo.currentIndex % items.length : 0;
             stableOnIndexChange(originalIndex, lastSlideTriggerEvent.current);
-            prevCallbackIndexRef.current = sliderInfo.currentIndex;
+            prevCallbackIndex.current = sliderInfo.currentIndex;
         }
     }, [
         items.length,
         sliderInfo.currentIndex,
         stableOnIndexChange
     ]);
+    /**
+   * - draggable 값을 img, a 등의 요소에 적용합니다.
+   */ (0, _react.useLayoutEffect)(()=>{
+        if (!disableDraggableItems) {
+            return;
+        }
+        const targets = wrapRef.current?.querySelectorAll("img, a");
+        if (targets) {
+            for (const target of targets){
+                target.setAttribute("draggable", "false");
+            }
+        }
+    }, [
+        disableDraggableItems
+    ]);
     const { withPointerMove } = (0, _reactmotion.usePointerMove)({
         enabled: enableDrag,
         target: wrapRef,
@@ -465,10 +404,11 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
        * - 트랜잭션을 업데이트 합니다.
        */ const calculate = primaryPointer?.calculate;
             if (calculate) {
+                setEnableScrollAnimator(false);
                 updateStateByDrag(calculate.diff);
                 if (isEnd) {
                     const diffX = Math.abs(calculate.diff.x);
-                    if (!isCancel && diffX > canScrollThresholdRef.current) {
+                    if (!isCancel && diffX > canScrollThreshold.current) {
                         lastSlideTriggerEvent.current = "drag";
                         if (calculate.diff.x < 0) {
                             doNext();
@@ -477,7 +417,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
                         }
                     } else {
                         // 제자리로 움직이게 합니다.
-                        setEnableScrollAnimator(true);
                         setSliderInfo((prev)=>({
                                 ...prev,
                                 elementStates: getNewStatesByItems({
@@ -497,15 +436,23 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
         handler: (event)=>{
             if (event.key === "ArrowLeft") {
                 event.preventDefault();
-                lastSlideTriggerEvent.current = "swipe";
                 doPrev();
             } else if (event.key === "ArrowRight") {
                 event.preventDefault();
-                lastSlideTriggerEvent.current = "swipe";
                 doNext();
             }
         }
     });
+    (0, _react.useImperativeHandle)(ref, (0, _react.useCallback)(()=>{
+        return {
+            doNext,
+            doPrev,
+            ...wrapRef.current
+        };
+    }, [
+        doNext,
+        doPrev
+    ]));
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("ul", {
         "aria-roledescription": "carousel",
         role: "region",
@@ -545,7 +492,7 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
                         itemProps?.className
                     ].join(" "),
                     style: state ? {
-                        transform: `translate(${state.point.x}px, ${state.point.y}px)`,
+                        transform: `translate3d(${state.point.x}px, ${state.point.y}px, 0px)`,
                         transition: enableScrollAnimator && state.enableAnimation ? `transform ${animationDuration}ms ${animationTimingFunction}` : undefined,
                         zIndex: state.zIndex
                     } : undefined,

package/dist/esm/component/view/slider.js

@@ -9,7 +9,7 @@ import { SliderItemContextProvider } from "../context/slider-context-provider.js
  * - 드래그로 페이지 전환을 트리거하는 임계값 비율 (아이템 너비 기준)
  */ const CAN_SCROLL_THRESHOLD_RATIO = 0.15;
 const DEFAULT_SCROLL_THRESHOLD = 125;
-const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", defaultIndex = 0, enableDrag = true, estimateSizeFromEveryElements = false, gap = 0, index = defaultIndex, itemProps, contentProps, items, visibleCount = 1, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
+const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
     const stableOnIndexChange = useEventCallback(onIndexChange);
     /**
    * - 아이템이 부족할 경우 복제하여 확장된 아이템 배열을 생성합니다.
@@ -48,7 +48,7 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
    */ const [enableScrollAnimator, setEnableScrollAnimator] = useState(false);
     // slider 페이지 인덱스, 아이템 포지션 정보 등
     const [sliderInfo, setSliderInfo] = useState({
-        currentIndex: index,
+        currentIndex: defaultIndex,
         elementStates: [],
         height: 0
     });
@@ -56,11 +56,30 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
     // 아이템 element ref 값
     const elementInfos = useRef(new Map());
     // 콜백 호출용 인덱스 값
-    const prevCallbackIndexRef = useRef(sliderInfo.currentIndex);
+    const prevCallbackIndex = useRef(sliderInfo.currentIndex);
     // 드래그 임계값 (px, 동적으로 계산됨)
-    const canScrollThresholdRef = useRef(DEFAULT_SCROLL_THRESHOLD);
-    const lastSlideTriggerEvent = useRef("swipe");
-    useImperativeHandle(ref, ()=>wrapRef.current, []);
+    const canScrollThreshold = useRef(DEFAULT_SCROLL_THRESHOLD);
+    const lastSlideTriggerEvent = useRef("pending");
+    const lastSliderInfoCurrentIndex = useRef(sliderInfo.currentIndex);
+    const animateNow = useRef(false);
+    const animateChecker = useRef(undefined);
+    const capturedDefaultIndex = useRef(defaultIndex);
+    const stopAnimateCheck = useCallback(()=>{
+        clearTimeout(animateChecker.current);
+        animateChecker.current = undefined;
+    }, []);
+    const startAnimateCheck = useCallback(()=>{
+        stopAnimateCheck();
+        return new Promise((resolve)=>{
+            animateChecker.current = setTimeout(()=>{
+                animateNow.current = false;
+                resolve();
+            }, animationDuration);
+        });
+    }, [
+        animationDuration,
+        stopAnimateCheck
+    ]);
     /**
    * - element reference 를 저장 합니다.
    */ const updateElement = useCallback(({ elementInfo: { content, item }, index })=>{
@@ -192,7 +211,7 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
     /**
    * - 페이지를 기준으로 element 의 상태를 업데이트 합니다.
    * - currentIndex 도 함께 업데이트 합니다.
-   */ const updateStateByPageIndex = useCallback(({ centerIndex, withAnimate = true })=>{
+   */ const updateStateByPageIndex = useCallback(async ({ centerIndex, withAnimate = true })=>{
         setEnableScrollAnimator(withAnimate);
         setSliderInfo((prev)=>({
                 ...prev,
@@ -204,14 +223,20 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
                     prevStates: prev.elementStates
                 })
             }));
+        if (withAnimate) {
+            await startAnimateCheck();
+        } else {
+            stopAnimateCheck();
+        }
     }, [
-        getNewStatesByItems
+        getNewStatesByItems,
+        startAnimateCheck,
+        stopAnimateCheck
     ]);
     /**
    * - 포인터 드래그에 의해 레이아웃을 조정합니다.
    * - 뷰포트에 보여질 엘리먼트만 영향을 받습니다. (visibleCount 기준)
    */ const updateStateByDrag = useCallback((diff)=>{
-        setEnableScrollAnimator(false);
         setSliderInfo((prev)=>{
             const { currentIndex } = prev;
             const { length } = extendedItems;
@@ -300,145 +325,59 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
         extendedItems,
         getNewStatesByItems
     ]);
-    /**
-   * - 첫로드 또는 리사이즈 이벤트가 실행되면, 초기 높이와 위치를 초기화 합니다.
-   */ useLayoutEffect(()=>{
-        const handleResize = ()=>{
-            requestAnimationFrame(()=>{
-                if (!wrapRef.current) {
-                    console.error("Slider 필수 요소에 접근할 수 없습니다.");
-                    return;
-                }
-                // 높이, 드래그 임계값 계산
-                let estimatedHeight = 0;
-                let estimatedScrollThreshold = 0;
-                if (estimateSizeFromEveryElements) {
-                    for (const [, { content }] of elementInfos.current){
-                        if (content) {
-                            const rect = content.getBoundingClientRect();
-                            const { height } = rect;
-                            if (height > estimatedHeight) {
-                                estimatedHeight = height;
-                            }
-                            if (rect.width > estimatedScrollThreshold) {
-                                estimatedScrollThreshold = rect.width * CAN_SCROLL_THRESHOLD_RATIO;
-                            }
-                        }
-                    }
-                } else {
-                    const firstElementInfo = elementInfos.current.get(0);
-                    const rect = firstElementInfo?.content?.getBoundingClientRect();
-                    estimatedHeight = rect?.height ?? 0;
-                    estimatedScrollThreshold = (rect?.width ?? DEFAULT_SCROLL_THRESHOLD) * CAN_SCROLL_THRESHOLD_RATIO;
-                }
-                wrapRef.current.style.height = `${estimatedHeight}px`;
-                canScrollThresholdRef.current = estimatedScrollThreshold;
-                // 아이템 위치 계산
-                setSliderInfo((prevSliderInfo)=>{
-                    return {
-                        ...prevSliderInfo,
-                        elementStates: getNewStatesByItems({
-                            centerIndex: prevSliderInfo.currentIndex,
-                            itemIndexs: prevSliderInfo.elementStates.map((_, index)=>index),
-                            prevStates: prevSliderInfo.elementStates
-                        })
-                    };
-                });
-            });
-        };
-        // 초기 로드 시 높이 계산
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return ()=>{
-            window.removeEventListener("resize", handleResize);
-        };
-    }, [
-        calcElementState,
-        estimateSizeFromEveryElements,
-        getNewStatesByItems
-    ]);
-    /**
-   * - 외부 index 프롭스 변경 시 currentIndex에 반영합니다.
-   * - 외부 index는 원본 인덱스이므로, 현재 위치에서 가장 가까운 확장 인덱스를 찾습니다.
-   */ useLayoutEffect(()=>{
-        const currentOriginalIndex = items.length > 0 ? sliderInfo.currentIndex % items.length : 0;
-        if (currentOriginalIndex !== index) {
-            // 현재 위치에서 가장 가까운 해당 원본 인덱스의 확장 인덱스 찾기
-            const candidateIndexes = extendedItems.filter((ei)=>ei.originalIndex === index).map((ei)=>ei.extendedIndex);
-            if (candidateIndexes.length > 0) {
-                // 현재 인덱스에서 가장 가까운 후보 찾기
-                let closestIndex = candidateIndexes[0];
-                if (closestIndex === undefined) {
-                    console.warn("가장 가까운 후보 인덱스를 찾을 수 없습니다.", {
-                        candidateIndexes,
-                        sliderInfoCurrentIndex: sliderInfo.currentIndex,
-                        extendedItems,
-                        index
-                    });
-                    closestIndex = 0;
-                }
-                let minDistance = Math.abs(closestIndex - sliderInfo.currentIndex);
-                for (const candidate of candidateIndexes){
-                    const distance = Math.abs(candidate - sliderInfo.currentIndex);
-                    if (distance < minDistance) {
-                        minDistance = distance;
-                        closestIndex = candidate;
-                    }
-                }
-                lastSlideTriggerEvent.current = "swipe";
-                setSliderInfo((prev)=>({
-                        ...prev,
-                        currentIndex: closestIndex
-                    }));
-            }
-        }
+    const handleSwipe = useCallback(async ()=>{
+        lastSlideTriggerEvent.current = "swipe";
+        await updateStateByPageIndex({
+            centerIndex: sliderInfo.currentIndex,
+            withAnimate: true
+        });
+        lastSlideTriggerEvent.current = "pending";
     }, [
-        extendedItems,
-        index,
-        items.length,
-        sliderInfo.currentIndex
+        sliderInfo.currentIndex,
+        updateStateByPageIndex
     ]);
     /**
    * - currentIndex 변경 시 애니메이션을 적용합니다.
    * - doNext/doPrev 또는 외부 index prop 변경 모두 처리합니다.
-   */ const prevIndexRef = useRef(sliderInfo.currentIndex);
-    const animateNow = useRef(false);
-    useLayoutEffect(()=>{
-        if (prevIndexRef.current !== sliderInfo.currentIndex) {
-            updateStateByPageIndex({
-                centerIndex: sliderInfo.currentIndex,
-                withAnimate: true
-            });
-            prevIndexRef.current = sliderInfo.currentIndex;
-            animateNow.current = true;
-            const animateCheck = setTimeout(()=>{
-                animateNow.current = false;
-            }, animationDuration);
-            return ()=>{
-                animateNow.current = false;
-                clearTimeout(animateCheck);
-            };
+   */ useLayoutEffect(()=>{
+        if (lastSliderInfoCurrentIndex.current !== sliderInfo.currentIndex) {
+            lastSliderInfoCurrentIndex.current = sliderInfo.currentIndex;
+            handleSwipe();
         }
     }, [
-        animationDuration,
         sliderInfo.currentIndex,
-        updateStateByPageIndex
+        handleSwipe
     ]);
     /**
    * - currentIndex 변경 시 콜백을 호출합니다.
    * - 원본 인덱스로 변환하여 전달합니다.
    */ useEffect(()=>{
-        if (prevCallbackIndexRef.current !== sliderInfo.currentIndex) {
+        if (prevCallbackIndex.current !== sliderInfo.currentIndex && lastSlideTriggerEvent.current) {
             // 원본 인덱스로 변환
             const originalIndex = items.length > 0 ? sliderInfo.currentIndex % items.length : 0;
             stableOnIndexChange(originalIndex, lastSlideTriggerEvent.current);
-            prevCallbackIndexRef.current = sliderInfo.currentIndex;
+            prevCallbackIndex.current = sliderInfo.currentIndex;
         }
     }, [
         items.length,
         sliderInfo.currentIndex,
         stableOnIndexChange
     ]);
+    /**
+   * - draggable 값을 img, a 등의 요소에 적용합니다.
+   */ useLayoutEffect(()=>{
+        if (!disableDraggableItems) {
+            return;
+        }
+        const targets = wrapRef.current?.querySelectorAll("img, a");
+        if (targets) {
+            for (const target of targets){
+                target.setAttribute("draggable", "false");
+            }
+        }
+    }, [
+        disableDraggableItems
+    ]);
     const { withPointerMove } = usePointerMove({
         enabled: enableDrag,
         target: wrapRef,
@@ -455,10 +394,11 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
        * - 트랜잭션을 업데이트 합니다.
        */ const calculate = primaryPointer?.calculate;
             if (calculate) {
+                setEnableScrollAnimator(false);
                 updateStateByDrag(calculate.diff);
                 if (isEnd) {
                     const diffX = Math.abs(calculate.diff.x);
-                    if (!isCancel && diffX > canScrollThresholdRef.current) {
+                    if (!isCancel && diffX > canScrollThreshold.current) {
                         lastSlideTriggerEvent.current = "drag";
                         if (calculate.diff.x < 0) {
                             doNext();
@@ -467,7 +407,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
                         }
                     } else {
                         // 제자리로 움직이게 합니다.
-                        setEnableScrollAnimator(true);
                         setSliderInfo((prev)=>({
                                 ...prev,
                                 elementStates: getNewStatesByItems({
@@ -487,15 +426,23 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
         handler: (event)=>{
             if (event.key === "ArrowLeft") {
                 event.preventDefault();
-                lastSlideTriggerEvent.current = "swipe";
                 doPrev();
             } else if (event.key === "ArrowRight") {
                 event.preventDefault();
-                lastSlideTriggerEvent.current = "swipe";
                 doNext();
             }
         }
     });
+    useImperativeHandle(ref, useCallback(()=>{
+        return {
+            doNext,
+            doPrev,
+            ...wrapRef.current
+        };
+    }, [
+        doNext,
+        doPrev
+    ]));
     return /*#__PURE__*/ _jsx("ul", {
         "aria-roledescription": "carousel",
         role: "region",
@@ -535,7 +482,7 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
                         itemProps?.className
                     ].join(" "),
                     style: state ? {
-                        transform: `translate(${state.point.x}px, ${state.point.y}px)`,
+                        transform: `translate3d(${state.point.x}px, ${state.point.y}px, 0px)`,
                         transition: enableScrollAnimator && state.enableAnimation ? `transform ${animationDuration}ms ${animationTimingFunction}` : undefined,
                         zIndex: state.zIndex
                     } : undefined,

package/dist/style.css

@@ -1 +1 @@
-.watcha-react-slider-wrap{display:flex;justify-content:center;position:relative}.watcha-react-slider-item{inset:0;position:absolute}.watcha-react-slider-content{position:relative}
+.watcha-react-slider-wrap{display:grid;grid-template-columns:1fr;justify-content:center;list-style:none;margin:0;padding:0;position:relative}.watcha-react-slider-item{grid-area:1/1;margin:0;padding:0}.watcha-react-slider-content{position:relative}

package/dist/type/component/view/slider.d.ts

@@ -1,5 +1,9 @@
 import type { CSSProperties } from "react";
 import type { SlideTriggerEvent } from "../../script/type/slider-types";
+export type SliderRef = HTMLUListElement & {
+    doNext: () => void;
+    doPrev: () => void;
+};
 type SliderProps<ItemType> = {
     itemProps?: React.HTMLAttributes<HTMLLIElement>;
     wrapProps?: React.HTMLAttributes<HTMLUListElement>;
@@ -7,12 +11,6 @@ type SliderProps<ItemType> = {
     items: Array<ItemType>;
     onCreateItemView: (item: ItemType, index: number) => React.ReactNode;
     onItemKey: (item: ItemType) => React.Key;
-    /**
-     * - 높이, 드래그 임계값 등의 사이즈 관련 값을 추정하는 방식을 선택 합니다. 기본값은 false 입니다.
-     * - true: 모든 자식요소로부터 추정합니다. 가장 큰 사이즈값이 선택 됩니다.
-     * - false: 첫번째 자식요소의 사이즈를 사용합니다.
-     */
-    estimateSizeFromEveryElements?: boolean;
     /**
      * - item 간 거리입니다.
      * - 기본값은 0 입니다.
@@ -33,11 +31,6 @@ type SliderProps<ItemType> = {
      * - 기본값은 0 입니다.
      */
     defaultIndex?: number;
-    /**
-     * - currentIndex 입니다. 이 값이 변경되면 애니메이션이 동작 될 수 있습니다.
-     * - 기본값은 defaultIndex 입니다.
-     */
-    index?: number;
     /**
      * - 중앙 기준 좌우로 보여줄 요소 개수입니다.
      * - 예: 1이면 좌1 + 중앙1 + 우1 = 3개, 2이면 좌2 + 중앙1 + 우2 = 5개
@@ -54,6 +47,11 @@ type SliderProps<ItemType> = {
      * - 기본값은 true 입니다.
      */
     enableDrag?: boolean;
+    /**
+     * - 렌더링된 아이템의 a, img 등의 요소에 draggable 값을 제한 합니다.
+     * - 기본값은 true 입니다.
+     */
+    disableDraggableItems?: boolean;
     onDraggingNow?: (isDragging: boolean) => void;
 };
 /**

package/dist/type/script/type/slider-types.d.ts

@@ -1,4 +1,4 @@
 /**
  * - 슬라이드시 이벤트 트리거 종류
  */
-export type SlideTriggerEvent = "drag" | "swipe";
+export type SlideTriggerEvent = "pending" | "drag" | "swipe";

package/package.json

@@ -6,7 +6,7 @@
     "slider",
     "swiper"
   ],
-  "version": "0.1.1",
+  "version": "0.1.3",
   "homepage": "https://github.com/frograms/bistro-house/tree/master/packages/react-slider#readme",
   "author": {
     "name": "@watcha-authentic#web-dev-group",