prgrms-web-devcourse-final-project · wldnjs990 · Mar 10, 2025 · Mar 7, 2025 · Mar 7, 2025 · Mar 7, 2025
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="kr">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/public/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>36.5</title>
     <link

diff --git a/src/App.tsx b/src/App.tsx
@@ -26,6 +26,7 @@ import OnboardingPage from './pages/Onboarding';
 import RandomLettersPage from './pages/RandomLetters';
 import RollingPaperPage from './pages/RollingPaper';
 import WritePage from './pages/Write';
+import ShareApprovalPage from './pages/Share';
 
 const App = () => {
   useViewport();
@@ -56,6 +57,7 @@ const App = () => {
               <Route path="letter" element={<LetterBoardPage />} />
             </Route>
             <Route path="letter/:id" element={<LetterBoardDetailPage />} />
+            <Route path="share/:shareProposalId" element={<ShareApprovalPage />} />
           </Route>
           <Route path="mypage" element={<Layout />}>
             <Route index element={<MyPage />} />

diff --git a/src/apis/admin.ts b/src/apis/admin.ts
@@ -7,6 +7,7 @@ const postReports = async (postReportRequest: PostReportRequest) => {
     return res;
   } catch (error) {
     console.error(error);
+    return null;
   }
 };
 

diff --git a/src/apis/notification.ts b/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 };
diff --git a/src/apis/share.ts b/src/apis/share.ts
@@ -39,8 +39,26 @@ export interface ShareProposal {
   status: 'REJECTED' | 'APPROVED' | 'PENDING';
 }
 
+//편지 공유 요청 상세 조회
+export interface ShareProposalLetter {
+  id: number;
+  content: string;
+  writerZipCode: string;
+  receiverZipCode: string;
+  createdAt: string;
+}
+
+export interface ShareProposalDetail {
+  shareProposalId: number;
+  requesterZipCode: string;
+  recipientZipCode: string;
+  message: string;
+  status: 'PENDING' | 'ACCEPTED' | 'REJECTED';
+  letters: ShareProposalLetter[];
+}
+
 // 편지 공유 수락 / 거절
-export interface SharePostApproval {
+export interface ShareProposalApproval {
   shareProposalId: number;
   status: 'APPROVED' | 'REJECTED';
   sharePostId: number;
@@ -106,13 +124,27 @@ export const getShareProposalList = async () => {
   }
 };
 
+// 편지 공유 요청 상세 조회
+export const getShareProposalDetail = async (
+  shareProposalId: number,
+): Promise<ShareProposalDetail> => {
+  try {
+    const response = await client.get(`/api/share-proposals/${shareProposalId}`);
+    console.log(`😎공유 요청 상세 조회 데이터 `, response.data);
+    return response.data.data;
+  } catch (error) {
+    console.error('❌ 편지 공유 요청을 상세 조회하던 중 에러가 발생했습니다', error);
+    throw error;
+  }
+};
+
 // 편지 공유 수락 / 거절
 export const postShareProposalApproval = async (
   shareProposalId: number,
   action: 'approve' | 'reject',
-): Promise<SharePostApproval> => {
+): Promise<ShareProposalApproval> => {
   try {
-    const response = await client.patch(`/api/share-proposal/${shareProposalId}/${action}`);
+    const response = await client.patch(`/api/share-proposals/${shareProposalId}/${action}`);
     return response.data;
   } catch (error) {
     console.error(

diff --git a/src/components/HomeButton.tsx b/src/components/HomeButton.tsx
diff --git a/src/components/MenuButton.tsx b/src/components/MenuButton.tsx
@@ -0,0 +1,61 @@
+import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
+import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
+import MarkunreadOutlinedIcon from '@mui/icons-material/MarkunreadOutlined';
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+
+import { useState } from 'react';
+import { Link } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+export default function MenuButton() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <div className="flex w-full max-w-150 justify-end pr-5 text-center">
+        <Link
+          to="/letter/box"
+          className={twMerge(
+            'bg-primary-3 fixed bottom-[220px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            isOpen
+              ? 'translate-y-0 rotate-0 opacity-100'
+              : 'translate-y-[120%] rotate-180 opacity-0',
+          )}
+        >
+          <MarkunreadOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+        </Link>
+        <Link
+          to="/board/letter"
+          className={twMerge(
+            'bg-primary-3 fixed bottom-[160px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            isOpen
+              ? 'translate-y-0 rotate-0 opacity-100'
+              : 'translate-y-[120%] rotate-180 opacity-0',
+          )}
+        >
+          <CalendarTodayOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+        </Link>
+        <Link
+          to="/letter/write"
+          className={twMerge(
+            'bg-primary-3 fixed bottom-[100px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            isOpen
+              ? 'translate-y-0 rotate-0 opacity-100'
+              : 'translate-y-[120%] rotate-180 opacity-0',
+          )}
+        >
+          <EditNoteRoundedIcon fontSize="medium" onClick={() => setIsOpen(false)} />
+        </Link>
+
+        <div
+          className={twMerge(
+            'bg-primary-3 fixed bottom-[30px] z-50 h-13 w-13 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            isOpen ? 'rotate-90' : 'rotate-0',
+          )}
+        >
+          <MenuRoundedIcon onClick={() => setIsOpen((state) => !state)} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/NotificationButton.tsx b/src/components/NotificationButton.tsx
@@ -0,0 +1,36 @@
+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 && (
+        <div className={notReadStyle}>{notReadCount < 100 ? notReadCount : '99+'}</div>
+      )}
+      <AlarmIcon className="h-6 w-6 text-white" />
+    </Link>
+  );
+}
diff --git a/src/components/ReportModal.tsx b/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;
@@ -29,7 +30,9 @@ const ReportModal = ({ reportType, letterId, onClose }: ReportModalProps) => {
     reportType: reportType,
     reasonType: '',
     reason: '',
-    letterId: letterId,
+    letterId: reportType === 'LETTER' ? letterId : null,
+    sharePostId: reportType === 'SHARE_POST' ? letterId : null,
+    eventCommentId: reportType === 'EVENT_COMMENT' ? letterId : null,
   });
 
   const handleReasonClick = (reason: Reason) => {
@@ -38,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();
     }
   };

