Nextjs 14, ID 1119574
안녕하세요. 카카오 공유하기를 통해 편지를 전달하는 기능을 개발 중에 있는 프론트 개발자입니다.
카카오 공유하기를 적용하는 과정에서 한 가지 의문점이 있어 이렇게 질문드립니다.
현재 편지 전송하기 버튼을 누르면, 서버 API를 통해 편지를 받을 사용자명과 내용 등이 DB에 저장되고, 그 응답값으로 받은 편지 ID를 가지고 카카오 공유하기 시 카톡을 받은 유저가 들어갈 경로를 설정하고 있습니다. 이때 카카오 공유하기 성공 여부에 따라서 저희 서비스 내의 경로 이동을 다르게 하려고 합니다.
카카오 공유하기가 성공할 경우 /send/complete 경로로 이동해 편지 공유가 완료되었음을 알려주고, 카카오 공유하기가 모종의 이유로 실패하였을 경우 에러 페이지로 이동시키고자 합니다.
찾아보니 이 공유 성공, 실패 응답은 카카오 공유하기 콜백함수를 통해 얻어올 수 있는 것 같습니다. 제가 공식 문서를 읽고 이해한 바로는,
콜백함수 url (서버의 API url) 을 설정해주고 , 프론트 자바스크립트에서 serverCallbackArgs로 설정한 파라미터 정보를 아까 설정한 서버의 get 또는 post API로 성공 여부와 함께 전달합니다. 그럼 서버의 데이터베이스에는 공유하기 성공 여부를 저장할 수 있습니다.
이때, 그렇다면 클라이언트는 이 성공 여부를 카카오 공유하기 버튼을 클릭한 즉시 어떻게 받아올 수 있는지가 의문입니다. 서버로 성공 응답이 전송된다한들, 이를 클라이언트가 요청하지 않으면 서버에서는 응답을 해줄 수가 없기 때문입니다. 혹시 소켓이 필요한 기능인건지, 제가 구현을 원하는 공유하기 성공 여부에 따른 프론트엔드에서의 웹페이지 경로 이동이 불가능한 것인지 궁금해 이렇게 질문을 남깁니다.
답변 기다리겠습니다. 감사합니다:)
*아래 코드는 임시로 카카오 공유하기 성공/실패 (실패라함은 유저가 의도적으로 공유 프로세스를 벗어나는 경우도 포함합니다) 에 따른 페이지 이동이 아닌, 타이머를 활용해 n 초 이상 시 무조건 경로를 이동하도록 구현한 코드입니다.
const handleSendLetterAndShare = async () => {
/* 편지 전송 및 카카오 공유 */
try {
// 1. 편지 전송 API 요청
if (!letterId) {
const response = await postSendLtter({
draftId,
receiverName,
content,
images,
templateType,
});
console.log("편지 쓰기 성공");
setLetterId(response.data.letterCode);
// 2. 카카오 공유 로직 실행
if (isKakaoLoaded && response.data.letterCode) {
setTimeout(() => {
const { Kakao, location } = window;
Kakao.Share.sendScrap({
requestUrl: location.origin + location.pathname,
templateId: 112798,
templateArgs: {
senderName: name,
id: response.data.letterCode,
},
});
}, 1000);
setTimeout(() => {
router.push("/send/complete");
}, 8000);
}
}
} catch (error) {
console.log("편지 전송 또는 카카오 공유 실패:", error);
}
};