prgrms-web-devcourse-final-project · wldnjs990 · Mar 11, 2025 · Mar 11, 2025 · Mar 11, 2025 · Mar 11, 2025
diff --git a/src/pages/Home/components/FloatingLetters.tsx b/src/pages/Home/components/FloatingLetters.tsx
@@ -16,7 +16,7 @@ const FloatingLetters = () => {
     lettersRef.current.forEach((letter, index) => {
       gsap.to(letter, {
         // x: Math.random() * 50 - 40,
-        y: Math.random() * 20 - 40 + 'vh', // 위아래 이동
+        y: Math.random() * 20 - 30 + 'vh', // 위아래 이동
         rotation: Math.random() * 50 - 25, // 회전
         duration: Math.random() * 3 + 2, // 지속 시간
         repeat: -1, // 무한 반복
@@ -35,7 +35,7 @@ const FloatingLetters = () => {
           ref={(el) => {
             if (el) lettersRef.current[index] = el;
           }}
-          className="absolute w-20 opacity-90"
+          className="absolute w-20 opacity-90 md:w-24"
           style={{
             left: `${index * 30 + 30}px`, // 편지지 간격
             top: '60vh',

diff --git a/src/pages/Home/components/GoToLetterBoard.tsx b/src/pages/Home/components/GoToLetterBoard.tsx
@@ -4,11 +4,15 @@ import goToLetterBoard from '@/assets/images/go-to-letter-board.png';
 
 const GoToLetterBoard = () => {
   return (
-    <div className="absolute bottom-48 left-[calc(var(--vh)*33)] z-9 flex w-full">
+    <div className="absolute right-[-56%] bottom-[28%] z-9 flex w-full md:right-[-42%]">
       <div className="text-left">
         <p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">게시판</p>
         <Link to="/board/letter">
-          <img src={goToLetterBoard} alt="go to letter board" className="w-[177px]" />
+          <img
+            src={goToLetterBoard}
+            alt="go to letter board"
+            className="w-[160px] sm:w-[200px] md:w-[240px]"
+          />
         </Link>
       </div>
     </div>

diff --git a/src/pages/Home/components/GoToLetterBox.tsx b/src/pages/Home/components/GoToLetterBox.tsx
@@ -4,9 +4,11 @@ import { Link } from 'react-router';
 import { getUnreadLettersCount } from '@/apis/unreadLetters';
 import goToLetterBoxNewLetters from '@/assets/images/go-to-letter-box-new-letters.png';
 import goToLetterBox from '@/assets/images/go-to-letter-box.png';
+import useToastStore from '@/stores/toastStore';
 
 const GoToLetterBox = () => {
   const [arrivedCount, setArrivedCount] = useState<number>(0);
+  const setToastActive = useToastStore((state) => state.setToastActive);
 
   useEffect(() => {
     const fetchUnreadCount = async () => {
@@ -15,20 +17,25 @@ const GoToLetterBox = () => {
         setArrivedCount(result.data);
       } catch (error) {
         console.error('❌ 안 읽은 편지 개수를 불러오는 데 실패했습니다:', error);
+        setToastActive({
+          toastType: 'Error',
+          title: '서버 오류로 안 읽은 편지 개수를 불러오는 데에 실패했습니다.',
+          time: 5,
+        });
       }
     };
     fetchUnreadCount();
   }, []);
 
   return (
-    <div className="absolute bottom-15 left-5 z-9 flex">
+    <div className="absolute bottom-[11%] left-5 z-9 flex">
       <div className="text-left">
         <p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">내 편지함</p>
         <Link to="/letter/box">
           <img
             src={arrivedCount ? goToLetterBoxNewLetters : goToLetterBox}
             alt="go to letter box"
-            className="w-[206.5px]"
+            className="w-[190px] sm:w-[210px] md:w-[240px]"
           />
         </Link>
       </div>

diff --git a/src/pages/Home/components/HomeBackgroundRightBottom.tsx b/src/pages/Home/components/HomeBackgroundRightBottom.tsx
@@ -9,7 +9,7 @@ const HomeBackgroundRightBottom = () => {
   return (
     <BackgroundImageWrapper
       as="div"
-      className="absolute bottom-0 z-[10] h-[calc(var(--vh)*20)] w-full min-w-[600px] -translate-x-1/4 overflow-hidden"
+      className="absolute bottom-0 z-10 h-[20%] w-full min-w-[600px] -translate-x-1/4 overflow-hidden md:w-[920px]"
       imageUrl={theme === 'light' ? homeRightMountainBottom : homeRightMountainBottomDark}
     />
   );

diff --git a/src/pages/Home/components/HomeBackgroundRightTop.tsx b/src/pages/Home/components/HomeBackgroundRightTop.tsx
@@ -10,7 +10,7 @@ const HomeBackgroundRightTop = () => {
   return (
     <BackgroundImageWrapper
       as="div"
-      className="absolute bottom-0 z-8 h-[calc(var(--vh)*32)] w-full min-w-[760px] -translate-x-1/4 overflow-hidden"
+      className="absolute bottom-0 z-8 h-[35%] w-full min-w-[760px] -translate-x-1/4 overflow-hidden md:w-[1200px]"
       imageUrl={theme === 'light' ? homeRightMountainTop : homeRightMountainTopDark}
     />
   );

diff --git a/src/pages/Home/components/HomeRight.tsx b/src/pages/Home/components/HomeRight.tsx
@@ -7,16 +7,25 @@ import GoToLetterBoard from './GoToLetterBoard';
 import GoToLetterBox from './GoToLetterBox';
 import UnreadLetterModal from './UnreadLetterModal';
 
+import useToastStore from '@/stores/toastStore';
+
 const HomeRight = () => {
   const [arrivedCount, setArrivedCount] = useState<number>(0);
 
+  const setToastActive = useToastStore((state) => state.setToastActive);
+
   useEffect(() => {
     const fetchUnreadCount = async () => {
       try {
         const result = await getUnreadLettersCount();
         setArrivedCount(result.data);
       } catch (error) {
         console.error('❌ 안 읽은 편지 개수를 불러오는 데 실패했습니다:', error);
+        setToastActive({
+          toastType: 'Error',
+          title: '서버 오류로 안 읽은 편지 개수를 불러오는 데에 실패했습니다.',
+          time: 5,
+        });
       }
     };
     fetchUnreadCount();

diff --git a/src/pages/Home/components/ShowDraftModal.tsx b/src/pages/Home/components/ShowDraftModal.tsx
@@ -6,6 +6,8 @@ import { DraftLetter, getDraftLetters, deleteDraftLetters } from '@/apis/draftLe
 import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
 
+import useToastStore from '@/stores/toastStore';
+
 interface ShowDraftModalProps {
   children?: React.ReactNode;
   onClose: () => void;
@@ -16,6 +18,8 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
 
   const navigate = useNavigate();
 
+  const setToastActive = useToastStore((state) => state.setToastActive);
+
   const handleNavigation = (draft: DraftLetter) => {
     navigate(`/letter/write/?letterId=${draft.parentLetterId}`, {
       state: { draft, isDraft: true },
@@ -29,17 +33,26 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
       })
       .catch((error) => {
         console.error('❌ 임시저장된 편지를 불러오는데 실패했습니다', error);
+        setToastActive({
+          toastType: 'Error',
+          title: '서버 오류로 임시저장된 편지를 불러오는 데에 실패했습니다.',
+          time: 5,
+        });
       });
   };
 
   const handleDeleteDraftLetters = async (letterId: number) => {
-    //TODO: 정말로 삭제하시겠습니까? 모달창
     try {
       await deleteDraftLetters(letterId);
       setDraftLetters((prev) => prev.filter((letter) => letter.letterId !== letterId));
       console.log(`letterId는 `, letterId);
     } catch (error) {
       console.error(`❌임시저장된 편지를 삭제하던 중 에러가 발생했습니다.`, error);
+      setToastActive({
+        toastType: 'Error',
+        title: '서버 오류로 임시저장 된 편지를 삭제하던 중 에러가 발생했습니다.',
+        time: 5,
+      });
     }
   };
 

diff --git a/src/pages/Home/components/ShowShareAccessModal.tsx b/src/pages/Home/components/ShowShareAccessModal.tsx
@@ -8,6 +8,8 @@ import { ShareProposal } from '@/apis/share';
 import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
 
+import useToastStore from '@/stores/toastStore';
+
 interface ShowShareAccessModalProps {
   children?: React.ReactNode;
   onClose: () => void;
@@ -18,13 +20,20 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
 
   const [shareProposals, setShareProposals] = useState<ShareProposal[]>([]);
 
+  const setToastActive = useToastStore((state) => state.setToastActive);
+
   useEffect(() => {
     getShareProposalList()
       .then((data) => {
         setShareProposals(data || []);
       })
       .catch((error) => {
         console.error('❌ 공유 요청 목록을 불러오는 데 실패했습니다.', error);
+        setToastActive({
+          toastType: 'Error',
+          title: '서버 오류로 공유 요청 목록을 불러오는 데에 실패했습니다.',
+          time: 5,
+        });
       });
   }, []);
 
@@ -36,6 +45,11 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
       });
     } catch (error) {
       console.error('❌ 게시글 상세 페이지로 이동하는 데에 실패했습니다.', error);
+      setToastActive({
+        toastType: 'Error',
+        title: '서버 오류로 게시글 상세 페이지로 이동하는 데에 실패했습니다.',
+        time: 5,
+      });
     }
   };
 

diff --git a/src/pages/Home/components/UnreadLetterModal.tsx b/src/pages/Home/components/UnreadLetterModal.tsx
@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 
 import { getUnreadLettersCount } from '@/apis/unreadLetters';
+import useToastStore from '@/stores/toastStore';
 
 const UnreadLetterModal = () => {
   const [arrivedCount, setArrivedCount] = useState<number>(0);
+  const setToastActive = useToastStore((state) => state.setToastActive);
 
   useEffect(() => {
     const fetchUnreadCount = async () => {
@@ -12,6 +14,11 @@ const UnreadLetterModal = () => {
         setArrivedCount(result.data);
       } catch (error) {
         console.error('❌ 안 읽은 편지 개수를 불러오는 데 실패했습니다:', error);
+        setToastActive({
+          toastType: 'Error',
+          title: '서버 오류로 안 읽은 편지 개수를 불러오는 데에 실패했습니다.',
+          time: 5,
+        });
       }
     };
     fetchUnreadCount();

diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx
@@ -95,13 +95,13 @@ const LetterBoxDetailPage = () => {
       setShareComment('');
       setToastActive({
         toastType: 'Success',
-        title: '공유 완료 되었습니다.',
+        title: '공유 요청이 완료 되었습니다.',
       });
     },
     onError: (error) => {
       setToastActive({
         toastType: 'Error',
-        title: '공유가 실패했습니다. 잠시 후에 다시 시도해주세요.',
+        title: '공유 요청이 실패했습니다. 잠시 후에 다시 시도해주세요.',
       });
       console.error(error);
     },

diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
@@ -59,7 +59,11 @@ const MyPage = () => {
             setIsOpenModal(false);
             if (response?.status === 200) {
               logout();
-              alert('탈퇴가 완료 되었습니다.');
+              setToastActive({
+                toastType: 'Success',
+                title: '탈퇴가 완료되었습니다.',
+                time: 5,
+              });
             }
           }}
         />
@@ -70,6 +74,11 @@ const MyPage = () => {
           <article className="bg-accent-1 relative w-77 overflow-hidden rounded-sm p-6">
             <div className="absolute inset-0 h-full w-full bg-white/90 blur-[25px]" />
             <div className="relative">
+              <h2 className="body-sb mb-1.5 text-gray-100">경고 안내</h2>
+              <p className="caption-r mb-5 text-black">
+                따사로운 서비스 이용을 위해, 부적절하다고 판단되는 편지는 반려하고 있어요. 서로를
+                존중하는 따뜻한 공간을 만들기 위해 협조 부탁드립니다.
+              </p>
               <h2 className="body-sb mb-1.5 text-gray-100">경고 규칙</h2>
               <p className="caption-r text-black">3회 경고: 서비스 이용 불가능</p>
             </div>

diff --git a/src/pages/Share/index.tsx b/src/pages/Share/index.tsx
@@ -4,6 +4,8 @@ import { useNavigate, useParams } from 'react-router';
 import { getShareProposalDetail } from '@/apis/share';
 import { postShareProposalApproval, ShareProposalDetail } from '@/apis/share';
 
+import useToastStore from '@/stores/toastStore';
+
 import { twMerge } from 'tailwind-merge';
 import Letter from '../LetterBoardDetail/components/Letter';
 
@@ -12,17 +14,36 @@ import BlurImg from '@/assets/images/landing-blur.png';
 const ShareApprovalPage = () => {
   const navigate = useNavigate();
   const { shareProposalId } = useParams();
-  console.log(shareProposalId);
 
   const [proposalDetail, setProposalDetail] = useState<ShareProposalDetail>();
 
+  const setToastActive = useToastStore((state) => state.setToastActive);
+
   const handleProposalApproval = async (action: 'approve' | 'reject') => {
     try {
       const result = await postShareProposalApproval(Number(shareProposalId), action);
       console.log(`✅ 편지 공유 ${action === 'approve' ? '수락' : '거절'}됨:`, result);
+      if (action === 'approve') {
+        setToastActive({
+          toastType: 'Success',
+          title: '편지를 성공적으로 공유하였습니다. 게시판에서 확인해보세요!',
+          time: 5,
+        });
+      } else {
+        setToastActive({
+          toastType: 'Info',
+          title: '공유 요청을 성공적으로 거부하였습니다.',
+          time: 5,
+        });
+      }
       navigate('/');
     } catch (error) {
       console.error('❌공유 요청 처리 중 에러 발생', error);
+      setToastActive({
+        toastType: 'Error',
+        title: '서버 오류로 편지를 공유하는 데에 실패했습니다.',
+        time: 5,
+      });
     }
   };
   useEffect(() => {
@@ -32,6 +53,11 @@ const ShareApprovalPage = () => {
         setProposalDetail(data);
       } catch (error) {
         console.error('❌ 공유 요청 상세 조회에 실패했습니다.', error);
+        setToastActive({
+          toastType: 'Error',
+          title: '서버 오류로 공유 요청을 조회하는 데에 실패했습니다.',
+          time: 5,
+        });
         throw error;
       }
     };