Just Do It!

1. 구현목표

웹사이트를 이용하면서 많이 쓰이는 클립보드 복사 기능을 구현하고싶었다.

먼저 모바일 환경을 생각해서 Web Share API을 이용할지 고민하다가, Web Share API이 PC 크롬에서는 지원되지 않기도하고 블로그가 네이티브 앱이 아니기에 단순히 url을 복사해주는 기능만 있어도되서 Clipboard API를 이용하기로 했다.

추후 모바일 앱을 만들 때 Web Share API을 이용해보기로 하고, 내 블로그에 필요한 기능에 맞춰 구현해보자.

메인 페이지에 url 공유기능
포스트 페이지마다 url 공유기능

2. 해결과정

1-0. copyURL 함수 만들기

COPY

const copyURLToClipboard = async (text) => {
    try {
      await navigator.clipboard.writeText(text);
      alert("클립보드에 링크가 복사되었습니다.");
    } catch (e) {
      alert("복사에 실패하였습니다");
    }
};

1-1. 메인 페이지에 url 공유기능

기존에 만들어둔 링크부분이 다른 항목은 href 지만, 공유해주는 부분은 onClick으로 되어야해서 아예 분리해서 작업했다.

COPY

import React, { useCallback } from "react";

const Shortcut = ({ links }) => { 

  return (
    <div className="tooltip-wrap">
      {Object.keys(links).map((link, index) => {
        return (
          links[link] && (
            <>
              {" "}
              {link !== "share" ? (
                  ...
              ) : (
                <>
                  <a onClick={() => copyURLToClipboard(`${links[link]}`)}                    className="group tooltip"                    key={index}>                    {IconPicker(link)}
                    <div className="con group-hover:opacity-100">
                      {link}
                      ...
                    </div>
                  </a>
                </>
              )}
            </>
          )
        );
      })}
    </div>
  );
};

export default Shortcut;

1-2. 포스트 페이지마다 url 공유기능

이 부분은 아이콘 컴포넌트를 추가하여 구현하였다.

COPY

import * as React from "react";

export const ShareButton = ({ text }) => { 
  return (
    <>
      <button
        className="share-btn"
        onClick={() => copyURLToClipboard(`${text}`)}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          stroke="currentColor"
          className="w-6 h-6"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
          />
        </svg>
      </button>
    </>
  );
};

먼저 ShareButton.js을 생성하여 버튼을 만들어주었고, post를 만들어주는 template page에 추가하였다.
여기에도 마찬가지로 핵심코드를 넣어주어 원하는 클립보드 복사 기능을 완성시켰다.

JustDoIt.me

React에서 클립보드 복사 기능 구현하기

1. 구현목표

2. 해결과정

1-0. copyURL 함수 만들기

1-1. 메인 페이지에 url 공유기능

1-2. 포스트 페이지마다 url 공유기능