[URH-51] useClipboard 신규

[bicochan]

👾 Pull Request

• 티켓: useClipboard 신규
• 상태: 신규 (+테스트 코드 작성 중)

1️⃣ Spec

• 텍스트와 이미지를 클립보드에 복사하는 훅
• 복사된 상태를 제공하여 토스트 팝업과 함께 사용할 때 유용

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

const { copied, copyText, copyImg } = useClipboard();

return (
  <div>
    <button 
      onClick={() => copyText('Hello World')}>
      Copy Text
    </button>
    <button
      onClick={() => copyImg('https://avatars.githubusercontent.com/u/173591906?s=200&v=4')}>
      Copy Image
    </button>
    <p> {copied ? 'Copied!' : ''}</p>
  </div>
);

4️⃣ 관련 문서 (선택 사항)

• MDN Clipboard API

[foresec]

수고많으셨습니다👍👍

[suhyeoonn]

[P4] 이 페이지 와 같이 한 페이지에 여러 개의 복사 기능이 있을 경우,
각 복사에 대한 상태는 개별적으로 관리해야하는 상황이 생길 것 같은데 현재는 상태를 하나로 공유하고 있어서요!
예를 들어 코드가 다음과 같을 때 hi를 복사하면 Copy hello 버튼의 상태까지 Copied로 변경되어 버리는 문제가 있습니다..!
현재로도 괜찮지만, 이런 개선 사항을 고려해봐도 좋을지 의견 여쭙습니다😃

const { copied, copyText } = useClipboard();

  return (
    <div>
      <button onClick={() => copyText('hi')}>
        {copied ? 'Copied!' : 'Copy hi'}
      </button>
      <button onClick={() => copyText('hello')}>
        {copied ? 'Copied!' : 'Copy hello'}
      </button>
    </div>
  );

[suhyeoonn]

수고하셨습니다~!! 유용한 훅이네요 👍👍

[foresec]

추후 테스트코드까지 추가해시면 될것같네요! 수고많으셨습니다😊