[Feature] - touroot v1.3.2

frontend/package.json

@@ -25,6 +25,7 @@
     "@tanstack/react-query-devtools": "^5.51.1",
     "axios": "^1.7.2",
     "dotenv-webpack": "^8.1.0",
+    "heic2any": "^0.0.4",
     "immer": "^10.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/src/components/pages/landing/FirstPage/FirstPage.styled.ts

@@ -1,4 +1,4 @@
-import { css } from "@emotion/react";
+import { css, keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import theme from "@styles/theme";
@@ -61,3 +61,21 @@ export const Gradient = styled.div`
   height: 20rem;
   background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 50%) 100%);
 `;
+
+const float = keyframes`
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-1rem); }
+  100% { transform: translateY(0px); }
+`;
+
+export const iconStyle = css`
+  position: absolute;
+  bottom: 0;
+  z-index: ${theme.zIndex.toast};
+  padding: ${theme.spacing.m};
+  opacity: 0.5;
+
+  background-color: transparent;
+
+  animation: ${float} 1s ease-in-out infinite;
+`;

frontend/src/components/pages/landing/FirstPage/FirstPage.tsx

@@ -1,9 +1,11 @@
 import { useNavigate } from "react-router-dom";
 
-import { Button, Text } from "@components/common";
+import { Button, Icon, Text } from "@components/common";
 
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
+import { PRIMITIVE_COLORS } from "@styles/tokens";
+
 import { BigTturi } from "@assets/webp";
 
 import { createAnimation } from "../Animation.styled";
@@ -47,6 +49,7 @@ const FirstPage = () => {
       </S.Container>
       <S.Gradient />
       <S.Image src={BigTturi} alt="" />
+      <Icon iconType="down-arrow" size="60" color={PRIMITIVE_COLORS.white} css={S.iconStyle} />
     </S.Layout>
   );
 };

frontend/src/components/pages/landing/LandingPage.styled.ts

@@ -19,11 +19,3 @@ export const firstPageStyle = css`
   top: 0;
   z-index: 1;
 `;
-
-export const secondPageStyle = css`
-  position: absolute;
-  top: 100vh;
-  z-index: 2;
-  width: 100%;
-  transition: transform 0.1s ease-out;
-`;

frontend/src/components/pages/landing/LandingPage.tsx

@@ -5,20 +5,15 @@ import FourthPage from "./FourthPage/FourthPage";
 import * as S from "./LandingPage.styled";
 import SecondPage from "./SecondPage/SecondPage";
 import ThirdPage from "./ThirdPage/ThirdPage";
