[NextJS] 카카오톡 인앱 navigator.share 안될 때

📱테스트 환경

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

---

😢 내가 겪은 문제

바로 어제도 아니다. 몇 시간 전 포스팅에서 카카오톡 인앱에서 이미지 다운로드 하는 방법을 기록했다.

[NextJS] 카카오톡 인앱 웹뷰에서 이미지 다운로드 하는 방법

아침에 일어나고 보니 navigator.share 도 안된다는걸 확인했다.

잘때도 다른건 잘 되는지 계속 고민하다가 피곤해서 잠들었는데 우려가 현실이 됐다 ..

전에 시스템 공유를 하는 방법을 공유했는데, 이게 Android WebView 에서는 안된다고 하더라....?

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

워낙 자주 쓰는거라서 따로 정보를 찾아보지도 않았었는데 이게 왜 진짜인지 모르겠지만 ... 지원하지 않는다 .. [ 문서보기 ]

Navigator.share - Web API | MDN

Android WebView No 참 빨갛게도 잘 써있다 ^^.. 아무튼 따로 대응을 해주지 않으면 그냥 반응없는 버튼이 되어버리니 ..

다른 웹페이지들처럼 URL 을 복사할 수 있도록 처리를 해보도록 해야겠다 ..

맨 처음 조건에 해당 조건을 추가해줘서 시스템 공유가 안되면 URL 복사할 수 있도록 하면된다.

navigator.share !== undefined

전체 코드는 이렇다.

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 && navigator.share !== undefined) {
    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;
  }
};