1. 카카오 디벨롭스 : 앱등록 + 플랫폼 도메인 등록
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
(1) navbar 내 애플리케이션 > 애플리케이션 추가하기
(2) Mango 클릭 > JavaScript 키 확인 ( ⭐ .env 파일에 저장해서 사용하기)
(3) 플랫폼 > 웹 : 사이트 도메인: localhost:3000 등록
(테스트할때도 3000으로 해야함)
2. index.html에 카카오 SDK 스크립트 + API key 추가
( ⭐ .env 파일 사용하기)
//index.html
<head>
<script
src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js"
integrity="%REACT_APP_KAKAO_INTERGRITY%"
crossorigin="anonymous"
></script>
<script>
Kakao.init('%REACT_APP_KAKAO_API_KEY%');
</script>
</head>⭐integrity & API key = .env파일에 추가 후 '%환경변수%'으로 사용하기
▼JavaScriptSDK 설치 : 최신버전 Full SDK </> ▼
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
▼JavaScriptSDK 설치 + 초기화 ▼
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
3. index.d.ts에 Kakao 객체에 대한 타입 지정
//index.d.ts
interface Window {
Kakao: any;
}⭐타입스크립트를 사용하기에, 타입 지정해주기
(=Window 객체 확장해서 인터페이스로 정의)
4. 공유하기 기능 구현 (hook)
// useKaKaoShare.ts
const useKaKaoShare = () => {
const handleShareKakaoClick = (title: string, detailURL: string) => {
if (window.Kakao) {
window.Kakao.Share.sendDefault({
objectType: 'feed',
content: {
title,
description: '망고망고',
imageUrl: 'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
link: {
mobileWebUrl: detailURL
}
},
buttons: [
{
title: '보러 가기',
link: {
mobileWebUrl: detailURL
}
}
]
});
}
};
return { handleShareKakaoClick };
};
export default useKaKaoShare;▶ 현재 보고있는 페이지를 공유 목적 (제목과 디테일페이지 url 매개변수로 전달)
▶ 이미지는 추후 변경 예정
5. 컴포넌트에 이벤트핸들러 연결
//DetailBody.tsx
function DetailBody({ foundDetailPost }: FoundDetailPostProps) {
//공유하기 hook
const { handleShareKakaoClick } = useKaKaoShare();
//현재 페이지 url
const detailURL = window.location.href;
return(
<div>
<button onClick={() => {
handleShareKakaoClick(foundDetailPost.title, detailURL);
}}>
카카오 공유하기
</button>
</div>
)▶ useKakaoShare() 사용하기
--카카오톡 공유 기능 끝 --
6. 링크복사 기능
//DetailBody.tsx
const handleCodeCopy = async () => {
try {
await navigator.clipboard.writeText(detailURL);
alert('클립보드에 링크가 복사되었어요.')
} catch (error) {
console.log(error);
}
};▶ 링크 복사 기능 매우 간단함
navigator.clipboard.writeText(현재url)
const handleCodeCopy = async () => {
try {
await navigator.clipboard.writeText(detailURL);
const onClickConfirm = () => {
modal.close();
};
const openModalParams: Parameters<typeof modal.open>[0] = {
title: '클립보드에 링크가 복사되었어요!',
message: '원하는 곳에 붙여넣으세요.',
leftButtonLabel: '',
onClickLeftButton: undefined,
rightButtonLabel: '확인',
onClickRightButton: onClickConfirm
};
modal.open(openModalParams);
} catch (error) {
console.log(error);
}
};▶ 커스텀 모달 적용까지 완료
끝.
'TIL :: Today I Learned' 카테고리의 다른 글
| 1차 유저 피드백 (1) | 2024.01.29 |
|---|---|
| 리액트 prefetch 테스트 : prefetchInfiniteQuery 적용하기 (1) | 2024.01.25 |
| query-string : URL 쿼리 파라미터로 카테고리와 정렬 처리 (0) | 2024.01.23 |
| 파이어베이스 오류 : The query requires an index (0) | 2024.01.22 |
| 타입스크립트 + useInfiniteQuery : 좋아요 기능 구현 (Optimistic Update) (0) | 2024.01.20 |