-import useScrollAnimation from "./hook/useScrollAnimation";
 
 const LandingPage = () => {
-  const [secondPageRef] = useScrollAnimation();
-
   return (
     <S.Layout>
       <S.PageWrapper>
         <div css={S.firstPageStyle}>
           <FirstPage />
         </div>
-        <div css={S.secondPageStyle} ref={secondPageRef}>
-          <SecondPage />
-        </div>
+        <SecondPage />
       </S.PageWrapper>
       <ThirdPage />
       <FourthPage />

frontend/src/components/pages/landing/SecondPage/SecondPage.styled.ts

@@ -1,4 +1,4 @@
-import { css, keyframes } from "@emotion/react";
+import { css } from "@emotion/react";
 
 import theme from "@styles/theme";
 import { PRIMITIVE_COLORS } from "@styles/tokens";
@@ -99,24 +99,6 @@ export const emojiStyle = css`
   z-index: 10;
 `;
 
-const float = keyframes`
-  0% { transform: translateY(0px); }
-  50% { transform: translateY(-1rem); }
-  100% { transform: translateY(0px); }
-`;
-
-export const buttonStyle = css`
-  position: absolute;
-  top: -5.8rem;
-  z-index: ${theme.zIndex.toast};
-  padding: ${theme.spacing.m};
-  opacity: 0.5;
-
-  background-color: transparent;
-
-  animation: ${float} 1s ease-in-out infinite;
-`;
-
 export const primaryText = css`
   color: ${theme.colors.primary};
 `;

frontend/src/components/pages/landing/SecondPage/SecondPage.tsx

@@ -1,6 +1,4 @@
-import { Icon, Text } from "@components/common";
-
-import { PRIMITIVE_COLORS } from "@styles/tokens";
+import { Text } from "@components/common";
 
 import { MainPageImage } from "@assets/webp";
 
@@ -14,7 +12,6 @@ const SecondPage = () => {
 
   return (
     <div css={S.layout}>
-      <Icon iconType="down-arrow" size="60" color={PRIMITIVE_COLORS.white} css={S.buttonStyle} />
       <div css={S.contentContainer}>
         <Box
           ref={registerElement("Box1")}

frontend/src/components/pages/main/MainPage.styled.ts

@@ -125,18 +125,18 @@ export const MainPageList = styled.li`
 export const FetchButton = styled.button`
   position: fixed;
   bottom: 0;
-  left: 0;
+  left: -10rem;
   z-index: ${({ theme }) => theme.zIndex.floating};
   padding: ${({ theme }) => theme.spacing.xs};
 
   background-color: ${PRIMITIVE_COLORS.black};
 
   color: ${PRIMITIVE_COLORS.white};
 
-  transform: translateY(100%);
-  transition: transform 0.3s;
+  transform: translateX(0);
 
   &:focus {
-    transform: translateY(0);
+    transform: translateX(10rem);
+    transition: transform 0.3s;
   }
 `;

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

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useBeforeUnload, useNavigate } from "react-router-dom";
 
 import {
   Accordion,
@@ -18,6 +18,7 @@ import { useTravelPlanInitialization } from "@components/pages/travelPlanEdit/ho
 import TravelPlanDayAccordion from "@components/pages/travelPlanRegister/TravelPlanDayAccordion/TravelPlanDayAccordion";
 
 import useTravelPlanFormState from "@hooks/pages/useTravelPlanFormState/useTravelPlanFormState";
+import usePrompt from "@hooks/usePrompt";
 import useToggle from "@hooks/useToggle";
 
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
@@ -69,6 +70,15 @@ const TravelPlanEditPage = () => {
 
   const navigate = useNavigate();
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
+  useBeforeUnload((event) => {
+    event.preventDefault();
+  });
+
   if (status === "error") {
     const errorMessage =
       error?.message === ERROR_MESSAGE_MAP.api.travelPlanOnlyWriter

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

@@ -1,3 +1,5 @@
+import { useBeforeUnload } from "react-router-dom";
+
 import { useTravelTransformDetailContext } from "@contexts/TravelTransformDetailProvider";
 
 import {
@@ -18,6 +20,7 @@ import useTravelPlanRegister from "@components/pages/travelPlanRegister/hooks/us
 
 import useTravelPlanFormState from "@hooks/pages/useTravelPlanFormState/useTravelPlanFormState";
 import useAuthRedirect from "@hooks/useAuthRedirect";
+import usePrompt from "@hooks/usePrompt";
 import useToggle from "@hooks/useToggle";
 
 import { CYPRESS_DATA_MAP } from "@constants/cypress";
@@ -69,8 +72,22 @@ const TravelPlanRegisterPage = () => {
     handleBottomSheetClose,
   );
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
   useAuthRedirect();
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
+  useBeforeUnload((event) => {
+    event.preventDefault();
+  });
+
   return (
     <>
       <S.Layout>

frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx

@@ -1,3 +1,5 @@
+import { useBeforeUnload } from "react-router-dom";
+
 import {
   Accordion,
   Button,
@@ -18,6 +20,7 @@ import TravelogueDayAccordion from "@components/pages/travelogueRegister/Travelo
 
 import useTravelogueFormState from "@hooks/pages/useTravelogueFormState/useTravelogueFormState";
 import { useDragScroll } from "@hooks/useDragScroll";
+import usePrompt from "@hooks/usePrompt";
 import useToggle from "@hooks/useToggle";
 import useUnmountAnimation from "@hooks/useUnmountAnimation";
 
@@ -78,6 +81,15 @@ const TravelogueEditPage = () => {
     handleInitializeThumbnail,
   });
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
+  useBeforeUnload((event) => {
+    event.preventDefault();
+  });
+
   return (
     <>
       <S.Layout>

frontend/src/components/pages/travelogueRegister/TravelogueMultiImageUpload/hooks/useMultiImageUpload.ts

@@ -12,6 +12,8 @@ interface ImageState {
   isLoading: boolean;
 }
 
+const MAX_FILE_SIZE = 25 * 1024 * 1024; // 25MB in bytes
+
 export const useTravelogueMultiImageUpload = ({
   dayIndex,
   placeIndex,
@@ -71,18 +73,20 @@ export const useTravelogueMultiImageUpload = ({
   };
 
   const handleChangeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (isPaused) {
-      alert(ERROR_MESSAGE_MAP.network);
-      return;
-    }
-
     const files = Array.from(e.target.files as FileList);
 
     if (imageStates.length + files.length > MAX_IMAGE_UPLOAD_COUNT) {
       alert(ERROR_MESSAGE_MAP.imageUpload);
       return;
     }
 
+    const oversizedFile = files.find((file) => file.size > MAX_FILE_SIZE);
+
+    if (oversizedFile) {
+      alert(`파일 '${oversizedFile.name}'이 25MB 제한을 초과했습니다.`);
+      return;
+    }
+
     try {
       addLoadingImageStates(files);
 

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

@@ -1,3 +1,5 @@
+import { useBeforeUnload } from "react-router-dom";
+
 import { useTravelTransformDetailContext } from "@contexts/TravelTransformDetailProvider";
 
 import {
@@ -20,6 +22,7 @@ import useTravelogueRegister from "@components/pages/travelogueRegister/hooks/us
 import useTravelogueFormState from "@hooks/pages/useTravelogueFormState/useTravelogueFormState";
 import useAuthRedirect from "@hooks/useAuthRedirect";
 import { useDragScroll } from "@hooks/useDragScroll";
+import usePrompt from "@hooks/usePrompt";
 import useToggle from "@hooks/useToggle";
 
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
@@ -57,6 +60,15 @@ const TravelogueRegisterPage = () => {
     isEnabledForm,
   } = useTravelogueFormState(transformDetail?.days ?? []);
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
+  useBeforeUnload((event) => {
+    event.preventDefault();
+  });
+
   const payload = {
     title,
     thumbnail: thumbnail || (process.env.DEFAULT_THUMBNAIL_IMAGE ?? ""),

frontend/src/hooks/useModalControl.ts

@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
-import usePressESC from '@hooks/usePressESC';
+import { useEffect } from "react";
+
+import usePressESC from "@hooks/usePressESC";
 
 /**
  * modal control에 관한 훅입니다.
@@ -10,11 +11,26 @@ const useModalControl = <T extends (...args: unknown[]) => void>(isOpen: boolean
   usePressESC(isOpen, onToggle);
 
   useEffect(() => {
-    if (isOpen) document.body.style.overflow = 'hidden';
+    if (isOpen) {
+      const scrollY = window.scrollY;
+
+      document.body.style.position = "fixed";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.overflow = "hidden";
+
+      document.body.style.touchAction = "none";
+
+      return () => {
+        document.body.style.position = "";
+        document.body.style.width = "";
+        document.body.style.top = "";
+        document.body.style.overflow = "auto";
+        document.body.style.touchAction = "";
 
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
+        window.scrollTo(0, scrollY);
+      };
+    }
   }, [isOpen]);
 };
 

frontend/src/hooks/usePrompt.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { BlockerFunction, useBlocker } from "react-router-dom";
+
+const usePrompt = ({ when, message }: { when: boolean | BlockerFunction; message: string }) => {
+  const blocker = useBlocker(when);
+
+  useEffect(() => {
+    if (blocker.state === "blocked") {
+      const proceed = window.confirm(message);
+      if (proceed) {
+        setTimeout(blocker.proceed, 0);
+      } else {
+        blocker.reset();
+      }
+    }
+  }, [blocker, message]);
+
+  useEffect(() => {
+    if (blocker.state === "blocked" && !when) {
+      blocker.reset();
+    }
+  }, [blocker, when]);
+};
+
+export default usePrompt;