feat: 첫img에 fetchPriority="high" 적용

Author: JeonSuna

src/features/home/ui/PostCardList.tsx

@@ -52,9 +52,9 @@ const PostCardList = ({ selectedTab }: PostCardListProps) => {
   return (
     <>
       <ul className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
-        {posts.map((item: CardItemProps) => {
+        {posts.map((item: CardItemProps, index: number) => {
           const postId = item.postId ?? item.id;
-          return <CardItem key={postId} {...item} id={postId} />;
+          return <CardItem key={postId} {...item} id={postId} priority={index === 0 && selectedTab === 0} />;
         })}
       </ul>
       {activeQuery?.isFetchingNextPage && <Loading />}

src/shared/ui/CardItem.tsx

@@ -24,6 +24,7 @@ interface CardItemProps {
   viewCount: number;
   keywords?: string[];
   shortSummary: string;
+  priority?: boolean;
 }
 
 export const CardItem = forwardRef<HTMLLIElement, CardItemProps>(
@@ -39,6 +40,7 @@ export const CardItem = forwardRef<HTMLLIElement, CardItemProps>(
       publishedAt,
       isBookmarked,
       shortSummary,
+      priority = false,
     },
     ref,
   ) => {
@@ -116,8 +118,7 @@ export const CardItem = forwardRef<HTMLLIElement, CardItemProps>(
                   src={thumbnailUrl}
                   alt={`{${title} - 썸네일}`}
                   className=" w-full h-full object-cover"
-                  // loading="lazy"
-                  // decoding="async"
+                  fetchPriority={priority ? "high" : "auto"}
                 />
               ) : (
                 <p className="line-clamp-9 overflow-hidden text-clip min-h-45 text-sm">