投稿検索ページ（#206） (#274)

#206 エラー修正

#206 updated_at の並び順修正

Merge remote-tracking branch 'origin/main' into feature/206

Merge branch 'main' into feature/206

Merge branch 'main' into feature/206

Merge branch 'main' into feature/206

#206

#206

#206

#206

#206

#206 タグ補完追加

#206

#206

#206

#206

#206

Merge remote-tracking branch 'origin/main' into feature/206

#206

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #274

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -1,4 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
+import { motion } from 'framer-motion'
+import { useEffect } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
@@ -10,7 +12,7 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPostChanges } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
-import { cn } from '@/lib/utils'
+import { cn, dateString } from '@/lib/utils'
 
 import type { FC } from 'react'
 
@@ -31,6 +33,10 @@ export default (() => {
   const changes = data?.changes ?? []
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
+  useEffect (() => {
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
+  }, [location.search])
+
   return (
       <MainArea>
 	<Helmet>
@@ -72,10 +78,17 @@ export default (() => {
 			      <td className="align-top p-2 bg-white dark:bg-[#242424] border-r"
 				  rowSpan={rowsCnt}>
 				<PrefetchLink to={`/posts/${ change.post.id }`}>
-				  <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
-				       alt={change.post.title || change.post.url}
-				       title={change.post.title || change.post.url || undefined}
-				       className="w-40"/>
+				  <motion.div
+				      layoutId={`page-${ change.post.id }`}
+				      transition={{ type: 'spring',
+						    stiffness: 500,
+						    damping: 40,
+						    mass: .5 }}>
+				    <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
+					 alt={change.post.title || change.post.url}
+					 title={change.post.title || change.post.url || undefined}
+					 className="w-40"/>
+				  </motion.div>
 				</PrefetchLink>
 			      </td>)}
 			  <td className="p-2">
@@ -83,12 +96,14 @@ export default (() => {
 			    {`を${ change.changeType === 'add' ? '記載' : '消除' }`}
 			  </td>
 			  <td className="p-2">
-			    {change.user ? (
+			    {change.user
+			     ? (
 				<PrefetchLink to={`/users/${ change.user.id }`}>
 				  {change.user.name}
-				</PrefetchLink>) : 'bot 操作'}
+				</PrefetchLink>)
+			     : 'bot 操作'}
 			    <br/>
-			    {change.timestamp}
+			    {dateString (change.timestamp)}
 			  </td>
 			</tr>)
 		  })}