KooKs

예시

API

개발 및 사용환경

사용법

1// 기본 사용
2const { handleCopy, handlePaste } = useClipboard();
3
4// 텍스트 복사
5const copyText = async () => {
6  const success = await handleCopy('복사할 텍스트');
7  if (success) {
8    console.log('복사 성공');
9  }
10};
11
12// 텍스트 붙여넣기
13const pasteText = async () => {
14  const text = await handlePaste();
15  if (text) {
16    console.log('붙여넣은 텍스트:', text);
17  }
18};

Hook

1/**
2 * 클립보드 복사 및 붙여넣기 기능을 제공하는 Hook
3 *
4 * 이 훅은 클립보드 API를 사용하여 텍스트를 복사하고 붙여넣는 기능을 제공합니다.
5 * 브라우저 호환성을 자동으로 체크하며, 지원되지 않는 경우 적절한 에러 처리를 수행합니다.
6 *
7 * @returns {Object} 클립보드 관련 함수들을 포함한 객체
8 *   - handleCopy: 텍스트를 클립보드에 복사하는 함수
9 *   - handlePaste: 클립보드에서 텍스트를 읽어오는 함수
10 */
11export function useClipboard() {
12  /**
13   * 텍스트를 클립보드에 복사하는 함수
14   * @param text - 클립보드에 복사할 텍스트
15   * @returns 복사 성공 여부를 나타내는 boolean 값
16   */
17  const handleCopy = async (text: string): Promise<boolean> => {
18    if (!navigator.clipboard) {
19      console.warn("useClipboard: Clipboard API is not supported");
20      return false;
21    }
22
23    try {
24      await navigator.clipboard.writeText(text);
25      return true;
26    } catch (error) {
27      console.error("useClipboard: Failed to copy text", error);
28      return false;
29    }
30  };
31
32  /**
33   * 클립보드에서 텍스트를 읽어오는 함수
34   * @returns 클립보드의 텍스트 또는 읽기 실패 시 false
35   */
36  const handlePaste = async (): Promise<string | false> => {
37    if (!navigator.clipboard) {
38      console.warn("useClipboard: Clipboard API is not supported");
39      return false;
40    }
41
42    try {
43      const text = await navigator.clipboard.readText();
44      return text;
45    } catch (error) {
46      console.error("useClipboard: Failed to paste text", error);
47      return false;
48    }
49  };
50
51  return { handleCopy, handlePaste };
52}
53