masoneffect 0.1.13 → 0.1.14

package/dist/react/MasonEffect.js

@@ -4,423 +4,381 @@ import React, { forwardRef, useRef, useEffect, useImperativeHandle } from 'react
  * MasonEffect - 파티클 모핑 효과 라이브러리
  * 바닐라 JS 코어 클래스
  */
-
 // 디바운스 유틸리티 함수
 function debounce(func, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func.apply(this, args);
+    let timeout = null;
+    return function executedFunction(...args) {
+        const later = () => {
+            timeout = null;
+            func.apply(this, args);
+        };
+        if (timeout !== null) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(later, wait);
     };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
 }
-
 class MasonEffect {
-  constructor(container, options = {}) {
-    // 컨테이너 요소
-    this.container = typeof container === 'string' 
-      ? document.querySelector(container) 
-      : container;
-    
-    if (!this.container) {
-      throw new Error('Container element not found');
-    }
-
-    // 설정값들
-    this.config = {
-      text: options.text || 'mason effect',
-      densityStep: options.densityStep ?? 2,
-      maxParticles: options.maxParticles ?? 3200,
-      pointSize: options.pointSize ?? 0.5,
-      ease: options.ease ?? 0.05,
-      repelRadius: options.repelRadius ?? 150,
-      repelStrength: options.repelStrength ?? 1,
-      particleColor: options.particleColor || '#fff',
-      fontFamily: options.fontFamily || 'Inter, system-ui, Arial',
-      fontSize: options.fontSize || null, // null이면 자동 계산
-      width: options.width || null, // null이면 컨테이너 크기
-      height: options.height || null, // null이면 컨테이너 크기
-      devicePixelRatio: options.devicePixelRatio ?? null, // null이면 자동
-      onReady: options.onReady || null,
-      onUpdate: options.onUpdate || null,
-    };
-
-    // 캔버스 생성
-    this.canvas = document.createElement('canvas');
-    this.ctx = this.canvas.getContext('2d');
-    this.container.appendChild(this.canvas);
-    this.canvas.style.display = 'block';
-
-    // 오프스크린 캔버스 (텍스트 렌더링용)
-    this.offCanvas = document.createElement('canvas');
-    this.offCtx = this.offCanvas.getContext('2d');
-
-    // 상태
-    this.W = 0;
-    this.H = 0;
-    this.DPR = this.config.devicePixelRatio || Math.min(window.devicePixelRatio || 1, 1.8);
-    this.particles = [];
-    this.mouse = { x: 0, y: 0, down: false };
-    this.animationId = null;
-    this.isRunning = false;
-    this.isVisible = false;
-    this.intersectionObserver = null;
-
-    // 디바운스 설정 (ms)
-    this.debounceDelay = options.debounceDelay ?? 150; // 기본 150ms
-
-    // 이벤트 핸들러 바인딩 (디바운스 적용 전에 바인딩)
-    const boundHandleResize = this.handleResize.bind(this);
-    this.handleResize = debounce(boundHandleResize, this.debounceDelay);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handleMouseUp = this.handleMouseUp.bind(this);
-
-    // morph와 updateConfig를 위한 디바운스된 내부 메서드
-    this._debouncedMorph = debounce(this._morphInternal.bind(this), this.debounceDelay);
-    this._debouncedUpdateConfig = debounce(this._updateConfigInternal.bind(this), this.debounceDelay);
-
-    // 초기화
-    this.init();
-  }
-
-  init() {
-    this.resize();
-    this.setupEventListeners();
-    this.setupIntersectionObserver();
-
-    if (this.config.onReady) {
-      this.config.onReady(this);
-    }
-  }
-
-  setupIntersectionObserver() {
-    // IntersectionObserver가 지원되지 않는 환경에서는 항상 재생
-    if (typeof window === 'undefined' || typeof window.IntersectionObserver === 'undefined') {
-      this.isVisible = true;
-      this.start();
-      return;
+    constructor(container, options = {}) {
+        // 컨테이너 요소
+        this.container = typeof container === 'string'
+            ? document.querySelector(container)
+            : container;
+        if (!this.container) {
+            throw new Error('Container element not found');
+        }
+        // 설정값들
+        this.config = {
+            text: options.text || 'mason effect',
+            densityStep: options.densityStep ?? 2,
+            maxParticles: options.maxParticles ?? 3200,
+            pointSize: options.pointSize ?? 0.5,
+            ease: options.ease ?? 0.05,
+            repelRadius: options.repelRadius ?? 150,
+            repelStrength: options.repelStrength ?? 1,
+            particleColor: options.particleColor || '#fff',
+            fontFamily: options.fontFamily || 'Inter, system-ui, Arial',
+            fontSize: options.fontSize || null,
+            width: options.width || null,
+            height: options.height || null,
+            devicePixelRatio: options.devicePixelRatio ?? null,
+            onReady: options.onReady || null,
+            onUpdate: options.onUpdate || null,
+        };
+        // 캔버스 생성
+        this.canvas = document.createElement('canvas');
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Canvas context not available');
+        }
+        this.ctx = ctx;
+        this.container.appendChild(this.canvas);
+        this.canvas.style.display = 'block';
+        // 오프스크린 캔버스 (텍스트 렌더링용)
+        this.offCanvas = document.createElement('canvas');
+        const offCtx = this.offCanvas.getContext('2d');
+        if (!offCtx) {
+            throw new Error('Offscreen canvas context not available');
+        }
+        this.offCtx = offCtx;
+        // 상태
+        this.W = 0;
+        this.H = 0;
+        this.DPR = this.config.devicePixelRatio || Math.min(window.devicePixelRatio || 1, 1.8);
+        this.particles = [];
+        this.mouse = { x: 0, y: 0, down: false };
+        this.animationId = null;
+        this.isRunning = false;
+        this.isVisible = false;
+        this.intersectionObserver = null;
+        // 디바운스 설정 (ms)
+        this.debounceDelay = options.debounceDelay ?? 150;
+        // 이벤트 핸들러 바인딩 (디바운스 적용 전에 바인딩)
+        const boundHandleResize = this.handleResize.bind(this);
+        this.handleResize = debounce(boundHandleResize, this.debounceDelay);
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleMouseLeave = this.handleMouseLeave.bind(this);
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+        // morph와 updateConfig를 위한 디바운스된 내부 메서드
+        this._debouncedMorph = debounce(this._morphInternal.bind(this), this.debounceDelay);
+        this._debouncedUpdateConfig = debounce(this._updateConfigInternal.bind(this), this.debounceDelay);
+        // 초기화
+        this.init();
     }
-
-    // 이미 설정되어 있다면 다시 만들지 않음
-    if (this.intersectionObserver) {
-      return;
+    init() {
+        this.resize();
+        this.setupEventListeners();
+        this.setupIntersectionObserver();
+        if (this.config.onReady) {
+            this.config.onReady(this);
+        }
     }
-
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.target !== this.container) continue;
-
-          if (entry.isIntersecting) {
+    setupIntersectionObserver() {
+        // IntersectionObserver가 지원되지 않는 환경에서는 항상 재생
+        if (typeof window === 'undefined' || typeof window.IntersectionObserver === 'undefined') {
             this.isVisible = true;
             this.start();
-          } else {
-            this.isVisible = false;
-            this.stop();
-          }
+            return;
         }
-      },
-      {
-        threshold: 0.1, // 10% 이상 보일 때 동작
-      }
-    );
-
-    this.intersectionObserver.observe(this.container);
-  }
-
-  resize() {
-    const width = this.config.width || this.container.clientWidth || window.innerWidth;
-    const height = this.config.height || this.container.clientHeight || window.innerHeight * 0.7;
-    
-    this.W = Math.floor(width * this.DPR);
-    this.H = Math.floor(height * this.DPR);
-    
-    this.canvas.width = this.W;
-    this.canvas.height = this.H;
-    this.canvas.style.width = width + 'px';
-    this.canvas.style.height = height + 'px';
-
-    this.buildTargets();
-    if (!this.particles.length) {
-      this.initParticles();
+        // 이미 설정되어 있다면 다시 만들지 않음
+        if (this.intersectionObserver) {
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target !== this.container)
+                    continue;
+                if (entry.isIntersecting) {
+                    this.isVisible = true;
+                    this.start();
+                }
+                else {
+                    this.isVisible = false;
+                    this.stop();
+                }
+            }
+        }, {
+            threshold: 0.1, // 10% 이상 보일 때 동작
+        });
+        this.intersectionObserver.observe(this.container);
     }
