Merge pull request #277 from dnd-side-project/fix-276

[# 276] pwa 기능 제거 및 expo로 푸시 알림 기능 수정

.storybook/preview-head.html

@@ -1,5 +1,4 @@
 <link as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" rel="stylesheet" />
 
 <script>
-    console.log("font loaded");
 </script>

package.json

@@ -32,7 +32,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.1.8",
     "es-toolkit": "^1.16.0",
-    "firebase": "^10.13.0",
+    "firebase": "^10.14.0",
     "framer-motion": "^11.9.0",
     "jotai": "^2.9.3",
     "lucide-react": "^0.417.0",

src/hooks/useNotification.tsx

@@ -1,17 +1,16 @@
 import { useCallback, useState } from 'react';
-import { getToken } from 'firebase/messaging';
-import { messaging } from '@/libs/firebase.ts';
-import { useCreateDeviceToken } from '@/queries/useCreateDeviceToken.ts';
 import CenterBottomSheet from '@/components/common/CenterBottomSheet';
 import CTAButton from '@/components/common/CTAButton';
 import { useDeleteDeviceToken } from '@/queries/useDeleteDeviceToken.ts';
+import { useToken } from '@/hooks/useToken.ts';
 
 const DEVICE_TOKEN_KEY = 'deviceToken';
-const DEVICE_TOKEN_DENIED_VALUE = 'denied';
+const DEVICE_TOKEN_REQUESTED = 'requested';
 
 export const useNotification = () => {
-  const { mutate: createDeviceToken } = useCreateDeviceToken();
+  // const { mutate: createDeviceToken } = useCreateDeviceToken();
   const { mutate: deleteDeviceToken } = useDeleteDeviceToken();
+  const { getAccessToken } = useToken();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -49,24 +48,15 @@ export const useNotification = () => {
   );
 
   const requestPermission = useCallback(async () => {
-    const permission = await Notification.requestPermission();
-
-    if (permission === 'granted') {
-      const token = await getToken(messaging, {
-        vapidKey: import.meta.env.VITE_VAPID_KEY,
-      });
-
-      createDeviceToken(token);
-
-      localStorage.setItem(DEVICE_TOKEN_KEY, token);
-      return;
+    if (window?.ReactNativeWebView) {
+      window.ReactNativeWebView.postMessage(getAccessToken());
     }
 
-    localStorage.setItem(DEVICE_TOKEN_KEY, DEVICE_TOKEN_DENIED_VALUE);
+    localStorage.setItem(DEVICE_TOKEN_KEY, DEVICE_TOKEN_REQUESTED);
   }, []);
 
   const denyPermission = useCallback(() => {
-    localStorage.setItem(DEVICE_TOKEN_KEY, DEVICE_TOKEN_DENIED_VALUE);
+    localStorage.setItem(DEVICE_TOKEN_KEY, DEVICE_TOKEN_REQUESTED);
     deleteDeviceToken(undefined);
   }, []);
 

src/pages/Main.tsx

@@ -11,15 +11,14 @@ import LoadingSpinner from '@/components/LoadingSpinner.tsx';
 import { useRefreshAccessToken } from '@/queries/useRefreshAccessToken.ts';
 import { useToken } from '@/hooks/useToken.ts';
 import { SECOND } from '@/constants/day.ts';
-import { useNotification } from '@/hooks/useNotification.tsx';
 import { useQueryClient } from '@tanstack/react-query';
 import { keyStore } from '@/queries/keyStore.ts';
 
 const Main = () => {
   const { data: homeData } = useGetHomeData();
   const { mutate: refreshAccessToken } = useRefreshAccessToken();
   const { getRefreshToken, isValidToken, setRefreshToken, setAccessToken } = useToken();
-  const { RequestPermissionModal, isPermissionChecked, openPermissionModal } = useNotification();
+  // const { RequestPermissionModal, isPermissionChecked, openPermissionModal } = useNotification();
 
   const queryClient = useQueryClient();
 
@@ -44,12 +43,11 @@ const Main = () => {
     }
   }, []);
 
-  useEffect(() => {
-    if (!isPermissionChecked) {
-      console.log('isPermissionChecked', isPermissionChecked);
-      openPermissionModal();
-    }
-  }, []);
+  // useEffect(() => {
+  //   if (!isPermissionChecked) {
+  //     openPermissionModal();
+  //   }
+  // }, []);
 
   useEffect(() => {
     void queryClient.prefetchQuery({
@@ -67,7 +65,7 @@ const Main = () => {
       <BloomingWeather register={register} />
       <HeightBox height={100} />
       <TabBar />
-      <RequestPermissionModal />
+      {/*<RequestPermissionModal />*/}
     </Screen>
   );
 };

src/types/react-native.d.ts

@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+  interface Window {
+    ReactNativeWebView: {
+      postMessage: (message: string) => void;
+    };
+  }
+}