feat : 임시저장 데이터 바인딩 및 임시저장 덮어씌우기 작업 완료

Author: wldnjs990

src/pages/Home/components/ShowDraftModal.tsx

@@ -17,7 +17,7 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
   const navigate = useNavigate();
 
   const handleNavigation = (draft: DraftLetter) => {
-    navigate(`/letter/write/?letterId=${draft.letterId}`, {
+    navigate(`/letter/write/?letterId=${draft.parentLetterId}`, {
       state: { draft, isDraft: true },
     });
   };

src/pages/Write/CategorySelect.tsx

@@ -7,6 +7,7 @@ import useWrite from '@/stores/writeStore';
 
 import ResultLetterAnimation from './components/ResultLetterAnimation';
 import WritePageButton from './components/WritePageButton';
+import useToastStore from '@/stores/toastStore';
 
 export default function CategorySelect({
   setStep,
@@ -21,13 +22,17 @@ export default function CategorySelect({
 }) {
   const letterRequest = useWrite((state) => state.letterRequest);
 
+  const setToastActive = useToastStore((state) => state.setToastActive);
+
   const handlePostLetter = async (letterRequest: LetterRequest) => {
     const res = await postLetter(letterRequest);
     if (res?.status === 200) {
       console.log(letterRequest);
       setSend(true);
     } else {
-      alert('전송오류(임시)');
+      // 일단 에러 발생하면 무조건 검열단어라고 토스트를 띄웠는데 후에 에러 처리 수정해야함
+      setToastActive({ title: '편지에 검열 단어가 포함되어있습니다. ', toastType: 'Error' });
+      setStep('edit');
     }
   };
 
@@ -89,7 +94,7 @@ export default function CategorySelect({
                 handlePostLetter(letterRequest);
                 // setSend(true);
               } else {
-                alert('우표 선택을 해주세요');
+                setToastActive({ title: '카테고리를 선택해주세요.', toastType: 'Warning' });
               }
             }}
           >

src/pages/Write/LetterEditor.tsx

@@ -43,7 +43,7 @@ export default function LetterEditor({
       setSend(true);
       setStep('category');
     } else {
-      alert('전송오류 발생(임시)');
+      setToastActive({ title: '전송중 오류가 발생했습니다.', toastType: 'Error' });
     }
   };
 
@@ -55,7 +55,7 @@ export default function LetterEditor({
       setSend(true);
       setStep('category');
     } else {
-      alert('전송오류(임시)');
+      setToastActive({ title: '전송중 오류가 발생했습니다.', toastType: 'Error' });
     }
   };
 
@@ -79,16 +79,16 @@ export default function LetterEditor({
 
   const handlePostTemporarySave = async () => {
     if (!letterId) return alert('임시저장중 오류 발생');
-    const LETTER_STATE_DUMMY = false;
-    const requestLetterId = LETTER_STATE_DUMMY || null;
+    const requestLetterId = location.state?.draft.letterId || null;
     // MEMO : 임시저장 전송 방식 : 최초임시저장은 letterId : null, 임시저장 업데이트는 letterId : location state로 받아오는 임시저장편지의 letterId값
     const temporaryRequest: TemporaryRequest = { ...letterRequest, letterId: requestLetterId };
     const res = await postTemporarySave(temporaryRequest);
     if (res?.status === 200) {
       console.log(res);
+      setToastActive({ title: '임시저장을 완료했습니다.', toastType: 'Success' });
       navigate('/');
     } else {
-      alert('실패');
+      setToastActive({ title: '임시저장에 실패했습니다.', toastType: 'Error' });
     }
   };
 
@@ -161,6 +161,7 @@ export default function LetterEditor({
         <div className="body-b mt-15">TO. 따숨이에게</div>
         <input
           type="text"
+          maxLength={50}
           placeholder="제목을 입력해주세요."
           className="body-sb placeholder:text-gray-40 placeholder:border-0"
           onChange={(e) => {
@@ -175,6 +176,7 @@ export default function LetterEditor({
             `body-r basic-theme min-h-full w-full resize-none px-6`,
             `${FONT_TYPE_OBJ[letterRequest.fontType]}`,
           )}
+          maxLength={1000}
           placeholder="클릭해서 내용을 작성하세요"
           onChange={(e) => {
             setLetterRequest({ ...letterRequest, content: e.target.value });

src/pages/Write/index.tsx

@@ -21,6 +21,7 @@ const WritePage = () => {
   const [isReply, setIsReply] = useState<boolean>(false);
 
   const letterRequest = useWrite((state) => state.letterRequest);
+  const setLetterRequest = useWrite((state) => state.setLetterRequest);
   const resetLetterRequest = useWrite((state) => state.resetLetterRequest);
 
   const wrapStyle = twMerge(
@@ -54,6 +55,16 @@ const WritePage = () => {
         }
       };
       handleGetPrevLetter(letterId);
+      if (location.state?.isDraft) {
+        const draft: TemporaryRequest = location.state.draft;
+        setLetterRequest({
+          category: draft.category,
+          content: draft.content,
+          fontType: draft.fontType,
+          paperType: draft.paperType,
+          title: draft.title,
+        });
+      }
     }
   }, [location.state, prevLetter.length, navigate, letterId]);