fix: 3차 QA 반영 (#131)

nirii00 · web-flow · commit a1f9e5989e87 · 2025-03-11T12:13:40.000+09:00
* feat: 내 게시물 삭제

* Fix: menu button z-index 조정

* fix: 롤링페이퍼 게시판에서 z-index 해결

* fix: 공유 게시물 상세페이지 코멘트 길어질 경우 벗어나는 오류 해결

* fix: 랜덤편지 모달 z-index 조정

* fix: 공유게시물 삭제 api 수정

---------

Co-authored-by: nirii00 &lt;nirii00@users.noreply.github.com&gt;
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
diff --git a/src/apis/share.ts b/src/apis/share.ts
@@ -163,7 +163,6 @@ export const postSharePostLike = async (sharePostId: string) => {
     return response.data;
   } catch (error) {
     console.error('❌ 편지 좋아요 중 에러가 발생했습니다', error);
-    throw new Error('편지 좋아요 실패');
   }
 };
 
@@ -175,6 +174,15 @@ export const getSharePostLikeCount = async (sharePostId: string) => {
     return response.data;
   } catch (error) {
     console.error('❌ 편지 좋아요 갯수 조회 중 에러가 발생했습니다', error);
-    throw new Error('편지 좋아요 갯수 조회 실패');
+  }
+};
+
+export const deleteSharePost = async (sharePostId: string) => {
+  try {
+    const response = await client.delete(`/api/share-posts/${sharePostId}`);
+    if (!response) throw new Error('error while deleting post');
+    return response;
+  } catch (error) {
+    console.error('❌ 편지 삭제 중 에러가 발생했습니다', error);
   }
 };
diff --git a/src/components/MenuButton.tsx b/src/components/MenuButton.tsx
@@ -16,44 +16,48 @@ export default function MenuButton() {
         <Link
           to="/letter/box"
           className={twMerge(
-            'bg-primary-3 fixed bottom-[220px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[220px] z-30 flex h-12 w-12 rotate-360 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen
               ? 'translate-y-0 rotate-0 opacity-100'
-              : 'translate-y-[120%] rotate-180 opacity-0',
+              : 'pointer-events-none translate-y-[120%] rotate-180 opacity-0',
           )}
+          onClick={() => setIsOpen(false)}
         >
-          <MarkunreadOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+          <MarkunreadOutlinedIcon fontSize="small" />
         </Link>
         <Link
           to="/board/letter"
           className={twMerge(
-            'bg-primary-3 fixed bottom-[160px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[160px] z-30 flex h-12 w-12 rotate-360 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen
               ? 'translate-y-0 rotate-0 opacity-100'
-              : 'translate-y-[120%] rotate-180 opacity-0',
+              : 'pointer-events-none translate-y-[120%] rotate-180 opacity-0',
           )}
+          onClick={() => setIsOpen(false)}
         >
-          <CalendarTodayOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+          <CalendarTodayOutlinedIcon fontSize="small" />
         </Link>
         <Link
           to="/letter/write"
           className={twMerge(
-            'bg-primary-3 fixed bottom-[100px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[100px] z-30 flex h-12 w-12 rotate-360 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen
               ? 'translate-y-0 rotate-0 opacity-100'
-              : 'translate-y-[120%] rotate-180 opacity-0',
+              : 'pointer-events-none translate-y-[120%] rotate-180 opacity-0',
           )}
+          onClick={() => setIsOpen(false)}
         >
-          <EditNoteRoundedIcon fontSize="medium" onClick={() => setIsOpen(false)} />
+          <EditNoteRoundedIcon fontSize="medium" />
         </Link>
 
         <div
           className={twMerge(
-            'bg-primary-3 fixed bottom-[30px] z-50 h-13 w-13 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[30px] z-30 flex h-13 w-13 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen ? 'rotate-90' : 'rotate-0',
           )}
+          onClick={() => setIsOpen((state) => !state)}
         >
-          <MenuRoundedIcon onClick={() => setIsOpen((state) => !state)} />
+          <MenuRoundedIcon />
         </div>
       </div>
     </>
diff --git a/src/main.tsx b/src/main.tsx
@@ -15,11 +15,11 @@ queryClient.setDefaultOptions({
 });
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </QueryClientProvider>
-  </StrictMode>,
+  // <StrictMode>
+  <QueryClientProvider client={queryClient}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </QueryClientProvider>,
+  // </StrictMode>,
 );
