계좌번호를 클릭하여 복사하는 기능을 만들어보자

우리는 토스뱅크, 카카오뱅크 등 여러 은행 어플을 이용할 때, 계좌를 터치하여 계좌번호를 복사해 다른 어플에서 붙여넣어 편하게 계좌이체를 한다.

그래서 오늘은 이 기능을 웹상에서 어떻게 구현할 수 있는지 소개해보고자 한다.

구글링을 해보니 웹상에서는 Clipboard API를 사용하여 구현을 할 수 있다고 한다.

간혹 Document.execCommand를 사용하는 글이 있는데 deprecated가 되었으므로 Clipboard API를 사용하자.

Clipboard API

MDN에 따르면 clipboard api는 window와 같은 전역 인터페이스인 navigator인터페이스의 clipboard프로퍼티를 이용하면 된다고 나와있다. 그리고 이 API는 HTTPS에서만 사용가능하다.

Clipboard API는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다. - MDN

writeText()

우리는 문자열을 복사할 것 이기 때문에 writeText메서드를 사용한다. write() 메서드도 있지만 문자열 이외에는 복사할일이 없기에 writeText메서드를 선택하였다. (getText()메서드도 마찬가지이다.)

writeText method는 Promise를 리턴한다.

사용방법은 간단하다.

  const copyToClipboard = async (text: string) => {
    try {
      if (navigator.clipboard) {
        await navigator.clipboard.writeText(text);
      }
    } catch (error) {
      console.error("Failed to copy to clipboard: ", error);
    }
  };

다른곳에서도 사용될 수 있는 가능성이 있기 때문에 커스텀 훅으로 작성해보자.

import { useEffect, useState } from "react";

const useCopyClipboard = () => {
  

  const copyToClipboard = async (text: string) => {
    try {
      if (navigator.clipboard) {
        await navigator.clipboard.writeText(text);
      }
    } catch (error) {
      console.error("Failed to copy to clipboard: ", error);
    }
  };

  
  const getTextFromClipboard = async () => {
    try {
      if (navigator.clipboard) {
        const text = await navigator.clipboard.readText();
        return text;
      }
      return "";
    } catch (error) {
      console.error("Failed to read from clipboard: ", error);
      return "";
    }
  };

  return { copyToClipboard, getTextFromClipboard };
};

export default useCopyClipboard;

Clipboard API를 위한 커스텀훅을 구현하고 필요한곳에서 사용하면 끝이다!

const { copyToClipboard } = useCopyClipboard;
const account = '기업은행 1234-5678'

<button onClick={() => copyToClipboard(account)} /> 

실제로 웹앱상에서 테스트를 해봤는데 복사도 잘 되고 복사한채로 은행어플에 들어가면 복사한 텍스트를 읽어와 은행정보+계좌를 띄어주고 바로 이체할수 있도록 UI가 나타난다.

아마 Clipboard API의 readText를 통해 text 정보를 가져오고 정규식을 통해 은행과 계좌정보를 파싱하지 않을까 생각한다.

은행어플을 쓰면서 항상 궁금했던 기능인데 직접 구현해보니 궁금증도 해결되고 흥미로웠던 시간이였다.