feat: 데스크톱 최적화 레이아웃 적용

apps/university-web/src/app/university/(home)/_ui/HomeUniversityCard.tsx

@@ -32,19 +32,53 @@ const HomeUniversityCard = ({ university }: HomeUniversityCardProps) => {
       </div>
 
       <div className="flex h-8 w-8 items-center justify-center rounded-full bg-k-50 transition-colors group-hover:bg-primary-100">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className="text-k-400 group-hover:text-primary"
-        >
-          <path d="M6 12L10 8L6 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
+        <ArrowIcon />
       </div>
     </Link>
   );
 };
 
+export const DesktopHomeUniversityCard = ({ university }: HomeUniversityCardProps) => {
+  return (
+    <Link
+      href={`/university/${university.slug}`}
+      className="group flex min-h-40 flex-col items-start rounded-lg border border-k-100 bg-white p-6 transition-all hover:-translate-y-0.5 hover:border-primary-300 hover:shadow-lg"
+    >
+      <div className="flex h-[72px] w-[72px] flex-shrink-0 items-center justify-center overflow-hidden rounded-full border border-k-100 bg-white">
+        <Image
+          src={university.logoUrl}
+          alt={`${university.name} 로고`}
+          width={56}
+          height={56}
+          className="h-14 w-14 object-contain"
+          fallbackSrc="/svgs/placeholders/university-logo-placeholder.svg"
+        />
+      </div>
+
+      <div className="mt-5 flex flex-1 flex-col">
+        <span className="mb-2 text-primary typo-sb-9">{university.shortName}</span>
+        <span className="text-k-800 typo-bold-3 group-hover:text-primary">{university.name}</span>
+        <span className="text-k-500 typo-medium-4">{university.description}</span>
+      </div>
+
+      <div className="mt-auto flex h-8 w-8 items-center justify-center self-end rounded-full bg-k-50 transition-colors group-hover:bg-primary-100">
+        <ArrowIcon />
+      </div>
+    </Link>
+  );
+};
+
+const ArrowIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="text-k-400 group-hover:text-primary"
+  >
+    <path d="M6 12L10 8L6 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
 export default HomeUniversityCard;

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 (
-    <div className="flex min-h-[calc(100vh-112px)] flex-col px-5 py-8">
-      <div className="mb-8 text-center">
-        <h1 className="mb-2 text-k-900 typo-bold-1">소속 대학교 선택</h1>
-        <p className="text-k-500 typo-medium-4">
-          소속 대학교를 선택하면
-          <br />
-          해당 대학의 교환학생 정보를 확인할 수 있습니다.
-        </p>
+    <>
+      <div className="flex min-h-[calc(100vh-112px)] flex-col px-5 py-8 md:hidden">
+        <div className="mb-8 text-center">
+          <h1 className="mb-2 text-k-900 typo-bold-1">소속 대학교 선택</h1>
+          <p className="text-k-500 typo-medium-4">
+            소속 대학교를 선택하면
+            <br />
+            해당 대학의 교환학생 정보를 확인할 수 있습니다.
+          </p>
+        </div>
+
+        <div className="flex flex-1 flex-col gap-4">
+          {HOME_UNIVERSITY_LIST.map((university) => (
+            <HomeUniversityCard key={university.slug} university={university} />
+          ))}
+        </div>
       </div>
 
-      <div className="flex flex-1 flex-col gap-4">
-        {HOME_UNIVERSITY_LIST.map((university) => (
-          <HomeUniversityCard key={university.slug} university={university} />
-        ))}
+      <div className="hidden min-h-screen bg-k-50 px-8 py-8 md:block lg:px-10">
+        <div className="mx-auto max-w-6xl">
+          <header className="mb-8">
+            <p className="text-primary typo-sb-9">University catalog</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">소속 대학교 선택</h1>
+            <p className="mt-2 text-k-500 typo-medium-2">
+              내 학교 기준으로 파견 가능 대학, 지원 조건, 상세 정보를 확인하세요.
+            </p>
+          </header>
+
+          <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(300px,360px)]">
+            <section className="rounded-lg border border-k-100 bg-white p-6">
+              <h2 className="text-k-900 typo-bold-4">학교별 교환학생 정보</h2>
+              <p className="mt-1 text-k-500 typo-medium-3">
+                소속 학교를 선택하면 해당 학교 학생에게 맞는 파견 학교 목록으로 이동합니다.
+              </p>
+              <div className="mt-6 grid gap-4 lg:grid-cols-2">
+                {HOME_UNIVERSITY_LIST.map((university) => (
+                  <DesktopHomeUniversityCard key={university.slug} university={university} />
+                ))}
+              </div>
+            </section>
+
+            <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
+              <h2 className="text-k-900 typo-bold-4">이렇게 확인해요</h2>
+              <div className="mt-5 grid gap-3 text-k-700 typo-medium-2">
+                <div className="rounded-lg bg-k-50 px-4 py-3">소속 학교를 먼저 선택합니다.</div>
+                <div className="rounded-lg bg-k-50 px-4 py-3">지역, 국가, 어학 조건으로 학교를 좁혀봅니다.</div>
+                <div className="rounded-lg bg-k-50 px-4 py-3">상세 페이지에서 모집 인원과 지원 요건을 확인합니다.</div>
+              </div>
+            </aside>
+          </div>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/InfoSection.tsx

