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

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

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

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

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

---------

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

Author: tifsy

src/apis/draftLetters.ts

@@ -2,23 +2,19 @@ import client from './client';
 
 export interface DraftLetter {
   letterId: number;
-  writerId: number;
+  matchingId: 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 (): Promise<DraftLetter[]> => {
   try {
-    const { data } = await client.get('/api/letters?status=draft', {});
+    const { data } = await client.get('/api/letters?status=draft');
     console.log('임시저장된 편지 데이터', data);
     return data.data;
   } catch (error) {

src/pages/Home/components/RandomCheer.tsx

@@ -25,6 +25,7 @@ const RandomCheer = () => {
         src={randomCheerBird}
         alt="random cheer bird"
         className="h-[26.5px] w-[21px] opacity-80"
+        onClick={() => setRandomCheer(getRandomCheer())}
       />
     </div>
   );

src/pages/Home/components/ShowDraftModal.tsx

@@ -1,6 +1,6 @@
 import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
 import React, { useEffect, useState } from 'react';
-// import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router';
 
 import { DraftLetter, getDraftLetters, deleteDraftLetters } from '@/apis/draftLetters';
 import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
@@ -14,13 +14,13 @@ interface ShowDraftModalProps {
 const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
   const [draftLetters, setDraftLetters] = useState<DraftLetter[]>([]);
 
-  // const navigate = useNavigate();
+  const navigate = useNavigate();
 
-  // const handleNavigation = (incomingId: number) => {
-  //   navigate(`/board/letter/${incomingId}`, {
-  //     state: { isShareLetterPreview: false },
-  //   });
-  // };
+  const handleNavigation = (draft: DraftLetter) => {
+    navigate(`/board/letter/${draft.letterId}?isDraft=true`, {
+      state: { draft: draft, isDraft: true },
+    });
+  };
 
   const handleGetDraftLetters = () => {
     getDraftLetters()
@@ -57,21 +57,23 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
           <ModalBackgroundWrapper className="relative overflow-hidden rounded-lg p-5">
             <div className="flex flex-col gap-1">
               <p className="body-sb text-gray-80">임시저장 편지</p>
-              <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.length > 0 ? (
+              {draftLetters.length > 0 ? (
                 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)}
+                    onClick={() => handleNavigation(draft)}
                   >
                     <p className="truncate">{draft.title}</p>
                     <div
                       className="text-gray-20 active:text-gray-600"
                       tabIndex={0}
-                      onClick={() => handleDeleteDraftLetters(draft.letterId)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteDraftLetters(draft.letterId);
+                      }}
                     >
                       <DeleteOutlineRoundedIcon />
                     </div>