prgrms-web-devcourse-final-project
diff --git a/‎index.html‎
Lines changed: 1 addition & 1 deletion b/‎index.html‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/App.tsx‎
Lines changed: 2 additions & 0 deletions b/‎src/App.tsx‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎src/apis/admin.ts‎
Lines changed: 1 addition & 0 deletions b/‎src/apis/admin.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎src/apis/notification.ts‎
Lines changed: 12 additions & 1 deletion b/‎src/apis/notification.ts‎
Lines changed: 12 additions & 1 deletion
diff --git a/‎src/apis/share.ts‎
Lines changed: 35 additions & 3 deletions b/‎src/apis/share.ts‎
Lines changed: 35 additions & 3 deletions
diff --git a/‎src/components/HomeButton.tsx‎
Lines changed: 0 additions & 17 deletions b/‎src/components/HomeButton.tsx‎
Lines changed: 0 additions & 17 deletions
diff --git a/‎src/components/MenuButton.tsx‎
Lines changed: 61 additions & 0 deletions b/‎src/components/MenuButton.tsx‎
Lines changed: 61 additions & 0 deletions
diff --git a/‎src/components/NotificationButton.tsx‎
Lines changed: 36 additions & 0 deletions b/‎src/components/NotificationButton.tsx‎
Lines changed: 36 additions & 0 deletions
diff --git a/‎src/components/ReportModal.tsx‎
Lines changed: 9 additions & 4 deletions b/‎src/components/ReportModal.tsx‎
Lines changed: 9 additions & 4 deletions
diff --git a/‎src/components/ToastItem.tsx‎
Lines changed: 1 addition & 1 deletion b/‎src/components/ToastItem.tsx‎
Lines changed: 1 addition & 1 deletion
@@ -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
 
@@ -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 />} />
 
@@ -7,6 +7,7 @@ const postReports = async (postReportRequest: PostReportRequest) => {
     return res;
   } catch (error) {
     console.error(error);
+    return null;
   }
 };
 
 
@@ -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 };
@@ -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(
 
@@ -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>
+    </>
+  );
+}
@@ -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>
+  );
+}
@@ -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();
     }
   };
 
@@ -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,
   );
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ const postReports = async (postReportRequest: PostReportRequest) => {`
`7`	`7`	`return res;`
`8`	`8`	`} catch (error) {`
`9`	`9`	`console.error(error);`
	`10`	`+ return null;`
`10`	`11`	`}`
`11`	`12`	`};`
`12`	`13`