docs: useClipboard 문서 수정

docs/docs/react/hooks/useClipboard.mdx

@@ -4,7 +4,17 @@ import img from '../../../assets/react.png';
 
 # useClipboard
 
-`클립보드`와 상호작용하는 함수들을 포함한 객체를 반환합니다.
+`클립보드`와 상호작용하는 함수들과 저장된 데이터를 포함한 객체를 반환합니다.
+
+클립보드에 복사된 데이터는 `copiedData` 상태에 저장됩니다. `copyText`와 `copyImage`는 `성공 여부(Boolean)`를 반환합니다.
+
+- `copyText`는 주어진 텍스트를 클립보드에 복사하는 함수입니다.
+- `copyImage`는 주어진 이미지 URL을 클립보드에 복사하는 함수입니다.
+
+클립보드에서 읽어온 데이터는 `readData` 상태에 저장됩니다. `readText`와 `readContents`는 `성공 여부(Boolean)`를 반환합니다.
+
+- `readText`는 클립보드에 저장된 텍스트 데이터를 읽어오는 함수입니다.
+- `readContents`는 클립보드에 저장된 텍스트를 포함한 html, 이미지 등 다양한 유형의 컨텐츠를 읽어오는 함수입니다.
 
 <br />
 
@@ -16,10 +26,10 @@ import img from '../../../assets/react.png';
 function useClipboard(): {
  copiedData: string | Blob | null;
  readData: string | ClipboardItems | null;
- readText: () => Promise<string>;
- readContents: () => Promise<ClipboardItems>;
- copyText: (value: string) => Promise<string>;
- copyImage: (src: string, options?: { toText: boolean }) => Promise<string | Blob>;
+ readText: () => Promise<boolean>;
+ readContents: () => Promise<boolean>;
+ copyText: (value: string) => Promise<boolean>;
+ copyImage: (src: string, options?: { toText: boolean }) => Promise<boolean>;
 };
 ```
 
@@ -33,23 +43,23 @@ const Example = () => {
  const [text, setText] = useState('');
 
  const handleCopyText = async () => {
- await copyText(text);
- alert("클립보드에 복사됐습니다. 브라우저 콘솔을 확인해주세요.");
+ const isSuccess = await copyText(text);
+ alert(`isSuccess: ${isSuccess}, 클립보드에 복사됐습니다. 브라우저 콘솔을 확인해주세요.`);
  };
 
  const handleCopyImage = async () => {
- await copyImage(img);
- alert("클립보드에 복사됐습니다. 브라우저 콘솔을 확인해주세요.");
+ const isSuccess = await copyImage(img);
+ alert(`isSuccess: ${isSuccess}, 클립보드에 복사됐습니다. 브라우저 콘솔을 확인해주세요.`);
  };
 
  const handleReadText = async () => {
- await readText(text);
- alert("클립보드에 데이터를 가져왔습니다. 브라우저 콘솔을 확인해주세요.");
+ const isSuccess = await readText(text);
+ alert(`isSuccess: ${isSuccess}, 클립보드에 데이터를 가져왔습니다. 브라우저 콘솔을 확인해주세요.`);
  };
 
  const handleReadContents = async () => {
- await readContents(img);
- alert("클립보드에 데이터를 가져왔습니다. 브라우저 콘솔을 확인해주세요.");
+ const isSuccess = await readContents(img);
+ alert(`isSuccess: ${isSuccess}, 클립보드에 데이터를 가져왔습니다. 브라우저 콘솔을 확인해주세요.`);
  };
 
  useEffect(() => {
@@ -89,23 +99,23 @@ export const Example = () => {
  const [text, setText] = useState('');
 
  const handleCopyText = async () => {
- await copyText(text);
- alert("클립보드에 복사됐습니다. 브라우저 콘솔을 확인해주세요.");
+ const isSuccess = await copyText(text);
+ alert(`isSuccess: ${isSuccess}, 클립보드에 복사됐습니다. 브라우저 콘솔을 확인해주세요.`);
  };
 
  const handleCopyImage = async () => {
- await copyImage(img);
- alert("클립보드에 복사됐습니다. 브라우저 콘솔을 확인해주세요.");
+ const isSuccess = await copyImage(img);
+ alert(`isSuccess: ${isSuccess}, 클립보드에 복사됐습니다. 브라우저 콘솔을 확인해주세요.`);
  };
 
  const handleReadText = async () => {
- await readText(text);
- alert("클립보드에 데이터를 가져왔습니다. 브라우저 콘솔을 확인해주세요.");
+ const isSuccess = await readText(text);
+ alert(`isSuccess: ${isSuccess}, 클립보드에 데이터를 가져왔습니다. 브라우저 콘솔을 확인해주세요.`);
  };
 
  const handleReadContents = async () => {
- await readContents(img);
- alert("클립보드에 데이터를 가져왔습니다. 브라우저 콘솔을 확인해주세요.");
+ const isSuccess = await readContents(img);
+ alert(`isSuccess: ${isSuccess}, 클립보드에 데이터를 가져왔습니다. 브라우저 콘솔을 확인해주세요.`);
  };
 
  useEffect(() => {

packages/react/src/hooks/useClipboard/index.ts

@@ -9,13 +9,10 @@
 interface UseClipboardReturnType {
  copiedData: string | Blob | null;
  readData: string | ClipboardItems | null;
- readText: () => Promise<string>;
- readContents: () => Promise<ClipboardItems>;
- copyText: (value: string) => Promise<string>;
- copyImage: (
- src: string,
- options?: { toText: boolean }
- ) => Promise<string | Blob>;
+ copyText: (value: string) => Promise<boolean>;
+ copyImage: (src: string, options?: { toText: boolean }) => Promise<boolean>;
+ readText: () => Promise<boolean>;
+ readContents: () => Promise<boolean>;
 }
 
 /**
@@ -25,27 +22,41 @@
  * @returns {{
  * copiedData: CopiedData;
  * readData: ReadData;
- * readText: () => Promise<string>;
- * readContents: () => Promise<ClipboardItems>;
- * copyText: (value: string) => Promise<string>;
- * copyImage: (src: string, options?: { toText: boolean }) => Promise<string | Blob>
+ * copyText: (value: string) => Promise<boolean>;
+ * copyImage: (src: string, options?: { toText: boolean }) => Promise<boolean>
+ * readText: () => Promise<boolean>;
+ * readContents: () => Promise<boolean>;
  * }} 클립보드와 상호작용하는 함수들을 포함한 객체를 반환합니다.
  * - `copiedData`: 최근 클립보드에 복사된 데이터입니다.
- * - `readData`: 클립보드를 읽어온 데이터입니다.
- * - `copyText`: 주어진 텍스트를 클립보드에 복사하는 함수입니다.
- * - `copyImage`: 주어진 이미지 URL을 클립보드에 복사하는 함수입니다.
- * - `readText`: 클립보드에 저장된 텍스트 데이터를 읽어오는 함수입니다.
- * - `readContents`: 클립보드에 저장된 텍스트를 포함한 html, 이미지 등 다양한 유형의 컨텐츠를 읽어오는 함수입니다.
+ * - `readData`: 클립보드에서 읽어온 데이터입니다.
+ * - `copyText`: 주어진 텍스트를 클립보드에 복사하는 함수이며, 성공 여부를 반환합니다.
+ * - `copyImage`: 주어진 이미지 URL을 클립보드에 복사하는 함수이며, 성공 여부를 반환합니다.
+ * - `readText`: 클립보드에 저장된 텍스트 데이터를 읽어오는 함수이며, 성공 여부를 반환합니다.
+ * - `readContents`: 클립보드에 저장된 텍스트를 포함한 html, 이미지 등 다양한 유형의 컨텐츠를 읽어오는 함수이며, 성공 여부를 반환합니다.
  *
  * @example
  * const { copiedData, copyText, copyImage } = useClipboard();
- * copyText('modern-kit'); // 문자열을 클립보드에 저장
- * copyImage(imgSrc); // 이미지를 클립보드에 저장
+ * copyText('modern-kit');
+ * // 성공 시 true, 실패 시 false 반환
+ * // 문자열을 클립보드에 저장합니다.
+ *
+ * copyImage(imgSrc);
+ * // 성공 시 true, 실패 시 false 반환
+ * // 이미지를 클립보드에 저장합니다.
+ *
+ * copiedData; // 최근 클립보드에 복사된 데이터입니다.
  *
  * @example
  * const { readData, readText, readContents } = useClipboard();
- * readText(); // 클립보드에 저장된 텍스트를 읽어옵니다.
- * readContents(); // 클립보드의 텍스트를 포함한 html, 이미지 등 다양한 유형의 컨텐츠를 읽어옵니다.
+ * readText();
+ * // 성공 시 true, 실패 시 false 반환
+ * // 클립보드에 저장된 텍스트를 읽어옵니다.
+ *
+ * readContents();
+ * // 성공 시 true, 실패 시 false 반환
+ * // 클립보드의 텍스트를 포함한 html, 이미지 등 다양한 유형의 컨텐츠를 읽어옵니다.
+ *
+ * readData; // 클립보드에서 읽어온 데이터입니다.
  */
 export function useClipboard(): UseClipboardReturnType {
  const [copiedData, setCopiedData] = useState<string | Blob | null>(null);
@@ -57,10 +68,10 @@
  try {
  const result = await copyClipboardText(value);
  setCopiedData(result);
- return result;
+ return true;
  } catch (err: any) {
  setCopiedData(null);
- throw err;
+ return false;
  }
  }, []);
 
@@ -71,10 +82,10 @@
  try {
  const result = await copyClipboardImage(src, { toText });
  setCopiedData(result);
- return result;
+ return true;
  } catch (err: any) {
  setCopiedData(null);
- throw err;
+ return false;
  }
  },
  []
@@ -84,23 +95,23 @@
  try {
  const result = await readClipboardText();
  setReadData(result);
- return result;
+ return true;
  } catch (err: any) {
  setReadData(null);
- throw err;
+ return false;
  }
  }, []);
 
  const readContents = useCallback(async () => {
  try {
  const result = await readClipboardContents();
  setReadData(result);
- return result;
+ return true;
  } catch (err: any) {
  setReadData(null);
- throw err;
+ return false;
  }
  }, []);
 
- return { copiedData, readData, readText, readContents, copyText, copyImage };
+ return { copiedData, readData, copyText, copyImage, readText, readContents };
 }