anonymousRecords
commented
3 weeks ago 📌 해결 방법
1. 참고 커밋 기존의 코드는 아래와 같다.
async function handleShareLink() {
if (navigator.share) {
try {
await navigator.share({
title: "EO Galaxy",
text: "EO Galaxy",
url: "https://eo-galaxy.vercel.app/",
});
console.log("Success share link");
} catch (error) {
console.error("Error sharing link", error);
}
} else {
console.error("Web Share API is not supported in this browser.");
alert("링크 공유 기능이 지원되지 않는 브라우저입니다.");
}
};share api의 경우, chrome에서 부분적으로 지원하고 있음을 확인이 가능하다.
따라서 위처럼 chrome에서는 share api가 지원되지 않아서, if else문에서 else로 빠져서 alert가 실행되게 된다.
2.
Web Share API 사용하기 아티클에서 확인이 가능하듯이, share api가 지원이 안 되는 경우, 자체 구현을 하여 작동을 하게 하면 된다.
따라서 아래와 같이 코드를 작성하여 구현하였다.
async function handleShareLink() {
if (navigator.share) {
try {
await navigator.share({
title: "EO Galaxy",
text: "EO Galaxy",
url: "https://eo-galaxy.vercel.app/",
});
console.log("Success share link");
} catch (error) {
console.error("Error sharing link", error);
}
} else {
openBottomSheet(); // 바텀시트 오픈
console.error("Web Share API is not supported in this browser.");
}
}BottomSheet 컴포넌트를 구현하여, share api가 지원이 안 되는 경우 bottom sheet를 통해 해당 웹 사이트 url을 복사하게 하였다.
📌 문제 상황
[데스크탑] Chrome
<아이폰 기준> [모바일] 공유하기 버튼 클릭 시
[모바일] 복사하기
[모바일] KakaoTalk
[모바일] 문자
[모바일] Twitter
데스크탑에서, Chrome일 경우 제대로 기능이 작동하지 않는다. 모바일의 경우, 아이폰 대상으로 기능이 제대로 작동은 하였지만, 공유 화면을 꾸며야 할 필요성을 느낌.