fix: 롤링페이퍼 QA 반영 (#120)

* fix: 롤링페이퍼 QA 반영
- 신고 모달 추가
- 글자 길어질 때 줄바꿈이 생기지 않는 문제 발생
- 신고 버튼 추가
- 금칙어로 인한 에러 메시지 추가

* fix: 어드민 금칙어 에러 반영

* fix: 랜딩페이지 설명 순서 변경

Author: AAminha

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('편지 작성에 실패했어요. 다시 시도해주세요.');
+      }
     },
   });
 

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단체로 롤링페이퍼를 쓸 수도 있습니다.',
   },
 ];

src/pages/RollingPaper/components/Comment.tsx

@@ -9,7 +9,7 @@ const Comment = ({ comment, onClick }: CommentProps) => {
   return (
     <MemoWrapper className="cursor-pointer text-black" onClick={onClick}>
       <div className="z-1 h-full w-full">
-        <p className="caption-r whitespace-pre-wrap">{comment.content}</p>
+        <p className="caption-r break-all whitespace-pre-wrap">{comment.content}</p>
         <p className="caption-m mt-1 place-self-end">From. {comment.zipCode}</p>
       </div>
     </MemoWrapper>

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 (
     <ModalOverlay closeOnOutsideClick onClose={onClose}>
       <>
-        {isWriter && (
-          <button type="button" className="body-b ml-auto text-white" onClick={onDelete}>
-            삭제하기
-          </button>
-        )}
+        <button type="button" className="body-b ml-auto text-white" onClick={handleButtonClick}>
+          {isWriter ? '삭제하기' : '신고하기'}
+        </button>
 
         <MemoWrapper className="mt-1 flex max-h-1/2 w-78 overflow-y-auto px-5 text-black">
           <div className="z-1 flex flex-col gap-3">
-            <p className="body-r leading-[26px] whitespace-pre-wrap">{comment.content}</p>
+            <p className="body-r leading-[26px] break-all whitespace-pre-wrap">{comment.content}</p>
             <p className="body-m place-self-end">From. {comment.zipCode}</p>
           </div>
         </MemoWrapper>

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) => {
       )}
       <button
         type="button"
-        className="sticky bottom-8 z-10 mt-4 -mb-4 self-start overflow-hidden rounded-sm"
+        className="sticky bottom-8 z-10 mt-auto -mb-4 self-start overflow-hidden rounded-sm"
         onClick={() => setActiveMessageModal(true)}
       >
         <img src={EnvelopeImg} alt="편지지 이미지" className="h-12 w-auto opacity-70" />

src/pages/RollingPaper/index.tsx

@@ -14,6 +14,7 @@ import Comment from './components/Comment';
 import CommentDetailModal from './components/CommentDetailModal';
 import WriteCommentButton from './components/WriteCommentButton';
 import useAuthStore from '@/stores/authStore';
+import ReportModal from '@/components/ReportModal';
 
 const MESSAGE_SIZE = 10;
 
@@ -22,6 +23,7 @@ const RollingPaperPage = () => {
   const [activeComment, setActiveComment] = useState<RollingPaperComment | null>(null);
   const [activeDetailModal, setActiveDetailModal] = useState(false);
   const [activeDeleteModal, setActiveDeleteModal] = useState(false);
+  const [activeReportModal, setActiveReportModal] = useState(false);
   const zipCode = useAuthStore((props) => props.zipCode);
   const queryClient = useQueryClient();
 
@@ -69,6 +71,17 @@ const RollingPaperPage = () => {
             setActiveDetailModal(false);
             setActiveDeleteModal(true);
           }}
+          onReport={() => {
+            setActiveDetailModal(false);
+            setActiveReportModal(true);
+          }}
+        />
+      )}
+      {activeReportModal && (
+        <ReportModal
+          reportType="EVENT_COMMENT"
+          letterId={Number(activeComment?.commentId)}
+          onClose={() => setActiveReportModal(false)}
         />
       )}
       {activeDeleteModal && (
@@ -90,7 +103,7 @@ const RollingPaperPage = () => {
       <main className="z-1 flex grow flex-col items-center px-5 pt-20 pb-12">
         <PageTitle className="mb-18 max-w-73 text-center">{title}</PageTitle>
         <p className="body-sb text-gray-60 mb-2 w-full">등록된 편지 {totalComments}</p>
-        <section className="w-full">
+        <section className="mb-4 w-full">
           <MasonryInfiniteGrid column={2} align="stretch" gap={16} onRequestAppend={handleLoadMore}>
             {isSuccess &&
               allComments.map((comment) => (