[React.js] 클립보드 복사 라이브러리, 복사버튼 컴포넌트 생성

텍스트를 복사하는 버튼 기능이 있어 리액트 환경 복사기능을 지원해주는 react-copy-to-clipboard 라는 라이브러리를 활용해 아래와 같이 작업하였다.

import { CopyToClipboard } from 'react-copy-to-clipboard'

const My = () => {...
  return (
    <Fragment>
      ...
            <div className="table">
              <ul className="key">
                <li>쿠폰 코드</li>
              </ul>
              <ul className="value">
                <li>
                  <em>복사할 텍스트</em>
                  <CopyToClipboard
                    text="복사할 텍스트" // 하드코딩
                    onCopy={() => alert('클립보드에 복사되었습니다.')}
                  >
                    <Button color="tertiary" size={'xs'}>
                      복사
                    </Button>
                  </CopyToClipboard>
                </li>
              </ul>
            </div>
          </div>
        </div>...
  )
}

하지만 해당 버튼이 다른페이지에서도 중복 사용되어 컴포넌트로 다시 재구성하여 작업해보았다.

복사가 되었다는 알림을 띄운 후 2초 뒤에 해당 알림이 사라지도록 useState 를 사용하였다. (isCopied)

// CopyButton.js

import { Fragment, useState } from 'react'
import Button from '@/components/Button'
import { CopyToClipboard } from 'react-copy-to-clipboard'
import { css } from '@emotion/react'

const toast = (bottom) => css`
  position: fixed;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  bottom: ${bottom};
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  background-color: #222;
  animation: fadeToast 1s ease-out 1s both;
  white-space: nowrap;
`

const CopyButton = ({
  className,
  children,
  copyText = '',
  toastText = '',
  bottom = '20px',
  color,
  size
}) => {
  const [isCopied, setIsCopied] = useState(false)
  const handleCopy = () => {
    setIsCopied(true)
    setTimeout(() => {
      setIsCopied(false)
    }, 2000)
  }

  return (
    <Fragment>
      <CopyToClipboard text={copyText} onCopy={handleCopy}>
        <Button color={color} size={size} className={className}>
          {children}
        </Button>
      </CopyToClipboard>
      {isCopied && <div css={toast(bottom)}>{toastText}</div>}
    </Fragment>
  )
}

export default CopyButton

코드 리뷰 당시 해당 부분은 라이브러리 없이 하드코딩으로 충분히 작업이 가능할 것 같다는 의견이 있어 더 찾아본 결과 document.execCommand() 라는 함수도 있었는데, 해당 기능은 비효율적인 로직으로 인해 지양되고 그 대체제로 Clipboard API 라는 기능이 권장되고 있었다.

앞으로 간단한 기능은 라이브러리 없이 하드코딩 작업을 더 해봐야겠다는 생각이 들었다.

참고: https://velog.io/@hayoung474/React-문자열-클립보드-복사-기능-구현-copy-to-clipboard