@watcha-authentic/react-slider 0.0.1 → 0.1.1

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

@@ -0,0 +1,573 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Slider", {
+    enumerable: true,
+    get: function() {
+        return Slider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _reacta11y = require("@watcha-authentic/react-a11y");
+const _reacteventcallback = require("@watcha-authentic/react-event-callback");
+const _reactmotion = require("@watcha-authentic/react-motion");
+const _react = require("react");
+const _slidercontextprovider = require("../context/slider-context-provider");
+// TODO: loop false 에 대한 기능 추가
+/**
+ * - 드래그로 페이지 전환을 트리거하는 임계값 비율 (아이템 너비 기준)
+ */ 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 stableOnIndexChange = (0, _reacteventcallback.useEventCallback)(onIndexChange);
+    /**
+   * - 아이템이 부족할 경우 복제하여 확장된 아이템 배열을 생성합니다.
+   * - 최소 필요 개수: 2 * (visibleCount + 1) + 1
+   */ const extendedItems = (0, _react.useMemo)(()=>{
+        const minItems = 2 * (visibleCount + 1) + 1;
+        const mult = items.length > 0 ? Math.ceil(minItems / items.length) : 1;
+        const extended = [];
+        for(let m = 0; m < mult; m++){
+            for(let i = 0; i < items.length; i++){
+                const item = items[i];
+                if (item === undefined) {
+                    console.warn("Item element 를 찾을 수 없습니다.", {
+                        minItems,
+                        mult,
+                        items,
+                        m,
+                        i
+                    });
+                    continue;
+                }
+                extended.push({
+                    extendedIndex: m * items.length + i,
+                    item,
+                    originalIndex: i
+                });
+            }
+        }
+        return extended;
+    }, [
+        items,
+        visibleCount
+    ]);
+    /**
+   * - 드래그 애니메이션 활성화 여부
+   */ const [enableScrollAnimator, setEnableScrollAnimator] = (0, _react.useState)(false);
+    // slider 페이지 인덱스, 아이템 포지션 정보 등
+    const [sliderInfo, setSliderInfo] = (0, _react.useState)({
+        currentIndex: index,
+        elementStates: [],
+        height: 0
+    });
+    const wrapRef = (0, _react.useRef)(null);
+    // 아이템 element ref 값
+    const elementInfos = (0, _react.useRef)(new Map());
+    // 콜백 호출용 인덱스 값
+    const prevCallbackIndexRef = (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, []);
+    /**
+   * - element reference 를 저장 합니다.
+   */ const updateElement = (0, _react.useCallback)(({ elementInfo: { content, item }, index })=>{
+        let elementInfo = elementInfos.current.get(index);
+        if (!elementInfo) {
+            elementInfo = {
+                content: null,
+                item: null
+            };
+            elementInfos.current.set(index, elementInfo);
+        }
+        // null 은 값을 null 로 설정 할 수 있어야 합니다.
+        if (item !== undefined) {
+            elementInfo.item = item;
+        }
+        if (content !== undefined) {
+            elementInfo.content = content;
+        }
+    }, []);
+    /**
+   * - element 의 상태(position 등)를 계산 합니다.
+   */ const calcElementState = (0, _react.useCallback)(({ centerIndex, elementIndex, itemSize, prevState })=>{
+        const { width } = itemSize;
+        const { length } = extendedItems;
+        // 원형 배열에서 centerIndex 기준으로 시계방향/반시계방향 거리 계산
+        const clockwiseDistance = (elementIndex - centerIndex + length) % length;
+        const counterClockwiseDistance = (centerIndex - elementIndex + length) % length;
+        let positionType;
+        let point;
+        let zIndex;
+        if (elementIndex === centerIndex) {
+            // center
+            positionType = "center";
+            point = {
+                x: 0,
+                y: 0
+            };
+            zIndex = length; // 가장 높음
+        } else if (counterClockwiseDistance <= clockwiseDistance) {
+            // 왼쪽 (반시계방향이 더 가깝거나 같음)
+            positionType = "left";
+            if (counterClockwiseDistance <= visibleCount) {
+                // visibleCount 범위 내: 거리에 따라 왼쪽으로 이동
+                point = {
+                    x: -(width + gap) * counterClockwiseDistance,
+                    y: 0
+                };
+                zIndex = length - counterClockwiseDistance;
+            } else {
+                // 범위 밖: 가장 바깥 위치에 고정
+                point = {
+                    x: -(width + gap) * (visibleCount + 1),
+                    y: 0
+                };
+                zIndex = 0;
+            }
+        } else {
+            // 오른쪽 (시계방향이 더 가까움)
+            positionType = "right";
+            if (clockwiseDistance <= visibleCount) {
+                // visibleCount 범위 내: 거리에 따라 오른쪽으로 이동
+                point = {
+                    x: (width + gap) * clockwiseDistance,
+                    y: 0
+                };
+                zIndex = length - clockwiseDistance;
+            } else {
+                // 범위 밖: 가장 바깥 위치에 고정
+                point = {
+                    x: (width + gap) * (visibleCount + 1),
+                    y: 0
+                };
+                zIndex = 0;
+            }
+        }
+        // 점프 여부 확인:
+        // 왼쪽 <> 오른쪽 이동 시만 점프 (애니메이션 비활성화)
+        // 범위 밖으로 나가거나 들어올 때는 애니메이션 유지
+        const isJumping = prevState && (prevState.positionType === "left" && positionType === "right" || prevState.positionType === "right" && positionType === "left");
+        // transition 계산: 중앙으로부터 떨어진 거리 비율 (0~1)
+        // 기준: 아이템 너비 + gap
+        const itemWidth = width + gap;
+        const transition = Math.min(1, Math.max(0, Math.abs(point.x) / itemWidth));
+        return {
+            enableAnimation: !isJumping,
+            originPoint: point,
+            point,
+            positionType,
+            transition,
+            zIndex
+        };
+    }, [
+        extendedItems,
+        gap,
+        visibleCount
+    ]);
+    const getNewStatesByItems = (0, _react.useCallback)(({ centerIndex, enableAnimation = false, itemIndexs, prevStates })=>{
+        return itemIndexs.map((itemIndex)=>{
+            const prevState = prevStates?.[itemIndex];
+            const item = elementInfos.current.get(itemIndex)?.item;
+            if (!item) {
+                console.warn("Item element 를 찾을 수 없습니다.", {
+                    centerIndex,
+                    itemIndex,
+                    prevState,
+                    prevStates
+                });
+            }
+            const state = calcElementState({
+                centerIndex,
+                elementIndex: itemIndex,
+                itemSize: item?.getBoundingClientRect() ?? {
+                    height: 0,
+                    width: 0
+                },
+                prevState
+            });
+            return {
+                ...state,
+                // isJumping이면 애니메이션 비활성화
+                enableAnimation: enableAnimation && state.enableAnimation,
+                // originPoint도 point와 동일하게 설정
+                originPoint: state.point
+            };
+        });
+    }, [
+        calcElementState
+    ]);
+    /**
+   * - 페이지를 기준으로 element 의 상태를 업데이트 합니다.
+   * - currentIndex 도 함께 업데이트 합니다.
+   */ const updateStateByPageIndex = (0, _react.useCallback)(({ centerIndex, withAnimate = true })=>{
+        setEnableScrollAnimator(withAnimate);
+        setSliderInfo((prev)=>({
+                ...prev,
+                currentIndex: centerIndex,
+                elementStates: getNewStatesByItems({
+                    centerIndex,
+                    enableAnimation: withAnimate,
+                    itemIndexs: prev.elementStates.map((_, index)=>index),
+                    prevStates: prev.elementStates
+                })
+            }));
+    }, [
+        getNewStatesByItems
+    ]);
+    /**
+   * - 포인터 드래그에 의해 레이아웃을 조정합니다.
+   * - 뷰포트에 보여질 엘리먼트만 영향을 받습니다. (visibleCount 기준)
+   */ const updateStateByDrag = (0, _react.useCallback)((diff)=>{
+        setEnableScrollAnimator(false);
+        setSliderInfo((prev)=>{
+            const { currentIndex } = prev;
+            const { length } = extendedItems;
+            // visibleCount 기준으로 좌/우 인덱스들 계산
+            // visibleCount=1: 좌1 + 중앙 + 우1 = 3개
+            // visibleCount=2: 좌2 + 중앙 + 우2 = 5개
+            const targetIndexes = [
+                currentIndex
+            ];
+            for(let i = 1; i <= visibleCount + 1; i++){
+                targetIndexes.push((currentIndex - i + length) % length); // 왼쪽
+                targetIndexes.push((currentIndex + i) % length); // 오른쪽
+            }
+            const newElementStates = [
+                ...prev.elementStates
+            ];
+            for (const targetIndex of targetIndexes){
+                const state = newElementStates[targetIndex];
+                if (state) {
+                    const newPoint = (0, _reactmotion.addPoint)(state.originPoint, {
+                        x: diff.x,
+                        y: 0
+                    });
+                    // transition 계산: 아이템 너비 기준
+                    const item = elementInfos.current.get(targetIndex)?.item;
+                    if (item) {
+                        const { width } = item.getBoundingClientRect();
+                        const itemWidth = width + gap;
+                        const transition = Math.min(1, Math.max(0, Math.abs(newPoint.x) / itemWidth));
+                        newElementStates[targetIndex] = {
+                            ...state,
+                            enableAnimation: false,
+                            point: newPoint,
+                            transition
+                        };
+                    }
+                }
+            }
+            return {
+                ...prev,
+                elementStates: newElementStates
+            };
+        });
+    }, [
+        extendedItems,
+        gap,
+        visibleCount
+    ]);
+    const doNext = (0, _react.useCallback)(()=>{
+        setSliderInfo((prev)=>{
+            const newIndex = (prev.currentIndex + 1) % extendedItems.length;
+            return {
+                ...prev,
+                currentIndex: newIndex
+            };
+        });
+    }, [
+        extendedItems.length
+    ]);
+    const doPrev = (0, _react.useCallback)(()=>{
+        setSliderInfo((prev)=>{
+            const newIndex = (prev.currentIndex - 1 + extendedItems.length) % extendedItems.length;
+            return {
+                ...prev,
+                currentIndex: newIndex
+            };
+        });
+    }, [
+        extendedItems.length
+    ]);
+    /**
+   * - extendedItems 프롭스에 의한 값을 초기화 합니다.
+   */ (0, _react.useLayoutEffect)(()=>{
+        setSliderInfo((prevSliderInfo)=>{
+            return {
+                ...prevSliderInfo,
+                elementStates: getNewStatesByItems({
+                    centerIndex: prevSliderInfo.currentIndex,
+                    itemIndexs: extendedItems.map((_, index)=>index),
+                    prevStates: prevSliderInfo.elementStates
+                })
+            };
+        });
+    }, [
+        calcElementState,
+        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
+                    }));
+            }
+        }
+    }, [
+        extendedItems,
+        index,
+        items.length,
+        sliderInfo.currentIndex
+    ]);
+    /**
+   * - 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);
+            };
+        }
+    }, [
+        animationDuration,
+        sliderInfo.currentIndex,
+        updateStateByPageIndex
+    ]);
+    /**
+   * - currentIndex 변경 시 콜백을 호출합니다.
+   * - 원본 인덱스로 변환하여 전달합니다.
+   */ (0, _react.useEffect)(()=>{
+        if (prevCallbackIndexRef.current !== sliderInfo.currentIndex) {
+            // 원본 인덱스로 변환
+            const originalIndex = items.length > 0 ? sliderInfo.currentIndex % items.length : 0;
+            stableOnIndexChange(originalIndex, lastSlideTriggerEvent.current);
+            prevCallbackIndexRef.current = sliderInfo.currentIndex;
+        }
+    }, [
+        items.length,
+        sliderInfo.currentIndex,
+        stableOnIndexChange
+    ]);
+    const { withPointerMove } = (0, _reactmotion.usePointerMove)({
+        enabled: enableDrag,
+        target: wrapRef,
+        onDraggingNow: (isDragging)=>{
+            setEnableScrollAnimator(!isDragging);
+            onDraggingNow?.(isDragging);
+        },
+        onPointDrag: ({ isCancel, isEnd, transaction })=>{
+            if (animateNow.current) {
+                return;
+            }
+            const { primaryPointer } = transaction;
+            /**
+       * - 트랜잭션을 업데이트 합니다.
+       */ const calculate = primaryPointer?.calculate;
+            if (calculate) {
+                updateStateByDrag(calculate.diff);
+                if (isEnd) {
+                    const diffX = Math.abs(calculate.diff.x);
+                    if (!isCancel && diffX > canScrollThresholdRef.current) {
+                        lastSlideTriggerEvent.current = "drag";
+                        if (calculate.diff.x < 0) {
+                            doNext();
+                        } else {
+                            doPrev();
+                        }
+                    } else {
+                        // 제자리로 움직이게 합니다.
+                        setEnableScrollAnimator(true);
+                        setSliderInfo((prev)=>({
+                                ...prev,
+                                elementStates: getNewStatesByItems({
+                                    centerIndex: prev.currentIndex,
+                                    enableAnimation: true,
+                                    itemIndexs: prev.elementStates.map((_, index)=>index),
+                                    prevStates: prev.elementStates
+                                })
+                            }));
+                    }
+                }
+            }
+        }
+    });
+    (0, _reacta11y.useAccessibilityHandler)({
+        target: wrapRef,
+        handler: (event)=>{
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                lastSlideTriggerEvent.current = "swipe";
+                doPrev();
+            } else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                lastSlideTriggerEvent.current = "swipe";
+                doNext();
+            }
+        }
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("ul", {
+        "aria-roledescription": "carousel",
+        role: "region",
+        ...wrapProps,
+        ...withPointerMove,
+        className: [
+            "watcha-react-slider-wrap",
+            wrapProps?.className
+        ].join(" "),
+        style: {
+            ...wrapProps?.style,
+            ...withPointerMove.style,
+            touchAction: enableDrag ? "pan-y" : "none"
+        },
+        children: extendedItems.map(({ extendedIndex, item, originalIndex })=>{
+            const state = sliderInfo.elementStates[extendedIndex];
+            const isFocused = sliderInfo.currentIndex === extendedIndex;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_slidercontextprovider.SliderItemContextProvider, {
+                immediate: !enableScrollAnimator,
+                isFocused: isFocused,
+                itemIndex: originalIndex,
+                slideTriggerEvent: lastSlideTriggerEvent.current,
+                transition: state ? state.transition : 0,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                    ...itemProps,
+                    ref: (element)=>{
+                        updateElement({
+                            elementInfo: {
+                                item: element
+                            },
+                            index: extendedIndex
+                        });
+                    },
+                    "aria-current": isFocused ? "true" : undefined,
+                    className: [
+                        "watcha-react-slider-item",
+                        itemProps?.className
+                    ].join(" "),
+                    style: state ? {
+                        transform: `translate(${state.point.x}px, ${state.point.y}px)`,
+                        transition: enableScrollAnimator && state.enableAnimation ? `transform ${animationDuration}ms ${animationTimingFunction}` : undefined,
+                        zIndex: state.zIndex
+                    } : undefined,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        ...contentProps,
+                        ref: (element)=>{
+                            updateElement({
+                                elementInfo: {
+                                    content: element
+                                },
+                                index: extendedIndex
+                            });
+                        },
+                        className: [
+                            "watcha-react-slider-content",
+                            contentProps?.className
+                        ].join(" "),
+                        children: onCreateItemView(item, originalIndex)
+                    })
+                })
+            }, `${onItemKey(item)}-${extendedIndex}`);
+        })
+    });
+};
+const Slider = /*#__PURE__*/ (0, _react.forwardRef)(SliderComponent);

