[Feature] - 여행기 & 여행 계획 등록/수정 페이지 리팩터링

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

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useTravelTransformDetailContext } from "@contexts/TravelTransformDetailProvider";
@@ -23,6 +22,7 @@ import TravelPlanDayAccordion from "@components/pages/travelPlanRegister/TravelP
 import useTravelPlanForm from "@hooks/pages/useTravelPlanForm";
 import useAuthRedirect from "@hooks/useAuthRedirect";
 import useLeadingDebounce from "@hooks/useLeadingDebounce";
+import useToggle from "@hooks/useToggle";
 
 import { CYPRESS_DATA_MAP } from "@constants/cypress";
 import { DEBOUNCED_TIME } from "@constants/debouncedTime";
@@ -54,17 +54,8 @@ const TravelPlanRegisterPage = () => {
   } = useTravelPlanForm(transformDetail?.days ?? []);
 
   /** ui */
-  const [isOpenBottomSheet, setIsOpenBottomSheet] = useState(false);
-
-  const handleOpenBottomSheet = () => setIsOpenBottomSheet(true);
-
-  const handleCloseBottomSheet = () => setIsOpenBottomSheet(false);
-
-  const [isShowCalendar, setIsShowCalendar] = useState(false);
-
-  const handleOpenCalendar = () => setIsShowCalendar(true);
-
-  const handleCloseCalendar = () => setIsShowCalendar(() => false);
+  const [isOpenBottomSheet, onBottomSheetOpen, onBottomSheetClose] = useToggle();
+  const [isShowCalendar, handleOpenCalendar, handleCloseCalendar] = useToggle();
 
   /** router */
   const navigate = useNavigate();
@@ -80,7 +71,7 @@ const TravelPlanRegisterPage = () => {
       onSuccess: ({ headers: { location } }) => {
         const id = extractLastPath(location);
 
-        handleCloseBottomSheet();
+        onBottomSheetClose();
         navigate(ROUTE_PATHS_MAP.travelPlan(id));
       },
     });
@@ -199,7 +190,7 @@ const TravelPlanRegisterPage = () => {
 
         <Button
           variants="primary"
-          onClick={handleOpenBottomSheet}
+          onClick={onBottomSheetOpen}
           data-cy={CYPRESS_DATA_MAP.travelPlanRegister.registerButton}
         >
           등록
@@ -211,7 +202,7 @@ const TravelPlanRegisterPage = () => {
         isPending={isPostingTravelPlanPending}
         mainText="여행 계획을 등록할까요?"
         subText="등록한 후에도 다시 여행 계획을 수정할 수 있어요."
-        onClose={handleCloseBottomSheet}
+        onClose={onBottomSheetClose}
         onConfirm={handleConfirmBottomSheet}
       />
     </>

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

@@ -1,5 +1,3 @@
-import { useState } from "react";
-
 import { useTravelTransformDetailContext } from "@contexts/TravelTransformDetailProvider";
 
 import {
@@ -21,21 +19,14 @@ import useTravelogueForm from "@components/pages/travelogueRegister/hooks/useTra
 
 import useAuthRedirect from "@hooks/useAuthRedirect";
 import { useDragScroll } from "@hooks/useDragScroll";
+import useToggle from "@hooks/useToggle";
 
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 
 import * as S from "./TravelogueRegisterPage.styled";
 
 const TravelogueRegisterPage = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleOpenBottomSheet = () => {
-    setIsOpen(true);
-  };
-
-  const handleCloseBottomSheet = () => {
-    setIsOpen(false);
-  };
+  const [isOpen, onBottomSheetOpen, onBottomSheetClose] = useToggle();
 
   const { transformDetail } = useTravelTransformDetailContext();
 
@@ -63,7 +54,7 @@ const TravelogueRegisterPage = () => {
       onChangePlaceDescription,
       onSubmitTravelogue,
     },
-  } = useTravelogueForm(transformDetail?.days ?? [], handleCloseBottomSheet);
+  } = useTravelogueForm(transformDetail?.days ?? [], onBottomSheetClose);
 
   const { scrollRef, onMouseDown, onMouseMove, onMouseUp } = useDragScroll<HTMLUListElement>();
 
@@ -169,7 +160,7 @@ const TravelogueRegisterPage = () => {
           </GoogleMapLoadScript>
         </div>
 
-        <Button variants="primary" onClick={handleOpenBottomSheet}>
+        <Button variants="primary" onClick={onBottomSheetOpen}>
           등록
         </Button>
       </S.Layout>
@@ -179,7 +170,7 @@ const TravelogueRegisterPage = () => {
         isPending={isPostingTraveloguePending}
         mainText="여행기를 등록할까요?"
         subText="등록한 후에도 다시 여행기를 수정할 수 있어요!"
-        onClose={handleCloseBottomSheet}
+        onClose={onBottomSheetClose}
         onConfirm={onSubmitTravelogue}
       />
     </>

frontend/src/hooks/useToggle.ts

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+const useToggle = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  const onOpen = () => {
+    setIsOpen(true);
+  };
+
+  return [isOpen, onOpen, onClose] as const;
+};
+
+export default useToggle;