[Fix] 카카오 공유하기 실행 오류 수정

[yyypearl]

연관 이슈

close #127

개요

카카오 공유하기 실행 오류 수정

✅ 작업 내용

• 카카오 공유하기 버튼 재클릭 시 동작하지 않는 오류 수정
• 모바일에서 공유하기 완료 처리 오래 걸리는 오류 수정

🖥 구현 결과

• 1차 수정 (공유 버튼 클릭 후 취소 > 재클릭 시 사파리에서 alert 뜨는 문제 발생)

KakaoTalk_20250121_031127537.mp4

• 최종 수정 (웹, 모바일 정상 동작 확인 완료)

KakaoTalk_20250121_033533676.mp4

리뷰 요구사항

기타사항 참고

📝 기타 사항

조금 어렵게 해결한 것 같은데요... 해결과정 정리하려고 아래 기록해볼게요!

우선 기존 공유하기에서의 문제점은 다음과 같았습니다.
1. 카카오 공유하기 버튼 취소 후 재클릭 시 카카오 공유 기능이 동작하지 않는 오류
2. 모바일상에서 공유하기 완료 처리가 오래 걸린다는 문제.

먼저, 완료 처리를 빠르게 할 수 있도록 기존 3초마다 확인했던 공유 완료 상태를 0.3초마다 확인하도록 폴링 주기를 짧게 설정했습니다. (여러 구간으로 테스트해봤는데 1초면 바로 넘어가는 느낌이 안 들었고, 특히 모바일에서는 웹보다 더 느려져서 애매하다고 개인적으로 느껴졌습니다! 동시 접속 유저가 많아진다면 이런 요청 시간도 늘리도록 수정해야할 것 같긴 해요)

그리고 카카오 공유하기 버튼 취소 후 재클릭 시 동작하지 않는 부분은 마이페이지>재전송하기 부분을 참고하면서 디버깅했습니다. 분석해보니, 재전송하기는 letterId가 이미 정해져있어 바로 공유하기를 실행하고, 편지 전송하기는 letterId를 API로부터 받아온 후에 공유하기를 실행하였습니다. 이때 실행되는 handleSendLetterAndShare 함수가 letterId가 없을 때에만 수행되도록 설정해서 초기 1회는 공유하기가 실행되나 그 뒤에는 API로부터 응답받은 letterId가 저장되기 때문에 그 이후 코드가 실행하지 않았습니다.

그래서 !letterId라는 조건을 지웠으나 또 문제점이 발생했습니다. 바로 letterCode 상태 업데이트와 관련된 것이었어요. letterCode의 존재여부 (길이가 0보다 큰 것으로 확인) 를 가지고 분석하면 API로부터 업데이트 되는 시점에 차이가 발생하여 공유하기가 실행되지 않기도 했습니다. 그래서 공유 로직 앞의 모든 조건을 삭제했습니다.

마지막으로는 위의 첫번째 영상에서처럼 카카오 공유하기 취소 후에 다시 클릭하면 사파리에서 경고 메세지가 발생했습니다. 이는 letterCode를 온전하게 받은 후에 공유하기 로직을 수행할 수 있도록 하기 위해 setTimeout로 딜레이를 주는 과정에서 발생했습니다. 유저가 공유 창을 취소한 후 빠르게 버튼을 다시 클릭하면, 이전의 setTimeout으로 예약된 sendScrap 호출이 중복 실행되는 거죠! 그래서 사파리에서 오류를 감지해 "주소가 유효하지 않기 때문에 safari가 해당 페이지를 열 수 없습니다." 라는 알럿창을 띄워주는 것이었습니다.
(카카오 디벨로퍼를 많이 찾아보았으나 전혀 다른 문제였던 것 같아요..)

그래서 최종적으로 setTimeout를 없애고 공유 중인지 알 수 있는 상태를 만들어두어 이전 공유가 진행 중일 경우는 함수가 실행되지 않도록 수정했습니다!

마지막 수정까지 마치고 테스트 할 때는 모든 경우가 잘 되는 것 같았는데, 혹시 예외나 잘 안 되는 부분이 있다면 공유해주세요!

[github-actions]

🎉 Deploy Preview

https://lettering-4rfky2lob-yyypearls-projects.vercel.app
여기에서 배포 결과 확인하기

[hyo-4]

여러 시행 착오가 있었군.....볼때는 괜찮아보입니다!!
수고했어!! 배포 후 다시 교차 확인 해볼게요