✨ feat: 알림 읽음 처리 구현

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

@@ -1,11 +1,11 @@
-import { useContext } from 'react';
-import { Link } from 'react-router-dom';
-import { AuthContext } from '@/context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { putAlerts } from '@/api/alertApi';
 import calculateTimeDifference from '@/utils/calculateTimeDifference';
 import formatWorkTime from '@/utils/formatWorkTime';
 
 interface NotificationCardProps {
-  id: string; // 가게 id
+  alertId: string; // 알림 id
+  noticeId: string; // 공고 id
   status: 'accepted' | 'rejected'; // 공고 지원 상태
   restaurantName: string; // 음식점 이름
   startsAt: string; // 공고 시작 시간 (ISO 8601 문자열)
@@ -20,7 +20,8 @@ interface NotificationCardProps {
  */
 
 export default function NotificationCard({
-  id,
+  alertId,
+  noticeId,
   status,
   restaurantName,
   startsAt,
@@ -31,13 +32,28 @@ export default function NotificationCard({
     startsAt,
     workhour,
   });
-  const { role } = useContext(AuthContext);
+  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 (
-    <Link to={role === 'employee' ? '/profile' : `/owner/post/${id}`}>
+    <div onClick={handleClick} className="cursor-pointer">
       <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>
@@ -51,6 +67,6 @@ export default function NotificationCard({
         </h2>
         <p className="text-caption/16 text-gray-40">{formattedCreatedAt}</p>
       </div>
-    </Link>
+    </div>
   );
 }

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

@@ -33,7 +33,8 @@ export default function NotificationModal({
           data.map((data) => (
             <NotificationCard
               key={data.item.id}
-              id={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}