feat: Add selectedAreaId prop to ImageDistortion

- 선택된 영역 ID를 ImageDistortion 컴포넌트에 추가했습니다.
- selectedAreaId prop을 통해 특정 영역의 자동 애니메이션을 제외할 수 있습니다.
- ImageDistortion 컴포넌트의 animationCallback 로직을 수정하여 selectedAreaId를 반영했습니다.

dist/index.d.mts

@@ -194,6 +194,8 @@ interface ImageDistortionProps {
     className?: string;
     /** 마우스 인터랙션 설정 */
     mouseInteraction?: MouseInteractionConfig;
+    /** 선택된 영역 ID (이 영역은 자동 애니메이션 제외) */
+    selectedAreaId?: string | null;
 }
 /**
  * GPU 가속 이미지 왜곡 컴포넌트

dist/index.d.ts

@@ -194,6 +194,8 @@ interface ImageDistortionProps {
     className?: string;
     /** 마우스 인터랙션 설정 */
     mouseInteraction?: MouseInteractionConfig;
+    /** 선택된 영역 ID (이 영역은 자동 애니메이션 제외) */
+    selectedAreaId?: string | null;
 }
 /**
  * GPU 가속 이미지 왜곡 컴포넌트

dist/index.js

@@ -791,7 +791,8 @@ var ImageDistortion = ({
   isPlaying = true,
   style,
   className,
-  mouseInteraction
+  mouseInteraction,
+  selectedAreaId
 }) => {
   const containerRef = (0, import_react4.useRef)(null);
   const sceneRef = (0, import_react4.useRef)(null);
@@ -926,7 +927,16 @@ var ImageDistortion = ({
       let updatedAreas = prevAreas;
       if (!isDragging) {
         updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
-        updatedAreas = AnimationLoop.updateAreaDragVectors(updatedAreas);
+        updatedAreas = updatedAreas.map((area) => {
+          if (selectedAreaId && area.id === selectedAreaId) {
+            return {
+              ...area,
+              dragVector: { x: 0, y: 0 }
+            };
+          }
+          const updatedArea = AnimationLoop.updateAreaDragVectors([area]);
+          return updatedArea[0];
+        });
       } else {
         updatedAreas = prevAreas.map((area) => ({
           ...area,
@@ -938,7 +948,7 @@ var ImageDistortion = ({
       }
       return updatedAreas;
     });
-  }, [isReady, mouseInteraction, mouseInteractionHook]);
+  }, [isReady, mouseInteraction, mouseInteractionHook, selectedAreaId]);
   useAnimationFrame(animationCallback, isPlaying || mouseInteraction?.enabled || false);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",

dist/index.mjs

@@ -740,7 +740,8 @@ var ImageDistortion = ({
   isPlaying = true,
   style,
   className,
-  mouseInteraction
+  mouseInteraction,
+  selectedAreaId
 }) => {
   const containerRef = useRef4(null);
   const sceneRef = useRef4(null);
@@ -875,7 +876,16 @@ var ImageDistortion = ({
       let updatedAreas = prevAreas;
       if (!isDragging) {
         updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
-        updatedAreas = AnimationLoop.updateAreaDragVectors(updatedAreas);
+        updatedAreas = updatedAreas.map((area) => {
+          if (selectedAreaId && area.id === selectedAreaId) {
+            return {
+              ...area,
+              dragVector: { x: 0, y: 0 }
+            };
+          }
+          const updatedArea = AnimationLoop.updateAreaDragVectors([area]);
+          return updatedArea[0];
+        });
       } else {
         updatedAreas = prevAreas.map((area) => ({
           ...area,
@@ -887,7 +897,7 @@ var ImageDistortion = ({
       }
       return updatedAreas;
     });
-  }, [isReady, mouseInteraction, mouseInteractionHook]);
+  }, [isReady, mouseInteraction, mouseInteractionHook, selectedAreaId]);
   useAnimationFrame(animationCallback, isPlaying || mouseInteraction?.enabled || false);
   return /* @__PURE__ */ jsx(
     "div",