fix : img 버그 수정했습니다 (#209)

* fix : serverFetch 반환값이 더이상 error를 throw하지 않도록 수정했습니다

* refactor : home 페이지가 revalidate가 정상 작동하도록 수정했습니다

* refactor : 클라이언트 컴포넌트 분해했습니다

* refactor : home의 테일윈드 고정값 모두 수정했습니다

* refactor : 전체적인 홈페이지 개선했습니다
1. revalidate 작동하도록 isr로 수정했습니다
2. 컴포넌트 중 레거시 삭제 및 college -> university로 통일작업했습니다
3. 레거시 컴포넌트의 분리 및 테일윈드 값 PR 내용 반영하도록 했습니다

* refactor : 홈페이지의 추천 영역 react-query로 수정했습니다

* refactor : 레거시 삭제했습니다

* refactor : productuin 상태일때는 universities를 사용하도록 수정했습니다

* refactor : unoptimized 설정 삭제했습니다

* refactor : PR 내용 반영했습니다

* fix : 배포 서버 전 테스트용으로 endpoint 분가 수정했습니다

* refactor : 폰트 및 이미지 최적화 했습니다

* fix : 사진이 불러오지 않던 버그 수정했습니다

---------

Co-authored-by: 한만욱 <manwook-han@hanman-ug-ui-MacBookPro.local>

Author: manNomi

…CollegeSection/_hooks/useWheelHandler.ts …versitySection/_hooks/useWheelHandler.tssrc/app/_home/_ui/PopularCollegeSection/_hooks/useWheelHandler.ts renamed to src/app/_home/_ui/PopularUniversitySection/_hooks/useWheelHandler.ts src/app/_home/_ui/PopularCollegeSection/_hooks/useWheelHandler.ts renamed to src/app/_home/_ui/PopularUniversitySection/_hooks/useWheelHandler.ts

@@ -7,35 +7,34 @@ import useWheelHandler from "./_hooks/useWheelHandler";
 
 import { ListUniversity } from "@/types/university";
 
-type PopularCollegeSectionProps = {
-  colleges: ListUniversity[];
+type PopularUniversitySectionProps = {
+  universities: ListUniversity[];
 };
 
-const PopularCollegeSection = ({ colleges }: PopularCollegeSectionProps) => {
+const PopularUniversitySection = ({ universities }: PopularUniversitySectionProps) => {
   const { containerRef } = useWheelHandler();
-
   return (
     <div ref={containerRef} className="overflow-x-auto">
       <div className="flex gap-2">
-        {colleges.map((college) => (
-          <Link key={college.id} href={`/university/${college.id}`}>
+        {universities.map((university) => (
+          <Link key={university.id} href={`/university/${university.id}`}>
             <div className="relative w-[153px]">
               <div className="relative w-[153px]">
                 <div className="absolute inset-0 h-[120px] rounded-lg bg-gradient-to-b from-transparent via-black/35 to-black/70" />
                 <Image
                   className="h-[120px] rounded-lg object-cover"
                   src={
-                    college.backgroundImageUrl
-                      ? `${process.env.NEXT_PUBLIC_IMAGE_URL}/${college.backgroundImageUrl}`
+                    university.backgroundImageUrl
+                      ? `${process.env.NEXT_PUBLIC_IMAGE_URL}/${university.backgroundImageUrl}`
                       : "/images/default-university.jpg"
                   }
                   width={153}
                   height={120}
-                  alt={`${college.koreanName || "대학교"} 배경 이미지`}
+                  alt={`${university.koreanName || "대학교"} 배경 이미지`}
                 />
               </div>
               <div className="absolute bottom-[9px] left-[10px] z-10 text-sm font-semibold leading-[160%] tracking-[0.15px] text-white">
-                {college.koreanName}
+                {university.koreanName}
               </div>
             </div>
           </Link>
@@ -45,4 +44,4 @@ const PopularCollegeSection = ({ colleges }: PopularCollegeSectionProps) => {
   );
 };
 
-export default PopularCollegeSection;
+export default PopularUniversitySection;

…home/_ui/PopularCollegeSection/index.tsx …e/_ui/PopularUniversitySection/index.tsxsrc/app/_home/_ui/PopularCollegeSection/index.tsx renamed to src/app/_home/_ui/PopularUniversitySection/index.tsx src/app/_home/_ui/PopularCollegeSection/index.tsx renamed to src/app/_home/_ui/PopularUniversitySection/index.tsx

@@ -32,7 +32,6 @@ const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => {
     isLogin && !error ? clientFetchedRecommendedUniversities : region ? (allRegionsUniversityList[region] ?? []) : [];
   // 홈 카드 영역에는 최대 3개만 노출
   const previewUniversities: ListUniversity[] = useMemo(() => universities.slice(0, 3), [universities]);
-
   return (
     <div className="flex flex-col gap-2">
       <div className="flex justify-between">
@@ -55,7 +54,13 @@ const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => {
           background: "white",
         }}
       />
-      <UniversityCards colleges={previewUniversities} showCapacity={false} />
+      <UniversityCards
+        colleges={previewUniversities.map((college) => ({
+          ...college,
+          logoImageUrl: college.logoImageUrl?.replace(/^\/+/, ""),
+        }))}
+        showCapacity={false}
+      />
     </div>
   );
 };

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

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 import FindLastYearScoreBar from "./_ui/FindLastYearScoreBar";
-import PopularCollegeSection from "./_ui/PopularCollegeSection";
+import PopularUniversitySection from "./_ui/PopularUniversitySection";
 import UniversityList from "./_ui/UniversityList";
 
 import getRecommendedUniversity from "@/api/university/server/getRecommendedUniversity";
@@ -16,7 +16,7 @@ const Home = async () => {
 
   // 추천 대학 정보를 가져옵니다
   const { data } = await getRecommendedUniversity();
-  const recommendedColleges = data?.recommendedUniversities || [];
+  const recommendedUniversities = data?.recommendedUniversities || [];
 
   // 권역별 전체 대학 리스트를 미리 가져와 빌드합니다
   const allRegionsUniversityList = await getAllRegionsUniversityList();
@@ -71,7 +71,7 @@ const Home = async () => {
         <div className="mb-2 flex items-center gap-1.5 font-serif text-base font-semibold text-k-700">
           실시간 인기있는 파견학교
         </div>
-        <PopularCollegeSection colleges={recommendedColleges} />
+        <PopularUniversitySection universities={recommendedUniversities} />
       </div>
 
       <div className="p-5">
@@ -89,7 +89,6 @@ const Home = async () => {
               <div className="flex gap-4">
                 <Image
                   loading="lazy"
-                  placeholder="blur"
                   className="h-24 w-44 shrink-0 rounded-xl object-cover"
                   src={news.imageUrl}
                   alt={news.title}