Merge pull request #209 from DevKor-github/feat/notification

FCM token 발급 받고 웹뷰에서 서버로 보내기

Author: halionaz

src/common/apis/usePatchFCMToken.ts

@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query';
+
+import client from '@/common/utils/client';
+
+const patchFCMToken = async (token: string) => {
+  const response = await client.patch('/api/v1/user/fcm-token', token, {
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+  });
+  return response.data;
+};
+
+export const usePatchFCMToken = () => {
+  return useMutation({
+    mutationFn: patchFCMToken,
+  });
+};

src/common/apis/useTestFCMToken.ts

@@ -0,0 +1,17 @@
+import client from '@/common/utils/client';
+import { useMutation } from '@tanstack/react-query';
+
+const testFCMToken = async (token: string) => {
+  const response = await client.post('/api/test/fcm', token, {
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+  });
+  return response.data;
+};
+
+export const useTestFCMToken = () => {
+  return useMutation({
+    mutationFn: testFCMToken,
+  });
+};

src/common/components/NotificationProvider/index.tsx

@@ -1,21 +1,50 @@
-import { useEffect, type PropsWithChildren } from 'react';
+import { isJSON } from 'es-toolkit';
+import { useCallback, useEffect, type PropsWithChildren } from 'react';
+
+import type { NativeMessage } from '@/libs/types/native';
+import useGetIsLogin from '@/common/apis/useGetIsLogin';
+import { useFCMStore } from '@/common/store/FCMStore';
+import { usePatchFCMToken } from '@/common/apis/usePatchFCMToken';
 
 const NotificationProvider = ({ children }: PropsWithChildren) => {
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      try {
-        const data = JSON.parse(event.data);
-        alert(data.message);
-      } catch (e) {
-        console.log(e);
+  const { data: isLogin, isSuccess } = useGetIsLogin();
+  const { mutate: patchFCMToken } = usePatchFCMToken();
+
+  const fcmToken = useFCMStore(state => state.fcmToken);
+  const setFcmToken = useFCMStore(state => state.setFcmToken);
+
+  const isAuth = !!isLogin && isSuccess;
+
+  // rn에서 Webview로 보낸 값을 수신하는 함수
+  const FCMTokenListener = useCallback(
+    (event: MessageEvent) => {
+      if (!isJSON(event.data)) return;
+
+      const data = JSON.parse(event.data) as NativeMessage<string>;
+
+      if (data.type === 'FCM_TOKEN') {
+        setFcmToken(data.payload);
       }
-    };
+    },
+    [setFcmToken],
+  );
 
-    window.addEventListener('message', handleMessage);
+  useEffect(() => {
+    if (isAuth && fcmToken) {
+      patchFCMToken(fcmToken);
+    }
+  }, [isAuth, fcmToken, patchFCMToken]);
 
-    return () => window.removeEventListener('message', handleMessage);
-  }, []);
+  useEffect(() => {
+    // android, ios 구분하는 코드
+    document.addEventListener('message', FCMTokenListener as EventListener);
+    window.addEventListener('message', FCMTokenListener as EventListener);
 
+    return () => {
+      document.removeEventListener('message', FCMTokenListener as EventListener);
+      window.removeEventListener('message', FCMTokenListener as EventListener);
+    };
+  }, [FCMTokenListener]);
   return <>{children}</>;
 };
 export default NotificationProvider;

src/common/store/FCMStore.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface FCMStore {
+  fcmToken: string;
+  setFcmToken: (fcmToken: string) => void;
+}
+
+export const useFCMStore = create<FCMStore>()(
+  persist(
+    set => ({
+      fcmToken: '',
+      setFcmToken: fcmToken => set({ fcmToken }),
+    }),
+    {
+      name: 'fcm-token-storage', // name of the item in the storage (must be unique)
+    },
+  ),
+);

src/libs/types/native.ts

@@ -0,0 +1,6 @@
+export type NativeMessageType = 'FCM_TOKEN';
+
+export interface NativeMessage<T> {
+  type: NativeMessageType;
+  payload: T;
+}