refactor: 토글 UI 제거 및 낙관적 업데이트 적용 (#495)

* refactor: getToken을 mutation 내부로 변경

* refactor: PushStatus에 currentToken 프로퍼티 제거

frontend/src/hooks/queries/auth/useWebPush.ts

@@ -1,6 +1,5 @@
 import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import useAddToast from 'hooks/@common/useAddToast';
-import useGetToken from 'hooks/firebase/useGetToken';
 import FCMMessaging from 'models/FCMMessaging';
 import StatusError from 'models/statusError';
 import WebPushSubscribeAPI, { SUBSCRIBE_URL } from 'apis/webPush';
@@ -15,15 +14,14 @@ const useWebPush = () => {
   const addToast = useAddToast();
   const queryClient = useQueryClient();
 
-  const { data: token } = useGetToken();
-
-  // token이 null인 경우는 알림이 허용되지 않은 경우
-  if (token === null) {
-    throw new Error('알림을 허용하지 않았습니다');
-  }
-
   const subscribe = useMutation({
     mutationFn: async () => {
+      const token = await FCMMessaging.getCurrentToken();
+
+      if (token === null) {
+        throw new Error('알림을 허용하지 않았습니다');
+      }
+
       const response = await WebPushSubscribeAPI.subscribe(token);
       throwOnInvalidStatus(response);
 
@@ -65,19 +63,16 @@ const useWebPush = () => {
       return null;
     },
     onMutate: async () => {
-      await queryClient.cancelQueries({ queryKey: ['getFCMToken'] });
       await queryClient.cancelQueries({ queryKey: [SUBSCRIBE_URL] });
 
-      const prevData = queryClient.getQueryState<string | null>(['getFCMToken']);
       const prevSubscribe = queryClient.getQueryState<CurrentSubscribe>([SUBSCRIBE_URL]);
 
       queryClient.setQueryData([SUBSCRIBE_URL], () => ({ subscribe: false }));
 
-      return { prevData, prevSubscribe };
+      return { prevSubscribe };
     },
 
     onError: async (error, __, context) => {
-      queryClient.setQueryData(['getFCMToken'], context?.prevData);
       queryClient.setQueryData([SUBSCRIBE_URL], context?.prevSubscribe);
 
       if (error instanceof StatusError) {
@@ -90,7 +85,6 @@ const useWebPush = () => {
 
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: [SUBSCRIBE_URL] });
-      queryClient.invalidateQueries({ queryKey: ['getFCMToken'] });
     },
   });
 

frontend/src/models/PushStatus.ts

@@ -8,15 +8,13 @@ interface PushStatusState {
   //[MDN](https://developer.mozilla.org/en-US/docs/Web/API/PushSubscription)
   // pushSubscription: PushSubscription | null; // 현재 구독중인 service endpoint와 구독 해제 기능을 제공하고 있음.
   notificationPermission: NotificationPermission; // 현재 알림 상태가 어떤지
-  currentToken: string | null;
 }
 
 export const isSupported =
   'serviceWorker' in navigator && 'Notification' in window && 'PushManager' in window;
 
 const initialPushStatus: PushStatusState = {
   pushSupport: isSupported,
-  currentToken: null,
   notificationPermission: 'default',
 };
 
@@ -27,26 +25,16 @@ class PushStatus {
     this.pushStatus = pushStatus;
 
     if (pushStatus.notificationPermission !== 'granted') {
-      this.pushStatus.currentToken = null;
       await FCMMessaging.deleteCurrentToken();
     }
   }
 
-  getCurrentToken() {
-    return this.pushStatus.currentToken;
-  }
-
-  setCurrentToken(token: string | null) {
-    this.pushStatus.currentToken = token;
-  }
-
   getPermission() {
     return this.pushStatus.notificationPermission;
   }
 
   async setPermission(permission: NotificationPermission) {
     if (permission !== 'granted') {
-      this.pushStatus.currentToken = null;
       await FCMMessaging.deleteCurrentToken();
     }
 

frontend/src/registerServiceWork.ts

@@ -29,7 +29,6 @@ const registerPwaServiceWorker = async (workerPath: string) => {
 
   PushStatus.updatePushStatus({
     notificationPermission: 'default',
-    currentToken: null,
     pushSupport: FCMSupported && isBrowserSupport,
   });
 };