refactor: toggle UI/UX

[hozzijeong]

🔥 연관 이슈

• close 토큰 요청시 스피너 띄우기 (사용자 경험 개선) #476

🚀 작업 내용

• 좀 더 범용적인 installPrompt 작성: firefox에서는 installPrompt 안내가 다르게 이루어져서 해당 값을 추가했습니다
• FCM 관련 로직을 Tanstack-Query를 사용해서 비동기 상태관리 했습니다
• 토큰 삭제(fcm과 통신) 또는 구독 취소 (서버와 통신) 발생하는 에러를 한번에 관리하기 위해 Promise.allSetted라는 메서드를 통해 한번에 처리했습니다.

💬 리뷰 중점사항

브랜치를 판게 2달 전인데 이제서야 PR을 작성합니다 ㅠ 사이사이에 일이 좀 많았어서... ㅎ

에러 처리 관련

현재 기존 사이트에서 구독 해제시에 아래와 같은 메세지가 나타나고 있는데, 불필요한 것 같아서 "구독 취소중에 에러가 발생했습니다"로 대체했습니다.

에러 처리를 할 때 response 내부에 있는 메세지를 받기 위해 StatusError에 errorResponse라는 객체를 같이 넘길 수 있도록 했습니다.
저희는 의도적으로 서버에서 에러를 던질 때 response 내부에 message의 형태로 던지도록 했는데, response를 json형태로 변환하기 전에 에러를 throw 해버리니까 안에 있는 값을 확인할 수 없었습니다. 따라서 해당 전달받은 response 객체를 throw할때 같이 넘기고, 해당 에러를 catch 한 곳에서 .json으로 파싱해서 해당 객체에 접근할 수 있도록 설정했습니다.

이 방식이 과연 옳은지 한번 봐주시면... 감사하겠습니다 40d2625

FCM 로직을 Tanstack-Query로 분리한 점

기존에는 class로 캡슐화 해서 비동기 처리를 하는 방식으로 코드를 작성했었습니다. 하지만, 비동기 처리 관리가 쉽지 않을 뿐더러 직관적이지 않다는 생각이 들었고 해당 매번 token 값을 전역 객체에 넣어야 한다는 점이 좀 불편하게 느껴졌습니다. 따라서 Tanstack-query를 통해 상태 관리를 할 수 있게끔 코드를 변경했습니다

혹시 코드 변경 사항에서 어색한 점이 있는지 한번 확인해주세요!!

[Kim0914]

고생하셨습니다 !

[rawfishthelgh]

확인했습니다~!