[NextJS] NextJS 모바일 시스템공유 하는방법

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

이 코드는 정말 많이 사용하는 것 같다 ..

아무래도 모바일 대응을 하다보면 공유하기 버튼을 클릭 했을 때 시스템 공유 모달이 열리게 하고 싶은 경우가 많아서 그렇다.

그래서 언제든지 꺼내사용할 수 있도록 여기에 기록하려고 한다 .

언제나 똑같이 복사 + 붙여넣기 하면 바로 사용할 수 있도록 .. 개발을 못하는 나를 위해 복붙은 언제나 중요한 것 같다 ^^

share.tsx

export const testShare = () => {
  const baseUrl = window.location.origin;
  const url = new URL("/", baseUrl);
  const userAgent = window.navigator.userAgent;
  const isMobile =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      userAgent
    );
  if (isMobile) {
    if (navigator.share) {
      navigator
        .share({
          title: "타이틀",
          text: "내용",
          url: url.toString(),
        })
        .then(() => {
          console.log("공유 완료");
          return isMobile;
        })
        .catch((error) => {
          console.error("공유 실패:", error);
        });
    }
  } else {
    const textArea = document.createElement("textarea");
    textArea.value = url.toString();
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
    console.log("URL이 복사되었습니다:", url);
    return isMobile;
  }
};

코드를 보면 바로 알 수 있겠지만

PC 에서 버튼을 클릭했을 경우에는 URL 복사

모바일에서 버튼을 클릭했을 경우에는 시스템 공유모달이 열리도록 코드를 작성하였다.