feat(nav): ✨ alarm indicator

apps/web/src/components/main/MainNavbar.tsx

@@ -1,16 +1,19 @@
 import { BellIcon, MapPinIcon } from "@heroicons/react/24/solid";
 import { useRouter } from "next/router";
+import { useState } from "react";
 
 export default function MainNavbar() {
+  // TODO: count unread alarms
+  const [hasUnreadAlarms] = useState(true);
   const router = useRouter();
   const handleNearby = async () => {
     await router.push("/benefit/nearby");
   };
-  
+
   const handleNotification = async () => {
     await router.push("/notification");
   };
-  
+
   return (
     <div className="navbar bg-base-100 sticky top-0 z-50">
       <div className="flex-1">
@@ -23,11 +26,21 @@ export default function MainNavbar() {
           title="함께 도스켜고 포인트"
           type="button"
         >
-          <MapPinIcon className="h-6 w-6" />
-        </button>
-        <button className="btn btn-square btn-ghost" title="알림" type="button" onClick={() => void handleNotification()}>
-          <BellIcon className="h-6 w-6" />
+          <MapPinIcon className="h-6 w-6 fill-yellow-500" />
         </button>
+        <div className="indicator">
+          {hasUnreadAlarms && (
+            <span className="indicator-item badge badge-error right-1 top-1 h-2 p-1"></span>
+          )}
+          <button
+            className="btn btn-square btn-ghost"
+            title="알림"
+            type="button"
+            onClick={() => void handleNotification()}
+          >
+            <BellIcon className="h-6 w-6" />
+          </button>
+        </div>
       </div>
     </div>
   );