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

frontend/src/pages/posts/PostDetailPage.tsx

@@ -1,12 +1,13 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
-import PostList from '@/components/PostList'
-import TagDetailSidebar from '@/components/TagDetailSidebar'
 import PostEditForm from '@/components/PostEditForm'
 import PostEmbed from '@/components/PostEmbed'
+import PostList from '@/components/PostList'
+import TagDetailSidebar from '@/components/TagDetailSidebar'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
@@ -72,6 +73,8 @@ export default (({ user }: Props) => {
   }, [errorFlg, error])
 
   useEffect (() => {
+    scroll (0, 0)
+
     setStatus (200)
   }, [id])
 
@@ -99,10 +102,24 @@ export default (({ user }: Props) => {
 	  <TagDetailSidebar post={post ?? null}/>
 	</div>
 
-	<MainArea>
+	<MainArea className="relative">
 	  {post
 	   ? (
 	      <>
+		{(post.thumbnail || post.thumbnailBase) && (
+		    <motion.div
+			layoutId={`page-${ id }`}
+			className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
+				   overflow-hidden rounded-xl pointer-events-none z-50"
+			initial={{ opacity: 1 }}
+			animate={{ opacity: 0 }}
+			transition={{ duration: .2, ease: 'easeOut' }}>
+		      <img src={post.thumbnail || post.thumbnailBase}
+			   alt={post.title || post.url}
+			   title={post.title || post.url || undefined}
+			   className="object-cover w-full h-full"/>
+		    </motion.div>)}
+
 		<PostEmbed post={post}/>
 		<Button onClick={() => changeViewedFlg.mutate ()}
 			disabled={changeViewedFlg.isPending}