fix: 대학 상세 데이터 미준비 상태 폴백 UI 추가 (#449)

Author: manNomi

apps/web/src/apis/universities/server/getUniversityDetail.ts

@@ -1,13 +1,42 @@
 import type { University } from "@/types/university";
 import serverFetch from "@/utils/serverFetchUtil";
 
-export const getUniversityDetail = async (universityInfoForApplyId: number): Promise<University | undefined> => {
+type UniversityDetailFetchSuccess = {
+  ok: true;
+  status: number;
+  data: University;
+};
+
+type UniversityDetailFetchFailure = {
+  ok: false;
+  status: number;
+  error: string;
+};
+
+export type UniversityDetailFetchResult = UniversityDetailFetchSuccess | UniversityDetailFetchFailure;
+
+export const getUniversityDetailWithStatus = async (
+  universityInfoForApplyId: number,
+): Promise<UniversityDetailFetchResult> => {
   const result = await serverFetch<University>(`/univ-apply-infos/${universityInfoForApplyId}`);
 
   if (!result.ok) {
     console.error(`Failed to fetch university detail (ID: ${universityInfoForApplyId}):`, result.error);
-    return undefined;
+    return {
+      ok: false,
+      status: result.status,
+      error: result.error,
+    };
   }
 
-  return result.data;
+  return {
+    ok: true,
+    status: result.status,
+    data: result.data,
+  };
+};
+
+export const getUniversityDetail = async (universityInfoForApplyId: number): Promise<University | undefined> => {
+  const result = await getUniversityDetailWithStatus(universityInfoForApplyId);
+  return result.ok ? result.data : undefined;
 };

apps/web/src/apis/universities/server/index.ts

@@ -6,4 +6,8 @@ export {
   type UniversitySearchFilterParams,
 } from "./getSearchUniversitiesByFilter";
 export { getAllUniversities, getCategorizedUniversities, getUniversitiesByText } from "./getSearchUniversitiesByText";
-export { getUniversityDetail } from "./getUniversityDetail";
+export {
+  getUniversityDetail,
+  getUniversityDetailWithStatus,
+  type UniversityDetailFetchResult,
+} from "./getUniversityDetail";

apps/web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetailPreparingFallback.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+
+import { IconSolidConnectionSmallLogo } from "@/public/svgs/my";
+
+interface UniversityDetailPreparingFallbackProps {
+  backHref: string;
+}
+
+const UniversityDetailPreparingFallback = ({ backHref }: UniversityDetailPreparingFallbackProps) => {
+  return (
+    <div
+      className="flex min-h-[calc(100vh-56px)] flex-col items-center justify-center px-5 pb-24 pt-20 text-center"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      <IconSolidConnectionSmallLogo />
+      <p className="mt-3 text-k-700 typo-sb-9">대학 정보를 준비중입니다.</p>
+      <p className="mt-1 text-k-400 typo-regular-3">아직 데이터가 준비되지 않았어요. 잠시 후 다시 확인해주세요.</p>
+      <Link
+        href={backHref}
+        className="mt-5 rounded-full border border-k-200 bg-k-0 px-5 py-2 text-k-700 typo-sb-11 transition-colors hover:bg-k-50"
+      >
+        파견학교 목록으로 돌아가기
+      </Link>
+    </div>
+  );
+};
+
+export default UniversityDetailPreparingFallback;

apps/web/src/app/university/[homeUniversity]/[id]/page.tsx

@@ -1,13 +1,14 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
-import { getAllUniversities, getUniversityDetail } from "@/apis/universities/server";
+import { getAllUniversities, getUniversityDetail, getUniversityDetailWithStatus } from "@/apis/universities/server";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import { getHomeUniversityBySlug, HOME_UNIVERSITY_SLUGS } from "@/constants/university";
 import type { HomeUniversitySlug } from "@/types/university";
 
 // UniversityDetail 컴포넌트
 import UniversityDetail from "./_ui/UniversityDetail";
+import UniversityDetailPreparingFallback from "./_ui/UniversityDetailPreparingFallback";
 
 export const revalidate = false; // 완전 정적 생성
 
@@ -117,12 +118,27 @@ const CollegeDetailPage = async ({ params }: PageProps) => {
   }
 
   const collegeId = Number(id);
-  const universityData = await getUniversityDetail(collegeId);
-
-  if (!universityData) {
+  if (Number.isNaN(collegeId)) {
     notFound();
   }
 
+  const universityDetailResult = await getUniversityDetailWithStatus(collegeId);
+
+  if (!universityDetailResult.ok) {
+    if (universityDetailResult.status === 404) {
+      notFound();
+    }
+
+    return (
+      <>
+        <TopDetailNavigation title="파견 학교 상세" backHref={`/university/${homeUniversity}`} />
+        <UniversityDetailPreparingFallback backHref={`/university/${homeUniversity}`} />
+      </>
+    );
+  }
+
+  const universityData = universityDetailResult.data;
+
   const convertedKoreanName =
     universityData.term !== process.env.NEXT_PUBLIC_CURRENT_TERM
       ? `${universityData.koreanName}(${universityData.term})`