Merge pull request #605 from solid-connection/fix/application-score-applied-university-ui

fix: 지원자 현황 지원 대학 표시 수정

Author: manNomi

apps/web/src/app/university/application/ScorePageContent.tsx

@@ -8,9 +8,10 @@ import { useGetApplicationsList } from "@/apis/applications";
 import ConfirmCancelModal from "@/components/modal/ConfirmCancelModal";
 import { DEFAULT_MAX_CHOICE_COUNT, getHomeUniversityById, REGIONS_KO } from "@/constants/university";
 import useAuthStore from "@/lib/zustand/useAuthStore";
+import { IconExpandMoreFilled } from "@/public/svgs/community";
 import type { Applicant, ScoreSheet as ScoreSheetType } from "@/types/application";
 import type { RegionKo } from "@/types/university";
-import { getApplicationDetailHref, MobileScoreSheet } from "./ScoreSheet";
+import { getApplicationDetailHref, MobileScoreSheet, ScoreSheetLogo } from "./ScoreSheet";
 
 type ApplicantScope = "all" | "withApplicants";
 type ScoreSort = "applicants" | "gpa";
@@ -160,7 +161,7 @@ const AppliedUniversitySection = ({
 }) => (
   <section className="mt-5">
     <div className="flex items-center justify-between gap-3">
-      <h1 className="text-k-900 typo-bold-4">지원한 대학({appliedUniversities.length})</h1>
+      <h1 className="text-k-900 typo-bold-4">지원한 대학 ({appliedUniversities.length}개)</h1>
       <button
         type="button"
         onClick={onChangeUniversities}
@@ -198,12 +199,12 @@ const AppliedUniversityRow = ({ preference, scoreSheet }: AppliedUniversity) =>
       href={getApplicationDetailHref(scoreSheet.koreanName)}
       className="flex h-11 items-center gap-2.5 rounded-lg border border-k-50 bg-white px-3.5 shadow-[0_0_10px_rgba(0,0,0,0.05)]"
     >
-      <span className="size-5 shrink-0 rounded-full bg-k-50" aria-hidden />
+      <ScoreSheetLogo scoreSheet={scoreSheet} className="size-5" />
       <span className="min-w-0 flex-1 truncate text-k-900 typo-sb-7">
         {scoreSheet.koreanName} ({preference}/{capacity})
       </span>
-      <span className="text-k-500" aria-hidden>
-        ˅
+      <span className="flex size-6 shrink-0 items-center justify-center text-k-600" aria-hidden>
+        <IconExpandMoreFilled />
       </span>
     </Link>
   );
@@ -342,7 +343,15 @@ const uniqueScoreSheets = (scoreSheets: ScoreSheetType[]) => {
     const prev = scoreSheetMap.get(key);
     scoreSheetMap.set(
       key,
-      prev ? { ...prev, applicants: mergeApplicants(prev.applicants, scoreSheet.applicants) } : scoreSheet,
+      prev
+        ? {
+            ...prev,
+            englishName: prev.englishName ?? scoreSheet.englishName,
+            logoImageUrl: prev.logoImageUrl ?? scoreSheet.logoImageUrl,
+            backgroundImageUrl: prev.backgroundImageUrl ?? scoreSheet.backgroundImageUrl,
+            applicants: mergeApplicants(prev.applicants, scoreSheet.applicants),
+          }
+        : scoreSheet,
     );
   }
 

apps/web/src/app/university/application/ScoreSheet.tsx

@@ -3,6 +3,7 @@
 import clsx from "clsx";
 import Link from "next/link";
 import { useState } from "react";
+import Image from "@/components/ui/FallbackImage";
 import { IconExpandMoreFilled } from "@/public/svgs/community";
 import type { Applicant, ScoreSheet as ScoreSheetType } from "@/types/application";
 import { formatLanguageTestScore, isLanguageTestEnum, languageTestMapping } from "@/types/score";
@@ -61,6 +62,26 @@ const getScoreSheetCapacity = (scoreSheet: ScoreSheetType) => {
   return String(scoreSheet.studentCapacity);
 };
 
+export const ScoreSheetLogo = ({
+  scoreSheet,
+  className,
+  size = 20,
+}: {
+  scoreSheet: Pick<ScoreSheetType, "logoImageUrl">;
+  className?: string;
+  size?: number;
+}) => (
+  <Image
+    src={scoreSheet.logoImageUrl ?? ""}
+    alt=""
+    width={size}
+    height={size}
+    className={clsx("shrink-0 rounded-full border border-k-50 bg-white object-cover", className)}
+    fallbackSrc="/svgs/placeholders/university-logo-placeholder.svg"
+    aria-hidden
+  />
+);
+
 export const MobileScoreSheet = ({ scoreSheet, defaultOpen = false, detailHref }: ScoreSheetProps) => {
   const [tableOpened, setTableOpened] = useState(defaultOpen);
   const resolvedDetailHref = detailHref ?? getApplicationDetailHref(scoreSheet.koreanName);
@@ -81,7 +102,7 @@ export const MobileScoreSheet = ({ scoreSheet, defaultOpen = false, detailHref }
         )}
         onClick={toggleTableOpened}
       >
-        <span className="size-5 shrink-0 rounded-full bg-white" aria-hidden />
+        <ScoreSheetLogo scoreSheet={scoreSheet} className="size-5" />
         <Link
           href={resolvedDetailHref}
           className="min-w-0 flex-1 truncate text-k-900 typo-sb-7"

apps/web/src/app/university/application/[universityName]/ApplicationUniversityDetailContent.tsx

@@ -234,6 +234,16 @@ const findScoreSheetWithApplicants = (
 
   const baseScoreSheet = matches[0].scoreSheet;
   const applicantMap = new Map<string, Applicant>();
+  const mergedUniversityImages = matches.reduce(
+    (images, { scoreSheet }) => ({
+      logoImageUrl: images.logoImageUrl ?? scoreSheet.logoImageUrl,
+      backgroundImageUrl: images.backgroundImageUrl ?? scoreSheet.backgroundImageUrl,
+    }),
+    {
+      logoImageUrl: baseScoreSheet.logoImageUrl,
+      backgroundImageUrl: baseScoreSheet.backgroundImageUrl,
+    },
+  );
 
   for (const { preferenceOrder, scoreSheet } of matches) {
     for (const applicant of scoreSheet.applicants) {
@@ -249,6 +259,7 @@ const findScoreSheetWithApplicants = (
 
   return {
     ...baseScoreSheet,
+    ...mergedUniversityImages,
     applicants: Array.from(applicantMap.values()),
   };
 };

apps/web/src/types/application.ts

@@ -22,8 +22,8 @@ export interface ScoreSheet {
   id?: number;
   koreanName: string;
   englishName?: string;
-  logoImageUrl?: string;
-  backgroundImageUrl?: string;
+  logoImageUrl?: string | null;
+  backgroundImageUrl?: string | null;
   studentCapacity: number | null;
   region: string;
   country: string;