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