設定画面 (#34) (#397)

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

frontend/src/pages/posts/PostDetailPage.tsx

@@ -15,6 +15,7 @@ import { SITE_TITLE } from '@/config'
 import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { canEditContent } from '@/lib/users'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
@@ -29,7 +30,17 @@ type Props = { user: User | null }
 
 const PostDetailPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
+  const behaviourSettings = useClientBehaviourSettings ()
+  const thumbnailMode = behaviourSettings.thumbnailMode ?? 'normal'
+  const animationMode = behaviourSettings.animation ?? 'normal'
   const { id } = useParams ()
+  const heroLayoutId = animationMode === 'off' ? undefined : `page-${ id }`
+  const heroTransition =
+      animationMode === 'off'
+      ? { duration: 0 }
+      : animationMode === 'reduced'
+	? { duration: .08, ease: 'linear' as const }
+	: { duration: .2, ease: 'easeOut' as const }
   const postId = String (id ?? '')
   const postKey = postsKeys.show (postId)
 
@@ -134,17 +145,19 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		      </div>)
 		})}
 
-		{(post.thumbnail || post.thumbnailBase) && (
+		{thumbnailMode !== 'off' && (post.thumbnail || post.thumbnailBase) && (
 		    <motion.div
-			layoutId={`page-${ id }`}
+			layoutId={heroLayoutId}
 			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' }}>
+			transition={heroTransition}>
 		      <img src={post.thumbnail || post.thumbnailBase || undefined}
 			   alt={post.title || post.url}
 			   title={post.title || post.url || undefined}
+			   loading={thumbnailMode === 'light' ? 'lazy' : 'eager'}
+			   decoding="async"
 			   className="object-cover w-full h-full"/>
 		    </motion.div>)}