プリフェッチ実装（#140） (#256)

Merge branch 'main' into feature/140

#140

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

#140

#140

#140

#140

#140

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

#140

#140

#140

#140

#140

#140

#140

#140

#140

#140

#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

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

frontend/src/pages/posts/PostDetailPage.tsx

@@ -91,67 +91,65 @@ export default (({ user }: Props) => {
 		       : 'bg-gray-500 hover:bg-gray-600')
 
   return (
-      <>
-	<div className="md:flex md:flex-1">
-	  <Helmet>
-	    {(post?.thumbnail || post?.thumbnailBase) && (
-		<meta name="thumbnail" content={post.thumbnail || post.thumbnailBase}/>)}
-	    {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
-	  </Helmet>
+      <div className="md:flex md:flex-1">
+	<Helmet>
+	  {(post?.thumbnail || post?.thumbnailBase) && (
+	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase}/>)}
+	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
+	</Helmet>
 
-	  <div className="hidden md:block">
-	    <TagDetailSidebar post={post ?? null}/>
-	  </div>
-
-	  <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}
-			  className={cn ('text-white', viewedClass)}>
-		    {post.viewed ? '閲覧済' : '未閲覧'}
-		  </Button>
-		  <TabGroup>
-		    <Tab name="関聯">
-		      {post.related.length > 0
-		       ? <PostList posts={post.related}/>
-		       : 'まだないよ（笑）'}
-		    </Tab>
-		    {['admin', 'member'].some (r => user?.role === r) && (
-			<Tab name="編輯">
-			  <PostEditForm
-			      post={post}
-			      onSave={newPost => {
-				qc.setQueryData (postsKeys.show (postId),
-						 (prev: any) => newPost ?? prev)
-				qc.invalidateQueries ({ queryKey: postsKeys.root })
-				toast ({ description: '更新しました．' })
-			      }}/>
-			</Tab>)}
-		  </TabGroup>
-		</>)
-	     : 'Loading...'}
-	  </MainArea>
-
-	  <div className="md:hidden">
-	    <TagDetailSidebar post={post ?? null}/>
-	  </div>
+	<div className="hidden md:block">
+	  <TagDetailSidebar post={post ?? null}/>
 	</div>
-      </>)
+
+	<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}
+			className={cn ('text-white', viewedClass)}>
+		  {post.viewed ? '閲覧済' : '未閲覧'}
+		</Button>
+		<TabGroup>
+		  <Tab name="関聯">
+		    {post.related.length > 0
+		     ? <PostList posts={post.related}/>
+		     : 'まだないよ（笑）'}
+		  </Tab>
+		  {['admin', 'member'].some (r => user?.role === r) && (
+		      <Tab name="編輯">
+			<PostEditForm
+			    post={post}
+			    onSave={newPost => {
+			      qc.setQueryData (postsKeys.show (postId),
+					       (prev: any) => newPost ?? prev)
+			      qc.invalidateQueries ({ queryKey: postsKeys.root })
+			      toast ({ description: '更新しました．' })
+			    }}/>
+		      </Tab>)}
+		</TabGroup>
+	      </>)
+	   : 'Loading...'}
+	</MainArea>
+
+	<div className="md:hidden">
+	  <TagDetailSidebar post={post ?? null}/>
+	</div>
+      </div>)
 }) satisfies FC<Props>