diff --git a/src/pages/Home/components/FloatingLetters.tsx b/src/pages/Home/components/FloatingLetters.tsx index 3403883..2941464 100644 --- 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 index ddce857..fbdc6d9 100644 --- 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 ( -
+

게시판

- go to letter board + go to letter board
diff --git a/src/pages/Home/components/GoToLetterBox.tsx b/src/pages/Home/components/GoToLetterBox.tsx index d5be9a5..f14ab4d 100644 --- 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(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 ( -
+

내 편지함

go to letter box
diff --git a/src/pages/Home/components/HomeBackgroundRightBottom.tsx b/src/pages/Home/components/HomeBackgroundRightBottom.tsx index db74245..4a15d96 100644 --- a/src/pages/Home/components/HomeBackgroundRightBottom.tsx +++ b/src/pages/Home/components/HomeBackgroundRightBottom.tsx @@ -9,7 +9,7 @@ const HomeBackgroundRightBottom = () => { return ( ); diff --git a/src/pages/Home/components/HomeBackgroundRightTop.tsx b/src/pages/Home/components/HomeBackgroundRightTop.tsx index 9795f12..e37560b 100644 --- a/src/pages/Home/components/HomeBackgroundRightTop.tsx +++ b/src/pages/Home/components/HomeBackgroundRightTop.tsx @@ -10,7 +10,7 @@ const HomeBackgroundRightTop = () => { return ( ); diff --git a/src/pages/Home/components/HomeRight.tsx b/src/pages/Home/components/HomeRight.tsx index 8182517..fb75c01 100644 --- a/src/pages/Home/components/HomeRight.tsx +++ b/src/pages/Home/components/HomeRight.tsx @@ -7,9 +7,13 @@ import GoToLetterBoard from './GoToLetterBoard'; import GoToLetterBox from './GoToLetterBox'; import UnreadLetterModal from './UnreadLetterModal'; +import useToastStore from '@/stores/toastStore'; + const HomeRight = () => { const [arrivedCount, setArrivedCount] = useState(0); + const setToastActive = useToastStore((state) => state.setToastActive); + useEffect(() => { const fetchUnreadCount = async () => { try { @@ -17,6 +21,11 @@ const HomeRight = () => { 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 index 4764837..b2f1d59 100644 --- 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 index e9c1dfa..15a952c 100644 --- 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,6 +20,8 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => { const [shareProposals, setShareProposals] = useState([]); + const setToastActive = useToastStore((state) => state.setToastActive); + useEffect(() => { getShareProposalList() .then((data) => { @@ -25,6 +29,11 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => { }) .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 index c3491a3..5ce5522 100644 --- 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(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 index eced975..8bed0a8 100644 --- 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 index 7e19fa7..e091935 100644 --- 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 = () => {
+

경고 안내

+

+ 따사로운 서비스 이용을 위해, 부적절하다고 판단되는 편지는 반려하고 있어요. 서로를 + 존중하는 따뜻한 공간을 만들기 위해 협조 부탁드립니다. +

경고 규칙

3회 경고: 서비스 이용 불가능

diff --git a/src/pages/Share/index.tsx b/src/pages/Share/index.tsx index 8a2fddf..2ecb81f 100644 --- 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(); + 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; } };