refactor: mutationProps 타입 선언

frontend/src/hooks/queries/reminder/usePushOff.ts

@@ -1,20 +1,22 @@
+import { MutationProps } from 'types/api/DataResponse';
 import { PushOffProps } from 'types/api/reminder';
-import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import reminderAPI from 'apis/reminder';
 
-const usePushOff = <T>(props: UseMutationOptions<T, Error, PushOffProps>) =>
+const usePushOff = <T>({ successCallback, errorCallback }: MutationProps<T, PushOffProps>) =>
   useMutation({
-    ...props,
-    mutationFn: async ({ id, body }: PushOffProps): Promise<T> => {
+    mutationFn: async ({ id, body }: PushOffProps) => {
       const response = await reminderAPI.pushOff({
         id,
         body,
       });
 
-      const data = response.text() as unknown as Promise<T>;
-
+      const data = response.text() as Promise<T>;
       return data;
     },
+    onSuccess: (data, variable) => successCallback && successCallback(data, variable),
+    // TODO: 에러 처리하기 (toast 띄우기)
+    onError: (error, variable) => errorCallback && errorCallback(error, variable),
   });
 
 export default usePushOff;

frontend/src/hooks/queries/reminder/useWater.ts

@@ -1,20 +1,23 @@
+import { MutationProps } from 'types/api/DataResponse';
 import { WaterPlantProps } from 'types/api/reminder';
-import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import reminderAPI from 'apis/reminder';
 
-const useWater = <T>(props: UseMutationOptions<T, Error, WaterPlantProps>) =>
+const useWater = <T>({ successCallback, errorCallback }: MutationProps<T, WaterPlantProps>) =>
   useMutation({
-    ...props,
-    mutationFn: async ({ id, body }: WaterPlantProps): Promise<T> => {
+    mutationFn: async ({ id, body }: WaterPlantProps) => {
       const response = await reminderAPI.waterPlant({
         id,
         body,
       });
 
-      const data = (await response.text()) as unknown as Promise<T>;
-
+      // json() 형식으로 파싱하면, body가 없다는 에러 발생. 하지만, mutationFn의 반환은 Promise<T> 형식이기 때문에 맞추기 위해 사용
+      const data = response.text() as Promise<T>;
       return data;
     },
+    onSuccess: (data, variable) => successCallback && successCallback(data, variable),
+    // TODO: 에러 처리하기 (toast 띄우기)
+    onError: (error, variable) => errorCallback && errorCallback(error, variable),
   });
 
 export default useWater;

frontend/src/hooks/useReminderHooks.ts

@@ -6,15 +6,17 @@ import useWater from './queries/reminder/useWater';
 const useReminderHooks = () => {
   const { data: reminderData, refetch } = useReminder({ queryKey: ['reminder'] });
 
-  const { mutate: water } = useWater({
-    onSuccess: refetch,
-    onError: (error) => {
+  const { mutate: water } = useWater<string>({
+    successCallback: () => {
+      refetch();
+    },
+    errorCallback: (error) => {
       console.log(error, 'error occurs');
     },
   });
-  const { mutate: pushOff } = usePushOff({
-    onSuccess: refetch,
-    onError: (error) => {
+  const { mutate: pushOff } = usePushOff<string>({
+    successCallback: () => refetch(),
+    errorCallback: (error) => {
       console.log(error, 'error occurs');
     },
   });

frontend/src/types/api/DataResponse.ts

@@ -1,3 +1,10 @@
 export interface DataResponse<T> {
   data: T;
 }
+
+export interface MutationProps<T, V> {
+  mutationCallback?: (data: T, variable: V) => void;
+  successCallback?: (data: T, variable: V) => void;
+  errorCallback?: (error: Error, variable: V) => void;
+  settledCallback?: (data: T, variable: V) => void;
+}