feat : 2차 배포 수정 (#122)

* feat: 임시저장된 편지 삭제 기능 구현  (#84)

* fix: 공유 게시글 목록 페이지네이션에서 무한 스크롤로 전환

* refactor: 필요없는 코드 삭제

* feat: 임시저장된 편지 삭제 기능 구현

* design: 임시저장 편지 삭제 아이콘 클릭 시 색상 변경

* feat: 롤링페이퍼 배포된 api로 연결 수정 (#85)

* style:롤링페이퍼 공지 애니메이션 수정

* fix: 롤링페이퍼가 진행되지 않을 때 화면에 보여지지 않도록 처리

* feat: 새로운 롤링페이퍼 생성 api 연동

* feat: 롤링페이퍼 목록 조회 api 연동

* feat: 롤링페이퍼 삭제 api 연동

* feat: 롤링페이퍼 사용여부 변경 api 연동

* feat: 롤링페이퍼 코멘트 목록 조회 api 연동

* feat: 롤링페이퍼 등록 및 삭제 api 연동
- api 응답 구조 수정

* feat : 알림 2차 기능 구현 (#81)

* feat:알림 컨텐츠 상호작용, 라우팅 기능 구현

* feat : SSE구현시도

* feat : SSE전역변수로 관리할지 store 하나 만들어서 만들면서 고민중

* feat : 알림구독 테스트용 App.tsx에 훅 호출한 코드

* fix: 자잘한 이슈 수정 (#86)

* fix: 401 에러가 아닌 경우 바로 로그아웃 되는 문제 해결

* fix: 토큰 만료로 reissue 실패시 로그아웃 안되는 문제 해결

* fix: reissue 에러 시 에러 처리 안되는 문제 해결
- client.ts의 interceptors.response.use 구문 내에서 api 호출및 데이터 가공을 함수 밖으로 꺼냄

* fix: mailbox에서 isClosed 옵션 반대로 보여주는 문제 해결
- isClosed 상태를 반대로 받아와서 상태를 잘못 보여주는 문제 해결

* fix: mailBox 배포 api에 따른 수정 작업
- sharePost 요청 요청자 id 삭제
- 상세 페이지 api 경로 수정
- 우편함 상세체이지 날짜 잘못표기하는 에러 수정

* fix: reissue시 access token을 사용하지 않도록 수정

* feat: 신고 모달 파라미터 변경으로 인한, 파라미터 추가(게시판 상세)

* fix: 마이페이지 api 수정

* feat: 임시저장된 편지 삭제 기능 구현  (#84)

* fix: 공유 게시글 목록 페이지네이션에서 무한 스크롤로 전환

* refactor: 필요없는 코드 삭제

* feat: 임시저장된 편지 삭제 기능 구현

* design: 임시저장 편지 삭제 아이콘 클릭 시 색상 변경

* feat: 롤링페이퍼 배포된 api로 연결 수정 (#85)

* style:롤링페이퍼 공지 애니메이션 수정

* fix: 롤링페이퍼가 진행되지 않을 때 화면에 보여지지 않도록 처리

* feat: 새로운 롤링페이퍼 생성 api 연동

* feat: 롤링페이퍼 목록 조회 api 연동

* feat: 롤링페이퍼 삭제 api 연동

* feat: 롤링페이퍼 사용여부 변경 api 연동

* feat: 롤링페이퍼 코멘트 목록 조회 api 연동

* feat: 롤링페이퍼 등록 및 삭제 api 연동
- api 응답 구조 수정

* fix: type 에러 수정

* fix: 데이터가 없는 경우 컴포넌트 에러가 나는 부분 수정
- 배열이 없거나, 길이가 0이면 placeholder를 보여줌

* Update index.tsx

이상한 import 지움

---------

Co-authored-by: nirii00 <[email protected]>
Co-authored-by: Seungyeon Han (Tiffany) <[email protected]>
Co-authored-by: Minha Ahn <[email protected]>

* feat : 재사용 가능한 페이지네이션 구현 (#92)

* feat: 편지 공유 요청 수신 조회 기능 구현 (#90)

* feat: 편지 공유 요청 수신 조회 기능 구현

* refactor: incomingLetters.ts 코드 리팩토링

* refactor: incomingLettersStore.ts에서 필요 없는 필드 정리

* feat: 오고 있는 편지 도착까지 걸리는 시간 카운트다운 기능 구현

* design: 오고 있는 편지 모달에서 데이터가 없을 때 대체 텍스트 추가

* design: 임시저장된 편지 모달에서 데이터가 없을 때 대체 텍스트 추가

* design: 편지 공유 요청 수신 조회 모달에서 데이터가 없을 때 대체 텍스트 추가

* feat : 편지작성, 랜덤편지, 상세페이지 3차 기능구현 (#94)

* feat : 게시글 신고기능 구현

* feat : 카테고리 전체 선택 안되는 오류 수정 + 답장 전송시 도착시간 1시간으로 텍스트 고정

* feat : getPrevLetter api 엔드포인트 변경

* feat : 디테일 페이지 답장버튼 분기처리

* feat : 편지상세페이지 zipCode바인딩

* refactor : 편지상세 페이지 컴포넌트 분리

* feat : 편지 상세 컴포넌트 추가 분리 + 편지 평가 기능 구현 완료

* refactor : 신고모달 타입에서 null 제거 + 이전편지 가져오기, 타입 조금 수정

* feat : 랜덤편지 편지 없을 경우 예외처리 UI 추가

* design : 편지작성, 편지상세 resize속성 제거

* feat : 랜덤편지 데이터가 없을시 예외처리 UI 추가 + 쿨타임 상태일때 예외처리 UI 수정

* chore : 랜덤편지 api console 제거

* feat : 임시저장 api 생성(연결 테스트 아직 안함)

* feat : 편지 작성 페이지 임시저장 버튼 구현

* feat : 편지 임시저장 80% 구현(승연님 작업 이후 임시저장 업데이트 분기 나눠야함)

* feat : 임시저장 최초답장 예외처리

* feat: 롤링페이퍼 추가 기능 구현 (#95)

* fix: 더미데이터 제거

* feat: 롤링페이퍼 무한 스크롤 적용

* feat: 관리자 페이지 롤링 페이퍼 설정 화면에 페이지네이션 적용

* design: 롤링페이퍼 작성 버튼 위치 수정

* fix: 데이터 변경 후 캐싱 초기화 하는 조건 수정

* design: 하단 언덕 이미지 깨지는 문제 해결

---------

Co-authored-by: wldnjs990 <[email protected]>

* feat: 임시저장 편지 조회 기능 완성  (#97)

* design: 편지 공유 요청 모달 텍스트 수정

* fix: 임시저장 편지 조회 데이터 구조 수정

* feat:
임시저장 편지 작성 페이지로 데이터 넘겨주기

* design: 홈 페이지에서 새 이미지를 눌러도 랜덤응원메시지가 바뀌도록

---------

Co-authored-by: wldnjs990 <[email protected]>

* feat : 토스트 UI 구현 + 알림 페이지 코드 작업 90% 완료 + 실시간 알림, 편지 작성 예외처리에 토스트UI 연결 (#98)

* feat : 알림 타입에 SENDING 추가

* feat : 알림 페이지 타임라인 데이터바인딩 + 알림타입에 따른 UI작업 완료(구독 UI작업만 남음)

* feat : 토스트UI 작업중

* feat : SSE훅 호출 위치 App에서 PrivateRouter로 이동 + Home 라우트 PrivateRouter 안으로 이동

* feat : 토스트 기능 1차 구현(알림기능 알림도착, 편지작성 내용 미입력시 토스트 넣어둠)

* feat : 토스트알림 최대넓이 지정

* feat : 토스트 컨텐츠 타입별 이모지 추가

* refactor : 토스트UI 알림 1개만 표시 => 알림 1개 이상 표시 되도록 업그레이드(단일 객체 -> 객체 배열로 데이터값 수정)

* refactor : 토스트UI position 타입 수정

* fix: reissue 문제, 내 편지함 data 최신화 문제 해결 (#100)

* fix: 에러나는 경우 무조건 로그아웃되는 현상 해결

* fix: client.ts 주석 제거

* fix: 탈퇴시 로그아웃 자동적으로 되도록 수정

* feat: 탈퇴 에러시 alert 추가

* fix: 마이페이지, 내 공유 게시물 데이터 없을때 자잘한 에러 수정

* fix: 편치 쿼리 갱신 로직 추가
- queryClient.invalidateQueries로 쿼리를 갱신

* fix: 에러시 alert 추가

* fix: 탈퇴한 회원 로직 추가, 온보딩 from 왼쪽 정렬

* fix: 편지 전송/삭제 시 편지함에서 바로 수정사항 반영되도록 함
- 편지 삭제/전송시 queryClient.invalidateQueries 적용

* fix: 게시판에서 response 없을 경우 페이지 로딩이 안되는 문제 해결
- 추후 지속적으로 확인 예정

* fix: 파비콘, 사이트 이름 수정

* feat: ToastUI 적용
-내 편지함의 alert를 toastUI로 변경했습니다.

* fix: reissue token 담기지 않는 문제 해결

* fix: letterBoard length 없음 문제 해결
- 계속 확인 필

---------

Co-authored-by: nirii00 <[email protected]>

* feat : 알림 페이지 알림 확인 처리 안되던 현상 수정 + 신고페이지 4차 구현 (#101)

* refactor : API 일부 리팩토링

* feat : 알림페이지 알림 단일확인시 읽음알림으로 처리되지않던 현상 수정

* feat : 신고 페이지 status 필터링 임시 구현(수정해야함)

* feat: 공유 요청 상세 조회 기능 구현  (#106)

* refactor: SharePostApproval을 ShareProposalApproval 으로 변경

* fix: 따숨온도가 100도일 때 텍스트가 안 보이는 오류 해결

* feat: 공유 요청 페이지 라우팅 추가

* feat: 공유 요청 상세 조회 기능 구현

* fix: 임시저장 편지 작성 페이지 이동 경로 문제 해결 (#109)

* feat : 신고 등록 API + ReportModal 수정 (#111)

* fix: QA 반영 (#112)

* feat: ToastUI 적용
-내 편지함의 alert를 toastUI로 변경했습니다.

* fix: letterBoard length 없음 문제 해결
- 계속 확인 필

* Fix:
- 헤더 뒤로가기를 홈으로 가기로 변경
- 편지함 캐싱 수정 -> 새로고침시 데이터 잘 불러와짐
- 신고 타입 수정
- mailbox 타입 분리
- mailBox 공유시 id를 상대방 id로 수정

* fix: 추가 커밋

* fix: 내 게시물 삭제 아이콘 표시, query key 중복 오류 해결

* fix: 파비콘 경로 수정

* fix: 새로고침시 데이터 바로 반영

* fix: 탈퇴한 회원 로그인 페이지로 리디렉션

* Feat: Menu 버튼 추가

* fix: build 오류 해결

---------

Co-authored-by: nirii00 <[email protected]>

* feat : 알림 기능 구현 + QA (#114)

* feat : 안읽은 알림 count갯수 ui 밑작업(전역변수 만듬)

* feat : 알림 안읽은 메시지 UI처리 + SSE로직 1차 수정

* feat : 알림 토스트UI에 담기는 제목 바인딩

* feat : 알림 받을시의 코드 오류 수정

* feat : SSE 에러 5번 발생시 재귀 중지 코드 추가

* feat : 실시간 알림, UI 구현 완료 + 신고 모달 토스트UI 적용

* chore : 편지 받아올떄마다 console 출력하는 코드 주석처리

* feat : 임시저장 데이터 바인딩 및 임시저장 덮어씌우기 작업 완료 (#115)

* refactor: 2차 QA 반영  (#116)

* feat: 마이페이지에서 신고 횟수 조회 기능 구현

* design: button에 aria-label 추가하기

* design: 마이페이지 신고 횟수 조회 텍스트 수정

* perf: 오고 있는 편지가 존재하지 않을 때는 오고 있는 편지 모달 내에서 렌더링되지 않도록

* feat: 마이페이지에서 신고 횟수 클릭 시 신고 안내 모달이 뜨도록

* fix: 마이페이지에서 신고 횟수 조회 텍스트 오류 수정

* deploy : 코드 정리

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

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

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

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

---------

Co-authored-by: Seungyeon Han (Tiffany) <[email protected]>
Co-authored-by: Minha Ahn <[email protected]>
Co-authored-by: Sebin Kim <[email protected]>
Co-authored-by: nirii00 <[email protected]>

Author: 4 people

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);
       }
     };

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/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';
 

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/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<SharePost>();
   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 && (

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) => (