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

frontend/__tests__/travelPlanRegisterPage.test.tsx

@@ -4,7 +4,7 @@ import { renderHook, waitFor } from "@testing-library/react";
 
 import { TravelPlanPlace } from "@type/domain/travelPlan";
 
-import { useTravelPlanDays } from "@hooks/pages/useTravelPlanDays";
+import { useTravelPlanDays } from "@hooks/pages/useTravelPlanFormState/useTravelPlanDays";
 import useCalendar from "@hooks/useCalendar";
 
 import { createTravelPlanRegisterHook } from "./utils/createTravelPlanRegisterHook";

frontend/src/components/common/TextField/TextField.stories.tsx

@@ -18,13 +18,7 @@ const inputContents = {
     />
   ),
   thumbnailUploader: (
-    <ThumbnailUpload
-      id="thumbnail-upload-1"
-      previewUrls={[]}
-      fileInputRef={React.createRef()}
-      onChangeImage={() => {}}
-      onClickButton={() => {}}
-    />
+    <ThumbnailUpload id="thumbnail-upload-1" previewUrls={[]} onChangeImage={() => {}} />
   ),
   calendar: <Input placeholder="시작일을 입력해주세요" />,
 };

frontend/src/components/common/ThumbnailUpload/ThumbnailUpload.stories.tsx

@@ -21,14 +21,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 const mockOnChangeImage = () => {};
-const mockOnClickButton = () => {};
+
 export const Default: Story = {
   args: {
     id: "1",
     previewUrls: [],
-    fileInputRef: React.createRef<HTMLInputElement>(),
+
     onChangeImage: mockOnChangeImage,
-    onClickButton: mockOnClickButton,
   },
 };
 export const WithImage: Story = {

frontend/src/components/common/ThumbnailUpload/ThumbnailUpload.tsx

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, useState } from "react";
+import { InputHTMLAttributes, useRef, useState } from "react";
 
 import { PRIMITIVE_COLORS } from "@styles/tokens";
 
