[URH-51] useClipboard 신규

src/hooks/useClipboard.ts

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+import { imgToBlob } from '../utils';
+
+/**
+ * 클립보드에 텍스트나 이미지를 복사하는 커스텀 훅
+ *
+ * @returns {boolean} `copied`: 복사 작업의 성공 여부를 나타내는 플래그
+ * @returns {(string) => Promise<void>} `copyText`: 텍스트를 클립보드에 복사하는 비동기 함수
+ * @returns {(string) => void} `copyImg`: 주어진 경로의 이미지를 클립보드에 복사하는 함수
+ *
+ * @description
+ * 클립보드 API가 지원되지 않는 경우 에러를 발생시킵니다.
+ */
+const useClipboard = () => {
+  const [copied, setCopied] = useState(false);
+
+  if (!navigator.clipboard) {
+    throw new Error('Clipboard API not supported.');
+  }
+
+  const handleCopy = async (copy: () => Promise<void>) => {
+    setCopied(false);
+    try {
+      await copy();
+      setCopied(true);
+    } catch (error) {
+      setCopied(false);
+      console.error(error);
+      throw new Error(`Failed to save to clipboard.`);
+    }
+  };
+
+  const copyText = (text: string) => {
+    handleCopy(() => navigator.clipboard.writeText(text));
+  };
+
+  const copyImg = (path: string) => {
+    imgToBlob(path, async (imgBlob) => {
+      if (!imgBlob) return;
+      handleCopy(() =>
+        navigator.clipboard.write([new ClipboardItem({ 'image/png': imgBlob })])
+      );
+    });
+  };
+
+  useEffect(() => {
+    if (copied) {
+      const timer = setTimeout(() => {
+        setCopied(false);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [copied]);
+
+  return { copied, copyText, copyImg };
+};
+
+export default useClipboard;

src/utils/imgToBlob.ts

@@ -0,0 +1,18 @@
+const img = new Image();
+const canvas = document.createElement('canvas');
+const ctx = canvas.getContext('2d');
+
+export const imgToBlob = (path: string, func: (blob: Blob | null) => void) => {
+  img.crossOrigin = 'Anonymous';
+  img.onload = function () {
+    if (this instanceof HTMLImageElement) {
+      canvas.width = this.naturalWidth;
+      canvas.height = this.naturalHeight;
+      ctx?.drawImage(this, 0, 0);
+      canvas.toBlob((blob) => {
+        func(blob);
+      }, 'image/png');
+    }
+  };
+  img.src = path;
+};

src/utils/index.ts

@@ -2,3 +2,4 @@ export { delayExecution, type CancelToken } from './delayExecution';
 export { throttle } from './throttle';
 export { isClient } from './isClient';
 export { isTouchDevice } from './isTouchDevice';
+export { imgToBlob } from './imgToBlob';