Merge pull request #50 from frontend-opensource-project/URH-67/use-prevent-copy

[URH-67] usePreventCopy 신규

Author: bicochan

src/hooks/usePreventCopy.test.ts

@@ -0,0 +1,40 @@
+import { act, renderHook } from '@testing-library/react';
+import usePreventCopy from './usePreventCopy';
+
+describe('usePreventCopy', () => {
+  it("'copy' 이벤트가 발생하면 기본 동작을 차단하고, 콜백 함수가 호출된다.", () => {
+    const callback = jest.fn();
+
+    renderHook(() => usePreventCopy(callback));
+
+    const copyEvent = new Event('copy', {
+      bubbles: true,
+      cancelable: true,
+    }) as ClipboardEvent;
+
+    act(() => {
+      window.dispatchEvent(copyEvent);
+    });
+
+    expect(copyEvent.defaultPrevented).toBe(true);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("'cut' 이벤트가 발생하면 기본 동작을 차단하고, 콜백 함수가 호출된다.", () => {
+    const callback = jest.fn();
+
+    renderHook(() => usePreventCopy(callback));
+
+    const cutEvent = new Event('cut', {
+      bubbles: true,
+      cancelable: true,
+    }) as ClipboardEvent;
+
+    act(() => {
+      window.dispatchEvent(cutEvent);
+    });
+
+    expect(cutEvent.defaultPrevented).toBe(true);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});

src/hooks/usePreventCopy.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+/**
+ * 브라우저에서 복사 이벤트를 차단하는 훅
+ *
+ * @param {VoidFunction} callback - 복사 이벤트가 발생할 때 실행될 콜백 함수
+ *
+ * @description 복사 이벤트를 차단하고 콜백 함수를 실행합니다.
+ */
+const usePreventCopy = (callback?: () => void) => {
+  const preventCopy = (e: ClipboardEvent) => {
+    e.preventDefault();
+    callback?.();
+  };
+
+  useEffect(() => {
+    // TODO: useEventListener 적용하기
+    window.addEventListener('copy', preventCopy);
+    window.addEventListener('cut', preventCopy);
+    return () => {
+      window.removeEventListener('copy', preventCopy);
+      window.removeEventListener('cut', preventCopy);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+export default usePreventCopy;