feat : 실시간 알림, UI 구현 완료 + 신고 모달 토스트UI 적용

Author: wldnjs990

src/apis/admin.ts

@@ -7,6 +7,7 @@ const postReports = async (postReportRequest: PostReportRequest) => {
     return res;
   } catch (error) {
     console.error(error);
+    return null;
   }
 };
 

src/apis/notification.ts

@@ -31,4 +31,15 @@ const patchReadNotificationAll = async () => {
   }
 };
 
-export { getTimeLines, patchReadNotification, patchReadNotificationAll };
+const getNotReadCount = async () => {
+  try {
+    const res = await client.get('/api/notifications/not-read');
+    if (!res) throw new Error('안 읽은 알림 수를 가져오는 도중 오류가 발생했습니다.');
+    console.log(res);
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { getTimeLines, patchReadNotification, patchReadNotificationAll, getNotReadCount };

src/components/NotificationButton.tsx

@@ -1,15 +1,30 @@
+import { getNotReadCount } from '@/apis/notification';
 import { AlarmIcon } from '@/assets/icons';
 import useNotificationStore from '@/stores/notificationStore';
+import { useEffect } from 'react';
 import { Link } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 
 export default function NotificationButton() {
   const notReadCount = useNotificationStore((state) => state.notReadCount);
+  const setNotReadCount = useNotificationStore((state) => state.setNotReadCount);
   const notReadStyle = twMerge(
     `absolute -right-1 -bottom-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-400 text-[8px] text-white`,
     notReadCount >= 100 && 'w-4 h-4',
   );
 
+  const handleGetNotReadCount = async () => {
+    const res = await getNotReadCount();
+    if (res?.status === 200) {
+      const updateNotReadCount: number = res.data.data.notReadCount;
+      setNotReadCount(updateNotReadCount);
+    }
+  };
+
+  useEffect(() => {
+    handleGetNotReadCount();
+  });
+
   return (
     <Link to="/mypage/notifications" className="relative">
       {notReadCount > 0 && (

src/components/ReportModal.tsx

@@ -5,6 +5,7 @@ import { postReports } from '@/apis/admin';
 
 import ConfirmModal from './ConfirmModal';
 import TextareaField from './TextareaField';
+import useToastStore from '@/stores/toastStore';
 
 interface ReportModalProps {
   reportType: ReportType;
@@ -40,14 +41,16 @@ const ReportModal = ({ reportType, letterId, onClose }: ReportModalProps) => {
     else setPostReportRequest((cur) => ({ ...cur, reasonType: reason }));
   };
 
+  const setToastActive = useToastStore((state) => state.setToastActive);
+
   const handleSubmit = async () => {
     const res = await postReports(postReportRequest);
     if (res?.status === 200) {
-      alert('신고 처리되었습니다.');
+      setToastActive({ title: '신고가 접수되었습니다.', toastType: 'Success' });
       console.log(res);
       onClose();
-    } else if (res?.status === 409) {
-      alert('신고한 이력이 있습니다.');
+    } else {
+      setToastActive({ title: '신고한 이력이 있습니다.', toastType: 'Error' });
       onClose();
     }
   };

src/components/ToastItem.tsx

@@ -26,7 +26,7 @@ export default function ToastItem({ toastObj, index }: { toastObj: ToastObj; ind
 
   const animation = `toast-blink ${toastObj.time}s ease-in-out forwards`;
   const toastStyle = twMerge(
-    'fixed bottom-5 left-1/2 z-40 flex h-[40px] max-w-150 min-w-[300px] w-[100%] -translate-1/2 items-center justify-center rounded-lg caption-sb shadow-[0_1px_6px_rgba(200,200,200,0.2)]',
+    'fixed bottom-5 left-1/2 z-40 flex h-[40px] max-w-150 min-w-[300px] w-[80%] -translate-1/2 items-center justify-center rounded-lg caption-sb shadow-[0_1px_6px_rgba(200,200,200,0.2)]',
     TOAST_POSITION[toastObj.position],
     TOAST_DESIGN[toastObj.toastType].style,
   );

src/hooks/useServerSentEvents.tsx

@@ -82,7 +82,7 @@ export const useServerSentEvents = () => {
           callReissue();
           closeSSE();
           recallCountRef.current += 1;
-          console.log(recallCountRef.current);
+          console.log('SSE연결 에러 발생');
 
           // 재연결 로직 추가 가능
           if (recallCountRef.current < 5) {
@@ -92,7 +92,6 @@ export const useServerSentEvents = () => {
           }
         };
       } catch (error) {
-        console.log('에러', error);
         console.error(error);
       }
     };

src/pages/Notifications/index.tsx

@@ -12,6 +12,7 @@ import useNotificationStore from '@/stores/notificationStore';
 const NotificationsPage = () => {
   const navigate = useNavigate();
 
+  const decrementNotReadCount = useNotificationStore((state) => state.decrementNotReadCount);
   const setNotReadCount = useNotificationStore((state) => state.setNotReadCount);
 
   const [noti, setNoti] = useState<Noti[]>([]);
@@ -55,7 +56,7 @@ const NotificationsPage = () => {
       setNoti((curNoti) =>
         curNoti.map((noti) => {
           if (noti.timelineId === timelineId && !noti.read) {
-            setNotReadCount(0);
+            decrementNotReadCount();
             return { ...noti, read: true };
           }
           return noti;