[Feature] - 데모데이 피드백 반영(리버)

frontend/src/components/common/Header/Header.tsx

@@ -1,5 +1,6 @@
 import { useLocation, useNavigate } from "react-router-dom";
 
+import usePreviousPage from "@hooks/usePreviousPage";
 import useUser from "@hooks/useUser";
 
 import { ROUTE_PATHS_MAP } from "@constants/route";
@@ -44,6 +45,7 @@ const Header = ({
   };
 
   const handleClickMyPage = () => navigate(ROUTE_PATHS_MAP.my);
+  const goBack = usePreviousPage();
 
   return (
     <Drawer>
@@ -52,11 +54,7 @@ const Header = ({
           <IconButton
             color={isLogoUsed ? theme.colors.primary : PRIMITIVE_COLORS.black}
             iconType={isLogoUsed ? "korean-logo" : "back-icon"}
-            onClick={
-              isLogoUsed
-                ? () => navigate(ROUTE_PATHS_MAP.root)
-                : () => navigate(ROUTE_PATHS_MAP.back)
-            }
+            onClick={isLogoUsed ? () => navigate(ROUTE_PATHS_MAP.root) : () => goBack()}
           />
         </S.LeftWrapper>
 

frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx

@@ -20,6 +20,7 @@ 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";
 
 import theme from "@styles/theme";
@@ -36,10 +37,7 @@ const TravelPlanDetailPage = () => {
 
   const navigate = useNavigate();
 
-  const daysAndNights =
-    data?.days.length && data?.days.length > 1
-      ? `${data?.days.length - 1}박 ${data?.days.length}일`
-      : "당일치기";
+  const daysAndNights = getDaysAndNights(data?.days);
 
   const { mutate: mutateDeleteTravelPlan, isPending: isDeletingPending } = useDeleteTravelPlan();
 

frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx

@@ -23,6 +23,7 @@ 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";
 import { SEMANTIC_COLORS } from "@styles/tokens";
@@ -42,10 +43,7 @@ const TravelogueDetailPage = () => {
 
   const navigate = useNavigate();
 
-  const daysAndNights =
-    data?.days.length && data?.days.length > 1
-      ? `${data?.days.length - 1}박 ${data?.days.length}일`
-      : "당일치기";
+  const daysAndNights = getDaysAndNights(data?.days);
 
   const { onTransformTravelDetail } = useTravelTransformDetailContext();
   const {

frontend/src/components/pages/travelogueDetail/TravelogueTabContent/PlaceDetailCard/PlaceDetailCard.stories.tsx

@@ -48,7 +48,7 @@ export const WithNoImage: Story = {
   args: {
     index: 1,
     title: "제주도 3박 4일 여행기",
-    imageUrls: [""],
+    imageUrls: [],
     description: "여행지 설명",
   },
 };

frontend/src/components/pages/travelogueDetail/TravelogueTabContent/PlaceDetailCard/PlaceDetailCard.tsx

@@ -21,11 +21,7 @@ const PlaceDetailCard: React.FC<PlaceDetailCardProps> = ({
 
   const renderImage = () => {
     if (imageUrls.length === 0) {
-      return (
-        <S.ImageWrapper>
-          <FallbackImage />
-        </S.ImageWrapper>
-      );
+      return null;
     }
 
     if (imageUrls.length === 1) {

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

@@ -22,6 +22,7 @@
 
 import { useTravelogueDays } from "@hooks/pages/useTravelogueDays";
 import { useDragScroll } from "@hooks/useDragScroll";
+import useInitialTripTitle from "@hooks/useInitialTripTitle";
 import useLeadingDebounce from "@hooks/useLeadingDebounce";
 import useTagSelection from "@hooks/useTagSelection";
 import useUser from "@hooks/useUser";
@@ -38,7 +39,6 @@
 
   const { transformDetail } = useTravelTransformDetailContext();
 
-  const [title, setTitle] = useState("");
   const [thumbnail, setThumbnail] = useState("");
 
   const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -66,6 +66,10 @@
     onDeleteImageUrls,
   } = useTravelogueDays(transformDetail?.days ?? []);
 
+  const initialTitle = useInitialTripTitle({ days: transformDetail?.days, type: "travelogue" });
+
+  const [title, setTitle] = useState(initialTitle);
+
   const thumbnailFileInputRef = useRef<HTMLInputElement>(null);
 
   const handleButtonClick = () => {
@@ -137,7 +141,7 @@
     return () => {
       saveTransformDetail(null);
     };
   }, [user?.accessToken, navigate]);
 
   return (
     <>

frontend/src/hooks/pages/useTravelPlanForm.ts

@@ -3,21 +3,11 @@ import { useState } from "react";
 import { TravelTransformPlaces } from "@type/domain/travelTransform";
 
 import { useTravelPlanDays } from "@hooks/pages/useTravelPlanDays";
+import useInitialTripTitle from "@hooks/useInitialTripTitle";
 
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 
 const useTravelPlanForm = (transformDays: TravelTransformPlaces[]) => {
-  const [title, setTitle] = useState("");
-
-  const onChangeTitle = (inputValue: string) => {
-    const trimmedTitle = inputValue.slice(
-      FORM_VALIDATIONS_MAP.title.minLength,
-      FORM_VALIDATIONS_MAP.title.maxLength,
-    );
-
-    setTitle(trimmedTitle);
-  };
-
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   const onSelectCalendar = (date: Date, handleCloseCalendar: () => void) => {
@@ -36,6 +26,19 @@ const useTravelPlanForm = (transformDays: TravelTransformPlaces[]) => {
     onChangeContent,
   } = useTravelPlanDays(transformDays);
 
+  const initialTitle = useInitialTripTitle({ days: travelPlanDays, type: "travelPlan" });
+
+  const [title, setTitle] = useState(initialTitle);
+
+  const onChangeTitle = (inputValue: string) => {
+    const trimmedTitle = inputValue.slice(
+      FORM_VALIDATIONS_MAP.title.minLength,
+      FORM_VALIDATIONS_MAP.title.maxLength,
+    );
+
+    setTitle(trimmedTitle);
+  };
+
   return {
     state: {
       title,

frontend/src/hooks/useInitialTripTitle.ts

@@ -0,0 +1,29 @@
+import { useMemo } from "react";
+
+import type { TravelTransformPlaces } from "@type/domain/travelTransform";
+
+import { useUserProfile } from "@queries/useUserProfile";
+
+import getDaysAndNights from "@utils/getDaysAndNights";
+
+type TripRecordType = "travelogue" | "travelPlan";
+
+type useInitialTripTitleProps = {
+  days: TravelTransformPlaces[] | undefined;
+  type: TripRecordType;
+};
+
+const useInitialTripTitle = ({ days, type }: useInitialTripTitleProps) => {
+  const { data, status } = useUserProfile();
+
+  return useMemo(() => {
+    const daysAndNights = getDaysAndNights(days);
+
+    const userPrefix = status === "success" ? `${data?.nickname}의 ` : "";
+    const tripType = type === "travelogue" ? "여행기" : "여행 계획";
+
+    return `${userPrefix}${daysAndNights} ${tripType}`;
+  }, [days, data, status, type]);
+};
+
+export default useInitialTripTitle;

frontend/src/hooks/usePreviousPage.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { ROUTE_PATHS_MAP } from "@constants/route";
+
+type PreviousPages = {
+  [key: string]: string;
+};
+
+const usePreviousPage = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [previousPages, setPreviousPages] = useState<PreviousPages>({});
+
+  useEffect(() => {
+    setPreviousPages((prev) => ({
+      ...prev,
+      [location.pathname]: document.referrer,
+    }));
+  }, [location]);
+
+  const goBack = () => {
+    const previousPage = previousPages[location.pathname];
+    const currentPage = location.pathname;
+    const isPreviousPageMy = previousPage?.includes(ROUTE_PATHS_MAP.my);
+    const isCurrentPageLogin = currentPage.includes(ROUTE_PATHS_MAP.login);
+
+    if (isPreviousPageMy && isCurrentPageLogin) {
+      navigate(ROUTE_PATHS_MAP.root);
+    } else {
+      navigate(ROUTE_PATHS_MAP.back);
+    }
+  };
+
+  return goBack;
+};
+
+export default usePreviousPage;

frontend/src/utils/getDaysAndNights.ts

@@ -0,0 +1,6 @@
+import type { TravelTransformPlaces } from "@type/domain/travelTransform";
+
+const getDaysAndNights = (days: TravelTransformPlaces[] | undefined) =>
+  days?.length && days?.length > 1 ? `${days.length - 1}박 ${days.length}일` : "당일치기";
+
+export default getDaysAndNights;