Refactor/notification

app/routes/_main.tsx

@@ -6,16 +6,29 @@ import Logo from "../assets/logo/realmatch-logo-line.png";
 import bellIcon from "../assets/icon/icon-bell.svg";
 import redDot from "../assets/icon/red-dot.svg";
 import { tokenStorage } from "../lib/token";
+import { fetchUnreadCount } from "../routes/notification/api/notification";
 
 export default function MainLayout() {
   const [hideBottomTab, setHideBottomTab] = useState(false);
   const [hideHeader, setHideHeader] = useState(false);
   const [disableScroll, setDisableScroll] = useState(false);
   const [isPWA, setIsPWA] = useState(false);
+  const [unreadCount, setUnreadCount] = useState(0);
   const navigate = useNavigate();
   const location = useLocation();
   const mainRef = useRef<HTMLElement>(null);
 
+  const updateUnreadCount = async () => {
+    try {
+      const data = await fetchUnreadCount();
+      if (data.isSuccess) {
+        setUnreadCount(data.result.count);
+      }
+    } catch (error) {
+      console.error("미읽음 알림 조회 실패:", error);
+    }
+  };
+
   // PWA 감지
   useEffect(() => {
     const checkPWA = () => {
@@ -40,6 +53,18 @@ export default function MainLayout() {
     }
   }, [navigate]);
 
+  useEffect(() => {
+  const accessToken = tokenStorage.getAccessToken();
+
+  if (accessToken) {
+    const fetchCount = async () => {
+      await updateUnreadCount();
+    };
+
+    fetchCount();
+  }
+}, [location.pathname]);
+
   return (
     <LayoutContext.Provider
       value={{
@@ -75,11 +100,13 @@ export default function MainLayout() {
                     alt="알림"
                     className="w-6 h-6 object-contain"
                   />
+                  {unreadCount > 0 && (
                   <img
                     src={redDot}
                     alt=""
                     className="absolute top-[8px] right-[8px] w-2 h-2"
                   />
+                )}
                 </button>
               </div>
             </div>

app/routes/business/calendar/calendar-content.tsx

@@ -142,7 +142,7 @@ export default function CalendarContent() {
 
   return (
     <div className="flex flex-col w-full min-h-screen bg-bluegray-1">
-      <div className="flex w-full bg-bg-w border-b border-text-gray5">
+      <div className="flex w-full bg-bg-w border-text-gray5">
         <button
           onClick={() => setMainTab("collaboration")}
           className={`flex-1 py-4 text-[16px] font-medium text-[16px] relative transition-colors ${mainTab === "collaboration" ? "text-core-1" : "text-text-gray3"

app/routes/notification/api/notification.ts

@@ -49,4 +49,19 @@ export const readAllNotifications = async (): Promise<{ isSuccess: boolean; resu
 export const readNotification = async (id: string): Promise<{ isSuccess: boolean }> => {
   const response = await axiosInstance.patch(`/v1/notifications/${id}/read`);
   return response.data;
+};
+
+export interface UnreadCountResponse {
+  isSuccess: boolean;
+  code: string;
+  message: string;
+  result: {
+    count: number;
+  };
+}
+
+// 미읽음 알림 개수 조회 API 추가
+export const fetchUnreadCount = async (): Promise<UnreadCountResponse> => {
+  const response = await axiosInstance.get("/v1/notifications/unread-count");
+  return response.data;
 };