From 0f88665d9e41511f0d6ca2844e52f79ad164fd34 Mon Sep 17 00:00:00 2001 From: ssi02014 Date: Thu, 19 Sep 2024 01:57:16 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20useClipboard=20=EB=AC=B8=EC=84=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/react/hooks/useClipboard.mdx | 52 ++++++++------ .../react/src/hooks/useClipboard/index.ts | 69 +++++++++++-------- 2 files changed, 71 insertions(+), 50 deletions(-) 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 }; }