feat: 라우트 페이지간 전환 애니메이션 추가

package.json

@@ -17,11 +17,12 @@
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "hangul-js": "^0.2.6",
-        "primereact": "^10.8.2",
         "html2canvas": "^1.4.1",
+        "primereact": "^10.8.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.26.1",
+        "react-transition-group": "^4.4.5",
         "zustand": "^4.5.5"
     },
     "devDependencies": {

src/Router.tsx

@@ -1,28 +1,32 @@
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 
 import { RootLayout } from "./components/layout/RootLayout";
+import AnalyticsPage from "./pages/AnalyticsPage";
 import HomePage from "./pages/HomePage";
 import LoadingPage from "./pages/ResultLoading";
 import ResultPage from "./pages/ResultPage";
-
 import ResultShare from "./pages/ResultShare";
 import SelectPage from "./pages/SelectPage";
-
-import AnalyticsPage from "./pages/AnalyticsPage";
-
+import "@/transition/fade-slide.css";
 
 export const Router = () => {
-    return (
-        <Routes>
-            <Route path="/" element={<RootLayout />}>
-                <Route index element={<HomePage />}></Route>
-                <Route path="/loading" element={<LoadingPage />} />
-                <Route path="/result" element={<ResultPage />}></Route>
-                <Route path="/share" element={<ResultShare />}></Route>
-                <Route path="/select" element={<SelectPage />}></Route>
-                <Route path="/analytics" element={<AnalyticsPage />}></Route>
+    const location = useLocation();
 
-            </Route>
-        </Routes>
+    return (
+        <TransitionGroup>
+            <CSSTransition key={location.key} timeout={500} classNames="fade-slide">
+                <Routes location={location}>
+                    <Route path="/" element={<RootLayout />}>
+                        <Route index element={<HomePage />}></Route>
+                        <Route path="/loading" element={<LoadingPage />} />
+                        <Route path="/result" element={<ResultPage />}></Route>
+                        <Route path="/share" element={<ResultShare />}></Route>
+                        <Route path="/select" element={<SelectPage />}></Route>
+                        <Route path="/analytics" element={<AnalyticsPage />}></Route>
+                    </Route>
+                </Routes>
+            </CSSTransition>
+        </TransitionGroup>
     );
 };

src/transition/fade-slide.css

@@ -0,0 +1,32 @@
+/* 정방향 || 들어오는 효과 */
+.fade-slide-enter {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.fade-slide-enter-active {
+    position: absolute;
+    opacity: 1;
+    transform: translateX(0px);
+    transition: all 500ms cubic-bezier(0.27, 0.02, 0.26, 0.99) 100ms;
+}
+
+.fade-slide-enter-done {
+    opacity: 1;
+}
+
+/* 정방향 || 사라지는 효과 */
+.fade-slide-exit {
+    opacity: 1;
+    transform: translateX(0px);
+}
+
+.fade-slide-exit-active {
+    opacity: 0;
+    transform: translateX(-70px);
+    transition: all 400ms cubic-bezier(0.27, 0.02, 0.26, 0.99);
+}
+
+.fade-slide-exit-done {
+    opacity: 0;
+}