@@ -11,22 +11,25 @@ import * as S from "./ThumbnailUpload.styled";
 interface ThumbnailUploadProps extends InputHTMLAttributes<HTMLInputElement> {
   id?: string;
   previewUrls: string[];
-  fileInputRef: React.RefObject<HTMLInputElement>;
+
   onChangeImage: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onClickButton: () => void;
+
   onDeleteButton?: () => void;
 }
 
 const ThumbnailUpload = ({
   id,
   previewUrls,
-  fileInputRef,
   onChangeImage,
-  onClickButton,
   onDeleteButton,
 }: ThumbnailUploadProps) => {
   const [isShowEditButton, setIsShowEditButton] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const thumbnailFileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleButtonClick = () => {
+    thumbnailFileInputRef.current?.click();
+  };
 
   const handleMouseOver = () => {
     if (!isLoading) setIsShowEditButton(true);
@@ -56,7 +59,7 @@ const ThumbnailUpload = ({
   const HiddenInput = (
     <S.ThumbnailUploadHiddenInput
       id={id}
-      ref={fileInputRef}
+      ref={thumbnailFileInputRef}
       type="file"
       accept="image/*"
       onChange={handleChangeImage}
@@ -79,7 +82,11 @@ const ThumbnailUpload = ({
 
       {!image ? (
         <>
-          <S.ThumbnailUploadButton type="button" onClick={onClickButton} aria-label="이미지 업로드">
+          <S.ThumbnailUploadButton
+            type="button"
+            onClick={handleButtonClick}
+            aria-label="이미지 업로드"
+          >
             <PictureIcon />
             <p>썸네일 업로드</p>
           </S.ThumbnailUploadButton>
@@ -91,7 +98,7 @@ const ThumbnailUpload = ({
           onMouseLeave={handleMouseLeave}
         >
           {isShowEditButton && (
-            <S.ThumbnailUploadEditButton onClick={onClickButton}>
+            <S.ThumbnailUploadEditButton onClick={handleButtonClick}>
               썸네일 수정하기
             </S.ThumbnailUploadEditButton>
           )}

frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx

@@ -1,8 +1,4 @@
-import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-
-import { useGetTravelPlan } from "@queries/useGetTravelPlan";
-import { usePutTravelPlan } from "@queries/usePutTravelPlan";
+import { useNavigate } from "react-router-dom";
 
 import {
   Accordion,
@@ -17,12 +13,13 @@ import {
   TextField,
 } from "@components/common";
 import Calendar from "@components/common/Calendar/Calendar";
+import useTravelPlanEdit from "@components/pages/travelPlanEdit/hooks/useTravelPlanEdit";
+import { useTravelPlanInitialization } from "@components/pages/travelPlanEdit/hooks/useTravelPlanInitialization";
 import TravelPlanDayAccordion from "@components/pages/travelPlanRegister/TravelPlanDayAccordion/TravelPlanDayAccordion";
 
-import { useTravelPlanDays } from "@hooks/pages/useTravelPlanDays";
-import useLeadingDebounce from "@hooks/useLeadingDebounce";
+import useTravelPlanFormState from "@hooks/pages/useTravelPlanFormState/useTravelPlanFormState";
+import useToggle from "@hooks/useToggle";
 
-import { DEBOUNCED_TIME } from "@constants/debouncedTime";
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 import { ROUTE_PATHS_MAP } from "@constants/route";
@@ -32,106 +29,50 @@ import { extractUTCDate } from "@utils/extractUTCDate";
 import * as S from "./TravelPlanEditPage.styled";
 
 const TravelPlanEditPage = () => {
-  const navigate = useNavigate();
-
-  const { id = "" } = useParams();
-
-  const { data, status, error, isLoading } = useGetTravelPlan(id);
-
-  const [title, setTitle] = useState("");
-
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [isOpen, handleOpenBottomSheet, handleCloseBottomSheet] = useToggle();
+  const [isShowCalendar, handleOpenCalendar, handleCloseCalendar] = useToggle();
 
   const {
-    travelPlanDays,
+    state: { title, startDate, travelPlanDays },
+    handler: {
+      onChangeTravelPlanDays,
+      onChangeTitle,
+      onSelectStartDate,
+      onInitializeStartDate,
+      onAddDay,
+      onAddPlace,
+      onDeleteDay,
+      onDeletePlace,
+      onAddPlaceTodo,
+      onDeletePlaceTodo,
+      onChangeContent,
+    },
+  } = useTravelPlanFormState([]);
+
+  const { status, error, isLoading } = useTravelPlanInitialization({
+    onChangeTitle,
     onChangeTravelPlanDays,
-    onAddDay,
-    onAddPlace,
-    onDeleteDay,
-    onDeletePlace,
-    onAddPlaceTodo,
-    onDeletePlaceTodo,
-    onChangeContent,
-  } = useTravelPlanDays([]);
-
-  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const title = e.target.value.slice(
-      FORM_VALIDATIONS_MAP.title.minLength,
-      FORM_VALIDATIONS_MAP.title.maxLength,
-    );
-    setTitle(title);
-  };
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleOpenBottomSheet = () => {
-    setIsOpen(true);
-  };
-
-  const handleCloseBottomSheet = () => {
-    setIsOpen(false);
-  };
+    onInitializeStartDate,
+  });
 
-  const {
-    mutate: mutateTravelPlanEdit,
-    isPaused,
-    isPending: isPuttingTravelPlanPending,
-  } = usePutTravelPlan();
-
-  const handleEditTravelPlan = () => {
-    const formattedStartDate = extractUTCDate(startDate);
-
-    mutateTravelPlanEdit(
-      {
-        travelPlan: { title, startDate: formattedStartDate, days: travelPlanDays },
-        id: Number(id),
-      },
-      {
-        onSuccess: () => {
-          handleCloseBottomSheet();
-          navigate(ROUTE_PATHS_MAP.travelPlan(id));
-        },
-      },
-    );
-  };
-
-  const debouncedEditTravelPlan = useLeadingDebounce(() => handleEditTravelPlan(), DEBOUNCED_TIME);
-
-  const handleConfirmBottomSheet = () => {
-    if (isPaused) alert(ERROR_MESSAGE_MAP.network);
-    debouncedEditTravelPlan();
-  };
-
-  const [isShowCalendar, setIsShowCalendar] = useState(false);
-
-  const handleInputClick = () => {
-    setIsShowCalendar(true);
-  };
-
-  const handleSelectDate = (date: Date) => {
-    setStartDate(date);
-    setIsShowCalendar(false);
-  };
-
-  useEffect(() => {
-    if (data) {
-      setTitle(data.title);
-      setStartDate(new Date(data.startDate));
-      onChangeTravelPlanDays(data.days);
-    }
-  }, [data, onChangeTravelPlanDays]);
+  const { onEditTravelPlan, isPuttingTravelPlanPending } = useTravelPlanEdit(
+    { title, startDate: extractUTCDate(startDate), days: travelPlanDays },
+    handleCloseBottomSheet,
+  );
+
+  const navigate = useNavigate();
 
   if (status === "error") {
     const errorMessage =
-      error.message === ERROR_MESSAGE_MAP.api.travelPlanOnlyWriter
+      error?.message === ERROR_MESSAGE_MAP.api.travelPlanOnlyWriter
         ? ERROR_MESSAGE_MAP.api.travelPlanEditOnlyWriter
-        : error.message;
+        : error?.message;
 
     alert(errorMessage);
     navigate(ROUTE_PATHS_MAP.back);
   }
 
-  if (isLoading) <>Loadinggㅋㅋㅋㅋ</>;
+  if (isLoading) <>Loading...</>;
 
   return (
     <>
@@ -145,7 +86,7 @@ const TravelPlanEditPage = () => {
                 value={title}
                 maxLength={FORM_VALIDATIONS_MAP.title.maxLength}
                 placeholder="여행 계획 제목을 입력해주세요"
-                onChange={handleChangeTitle}
+                onChange={(event) => onChangeTitle(event.target.value)}
               />
               <CharacterCount
                 count={title.length}
@@ -165,14 +106,14 @@ const TravelPlanEditPage = () => {
               <Input
                 id={id}
                 value={startDate ? startDate.toLocaleDateString().slice(0, -1) : ""}
-                onClick={handleInputClick}
+                onClick={handleOpenCalendar}
                 readOnly
                 placeholder="시작일을 입력해주세요"
               />
               {isShowCalendar && (
                 <Calendar
-                  onSelectDate={handleSelectDate}
-                  onClose={() => setIsShowCalendar((prev) => !prev)}
+                  onSelectDate={(date) => onSelectStartDate(date, handleCloseCalendar)}
+                  onClose={handleCloseCalendar}
                 />
               )}
             </>
@@ -231,7 +172,7 @@ const TravelPlanEditPage = () => {
         mainText="여행 계획을 수정할까요?"
         subText="수정한 후에도 다시 여행 계획을 변경할 수 있어요."
         onClose={handleCloseBottomSheet}
-        onConfirm={handleConfirmBottomSheet}
+        onConfirm={onEditTravelPlan}
       />
     </>
   );

frontend/src/components/pages/travelPlanEdit/hooks/useTravelPlanEdit.ts

@@ -0,0 +1,47 @@
+import { useNavigate, useParams } from "react-router-dom";
+
+import { TravelPlanPayload } from "@type/domain/travelPlan";
+
+import { usePutTravelPlan } from "@queries/usePutTravelPlan";
+
+import useLeadingDebounce from "@hooks/useLeadingDebounce";
+
+import { DEBOUNCED_TIME } from "@constants/debouncedTime";
+import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
+import { ROUTE_PATHS_MAP } from "@constants/route";
+
+const useTravelPlanEdit = (payload: TravelPlanPayload, handleCloseBottomSheet: () => void) => {
+  const {
+    mutate: mutateTravelPlanEdit,
+    isPaused,
+    isPending: isPuttingTravelPlanPending,
+  } = usePutTravelPlan();
+
+  const navigate = useNavigate();
+
+  const { id = "" } = useParams();
+
+  const handleEditTravelPlan = () => {
+    mutateTravelPlanEdit(
+      {
+        travelPlan: payload,
+        id: Number(id),
+      },
+      {
+        onSuccess: () => {
+          handleCloseBottomSheet();
+          navigate(ROUTE_PATHS_MAP.travelPlan(id));
+        },
+      },
+    );
+  };
+
+  const onEditTravelPlan = useLeadingDebounce(() => {
+    if (isPaused) alert(ERROR_MESSAGE_MAP.network);
+    handleEditTravelPlan();
+  }, DEBOUNCED_TIME);
+
+  return { onEditTravelPlan, isPuttingTravelPlanPending };
+};
+
+export default useTravelPlanEdit;

frontend/src/components/pages/travelPlanEdit/hooks/useTravelPlanInitialization.ts

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+import { useGetTravelPlan } from "@queries/useGetTravelPlan";
+
+import useTravelPlanFormState from "@hooks/pages/useTravelPlanFormState/useTravelPlanFormState";
+
+type UseTravelPlanInitialization = Pick<
+  ReturnType<typeof useTravelPlanFormState>["handler"],
+  "onChangeTitle" | "onInitializeStartDate" | "onChangeTravelPlanDays"
+>;
+
+export const useTravelPlanInitialization = ({
+  onChangeTitle,
+  onInitializeStartDate,
+  onChangeTravelPlanDays,
+}: UseTravelPlanInitialization) => {
+  const { id = "" } = useParams();
+
+  const { data, status, error, isLoading } = useGetTravelPlan(id);
+  useEffect(() => {
+    if (data) {
+      onChangeTitle(data.title);
+      onInitializeStartDate(data.startDate);
+      onChangeTravelPlanDays(data.days);
+    }
+  }, [data, onChangeTitle, onChangeTravelPlanDays, onInitializeStartDate]);
+
+  return { status, error, isLoading };
+};