feat : 임시저장 api 생성(연결 테스트 아직 안함)

Author: wldnjs990

src/apis/write.ts

@@ -5,7 +5,7 @@ const postLetter = async (data: LetterRequest) => {
   console.log('request', data);
   try {
     const res = await client.post('/api/letters', data);
-    if (!res) throw new Error('편지 전송과정중에서 오류가 발생했습니다.');
+    if (!res) throw new Error('편지 전송과정에서 오류가 발생했습니다.');
     return res;
   } catch (error) {
     console.error(error);
@@ -16,7 +16,7 @@ const postFirstReply = async (data: FirstReplyRequest) => {
   console.log('Firstrequest', data);
   try {
     const res = await client.post('/api/random-letters/matching', data);
-    if (!res) throw new Error('최초 답장 전송과정중에서 오류가 발생했습니다.');
+    if (!res) throw new Error('최초 답장 전송과정에서 오류가 발생했습니다.');
     return res;
   } catch (error) {
     console.error(error);
@@ -26,10 +26,20 @@ const postFirstReply = async (data: FirstReplyRequest) => {
 const getPrevLetter = async (letterId: string) => {
   try {
     const res = await client.get(`/api/letters/${letterId}/previous`);
+    if (!res) throw new Error('이전편지를 불러오는중 오류가 발생했습니다.');
     return res;
   } catch (error) {
     console.error(error);
   }
 };
 
-export { postLetter, postFirstReply, getPrevLetter };
+const postTemporarySave = async (data: LetterRequest) => {
+  try {
+    const res = client.post(`/api/letters/temporary-save`, data);
+    if (!res) throw new Error('편지 임시저장과정에서 오류가 발생했습니다.');
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { postLetter, postFirstReply, getPrevLetter, postTemporarySave };

src/pages/Write/LetterEditor.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation, useNavigate } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 
 import { postFirstReply, postLetter } from '@/apis/write';
 import BackButton from '@/components/BackButton';
+import ConfirmModal from '@/components/ConfirmModal';
 import WritePageButton from '@/pages/Write/components/WritePageButton';
 import { FONT_TYPE_OBJ } from '@/pages/Write/constants';
 import OptionSlide from '@/pages/Write/OptionSlide';
@@ -24,7 +25,9 @@ export default function LetterEditor({
   isReply: boolean;
 }) {
   const location = useLocation();
+  const navigate = useNavigate();
   const [randomMatched, setRandomMatched] = useState<boolean>(false);
+  const [isTemporaryConfirmModal, setIsTemporaryConfirmModal] = useState<boolean>(false);
 
   const letterRequest = useWrite((state) => state.letterRequest);
   const setLetterRequest = useWrite((state) => state.setLetterRequest);
@@ -72,26 +75,47 @@ export default function LetterEditor({
 
   return (
     <div className="flex grow flex-col pb-15">
+      {isTemporaryConfirmModal && (
+        <ConfirmModal
+          title="편지를 임시저장 하시겠어요?"
+          description="임시저장된 편지는 홈 화면 공유 버튼에서 확인 가능합니다."
+          cancelText="계속 작성하기"
+          confirmText="저장하고 나가기"
+          onCancel={() => setIsTemporaryConfirmModal(false)}
+          onConfirm={() => {
+            // postTemporarySave(letterRequest)
+            navigate('/');
+          }}
+        />
+      )}
       <OptionSlide prevLetter={prevLetter} />
       <div className="absolute left-0 flex w-full items-center justify-between px-5">
         <BackButton />
         {isReply ? (
-          <WritePageButton
-            text="답장 전송"
-            onClick={() => {
-              if (letterRequest.title.trim() !== '' && letterRequest.content.trim() !== '') {
-                if (randomMatched) {
-                  const firstReplyRequest = removeProperty(letterRequest, ['matchingId']);
-                  console.log(firstReplyRequest);
-                  handlePostFirstReply(firstReplyRequest);
+          <div className="flex gap-1">
+            <WritePageButton
+              text="임시저장"
+              onClick={() => {
+                setIsTemporaryConfirmModal(true);
+              }}
+            />
+            <WritePageButton
+              text="답장 전송"
+              onClick={() => {
+                if (letterRequest.title.trim() !== '' && letterRequest.content.trim() !== '') {
+                  if (randomMatched) {
+                    const firstReplyRequest = removeProperty(letterRequest, ['matchingId']);
+                    console.log(firstReplyRequest);
+                    handlePostFirstReply(firstReplyRequest);
+                  } else {
+                    handlePostReply(letterRequest);
+                  }
                 } else {
-                  handlePostReply(letterRequest);
+                  alert('편지 제목, 내용이 작성되었는지 확인해주세요');
                 }
-              } else {
-                alert('편지 제목, 내용이 작성되었는지 확인해주세요');
-              }
-            }}
-          />
+              }}
+            />
+          </div>
         ) : (
           <WritePageButton
             text="다음 단계"