アニメーション（#139） (#252)

#139 #139 #139 #139 #139 Merge branch 'feature/140' into feature/139 Merge remote-tracking branch 'origin/main' into feature/139 #140 Merge remote-tracking branch 'origin/main' into feature/140 Merge remote-tracking branch 'origin/main' into feature/140 #140 ぼちぼち Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 #139 アニメーション Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #252
2026-02-05 23:25:27 +09:00
parent f3cd108b2e
commit 797e67ac37
22 changed files with 810 additions and 311 deletions
@@ -1,8 +1,14 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
+import { AnimatePresence, LayoutGroup } from 'framer-motion'
 import { useEffect, useState } from 'react'
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
+import { BrowserRouter,
+	 Navigate,
+	 Route,
+	 Routes,
+	 useLocation } from 'react-router-dom'

+import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import { Toaster } from '@/components/ui/toaster'
 import { API_BASE_URL } from '@/config'
@@ -21,11 +27,48 @@ import WikiHistoryPage from '@/pages/wiki/WikiHistoryPage'
 import WikiNewPage from '@/pages/wiki/WikiNewPage'
 import WikiSearchPage from '@/pages/wiki/WikiSearchPage'

-import type { FC } from 'react'
+import type { Dispatch, FC, SetStateAction } from 'react'

 import type { User } from '@/types'


+const RouteTransitionWrapper = ({ user, setUser }: {
+    user:     User | null
+    setUser:  Dispatch<SetStateAction<User | null>> }) => {
+  const location = useLocation ()
+
+  return (
+      <LayoutGroup id="gallery-shared">
+	<AnimatePresence mode="wait">
+	  <Routes location={location} key={location.pathname}>
+	    <Route path="/" element={<Navigate to="/posts" replace/>}/>
+	    <Route path="/posts" element={<PostListPage/>}/>
+	    <Route path="/posts/new" element={<PostNewPage user={user}/>}/>
+	    <Route path="/posts/:id" element={<PostDetailRoute user={user}/>}/>
+	    <Route path="/posts/changes" element={<PostHistoryPage/>}/>
+	    <Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
+	    <Route path="/wiki" element={<WikiSearchPage/>}/>
+	    <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
+	    <Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>
+	    <Route path="/wiki/:id/edit" element={<WikiEditPage user={user}/>}/>
+	    <Route path="/wiki/:id/diff" element={<WikiDiffPage/>}/>
+	    <Route path="/wiki/changes" element={<WikiHistoryPage/>}/>
+	    <Route path="/users/settings" element={<SettingPage user={user} setUser={setUser}/>}/>
+	    <Route path="/settings" element={<Navigate to="/users/settings" replace/>}/>
+	    <Route path="*" element={<NotFound/>}/>
+	  </Routes>
+	</AnimatePresence>
+      </LayoutGroup>)
+}
+
+
+const PostDetailRoute = ({ user }: { user: User | null }) => {
+  const location = useLocation ()
+  const key = location.pathname
+  return <PostDetailPage key={key} user={user}/>
+}
+
+
 export default (() => {
  const [user, setUser] = useState<User | null> (null)
  const [status, setStatus] = useState (200)
@@ -72,27 +115,14 @@ export default (() => {
  }

  return (
-      <BrowserRouter>
-	<div className="flex flex-col h-screen w-screen">
-	  <TopNav user={user}/>
-	  <Routes>
-	    <Route path="/" element={<Navigate to="/posts" replace/>}/>
-	    <Route path="/posts" element={<PostListPage/>}/>
-	    <Route path="/posts/new" element={<PostNewPage user={user}/>}/>
-	    <Route path="/posts/:id" element={<PostDetailPage user={user}/>}/>
-	    <Route path="/posts/changes" element={<PostHistoryPage/>}/>
-	    <Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
-	    <Route path="/wiki" element={<WikiSearchPage/>}/>
-	    <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
-	    <Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>
-	    <Route path="/wiki/:id/edit" element={<WikiEditPage user={user}/>}/>
-	    <Route path="/wiki/:id/diff" element={<WikiDiffPage/>}/>
-	    <Route path="/wiki/changes" element={<WikiHistoryPage/>}/>
-	    <Route path="/users/settings" element={<SettingPage user={user} setUser={setUser}/>}/>
-	    <Route path="/settings" element={<Navigate to="/users/settings" replace/>}/>
-	    <Route path="*" element={<NotFound/>}/>
-	  </Routes>
-	</div>
-	<Toaster/>
-      </BrowserRouter>)
+      <>
+	<RouteBlockerOverlay/>
+	<BrowserRouter>
+	  <div className="flex flex-col h-screen w-screen">
+	    <TopNav user={user}/>
+	    <RouteTransitionWrapper user={user} setUser={setUser}/>
+	  </div>
+	  <Toaster/>
+	</BrowserRouter>
+      </>)
 }) satisfies FC