feat: 임시저장된 편지 조회 기능 구현 (#75)

* refactor: 함수명 통일성을 위해 fetchIncomingLettersApi → getIncomingLetters 변경

* design: 홈 페이지 임시저장 편지 모달에 스크롤 기능 추가

* feat: 임시저장된 편지 조회 기능 구현

* fix: 모달 재오픈 시 임시저장 편지 최신화 되지 않는 문제 수정

* feat: ShowDraftModal에서 임시저장 편지 클릭 시 이동 로직 추가 (주석 처리)

Author: tifsy

src/apis/draftLetters.ts

@@ -0,0 +1,33 @@
+import client from './client';
+
+export interface DraftLetter {
+  letterId: number;
+  writerId: number;
+  receiverId: number;
+  parentLetterId: number;
+  zipCode: string;
+  title: string;
+  content: string;
+  category: string;
+  paperType: string;
+  fontType: string;
+  deliveryStartedAt: string;
+  deliveryCompletedAt: string;
+  matched: boolean;
+}
+
+export const getDraftLetters = async () // token: string
+: Promise<DraftLetter[]> => {
+  try {
+    const { data } = await client.get('/api/letters?status=draft', {
+      // headers: {
+      //   Authorization: `Bearer ${token}`,
+      // },
+    });
+    console.log('임시저장된 편지 데이터', data);
+    return data.data;
+  } catch (error) {
+    console.error(`❌임시저장된 편지를 불러오던 중 에러가 발생했습니다`, error);
+    throw new Error('임시저장된 편지 불러오기 실패');
+  }
+};

src/apis/incomingLetters.ts

@@ -1,6 +1,6 @@
 import client from './client';
 
-export const fetchIncomingLettersApi = async (token: string) => {
+export const getIncomingLetters = async (token: string) => {
   try {
     const { data } = await client.get('/api/letters?status=delivery', {
       headers: {

src/pages/Home/components/ShowDraftModal.tsx

@@ -1,6 +1,8 @@
 import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+// import { useNavigate } from 'react-router';
 
+import { DraftLetter, getDraftLetters } from '@/apis/draftLetters';
 import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
 
@@ -9,14 +11,27 @@ interface ShowDraftModalProps {
   onClose: () => void;
 }
 
-const DUMMY_DRAFT = [
-  { id: 1, title: '취업 때문에 고민이 많아요!!' },
-  { id: 2, title: '배고파서 죽을 거 같아요 😭' },
-  { id: 3, title: '개발하니까 밖에 나갈 일이 없어서 너무 심심하고 피곤해요' },
-  { id: 4, title: '마라샹궈 먹고 싶어요' },
-];
-
 const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
+  const [draftLetters, setDraftLetters] = useState<DraftLetter[]>([]);
+
+  // const navigate = useNavigate();
+
+  // const handleNavigation = (incomingId: number) => {
+  //   navigate(`/board/letter/${incomingId}`, {
+  //     state: { isShareLetterPreview: false },
+  //   });
+  // };
+
+  useEffect(() => {
+    getDraftLetters()
+      .then((data) => {
+        setDraftLetters(data || []);
+      })
+      .catch((error) => {
+        console.error('❌ 임시저장된 편지를 불러오는데 실패했습니다', error);
+      });
+  }, [onClose]);
+
   return (
     <ModalOverlay closeOnOutsideClick onClose={onClose}>
       <div className="flex h-full flex-col items-center justify-center">
@@ -29,11 +44,12 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
               <p className="body-sb text-gray-80">임시저장 편지</p>
               <p className="caption-r text-black">로그아웃 시 임시 저장된 편지는 사라집니다</p>
             </div>
-            <div className="mt-6 flex w-[251px] flex-col gap-[10px]">
-              {DUMMY_DRAFT.map((draft) => (
+            <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.id}
+                  key={draft.letterId}
+                  // onClick={() => handleNavigation(draft.letterId)}
                 >
                   <p className="truncate">{draft.title}</p>
                   <div className="text-gray-20">

src/stores/incomingLettersStore.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-import { fetchIncomingLettersApi } from '@/apis/incomingLetters';
+import { getIncomingLetters } from '@/apis/incomingLetters';
 
 interface IncomingLetters {
   letterId: number;
@@ -42,7 +42,7 @@ export const useIncomingLettersStore = create<IncomingLettersStore>((set) => ({
   fetchIncomingLetters: async () => {
     try {
       const token = localStorage.getItem('token') || '';
-      const data = await fetchIncomingLettersApi(token);
+      const data = await getIncomingLetters(token);
 
       let arrivedCount = 0;
       const updatedLetters = data.data.map((letter: IncomingLetters) => {