Merge pull request #296 from manNomi/feat/static-university-page

feat : 대학정보 페이지 정적 변경 및 가상화 적용

Author: manNomi

src/app/university/[id]/page.tsx

@@ -5,25 +5,29 @@ import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 
 import UniversityDetail from "./UniversityDetail";
 
-import { University } from "@/types/university";
-
 import { getUniversityDetail } from "@/api/university/server/getUniversityDetail";
+import { getAllUniversities } from "@/api/university/server/getSearchUniversitiesByText";
+
+export const revalidate = false;
 
-export const revalidate = 60; // ISR 재생성 주기 설정
+export async function generateStaticParams() {
+  const universities = await getAllUniversities();
+
+  return universities.map((university) => ({
+    id: String(university.id),
+  }));
+}
 
 type MetadataProps = {
   params: Promise<{ id: string }>;
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
 export async function generateMetadata(
-  { params, searchParams }: MetadataProps,
-  parent: ResolvingMetadata,
+  { params }: MetadataProps,
+  _parent: ResolvingMetadata,
 ): Promise<Metadata> {
-  // read route params
   const { id } = await params;
 
-  // fetch data
   const universityData = await getUniversityDetail(Number(id));
 
   if (!universityData) {

src/components/university/UniversityCards/index.tsx

@@ -1,5 +1,11 @@
+"use client";
+
+import { useRef } from "react";
+
 import clsx from "clsx";
 
+import { useVirtualizer } from "@tanstack/react-virtual";
+
 import UniversityCard from "../../ui/UniverSityCard";
 
 import { ListUniversity } from "@/types/university";
@@ -11,11 +17,51 @@ type UniversityCardsProps = {
   showCapacity?: boolean;
 };
 
-const UniversityCards = ({ colleges, style, className, showCapacity = true }: UniversityCardsProps) => (
-  <div className={clsx("flex flex-col gap-2.5", className)} style={style}>
-    {colleges.map((university) => (
-      <UniversityCard key={university.id} university={university} showCapacity={showCapacity} />
-    ))}
-  </div>
-);
+const ITEM_HEIGHT = 101;
+
+const UniversityCards = ({ colleges, style, className, showCapacity = true }: UniversityCardsProps) => {
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: colleges.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: 5,
+  });
+
+  return (
+    <div
+      ref={parentRef}
+      className={clsx("h-[calc(100vh-200px)] overflow-auto", className)}
+      style={style}
+    >
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => (
+          <div
+            key={colleges[virtualItem.index].id}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          >
+            <div className="pb-2.5">
+              <UniversityCard university={colleges[virtualItem.index]} showCapacity={showCapacity} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
 export default UniversityCards;