diff --git a/apps/university-web/src/app/university/(home)/_ui/HomeUniversityCard.tsx b/apps/university-web/src/app/university/(home)/_ui/HomeUniversityCard.tsx index 8d200eeab..d5aa20031 100644 --- a/apps/university-web/src/app/university/(home)/_ui/HomeUniversityCard.tsx +++ b/apps/university-web/src/app/university/(home)/_ui/HomeUniversityCard.tsx @@ -32,19 +32,53 @@ const HomeUniversityCard = ({ university }: HomeUniversityCardProps) => {
- - - +
); }; +export const DesktopHomeUniversityCard = ({ university }: HomeUniversityCardProps) => { + return ( + +
+ {`${university.name} +
+ +
+ {university.shortName} + {university.name} + {university.description} +
+ +
+ +
+ + ); +}; + +const ArrowIcon = () => ( + + + +); + export default HomeUniversityCard; diff --git a/apps/university-web/src/app/university/(home)/page.tsx b/apps/university-web/src/app/university/(home)/page.tsx index d94a2cc9b..64383e850 100644 --- a/apps/university-web/src/app/university/(home)/page.tsx +++ b/apps/university-web/src/app/university/(home)/page.tsx @@ -3,7 +3,7 @@ import type { Metadata } from "next"; import { HOME_UNIVERSITY_LIST } from "@/constants/university"; import { createUrl } from "@/utils/seo"; -import HomeUniversityCard from "./_ui/HomeUniversityCard"; +import HomeUniversityCard, { DesktopHomeUniversityCard } from "./_ui/HomeUniversityCard"; export const revalidate = false; @@ -33,22 +33,59 @@ export const metadata: Metadata = { const UniversitySelectPage = () => { return ( -
-
-

소속 대학교 선택

-

- 소속 대학교를 선택하면 -
- 해당 대학의 교환학생 정보를 확인할 수 있습니다. -

+ <> +
+
+

소속 대학교 선택

+

+ 소속 대학교를 선택하면 +
+ 해당 대학의 교환학생 정보를 확인할 수 있습니다. +

+
+ +
+ {HOME_UNIVERSITY_LIST.map((university) => ( + + ))} +
-
- {HOME_UNIVERSITY_LIST.map((university) => ( - - ))} +
+
+
+

University catalog

+

소속 대학교 선택

+

+ 내 학교 기준으로 파견 가능 대학, 지원 조건, 상세 정보를 확인하세요. +

+
+ +
+
+

학교별 교환학생 정보

+

+ 소속 학교를 선택하면 해당 학교 학생에게 맞는 파견 학교 목록으로 이동합니다. +

+
+ {HOME_UNIVERSITY_LIST.map((university) => ( + + ))} +
+
+ + +
+
-
+ ); }; diff --git a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/InfoSection.tsx b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/InfoSection.tsx index 67513352d..6552218f5 100644 --- a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/InfoSection.tsx +++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/InfoSection.tsx @@ -191,8 +191,8 @@ const SemesterAvailableForDispatchIcon = () => { { { +const MapSection = ({ universityEnglishName, variant = "mobile" }: MapSectionProps) => { + if (variant === "desktop") { + return ( +
+
+

Location

+

파견학교 위치

+

국가 안에서 어느 지역에 있는지 중심으로 확인해보세요.

+ +
+ +
+ + ); + } + return ( <>
파견학교 위치
- +
diff --git a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/TitleSection.tsx b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/TitleSection.tsx index 7f3002b35..1a0b8a5f3 100644 --- a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/TitleSection.tsx +++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/TitleSection.tsx @@ -8,8 +8,8 @@ interface TitleSectionProps { const TitleSection = ({ logoUrl, title, subTitle }: TitleSectionProps) => { return ( -
-
+
+
대학 로고 { className="rounded-full object-cover" fallbackSrc="/svgs/placeholders/university-logo-placeholder.svg" /> -
- {title} - {subTitle} +
+ + {title} + + + {subTitle} +
diff --git a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx index f18248dc0..a44679e5f 100644 --- a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx +++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx @@ -1,7 +1,10 @@ +import Link from "next/link"; + import Image from "@/components/ui/FallbackImage"; import LinkifyText from "@/components/ui/LinkifyText"; import type { University } from "@/types/university"; import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl"; +import { formatLanguageTestName, getLanguageTestLogo } from "@/utils/languageUtils"; import InfoSection from "./_ui/InfoSection"; import LanguageSection from "./_ui/LanguageSection"; import MapSection from "./_ui/MapSection"; @@ -11,16 +14,30 @@ import UniversityBtns from "./_ui/UniversityBtns"; interface UniversityDetailProps { university: University; koreanName: string; + backHref?: string; } -const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) => { +const UniversityDetail = ({ university, koreanName, backHref }: UniversityDetailProps) => { + return ( + <> +
+ +
+
+ +
+ + ); +}; + +const UniversityDetailMobile = ({ university, koreanName }: UniversityDetailProps) => { return (
-
+
-
+
대학 이미지 fallbackSrc="/svgs/placeholders/image-placeholder.svg" />
-
+
- {/* TODO: totalDispatchCount 추가시 연동, 나라에 국기 추가 */} -
- {}0회 파견 - {university.country} - 모집 {university.studentCapacity}명 -
- - + +
+
+
+ ); +}; + +const UniversityDetailDesktop = ({ university, koreanName, backHref = "/university" }: UniversityDetailProps) => { + return ( +
+
+ 대학 이미지 -
-
-
전공상세
-
- {university?.detailsForMajor} +
+ + 목록으로 돌아가기 + +
+
+

+ {university.country} · {university.region} +

+

{koreanName}

+

{university.englishName}

+
+
+
-
-
-
영어강의 리스트
-
- - {university?.detailsForEnglishCourse} +
+ +
+
+ + + +
+ + +
+
+ ); +}; + +const UniversityDetailBody = ({ university }: { university: University }) => ( + <> + + + + + +); + +const UniversityStats = ({ university }: { university: University }) => ( +
+ {university.country} + 모집 {university.studentCapacity}명 +
+); + +const DesktopUniversitySummary = ({ university, koreanName }: UniversityDetailProps) => ( +
+
+ 대학 로고 +
+

+ {koreanName} +

+

+ {university.englishName} +

+
+
+ +
+ + + + +
+
+); + +const DesktopStatItem = ({ label, value }: { label: string; value: string }) => ( +
+
{label}
+
+ {value} +
+
+); + +const DesktopOverviewSection = ({ university }: { university: University }) => ( +
+
+

Overview

+

지원 전 확인할 정보

+

+ 모집 규모, 등록금 유형, 성적 기준을 한 번에 확인하고 상세 요건으로 이어서 살펴보세요. +

+
+ +
+ + + +
+
+); + +const DesktopOverviewItem = ({ label, value }: { label: string; value: string }) => ( +
+
{label}
+
{value}
+
+); + +const DesktopLanguageSummary = ({ university }: { university: University }) => ( +
+

어학 성적

+
+ {university.languageRequirements.map((requirement, index) => ( +
+
+ 어학시험 + + {formatLanguageTestName(requirement.languageTestType)}
+ {requirement.minScore}
- -
+ ))} +
+
+

세부 요건

+

+ {university.detailsForLanguage} +

+
+
+); + +const DesktopRequirementSummary = ({ university }: { university: University }) => ( +
+

지원 요건

+
+ {university.detailsForApply} + {university.detailsForAccommodation} +
+
+); + +const DesktopRequirementBlock = ({ title, children }: { title: string; children: string }) => ( +
+

{title}

+

+ {children} +

+
+); + +const UniversityDetailTexts = ({ university }: { university: University }) => ( +
+ {university.detailsForMajor} + {university.detailsForEnglishCourse} +
+); + +const DesktopDetailTexts = ({ university }: { university: University }) => ( +
+
+

Details

+

전공과 강의 정보

+
+
+ {university.detailsForMajor} + {university.detailsForEnglishCourse} +
+
+); + +const DesktopTextSection = ({ title, children }: { title: string; children: string }) => ( +
+

{title}

+
+ {children} +
+
+); + +const DetailTextSection = ({ title, children }: { title: string; children: string }) => ( + <> +
+
+
{title}
+
+ {children}
- ); -}; + +); export default UniversityDetail; diff --git a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetailPreparingFallback.tsx b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetailPreparingFallback.tsx index c6c6669f8..a578c7a74 100644 --- a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetailPreparingFallback.tsx +++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetailPreparingFallback.tsx @@ -14,22 +14,45 @@ const UniversityDetailPreparingFallback = ({ description = "아직 데이터가 준비되지 않았어요. 잠시 후 다시 확인해주세요.", }: UniversityDetailPreparingFallbackProps) => { return ( -
- -

{title}

-

{description}

- +
- 파견학교 목록으로 돌아가기 - -
+ +

{title}

+

{description}

+ + 파견학교 목록으로 돌아가기 + +
+ +
+
+
+ +
+

{title}

+

{description}

+ + 파견학교 목록으로 돌아가기 + +
+
+ ); }; diff --git a/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx b/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx index d3fefb344..ae574d12c 100644 --- a/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx +++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx @@ -185,7 +185,11 @@ const CollegeDetailPage = async ({ params }: PageProps) => {