Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Aug 13, 2024
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
59ba431
feat(useLeadingDebounce): 선행 디바운드 훅 구현
simorimi Aug 9, 2024
6e0b374
fix: 삭제 반복 요청하지 않도록 수정
simorimi Aug 9, 2024
091a9e2
fix: 등록 반복 요청하지 않도록 수정
simorimi Aug 9, 2024
691ab75
refactor(useLeadingDebounce): 렌더링과 무관하기에 useState 에서 useRef로 수정
simorimi Aug 13, 2024
baa3a03
Merge branch 'develop/fe' of https://github.com/woowacourse-teams/202…
simorimi Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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();
Expand Down Expand Up @@ -69,8 +68,10 @@ const TravelPlanDetailPage = () => {
setIsDeleteModalOpen((prev) => !prev);
};

const debouncedClickDeleteButton = useLeadingDebounce(() => deleteTravelPlan(Number(id)), 3000);

const handleClickDeleteButton = () => {
deleteTravelPlan(Number(id));
debouncedClickDeleteButton();
};

//TODO: 수정 이벤트 추가해야함
Expand Down
9 changes: 7 additions & 2 deletions frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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()
Expand All @@ -78,8 +79,12 @@ const TravelPlanRegisterPage = () => {
},
},
);
};

const debouncedRegisterTravelPlan = useLeadingDebounce(() => handleRegisterTravelPlan(), 3000);

handleCloseBottomSheet();
const handleConfirmBottomSheet = () => {
debouncedRegisterTravelPlan();
};

const { mutate: handleAddTravelPlan } = usePostTravelPlan();
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -58,8 +59,10 @@ const TravelogueDetailPage = () => {
setIsDeleteModalOpen((prev) => !prev);
};

const debouncedClickDeleteButton = useLeadingDebounce(() => deleteTravelogue(Number(id)), 3000);

const handleClickDeleteButton = () => {
deleteTravelogue(Number(id));
debouncedClickDeleteButton();
};

//TODO: 수정 이벤트 추가해야함
Expand Down
13 changes: 10 additions & 3 deletions frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -78,8 +79,8 @@

const navigate = useNavigate();

const handleConfirmBottomSheet = () => {
handleRegisterTravelogue(
const handleRegisterTravelogue = () => {
registerTravelogueMutate(
{ title, thumbnail, days: travelogueDays },
{
onSuccess: ({ data: { id } }) => {
Expand All @@ -90,7 +91,13 @@
);
};

const { mutate: handleRegisterTravelogue } = usePostTravelogue();
const debouncedRegisterTravelogue = useLeadingDebounce(() => handleRegisterTravelogue(), 3000);

const handleConfirmBottomSheet = () => {
debouncedRegisterTravelogue();
};

const { mutate: registerTravelogueMutate } = usePostTravelogue();

const { user } = useUser();

Expand All @@ -105,7 +112,7 @@
return () => {
saveTransformDetail(null);
};
}, [user?.accessToken, navigate]);

Check warning on line 115 in frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx

View workflow job for this annotation

GitHub Actions / frontend-ci 

React Hook useEffect has a missing dependency: 'saveTransformDetail'. Either include it or remove the dependency array

return (
<>
Expand Down
19 changes: 19 additions & 0 deletions frontend/src/hooks/useLeadingDebounce.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { useState } from "react";

const useLeadingDebounce = (callback: () => void, delay: number) => {
const [isDebouncing, setIsDebouncing] = useState(false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 상태는 ui 상태에 영향을 주는건 아니니 �hook이 아닌 함수로 사용할 수 있지 않을까 싶어요!

https://github.com/toss/es-toolkit/blob/main/src/function/debounce.ts 참고 링크 드립니다!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useRef로 변경해보았습니다! 렌더링 주기를 고려하는 것이 예를 들어, unmount 될 때 cleartimeout을 하는 것이 좋을 것 같아서 변경해보았습니다! 확인 바랍니다


const debouncedCallback = () => {
if (!isDebouncing) {
callback();
setIsDebouncing(true);
setTimeout(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setTimeout이 있다면 clearTimeout이 있어야 메모리 누수를 막을 수 있다고 하네요!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋은 피드백입니다! 해당 부분 반영했습니다!

setIsDebouncing(false);
}, delay);
}
};

return debouncedCallback;
};

export default useLeadingDebounce;
Loading