From 56a29e057adb3cf51cfd99df6e0bab7ceaa51e9d Mon Sep 17 00:00:00 2001
From: inyeong-kang <tomatorkd@naver.com>
Date: Tue, 18 Jul 2023 13:58:31 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20(#55)=20useMutation=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EB=B0=98=ED=99=98=EA=B0=92=EC=9C=BC=EB=A1=9C=20isL?=
 =?UTF-8?q?oading,=20isError,=20error=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/hooks/query/post/useCreatePost.ts     | 23 +++++++++++--------
 frontend/src/hooks/query/post/useEditPost.ts  | 22 ++++++++++--------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/src/hooks/query/post/useCreatePost.ts b/frontend/src/hooks/query/post/useCreatePost.ts
index 6ea05240d..43519ba34 100644
--- a/frontend/src/hooks/query/post/useCreatePost.ts
+++ b/frontend/src/hooks/query/post/useCreatePost.ts
@@ -1,3 +1,4 @@
+import { QUERY_KEY } from '@constants/queryKey';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { PostRequest } from '@type/post';
@@ -6,15 +7,17 @@ import { createPost } from '@api/jero/post';
 
 export const useCreatePost = () => {
   const queryClient = useQueryClient();
-  const { mutate } = useMutation((post: PostRequest) => createPost(post), {
-    onSuccess: () => {
-      queryClient.invalidateQueries(['posts']);
-    },
-    onError: () => {
-      // mutate가 실패하면, 함수를 실행합니다.
-      window.console.log('createPost error');
-    },
-  });
+  const { mutate, isLoading, isError, error } = useMutation(
+    (post: PostRequest) => createPost(post),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([QUERY_KEY.posts]);
+      },
+      onError: () => {
+        window.console.log('createPost error');
+      },
+    }
+  );
 
-  return { mutate };
+  return { mutate, isLoading, isError, error };
 };
diff --git a/frontend/src/hooks/query/post/useEditPost.ts b/frontend/src/hooks/query/post/useEditPost.ts
index 9d1f6b4e5..1f71fddea 100644
--- a/frontend/src/hooks/query/post/useEditPost.ts
+++ b/frontend/src/hooks/query/post/useEditPost.ts
@@ -1,3 +1,4 @@
+import { QUERY_KEY } from '@constants/queryKey';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { PostRequest } from '@type/post';
@@ -6,14 +7,17 @@ import { editPost } from '@api/jero/post';
 
 export const useEditPost = (postId: number) => {
   const queryClient = useQueryClient();
-  const { mutate } = useMutation((updatedPost: PostRequest) => editPost(postId, updatedPost), {
-    onSuccess: () => {
-      queryClient.invalidateQueries(['posts', postId]);
-    },
-    onError: () => {
-      window.console.log('editPost error');
-    },
-  });
+  const { mutate, isLoading, isError, error } = useMutation(
+    (updatedPost: PostRequest) => editPost(postId, updatedPost),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([QUERY_KEY.posts, postId]);
+      },
+      onError: () => {
+        window.console.log('editPost error');
+      },
+    }
+  );
 
-  return { mutate };
+  return { mutate, isLoading, isError, error };
 };