diff --git a/src/pages/LetterBoardDetail/components/Header.tsx b/src/pages/LetterBoardDetail/components/Header.tsx
@@ -14,6 +14,7 @@ interface HeaderProps {
   isWriter: boolean;
   onToggleLike: () => void;
   onOpenReportModal: () => void;
+  onDeleteLetter: () => void;
   isShareLetterPreview?: boolean;
 }
 
@@ -23,10 +24,10 @@ const Header = ({
   isWriter,
   onToggleLike,
   onOpenReportModal,
+  onDeleteLetter,
   isShareLetterPreview = false,
 }: HeaderProps) => {
   const navigate = useNavigate();
-
   return (
     <header className="fixed top-0 z-40 w-full max-w-150">
       <div className="flex h-16 items-center justify-between bg-white p-5">
@@ -46,8 +47,7 @@ const Header = ({
               <p className="body-l-m text-primary-1">{likeCount}</p>
             </div>
             {isWriter ? (
-              // TODO: 게시물 삭제
-              <DeleteIcon className="text-primary-1 h-6 w-6" />
+              <DeleteIcon className="text-primary-1 h-6 w-6" onClick={onDeleteLetter} />
             ) : (
               <button type="button" onClick={onOpenReportModal}>
                 <SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
diff --git a/src/pages/LetterBoardDetail/components/Letter.tsx b/src/pages/LetterBoardDetail/components/Letter.tsx
@@ -14,7 +14,7 @@ const Letter = ({ letter, isWriter = false }: LetterProps) => {
     <MemoWrapper isSender={isWriter}>
       <div className="flex flex-col gap-2 text-black">
         <p className="body-sb">To. {letter.receiverZipCode}</p>
-        <p className="body-r leading-[26px] whitespace-pre-wrap">{letter.content}</p>
+        <p className="body-r leading-[26px] break-all whitespace-pre-wrap">{letter.content}</p>
         <p className="body-m place-self-end">From. {letter.writerZipCode}</p>
       </div>
     </MemoWrapper>
diff --git a/src/pages/LetterBoardDetail/index.tsx b/src/pages/LetterBoardDetail/index.tsx
@@ -6,27 +6,28 @@ import {
   SharePost,
   getSharePostLikeCount,
   postSharePostLike,
+  deleteSharePost,
 } from '@/apis/share';
 import ReportModal from '@/components/ReportModal';
 
 import Header from './components/Header';
 import Letter from './components/Letter';
-import { useParams } from 'react-router';
+
+import { useNavigate, useParams } from 'react-router';
 import useAuthStore from '@/stores/authStore';
+import useToastStore from '@/stores/toastStore';
 
 const LetterBoardDetailPage = () => {
   const [likeCount, setLikeCount] = useState(0);
   const [isLike, setIsLike] = useState(false);
   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 isShareLetterPreview = location.state?.isShareLetterPreview || false;
 
   const { id } = useParams();
-
   const myZipCode = useAuthStore.getState().zipCode;
+  const setToastActive = useToastStore((state) => state.setToastActive);
+  const navigate = useNavigate();
 
   const postLike = async (sharePostId: string) => {
     try {
@@ -35,7 +36,6 @@ const LetterBoardDetailPage = () => {
       console.log('✅ 편지 좋아요 추가됨:', response);
     } catch (error) {
       console.error('❌ 편지 좋아요 추가 중 에러가 발생했습니다', error);
-      throw new Error('편지 좋아요 추가 실패');
     }
   };
 
@@ -48,6 +48,26 @@ const LetterBoardDetailPage = () => {
     postLike(sharePostId);
   };
 
+  const handleDeleteLetter = async () => {
+    try {
+      if (id) {
+        const response = await deleteSharePost(id);
+        if (!response) throw new Error('deleteSharePost: no response');
+        navigate(-1);
+        setToastActive({
+          toastType: 'Success',
+          title: '게시물 삭제 완료',
+        });
+      } else throw new Error('deleteSharePost: id 값을 조회할 수 없습니다.');
+    } catch (error) {
+      console.error(error);
+      setToastActive({
+        toastType: 'Error',
+        title: '삭제 실패했습니다. 다시 시도해주세요.',
+      });
+    }
+  };
+
   useEffect(() => {
     const fetchPostDetail = async (postId: string) => {
       try {
@@ -100,12 +120,13 @@ const LetterBoardDetailPage = () => {
           isWriter={isWriter}
           onToggleLike={() => (id ? handleToggleLike(id) : handleToggleLike('error'))}
           onOpenReportModal={() => setActiveReportModal(true)}
+          onDeleteLetter={() => handleDeleteLetter()}
         />
         <main className="px-5 pt-18 pb-3">
           <p className="body-b mb-6 px-5">FROM. {postDetail?.zipCode}</p>
           <p
             className={twMerge(
-              'body-r bg-[repeating-linear-gradient(transparent,transparent_25px,#ffe6e3_26px)] px-5 whitespace-pre-wrap',
+              'body-r bg-[repeating-linear-gradient(transparent,transparent_25px,#ffe6e3_26px)] px-5 break-all whitespace-pre-wrap',
               'leading-[26px]',
             )}
           >
diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx
@@ -222,11 +222,11 @@ const LetterBoxDetailPage = () => {
             disabled={selected.length === 0}
             onClick={() => setIsOpenShareModal(true)}
           >
-            다음으로
+            공유하기
           </button>
         </div>
       )}
-      <MenuButton />
+      {!isShareMode && <MenuButton />}
     </>
   );
 };
diff --git a/src/pages/RandomLetters/components/Matched.tsx b/src/pages/RandomLetters/components/Matched.tsx
@@ -5,6 +5,7 @@ import { deleteRandomLetterMatching } from '@/apis/randomLetter';
 import ResultLetter from '@/components/ResultLetter';
 import { formatNumber } from '@/utils/formatNumber';
 import { timeFormatter } from '@/utils/timeFormatter';
+import useToastStore from '@/stores/toastStore';
 
 export default function Matched({
   matchedLetter,
@@ -18,6 +19,7 @@ export default function Matched({
   setOpenSelectedDetailModal: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   const navigate = useNavigate();
+  const setToastActive = useToastStore((state) => state.setToastActive);
 
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
 
@@ -43,7 +45,7 @@ export default function Matched({
   const handleDeleteRandomLetterMatching = async () => {
     const res = await deleteRandomLetterMatching();
     if (res?.status === 200) {
-      alert('매칭이 취소되었습니다.');
+      setToastActive({ title: '매칭이 취소되었습니다.', toastType: 'Success' });
       navigate(-1);
     }
   };
diff --git a/src/pages/RandomLetters/components/MatchedLetter.tsx b/src/pages/RandomLetters/components/MatchedLetter.tsx
@@ -14,7 +14,7 @@ const MatchedLetter = ({ matchedLetter }: { matchedLetter: MatchedLetter }) => {
     <>
       <div
         className={twMerge(
-          `flex grow flex-col gap-3 px-5 pb-7.5`,
+          `z-50 flex grow flex-col gap-3 px-5 pb-7.5`,
           PAPER_TYPE_OBJ[matchedLetter.paperType],
         )}
       >
diff --git a/src/pages/RandomLetters/index.tsx b/src/pages/RandomLetters/index.tsx
@@ -75,6 +75,14 @@ const RandomLettersPage = () => {
   }, []);
   return (
     <>
+      {openSelectModal && (
+        <MatchingSelectModal
+          setOpenModal={setOpenSelectModal}
+          selectedLetter={selectedLetter}
+          setOpenSelectedDetailModal={setOpenSelectedDetailModal}
+          setMatchedLetter={setMatchedLetter}
+        />
+      )}
       {openSelectedDetailModal ? (
         <MatchedLetter matchedLetter={matchedLetter} />
       ) : (
@@ -103,15 +111,6 @@ const RandomLettersPage = () => {
                 setOpenSelectedDetailModal={setOpenSelectedDetailModal}
               />
             )}
-
-            {openSelectModal && (
-              <MatchingSelectModal
-                setOpenModal={setOpenSelectModal}
-                selectedLetter={selectedLetter}
-                setOpenSelectedDetailModal={setOpenSelectedDetailModal}
-                setMatchedLetter={setMatchedLetter}
-              />
-            )}
           </div>
           <BackgroundBottom />
         </>
diff --git a/src/pages/RollingPaper/index.tsx b/src/pages/RollingPaper/index.tsx
@@ -129,8 +129,8 @@ const RollingPaperPage = () => {
           )}
         </section>
         <WriteCommentButton rollingPaperId={id} />
+        <MenuButton />
       </main>
-      <MenuButton />
       <BackgroundBottom />
     </>
   );

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const MatchedLetter = ({ matchedLetter }: { matchedLetter: MatchedLetter }) => {`
`14`	`14`	`<>`
`15`	`15`	`<div`
`16`	`16`	`className={twMerge(`
`17`		- `flex grow flex-col gap-3 px-5 pb-7.5`,
	`17`	+ `z-50 flex grow flex-col gap-3 px-5 pb-7.5`,
`18`	`18`	`PAPER_TYPE_OBJ[matchedLetter.paperType],`
`19`	`19`	`)}`
`20`	`20`	`>`