Merge branch 'develop/fe' of https://github.com/woowacourse-teams/202…

…4-touroot into feature/fe/#201
woowacourse-teams · Aug 6, 2024 · 9250a6c · 9250a6c
2 parents 7ccc52a + 1cb90cf
commit 9250a6c
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 14 deletions.
diff --git a/frontend/src/components/pages/login/KakaoCallbackPage.tsx b/frontend/src/components/pages/login/KakaoCallbackPage.tsx
@@ -16,10 +16,12 @@ const KakaoCallbackPage = () => {
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
     const code = searchParams.get("code");
+    const redirectUri = `${window.location.origin}/oauth`;
+    const encodedRedirectUri = encodeURIComponent(redirectUri);
 
     if (code) {
       client
-        .get(API_ENDPOINT_MAP.loginOauth(code))
+        .post(API_ENDPOINT_MAP.loginOauth(code, encodedRedirectUri))
         .then((res) => {
           saveUser(res.data);
           navigate(ROUTE_PATHS_MAP.root);

diff --git a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
@@ -25,10 +25,11 @@ import { ROUTE_PATHS_MAP } from "@constants/route";
 
 import * as S from "./TravelPlanRegisterPage.styled";
 
+const MIN_TITLE_LENGTH = 0;
 const MAX_TITLE_LENGTH = 20;
 
 const TravelPlanRegisterPage = () => {
-  const { transformDetail } = useTravelTransformDetailContext();
+  const { transformDetail, saveTransformDetail } = useTravelTransformDetailContext();
 
   const [title, setTitle] = useState("");
   const [startDate, setStartDate] = useState<Date | null>(null);
@@ -60,7 +61,8 @@ const TravelPlanRegisterPage = () => {
   };
 
   const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(e.target.value);
+    const title = e.target.value.slice(MIN_TITLE_LENGTH, MAX_TITLE_LENGTH);
+    setTitle(title);
   };
 
   const [isOpen, setIsOpen] = useState(false);
@@ -101,7 +103,10 @@ const TravelPlanRegisterPage = () => {
       alert(ERROR_MESSAGE_MAP.api.login);
       navigate(ROUTE_PATHS_MAP.login);
     }
-  }, [user?.accessToken, navigate]);
+    return () => {
+      saveTransformDetail(null);
+    };
+  }, [user?.accessToken, navigate, saveTransformDetail]);
 
   return (
     <>

diff --git a/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx b/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx
@@ -56,7 +56,7 @@ const TravelogueDetailPage = () => {
         )}
       />
       <TransformBottomSheet
-        onTransform={() => onTransformTravelDetail("/travel-plans/register", data)}
+        onTransform={() => onTransformTravelDetail("/travel-plan/register", data)}
         buttonLabel="여행 계획으로 전환"
       >
         이 여행기를 따라가고 싶으신가요?

diff --git a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
@@ -27,6 +27,7 @@ import { ROUTE_PATHS_MAP } from "@constants/route";
 
 import * as S from "./TravelogueRegisterPage.styled";
 
