Merge pull request #223 from manNomi/refactor/PopularUniversitySection

refactor : PopularUniversitySection

Author: manNomi

next.config.mjs

@@ -13,6 +13,8 @@ const nextConfig = {
       "d1q5o8tzvz4j3d.cloudfront.net",
       "d23lwokhcc3r0c.cloudfront.net",
     ],
+    formats: ["image/avif", "image/webp"],
+    deviceSizes: [360, 640, 768, 1024, 1280],
   },
   // 폰트 최적화 설정
   optimizeFonts: true,

src/app/_home/_ui/NewsSection/index.tsx

@@ -14,7 +14,6 @@ export type NewsSectionProps = {
 const NewsSection = ({ newsList }: NewsSectionProps) => {
   const [visible, setVisible] = useState(false);
   const sectionRef = useRef<HTMLDivElement | null>(null);
-
   useEffect(() => {
     if (!sectionRef.current) return;
 

src/app/_home/_ui/PopularUniversitySection/index.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+import { Suspense } from "react";
 
 import { ListUniversity } from "@/types/university";
 
@@ -8,10 +9,14 @@ type PopularUniversitySectionProps = {
 };
 
 const PopularUniversitySection = ({ universities }: PopularUniversitySectionProps) => {
+  const aboveFold = universities.slice(0, 3);
+  const belowFold = universities.slice(3);
+
   return (
     <div className="overflow-x-auto">
       <div className="flex gap-2">
-        {universities.map((university, index) => (
+        {/* 첫 4장은 즉시 전송 – LCP 후보 */}
+        {aboveFold.map((university, index) => (
           <Link key={university.id} href={`/university/${university.id}`}>
             <div className="relative w-[153px]">
               <div className="relative w-[153px]">
@@ -25,9 +30,9 @@ const PopularUniversitySection = ({ universities }: PopularUniversitySectionProp
                   width={153}
                   height={120}
                   alt={`${university.koreanName || "대학교"} 배경 이미지`}
-                  priority={index < 3} // 상위 3개는 우선 로딩
-                  loading={index >= 3 ? "lazy" : "eager"}
-                  fetchPriority={index === 0 ? "high" : index < 3 ? "high" : "auto"}
+                  priority={index === 0} // 첫 카드만 LCP 후보
+                  loading={index === 0 ? "eager" : "lazy"}
+                  fetchPriority={index === 0 ? "high" : "low"}
                   sizes="153px"
                   unoptimized={false}
                 />
@@ -38,9 +43,50 @@ const PopularUniversitySection = ({ universities }: PopularUniversitySectionProp
             </div>
           </Link>
         ))}
+
+        {/* 나머지는 뒤늦게 HTML 스트림으로 전송 */}
+        {belowFold.length > 0 && (
+          <Suspense fallback={null}>
+            <PopularUniversitiesBelowFold universities={belowFold} />
+          </Suspense>
+        )}
       </div>
     </div>
   );
 };
 
+const PopularUniversitiesBelowFold = ({ universities }: { universities: ListUniversity[] }) => {
+  return (
+    <>
+      {universities.map((university) => (
+        <Link key={university.id} href={`/university/${university.id}`}>
+          <div className="relative w-[153px]">
+            <div className="relative w-[153px]">
+              <Image
+                className="h-[120px] rounded-lg object-cover"
+                src={
+                  university.backgroundImageUrl
+                    ? `${process.env.NEXT_PUBLIC_IMAGE_URL}/${university.backgroundImageUrl}`
+                    : "/images/default-university.jpg"
+                }
+                width={153}
+                height={120}
+                alt={`${university.koreanName || "대학교"} 배경 이미지`}
+                priority={false}
+                loading="lazy"
+                fetchPriority="low"
+                sizes="153px"
+                unoptimized={false}
+              />
+            </div>
+            <div className="absolute bottom-[9px] left-[10px] z-10 text-sm font-semibold leading-[160%] tracking-[0.15px] text-white">
+              {university.koreanName}
+            </div>
+          </div>
+        </Link>
+      ))}
+    </>
+  );
+};
+
 export default PopularUniversitySection;