プリフェッチ実装（#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
2026-02-11 13:27:28 +09:00
parent 1a776e348a
commit eb975e5301
30 changed files with 517 additions and 488 deletions
@@ -21,53 +21,50 @@ export default (({ posts, onClick }: Props) => {
  const cardRef = useRef<HTMLDivElement> (null)

  return (
-      <>
-	<div className="flex flex-wrap gap-6 p-4">
-	  {posts.map ((post, i) => {
-	    const id2 = `page-${ post.id }`
-	    const layoutId = id2
+      <div className="flex flex-wrap gap-6 p-4">
+	{posts.map ((post, i) => {
+	  const sharedId = `page-${ post.id }`
+	  const layoutId = sharedId

-	    return (
-		<PrefetchLink
-		    to={`/posts/${ post.id }`}
-		    key={post.id}
-		    className="w-40 h-40"
-		    state={{ sharedId: `page-${ post.id }` }}
-		    onClick={e => {
-		      const sharedId = `page-${ post.id }`
-		      setForLocationKey (location.key, sharedId)
-		      onClick?.(e)
-		    }}>
-		  <motion.div
-		      ref={cardRef}
-		      layoutId={layoutId}
-		      className="w-full h-full overflow-hidden rounded-xl shadow
-				 transform-gpu will-change-transform"
-		      whileHover={{ scale: 1.02 }}
-		      onLayoutAnimationStart={() => {
-			if (cardRef.current)
-			  {
-			    cardRef.current.style.position = 'relative'
-			    cardRef.current.style.zIndex = '9999'
-			  }
-		      }}
-		      onLayoutAnimationComplete={() => {
-			if (cardRef.current)
-			  {
-			    cardRef.current.style.zIndex = ''
-			    cardRef.current.style.position = ''
-			  }
-		      }}
-		      transition={{ type: 'spring', stiffness: 500, damping: 40, mass: .5 }}>
-		    <img src={post.thumbnail || post.thumbnailBase || undefined}
-			 alt={post.title || post.url}
-			 title={post.title || post.url || undefined}
-			 loading={i < 12 ? 'eager' : 'lazy'}
-			 decoding="async"
-			 className="object-cover w-full h-full"/>
-		  </motion.div>
-		</PrefetchLink>)
-	  })}
-	</div>
-      </>)
+	  return (
+	      <PrefetchLink
+		  to={`/posts/${ post.id }`}
+		  key={post.id}
+		  className="w-40 h-40"
+		  state={{ sharedId }}
+		  onClick={e => {
+		    setForLocationKey (location.key, sharedId)
+		    onClick?.(e)
+		  }}>
+		<motion.div
+		    ref={cardRef}
+		    layoutId={layoutId}
+		    className="w-full h-full overflow-hidden rounded-xl shadow
+			       transform-gpu will-change-transform"
+		    whileHover={{ scale: 1.02 }}
+		    onLayoutAnimationStart={() => {
+		      if (!(cardRef.current))
+			return
+
+		      cardRef.current.style.position = 'relative'
+		      cardRef.current.style.zIndex = '9999'
+		    }}
+		    onLayoutAnimationComplete={() => {
+		      if (!(cardRef.current))
+			return 
+
+		      cardRef.current.style.zIndex = ''
+		      cardRef.current.style.position = ''
+		    }}
+		    transition={{ type: 'spring', stiffness: 500, damping: 40, mass: .5 }}>
+		  <img src={post.thumbnail || post.thumbnailBase || undefined}
+		       alt={post.title || post.url}
+		       title={post.title || post.url || undefined}
+		       loading={i < 12 ? 'eager' : 'lazy'}
+		       decoding="async"
+		       className="object-cover w-full h-full"/>
+		</motion.div>
+	      </PrefetchLink>)
+	})}
+      </div>)
 }) satisfies FC<Props>