[UNI-195] Post 요청에 대한 debounce 적용

uniro_frontend/src/hooks/useDebounceMutation.tsx

@@ -0,0 +1,40 @@
+import { QueryClient, useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { useCallback, useRef } from "react";
+
+export function useDebounceMutation<TData, TError, TVariables, TContext>(
+	options: UseMutationOptions<TData, TError, TVariables, TContext>,
+	delay: number,
+	immediate: boolean,
+	queryClient?: QueryClient,
+) {
+	const mutation = useMutation<TData, TError, TVariables, TContext>(options, queryClient);
+	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const debouncedMutate = useCallback(
+		(...args: Parameters<typeof mutation.mutate>) => {
+			const later = () => {
+				timeoutRef.current = null;
+				if (!immediate) {
+					mutation.mutate(...args);
+				}
+			};
+
+			const callNow = immediate && !timeoutRef.current;
+
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
+			timeoutRef.current = setTimeout(later, delay);
+
+			if (callNow) {
+				mutation.mutate(...args);
+			}
+		},
+		[mutation.mutate, delay, immediate],
+	);
+
+	return {
+		...mutation,
+		mutate: debouncedMutate,
+	};
+}

uniro_frontend/src/hooks/useMutationError.tsx

@@ -1,6 +1,7 @@
 import { QueryClient, useMutation, UseMutationOptions, UseMutationResult } from "@tanstack/react-query";
 import { NotFoundError, BadRequestError, ERROR_STATUS } from "../constant/error";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useDebounceMutation } from "./useDebounceMutation";
 
 type Fallback = {
 	[K in Exclude<ERROR_STATUS, ERROR_STATUS.INTERNAL_ERROR>]: {
@@ -12,11 +13,11 @@ type Fallback = {
 type HandleError = {
 	fallback: Fallback;
 	onClose?: () => void;
-}
+};
 
 type UseMutationErrorReturn<TData, TError, TVariables, TContext> = [
 	React.FC,
-	UseMutationResult<TData, TError, TVariables, TContext>
+	UseMutationResult<TData, TError, TVariables, TContext>,
 ];
 
 export default function useMutationError<TData, TError, TVariables, TContext>(
@@ -25,45 +26,49 @@ export default function useMutationError<TData, TError, TVariables, TContext>(
 	handleError?: HandleError,
 ): UseMutationErrorReturn<TData, TError, TVariables, TContext> {
 	const [isOpen, setOpen] = useState<boolean>(false);
-	const result = useMutation<TData, TError, TVariables, TContext>(options, queryClient);
+	const result = useDebounceMutation<TData, TError, TVariables, TContext>(options, 1000, true, queryClient);
 
 	const { isError, error } = result;
 
 	useEffect(() => {
-		setOpen(isError)
-	}, [isError])
+		setOpen(isError);
+	}, [isError]);
 
 	const close = () => {
 		if (handleError?.onClose) handleError?.onClose();
 		setOpen(false);
-	}
+	};
 
 	const Modal: React.FC = () => {
 		if (!isOpen || !handleError || !error) return null;
 
 		const { fallback } = handleError;
 
-		let title: { mainTitle: string, subTitle: string[] } = {
+		let title: { mainTitle: string; subTitle: string[] } = {
 			mainTitle: "",
 			subTitle: [],
-		}
+		};
 
 		if (error instanceof NotFoundError) {
 			title = fallback[404] ?? title;
-		}
-		else if (error instanceof BadRequestError) {
+		} else if (error instanceof BadRequestError) {
 			title = fallback[400] ?? title;
-		}
-		else throw error;
+		} else throw error;
 
 		return (
 			<div className="fixed inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.2)] z-100">
 				< div className="w-full max-w-[365px] flex flex-col bg-gray-100 rounded-400 overflow-hidden" >
 					<div className="flex flex-col justify-center space-y-1 py-[25px]">
 						<p className="text-kor-body1 font-bold text-system-red">{title.mainTitle}</p>
 						<div className="space-y-0">
-							{title.subTitle.map((_subtitle, index) =>
-								<p key={`error-modal-subtitle-${index}`} className="text-kor-body3 font-regular text-gray-700">{_subtitle}</p>)}
+							{title.subTitle.map((_subtitle, index) => (
+								<p
+									key={`error-modal-subtitle-${index}`}
+									className="text-kor-body3 font-regular text-gray-700"
+								>
+									{_subtitle}
+								</p>
+							))}
 						</div>
 					</div>
 					<button
@@ -72,10 +77,10 @@ export default function useMutationError<TData, TError, TVariables, TContext>(
 					>
 						확인
 					</button>
-				</div >
-			</div >
-		)
-	}
+				</div>
+			</div>
+		);
+	};
 
 	return [Modal, result];
 }

uniro_frontend/src/pages/reportForm.tsx

@@ -113,33 +113,36 @@ const ReportForm = () => {
 		}
 	};
 
-	const [ErrorModal, { mutate }] = useMutationError({
-		mutationFn: () =>
-			postReport(university?.id ?? 1001, routeId, {
-				dangerFactors: formData.dangerIssues,
-				cautionFactors: formData.cautionIssues,
-			}),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["report", university?.id ?? 1001, routeId] });
-			openSuccess();
-		},
-		onError: () => {
-			setErrorTitle("제보에 실패하였습니다");
+	const [ErrorModal, { mutate, status }] = useMutationError(
+		{
+			mutationFn: () =>
+				postReport(university?.id ?? 1001, routeId, {
+					dangerFactors: formData.dangerIssues,
+					cautionFactors: formData.cautionIssues,
+				}),
+			onSuccess: () => {
+				queryClient.invalidateQueries({ queryKey: ["report", university?.id ?? 1001, routeId] });
+				openSuccess();
+			},
+			onError: () => {
+				setErrorTitle("제보에 실패하였습니다");
+			},
 		},
-	}, undefined, {
-		fallback: {
-			400: {
-				mainTitle: '불편한 길 제보 실패',
-				subTitle: ['잘못된 요청입니다.', '잠시 후 다시 시도 부탁드립니다.'],
+		undefined,
+		{
+			fallback: {
+				400: {
+					mainTitle: "불편한 길 제보 실패",
+					subTitle: ["잘못된 요청입니다.", "잠시 후 다시 시도 부탁드립니다."],
+				},
+				404: {
+					mainTitle: "불편한 길 제보 실패",
+					subTitle: ["해당 경로는 다른 사용자에 의해 삭제되어,", "지도 화면에서 바로 확인할 수 있어요."],
+				},
 			},
-			404: {
-				mainTitle: '불편한 길 제보 실패',
-				subTitle: ['해당 경로는 다른 사용자에 의해 삭제되어,', '지도 화면에서 바로 확인할 수 있어요.']
-			}
+			onClose: redirectToMap,
 		},
-		onClose: redirectToMap
-
-	});
+	);
 
 	return (
 		<div className="flex flex-col h-dvh w-full max-w-[450px] mx-auto relative">
@@ -158,8 +161,11 @@ const ReportForm = () => {
 				/>
 			</div>
 			<div className="mb-4 w-full px-4">
-				<Button onClick={mutate} variant={disabled ? "disabled" : "primary"}>
-					제보하기
+				<Button
+					onClick={mutate}
+					variant={status === "pending" || status === "success" || disabled ? "disabled" : "primary"}
+				>
+					{status === "pending" ? "제보하는 중.." : "제보하기"}
 				</Button>
 			</div>
 			<SuccessModal>