🐛 fix: 알림 읽음 기능 수정 및 div 태그를 link로 수정

src/components/common/notification-modal/NotificationCard.tsx

@@ -1,16 +1,17 @@
-import { useNavigate } from 'react-router-dom';
-import { putAlerts } from '@/api/alertApi';
+import { Link } from 'react-router-dom';
 import calculateTimeDifference from '@/utils/calculateTimeDifference';
 import formatWorkTime from '@/utils/formatWorkTime';
 
 interface NotificationCardProps {
   alertId: string; // 알림 id
+  shopId: string; // 가게 id
   noticeId: string; // 공고 id
   status: 'accepted' | 'rejected'; // 공고 지원 상태
   restaurantName: string; // 음식점 이름
   startsAt: string; // 공고 시작 시간 (ISO 8601 문자열)
   workhour: number; // 근무 시간 (시간 단위)
   createdAt: string; // 알림 생성 시간 (ISO 8601 문자열)
+  onMarkAsRead: (alertId: string) => void;
 }
 
 /*
@@ -21,39 +22,27 @@ interface NotificationCardProps {
 
 export default function NotificationCard({
   alertId,
+  shopId,
   noticeId,
   status,
   restaurantName,
   startsAt,
   workhour,
   createdAt,
+  onMarkAsRead,
 }: NotificationCardProps) {
   const formattedTime = formatWorkTime({
     startsAt,
     workhour,
   });
-  const navigate = useNavigate();
+
   const formattedCreatedAt = calculateTimeDifference(createdAt);
   const formattedStatus = status === 'accepted' ? '승인' : '거절';
   const formattedStatusClass =
     status === 'accepted' ? 'text-blue-20' : 'text-red-20';
-  const handleClick = () => {
-    const userId = localStorage.getItem('userId');
-
-    if (!userId) {
-      console.error('userId를 찾을 수 없습니다.');
-      return;
-    }
 
-    try {
-      putAlerts(userId, alertId); // 알림 읽음 처리
-      navigate(`/${noticeId}`);
-    } catch (error) {
-      console.error(error);
-    }
-  };
   return (
-    <div onClick={handleClick} className="cursor-pointer">
+    <Link to={`${shopId}/${noticeId}`} onClick={() => onMarkAsRead(alertId)}>
       <div className="flex flex-col gap-4 rounded-[5px] border border-gray-20 bg-white px-12 py-16 md:w-328">
         {status === 'accepted' ? (
           <div className="h-5 w-5 rounded-full bg-blue-20"></div>
@@ -67,6 +56,6 @@ export default function NotificationCard({
         </h2>
         <p className="text-caption/16 text-gray-40">{formattedCreatedAt}</p>
       </div>
-    </div>
+    </Link>
   );
 }

src/components/common/notification-modal/NotificationModal.tsx

@@ -4,8 +4,8 @@ import type { AlertListItem } from '@/api/alertApi';
 
 interface NotificationModalProps {
   data?: AlertListItem[]; // 알림 데이터 배열
-  count?: number; // 알림 개수
   onClose: () => void; // x 버튼을 누를때 실행할 함수
+  onMarkAsRead: (alertId: string) => void;
 }
 
 /*
@@ -17,29 +17,32 @@ interface NotificationModalProps {
 
 export default function NotificationModal({
   data = [],
-  count = 0,
   onClose,
+  onMarkAsRead,
 }: NotificationModalProps) {
+  const unreadData = data.filter((alertItem) => alertItem.item.read === false);
   return (
     <div className="flex h-screen w-screen flex-col gap-16 bg-red-10 px-20 py-40 md:h-420 md:w-368 md:rounded-[10px] md:border-1 md:border-gray-30 md:py-24 md:shadow-custom">
       <div className="flex items-center justify-between">
-        <h1 className="text-h3 font-bold">알림 {count}개</h1>
+        <h1 className="text-h3 font-bold">알림 {unreadData.length}개</h1>
         <button onClick={onClose} className="md:hidden">
           <img src={close} alt="닫기" />
         </button>
       </div>
       <div className="scrollbar-hide flex flex-col gap-8 overflow-y-auto">
-        {data.length > 0 &&
-          data.map((data) => (
+        {unreadData.length > 0 &&
+          unreadData.map((alertItem) => (
             <NotificationCard
-              key={data.item.id}
-              alertId={data.item.id}
-              noticeId={data.item.notice.item.id}
-              status={data.item.result}
-              restaurantName={data.item.shop.item.name}
-              startsAt={data.item.notice.item.startsAt}
-              workhour={data.item.notice.item.workhour}
-              createdAt={data.item.createdAt}
+              key={alertItem.item.id}
+              onMarkAsRead={onMarkAsRead}
+              alertId={alertItem.item.id}
+              shopId={alertItem.item.shop.item.id}
+              noticeId={alertItem.item.notice.item.id}
+              status={alertItem.item.result}
+              restaurantName={alertItem.item.shop.item.name}
+              startsAt={alertItem.item.notice.item.startsAt}
+              workhour={alertItem.item.notice.item.workhour}
+              createdAt={alertItem.item.createdAt}
             />
           ))}
       </div>

src/components/layout/Navbar.tsx

@@ -8,11 +8,16 @@ import alarmActive from '@/assets/icons/alarm-active.svg';
 import alarmInactive from '@/assets/icons/alarm-inactive.svg';
 
 export default function Navbar() {
-  const { isLoggedIn, role, alarms, logout } = useContext(AuthContext);
+  const { isLoggedIn, role, alarms, logout, markAlertAsRead } =
+    useContext(AuthContext);
   const [isShowModal, setIsShowModal] = useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
 
+  const unreadAlarmCount = alarms.items.filter(
+    (alert) => !alert.item.read,
+  ).length;
+
   // 바깥 클릭 시 모달 닫기
   useEffect(() => {
     function handleClickOutside(event: MouseEvent): void {
@@ -42,6 +47,11 @@ export default function Navbar() {
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, []);
 
+  const handleNotificationClick = (alertId: string) => {
+    markAlertAsRead(alertId); // AuthContext의 함수를 호출해 알림을 읽음 처리
+    setIsShowModal(false); // Navbar의 state를 변경해 모달을 닫음
+  };
+
   return (
     <header className="bg-white">
       <nav className="relative mx-20 flex flex-wrap items-center justify-between gap-y-22 py-10 md:mx-32 md:py-15 lg:mx-auto lg:max-w-1023">
@@ -73,7 +83,7 @@ export default function Navbar() {
               ref={buttonRef}
               onClick={() => setIsShowModal((prev) => !prev)}
             >
-              {alarms.count > 0 ? (
+              {unreadAlarmCount > 0 ? (
                 <img src={alarmActive} />
               ) : (
                 <img src={alarmInactive} />
@@ -94,8 +104,8 @@ export default function Navbar() {
           >
             <NotificationModal
               data={alarms.items}
-              count={alarms.count}
               onClose={() => setIsShowModal(false)}
+              onMarkAsRead={handleNotificationClick}
             />
           </div>
         )}

src/context/AuthContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, useState, useEffect, type ReactNode } from 'react';
-import { getAlerts, type AlertViewResponse } from '@/api/alertApi';
+import { getAlerts, putAlerts, type AlertViewResponse } from '@/api/alertApi';
 type UserRole = 'employer' | 'employee' | null;
 
 interface AuthContextType {
@@ -8,6 +8,7 @@ interface AuthContextType {
   alarms: AlertViewResponse; // 알림 정보
   login: (token: string, role: UserRole, userId: string) => void; // 로그인 함수
   logout: () => void; // 로그아웃 함수
+  markAlertAsRead: (alertId: string) => void;
 }
 
 const defaultAuthContext: AuthContextType = {
@@ -23,6 +24,7 @@ const defaultAuthContext: AuthContextType = {
   },
   login: () => {},
   logout: () => {},
+  markAlertAsRead: () => {},
 };
 
 export const AuthContext = createContext<AuthContextType>(defaultAuthContext);
@@ -35,12 +37,24 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   );
 
   useEffect(() => {
-    const token = localStorage.getItem('accessToken');
-    const role = localStorage.getItem('userRole') as UserRole;
-    if (token && role) {
-      setIsLoggedIn(true);
-      setRole(role);
-    }
+    const fetchAuth = async () => {
+      const token = localStorage.getItem('accessToken');
+      const userRole = localStorage.getItem('userRole') as UserRole;
+      const userId = localStorage.getItem('userId');
+
+      if (token && userRole && userId) {
+        setIsLoggedIn(true);
+        setRole(userRole);
+        try {
+          const alertRes = await getAlerts(userId);
+          setAlarms(alertRes);
+        } catch (error) {
+          console.error('앱 로딩 중 알림 가져오기 실패:', error);
+        }
+      }
+    };
+
+    fetchAuth();
   }, []);
 
   const login = async (token: string, role: UserRole, userId: string) => {
@@ -66,8 +80,29 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setAlarms(defaultAuthContext.alarms);
   };
 
+  const markAlertAsRead = async (alertId: string) => {
+    const userId = localStorage.getItem('userId');
+    if (!userId) {
+      console.error('읽음 처리 실패: userId를 찾을 수 없습니다.');
+      return;
+    }
+
+    setAlarms((prevAlarms) => ({
+      ...prevAlarms,
+      items: prevAlarms.items.filter((alert) => alert.item.id !== alertId),
+    }));
+
+    try {
+      await putAlerts(userId, alertId);
+    } catch (error) {
+      console.error('API - 알림 읽음 처리 실패:', error);
+    }
+  };
+
   return (
-    <AuthContext.Provider value={{ isLoggedIn, role, alarms, login, logout }}>
+    <AuthContext.Provider
+      value={{ isLoggedIn, role, alarms, login, logout, markAlertAsRead }}
+    >
       {children}
     </AuthContext.Provider>
   );