diff --git a/src/hooks/useServerSentEvents.tsx b/src/hooks/useServerSentEvents.tsx index a0b406b..10cf9a0 100644 --- a/src/hooks/useServerSentEvents.tsx +++ b/src/hooks/useServerSentEvents.tsx @@ -79,7 +79,6 @@ export const useServerSentEvents = () => { sourceRef.current.onerror = () => { // 에러 발생시 해당 에러가 45초를 넘어서 발생한 에러인지, 401에러인지 판단할 수 있는게 없어서 그냥 에러 발생하면 reissue 넣는걸로 때움 - callReissue(); closeSSE(); recallCountRef.current += 1; console.log('SSE연결 에러 발생'); @@ -92,6 +91,7 @@ export const useServerSentEvents = () => { } }; } catch (error) { + callReissue(); console.error(error); } }; diff --git a/src/pages/Admin/components/AddRollingPaperModal.tsx b/src/pages/Admin/components/AddRollingPaperModal.tsx index e6f86bc..26a37dd 100644 --- a/src/pages/Admin/components/AddRollingPaperModal.tsx +++ b/src/pages/Admin/components/AddRollingPaperModal.tsx @@ -3,6 +3,7 @@ import { ChangeEvent, FormEvent, useState } from 'react'; import { postNewRollingPaper } from '@/apis/rolling'; import ModalOverlay from '@/components/ModalOverlay'; +import { AxiosError } from 'axios'; interface AddRollingPaperModalProps { currentPage: number | string; @@ -22,8 +23,12 @@ export default function AddRollingPaperModal({ currentPage, onClose }: AddRollin onClose(); queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] }); }, - onError: () => { - setError('편지 작성에 실패했어요. 다시 시도해주세요.'); + onError: (err: AxiosError<{ code: string; message: string }>) => { + if (err.response?.data.code === 'MOD-003') { + setError('금칙어가 포함되어 있어요. 다시 작성해주세요.'); + } else { + setError('편지 작성에 실패했어요. 다시 시도해주세요.'); + } }, }); diff --git a/src/pages/Home/components/ShowShareAccessModal.tsx b/src/pages/Home/components/ShowShareAccessModal.tsx index 135c393..e9c1dfa 100644 --- a/src/pages/Home/components/ShowShareAccessModal.tsx +++ b/src/pages/Home/components/ShowShareAccessModal.tsx @@ -1,11 +1,10 @@ import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router'; +import { getShareProposalDetail } from '@/apis/share'; import { getShareProposalList } from '@/apis/share'; import { ShareProposal } from '@/apis/share'; -import { getShareProposalDetail } from '@/apis/share'; - import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper'; import ModalOverlay from '@/components/ModalOverlay'; diff --git a/src/pages/Landing/constants/index.ts b/src/pages/Landing/constants/index.ts index da27eda..211309d 100644 --- a/src/pages/Landing/constants/index.ts +++ b/src/pages/Landing/constants/index.ts @@ -1,11 +1,11 @@ export const STYLE_CLASS = [ { - imagePosition: 'left-[calc(50%-200px)]', - mask: 'bottom-26 left-[calc(50%+65px)]', - circle: 'h-41 w-41', - textPosition: '-top-20 left-[calc(50%-30px)] text-right', + imagePosition: 'left-[calc(50%+130px)]', + mask: 'bottom-8 left-[calc(50%)]', + circle: 'h-65 w-65', + textPosition: '-top-14 left-1/2 text-center', description: - '따뜻한 편지 사례들을 모아 볼 수 있어요.\n응원이 필요한 사람들에게\n단체로 롤링페이퍼를 쓸 수도 있습니다.', + '모르는 사람에게 고민을 털어 놓아 보세요.\n다른 사람에게도 위로, 응원, 축하를 보낼 수 있어요.', }, { imagePosition: 'left-[calc(50%-200px)]', @@ -15,11 +15,11 @@ export const STYLE_CLASS = [ description: '주고받은 편지 내역을 확인해 보세요.\n보는 것 만으로도 마음이 따뜻해집니다.', }, { - imagePosition: 'left-[calc(50%+130px)]', - mask: 'bottom-8 left-[calc(50%)]', - circle: 'h-65 w-65', - textPosition: '-top-14 left-1/2 text-center', + imagePosition: 'left-[calc(50%-200px)]', + mask: 'bottom-26 left-[calc(50%+65px)]', + circle: 'h-41 w-41', + textPosition: '-top-20 left-[calc(50%-30px)] text-right', description: - '모르는 사람에게 고민을 털어 놓아 보세요.\n다른 사람에게도 위로, 응원, 축하를 보낼 수 있어요.', + '따뜻한 편지 사례들을 모아 볼 수 있어요.\n응원이 필요한 사람들에게\n단체로 롤링페이퍼를 쓸 수도 있습니다.', }, ]; diff --git a/src/pages/LetterBoardDetail/index.tsx b/src/pages/LetterBoardDetail/index.tsx index b29d530..4a9de3a 100644 --- a/src/pages/LetterBoardDetail/index.tsx +++ b/src/pages/LetterBoardDetail/index.tsx @@ -11,7 +11,7 @@ import ReportModal from '@/components/ReportModal'; import Header from './components/Header'; import Letter from './components/Letter'; -import { useLocation, useParams } from 'react-router'; +import { useParams } from 'react-router'; import useAuthStore from '@/stores/authStore'; const LetterBoardDetailPage = () => { @@ -20,8 +20,8 @@ const LetterBoardDetailPage = () => { const [isWriter, setIsWriter] = useState(false); const [postDetail, setPostDetail] = useState(); const [activeReportModal, setActiveReportModal] = useState(false); - const location = useLocation(); - const sharePostId: string = location.pathname.split('/')[3]; + // const location = useLocation(); + // const sharePostId: string = location.pathname.split('/')[3]; // const isShareLetterPreview = location.state?.isShareLetterPreview || false; const { id } = useParams(); @@ -84,38 +84,6 @@ const LetterBoardDetailPage = () => { } }, []); - useEffect(() => { - const fetchPostDetail = async (postId: string) => { - try { - const data = await getSharePostDetail(postId); - setPostDetail(data); - } catch (error) { - console.error('❌ 공유 게시글 상세 조회에 실패했습니다.', error); - } - }; - - const fetchLikeCounts = async (postId: string) => { - try { - const response = await getSharePostLikeCount(postId); - if (!response) throw new Error('error while fetching like count'); - console.log('✅ 편지 좋아요 갯수:', response); - setLikeCount(response.likeCount); - setIsLike(response.liked); - } catch (error) { - console.error('❌ 편지 좋아요 갯수를 가져오는 중 에러가 발생했습니다', error); - throw new Error('편지 좋아요 갯수 가져오기 실패'); - } - }; - - // if (location.state?.postDetail) { - fetchPostDetail(sharePostId); - fetchLikeCounts(sharePostId); - // } else { - // console.warn('postDetail not found in location.state'); - // } - // }, [location.state]); - }, []); - return ( <> {activeReportModal && ( diff --git a/src/pages/RollingPaper/components/Comment.tsx b/src/pages/RollingPaper/components/Comment.tsx index c136f7f..c1c7816 100644 --- a/src/pages/RollingPaper/components/Comment.tsx +++ b/src/pages/RollingPaper/components/Comment.tsx @@ -9,7 +9,7 @@ const Comment = ({ comment, onClick }: CommentProps) => { return (
-

{comment.content}

+

{comment.content}

From. {comment.zipCode}

diff --git a/src/pages/RollingPaper/components/CommentDetailModal.tsx b/src/pages/RollingPaper/components/CommentDetailModal.tsx index cbabb52..4047352 100644 --- a/src/pages/RollingPaper/components/CommentDetailModal.tsx +++ b/src/pages/RollingPaper/components/CommentDetailModal.tsx @@ -6,21 +6,31 @@ interface CommentDetailModalProps { isWriter: boolean; onClose: () => void; onDelete: () => void; + onReport: () => void; } -const CommentDetailModal = ({ comment, isWriter, onClose, onDelete }: CommentDetailModalProps) => { +const CommentDetailModal = ({ + comment, + isWriter, + onClose, + onDelete, + onReport, +}: CommentDetailModalProps) => { + const handleButtonClick = () => { + if (isWriter) onDelete(); + else onReport(); + }; + return ( <> - {isWriter && ( - - )} +
-

{comment.content}

+

{comment.content}

From. {comment.zipCode}

diff --git a/src/pages/RollingPaper/components/WriteCommentButton.tsx b/src/pages/RollingPaper/components/WriteCommentButton.tsx index 21cc29c..d7c9071 100644 --- a/src/pages/RollingPaper/components/WriteCommentButton.tsx +++ b/src/pages/RollingPaper/components/WriteCommentButton.tsx @@ -1,10 +1,11 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { postRollingPaperComment } from '@/apis/rolling'; import EnvelopeImg from '@/assets/images/closed-letter.png'; import MessageModal from '@/components/MessageModal'; import useAuthStore from '@/stores/authStore'; +import { AxiosError } from 'axios'; interface WriteCommentButtonProps { rollingPaperId: string; @@ -25,8 +26,12 @@ const WriteCommentButton = ({ rollingPaperId }: WriteCommentButtonProps) => { setError(null); setActiveMessageModal(false); }, - onError: () => { - setError('편지 작성에 실패했어요. 다시 시도해주세요.'); + onError: (err: AxiosError<{ code: string; message: string }>) => { + if (err.response?.data.code === 'MOD-003') { + setError('금칙어가 포함되어 있어요. 다시 작성해주세요.'); + } else { + setError('편지 작성에 실패했어요. 다시 시도해주세요.'); + } }, }); @@ -44,6 +49,10 @@ const WriteCommentButton = ({ rollingPaperId }: WriteCommentButtonProps) => { mutate(newMessage.trim()); }; + useEffect(() => { + setError(null); + }, [activeMessageModal]); + return ( <> {activeMessageModal && ( @@ -62,7 +71,7 @@ const WriteCommentButton = ({ rollingPaperId }: WriteCommentButtonProps) => { )}