@@ -191,8 +191,8 @@ const SemesterAvailableForDispatchIcon = () => {
     <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect y="0.727539" width="24" height="24" rx="12" fill="currentColor" className="text-sub-c-100" />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M14.7512 14.1561H17.3709C17.8029 14.1561 18.2173 13.968 18.5228 13.6331C18.8284 13.2982 19 12.844 19 12.3704C19 11.8968 18.8284 11.4426 18.5228 11.1077C18.2173 10.7728 17.8029 10.5847 17.3709 10.5847H8.32465C8.20367 10.5846 8.08509 10.5476 7.98219 10.4779C7.8793 10.4081 7.79616 10.3083 7.74208 10.1897L7.45014 9.55111C7.39606 9.43248 7.31291 9.3327 7.21002 9.26293C7.10713 9.19317 6.98855 9.15618 6.86756 9.15611H5.65223C5.54434 9.15601 5.43811 9.18526 5.34308 9.24126C5.24806 9.29726 5.1672 9.37825 5.10777 9.47695C5.04834 9.57565 5.0122 9.68898 5.00259 9.80678C4.99298 9.92457 5.0102 10.0431 5.05271 10.1518L6.4492 13.7233C6.49948 13.8518 6.5831 13.9614 6.68968 14.0383C6.79625 14.1153 6.9211 14.1562 7.04872 14.1561H9.56605C9.67248 14.1562 9.77728 14.1848 9.87128 14.2396C9.96528 14.2943 10.0456 14.3734 10.1053 14.47C10.1649 14.5666 10.2021 14.6778 10.2135 14.7938C10.2249 14.9098 10.2103 15.0271 10.1708 15.1354L9.58364 16.749C9.54431 16.8572 9.52974 16.9744 9.54119 17.0902C9.55264 17.206 9.58977 17.317 9.64934 17.4135C9.70891 17.51 9.78911 17.5891 9.88295 17.6438C9.97679 17.6986 10.0814 17.7273 10.1877 17.7275H11.5184C11.6161 17.7276 11.7126 17.7035 11.8007 17.6572C11.8888 17.6108 11.9663 17.5433 12.0273 17.4597L14.2429 14.424C14.304 14.3404 14.3813 14.273 14.4693 14.2266C14.5573 14.1803 14.6536 14.1562 14.7512 14.1561ZM10.2027 9.8704H13.2981L12.0273 8.01325C11.9666 7.92454 11.8879 7.85254 11.7974 7.80295C11.707 7.75336 11.6072 7.72754 11.506 7.72754H10.2796C10.1686 7.7276 10.0594 7.75877 9.96243 7.81807C9.86547 7.87737 9.78394 7.96285 9.72557 8.06639C9.66721 8.16993 9.63396 8.2881 9.62896 8.40969C9.62397 8.53127 9.6474 8.65224 9.69703 8.76111L10.2027 9.8704Z"
         fill="currentColor"
         className="text-sub-c-500"
@@ -206,8 +206,8 @@ const DetailsForApplyIcon = () => {
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect width="24" height="24" rx="12" fill="currentColor" className="text-sub-d-100" />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M17 7H7V12.3846C7 13.6087 7.52678 14.7826 8.46447 15.6482C9.40215 16.5137 10.6739 17 12 17C13.3261 17 14.5979 16.5137 15.5355 15.6482C16.4732 14.7826 17 13.6087 17 12.3846V7ZM10.2117 10.9585L9.62167 11.5031L11.5833 13.3131L14.795 10.3492L14.2058 9.80462L11.5833 12.2254L10.2117 10.9585Z"
         fill="currentColor"
         className="text-sub-d-500"

apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/MapSection.tsx

@@ -2,16 +2,32 @@ import GoogleEmbedMap from "@/components/ui/map/GoogleEmbedMap";
 
 interface MapSectionProps {
   universityEnglishName: string;
+  variant?: "mobile" | "desktop";
 }
 
-const MapSection = ({ universityEnglishName }: MapSectionProps) => {
+const MapSection = ({ universityEnglishName, variant = "mobile" }: MapSectionProps) => {
+  if (variant === "desktop") {
+    return (
+      <section className="rounded-lg border border-k-100 bg-white p-7 shadow-sm">
+        <header className="border-b border-k-50 pb-5">
+          <p className="text-primary typo-sb-9">Location</p>
+          <h2 className="mt-2 text-k-900 typo-bold-2">파견학교 위치</h2>
+          <p className="mt-2 text-k-500 typo-medium-3">국가 안에서 어느 지역에 있는지 중심으로 확인해보세요.</p>
+        </header>
+        <div className="mt-6 overflow-hidden rounded-lg border border-k-100">
+          <GoogleEmbedMap width="100%" height="360px" name={universityEnglishName} zoom={5} style={{ border: "0" }} />
+        </div>
+      </section>
+    );
+  }
+
   return (
     <>
       <div className="h-1 bg-k-50" />
       <div className="my-7">
         <div className="mb-3 text-k-900 typo-sb-7">파견학교 위치</div>
         <div>
-          <GoogleEmbedMap width="100%" height="300px" name={universityEnglishName} style={{ border: "0" }} />
+          <GoogleEmbedMap width="100%" height="300px" name={universityEnglishName} zoom={5} style={{ border: "0" }} />
         </div>
       </div>
     </>

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 (
-    <div className="flex justify-center pt-10">
-      <div className="flex gap-2.5">
+    <div className="flex justify-center pt-10 md:justify-start md:pt-8">
+      <div className="flex min-w-0 gap-2.5">
         <Image
           src={logoUrl}
           alt="대학 로고"
@@ -18,9 +18,13 @@ const TitleSection = ({ logoUrl, title, subTitle }: TitleSectionProps) => {
           className="rounded-full object-cover"
           fallbackSrc="/svgs/placeholders/university-logo-placeholder.svg"
         />
-        <div className="flex flex-col">
-          <span className="text-k-900 typo-sb-4">{title}</span>
-          <span className="text-center text-k-400 typo-medium-1">{subTitle}</span>
+        <div className="flex min-w-0 flex-col">
+          <span className="truncate text-k-900 typo-sb-4" title={title}>
+            {title}
+          </span>
+          <span className="truncate text-k-400 typo-medium-1" title={subTitle}>
+            {subTitle}
+          </span>
         </div>
       </div>
     </div>