From ad6d7fe922d02ee64a14f8f90ce4eca237764cd7 Mon Sep 17 00:00:00 2001
From: sumi-0011 <selina2000@naver.com>
Date: Fri, 9 Feb 2024 18:37:41 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B8=EC=A6=9D=20=EC=8B=A4=ED=8C=A8?=
 =?UTF-8?q?=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EB=9C=A8=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/record/[id]/page.tsx | 56 +++++++++++++++---------------------
 1 file changed, 23 insertions(+), 33 deletions(-)

diff --git a/src/app/record/[id]/page.tsx b/src/app/record/[id]/page.tsx
index ea14316f..894111d7 100644
--- a/src/app/record/[id]/page.tsx
+++ b/src/app/record/[id]/page.tsx
@@ -16,36 +16,13 @@ import { checkImageType, uploadImageToServer, useImage } from '@/hooks/useImage'
 import useModal from '@/hooks/useModal';
 import { eventLogger } from '@/utils';
 import { css } from '@styled-system/css';
-import { useMutation } from '@tanstack/react-query';
 
 export default function MissionRecordPage() {
   const router = useRouter();
   const { triggerSnackBar } = useSnackBar();
   const params = useParams();
-  const { mutateAsync: uploadComplete, isPending: isUploadCompletePending } = useMutation({
-    mutationFn: RECORD_API.uploadComplete,
-    onSuccess: () => {
-      router.replace(ROUTER.RECORD.SUCCESS);
-    },
-    onError: () => {
-      triggerSnackBar({
-        message: '미션 인증에 실패했습니다. 다시 시도해주세요.',
-      });
-    },
-  });
-
-  const { mutateAsync: uploadImageToServerMutate, isPending: isUpLoadingPending } = useMutation({
-    mutationFn: ({ missionId, imageFile }: { missionId: string; imageFile: File }) =>
-      uploadImageToServer(missionId, imageFile),
-    onSuccess: async ({ imageFileExtension }) => {
-      await uploadComplete({ missionRecordId: missionId, imageFileExtension, remark });
-    },
-    onError: () => {
-      triggerSnackBar({
-        message: '미션 인증에 실패했습니다. 다시 시도해주세요.',
-      });
-    },
-  });
+
+  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
 
   const missionId = params.id as string;
 
@@ -55,8 +32,6 @@ export default function MissionRecordPage() {
 
   const { uploadImageChange, imagePreview, imageFile } = useImage();
 
-  const isPending = isUpLoadingPending || isUploadCompletePending;
-
   const onChangeText = (e: ChangeEvent<HTMLTextAreaElement>) => {
     // TODO: 200자 제한
     setRemark(e.target.value);
@@ -75,22 +50,37 @@ export default function MissionRecordPage() {
     }
 
     eventLogger.logEvent(EVENT_LOG_NAME.CERTIFICATION.CLICK_CONFIRM, EVENT_LOG_CATEGORY.CERTIFICATION, { remark });
-    await uploadImageToServerMutate({
-      missionId,
-      imageFile,
-    });
+
+    await onSubmit(missionId, imageFile);
   };
 
-  const isButtonDisabled = !imagePreview || isPending;
+  const isButtonDisabled = !imagePreview || isSubmitLoading;
 
   const onImageClick = () => {
     imageRef.current?.click();
   };
 
+  // react query 지우로 axios 호출
+  const onSubmit = async (_missionId: string, _imageFile: File) => {
+    setIsSubmitLoading(true);
+
+    try {
+      const { imageFileExtension } = await uploadImageToServer(_missionId, _imageFile);
+      await RECORD_API.uploadComplete({ missionRecordId: _missionId, imageFileExtension, remark });
+
+      router.replace(ROUTER.RECORD.SUCCESS);
+    } catch (e) {
+      triggerSnackBar({
+        message: '미션 인증에 실패했습니다. 다시 시도해주세요.',
+      });
+      setIsSubmitLoading(false);
+    }
+  };
+
   return (
     <main className={mainWrapperCss}>
       <div className={headerWrapperCss}>
-        {isPending && <Loading />}
+        {isSubmitLoading && <Loading />}
         <div className={headerTitleCss}>미션 인증</div>
         <div className={headerRightCss} onClick={openModal}>
           <Icon name="normal-close" />