임시저장 QA 반영 (#1224)

Author: j-nary

pages/make/index.tsx

@@ -11,7 +11,7 @@ import { fontsObject } from '@sopt-makers/fonts';
 import { FormType, schema } from '@type/form';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { styled } from 'stitches.config';
 
@@ -21,7 +21,7 @@ const DevTool = dynamic(() => import('@hookform/devtools').then(module => module
 
 const MakePage = () => {
   const router = useRouter();
-  const { draftFormValues } = useDraftCreateMeeting();
+  const { draftFormValues, removeDraftCreateMeeting } = useDraftCreateMeeting();
   const formMethods = useForm<FormType>({
     mode: 'onChange',
     reValidateMode: 'onChange',
@@ -34,6 +34,8 @@ const MakePage = () => {
   });
   const { isValid, errors, isDirty } = formMethods.formState;
   const { mutate: mutateCreateMeeting, isPending: isSubmitting } = usePostMeetingMutation();
+  const submittedRef = useRef(false);
+  const [hasDraftLoaded, setHasDraftLoaded] = useState(false);
 
   const handleChangeImage = (index: number, url: string) => {
     const files = formMethods.getValues().files.slice();
@@ -51,30 +53,43 @@ const MakePage = () => {
     mutateCreateMeeting(formData, {
       onSuccess: data => {
         ampli.completedMakeGroup();
+        submittedRef.current = true;
+        removeDraftCreateMeeting();
         alert('모임을 개설했습니다.');
         router.push(`/detail?id=${data.meetingId}`);
       },
     });
   };
 
   useEffect(() => {
-    return () => {
-      if (isDirty) {
+    const persistDraft = () => {
+      if (isDirty && !submittedRef.current) {
         LocalStorage.setItem(LocalStorageKey.DraftCreateMeeting, {
           dateTime: Date.now(),
           formValues: formMethods.getValues(),
         });
       }
     };
+
+    window.addEventListener('beforeunload', persistDraft);
+    window.addEventListener('pagehide', persistDraft);
+
+    return () => {
+      window.removeEventListener('beforeunload', persistDraft);
+      window.removeEventListener('pagehide', persistDraft);
+      persistDraft();
+    };
   }, [formMethods, isDirty]);
 
   useEffect(() => {
     if (draftFormValues) {
       formMethods.reset(draftFormValues);
+      setHasDraftLoaded(true);
     }
-  }, [draftFormValues]);
+  }, [draftFormValues, formMethods]);
 
   const handleSubmit = formMethods.handleSubmit(onSubmit);
+  const isSubmitDisabled = isSubmitting || !isValid || Object.keys(errors).length > 0 || (!isDirty && !hasDraftLoaded);
 
   return (
     <FormProvider {...formMethods}>
@@ -87,14 +102,14 @@ const MakePage = () => {
             handleChangeImage={handleChangeImage}
             handleDeleteImage={handleDeleteImage}
             onSubmit={handleSubmit}
-            disabled={isSubmitting || !isValid || Object.keys(errors).length > 0 || !isDirty}
+            disabled={isSubmitDisabled}
           />
         </SFormContainer>
         <TableOfContents
           label="작성 항목"
           onSubmit={handleSubmit}
           submitButtonLabel="개설하기"
-          disabled={isSubmitting || !isValid || Object.keys(errors).length > 0 || !isDirty}
+          disabled={isSubmitDisabled}
         />
       </SContainer>
       {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}

src/domain/meeting/DraftCreateMeetingModal/index.tsx

@@ -3,7 +3,7 @@ import LocalStorageKey from '@/store/localStorage/LocalStorageKey';
 import { useDialog } from '@sopt-makers/ui';
 import { FormType } from '@type/form';
 import dayjs from '@util/dayjs';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 const formatDateTime = (dateTime: number) => {
   return dayjs(dateTime).format('YYYY년 M월 D일 HH시 mm분');
@@ -12,6 +12,10 @@ const formatDateTime = (dateTime: number) => {
 const useDraftCreateMeeting = () => {
   const { open: openDialog, close: closeDialog } = useDialog();
   const [draftFormValues, setDraftFormValues] = useState<FormType | null>(null);
+  const removeDraftCreateMeeting = useCallback(() => {
+    LocalStorage.removeItem(LocalStorageKey.DraftCreateMeeting);
+    setDraftFormValues(null);
+  }, []);
 
   useEffect(() => {
     const draftCreateMeeting = LocalStorage.getItem(LocalStorageKey.DraftCreateMeeting);
@@ -25,8 +29,7 @@ const useDraftCreateMeeting = () => {
           cancelButtonText: '새로 쓰기',
           approveButtonText: '이어서 쓰기',
           onCancel: () => {
-            setDraftFormValues(null);
-            LocalStorage.removeItem(LocalStorageKey.DraftCreateMeeting);
+            removeDraftCreateMeeting();
             closeDialog();
           },
           onApprove: () => {
@@ -36,10 +39,14 @@ const useDraftCreateMeeting = () => {
         },
       });
     }
+
+    return () => {
+      closeDialog();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return { draftFormValues };
+  return { draftFormValues, removeDraftCreateMeeting };
 };
 
 export default useDraftCreateMeeting;