perf: 홈 대학 미리보기 전달 데이터 축소

apps/web/src/app/(home)/_ui/UniversityList/_hooks/useHomeUniversityList.ts

@@ -1,12 +1,12 @@
 import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 
-import { HOME_UNIVERSITY_LIST, isMatchedHomeUniversityName } from "@/constants/university";
-import { type AllRegionsUniversityList, type ListUniversity, RegionEnumExtend } from "@/types/university";
+import { HOME_UNIVERSITY_LIST } from "@/constants/university";
+import { RegionEnumExtend } from "@/types/university";
+import type { HomeUniversityPreviewList } from "../types";
 
-const ALL_HOME_UNIVERSITY_CHOICE = "전체";
-const PREVIEW_UNIVERSITY_COUNT = 3;
+const ALL_HOME_UNIVERSITY_CHOICE = RegionEnumExtend.ALL;
 
-const useHomeUniversityList = (allRegionsUniversityList: AllRegionsUniversityList) => {
+const useHomeUniversityList = (homeUniversityPreviews: HomeUniversityPreviewList) => {
   const [selectedHomeUniversity, setSelectedHomeUniversity] = useState<string | null>(ALL_HOME_UNIVERSITY_CHOICE);
   const handleHomeUniversityChange: Dispatch<SetStateAction<string | null>> = (nextHomeUniversity) => {
     setSelectedHomeUniversity((prevHomeUniversity) => {
@@ -21,21 +21,13 @@ const useHomeUniversityList = (allRegionsUniversityList: AllRegionsUniversityLis
     [],
   );
 
-  const allUniversities = allRegionsUniversityList[RegionEnumExtend.ALL] ?? [];
   const selectedUniversityInfo = useMemo(
     () => HOME_UNIVERSITY_LIST.find((university) => university.shortName === selectedHomeUniversity),
     [selectedHomeUniversity],
   );
 
-  const universities: ListUniversity[] = useMemo(() => {
-    if (!selectedUniversityInfo) return allUniversities;
-
-    return allUniversities.filter((university) =>
-      isMatchedHomeUniversityName(university.homeUniversityName, selectedUniversityInfo.name),
-    );
-  }, [allUniversities, selectedUniversityInfo]);
-
-  const previewUniversities = useMemo(() => universities.slice(0, PREVIEW_UNIVERSITY_COUNT), [universities]);
+  const previewUniversities =
+    homeUniversityPreviews[selectedUniversityInfo?.shortName ?? ALL_HOME_UNIVERSITY_CHOICE] ?? [];
   const moreHref = selectedUniversityInfo ? `/university/${selectedUniversityInfo.slug}` : "/university";
 
   return {

apps/web/src/app/(home)/_ui/UniversityList/_utils/getHomeUniversityPreviews.ts

@@ -0,0 +1,35 @@
+import { HOME_UNIVERSITY_LIST, isMatchedHomeUniversityName } from "@/constants/university";
+import { type ListUniversity, RegionEnumExtend } from "@/types/university";
+import type { HomeUniversityPreview, HomeUniversityPreviewList } from "../types";
+
+const PREVIEW_UNIVERSITY_COUNT = 3;
+const PREVIEW_LANGUAGE_REQUIREMENT_COUNT = 3;
+
+const getPreviewUniversities = (universities: ListUniversity[]): HomeUniversityPreview[] => {
+  return universities.slice(0, PREVIEW_UNIVERSITY_COUNT).map((university) => ({
+    id: university.id,
+    koreanName: university.koreanName,
+    homeUniversityName: university.homeUniversityName,
+    region: university.region,
+    country: university.country,
+    logoImageUrl: university.logoImageUrl,
+    languageRequirements: university.languageRequirements
+      .slice(0, PREVIEW_LANGUAGE_REQUIREMENT_COUNT)
+      .map(({ languageTestType, minScore }) => ({ languageTestType, minScore })),
+  }));
+};
+
+export const getHomeUniversityPreviews = (allUniversities: ListUniversity[]): HomeUniversityPreviewList => {
+  const previews: HomeUniversityPreviewList = {
+    [RegionEnumExtend.ALL]: getPreviewUniversities(allUniversities),
+  };
+
+  for (const { name, shortName } of HOME_UNIVERSITY_LIST) {
+    const universities = allUniversities.filter((university) =>
+      isMatchedHomeUniversityName(university.homeUniversityName, name),
+    );
+    previews[shortName] = getPreviewUniversities(universities);
+  }
+
+  return previews;
+};

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

@@ -5,16 +5,16 @@ import UniversityZoneLink from "@/components/ui/UniversityZoneLink";
 import UniversityCards from "@/components/university/UniversityCards";
 import { IconDirectionRight } from "@/public/svgs/mentor";
 
-import type { AllRegionsUniversityList } from "@/types/university";
 import useHomeUniversityList from "./_hooks/useHomeUniversityList";
+import type { HomeUniversityPreviewList } from "./types";
 
 interface UniversityListProps {
-  allRegionsUniversityList: AllRegionsUniversityList;
+  homeUniversityPreviews: HomeUniversityPreviewList;
 }
 
-const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => {
+const UniversityList = ({ homeUniversityPreviews }: UniversityListProps) => {
   const { selectedHomeUniversity, setSelectedHomeUniversity, homeUniversityChoices, previewUniversities, moreHref } =
-    useHomeUniversityList(allRegionsUniversityList);
+    useHomeUniversityList(homeUniversityPreviews);
 
   return (
     <div className="flex flex-col gap-2">

apps/web/src/app/(home)/_ui/UniversityList/types.ts

@@ -0,0 +1,4 @@
+import type { UniversityCardData } from "@/types/university";
+
+export type HomeUniversityPreview = Omit<UniversityCardData, "studentCapacity">;
+export type HomeUniversityPreviewList = Record<string, HomeUniversityPreview[]>;

apps/web/src/app/(home)/page.tsx

@@ -9,6 +9,7 @@ import HomeEntrySection from "./_ui/HomeEntrySection";
 import NewsSection from "./_ui/NewsSection";
 import PopularUniversitySection from "./_ui/PopularUniversitySection";
 import UniversityList from "./_ui/UniversityList";
+import { getHomeUniversityPreviews } from "./_ui/UniversityList/_utils/getHomeUniversityPreviews";
 
 const pageUrl = createUrl("/");
 const ogImageUrl = createUrl("/opengraph-image.png");
@@ -109,6 +110,7 @@ const HomePage = async () => {
     recommendedUniversities,
     allUniversities,
   ).filter(hasUniversityDetailRoute);
+  const homeUniversityPreviews = getHomeUniversityPreviews(allUniversities);
 
   return (
     <>
@@ -123,7 +125,7 @@ const HomePage = async () => {
         </div>
 
         <div className="p-5">
-          <UniversityList allRegionsUniversityList={allRegionsUniversityList} />
+          <UniversityList homeUniversityPreviews={homeUniversityPreviews} />
         </div>
 
         <NewsSection newsList={newsList} />

apps/web/src/components/ui/UniverSityCard/index.tsx

@@ -2,12 +2,12 @@ import Image from "@/components/ui/FallbackImage";
 import CheveronRightFilled from "@/components/ui/icon/ChevronRightFilled";
 import UniversityZoneLink from "@/components/ui/UniversityZoneLink";
 import { getHomeUniversitySlugByName } from "@/constants/university";
-import type { ListUniversity } from "@/types/university";
+import type { UniversityCardData } from "@/types/university";
 import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import shortenLanguageTestName from "@/utils/universityUtils";
 
 type UniversityCardProps = {
-  university: ListUniversity;
+  university: UniversityCardData;
   showCapacity?: boolean;
   linkPrefix?: string;
 };

apps/web/src/components/university/UniversityCards/index.tsx

@@ -2,11 +2,11 @@
 
 import clsx from "clsx";
 
-import type { ListUniversity } from "@/types/university";
+import type { UniversityCardData } from "@/types/university";
 import UniversityCard from "../../ui/UniverSityCard";
 
 type UniversityCardsProps = {
-  colleges: ListUniversity[];
+  colleges: UniversityCardData[];
   style?: React.CSSProperties;
   className?: string;
   showCapacity?: boolean;

apps/web/src/types/university.ts

@@ -90,6 +90,12 @@ export interface ListUniversity {
   languageRequirements: LanguageRequirement[];
 }
 
+export type UniversityCardData = Pick<
+  ListUniversity,
+  "id" | "koreanName" | "homeUniversityName" | "region" | "country" | "logoImageUrl" | "languageRequirements"
+> &
+  Partial<Pick<ListUniversity, "studentCapacity">>;
+
 /**
  * 권역별 대학 리스트 응답 타입
  * - Enum 값(전체·미주·유럽·아시아·중국)을 key 로 사용한다.