[Fix] - 삭제 및 등록 시 여러번 요청하지 못하게 수정

frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx

@@ -15,6 +15,7 @@ import TravelPlanDetailSkeleton from "@components/pages/travelPlanDetail/TravelP
 import TravelPlansTabContent from "@components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent";
 
 import useClickAway from "@hooks/useClickAway";
+import useLeadingDebounce from "@hooks/useLeadingDebounce";
 
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { ROUTE_PATHS_MAP } from "@constants/route";
@@ -30,11 +31,9 @@ import * as S from "./TravelPlanDetailPage.styled";
 
 const TravelPlanDetailPage = () => {
   const location = useLocation();
-
-  const { onTransformTravelDetail } = useTravelTransformDetailContext();
-
   const id = extractId(location.pathname);
 
+  const { onTransformTravelDetail } = useTravelTransformDetailContext();
   const { data, status, error } = useGetTravelPlan(id);
 
   const navigate = useNavigate();
@@ -69,8 +68,10 @@ const TravelPlanDetailPage = () => {
     setIsDeleteModalOpen((prev) => !prev);
   };
 
+  const debouncedClickDeleteButton = useLeadingDebounce(() => deleteTravelPlan(Number(id)), 3000);
+
   const handleClickDeleteButton = () => {
-    deleteTravelPlan(Number(id));
+    debouncedClickDeleteButton();
   };
 
   //TODO: 수정 이벤트 추가해야함

frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx

@@ -19,6 +19,7 @@ import Calendar from "@components/common/Calendar/Calendar";
 import TravelPlanDayAccordion from "@components/pages/travelPlanRegister/TravelPlanDayAccordion/TravelPlanDayAccordion";
 
 import { useTravelPlanDays } from "@hooks/pages/useTravelPlanDays";
+import useLeadingDebounce from "@hooks/useLeadingDebounce";
 import useUser from "@hooks/useUser";
 
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
@@ -62,7 +63,7 @@ const TravelPlanRegisterPage = () => {
 
   const navigate = useNavigate();
 
-  const handleConfirmBottomSheet = async () => {
+  const handleRegisterTravelPlan = () => {
     const formattedStartDate = startDate
       ? new Date(startDate.getTime() - startDate.getTimezoneOffset() * 60000)
           .toISOString()
@@ -78,8 +79,12 @@ const TravelPlanRegisterPage = () => {
         },
       },
     );
+  };
+
+  const debouncedRegisterTravelPlan = useLeadingDebounce(() => handleRegisterTravelPlan(), 3000);
 
-    handleCloseBottomSheet();
+  const handleConfirmBottomSheet = () => {
+    debouncedRegisterTravelPlan();
   };
 
   const { mutate: handleAddTravelPlan } = usePostTravelPlan();

frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx

@@ -13,6 +13,7 @@ import TravelogueDetailSkeleton from "@components/pages/travelogueDetail/Travelo
 import TravelogueTabContent from "@components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent";
 
 import useClickAway from "@hooks/useClickAway";
+import useLeadingDebounce from "@hooks/useLeadingDebounce";
 import useUser from "@hooks/useUser";
 
 import { ROUTE_PATHS_MAP } from "@constants/route";
@@ -58,8 +59,10 @@ const TravelogueDetailPage = () => {
     setIsDeleteModalOpen((prev) => !prev);
   };
 
+  const debouncedClickDeleteButton = useLeadingDebounce(() => deleteTravelogue(Number(id)), 3000);
+
   const handleClickDeleteButton = () => {
-    deleteTravelogue(Number(id));
+    debouncedClickDeleteButton();
   };
 
   //TODO: 수정 이벤트 추가해야함

frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx

@@ -21,6 +21,7 @@
 import TravelogueDayAccordion from "@components/pages/travelogueRegister/TravelogueDayAccordion/TravelogueDayAccordion";
 
 import { useTravelogueDays } from "@hooks/pages/useTravelogueDays";
+import useLeadingDebounce from "@hooks/useLeadingDebounce";
 import useUser from "@hooks/useUser";
 
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
@@ -78,8 +79,8 @@
 
   const navigate = useNavigate();
 
-  const handleConfirmBottomSheet = () => {
-    handleRegisterTravelogue(
+  const handleRegisterTravelogue = () => {
+    registerTravelogueMutate(
       { title, thumbnail, days: travelogueDays },
       {
         onSuccess: (data) => {
@@ -90,7 +91,13 @@
     );
   };
 
-  const { mutate: handleRegisterTravelogue } = usePostTravelogue();
+  const debouncedRegisterTravelogue = useLeadingDebounce(() => handleRegisterTravelogue(), 3000);
+
+  const handleConfirmBottomSheet = () => {
+    debouncedRegisterTravelogue();
+  };
+
+  const { mutate: registerTravelogueMutate } = usePostTravelogue();
 
   const { user } = useUser();
 
@@ -105,7 +112,7 @@
     return () => {
       saveTransformDetail(null);
     };
   }, [user?.accessToken, navigate]);
 
   return (
     <>

frontend/src/hooks/useLeadingDebounce.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+
+const useLeadingDebounce = (callback: () => void, delay: number) => {
+  const isDebouncing = useRef(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const debouncedCallback = () => {
+    const isDebounceReady = !isDebouncing.current;
+    const isExistingTimerActive = isDebounceReady && timeoutRef.current;
+
+    if (isExistingTimerActive) clearTimeout(timeoutRef.current);
+
+    if (isDebounceReady) {
+      callback();
+      isDebouncing.current = true;
+
+      timeoutRef.current = setTimeout(() => {
+        isDebouncing.current = false;
+      }, delay);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return debouncedCallback;
+};
+
+export default useLeadingDebounce;