feat: Add isDragging hook to mouse interaction

- useMouseInteraction 훅에 isDragging 함수를 추가했습니다.
- ImageDistortion 컴포넌트의 애니메이션 콜백에서 마우스 드래그 상태를 감지하여,
  드래그 중일 때는 자동 애니메이션의 dragVector를 0으로 설정하도록 로직을 개선했습니다.

dist/index.d.mts

@@ -557,6 +557,7 @@ declare const useMouseInteraction: (containerRef: React.RefObject<HTMLElement |
     updateInteraction: (areas: DistortionArea[], deltaTime: number) => DistortionArea[];
     updateConfig: (newConfig: Partial<MouseInteractionConfig>) => void;
     reset: () => void;
+    isDragging: () => boolean;
 };
 
 export { ANIMATION_CONFIG, AnimationLoop, type AnimationState, type AnimationTicker, type AreaBounds, DEFAULT_AREA, type DistortionArea, DistortionEditor, type DistortionEditorProps, type DistortionMovement, type EasingFunction, type EditMode, type EditorState, ImageDistortion, type ImageDistortionProps, type MotionPreset, type MouseInteractionConfig, type MouseState, type Point, SHADER_CONFIG, type ShaderConfig, ShaderManager, type ShaderUniforms, SpringPhysics, type SpringPhysicsConfig, type SpringState, ThreeScene, applyEasing, isRotationPreset, presetToVector, useAnimationFrame, useDistortionEditor, useMouseInteraction, useMouseVelocity };

dist/index.d.ts

@@ -557,6 +557,7 @@ declare const useMouseInteraction: (containerRef: React.RefObject<HTMLElement |
     updateInteraction: (areas: DistortionArea[], deltaTime: number) => DistortionArea[];
     updateConfig: (newConfig: Partial<MouseInteractionConfig>) => void;
     reset: () => void;
+    isDragging: () => boolean;
 };
 
 export { ANIMATION_CONFIG, AnimationLoop, type AnimationState, type AnimationTicker, type AreaBounds, DEFAULT_AREA, type DistortionArea, DistortionEditor, type DistortionEditorProps, type DistortionMovement, type EasingFunction, type EditMode, type EditorState, ImageDistortion, type ImageDistortionProps, type MotionPreset, type MouseInteractionConfig, type MouseState, type Point, SHADER_CONFIG, type ShaderConfig, ShaderManager, type ShaderUniforms, SpringPhysics, type SpringPhysicsConfig, type SpringState, ThreeScene, applyEasing, isRotationPreset, presetToVector, useAnimationFrame, useDistortionEditor, useMouseInteraction, useMouseVelocity };

dist/index.js

@@ -739,10 +739,15 @@ var useMouseInteraction = (containerRef, config) => {
     });
     setInteractingAreaIndices(/* @__PURE__ */ new Set());
   }, []);
+  const isDragging = (0, import_react3.useCallback)(() => {
+    const mouseState = getState();
+    return mouseState.isDragging;
+  }, [getState]);
   return {
     updateInteraction,
     updateConfig,
-    reset
+    reset,
+    isDragging
   };
 };
 
@@ -917,8 +922,17 @@ var ImageDistortion = ({
   const animationCallback = (0, import_react4.useCallback)((deltaTime) => {
     if (!isReady) return;
     setCurrentAreas((prevAreas) => {
-      let updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
+      const isDragging = mouseInteractionHook.isDragging?.();
+      let updatedAreas = prevAreas;
+      if (!isDragging) {
+        updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
         updatedAreas = AnimationLoop.updateAreaDragVectors(updatedAreas);
+      } else {
+        updatedAreas = prevAreas.map((area) => ({
+          ...area,
+          dragVector: { x: 0, y: 0 }
+        }));
+      }
       if (mouseInteraction?.enabled) {
         updatedAreas = mouseInteractionHook.updateInteraction(updatedAreas, deltaTime);
       }

dist/index.mjs

@@ -688,10 +688,15 @@ var useMouseInteraction = (containerRef, config) => {
     });
     setInteractingAreaIndices(/* @__PURE__ */ new Set());
   }, []);
+  const isDragging = useCallback2(() => {
+    const mouseState = getState();
+    return mouseState.isDragging;
+  }, [getState]);
   return {
     updateInteraction,
     updateConfig,
-    reset
+    reset,
+    isDragging
   };
 };
 
@@ -866,8 +871,17 @@ var ImageDistortion = ({
   const animationCallback = useCallback3((deltaTime) => {
     if (!isReady) return;
     setCurrentAreas((prevAreas) => {
-      let updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
+      const isDragging = mouseInteractionHook.isDragging?.();
+      let updatedAreas = prevAreas;
+      if (!isDragging) {
+        updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
         updatedAreas = AnimationLoop.updateAreaDragVectors(updatedAreas);
+      } else {
+        updatedAreas = prevAreas.map((area) => ({
+          ...area,
+          dragVector: { x: 0, y: 0 }
+        }));
+      }
       if (mouseInteraction?.enabled) {
         updatedAreas = mouseInteractionHook.updateInteraction(updatedAreas, deltaTime);
       }

src/components/ImageDistortion.tsx

@@ -214,9 +214,21 @@ export const ImageDistortion: React.FC<ImageDistortionProps> = ({
     if (!isReady) return;
 
     setCurrentAreas((prevAreas) => {
-      // 1. 기존 영역 애니메이션 업데이트
+      // 마우스가 드래그 중인지 확인
-      let updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
+      const isDragging = mouseInteractionHook.isDragging?.();
+
+      // 1. 자동 애니메이션 업데이트 (마우스 드래그 중이 아닐 때만)
+      let updatedAreas = prevAreas;
+      if (!isDragging) {
+        updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
         updatedAreas = AnimationLoop.updateAreaDragVectors(updatedAreas);
+      } else {
+        // 드래그 중일 때는 자동 애니메이션 dragVector를 0으로 설정
+        updatedAreas = prevAreas.map(area => ({
+          ...area,
+          dragVector: { x: 0, y: 0 }
+        }));
+      }
 
       // 2. 마우스 인터랙션 적용 (기존 dragVector에 스프링 변위 추가)
       if (mouseInteraction?.enabled) {

src/hooks/useMouseInteraction.ts

@@ -194,9 +194,18 @@ export const useMouseInteraction = (
 		setInteractingAreaIndices(new Set());
 	}, []);
 
+	/**
+	 * 현재 드래그 중인지 확인
+	 */
+	const isDragging = useCallback((): boolean => {
+		const mouseState = getState();
+		return mouseState.isDragging;
+	}, [getState]);
+
 	return {
 		updateInteraction,
 		updateConfig,
 		reset,
+		isDragging,
 	};
 };