refactor: 유실물 등록/수정 요청 useMutation으로 적용 (#258)

Author: holim0

services/one-app/src/app/(site)/lost-found/_components/LostFoundForm.tsx

@@ -13,6 +13,7 @@ import useFormAdapter from '../_hook/useFormAdapter';
 import useFormImage from '../_hook/useFormImage';
 import useFormInitialize from '../_hook/useFormInitialize';
 import createFormData from '@/lib/createFormData';
+import { usePostLostFound } from '../_lib/post';
 
 type Props = {
   lostId?: string | null;
@@ -24,6 +25,10 @@ const LostFoundForm = ({ lostId = null }: Props) => {
     lostId: lostId ?? '',
   });
 
+  const { mutate: lostFoundMutate } = usePostLostFound((id: string) => {
+    router.push(`/lost-found/${id}`);
+  });
+
   const { images, setImages, removeImageIds, handleFileChange, onDeleteImage } =
     useFormImage();
 
@@ -53,26 +58,7 @@ const LostFoundForm = ({ lostId = null }: Props) => {
         image.data !== null ? [image.data] : [],
       ),
     });
-
-    try {
-      const res = await apiClient.post(
-        `/lost-posts/${lostId || ''}`,
-        postData,
-        {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-          },
-        },
-      );
-      const { code, result } = res?.data;
-
-      if (code === '100') {
-        router.push(`/lost-found/${result.id}`);
-      }
-    } catch (error) {
-      // Todo - 에러 팝업 추가 필요
-      alert('유실물 등록 에러 발생');
-    }
+    lostFoundMutate({ lostId, postData });
   };
 
   const onChangeEditorContent = (editorState: EditorState | null) => {

services/one-app/src/app/(site)/lost-found/_lib/post.ts

@@ -0,0 +1,37 @@
+import { apiClient } from '@/app/api';
+import { useMutation } from '@tanstack/react-query';
+
+import type { ErrorCode } from '@/model/Error';
+
+type PostLostFoundParams = {
+  lostId: string | null;
+  postData: FormData;
+};
+
+const postLostFound = ({ lostId, postData }: PostLostFoundParams) =>
+  apiClient.post(`/lost-posts/${lostId || ''}`, postData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+export const usePostLostFound = (successCallback: (id: string) => void) => {
+  return useMutation({
+    mutationFn: (params: PostLostFoundParams) => postLostFound(params),
+    onError: () => {
+      alert('유실물 등록 에러 발생');
+    },
+    onSuccess: (res: { data: { code: ErrorCode; result: { id: string } } }) => {
+      const {
+        data: {
+          code,
+          result: { id },
+        },
+      } = res;
+
+      if (code === '100') {
+        successCallback(id);
+      }
+    },
+  });
+};