Merge pull request #10 from AmorGakCo/feat/Notification

Feat/notification
AmorGakCo · Dec 29, 2024 · c3fa52f · c3fa52f
2 parents 03fd283 + 017b658
commit c3fa52f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 7 deletions.
diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
@@ -13,5 +13,37 @@ const firebaseConfig = {
 };
 // Initialize Firebase
 firebase.initializeApp(firebaseConfig);
-
-const messaging = firebase.messaging();
+// firebase-messaging-sw.js
+self.addEventListener('notificationclick', function (event) {
+  const origin = self.location.origin;
+  const url = `${origin}/notification`; // 로컬 URL
+
+  event.notification.close();
+
+  event.waitUntil(
+      clients.matchAll({ type: 'window', includeUncontrolled: true }).then((windowClients) => {
+          // 이미 열린 창이 있으면 해당 창으로 이동
+          for (let client of windowClients) {
+              if (client.url === url && 'focus' in client) {
+                  return client.focus();
+              }
+          }
+          // 없으면 새 창 열기
+          if (clients.openWindow) {
+              return clients.openWindow(url);
+          }
+      })
+  );
+});
+
+
+const messaging = firebase.messaging();
+messaging.onBackgroundMessage(messaging,async (payload) => {
+  const notificationTitle = payload.notification?.title;
+  const notificationOptions = {
+    body: payload.notification?.body,
+    icon: payload.notification?.icon,
+  };
+  self.registration.showNotification(notificationTitle, notificationOptions);
+
+});
diff --git a/src/components/ui/Header/DropDown/index.tsx b/src/components/ui/Header/DropDown/index.tsx
@@ -27,19 +27,22 @@ export default function DropDown() {
           <AvatarImage src="/coin.png" />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
-        <div className="w-4 h-4 text-xs flex justify-center items-center rounded-full absolute -right-1.5 -bottom-1 bg-red-500 text-white z-50">
-          {notifyNumber}
-        </div>
+        {(notifyNumber && notifyNumber > 0)? (
+          <div className="w-4 h-4 text-xs flex justify-center items-center rounded-full absolute -right-1.5 -bottom-1 bg-red-500 text-white z-50">
+            {notifyNumber}
+          </div>
+        ):''}
       </DropdownMenuTrigger>
       <DropdownMenuContent className="mr-2">
         <Link href="/notification">
           <DropdownMenuItem className="cursor-pointer flex">
             알림
-            {notifyNumber && notifyNumber > 0 && (
+            {
+            notifyNumber && (notifyNumber > 0)? (
               <div className="w-4 h-4 text-xs flex justify-center items-center rounded-full bg-red-500 text-white z-50 ml-2">
                 {notifyNumber}
               </div>
-            )}
+            ):''}
           </DropdownMenuItem>
         </Link>
         <Link href="/user">