feat : 공유 알림, 편지 도착 알림 모달UI 작업

Author: wldnjs990

src/pages/Notifications/components/SendingModal.tsx

@@ -1,6 +1,7 @@
 import LetterWrapper from '@/components/LetterWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
 import { useNavigate } from 'react-router';
+import SendOutlinedIcon from '@mui/icons-material/SendOutlined';
 
 export default function SendingModal({
   isOpenSendingModal,
@@ -21,7 +22,13 @@ export default function SendingModal({
           <div className="caption-r flex flex-col gap-2">
             <h2 className="body-b mb-3">편지 도착</h2>
             <span>편지는 작성된 시점으로 1시간 이후에 도착합니다.</span>
-            <span>남은시간은 홈 화면의 편지 도착 시간 버튼을 눌러 확인 가능합니다.</span>
+            <div className="flex flex-col">
+              <div className="flex items-center gap-1">
+                <span>남은시간은 홈 화면의 편지 도착 시간 버튼 </span>
+                <SendOutlinedIcon fontSize="small" />
+              </div>
+              <span>을 눌러 확인 가능합니다.</span>
+            </div>
             <button
               className="body-b mt-3 flex items-center justify-center"
               onClick={() => navigate('/')}

src/pages/Notifications/components/ShareModal.tsx

@@ -0,0 +1,43 @@
+import LetterWrapper from '@/components/LetterWrapper';
+import ModalOverlay from '@/components/ModalOverlay';
+import { useNavigate } from 'react-router';
+import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
+
+export default function ShareModal({
+  isOpenShareModal,
+  setIsOpenShareModal,
+}: {
+  isOpenShareModal: boolean;
+  setIsOpenShareModal: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const navigate = useNavigate();
+  if (!isOpenShareModal) return null;
+  const onClose = () => {
+    setIsOpenShareModal(false);
+  };
+  return (
+    <>
+      <ModalOverlay closeOnOutsideClick onClose={onClose}>
+        <LetterWrapper className="w-77">
+          <div className="caption-r flex flex-col gap-2">
+            <h2 className="body-b mb-3">편지 공유</h2>
+            <span>따숨이님과의 편지를 공유하고 싶어합니다!</span>
+            <div className="flex flex-col">
+              <div className="flex items-center gap-1">
+                <span>공유 요청은 홈 화면의 편지 공유 버튼 </span>
+                <ShareOutlinedIcon fontSize="small" />
+              </div>
+              <span>을 눌러 확인 가능합니다.</span>
+            </div>
+            <button
+              className="body-b mt-3 flex items-center justify-center"
+              onClick={() => navigate('/')}
+            >
+              홈 화면으로 이동 {'>'}
+            </button>
+          </div>
+        </LetterWrapper>
+      </ModalOverlay>
+    </>
+  );
+}

src/pages/Notifications/index.tsx

@@ -8,6 +8,7 @@ import NotificationItem from './components/NotificationItem';
 import WarningModal from './components/WarningModal';
 import SendingModal from './components/SendingModal';
 import useNotificationStore from '@/stores/notificationStore';
+import ShareModal from './components/ShareModal';
 
 const NotificationsPage = () => {
   const navigate = useNavigate();
@@ -19,6 +20,7 @@ const NotificationsPage = () => {
 
   const [isOpenWarningModal, setIsOpenWarningModal] = useState(false);
   const [isOpenSendingModal, setIsOpenSendingModal] = useState(false);
+  const [isOpenShareModal, setIsOpenShareModal] = useState(false);
 
   const [reportContent, setReportContent] = useState<string>('');
 
@@ -35,7 +37,7 @@ const NotificationsPage = () => {
       if (typeof content === 'string') setReportContent(content);
     }
     if (alarmType === 'SHARE') {
-      navigate(`/board/letter/${content}`, { state: { isShareLetterPreview: true } });
+      setIsOpenShareModal(true);
     }
     if (alarmType === 'POSTED') {
       navigate(`/board/letter/${content}`);
@@ -99,6 +101,7 @@ const NotificationsPage = () => {
         isOpenSendingModal={isOpenSendingModal}
         setIsOpenSendingModal={setIsOpenSendingModal}
       />
+      <ShareModal isOpenShareModal={isOpenShareModal} setIsOpenShareModal={setIsOpenShareModal} />
       <main className="flex grow flex-col items-center px-5 pt-20 pb-9">
         <PageTitle className="mb-10">알림</PageTitle>
         <button