diff --git a/src/components/ToastItem.tsx b/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,
   );

diff --git a/src/hooks/useServerSentEvents.tsx b/src/hooks/useServerSentEvents.tsx
@@ -4,15 +4,55 @@ import { useEffect, useRef } from 'react';
 import useAuthStore from '@/stores/authStore';
 import useToastStore from '@/stores/toastStore';
 import { useNavigate } from 'react-router';
+import useNotificationStore from '@/stores/notificationStore';
+import { getNewToken } from '@/apis/auth';
+
+interface MessageEventData {
+  title: string;
+  alarmType: AlarmType;
+}
 
 export const useServerSentEvents = () => {
+  let reconnect: number | undefined;
+
   const navigate = useNavigate();
+  const recallCountRef = useRef(1);
 
   const accessToken = useAuthStore((state) => state.accessToken);
+  const setAccessToken = useAuthStore((state) => state.setAccessToken);
   const sourceRef = useRef<EventSourcePolyfill | null>(null);
 
   const setToastActive = useToastStore((state) => state.setToastActive);
 
+  const incrementNotReadCount = useNotificationStore((state) => state.incrementNotReadCount);
+
+  const ALARM_TYPE: AlarmType[] = ['SENDING', 'LETTER', 'REPORT', 'SHARE', 'POSTED'];
+  const handleOnMessage = async (data: string) => {
+    const message: MessageEventData = await JSON.parse(data);
+    if (ALARM_TYPE.includes(message.alarmType)) {
+      incrementNotReadCount();
+      setToastActive({
+        toastType: 'Info',
+        title: message.title,
+        position: 'Top',
+        time: 5,
+        onClick: () => navigate('/mypage/notifications'),
+      });
+    }
+  };
+
+  // 토큰 재발급 함수
+  const callReissue = async () => {
+    try {
+      const response = await getNewToken();
+      if (response?.status !== 200) throw new Error('error while fetching newToken');
+      const newToken = response?.data.data.accessToken;
+      return setAccessToken(newToken);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
   useEffect(() => {
     if (!accessToken) {
       console.log('로그인 정보 확인불가');
@@ -32,23 +72,24 @@ export const useServerSentEvents = () => {
         );
 
         sourceRef.current.onmessage = (event) => {
-          console.log(event);
-          console.log('알림 수신');
-          setToastActive({
-            toastType: 'Info',
-            title: '새 알림이 도착했어요!',
-            position: 'Top',
-            time: 5,
-            onClick: () => navigate('/mypage/notifications'),
-          });
+          // console.log(event);
+          // console.log('알림 수신');
+          handleOnMessage(event.data);
         };
 
-        sourceRef.current.onerror = (error) => {
-          console.log(error);
-          console.log('에러 발생함');
+        sourceRef.current.onerror = () => {
+          // 에러 발생시 해당 에러가 45초를 넘어서 발생한 에러인지, 401에러인지 판단할 수 있는게 없어서 그냥 에러 발생하면 reissue 넣는걸로 때움
+          callReissue();
           closeSSE();
+          recallCountRef.current += 1;
+          console.log('SSE연결 에러 발생');
+
           // 재연결 로직 추가 가능
-          setTimeout(connectSSE, 5000); // 5초 후 재연결 시도
+          if (recallCountRef.current < 5) {
+            reconnect = setTimeout(connectSSE, 5000);
+          } else {
+            console.log('5회 이상 에러발생으로 구독기능 제거');
+          }
         };
       } catch (error) {
         console.error(error);
@@ -64,6 +105,7 @@ export const useServerSentEvents = () => {
   }, [accessToken]);
 
   const closeSSE = () => {
+    if (reconnect) clearTimeout(reconnect);
     sourceRef.current?.close();
     sourceRef.current = null;
   };

diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
@@ -1,20 +1,18 @@
 import { Link, useNavigate } from 'react-router';
 
-import { AlarmIcon, ArrowLeftIcon, PersonIcon } from '@/assets/icons';
+import { ArrowLeftIcon, PersonIcon } from '@/assets/icons';
+import NotificationButton from '@/components/NotificationButton';
 
 const Header = () => {
-  // TODO: 뒤로 가기 버튼이 보이는 조건 추가
-  // TODO: 스크롤 발생 시, 어떻게 보여져야 하는지
   const navigate = useNavigate();
+
   return (
     <header className="fixed top-0 z-40 flex h-16 w-full max-w-150 items-center justify-between p-5">
       <button onClick={() => navigate(-1)}>
         <ArrowLeftIcon className="h-6 w-6 text-white" />
       </button>
       <div className="flex items-center gap-3">
-        <Link to="/mypage/notifications">
-          <AlarmIcon className="h-6 w-6 text-white" />
-        </Link>
+        <NotificationButton />
         <Link to="/mypage">
           <PersonIcon className="h-6 w-6 text-white" />
         </Link>