fix: 메인 페이지 학교 리스트 가상화 문제 수정

package.json

@@ -36,6 +36,7 @@
     "linkifyjs": "^4.3.2",
     "lucide-react": "^0.479.0",
     "next": "^14.2.35",
+    "next-render-analyzer": "^0.1.2",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.60.0",

src/app/(home)/_ui/UniversityList/index.tsx

@@ -29,9 +29,9 @@ const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex justify-between">
-        <span className="typo-sb-5 text-k-700">전체 학교 리스트</span>
+        <span className="text-k-700 typo-sb-5">전체 학교 리스트</span>
         <Link href="/university">
-          <span className="flex items-center gap-1 typo-sb-9 text-k-500">
+          <span className="flex items-center gap-1 text-k-500 typo-sb-9">
             더보기
             <IconDirectionRight className="h-4 w-4" />
           </span>
@@ -49,7 +49,7 @@ const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => {
           background: "white",
         }}
       />
-      <UniversityCards colleges={previewUniversities} showCapacity={false} />
+      <UniversityCards colleges={previewUniversities} showCapacity={false} enableVirtualization={false} />
     </div>
   );
 };

src/components/university/UniversityCards/index.tsx

@@ -4,22 +4,43 @@ import { useRef } from "react";
 
 import clsx from "clsx";
 
-import { useVirtualizer } from "@tanstack/react-virtual";
-
 import UniversityCard from "../../ui/UniverSityCard";
 
 import { ListUniversity } from "@/types/university";
 
+import { useVirtualizer } from "@tanstack/react-virtual";
+
 type UniversityCardsProps = {
   colleges: ListUniversity[];
   style?: React.CSSProperties;
   className?: string;
   showCapacity?: boolean;
+  enableVirtualization?: boolean;
 };
 
 const ITEM_HEIGHT = 101;
 
-const UniversityCards = ({ colleges, style, className, showCapacity = true }: UniversityCardsProps) => {
+const UniversityCards = ({
+  colleges,
+  style,
+  className,
+  showCapacity = true,
+  enableVirtualization = true,
+}: UniversityCardsProps) => {
+  // 가상화가 비활성화된 경우 일반 렌더링
+  if (!enableVirtualization) {
+    return (
+      <div className={clsx("flex flex-col gap-2.5", className)} style={style}>
+        {colleges.map((college) => (
+          <div key={college.id} className="pb-2.5">
+            <UniversityCard university={college} showCapacity={showCapacity} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // 가상화 사용 (기존 로직)
   const parentRef = useRef<HTMLDivElement>(null);
 
   const virtualizer = useVirtualizer({
@@ -30,11 +51,7 @@ const UniversityCards = ({ colleges, style, className, showCapacity = true }: Un
   });
 
   return (
-    <div
-      ref={parentRef}
-      className={clsx("h-[calc(100vh-200px)] overflow-auto", className)}
-      style={style}
-    >
+    <div ref={parentRef} className={clsx("h-[calc(100vh-200px)] overflow-auto", className)} style={style}>
       <div
         style={{
           height: `${virtualizer.getTotalSize()}px`,