[Refactor] - API 요청 및 응답 명세 통일 (#508)

* refactor: edit 응답 명세 변경에 따른 수정 * refactor: 등록 페이지 응답 명세 변경에 따른 수정 * refactor: checked 명세서 변경에 따라 isChecked로 수정 * refactor: useLocation 대신 useParams 사용하도록 수정 * refactor(TravelPlanTodoItem): as 수정
woowacourse-teams · Oct 7, 2024 · 9ca4b40 · 9ca4b40
1 parent 08c0a1d
commit 9ca4b40
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 143 deletions.
diff --git a/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx b/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import ReactGA from "react-ga4";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { useTravelTransformDetailContext } from "@contexts/TravelTransformDetailProvider";
 
@@ -18,7 +18,6 @@ import useLeadingDebounce from "@hooks/useLeadingDebounce";
 import { DEBOUNCED_TIME } from "@constants/debouncedTime";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
-import { extractLastPath } from "@utils/extractId";
 import getDateRange from "@utils/getDateRange";
 import getDaysAndNights from "@utils/getDaysAndNights";
 import { isUUID } from "@utils/uuid";
@@ -28,8 +27,7 @@ import theme from "@styles/theme";
 import * as S from "./TravelPlanDetailPage.styled";
 
 const TravelPlanDetailPage = () => {
-  const location = useLocation();
-  const id = extractLastPath(location.pathname);
+  const { id = "" } = useParams();
 
   const { onTransformTravelDetail } = useTravelTransformDetailContext();
   const { data, status, error } = useGetTravelPlan(id);

diff --git a/frontend/src/components/pages/travelPlanDetail/TravelPlanTodoItem/TravelPlanTodoItem.tsx b/frontend/src/components/pages/travelPlanDetail/TravelPlanTodoItem/TravelPlanTodoItem.tsx
@@ -19,15 +19,15 @@ const TravelPlanTodoItem = ({ todo }: { todo: TravelPlanTodo }) => {
   return (
     <S.TodoListItemContainer key={todo.id}>
       <Checkbox
-        checked={todo.checked}
+        checked={todo.isChecked}
         onChange={(e) => {
           if (!isUUID(id))
             mutateUpdateTodoStatus({
-              todoId: todo.id as string,
-              checked: e.target.checked,
+              todoId: String(todo.id),
+              isChecked: e.target.checked,
             });
         }}
-        isChecked={todo.checked ?? false}
+        isChecked={todo.isChecked ?? false}
       />
       <Text textType="detail">{todo.content}</Text>
     </S.TodoListItemContainer>

diff --git a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { useGetTravelPlan } from "@queries/useGetTravelPlan";
 import { usePutTravelPlan } from "@queries/usePutTravelPlan";
@@ -27,16 +27,14 @@ import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
-import { extractID } from "@utils/extractId";
 import { extractUTCDate } from "@utils/extractUTCDate";
 
 import * as S from "./TravelPlanEditPage.styled";
 
 const TravelPlanEditPage = () => {
   const navigate = useNavigate();
 
-  const location = useLocation();
-  const id = extractID(location.pathname);
+  const { id = "" } = useParams();
 
   const { data, status, error, isLoading } = useGetTravelPlan(id);
 
@@ -89,9 +87,9 @@ const TravelPlanEditPage = () => {
         id: Number(id),
       },
       {
-        onSuccess: (data) => {
+        onSuccess: () => {
           handleCloseBottomSheet();
-          navigate(ROUTE_PATHS_MAP.travelPlan(data?.data?.id));
+          navigate(ROUTE_PATHS_MAP.travelPlan(id));
         },
       },
     );

diff --git a/frontend/src/components/pages/travelPlanRegister/PlaceTodoListItem/PlaceTodoListItem.tsx b/frontend/src/components/pages/travelPlanRegister/PlaceTodoListItem/PlaceTodoListItem.tsx
@@ -16,7 +16,7 @@ const PlaceTodoListItem = ({ todo, onChangeContent, onDeleteTodo }: PlaceTodoLis
   return (
     <S.Layout>
       <S.ToDoListItemContainer>
-        <Checkbox readOnly isChecked={todo?.checked ?? false} />
+        <Checkbox readOnly isChecked={todo?.isChecked ?? false} />
         <Input
           value={todo?.content}
           placeholder="할 일을 입력해주세요."

diff --git a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
@@ -30,6 +30,7 @@ import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
+import { extractLastPath } from "@utils/extractId";
 import { extractUTCDate } from "@utils/extractUTCDate";
 
 import * as S from "./TravelPlanRegisterPage.styled";
@@ -77,11 +78,11 @@ const TravelPlanRegisterPage = () => {
     const travelPlanPayload = { title, startDate: extractUTCDate(startDate), days: travelPlanDays };
 
     mutateTravelPlanRegister(travelPlanPayload, {
-      onSuccess: (data) => {
-        const travelPlanId = data?.data?.id;
+      onSuccess: ({ headers: { location } }) => {
+        const id = extractLastPath(location);
 
         handleCloseBottomSheet();
-        navigate(ROUTE_PATHS_MAP.travelPlan(travelPlanId));
+        navigate(ROUTE_PATHS_MAP.travelPlan(id));
       },
     });
   };

diff --git a/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx b/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import ReactGA from "react-ga4";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { useTravelTransformDetailContext } from "@contexts/TravelTransformDetailProvider";
 
@@ -30,7 +30,6 @@ import { DEBOUNCED_TIME } from "@constants/debouncedTime";
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
-import { extractID } from "@utils/extractId";
 import getDaysAndNights from "@utils/getDaysAndNights";
 
 import theme from "@styles/theme";
@@ -39,8 +38,7 @@ import { SEMANTIC_COLORS } from "@styles/tokens";
 import * as S from "./TravelogueDetailPage.styled";
 
 const TravelogueDetailPage = () => {
-  const location = useLocation();
-  const id = extractID(location.pathname);
+  const { id = "" } = useParams();
 
   const { user } = useUser();
 

diff --git a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { usePostUploadImages } from "@queries/index";
 import { useGetTravelogue } from "@queries/useGetTravelogue";
@@ -32,16 +32,14 @@ import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
-import { extractID } from "@utils/extractId";
 import resizeAndConvertImage from "@utils/resizeAndConvertImage";
 
 import * as S from "./TravelogueEditPage.styled";
 
 const TravelogueEditPage = () => {
   const navigate = useNavigate();
 
-  const location = useLocation();
-  const id = extractID(location.pathname);
+  const { id = "" } = useParams();
 
   const { data } = useGetTravelogue(id);
 
@@ -115,9 +113,9 @@ const TravelogueEditPage = () => {
         id: Number(id),
       },
       {
-        onSuccess: (data) => {
+        onSuccess: () => {
           handleCloseBottomSheet();
-          navigate(ROUTE_PATHS_MAP.travelogue(data?.data?.id));
+          navigate(ROUTE_PATHS_MAP.travelogue(id));
         },
       },
     );

diff --git a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
@@ -32,6 +32,7 @@ import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
+import { extractLastPath } from "@utils/extractId";
 import getInitialTravelTitle from "@utils/getInitialTravelTitle";
 import resizeAndConvertImage from "@utils/resizeAndConvertImage";
 
@@ -116,9 +117,11 @@ const TravelogueRegisterPage = () => {
         days: travelogueDays,
       },
       {
-        onSuccess: (data) => {
+        onSuccess: ({ headers: { location } }) => {
+          const id = extractLastPath(location);
+
           handleCloseBottomSheet();
-          navigate(ROUTE_PATHS_MAP.travelogue(data?.data?.id));
+          navigate(ROUTE_PATHS_MAP.travelogue(id));
         },
       },
     );

diff --git a/frontend/src/hooks/pages/useTravelPlanDays.ts b/frontend/src/hooks/pages/useTravelPlanDays.ts
@@ -111,7 +111,7 @@ export const useTravelPlanDays = (days: TravelTransformPlaces[]) => {
         const travelPlanPlace = previousTravelPlanDays[dayIndex]?.places[placeIndex];
 
         if (travelPlanPlace) {
-          travelPlanPlace.todos?.push({ id: uuidv4(), content: "", checked: false });
+          travelPlanPlace.todos?.push({ id: uuidv4(), content: "", isChecked: false });
         }
       });
     },