diff --git a/docs/docs/react/hooks/useClipboard.mdx b/docs/docs/react/hooks/useClipboard.mdx
index 8f70e33ef..d7408d36d 100644
--- a/docs/docs/react/hooks/useClipboard.mdx
+++ b/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, 이미지 등 다양한 유형의 컨텐츠를 읽어오는 함수입니다.
@@ -16,10 +26,10 @@ import img from '../../../assets/react.png';
function useClipboard(): {
copiedData: string | Blob | null;
readData: string | ClipboardItems | null;
- readText: () => Promise;
- readContents: () => Promise;
- copyText: (value: string) => Promise;
- copyImage: (src: string, options?: { toText: boolean }) => Promise;
+ readText: () => Promise;
+ readContents: () => Promise;
+ copyText: (value: string) => Promise;
+ copyImage: (src: string, options?: { toText: boolean }) => Promise;
};
```
@@ -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(() => {
diff --git a/packages/react/src/hooks/useClipboard/index.ts b/packages/react/src/hooks/useClipboard/index.ts
index 6b51f3d16..447d7f7b7 100644
--- a/packages/react/src/hooks/useClipboard/index.ts
+++ b/packages/react/src/hooks/useClipboard/index.ts
@@ -9,13 +9,10 @@ import {
interface UseClipboardReturnType {
copiedData: string | Blob | null;
readData: string | ClipboardItems | null;
- readText: () => Promise;
- readContents: () => Promise;
- copyText: (value: string) => Promise;
- copyImage: (
- src: string,
- options?: { toText: boolean }
- ) => Promise;
+ copyText: (value: string) => Promise;
+ copyImage: (src: string, options?: { toText: boolean }) => Promise;
+ readText: () => Promise;
+ readContents: () => Promise;
}
/**
@@ -25,27 +22,41 @@ interface UseClipboardReturnType {
* @returns {{
* copiedData: CopiedData;
* readData: ReadData;
- * readText: () => Promise;
- * readContents: () => Promise;
- * copyText: (value: string) => Promise;
- * copyImage: (src: string, options?: { toText: boolean }) => Promise
+ * copyText: (value: string) => Promise;
+ * copyImage: (src: string, options?: { toText: boolean }) => Promise
+ * readText: () => Promise;
+ * readContents: () => Promise;
* }} 클립보드와 상호작용하는 함수들을 포함한 객체를 반환합니다.
* - `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(null);
@@ -57,10 +68,10 @@ export function useClipboard(): UseClipboardReturnType {
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 @@ export function useClipboard(): UseClipboardReturnType {
try {
const result = await copyClipboardImage(src, { toText });
setCopiedData(result);
- return result;
+ return true;
} catch (err: any) {
setCopiedData(null);
- throw err;
+ return false;
}
},
[]
@@ -84,10 +95,10 @@ export function useClipboard(): UseClipboardReturnType {
try {
const result = await readClipboardText();
setReadData(result);
- return result;
+ return true;
} catch (err: any) {
setReadData(null);
- throw err;
+ return false;
}
}, []);
@@ -95,12 +106,12 @@ export function useClipboard(): UseClipboardReturnType {
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 };
}