feat: useFormUpload ReactQuery 적용

src/api/upload/types/upload.ts

@@ -0,0 +1,5 @@
+export interface IFormInfo {
+   title: string;
+   body: string;
+   files: File[];
+}

src/api/upload/upload.ts

@@ -0,0 +1,20 @@
+import { client } from 'api';
+import { IFormInfo } from './types/upload';
+import { CONSTANTS } from 'constants/api';
+
+export const uploadForm = async ({ formInfo, API_PATH }: { formInfo: IFormInfo; API_PATH: string }) => {
+   const token = localStorage.getItem(CONSTANTS.atk_key);
+
+   try {
+      const data = await client.post<IFormInfo>(API_PATH, formInfo, {
+         headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'multipart/form-data',
+         },
+      });
+
+      return data;
+   } catch (e) {
+      console.log(e);
+   }
+};

src/components/main/post.tsx

@@ -1,11 +1,11 @@
 import React, { ReactNode } from 'react';
 import TextEditor from 'components/common/editor/index';
 import { ImageProps } from 'hooks/useImageUpload';
-import { IFormInfo } from 'hooks/useFormUpload';
 import FloatingButton from 'components/ui/button/FloatingButton';
 import PostBox from 'components/ui/box/PostBox';
 import Title from 'components/ui/text/board';
 import { FaCamera } from 'react-icons/fa';
+import { IFormInfo } from 'api/upload/types/upload';
 
 interface PostProps {
    formInfo: IFormInfo;

src/hooks/query/upload/mutation.ts

@@ -0,0 +1,19 @@
+import { useMutation } from 'react-query';
+import { useAlert } from 'hooks/useAlert';
+import { uploadForm } from 'api/upload/upload';
+import { useNavigate } from 'react-router-dom';
+
+export const usePostFormUpload = (NAVIGATE_PATH: string) => {
+   const { alert } = useAlert();
+   const navigate = useNavigate();
+
+   return useMutation({
+      mutationFn: uploadForm,
+      onSuccess: (data) => {
+         if (data !== undefined && data.status === 200) {
+            navigate(NAVIGATE_PATH);
+            alert('완료');
+         }
+      },
+   });
+};

src/hooks/useFormUpload.ts

@@ -1,12 +1,7 @@
 import React from 'react';
-import { useApi } from './useApi';
-import { useNavigate } from 'react-router-dom';
-
-export interface IFormInfo {
-   title: string;
-   body: string;
-   files: File[];
-}
+import { IFormInfo } from 'api/upload/types/upload';
+import { usePostFormUpload } from './query/upload/mutation';
+import { useAlert } from './useAlert';
 
 export const useFormUpload = ({
    initFormInfo,
@@ -18,7 +13,8 @@ export const useFormUpload = ({
    NAVIGATE_PATH: string;
 }) => {
    const [formInfo, setFormInfo] = React.useState<IFormInfo>(initFormInfo);
-   const navigate = useNavigate();
+   const { mutate } = usePostFormUpload(NAVIGATE_PATH);
+   const { alert } = useAlert();
 
    const handleUpdate = (value: string) => {
       const cleanedValue = value.replaceAll(/<\/?p[^>]*>/g, '').replace(/<br>/g, '');
@@ -27,7 +23,6 @@ export const useFormUpload = ({
          body: cleanedValue,
       });
    };
-   const { post } = useApi();
 
    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -39,16 +34,10 @@ export const useFormUpload = ({
             formData.append('files', file);
          }
       }
-      try {
-         const data = await post<IFormInfo, number>(API_PATH, formInfo, {
-            authenticate: true,
-            contentType: 'multipart/form-data',
-            log: true,
-         });
-         navigate(NAVIGATE_PATH);
-         return data;
-      } catch (e) {
-         console.log(e);
+      if (formInfo.title.length > 0 && formInfo.body.length > 0) {
+         mutate({ formInfo, API_PATH });
+      } else {
+         alert('제목과 내용을 입력해주세요');
       }
    };
 

src/hooks/useImageUpload.tsx

@@ -1,5 +1,5 @@
+import { IFormInfo } from 'api/upload/types/upload';
 import React, { useEffect } from 'react';
-import { IFormInfo } from './useFormUpload';
 
 export interface ImageProps {
    add: {

src/pages/notice/post.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { API_PATH } from 'constants/api';
 import { ROUTES } from 'constants/route';
 import useImageUpload from 'hooks/useImageUpload';
-import { IFormInfo } from 'hooks/useFormUpload';
 import { useFormUpload } from 'hooks/useFormUpload';
 import Post from 'components/main/post';
+import { IFormInfo } from 'api/upload/types/upload';
 
 export default function NoticePost() {
    const initFormInfo: IFormInfo = {

src/pages/petition/post.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { API_PATH } from 'constants/api';
 import { ROUTES } from 'constants/route';
 import useImageUpload from 'hooks/useImageUpload';
-import { IFormInfo } from 'hooks/useFormUpload';
 import { useFormUpload } from 'hooks/useFormUpload';
 import Post from 'components/main/post';
+import { IFormInfo } from 'api/upload/types/upload';
 
 export default function PetitionForm() {
    const initFormInfo: IFormInfo = {