[Next.js] 링크 복사 기능을 만들어보자(with. Typescript)

개요

많음 홈페이지에 있는 카카오톡과 링크복사 기능, 이번엔 가장 기본적인 링크복사 기능 구현에 대해 작성해보려고 한다.

참고 링크

핵심

 if (navigator.clipboard) {
                  navigator.clipboard
                    .writeText(window && window.location.href)
                    .then(handleClick)
                    .catch(() => {
                      alert("복사를 다시 시도해주세요.");
                    });
                }


정말 핵심은 저게 전부인 것 같다.
handleClick 자리에는 입력되고 난 후 발생할 이벤트를 넣으면 된다.
(저는 팝업창이 뜨는 이벤트를 설정했읍니다.)

후기

기능을 만들기 전에 지레 겁먹지 말자 구글은 늘 정답을 알고 있으니..