Merge pull request #13 from solutionchallenge/setting/motion

add: frame-motion library

Author: yoonjoohye

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.6.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.4.1",

package.json

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
 import OnboardingConcernPage from "./services/onboarding/additional/concern";
 import OnboardingEmotionPage from "./services/onboarding/additional/emotion";
 import OnboardingCompletePage from "./services/onboarding/additional/complete";
@@ -7,12 +7,17 @@ import NotFoundPage from "./services/error/404";
 import OnboardingBasicPage from "./services/onboarding/basic";
 import LoginPage from "./services/auth/login";
 import Layout from "./layout.tsx";
+import { AnimatePresence } from "framer-motion";
+import { useNavigationDirection } from "./hooks/animation/useNavigationDirection.ts";
 
 function App() {
+  const location = useLocation();
+  const direction = useNavigationDirection();
+
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route element={<Layout />}>
+    <AnimatePresence mode="wait">
+      <Routes location={location} key={location.pathname}>
+        <Route element={<Layout direction={direction} />}>
           <Route index element={<HomePage />} />
           <Route path="onboarding">
             <Route index path="*" element={<NotFoundPage />} />
@@ -28,7 +33,7 @@ function App() {
         </Route>
         <Route path="/login" element={<LoginPage />} />
       </Routes>
-    </BrowserRouter>
+    </AnimatePresence>
   );
 }
 

src/App.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+export function useNavigationDirection() {
+  const location = useLocation();
+  const [direction, setDirection] = useState<"forward" | "backward">("forward");
+  const historyStack = useRef<string[]>([]);
+
+  useEffect(() => {
+    const currentKey = location.key;
+
+    const currentIndex = historyStack.current.indexOf(currentKey);
+
+    if (currentIndex === -1) {
+      // 새 페이지 → 앞으로 이동
+      historyStack.current.push(currentKey);
+      setDirection("forward");
+    } else {
+      // 기존 페이지 → 뒤로 이동
+      historyStack.current = historyStack.current.slice(0, currentIndex + 1);
+      setDirection("backward");
+    }
+  }, [location.key]);
+
+  return direction;
+}

src/hooks/animation/useNavigationDirection.ts

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 
-function useOnboardingAdditional() {
+export function useOnboardingAdditional() {
   const navigate = useNavigate();
 
   const goEmotionPage = () => {
@@ -14,11 +14,10 @@ function useOnboardingAdditional() {
   const goBackPage = () => {
     navigate(-1);
   };
-  const goHome = () => {
+  const goHomePage = () => {
     // Todo api 성공 이후 보내기
-    navigate("/onboarding/additional/complete");
+    navigate("/");
   };
 
-  return { goEmotionPage, goCompletePage, goHome, goBackPage };
+  return { goEmotionPage, goCompletePage, goHomePage, goBackPage };
 }
-export default useOnboardingAdditional;

src/hooks/onboarding/useOnboardingAdditional.ts

@@ -2,19 +2,40 @@ import GlobalNavigation from "./commons/navigation/GlobalNavigation";
 import BottomNavigation from "./commons/navigation/BottomNavigation";
 import { Navigate, Outlet, useLocation } from "react-router-dom";
 import { useAuthStore } from "./store/auth";
+import { motion } from "framer-motion";
 
-function Layout() {
+function Layout({ direction }: { direction: "forward" | "backward" }) {
   const { isLoggedIn } = useAuthStore();
   const location = useLocation();
 
   if (!isLoggedIn) {
     return <Navigate to="/login" state={{ from: location }} replace />;
   }
 
+  const variants = {
+    forward: {
+      initial: { x: 100, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      exit: { x: -100, opacity: 0 },
+    },
+    backward: {
+      initial: { x: -100, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      exit: { x: 100, opacity: 0 },
+    },
+  };
+
   return (
     <>
       <GlobalNavigation />
-      <Outlet />
+      <motion.div
+        initial={variants[direction].initial}
+        animate={variants[direction].animate}
+        exit={variants[direction].exit}
+        transition={{ duration: 0.3 }}
+      >
+        <Outlet />
+      </motion.div>
       <BottomNavigation />
     </>
   );

src/layout.tsx

@@ -2,6 +2,7 @@ import { Profiler, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./styles/reset.css";
 import App from "./App.tsx";
+import { BrowserRouter } from "react-router-dom";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
@@ -25,7 +26,9 @@ createRoot(document.getElementById("root")!).render(
         );
       }}
     >
-      <App />
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </Profiler>
   </StrictMode>
 );

src/main.tsx

@@ -1,10 +1,10 @@
 import OnboardingAdditionalLayout from "../layout.tsx";
 import { useAuthStore } from "../../../../store/auth";
-import useOnboardingAdditional from "../../../../hooks/onboarding/useOnboardingAdditional.ts";
+import { useOnboardingAdditional } from "../../../../hooks/onboarding/useOnboardingAdditional.ts";
 
 function OnboardingCompletePage() {
   const { user } = useAuthStore();
-  const { goHome } = useOnboardingAdditional();
+  const { goHomePage } = useOnboardingAdditional();
 
   return (
     <OnboardingAdditionalLayout
@@ -22,7 +22,7 @@ function OnboardingCompletePage() {
       }
       button={{
         name: "Start",
-        onPress: goHome,
+        onPress: goHomePage,
       }}
     >
       image

src/services/onboarding/additional/complete/index.tsx

@@ -5,7 +5,7 @@ import {
   CONCERN,
   useOnboardingConcernStore,
 } from "../../../../store/onboarding";
-import useOnboardingAdditional from "../../../../hooks/onboarding/useOnboardingAdditional.ts";
+import { useOnboardingAdditional } from "../../../../hooks/onboarding/useOnboardingAdditional.ts";
 
 function OnboardingConcernPage() {
   const { user } = useAuthStore();

src/services/onboarding/additional/concern/index.tsx

@@ -1,7 +1,7 @@
 import OnboardingAdditionalLayout from "../layout.tsx";
 import { useAuthStore } from "../../../../store/auth";
 import { useOnboardingEmotionStore } from "../../../../store/onboarding";
-import useOnboardingAdditional from "../../../../hooks/onboarding/useOnboardingAdditional.ts";
+import { useOnboardingAdditional } from "../../../../hooks/onboarding/useOnboardingAdditional.ts";
 
 function OnboardingEmotionPage() {
   const { emotion } = useOnboardingEmotionStore();