package/dist/cjs/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./component/context/slider-context"), exports);
+_export_star(require("./component/context/slider-context-provider"), exports);
+_export_star(require("./component/hook/use-slider-context"), exports);
+_export_star(require("./component/view/slider"), exports);
+_export_star(require("./script/type/slider-types"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/script/type/slider-types.js

@@ -0,0 +1,6 @@
+/**
+ * - 슬라이드시 이벤트 트리거 종류
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/esm/component/context/slider-context-provider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SliderItemContext } from "./slider-context.js";
+export const SliderItemContextProvider = ({ children, immediate, isFocused, itemIndex, slideTriggerEvent, transition })=>{
+    const value = {
+        immediate,
+        isFocused,
+        itemIndex,
+        slideTriggerEvent,
+        transition
+    };
+    return /*#__PURE__*/ _jsx(SliderItemContext.Provider, {
+        value: value,
+        children: children
+    });
+};

package/dist/esm/component/context/slider-context.js

@@ -0,0 +1,2 @@
+import React from "react";
+export const SliderItemContext = /*#__PURE__*/ React.createContext(null);

package/dist/esm/component/hook/use-slider-context.js

@@ -0,0 +1,48 @@
+import { useEventCallback } from "@watcha-authentic/react-event-callback";
+import React, { useLayoutEffect, useRef } from "react";
+import { SliderItemContext } from "../context/slider-context.js";
+export const useSliderContext = (callbacks)=>{
+    const context = React.useContext(SliderItemContext);
+    if (!context) {
+        throw new Error("useSliderContext must be used within SliderItemContextProvider");
+    }
+    const stableOnBlur = useEventCallback(callbacks.onBlur);
+    const stableOnFocus = useEventCallback(callbacks.onFocus);
+    const stableOnInitialState = useEventCallback(callbacks.onInitialState);
+    const stableOnTransitionChange = useEventCallback(callbacks.onTransitionChange);
+    const prevFocusedRef = useRef(null);
+    /**
+   * - 초기 마운트 또는 상태 변경시 콜백 호출
+   */ useLayoutEffect(()=>{
+        const isInitialMount = prevFocusedRef.current === null;
+        if (prevFocusedRef.current !== context.isFocused) {
+            if (isInitialMount) {
+                // 초기 마운트 시 onInitialState 호출
+                stableOnInitialState(context.isFocused);
+            } else {
+                // 상태 변경 시 onBlur/onFocus 호출
+                if (context.isFocused) {
+                    stableOnFocus(context.slideTriggerEvent === "swipe");
+                } else {
+                    stableOnBlur();
+                }
+            }
+            prevFocusedRef.current = context.isFocused;
+        }
+    }, [
+        context.isFocused,
+        context.slideTriggerEvent,
+        stableOnBlur,
+        stableOnFocus,
+        stableOnInitialState
+    ]);
+    /**
+   * - transition 값 변경 시 콜백 호출
+   */ useLayoutEffect(()=>{
+        stableOnTransitionChange(context.transition, context.immediate);
+    }, [
+        context.transition,
+        context.immediate,
+        stableOnTransitionChange
+    ]);
+};