-  }
-
-  buildTargets() {
-    const text = this.config.text;
-    this.offCanvas.width = this.W;
-    this.offCanvas.height = this.H;
-    this.offCtx.clearRect(0, 0, this.offCanvas.width, this.offCanvas.height);
-
-    const base = Math.min(this.W, this.H);
-    const fontSize = this.config.fontSize || Math.max(80, Math.floor(base * 0.18));
-    this.offCtx.fillStyle = '#ffffff';
-    this.offCtx.textAlign = 'center';
-    this.offCtx.textBaseline = 'middle';
-    this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;
-
-    // 글자 간격 계산 및 그리기
-    const chars = text.split('');
-    const spacing = fontSize * 0.05;
-    const totalWidth = this.offCtx.measureText(text).width + spacing * (chars.length - 1);
-    let x = this.W / 2 - totalWidth / 2;
-    
-    for (const ch of chars) {
-      this.offCtx.fillText(ch, x + this.offCtx.measureText(ch).width / 2, this.H / 2);
-      x += this.offCtx.measureText(ch).width + spacing;
+    resize() {
+        const width = this.config.width || this.container.clientWidth || window.innerWidth;
+        const height = this.config.height || this.container.clientHeight || window.innerHeight * 0.7;
+        this.W = Math.floor(width * this.DPR);
+        this.H = Math.floor(height * this.DPR);
+        this.canvas.width = this.W;
+        this.canvas.height = this.H;
+        this.canvas.style.width = width + 'px';
+        this.canvas.style.height = height + 'px';
+        this.buildTargets();
+        if (!this.particles.length) {
+            this.initParticles();
+        }
     }
-
-    // 픽셀 샘플링
-    const step = Math.max(2, this.config.densityStep);
-    const img = this.offCtx.getImageData(0, 0, this.W, this.H).data;
-    const targets = [];
-    
-    for (let y = 0; y < this.H; y += step) {
-      for (let x = 0; x < this.W; x += step) {
-        const i = (y * this.W + x) * 4;
-        if (img[i] + img[i + 1] + img[i + 2] > 600) {
-          targets.push({ x, y });
+    buildTargets() {
+        const text = this.config.text;
+        this.offCanvas.width = this.W;
+        this.offCanvas.height = this.H;
+        this.offCtx.clearRect(0, 0, this.offCanvas.width, this.offCanvas.height);
+        const base = Math.min(this.W, this.H);
+        const fontSize = this.config.fontSize || Math.max(80, Math.floor(base * 0.18));
+        this.offCtx.fillStyle = '#ffffff';
+        this.offCtx.textAlign = 'center';
+        this.offCtx.textBaseline = 'middle';
+        this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;
+        // 글자 간격 계산 및 그리기
+        const chars = text.split('');
+        const spacing = fontSize * 0.05;
+        const totalWidth = this.offCtx.measureText(text).width + spacing * (chars.length - 1);
+        let x = this.W / 2 - totalWidth / 2;
+        for (const ch of chars) {
+            this.offCtx.fillText(ch, x + this.offCtx.measureText(ch).width / 2, this.H / 2);
+            x += this.offCtx.measureText(ch).width + spacing;
+        }
+        // 픽셀 샘플링
+        const step = Math.max(2, this.config.densityStep);
+        const img = this.offCtx.getImageData(0, 0, this.W, this.H).data;
+        const targets = [];
+        for (let y = 0; y < this.H; y += step) {
+            for (let x = 0; x < this.W; x += step) {
+                const i = (y * this.W + x) * 4;
+                if (img[i] + img[i + 1] + img[i + 2] > 600) {
+                    targets.push({ x, y });
+                }
+            }
+        }
+        // 파티클 수 제한
+        while (targets.length > this.config.maxParticles) {
+            targets.splice(Math.floor(Math.random() * targets.length), 1);
+        }
+        // 파티클 수 조정
+        if (this.particles.length < targets.length) {
+            const need = targets.length - this.particles.length;
+            for (let i = 0; i < need; i++) {
+                this.particles.push(this.makeParticle());
+            }
+        }
+        else if (this.particles.length > targets.length) {
+            this.particles.length = targets.length;
+        }
+        // 목표 좌표 할당
+        for (let i = 0; i < this.particles.length; i++) {
+            const p = this.particles[i];
+            const t = targets[i];
+            p.tx = t.x;
+            p.ty = t.y;
         }
-      }
     }
-
-    // 파티클 수 제한
-    while (targets.length > this.config.maxParticles) {
-      targets.splice(Math.floor(Math.random() * targets.length), 1);
+    makeParticle() {
+        // 캔버스 전체에 골고루 분포 (여백 없이)
+        const sx = Math.random() * this.W;
+        const sy = Math.random() * this.H;
+        return {
+            x: sx,
+            y: sy,
+            vx: 0,
+            vy: 0,
+            tx: sx,
+            ty: sy,
+            initialX: sx, // 초기 위치 저장 (scatter 시 돌아갈 위치)
+            initialY: sy,
+            j: Math.random() * Math.PI * 2,
+        };
     }
-
-    // 파티클 수 조정
-    if (this.particles.length < targets.length) {
-      const need = targets.length - this.particles.length;
-      for (let i = 0; i < need; i++) {
-        this.particles.push(this.makeParticle());
-      }
-    } else if (this.particles.length > targets.length) {
-      this.particles.length = targets.length;
+    initParticles() {
+        // 캔버스 전체에 골고루 분포 (여백 없이)
+        for (const p of this.particles) {
+            const sx = Math.random() * this.W;
+            const sy = Math.random() * this.H;
+            p.x = sx;
+            p.y = sy;
+            p.vx = p.vy = 0;
+            // 초기 위치 저장 (scatter 시 돌아갈 위치)
+            p.initialX = sx;
+            p.initialY = sy;
+        }
     }
-
-    // 목표 좌표 할당
-    for (let i = 0; i < this.particles.length; i++) {
-      const p = this.particles[i];
-      const t = targets[i];
-      p.tx = t.x;
-      p.ty = t.y;
+    scatter() {
+        // 각 파티클을 초기 위치로 돌아가도록 설정
+        for (const p of this.particles) {
+            // 초기 위치가 저장되어 있으면 그 위치로, 없으면 현재 위치 유지
+            if (p.initialX !== undefined && p.initialY !== undefined) {
+                p.tx = p.initialX;
+                p.ty = p.initialY;
+            }
+            else {
+                // 초기 위치가 없으면 현재 위치를 초기 위치로 저장
+                p.initialX = p.x;
+                p.initialY = p.y;
+                p.tx = p.initialX;
+                p.ty = p.initialY;
+            }
+        }
     }
-  }
-
-  makeParticle() {
-    // 캔버스 전체에 골고루 분포 (여백 없이)
-    const sx = Math.random() * this.W;
-    const sy = Math.random() * this.H;
-    return {
-      x: sx,
-      y: sy,
-      vx: 0,
-      vy: 0,
-      tx: sx,
-      ty: sy,
-      initialX: sx, // 초기 위치 저장 (scatter 시 돌아갈 위치)
-      initialY: sy,
-      j: Math.random() * Math.PI * 2,
-    };
-  }
-
-  initParticles() {
-    // 캔버스 전체에 골고루 분포 (여백 없이)
-    for (const p of this.particles) {
-      const sx = Math.random() * this.W;
-      const sy = Math.random() * this.H;
-      p.x = sx;
-      p.y = sy;
-      p.vx = p.vy = 0;
-      // 초기 위치 저장 (scatter 시 돌아갈 위치)
-      p.initialX = sx;
-      p.initialY = sy;
+    morph(textOrOptions) {
+        // 즉시 실행이 필요한 경우 (예: 초기화 시)를 위해 내부 메서드 직접 호출
+        // 일반적인 경우에는 디바운스 적용
+        this._debouncedMorph(textOrOptions);
     }
-  }
-
-  scatter() {
-    // 각 파티클을 초기 위치로 돌아가도록 설정
-    for (const p of this.particles) {
-      // 초기 위치가 저장되어 있으면 그 위치로, 없으면 현재 위치 유지
-      if (p.initialX !== undefined && p.initialY !== undefined) {
-        p.tx = p.initialX;
-        p.ty = p.initialY;
-      } else {
-        // 초기 위치가 없으면 현재 위치를 초기 위치로 저장
-        p.initialX = p.x;
-        p.initialY = p.y;
-        p.tx = p.initialX;
-        p.ty = p.initialY;
-      }
+    _morphInternal(textOrOptions) {
+        // W와 H가 0이면 resize 먼저 실행
+        if (this.W === 0 || this.H === 0) {
+            this.resize();
+        }
+        if (typeof textOrOptions === 'string') {
+            // 문자열인 경우: 기존 동작 유지
+            this.config.text = textOrOptions;
+            this.buildTargets();
+        }
+        else if (textOrOptions && typeof textOrOptions === 'object') {
+            // 객체인 경우: 텍스트와 함께 다른 설정도 변경
+            const needsRebuild = textOrOptions.text !== undefined;
+            this.config = { ...this.config, ...textOrOptions };
+            if (needsRebuild) {
+                this.buildTargets();
+            }
+        }
+        else {
+            // null이거나 undefined인 경우: 현재 텍스트로 재빌드
+            this.buildTargets();
+        }
     }
-  }
-
-  morph(textOrOptions = null) {
-    // 즉시 실행이 필요한 경우 (예: 초기화 시)를 위해 내부 메서드 직접 호출
-    // 일반적인 경우에는 디바운스 적용
-    this._debouncedMorph(textOrOptions);
-  }
-
-  _morphInternal(textOrOptions = null) {
-    // W와 H가 0이면 resize 먼저 실행
-    if (this.W === 0 || this.H === 0) {
-      this.resize();
+    update() {
+        this.ctx.clearRect(0, 0, this.W, this.H);
+        for (const p of this.particles) {
+            // 목표 좌표로 당기는 힘
+            let ax = (p.tx - p.x) * this.config.ease;
+            let ay = (p.ty - p.y) * this.config.ease;
+            // 마우스 반발/흡입
+            if (this.mouse.x || this.mouse.y) {
+                const dx = p.x - this.mouse.x;
+                const dy = p.y - this.mouse.y;
+                const d2 = dx * dx + dy * dy;
+                const r = this.config.repelRadius * this.DPR;
+                if (d2 < r * r) {
+                    const d = Math.sqrt(d2) + 0.0001;
+                    const f = (this.mouse.down ? -1 : 1) * this.config.repelStrength * (1 - d / r);
+                    ax += (dx / d) * f * 6.0;
+                    ay += (dy / d) * f * 6.0;
+                }
+            }
+            // 진동 효과
+            p.j += 2;
+            ax += Math.cos(p.j) * 0.05;
+            ay += Math.sin(p.j * 1.3) * 0.05;
+            // 속도와 위치 업데이트
+            p.vx = (p.vx + ax) * Math.random();
+            p.vy = (p.vy + ay) * Math.random();
+            p.x += p.vx;
+            p.y += p.vy;
+        }
+        // 파티클 그리기
+        this.ctx.fillStyle = this.config.particleColor;
+        const r = this.config.pointSize * this.DPR;
+        for (const p of this.particles) {
+            this.ctx.beginPath();
+            this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
+            this.ctx.fill();
+        }
+        if (this.config.onUpdate) {
+            this.config.onUpdate(this);
+        }
     }
-    
-    if (typeof textOrOptions === 'string') {
-      // 문자열인 경우: 기존 동작 유지
-      this.config.text = textOrOptions;
-      this.buildTargets();
-    } else if (textOrOptions && typeof textOrOptions === 'object') {
-      // 객체인 경우: 텍스트와 함께 다른 설정도 변경
-      const needsRebuild = textOrOptions.text !== undefined;
-      this.config = { ...this.config, ...textOrOptions };
-      if (needsRebuild) {
-        this.buildTargets();
-      }
-    } else {
-      // null이거나 undefined인 경우: 현재 텍스트로 재빌드
-      this.buildTargets();
+    animate() {
+        if (!this.isRunning)
+            return;
+        this.update();
+        this.animationId = requestAnimationFrame(() => this.animate());
     }
-  }
-
-  update() {
-    this.ctx.clearRect(0, 0, this.W, this.H);
-
-    for (const p of this.particles) {
-      // 목표 좌표로 당기는 힘
-      let ax = (p.tx - p.x) * this.config.ease;
-      let ay = (p.ty - p.y) * this.config.ease;
-
-      // 마우스 반발/흡입
-      if (this.mouse.x || this.mouse.y) {
-        const dx = p.x - this.mouse.x;
-        const dy = p.y - this.mouse.y;
-        const d2 = dx * dx + dy * dy;
-        const r = this.config.repelRadius * this.DPR;
-        if (d2 < r * r) {
-          const d = Math.sqrt(d2) + 0.0001;
-          const f = (this.mouse.down ? -1 : 1) * this.config.repelStrength * (1 - d / r);
-          ax += (dx / d) * f * 6.0;
-          ay += (dy / d) * f * 6.0;
+    start() {
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        this.animate();
+    }
+    stop() {
+        this.isRunning = false;
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
         }
-      }
-
-      // 진동 효과
-      p.j += 2;
-      ax += Math.cos(p.j) * 0.05;
-      ay += Math.sin(p.j * 1.3) * 0.05;
-
-      // 속도와 위치 업데이트
-      p.vx = (p.vx + ax) * Math.random();
-      p.vy = (p.vy + ay) * Math.random();
-      p.x += p.vx;
-      p.y += p.vy;
     }
-
-    // 파티클 그리기
-    this.ctx.fillStyle = this.config.particleColor;
-    const r = this.config.pointSize * this.DPR;
-    for (const p of this.particles) {
-      this.ctx.beginPath();
-      this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
-      this.ctx.fill();
+    setupEventListeners() {
+        window.addEventListener('resize', this.handleResize);
+        this.canvas.addEventListener('mousemove', this.handleMouseMove);
+        this.canvas.addEventListener('mouseleave', this.handleMouseLeave);
+        this.canvas.addEventListener('mousedown', this.handleMouseDown);
+        window.addEventListener('mouseup', this.handleMouseUp);
     }
-
-    if (this.config.onUpdate) {
-      this.config.onUpdate(this);
+    removeEventListeners() {
+        window.removeEventListener('resize', this.handleResize);
+        this.canvas.removeEventListener('mousemove', this.handleMouseMove);
+        this.canvas.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.canvas.removeEventListener('mousedown', this.handleMouseDown);
+        window.removeEventListener('mouseup', this.handleMouseUp);
     }
-  }
-
-  animate() {
-    if (!this.isRunning) return;
-    this.update();
-    this.animationId = requestAnimationFrame(() => this.animate());
-  }
-
-  start() {
-    if (this.isRunning) return;
-    this.isRunning = true;
-    this.animate();
-  }
-
-  stop() {
-    this.isRunning = false;
-    if (this.animationId) {
-      cancelAnimationFrame(this.animationId);
-      this.animationId = null;
+    handleResize() {
+        this.resize();
     }
-  }
-
-  setupEventListeners() {
-    window.addEventListener('resize', this.handleResize);
-    this.canvas.addEventListener('mousemove', this.handleMouseMove);
-    this.canvas.addEventListener('mouseleave', this.handleMouseLeave);
-    this.canvas.addEventListener('mousedown', this.handleMouseDown);
-    window.addEventListener('mouseup', this.handleMouseUp);
-  }
-
-  removeEventListeners() {
-    window.removeEventListener('resize', this.handleResize);
-    this.canvas.removeEventListener('mousemove', this.handleMouseMove);
-    this.canvas.removeEventListener('mouseleave', this.handleMouseLeave);
-    this.canvas.removeEventListener('mousedown', this.handleMouseDown);
-    window.removeEventListener('mouseup', this.handleMouseUp);
-  }
-
-  handleResize() {
-    this.resize();
-  }
-
-  handleMouseMove(e) {
-    const rect = this.canvas.getBoundingClientRect();
-    this.mouse.x = (e.clientX - rect.left) * this.DPR;
-    this.mouse.y = (e.clientY - rect.top) * this.DPR;
-  }
-
-  handleMouseLeave() {
-    this.mouse.x = this.mouse.y = 0;
-  }
-
-  handleMouseDown() {
-    this.mouse.down = true;
-  }
-
-  handleMouseUp() {
-    this.mouse.down = false;
-  }
-
-  // 설정 업데이트
-  updateConfig(newConfig) {
-    // 디바운스 적용
-    this._debouncedUpdateConfig(newConfig);
-  }
-
-  _updateConfigInternal(newConfig) {
-    this.config = { ...this.config, ...newConfig };
-    if (newConfig.text) {
-      this.buildTargets();
+    handleMouseMove(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        this.mouse.x = (e.clientX - rect.left) * this.DPR;
+        this.mouse.y = (e.clientY - rect.top) * this.DPR;
     }
-  }
-
-  // 파괴 및 정리
-  destroy() {
-    this.stop();
-    this.removeEventListeners();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = null;
+    handleMouseLeave() {
+        this.mouse.x = this.mouse.y = 0;
+    }
+    handleMouseDown() {
+        this.mouse.down = true;
     }
-    if (this.canvas && this.canvas.parentNode) {
-      this.canvas.parentNode.removeChild(this.canvas);
+    handleMouseUp() {
+        this.mouse.down = false;
+    }
+    // 설정 업데이트
+    updateConfig(newConfig) {
+        // 디바운스 적용
+        this._debouncedUpdateConfig(newConfig);
+    }
+    _updateConfigInternal(newConfig) {
+        this.config = { ...this.config, ...newConfig };
+        if (newConfig.text) {
+            this.buildTargets();
+        }
+    }
+    // 파괴 및 정리
+    destroy() {
+        this.stop();
+        this.removeEventListeners();
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+        }
+        if (this.canvas && this.canvas.parentNode) {
+            this.canvas.parentNode.removeChild(this.canvas);
+        }
     }
-  }
 }
 
 const MasonEffectComponent = forwardRef((props, ref) => {