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

tifsy · web-flow · commit 266d0e5483ab · 2025-03-07T23:10:23.000+09:00
* feat: 편지 공유 요청 수신 조회 기능 구현

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

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

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

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

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

* design: 편지 공유 요청 수신 조회 모달에서 데이터가 없을 때 대체 텍스트 추가
diff --git a/src/apis/incomingLetters.ts b/src/apis/incomingLetters.ts
@@ -1,13 +1,9 @@
 import client from './client';
 
-export const getIncomingLetters = async (token: string) => {
+export const getIncomingLetters = async () => {
   try {
-    const { data } = await client.get('/api/letters?status=delivery', {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-    console.log('불러온 데이터', data);
+    const { data } = await client.get('/api/letters?status=delivery');
+    console.log('오고있는 편지 데이터', data);
     return data;
   } catch (error) {
     console.error('❌오고 있는 편지 목록을 불러오던 중 에러 발생', error);
diff --git a/src/apis/share.ts b/src/apis/share.ts
@@ -21,7 +21,7 @@ export interface SharePost {
   letters: ShareLetter[];
 }
 
-// 페이징 포함
+// 공유 게시글 목록 조회 - 페이징 포함
 export interface SharePostResponse {
   content: SharePost[];
   currentPage: number;
@@ -30,6 +30,15 @@ export interface SharePostResponse {
   totalPages: number;
 }
 
+// 편지 공유 요청 수신 조회
+export interface ShareProposal {
+  shareProposalId: number;
+  requesterZipCode: string;
+  recipientZipCode: string;
+  message: string;
+  status: 'REJECTED' | 'APPROVED' | 'PENDING';
+}
+
 // 편지 공유 수락 / 거절
 export interface SharePostApproval {
   shareProposalId: number;
@@ -84,6 +93,19 @@ export const postShareProposals = async (
   }
 };
 
+// 편지 공유 요청 수신 조회
+export const getShareProposalList = async () => {
+  try {
+    const response = await client.get('/api/share-proposals/inbox');
+    console.log(`🌟공유 요청 목록`, response.data);
+
+    return response.data.data;
+  } catch (error) {
+    console.error('❌ 편지 공유 요청을 조회하던 중 에러가 발생했습니다', error);
+    throw error;
+  }
+};
+
 // 편지 공유 수락 / 거절
 export const postShareProposalApproval = async (
   shareProposalId: number,
diff --git a/src/pages/Home/components/ShowDraftModal.tsx b/src/pages/Home/components/ShowDraftModal.tsx
@@ -60,22 +60,26 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
               <p className="caption-r text-black">로그아웃 시 임시 저장된 편지는 사라집니다</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">
-              {draftLetters.map((draft) => (
-                <div
-                  className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
-                  key={draft.letterId}
-                  // onClick={() => handleNavigation(draft.letterId)}
-                >
-                  <p className="truncate">{draft.title}</p>
+ {draftLetters.length > 0 ? (
+                draftLetters.map((draft) => (
                   <div
-                    className="text-gray-20 active:text-gray-600"
-                    tabIndex={0}
-                    onClick={() => handleDeleteDraftLetters(draft.letterId)}
+                    className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
+                    key={draft.letterId}
+                    // onClick={() => handleNavigation(draft.letterId)}
                   >
-                    <DeleteOutlineRoundedIcon />
+                    <p className="truncate">{draft.title}</p>
+                    <div
+                      className="text-gray-20 active:text-gray-600"
+                      tabIndex={0}
+                      onClick={() => handleDeleteDraftLetters(draft.letterId)}
+                    >
+                      <DeleteOutlineRoundedIcon />
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))
+              ) : (
+                <p className="caption-m text-center text-gray-50">작성 중인 편지가 없어요</p>
+              )}
             </div>
           </ModalBackgroundWrapper>
         </div>
diff --git a/src/pages/Home/components/ShowIncomingLettersModal.tsx b/src/pages/Home/components/ShowIncomingLettersModal.tsx
@@ -29,15 +29,19 @@ const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) =>
               <p className="caption-r text-black">시간은 실제 시간을 기반으로 책정됩니다.</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">
-              {data.map((letter) => (
-                <div
-                  className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
-                  key={letter.letterId}
-                >
-                  <p className="truncate">{letter.title}</p>
-                  <p>{letter.remainingTime}</p>
-                </div>
-              ))}
+              {data.length > 0 ? (
+                data.map((letter) => (
+                  <div
+                    className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
+                    key={letter.letterId}
+                  >
+                    <p className="truncate">{letter.title}</p>
+                    <p>{letter.remainingTime}</p>
+                  </div>
+                ))
+              ) : (
+                <p className="caption-m text-center text-gray-50">오고 있는 편지가 없어요</p>
+              )}
             </div>
           </ModalBackgroundWrapper>
         </div>
diff --git a/src/pages/Home/components/ShowShareAccessModal.tsx b/src/pages/Home/components/ShowShareAccessModal.tsx
@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 
-import { getSharePostDetail, getSharePostList } from '@/apis/share';
-import { SharePostResponse, SharePost } from '@/apis/share';
+import { getSharePostDetail } from '@/apis/share';
+import { getShareProposalList } from '@/apis/share';
+import { ShareProposal } from '@/apis/share';
+
 import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
 
@@ -14,35 +16,22 @@ interface ShowShareAccessModalProps {
 const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
   const navigate = useNavigate();
 
-  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);
-    }
-  };
+  const [shareProposals, setShareProposals] = useState<ShareProposal[]>([]);
 
   useEffect(() => {
-    fetchPosts(currentPage);
-  }, [currentPage]);
-
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-    if (scrollTop + clientHeight >= scrollHeight - 10 && hasMore) {
-      setCurrentPage((prev) => prev + 1);
-    }
-  };
+    getShareProposalList()
+      .then((data) => {
+        setShareProposals(data || []);
+      })
+      .catch((error) => {
+        console.error('❌ 공유 요청 목록을 불러오는 데 실패했습니다.', error);
+      });
+  }, []);
 
-  const handleNavigation = async (sharePostId: number) => {
+  const handleNavigation = async (shareProposalId: number) => {
     try {
-      const postDetail = await getSharePostDetail(sharePostId);
-      navigate(`/board/letter/${sharePostId}`, {
+      const postDetail = await getSharePostDetail(shareProposalId);
+      navigate(`/board/letter/${shareProposalId}`, {
         state: { postDetail, isShareLetterPreview: true },
       });
     } catch (error) {
@@ -65,19 +54,20 @@ 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"
-              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}
-                  onClick={() => handleNavigation(post.sharePostId)}
-                >
-                  <p>{post.writerZipCode}님의 공유 요청</p>
-                </button>
-              ))}
+            <div className="mt-6 flex max-h-60 min-h-auto w-[251px] flex-col gap-[10px] overflow-y-scroll [&::-webkit-scrollbar]:hidden">
+              {shareProposals.length > 0 ? (
+                shareProposals.map((proposal) => (
+                  <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={proposal.shareProposalId}
+                    onClick={() => handleNavigation(proposal.shareProposalId)}
+                  >
+                    <p>{proposal.requesterZipCode}님의 공유 요청</p>
+                  </button>
+                ))
+              ) : (
+                <p className="caption-m text-center text-gray-50">새로운 공유 요청이 없어요</p>
+              )}
             </div>
           </ModalBackgroundWrapper>
         </div>
diff --git a/src/stores/incomingLettersStore.ts b/src/stores/incomingLettersStore.ts
@@ -12,9 +12,6 @@ interface IncomingLetters {
 
 interface IncomingLettersStore {
   data: IncomingLetters[];
-  arrivedCount: number;
-  message: string;
-  timestamp: string;
   fetchIncomingLetters: () => void;
 }
 
@@ -36,31 +33,40 @@ const calculatingRemainingTime = (deliveryCompletedAt: string): string => {
 
 export const useIncomingLettersStore = create<IncomingLettersStore>((set) => ({
   data: [],
-  arrivedCount: 0,
-  message: '',
-  timestamp: '',
   fetchIncomingLetters: async () => {
     try {
-      const token = localStorage.getItem('token') || '';
-      const data = await getIncomingLetters(token);
+      const data = await getIncomingLetters();
 
-      let arrivedCount = 0;
       const updatedLetters = data.data.map((letter: IncomingLetters) => {
         const remainingTime = calculatingRemainingTime(letter.deliveryCompletedAt);
-        if (remainingTime === '00:00:00') arrivedCount += 1; // 도착한 편지 카운트
 
         return { ...letter, remainingTime };
       });
 
       const inProgressLetters = updatedLetters.filter(
         (letter: IncomingLetters) => letter.remainingTime !== '00:00:00',
       );
+
       set({
         data: inProgressLetters,
-        arrivedCount,
-        message: data.message,
-        timestamp: data.timestamp,
       });
+
+      setInterval(() => {
+        set((state) => {
+          const updatedLetters = state.data.map((letter: IncomingLetters) => {
+            const remainingTime = calculatingRemainingTime(letter.deliveryCompletedAt);
+            return { ...letter, remainingTime };
+          });
+
+          const filteredLetters = updatedLetters.filter(
+            (letter) => letter.remainingTime !== '00:00:00',
+          );
+
+          return {
+            data: filteredLetters,
+          };
+        });
+      }, 1000);
     } catch (error) {
       console.error('❌오고 있는 편지 목록을 불러오던 중 에러 발생', error);
     }