+const MIN_TITLE_LENGTH = 0;
 const MAX_TITLE_LENGTH = 20;
 
 const TravelogueRegisterPage = () => {
@@ -36,7 +37,8 @@ const TravelogueRegisterPage = () => {
   const [thumbnail, setThumbnail] = useState("");
 
   const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(e.target.value);
+    const title = e.target.value.slice(MIN_TITLE_LENGTH, MAX_TITLE_LENGTH);
+    setTitle(title);
   };
 
   const {
@@ -91,11 +93,17 @@ const TravelogueRegisterPage = () => {
 
   const { user } = useUser();
 
+  const { saveTransformDetail } = useTravelTransformDetailContext();
+
   useEffect(() => {
     if (!user?.accessToken) {
       alert(ERROR_MESSAGE_MAP.api.login);
       navigate(ROUTE_PATHS_MAP.login);
     }
+
+    return () => {
+      saveTransformDetail(null);
+    };
   }, [user?.accessToken, navigate]);
 
   return (

diff --git a/frontend/src/constants/endpoint.ts b/frontend/src/constants/endpoint.ts
@@ -1,7 +1,8 @@
 export const API_ENDPOINT_MAP = {
-  loginOauth: (code: string) => `/login/oauth/kakao?code=${code}`,
-  travelogueDetail: (id: string) => `/travelogues/${id}`,
-  travelPlanDetail: (id: string) => `travel-plans/${id}`,
+  loginOauth: (code: string, redirectUri: string) =>
+    `/login/oauth/kakao?code=${code}&redirectUri=${redirectUri}`,
+  travelogueDetail: (id: number) => `/travelogues/${id}`,
+  travelPlanDetail: (id: number) => `travel-plans/${id}`,
   travelogues: "/travelogues",
   travelPlans: "/travel-plans",
   image: "/image",

diff --git a/frontend/src/contexts/TravelTransformDetailProvider.tsx b/frontend/src/contexts/TravelTransformDetailProvider.tsx
@@ -11,14 +11,16 @@ import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
 const TravelogueContext = createContext<TravelTransformDetail | null>(null);
-const SaveTravelogueContext = createContext<(travelogue: TravelTransformDetail) => void>(() => {});
+const SaveTravelogueContext = createContext<(travelogue: TravelTransformDetail | null) => void>(
+  () => {},
+);
 
 export const TravelTransformDetailProvider = ({ children }: React.PropsWithChildren) => {
   const [travelTransformDetail, setTravelTransformDetail] = useState<TravelTransformDetail | null>(
     null,
   );
 
-  const saveTravelTransformDetail = (transformDetail: TravelTransformDetail) => {
+  const saveTravelTransformDetail = (transformDetail: TravelTransformDetail | null) => {
     setTravelTransformDetail(transformDetail);
   };
 
@@ -51,5 +53,5 @@ export const useTravelTransformDetailContext = () => {
     }
   };
 
-  return { transformDetail, onTransformTravelDetail };
+  return { transformDetail, saveTransformDetail, onTransformTravelDetail };
 };
diff --git a/frontend/src/hooks/pages/useTravelPlanDays.ts b/frontend/src/hooks/pages/useTravelPlanDays.ts
@@ -3,6 +3,9 @@ import { useCallback, useState } from "react";
 import type { TravelPlanDay, TravelPlanPlace } from "@type/domain/travelPlan";
 import type { TravelTransformPlaces } from "@type/domain/travelTransform";
 
+const MIN_DESCRIPTION_LENGTH = 0;
+const MAX_DESCRIPTION_LENGTH = 300;
+
 export const useTravelPlanDays = (days: TravelTransformPlaces[]) => {
   const [travelPlanDays, setTravelPlanDays] = useState<TravelPlanDay[]>(days);
 
@@ -46,7 +49,10 @@ export const useTravelPlanDays = (days: TravelTransformPlaces[]) => {
     placeIndex: number,
   ) => {
     const newTravelPlans = [...travelPlanDays];
-    newTravelPlans[dayIndex].places[placeIndex].description = e.target.value;
+    newTravelPlans[dayIndex].places[placeIndex].description = e.target.value.slice(
+      MIN_DESCRIPTION_LENGTH,
+      MAX_DESCRIPTION_LENGTH,
+    );
     setTravelPlanDays(newTravelPlans);
   };
 

diff --git a/frontend/src/hooks/pages/useTravelogueDays.ts b/frontend/src/hooks/pages/useTravelogueDays.ts
@@ -3,6 +3,9 @@ import { useCallback, useState } from "react";
 import type { TravelTransformPlaces } from "@type/domain/travelTransform";
 import type { TravelogueDay, TraveloguePlace } from "@type/domain/travelogue";
 
+const MIN_DESCRIPTION_LENGTH = 0;
+const MAX_DESCRIPTION_LENGTH = 300;
+
 export const useTravelogueDays = (days: TravelTransformPlaces[]) => {
   const [travelogueDays, setTravelogueDays] = useState<TravelogueDay[]>(days);
 
@@ -46,7 +49,10 @@ export const useTravelogueDays = (days: TravelTransformPlaces[]) => {
     placeIndex: number,
   ) => {
     const newTraveloguePlaces = [...travelogueDays];
-    newTraveloguePlaces[dayIndex].places[placeIndex].description = e.target.value;
+    newTraveloguePlaces[dayIndex].places[placeIndex].description = e.target.value.slice(
+      MIN_DESCRIPTION_LENGTH,
+      MAX_DESCRIPTION_LENGTH,
+    );
     setTravelogueDays(newTraveloguePlaces);
   };