diff --git a/package-lock.json b/package-lock.json index 5cf22dcc..0bf778c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,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", @@ -12932,6 +12933,23 @@ } } }, + "node_modules/next-render-analyzer": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/next-render-analyzer/-/next-render-analyzer-0.1.2.tgz", + "integrity": "sha512-irHP+fV4v+xggRSuZZcbTDxTJoZd/881vyTsuvJi5/ctVz2hpXwBJaJF7AdyP03loPPyIh42ie140+ZC/fG/5g==", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.23.0", + "@babel/traverse": "^7.23.0", + "@babel/types": "^7.23.0" + }, + "bin": { + "next-render-analyzer": "dist/cli.js" + }, + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/next/node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", diff --git a/package.json b/package.json index d332bd7d..8eb09c00 100644 --- a/package.json +++ b/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", diff --git a/src/app/(home)/_ui/UniversityList/index.tsx b/src/app/(home)/_ui/UniversityList/index.tsx index 89afdabd..4b740fc2 100644 --- a/src/app/(home)/_ui/UniversityList/index.tsx +++ b/src/app/(home)/_ui/UniversityList/index.tsx @@ -29,9 +29,9 @@ const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => { return (
- 전체 학교 리스트 + 전체 학교 리스트 - + 더보기 @@ -49,7 +49,7 @@ const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => { background: "white", }} /> - +
); }; diff --git a/src/components/university/UniversityCards/index.tsx b/src/components/university/UniversityCards/index.tsx index e20f6c74..c2bae983 100644 --- a/src/components/university/UniversityCards/index.tsx +++ b/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 ( +
+ {colleges.map((college) => ( +
+ +
+ ))} +
+ ); + } + + // 가상화 사용 (기존 로직) const parentRef = useRef(null); const virtualizer = useVirtualizer({ @@ -30,11 +51,7 @@ const UniversityCards = ({ colleges, style, className, showCapacity = true }: Un }); return ( -
+