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

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

* refactor: 필요없는 코드 삭제

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

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

Author: tifsy

src/apis/draftLetters.ts

@@ -16,18 +16,30 @@ export interface DraftLetter {
   matched: boolean;
 }
 
-export const getDraftLetters = async () // token: string
-: Promise<DraftLetter[]> => {
+export const getDraftLetters = async (): Promise<DraftLetter[]> => {
   try {
-    const { data } = await client.get('/api/letters?status=draft', {
-      // headers: {
-      //   Authorization: `Bearer ${token}`,
-      // },
-    });
+    const { data } = await client.get('/api/letters?status=draft', {});
     console.log('임시저장된 편지 데이터', data);
     return data.data;
   } catch (error) {
-    console.error(`❌임시저장된 편지를 불러오던 중 에러가 발생했습니다`, error);
+    console.error('❌임시저장된 편지를 불러오던 중 에러가 발생했습니다', error);
     throw new Error('임시저장된 편지 불러오기 실패');
   }
 };
+
+export const deleteDraftLetters = async (letterId: number) => {
+  try {
+    const { data } = await client.delete(`/api/letters/${letterId}/temporary-save`);
+
+    if (data.data?.letterId) {
+      console.log('삭제된 임시저장 편지 ID:', data.data.letterId);
+    } else {
+      console.error('❌서버 응답에 letterId가 존재하지 않습니다.');
+    }
+
+    return data.data.letterId;
+  } catch (error) {
+    console.error('❌임시저장된 편지를 삭제하던 중 에러가 발생했습니다:', error);
+    throw error;
+  }
+};

src/pages/Home/components/ShowDraftModal.tsx

@@ -2,7 +2,7 @@ import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
 import React, { useEffect, useState } from 'react';
 // import { useNavigate } from 'react-router';
 
-import { DraftLetter, getDraftLetters } from '@/apis/draftLetters';
+import { DraftLetter, getDraftLetters, deleteDraftLetters } from '@/apis/draftLetters';
 import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
 
@@ -22,14 +22,29 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
   //   });
   // };
 
-  useEffect(() => {
+  const handleGetDraftLetters = () => {
     getDraftLetters()
       .then((data) => {
         setDraftLetters(data || []);
       })
       .catch((error) => {
         console.error('❌ 임시저장된 편지를 불러오는데 실패했습니다', error);
       });
+  };
+
+  const handleDeleteDraftLetters = async (letterId: number) => {
+    //TODO: 정말로 삭제하시겠습니까? 모달창
+    try {
+      await deleteDraftLetters(letterId);
+      setDraftLetters((prev) => prev.filter((letter) => letter.letterId !== letterId));
+      console.log(`letterId는 `, letterId);
+    } catch (error) {
+      console.error(`❌임시저장된 편지를 삭제하던 중 에러가 발생했습니다.`, error);
+    }
+  };
+
+  useEffect(() => {
+    handleGetDraftLetters();
   }, [onClose]);
 
   return (
@@ -52,7 +67,11 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
                   // onClick={() => handleNavigation(draft.letterId)}
                 >
                   <p className="truncate">{draft.title}</p>
-                  <div className="text-gray-20">
+                  <div
+                    className="text-gray-20 active:text-gray-600"
+                    tabIndex={0}
+                    onClick={() => handleDeleteDraftLetters(draft.letterId)}
+                  >
                     <DeleteOutlineRoundedIcon />
                   </div>
                 </div>

src/pages/Home/components/ShowShareAccessModal.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 
 import { getSharePostDetail, getSharePostList } from '@/apis/share';
-import { SharePostResponse } from '@/apis/share';
+import { SharePostResponse, SharePost } from '@/apis/share';
 import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
 
@@ -14,20 +14,30 @@ interface ShowShareAccessModalProps {
 const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
   const navigate = useNavigate();
 
-  const [sharePosts, setSharePosts] = useState<SharePostResponse>();
+  const [sharePosts, setSharePosts] = useState<SharePost[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+
+  const fetchPosts = async (page: number) => {
+    try {
+      const data: SharePostResponse = await getSharePostList(page, 10);
+      setSharePosts((prev) => [...prev, ...data.content]);
+      setHasMore(page < data.totalPages);
+    } catch (error) {
+      console.error('❌ 게시글 목록을 불러오는 데 실패했습니다.', error);
+    }
+  };
 
   useEffect(() => {
-    const fetchPosts = async () => {
-      try {
-        const data = await getSharePostList(1, 10);
-        setSharePosts(data);
-      } catch (error) {
-        console.error('❌ 게시글 목록을 불러오는 데 실패했습니다.', error);
-      }
-    };
+    fetchPosts(currentPage);
+  }, [currentPage]);
 
-    fetchPosts();
-  }, []);
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollTop + clientHeight >= scrollHeight - 10 && hasMore) {
+      setCurrentPage((prev) => prev + 1);
+    }
+  };
 
   const handleNavigation = async (sharePostId: number) => {
     try {
@@ -55,8 +65,11 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
                 허락 여부를 체크해주세요!
               </p>
             </div>
-            <div className="mt-6 flex max-h-60 min-h-auto w-[251px] flex-col gap-[10px] overflow-y-scroll [&::-webkit-scrollbar]:hidden">
-              {sharePosts?.content.map((post) => (
+            <div
+              className="mt-6 flex max-h-60 min-h-auto w-[251px] flex-col gap-[10px] overflow-y-scroll [&::-webkit-scrollbar]:hidden"
+              onScroll={handleScroll}
+            >
+              {sharePosts?.map((post) => (
                 <button
                   className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
                   key={post.sharePostId}