feat : 편지 작성 페이지 임시저장 버튼 구현

Author: wldnjs990

src/apis/client.ts

@@ -102,8 +102,8 @@ client.interceptors.response.use(
         }
       }
     }
-    if (isLoggedIn) logout();
-    console.error('Failed to refresh token', error);
+    // if (isLoggedIn) logout();
+    // console.error('Failed to refresh token', error);
     return Promise.reject(error);
   },
 );

src/apis/write.ts

@@ -33,13 +33,26 @@ const getPrevLetter = async (letterId: string) => {
   }
 };
 
-const postTemporarySave = async (data: LetterRequest) => {
+// 임시저장 최초 생성
+const postTemporarySave = async (letterId: string, data: LetterRequest) => {
   try {
-    const res = client.post(`/api/letters/temporary-save`, data);
+    const res = client.post(`/api/letters/${letterId}/temporary-save`, data);
     if (!res) throw new Error('편지 임시저장과정에서 오류가 발생했습니다.');
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// 임시저장 수정
+const PatchTemporarySave = async (letterId: string, data: LetterRequest) => {
+  try {
+    const res = client.post(`/api/letters/${letterId}/temporary-save`, data);
+    if (!res) throw new Error('편지 임시저장과정에서 오류가 발생했습니다.');
+    return res;
   } catch (error) {
     console.error(error);
   }
 };
 
-export { postLetter, postFirstReply, getPrevLetter, postTemporarySave };
+export { postLetter, postFirstReply, getPrevLetter, postTemporarySave, PatchTemporarySave };

src/pages/Write/LetterEditor.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 
-import { postFirstReply, postLetter } from '@/apis/write';
+import { postFirstReply, postLetter, postTemporarySave } from '@/apis/write';
 import BackButton from '@/components/BackButton';
 import ConfirmModal from '@/components/ConfirmModal';
 import WritePageButton from '@/pages/Write/components/WritePageButton';
@@ -12,17 +12,17 @@ import useWrite from '@/stores/writeStore';
 import { removeProperty } from '@/utils/removeProperty';
 
 export default function LetterEditor({
+  letterId,
   setStep,
   prevLetter,
   setSend,
-  searchParams,
   isReply,
 }: {
-  setStep: React.Dispatch<React.SetStateAction<Step>>;
+  letterId: string | null;
+  isReply: boolean;
   prevLetter: PrevLetter[];
+  setStep: React.Dispatch<React.SetStateAction<Step>>;
   setSend: React.Dispatch<React.SetStateAction<boolean>>;
-  searchParams: URLSearchParams;
-  isReply: boolean;
 }) {
   const location = useLocation();
   const navigate = useNavigate();
@@ -66,12 +66,23 @@ export default function LetterEditor({
       console.log('prevLetter', prevLetter);
       setLetterRequest({
         receiverId: prevLetter[0].memberId,
-        parentLetterId: Number(searchParams.get('letterId')),
+        parentLetterId: Number(letterId),
         category: prevLetter[0].category,
         matchingId: prevLetter[0].matchingId,
       });
     }
-  }, [prevLetter, searchParams, setLetterRequest, isReply]);
+  }, [prevLetter, setLetterRequest, isReply]);
+
+  const handlePostTemporarySave = async () => {
+    if (!letterId) return alert('임시저장중 오류 발생');
+    const res = await postTemporarySave(letterId, letterRequest);
+    if (res?.status === 200) {
+      console.log(res);
+      navigate('/');
+    } else {
+      alert('실패');
+    }
+  };
 
   return (
     <div className="flex grow flex-col pb-15">
@@ -83,8 +94,7 @@ export default function LetterEditor({
           confirmText="저장하고 나가기"
           onCancel={() => setIsTemporaryConfirmModal(false)}
           onConfirm={() => {
-            // postTemporarySave(letterRequest)
-            navigate('/');
+            handlePostTemporarySave();
           }}
         />
       )}

src/pages/Write/index.tsx

@@ -72,10 +72,10 @@ const WritePage = () => {
     <div className={wrapStyle}>
       {step === 'edit' && (
         <LetterEditor
+          letterId={letterId}
           setStep={setStep}
           prevLetter={prevLetter}
           setSend={setSend}
-          searchParams={searchParams}
           isReply={isReply}
         />
       )}