social media로 웹 페이지 공유하기 (모바일 웹)
공유하기 기능은 웹에서 제공하는 Web Share API를 사용하는 것이 가장 간편하다.
이 Web Share API가 지원되는 디바이스에서는 호출 시 브라우저에서 자체 제공하는 다이얼로그를 띄워준다.
그러나! 모든 디바이스 , 브라우저에서 Web Share API를 지원하지 않는다.
IOS mobile device에서는 사파리로 접속하든 크롬, 네이버, 다음 앱으로 접속하든 Web Share API가 작동하며 IOS 자체 다이얼로가 열린다. 하지만 Android는 다르다.
Android mobile device에서는 크롭 브라우저에서만 Web Share API가 작동하며, 그 외 예컨대 네이버 앱이나 다음 앱으로 접속 시 공유 기능이 작동하지 않는다. => 공유기능 자체구현의 필요성..!
다이얼로그에서 제공하는 기능이 많기 때문에 Web Share API가 지원되는 환경에서는 Web Share API를 우선적으로 사용하고, 그 외에 지원되지 않는 환경에서만 자체구현한 공유하기 화면을 띄워주는 것이 좋다.
아래처럼 navigator.share로 분기점을 나눠 개발한다.
if (navigator.share) {
navigator.share({
title: "나의 사이트",
url: `사이트 공유 주소`,
});
} else {
//그 외 자체구현한 공유화면 띄워주기
setOpenShareModal(true);
}공유하기 자체구현 코드
-카카오, 네이버밴드, 카카오스토리, 페이스북, 트위터, 주소복사 총 6가지 공유기능을 제공하도록 구현했다
-클립보드 복사 기능은 보통 navigator.clipboard 를 사용하는데 이게 모바일에서는 작동을 안 한다.
그래서 react-copy-to-clipboard라는 패키지를 설치해서 구현했다.
import { Dispatch, SetStateAction, useEffect } from "react";
import "./style/ShareModal.scss";
import { shareKakao } from "../../../utils/shareKakaoLink";
import { shareKakaoStory } from "../../../utils/shareKakaoStoryLink";
import { CopyToClipboard } from "react-copy-to-clipboard";
export const ShareModal = ({
productId,
productName,
imagePath,
setShareModal,
}: {
productId: string;
productName?: string;
imagePath?: string;
setShareModal: Dispatch<SetStateAction<boolean>>;
}) => {
useEffect(() => {
document.body.setAttribute("style", "overflow: hidden");
const script = document.createElement("script");
script.src = "https://developers.kakao.com/sdk/js/kakao.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.setAttribute("style", "overflow: auto");
document.body.removeChild(script);
};
}, []);
const handleClickShareBtn = (url: string) => {
window.open(url, "_blank");
setShareModal(false);
};
return (
<div id="ShareModal">
<div className="bg_modal" onClick={() => setShareModal(false)}></div>
<div className="share_box">
<h2 className="font_600">공유하기</h2>
<ul className="ul">
<li
onClick={() => {
shareKakao(
`공유할 주소`,
productName,
imagePath,
productId
);
setShareModal(false);
}}
>
<img
className="logo_kakao"
src="/assets/logo/logo_kakao.svg"
alt="카카오 아이콘"
/>
<span>카카오톡</span>
</li>
<li
onClick={() =>
handleClickShareBtn(
`https://band.us/plugin/share?body=공유할 주소&route=공유할도메인`
)
}
>
<img
className="logo_band"
src="/assets/logo/logo_band.png"
alt="밴드 아이콘"
/>
<span>네이버밴드</span>
</li>
<li
onClick={() => {
shareKakaoStory(productName, productId);
setShareModal(false);
}}
>
<img
className="logo_kakaoStory"
src="/assets/logo/logo_kakaoStory.png"
alt="밴드 아이콘"
/>
<span>카카오스토리</span>
</li>
<li
onClick={() =>
handleClickShareBtn(
`https://www.facebook.com/sharer/sharer.php?u=공유할주소`
)
}
>
<img
className="logo_fb"
src="/assets/logo/logo_facebook.svg"
alt="페이스북 아이콘"
/>
<span>페이스북</span>
</li>
<li
onClick={() =>
handleClickShareBtn(
`https://twitter.com/intent/tweet?text=${productName}&url=공유할주소`
)
}
>
<img
className="logo_twitter"
src="/assets/logo/logo_twitter.svg"
alt="트위터 아이콘"
/>
<span>트위터</span>
</li>
<li>
<CopyToClipboard
text={`공유할 주소`}
>
<section>
<img
className="icon_clipboard"
src="/assets/icons/link_share.png"
alt=""
/>
<span>주소복사</span>
</section>
</CopyToClipboard>
</li>
</ul>
<span className="close" onClick={() => setShareModal(false)}>
닫기
</span>
</div>
</div>
);
};
카카오, 카카오스토리로 공유하기 기능을 사용하기 위해서는 카카오 JavaScript SDK를 이용해야한다. 카카오 개발자에서 애플리케이션을 등록하고 애플리케이션 JS Key를 가져와 초기화를 한 뒤 share API를 이용한다. 아래 코드 참고
//React에서는 useEffect 안에 아래 코드를 넣어 카카오톡 sdk를 등록한다.
const script = document.createElement("script");
script.src = "https://developers.kakao.com/sdk/js/kakao.js";
script.async = true;
document.body.appendChild(script);//카카오톡 공유하기
export const shareKakao = (uri, productName, imgPath, productId) => {
if (window.Kakao) {
const kakao = window.Kakao;
if (!kakao.isInitialized()) {
kakao.init(process.env.REACT_APP_KAKAO_JS_KEY);
}
kakao.Link.sendDefault({
objectType: "feed",
content: {
title: productName,
imageUrl: imgPath,
link: {
mobileWebUrl: `공유할주소`, // 인자값으로 받은 route(uri 형태)
webUrl: `공유할주소`,
},
},
buttons: [
{
title: "자세히보기",
link: {
mobileWebUrl: `공유할주소`,
webUrl: `공유할주소`,
},
},
],
});
}
};
//카카오스토리 공유하기
export const shareKakaoStory = (productName, productId) => {
if (window.Kakao) {
const kakao = window.Kakao;
if (!kakao.isInitialized()) {
kakao.init(process.env.REACT_APP_KAKAO_JS_KEY);
}
kakao.Story.share({
url: `공유할 주소`,
text: productName,
});
}
};
