Debug: Add more detailed logging for containerRef

.claude/settings.local.json

@@ -5,7 +5,10 @@
       "Bash(mkdir:*)",
       "Bash(npm run build:*)",
       "Bash(dir:*)",
-      "Bash(tree:*)"
+      "Bash(tree:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)"
     ],
     "deny": [],
     "ask": []

dist/index.js

@@ -328,7 +328,11 @@ var ImageDistortion = ({
     setCurrentAreas(areas);
   }, [areas]);
   (0, import_react2.useEffect)(() => {
-    if (!containerRef.current) return;
+    console.log("[ImageDistortion] useEffect \uC2E4\uD589, containerRef.current:", containerRef.current);
+    if (!containerRef.current) {
+      console.warn("[ImageDistortion] containerRef.current\uAC00 null\uC785\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC81C\uB300\uB85C \uB9C8\uC6B4\uD2B8\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
+      return;
+    }
     console.log("[ImageDistortion] \uCD08\uAE30\uD654 \uC2DC\uC791");
     const scene = new ThreeScene(containerRef.current);
     sceneRef.current = scene;

dist/index.mjs

@@ -284,7 +284,11 @@ var ImageDistortion = ({
     setCurrentAreas(areas);
   }, [areas]);
   useEffect2(() => {
-    if (!containerRef.current) return;
+    console.log("[ImageDistortion] useEffect \uC2E4\uD589, containerRef.current:", containerRef.current);
+    if (!containerRef.current) {
+      console.warn("[ImageDistortion] containerRef.current\uAC00 null\uC785\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC81C\uB300\uB85C \uB9C8\uC6B4\uD2B8\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
+      return;
+    }
     console.log("[ImageDistortion] \uCD08\uAE30\uD654 \uC2DC\uC791");
     const scene = new ThreeScene(containerRef.current);
     sceneRef.current = scene;

src/components/ImageDistortion.tsx

@@ -55,7 +55,12 @@ export const ImageDistortion: React.FC<ImageDistortionProps> = ({
 
   // Three.js 씬 초기화
   useEffect(() => {
-    if (!containerRef.current) return;
+    console.log('[ImageDistortion] useEffect 실행, containerRef.current:', containerRef.current);
+
+    if (!containerRef.current) {
+      console.warn('[ImageDistortion] containerRef.current가 null입니다. 컴포넌트가 제대로 마운트되지 않았습니다.');
+      return;
+    }
 
     console.log('[ImageDistortion] 초기화 시작');
     const scene = new ThreeScene(containerRef.current);