feat:

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

Author: tifsy

src/apis/draftLetters.ts

@@ -14,7 +14,7 @@ export interface DraftLetter {
 
 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/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()
@@ -64,13 +64,16 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
                   <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>