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/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/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) => { )}