From 50190331ae21db728f54c62bf13eeeb252065ea5 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Wed, 24 Jun 2026 22:00:31 +0900
Subject: [PATCH 01/20] =?UTF-8?q?feat:=20=EB=8D=B0=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=ED=86=B1=20=EC=B5=9C=EC=A0=81=ED=99=94=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_ui/UniversityDetail/_ui/TitleSection.tsx |  14 +-
 .../[id]/_ui/UniversityDetail/index.tsx       |  65 +++----
 .../[homeUniversity]/_ui/RegionFilter.tsx     |   2 +-
 .../[homeUniversity]/_ui/SearchBar.tsx        |   2 +-
 .../_ui/UniversityListContent.tsx             | 161 ++++++++++--------
 .../app/university/[homeUniversity]/page.tsx  |   6 +-
 .../components/layout/GlobalLayout/index.tsx  |  16 +-
 .../ui/BottomNavigation/index.tsx             |   2 +-
 .../ui/DesktopNavigation/index.tsx            |  97 +++++++++++
 .../layout/PathBasedNavigation/index.tsx      |   2 +-
 .../components/layout/TopDetailNavigation.tsx |   2 +-
 .../src/components/ui/TopLogoBar/index.tsx    |   2 +-
 .../university/UniversityCards/index.tsx      |  10 +-
 .../(home)/_ui/FindLastYearScoreBar/index.tsx |   2 +-
 .../app/(home)/_ui/HomeActionLinks/index.tsx  |   6 +-
 .../_ui/HomeUniversitySearchSection/index.tsx |  18 +-
 .../src/app/(home)/_ui/NewsSection/index.tsx  |  18 +-
 .../_ui/PopularUniversityCard.tsx             |  12 +-
 .../_ui/PopularUniversitySection/index.tsx    |   8 +-
 apps/web/src/app/(home)/page.tsx              |  34 ++--
 .../community/[boardCode]/PostWriteButton.tsx |   2 +-
 .../[boardCode]/[postId]/CommentInput.tsx     |   2 +-
 .../[postId]/modify/PostModifyForm.tsx        |   2 +-
 .../InterestCountriesScreen/index.tsx         |   2 +-
 .../_components/StudyStatusScreen/index.tsx   |   2 +-
 .../_components/UniversityScreen/index.tsx    |   2 +-
 .../my/password/_ui/PasswordContent/index.tsx |   2 +-
 .../src/app/sign-up/email/EmailSignUpForm.tsx |   2 +-
 .../ApplicationBottomActionBar.tsx            |   2 +-
 .../src/app/university/score/ScoreScreen.tsx  |   2 +-
 .../score/submit/gpa/GpaSubmitForm.tsx        |   2 +-
 .../language-test/LanguageTestSubmitForm.tsx  |   2 +-
 .../components/layout/GlobalLayout/index.tsx  |  16 +-
 .../ui/BottomNavigation/index.tsx             |   2 +-
 .../ui/DesktopNavigation/index.tsx            |  89 ++++++++++
 .../layout/PathBasedNavigation/index.tsx      |   2 +-
 .../components/layout/TopDetailNavigation.tsx |   2 +-
 .../src/components/ui/TopLogoBar/index.tsx    |   2 +-
 .../university/UniversityCards/index.tsx      |  10 +-
 39 files changed, 437 insertions(+), 189 deletions(-)
 create mode 100644 apps/university-web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsx
 create mode 100644 apps/web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsx

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 (
-    <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>
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..1f8c6b053 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
@@ -15,12 +15,12 @@ interface UniversityDetailProps {
 
 const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) => {
   return (
-    <div className="relative">
-      <div className="absolute top-4 flex w-full justify-between gap-3 px-5">
+    <div className="relative md:bg-k-0">
+      <div className="absolute top-4 z-20 flex w-full justify-between gap-3 px-5 md:top-8 md:justify-end md:px-8 lg:px-10">
         <UniversityBtns universityId={university.id} />
       </div>
 
-      <div className="relative -z-10 h-60 w-full bg-blue-100">
+      <div className="relative -z-10 h-60 w-full bg-blue-100 md:z-0 md:h-80">
         <Image
           alt="대학 이미지"
           src={normalizeImageUrlToUploadCdn(university.backgroundImageUrl)}
@@ -29,7 +29,7 @@ const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) =>
           fallbackSrc="/svgs/placeholders/image-placeholder.svg"
         />
       </div>
-      <div className="z-30 -mt-16 rounded-t-3xl bg-white px-5">
+      <div className="relative z-10 -mt-16 rounded-t-3xl bg-white px-5 md:-mt-20 md:rounded-none md:px-8 md:pb-16 lg:px-10">
         <TitleSection
           title={koreanName}
           subTitle={university.englishName}
@@ -41,34 +41,41 @@ const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) =>
           <span className="px-[30px] text-k-900 typo-sb-9">{university.country}</span>
           <span className="px-[30px] text-k-900 typo-sb-9">모집 {university.studentCapacity}명</span>
         </div>
-        <LanguageSection
-          detailsForLanguage={university.detailsForLanguage}
-          languageRequirements={university.languageRequirements}
-        />
-        <InfoSection
-          semesterRequirement={university.semesterRequirement}
-          semesterAvailableForDispatch={university.semesterAvailableForDispatch}
-          detailsForApply={university.detailsForApply}
-          detailsForAccommodation={university?.detailsForAccommodation}
-        />
-        <div className="h-1 bg-k-50" />
-        <div className="my-7 px-3">
-          <div className="mb-3 text-k-900 typo-sb-7">전공상세</div>
-          <div className="break-words text-k-600 typo-medium-2">
-            <LinkifyText>{university?.detailsForMajor}</LinkifyText>
-          </div>
-        </div>
-        <div className="h-1 bg-k-50" />
-        <div className="my-7 px-3">
-          <div className="mb-3 text-k-900 typo-sb-7">영어강의 리스트</div>
+        <div className="md:grid md:grid-cols-[minmax(320px,420px)_minmax(0,1fr)] md:gap-8">
           <div>
-            <span className="break-words text-k-600 typo-medium-2">
-              <LinkifyText>{university?.detailsForEnglishCourse}</LinkifyText>
-            </span>
+            <LanguageSection
+              detailsForLanguage={university.detailsForLanguage}
+              languageRequirements={university.languageRequirements}
+            />
+            <InfoSection
+              semesterRequirement={university.semesterRequirement}
+              semesterAvailableForDispatch={university.semesterAvailableForDispatch}
+              detailsForApply={university.detailsForApply}
+              detailsForAccommodation={university?.detailsForAccommodation}
+            />
+          </div>
+
+          <div className="min-w-0">
+            <div className="h-1 bg-k-50" />
+            <div className="my-7 px-3">
+              <div className="mb-3 text-k-900 typo-sb-7">전공상세</div>
+              <div className="break-words text-k-600 typo-medium-2">
+                <LinkifyText>{university?.detailsForMajor}</LinkifyText>
+              </div>
+            </div>
+            <div className="h-1 bg-k-50" />
+            <div className="my-7 px-3">
+              <div className="mb-3 text-k-900 typo-sb-7">영어강의 리스트</div>
+              <div>
+                <span className="break-words text-k-600 typo-medium-2">
+                  <LinkifyText>{university?.detailsForEnglishCourse}</LinkifyText>
+                </span>
+              </div>
+            </div>
+            <MapSection universityEnglishName={university.englishName} />
           </div>
         </div>
-        <MapSection universityEnglishName={university.englishName} />
-        <div className="h-48" />
+        <div className="h-48 md:h-0" />
       </div>
     </div>
   );
diff --git a/apps/university-web/src/app/university/[homeUniversity]/_ui/RegionFilter.tsx b/apps/university-web/src/app/university/[homeUniversity]/_ui/RegionFilter.tsx
index 8f5249663..a55298b5b 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/_ui/RegionFilter.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/_ui/RegionFilter.tsx
@@ -19,7 +19,7 @@ interface RegionFilterProps {
 
 const RegionFilter = ({ selectedRegions, onRegionChange }: RegionFilterProps) => {
   return (
-    <div className="mb-4 flex gap-2 overflow-x-auto pb-1">
+    <div className="mb-4 flex gap-2 overflow-x-auto pb-1 md:flex-col md:overflow-visible">
       {REGIONS.map(({ value, label }) => {
         const isSelected = selectedRegions.includes(value);
 
diff --git a/apps/university-web/src/app/university/[homeUniversity]/_ui/SearchBar.tsx b/apps/university-web/src/app/university/[homeUniversity]/_ui/SearchBar.tsx
index 53763d051..c0639ccfc 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/_ui/SearchBar.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/_ui/SearchBar.tsx
@@ -15,7 +15,7 @@ const SearchBar = ({ value, onChange, homeUniversitySlug }: SearchBarProps) => {
   const [isFocused, setIsFocused] = useState(false);
 
   return (
-    <div className="mb-4 mt-2">
+    <div className="mb-4 mt-2 md:mt-0">
       <div
         className={`flex items-center gap-2 rounded-lg border px-4 py-3 transition-colors ${
           isFocused ? "border-primary bg-primary-50" : "border-k-100 bg-k-50"
diff --git a/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsx b/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsx
index 87976a498..2c94131f8 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsx
@@ -22,6 +22,7 @@ import SearchBar from "./SearchBar";
 interface UniversityListContentProps {
   universities: ListUniversity[];
   homeUniversitySlug: HomeUniversitySlug;
+  title: string;
 }
 
 const isCountryCode = (value: string): value is CountryCode => Object.hasOwn(COUNTRY_CODE_MAP, value);
@@ -44,62 +45,72 @@ const REGION_FILTER_ITEMS = [
   { value: RegionEnumExtend.CHINA, label: "중국권" },
 ] as const;
 
-const UniversityListPrerenderFallback = ({ universities, homeUniversitySlug }: UniversityListContentProps) => (
-  <div className="px-5">
-    <div className="mb-4 mt-2">
-      <div className="flex items-center gap-2 rounded-lg border border-k-100 bg-k-50 px-4 py-3 text-k-400">
-        <IconSearch className="h-5 w-5" />
-        <span className="flex-1 typo-medium-4">학교명 또는 국가 검색</span>
-      </div>
-
-      <Link
-        href={`/university/${homeUniversitySlug}/search`}
-        className="mt-2 flex items-center justify-end gap-1 text-k-500 typo-medium-5 hover:text-primary"
-      >
-        <span>조건 검색</span>
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M4.5 9L7.5 6L4.5 3"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </Link>
+const UniversityListPrerenderFallback = ({ universities, homeUniversitySlug, title }: UniversityListContentProps) => (
+  <div className="px-5 md:px-8 md:py-8 lg:px-10">
+    <div className="mb-6 hidden md:block">
+      <h1 className="text-k-900 typo-bold-1">{title}</h1>
     </div>
 
-    <div className="mb-4 flex gap-2 overflow-x-auto pb-1">
-      {REGION_FILTER_ITEMS.map(({ value, label }) => (
-        <span
-          key={value}
-          className={
-            value === RegionEnumExtend.ALL
-              ? "whitespace-nowrap rounded-full border border-primary bg-primary-100 px-4 py-2 text-primary typo-medium-4"
-              : "whitespace-nowrap rounded-full border border-k-100 bg-k-50 px-4 py-2 text-k-500 typo-medium-4"
-          }
-        >
-          {label}
-        </span>
-      ))}
-    </div>
+    <div className="md:grid md:grid-cols-[280px_minmax(0,1fr)] md:items-start md:gap-8">
+      <aside className="md:sticky md:top-8">
+        <div className="mb-4 mt-2 md:mt-0">
+          <div className="flex items-center gap-2 rounded-lg border border-k-100 bg-k-50 px-4 py-3 text-k-400">
+            <IconSearch className="h-5 w-5" />
+            <span className="flex-1 typo-medium-4">학교명 또는 국가 검색</span>
+          </div>
+
+          <Link
+            href={`/university/${homeUniversitySlug}/search`}
+            className="mt-2 flex items-center justify-end gap-1 text-k-500 typo-medium-5 hover:text-primary"
+          >
+            <span>조건 검색</span>
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M4.5 9L7.5 6L4.5 3"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </Link>
+        </div>
 
-    <div className="mb-3 text-k-500 typo-medium-4">
-      총 <span className="text-primary typo-bold-4">{universities.length}</span>개 학교
-    </div>
+        <div className="mb-4 flex gap-2 overflow-x-auto pb-1 md:flex-col md:overflow-visible">
+          {REGION_FILTER_ITEMS.map(({ value, label }) => (
+            <span
+              key={value}
+              className={
+                value === RegionEnumExtend.ALL
+                  ? "whitespace-nowrap rounded-full border border-primary bg-primary-100 px-4 py-2 text-primary typo-medium-4"
+                  : "whitespace-nowrap rounded-full border border-k-100 bg-k-50 px-4 py-2 text-k-500 typo-medium-4"
+              }
+            >
+              {label}
+            </span>
+          ))}
+        </div>
+      </aside>
 
-    {universities.length === 0 ? (
-      <div className="flex flex-col items-center justify-center py-20">
-        <p className="text-k-400 typo-medium-3">검색 결과가 없습니다.</p>
-        <p className="mt-1 text-k-300 typo-medium-4">다른 검색어나 필터를 시도해보세요.</p>
-      </div>
-    ) : (
-      <UniversityCards colleges={universities} className="mt-3" linkPrefix={`/university/${homeUniversitySlug}`} />
-    )}
+      <section className="min-w-0">
+        <div className="mb-3 text-k-500 typo-medium-4">
+          총 <span className="text-primary typo-bold-4">{universities.length}</span>개 학교
+        </div>
+
+        {universities.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-20">
+            <p className="text-k-400 typo-medium-3">검색 결과가 없습니다.</p>
+            <p className="mt-1 text-k-300 typo-medium-4">다른 검색어나 필터를 시도해보세요.</p>
+          </div>
+        ) : (
+          <UniversityCards colleges={universities} className="mt-3" linkPrefix={`/university/${homeUniversitySlug}`} />
+        )}
+      </section>
+    </div>
   </div>
 );
 
-const UniversityListContentInner = ({ universities, homeUniversitySlug }: UniversityListContentProps) => {
+const UniversityListContentInner = ({ universities, homeUniversitySlug, title }: UniversityListContentProps) => {
   const searchParams = useSearchParams();
   const querySearchText = searchParams.get("searchText") ?? "";
   const languageTestTypeParam = searchParams.get("languageTestType");
@@ -155,29 +166,39 @@ const UniversityListContentInner = ({ universities, homeUniversitySlug }: Univer
   }, [universities, searchText, selectedRegions, queryLanguageTestType, queryCountryCodesKey]);
 
   return (
-    <div className="px-5">
-      <SearchBar value={searchText} onChange={setSearchText} homeUniversitySlug={homeUniversitySlug} />
-
-      <RegionFilter selectedRegions={selectedRegions} onRegionChange={(region) => setSelectedRegions([region])} />
-
-      {/* 결과 카운트 */}
-      <div className="mb-3 text-k-500 typo-medium-4">
-        총 <span className="text-primary typo-bold-4">{filteredUniversities.length}</span>개 학교
+    <div className="px-5 md:px-8 md:py-8 lg:px-10">
+      <div className="mb-6 hidden md:block">
+        <h1 className="text-k-900 typo-bold-1">{title}</h1>
       </div>
 
-      {/* 결과 표시 */}
-      {filteredUniversities.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20">
-          <p className="text-k-400 typo-medium-3">검색 결과가 없습니다.</p>
-          <p className="mt-1 text-k-300 typo-medium-4">다른 검색어나 필터를 시도해보세요.</p>
-        </div>
-      ) : (
-        <UniversityCards
-          colleges={filteredUniversities}
-          className="mt-3"
-          linkPrefix={`/university/${homeUniversitySlug}`}
-        />
-      )}
+      <div className="md:grid md:grid-cols-[280px_minmax(0,1fr)] md:items-start md:gap-8">
+        <aside className="md:sticky md:top-8">
+          <SearchBar value={searchText} onChange={setSearchText} homeUniversitySlug={homeUniversitySlug} />
+
+          <RegionFilter selectedRegions={selectedRegions} onRegionChange={(region) => setSelectedRegions([region])} />
+        </aside>
+
+        <section className="min-w-0">
+          {/* 결과 카운트 */}
+          <div className="mb-3 text-k-500 typo-medium-4">
+            총 <span className="text-primary typo-bold-4">{filteredUniversities.length}</span>개 학교
+          </div>
+
+          {/* 결과 표시 */}
+          {filteredUniversities.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-20">
+              <p className="text-k-400 typo-medium-3">검색 결과가 없습니다.</p>
+              <p className="mt-1 text-k-300 typo-medium-4">다른 검색어나 필터를 시도해보세요.</p>
+            </div>
+          ) : (
+            <UniversityCards
+              colleges={filteredUniversities}
+              className="mt-3"
+              linkPrefix={`/university/${homeUniversitySlug}`}
+            />
+          )}
+        </section>
+      </div>
 
       <FloatingUpBtn />
     </div>
diff --git a/apps/university-web/src/app/university/[homeUniversity]/page.tsx b/apps/university-web/src/app/university/[homeUniversity]/page.tsx
index e5cc67f7d..d04c890c8 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/page.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/page.tsx
@@ -60,7 +60,11 @@ const UniversityListPage = async ({ params }: PageProps) => {
   return (
     <>
       <TopDetailNavigation title={`${universityInfo.shortName} 파견학교`} backHref="/university" />
-      <UniversityListContent universities={universities} homeUniversitySlug={homeUniversitySlug} />
+      <UniversityListContent
+        universities={universities}
+        homeUniversitySlug={homeUniversitySlug}
+        title={`${universityInfo.shortName} 파견학교`}
+      />
     </>
   );
 };
diff --git a/apps/university-web/src/components/layout/GlobalLayout/index.tsx b/apps/university-web/src/components/layout/GlobalLayout/index.tsx
index aee5bc8ab..9e1b5e10c 100644
--- a/apps/university-web/src/components/layout/GlobalLayout/index.tsx
+++ b/apps/university-web/src/components/layout/GlobalLayout/index.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import AIInspectorFab from "./ui/AIInspectorFab/index";
 import BottomNavigation from "./ui/BottomNavigation";
 import ClientModal from "./ui/ClientModal";
+import DesktopNavigation from "./ui/DesktopNavigation";
 
 // import ServerModal from "./ui/ServerModal";
 
@@ -14,12 +15,15 @@ type LayoutProps = {
 
 const GlobalLayout = ({ children }: LayoutProps) => {
   return (
-    <div className="mx-auto mb-14 w-full min-w-app max-w-app pt-14">
-      {children}
-      <BottomNavigation />
-      <AIInspectorFab />
-      <ClientModal />
-      {/* <ServerModal /> */}
+    <div className="min-h-screen bg-white md:bg-k-50 md:pl-[88px]">
+      <DesktopNavigation />
+      <div className="mx-auto mb-14 min-h-screen w-full min-w-app max-w-app bg-white pt-14 md:mx-0 md:mb-0 md:min-w-0 md:max-w-none md:pt-0">
+        {children}
+        <BottomNavigation />
+        <AIInspectorFab />
+        <ClientModal />
+        {/* <ServerModal /> */}
+      </div>
     </div>
   );
 };
diff --git a/apps/university-web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx b/apps/university-web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx
index ad0bafc81..454ccbd9c 100644
--- a/apps/university-web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx
+++ b/apps/university-web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx
@@ -38,7 +38,7 @@ const BottomNavigation = () => {
   }
 
   return (
-    <nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white shadow-magic-bottom-nav">
+    <nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white shadow-magic-bottom-nav md:hidden">
       {NAV_ITEMS.map(({ route, text, iconType }) => {
         const isActive = isRouteActive(pathname, route);
         const className = `flex flex-[1_0_0] flex-col items-center self-stretch px-3 pb-2 pt-1.5 no-underline ${
diff --git a/apps/university-web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsx b/apps/university-web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsx
new file mode 100644
index 000000000..73cb89b3b
--- /dev/null
+++ b/apps/university-web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import clsx from "clsx";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { IconCloud } from "@/public/svgs/home";
+import { NAV_ITEMS } from "../BottomNavigation/constant/NAV_ITEMS";
+import isRouteActive from "../BottomNavigation/lib/isRouteActive";
+import DegreeHat from "../BottomNavigation/ui/DegreeHat";
+import EditTwo from "../BottomNavigation/ui/EditTwo";
+import Home from "../BottomNavigation/ui/Home";
+import Human from "../BottomNavigation/ui/Human";
+import WhatsNew from "../BottomNavigation/ui/WhatsNew";
+
+const ICON_COMPONENTS = {
+  university: DegreeHat,
+  community: EditTwo,
+  home: Home,
+  mentor: WhatsNew,
+  my: Human,
+} as const;
+
+const UNIVERSITY_ZONE_ROUTE_PREFIX = "/university";
+const mainWebOrigin = process.env.NEXT_PUBLIC_WEB_URL?.replace(/\/$/, "");
+
+const getMainWebHref = (route: string) => {
+  if (!mainWebOrigin) {
+    return route;
+  }
+
+  return `${mainWebOrigin}${route === "/" ? "" : route}`;
+};
+
+const DesktopNavigation = () => {
+  const pathname = usePathname();
+
+  return (
+    <nav
+      className="fixed inset-y-0 left-0 z-40 hidden w-[88px] flex-col border-r border-k-100 bg-white px-3 py-4 md:flex"
+      aria-label="주요 메뉴"
+    >
+      <a
+        href={getMainWebHref("/")}
+        className="flex h-14 w-full items-center justify-center rounded-2xl bg-primary text-k-0"
+        aria-label="홈으로 이동"
+      >
+        <IconCloud />
+      </a>
+
+      <div className="mt-6 flex flex-1 flex-col gap-2">
+        {NAV_ITEMS.map(({ route, text, iconType }) => {
+          const isActive = isRouteActive(pathname, route);
+          const IconComp = ICON_COMPONENTS[iconType];
+          const className = clsx(
+            "flex h-[70px] flex-col items-center justify-center gap-1 rounded-2xl text-center transition-colors typo-medium-5",
+            isActive ? "bg-primary-100 text-primary" : "text-k-500 hover:bg-k-50 hover:text-k-700",
+          );
+          const content = (
+            <>
+              <IconComp />
+              <span>{text}</span>
+            </>
+          );
+
+          if (!route.startsWith(UNIVERSITY_ZONE_ROUTE_PREFIX)) {
+            return (
+              <a
+                key={text}
+                href={getMainWebHref(route)}
+                aria-current={isActive ? "page" : undefined}
+                aria-label={`${text} 페이지로 이동`}
+                className={className}
+              >
+                {content}
+              </a>
+            );
+          }
+
+          return (
+            <Link
+              key={text}
+              href={route}
+              aria-current={isActive ? "page" : undefined}
+              aria-label={`${text} 페이지로 이동`}
+              className={className}
+            >
+              {content}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+};
+
+export default DesktopNavigation;
diff --git a/apps/university-web/src/components/layout/PathBasedNavigation/index.tsx b/apps/university-web/src/components/layout/PathBasedNavigation/index.tsx
index 9774c4002..29da7c845 100644
--- a/apps/university-web/src/components/layout/PathBasedNavigation/index.tsx
+++ b/apps/university-web/src/components/layout/PathBasedNavigation/index.tsx
@@ -40,7 +40,7 @@ const PathBasedNavigation = ({
   }
 
   return (
-    <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5">
+    <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5 md:hidden">
       <button className="min-w-6 cursor-pointer" onClick={handleBack || routeBack} type="button" aria-label="뒤로 가기">
         <IconArrowBackFilled />
       </button>
diff --git a/apps/university-web/src/components/layout/TopDetailNavigation.tsx b/apps/university-web/src/components/layout/TopDetailNavigation.tsx
index eb67ed945..fba9c908b 100644
--- a/apps/university-web/src/components/layout/TopDetailNavigation.tsx
+++ b/apps/university-web/src/components/layout/TopDetailNavigation.tsx
@@ -23,7 +23,7 @@ const TopDetailNavigation = ({ title, handleBack, backHref, icon }: TopDetailNav
   };
 
   return (
-    <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5">
+    <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5 md:hidden">
       <button className="min-w-6 cursor-pointer" onClick={handleBack || routeBack} type="button" aria-label="뒤로 가기">
         <IconArrowBackFilled />
       </button>
diff --git a/apps/university-web/src/components/ui/TopLogoBar/index.tsx b/apps/university-web/src/components/ui/TopLogoBar/index.tsx
index 4b6ddd3eb..b0e19468a 100644
--- a/apps/university-web/src/components/ui/TopLogoBar/index.tsx
+++ b/apps/university-web/src/components/ui/TopLogoBar/index.tsx
@@ -5,7 +5,7 @@ import { IconCloud } from "@/public/svgs/home";
 const TopLogoBar = () => (
   <div
     className={clsx(
-      "fixed top-0 z-30 flex h-14 w-full max-w-app items-center",
+      "fixed top-0 z-30 flex h-14 w-full max-w-app items-center md:hidden",
       "bg-gradient-to-r from-primary-1 to-sub-b",
     )}
   >
diff --git a/apps/university-web/src/components/university/UniversityCards/index.tsx b/apps/university-web/src/components/university/UniversityCards/index.tsx
index 19d1fe05c..a960c5d70 100644
--- a/apps/university-web/src/components/university/UniversityCards/index.tsx
+++ b/apps/university-web/src/components/university/UniversityCards/index.tsx
@@ -15,9 +15,15 @@ type UniversityCardsProps = {
 
 const UniversityCards = ({ colleges, style, className, showCapacity = true, linkPrefix }: UniversityCardsProps) => {
   return (
-    <div className={clsx("flex flex-col gap-2.5", className)} style={style}>
+    <div
+      className={clsx(
+        "flex flex-col gap-2.5 md:grid md:grid-cols-2 md:gap-3 xl:grid-cols-3 2xl:grid-cols-4",
+        className,
+      )}
+      style={style}
+    >
       {colleges.map((college) => (
-        <div key={college.id} className="pb-2.5">
+        <div key={college.id} className="pb-2.5 md:pb-0">
           <UniversityCard university={college} showCapacity={showCapacity} linkPrefix={linkPrefix} />
         </div>
       ))}
diff --git a/apps/web/src/app/(home)/_ui/FindLastYearScoreBar/index.tsx b/apps/web/src/app/(home)/_ui/FindLastYearScoreBar/index.tsx
index 0ac498d80..55ad11fe5 100644
--- a/apps/web/src/app/(home)/_ui/FindLastYearScoreBar/index.tsx
+++ b/apps/web/src/app/(home)/_ui/FindLastYearScoreBar/index.tsx
@@ -6,7 +6,7 @@ import { IconGraduationCap, IconRightArrow } from "@/public/svgs/home";
 const FindLastYearScoreBar = () => {
   return (
     <button
-      className="h-15 flex w-full cursor-pointer items-center justify-between border-b border-k-100 px-5 py-3 focus:outline-none"
+      className="h-15 flex w-full cursor-pointer items-center justify-between border-b border-k-100 px-5 py-3 focus:outline-none md:h-auto md:rounded-xl md:border md:border-k-100 md:bg-k-0 md:py-4"
       onClick={() => showIconToast("logo", "해당 기능은 현재 준비중입니다.")}
     >
       <div>
diff --git a/apps/web/src/app/(home)/_ui/HomeActionLinks/index.tsx b/apps/web/src/app/(home)/_ui/HomeActionLinks/index.tsx
index cf3a20636..2ccb4da8a 100644
--- a/apps/web/src/app/(home)/_ui/HomeActionLinks/index.tsx
+++ b/apps/web/src/app/(home)/_ui/HomeActionLinks/index.tsx
@@ -5,8 +5,8 @@ import { IconIdCard, IconMagnifyingGlass, IconMuseum, IconPaper } from "@/public
 
 const HomeActionLinks = () => {
   return (
-    <div className="flex flex-col gap-2.5 px-5 py-3.5">
-      <div className="flex gap-2">
+    <div className="flex flex-col gap-2.5 px-5 py-3.5 md:px-0 md:py-0">
+      <div className="grid grid-cols-2 gap-2">
         <UniversityZoneLink
           className="flex flex-1 flex-col gap-2 rounded-lg bg-bg-accent-blue p-2.5"
           href="/university/search"
@@ -28,8 +28,6 @@ const HomeActionLinks = () => {
             <IconPaper />
           </div>
         </Link>
-      </div>
-      <div className="flex gap-2">
         <Link
           className="flex flex-1 flex-col gap-2 rounded-lg bg-bg-accent-orange p-2.5"
           href="/university/application/apply"
diff --git a/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsx b/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsx
index 28fe2091c..707fdaa31 100644
--- a/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsx
+++ b/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsx
@@ -22,10 +22,10 @@ const HomeUniversitySearchSection = () => {
   } = useHomeUniversitySearch();
 
   return (
-    <section className="px-5 py-5">
+    <section className="px-5 py-5 md:px-0 md:py-0">
       <h2 className="mb-4 text-k-900 typo-bold-1">파견 학교 찾기</h2>
 
-      <div className="mb-3 flex gap-2 overflow-x-auto">
+      <div className="mb-3 flex gap-2 overflow-x-auto md:flex-wrap md:overflow-visible">
         {homeUniversities.map((university) => {
           const isSelected = university.slug === selectedHomeUniversitySlug;
 
@@ -73,14 +73,14 @@ const HomeUniversitySearchSection = () => {
             />
           );
         })}
-      </div>
 
-      <UniversityZoneLink
-        href={searchHref}
-        className="mt-3 w-full rounded-lg bg-primary px-4 py-4 text-center text-k-0 transition-colors typo-sb-9 hover:bg-primary-600"
-      >
-        학교 검색하기
-      </UniversityZoneLink>
+        <UniversityZoneLink
+          href={searchHref}
+          className="w-full rounded-lg bg-primary px-4 py-4 text-center text-k-0 transition-colors typo-sb-9 hover:bg-primary-600"
+        >
+          학교 검색하기
+        </UniversityZoneLink>
+      </div>
     </section>
   );
 };
diff --git a/apps/web/src/app/(home)/_ui/NewsSection/index.tsx b/apps/web/src/app/(home)/_ui/NewsSection/index.tsx
index e0c4e3b86..1b1d3ed24 100644
--- a/apps/web/src/app/(home)/_ui/NewsSection/index.tsx
+++ b/apps/web/src/app/(home)/_ui/NewsSection/index.tsx
@@ -14,7 +14,7 @@ const NewsSection = ({ newsList }: NewsSectionProps) => {
   const { sectionRef, visible } = useSectionHandler();
 
   return (
-    <div ref={sectionRef} className="mt-6 pl-5">
+    <div ref={sectionRef} className="mt-6 px-5 md:mt-0 md:px-0">
       <div className="mb-2.5 flex items-center gap-1.5 font-serif text-k-700 typo-sb-7">
         솔커에서 맛보는 소식
         <IconLoveLetter />
@@ -26,11 +26,11 @@ const NewsSection = ({ newsList }: NewsSectionProps) => {
         </Link> */}
       </div>
       {!visible ? (
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 md:grid md:grid-cols-3">
           {Array.from({ length: 3 }).map((_, idx) => (
-            <div key={idx} className="flex animate-pulse gap-4">
-              <div className="h-24 w-44 shrink-0 rounded-xl bg-gray-300" />
-              <div className="mr-5 flex flex-col gap-2">
+            <div key={idx} className="flex animate-pulse gap-4 md:flex-col">
+              <div className="h-24 w-44 shrink-0 rounded-xl bg-gray-300 md:w-full" />
+              <div className="flex flex-col gap-2">
                 <div className="h-5 w-32 rounded bg-gray-300" />
                 <div className="h-4 w-40 rounded bg-gray-200" />
               </div>
@@ -38,20 +38,20 @@ const NewsSection = ({ newsList }: NewsSectionProps) => {
           ))}
         </div>
       ) : (
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 md:grid md:grid-cols-3">
           {newsList.map((news) => (
             <Link key={news.id} target="_blank" href={news.url} rel="noreferrer">
-              <div className="flex gap-4">
+              <div className="flex gap-4 md:flex-col">
                 <Image
                   loading="lazy"
-                  className="h-24 w-44 shrink-0 rounded-xl object-cover"
+                  className="h-24 w-44 shrink-0 rounded-xl object-cover md:w-full"
                   src={news.imageUrl}
                   cdnHostType="default"
                   alt={news.title}
                   width={170}
                   height={90}
                 />
-                <div className="mr-5 flex flex-col gap-0.5">
+                <div className="flex flex-col gap-0.5">
                   <div className="text-serif text-k-700 typo-sb-9">{news.title}</div>
                   <div className="font-serif text-k-500 typo-regular-4">{news.description}</div>
                 </div>
diff --git a/apps/web/src/app/(home)/_ui/PopularUniversitySection/_ui/PopularUniversityCard.tsx b/apps/web/src/app/(home)/_ui/PopularUniversitySection/_ui/PopularUniversityCard.tsx
index ab055b4c3..e152aa291 100644
--- a/apps/web/src/app/(home)/_ui/PopularUniversitySection/_ui/PopularUniversityCard.tsx
+++ b/apps/web/src/app/(home)/_ui/PopularUniversitySection/_ui/PopularUniversityCard.tsx
@@ -28,11 +28,11 @@ const PopularUniversityCard = ({
   const universityDetailHref = `/university/${homeUniversitySlug}/${university.id}`;
 
   return (
-    <UniversityZoneLink key={university.id} href={universityDetailHref}>
-      <div className="relative w-[153px]">
-        <div className="relative h-[120px] w-[153px] overflow-hidden rounded-lg bg-k-700">
+    <UniversityZoneLink key={university.id} href={universityDetailHref} className="block md:min-w-0">
+      <div className="relative w-[153px] md:w-full">
+        <div className="relative h-[120px] w-[153px] overflow-hidden rounded-lg bg-k-700 md:h-40 md:w-full">
           <Image
-            className="h-[120px] rounded-lg object-cover"
+            className="h-[120px] rounded-lg object-cover md:h-40 md:w-full"
             src={
               university.backgroundImageUrl
                 ? normalizeImageUrlToUploadCdn(university.backgroundImageUrl)
@@ -44,7 +44,7 @@ const PopularUniversityCard = ({
             priority={priority}
             loading={loading}
             fetchPriority={fetchPriority}
-            sizes="(max-width: 600px) 100vw, (max-width: 768px) 50vw, 153px"
+            sizes="(max-width: 600px) 153px, (max-width: 1280px) 25vw, 16vw"
             quality={quality}
             placeholder={!priority ? "blur" : undefined}
             blurDataURL={
@@ -55,7 +55,7 @@ const PopularUniversityCard = ({
             fallbackSrc="/svgs/placeholders/university-background-placeholder.svg"
           />
         </div>
-        <div className="absolute bottom-[9px] left-[10px] z-10 tracking-[0.15px] text-white typo-sb-9">
+        <div className="absolute bottom-[9px] left-[10px] right-2 z-10 truncate tracking-[0.15px] text-white typo-sb-9">
           {university.koreanName}
         </div>
       </div>
diff --git a/apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx b/apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx
index a8db309d7..8aded683d 100644
--- a/apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx
+++ b/apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx
@@ -11,8 +11,8 @@ const PopularUniversitySection = ({ universities }: PopularUniversitySectionProp
   const belowFold = universities.slice(3);
 
   return (
-    <div className="overflow-x-auto">
-      <div className="flex gap-2">
+    <div className="overflow-x-auto md:overflow-visible">
+      <div className="flex gap-2 md:grid md:grid-cols-3 md:gap-3 xl:grid-cols-4 2xl:grid-cols-6">
         {/* 첫 3장은 즉시 전송 – LCP 후보 */}
         {aboveFold.map((university, index) => (
           <PopularUniversityCard
@@ -30,8 +30,8 @@ const PopularUniversitySection = ({ universities }: PopularUniversitySectionProp
           <Suspense
             key={university.id}
             fallback={
-              <div className="relative w-[153px]">
-                <div className="h-[120px] w-[153px] animate-pulse rounded-lg bg-gray-200" />
+              <div className="relative w-[153px] md:w-full">
+                <div className="h-[120px] w-[153px] animate-pulse rounded-lg bg-gray-200 md:w-full" />
               </div>
             }
           >
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index 5a400505b..060f8fd0c 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -113,20 +113,28 @@ const HomePage = async () => {
   return (
     <>
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }} />
-      <div className="w-full">
-        <FindLastYearScoreBar />
-        <HomeEntrySection />
-
-        <div className="border-t-[5px] border-k-50 py-5 pl-5">
-          <div className="mb-2 flex items-center gap-1.5 font-serif text-k-700 typo-sb-7">실시간 인기있는 파견학교</div>
-          <PopularUniversitySection universities={resolvedRecommendedUniversities} />
-        </div>
-
-        <div className="p-5">
-          <UniversityList allRegionsUniversityList={allRegionsUniversityList} />
+      <div className="w-full md:min-h-screen md:px-8 md:py-8 lg:px-10">
+        <div className="md:grid md:grid-cols-[minmax(320px,420px)_minmax(0,1fr)] md:items-start md:gap-8">
+          <div className="md:sticky md:top-8 md:flex md:flex-col md:gap-4">
+            <FindLastYearScoreBar />
+            <HomeEntrySection />
+          </div>
+
+          <div className="md:min-w-0 md:space-y-8">
+            <div className="border-t-[5px] border-k-50 py-5 pl-5 md:border-t-0 md:py-0 md:pl-0">
+              <div className="mb-2 flex items-center gap-1.5 font-serif text-k-700 typo-sb-7">
+                실시간 인기있는 파견학교
+              </div>
+              <PopularUniversitySection universities={resolvedRecommendedUniversities} />
+            </div>
+
+            <div className="p-5 md:p-0">
+              <UniversityList allRegionsUniversityList={allRegionsUniversityList} />
+            </div>
+
+            <NewsSection newsList={newsList} />
+          </div>
         </div>
-
-        <NewsSection newsList={newsList} />
       </div>
     </>
   );
diff --git a/apps/web/src/app/community/[boardCode]/PostWriteButton.tsx b/apps/web/src/app/community/[boardCode]/PostWriteButton.tsx
index bd0478ac9..9def6f87e 100644
--- a/apps/web/src/app/community/[boardCode]/PostWriteButton.tsx
+++ b/apps/web/src/app/community/[boardCode]/PostWriteButton.tsx
@@ -29,7 +29,7 @@ const PostWriteButton = ({ onClick }: PostWriteButtonProps) => {
 
   return (
     <div
-      className={`fixed bottom-16 flex w-full max-w-app flex-col items-center transition-transform duration-300 ease-in-out ${isVisible ? "translate-y-0" : "translate-y-[calc(100%+66px)]"} `}
+      className={`fixed bottom-16 flex w-full max-w-app flex-col items-center transition-transform duration-300 ease-in-out md:bottom-6 md:left-[88px] md:w-[calc(100%-88px)] md:max-w-none ${isVisible ? "translate-y-0" : "translate-y-[calc(100%+66px)]"} `}
     >
       <button
         className="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-primary shadow-magic-floating-action"
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx b/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
index c3b219adf..a7c6f4705 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
@@ -38,7 +38,7 @@ const CommentInput = ({ postId, curSelectedComment, setCurSelectedComment, refre
   };
 
   return (
-    <div className="fixed bottom-14 flex w-full min-w-app max-w-app items-center gap-3 border-t border-bg-400 bg-k-0 p-2">
+    <div className="fixed bottom-14 flex w-full min-w-app max-w-app items-center gap-3 border-t border-bg-400 bg-k-0 p-2 md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:min-w-0 md:max-w-none">
       <div className="w-full">
         {curSelectedComment && (
           <div className="flex h-10 w-full items-center justify-between rounded-t-lg bg-bg-500 px-2.5 pb-2.5 pt-3">
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx b/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
index 6dfdb2b4d..0f826da14 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
@@ -232,7 +232,7 @@ type CustomTopDetailNavigationProps = {
 };
 
 const CustomTopDetailNavigation = ({ routeBack, submitPost }: CustomTopDetailNavigationProps) => (
-  <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5">
+  <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5 md:hidden">
     <button className="min-w-6 cursor-pointer" onClick={routeBack} type="button" aria-label="뒤로 가기">
       <IconArrowBackFilled />
     </button>
diff --git a/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
index a95800dfb..0e10ac047 100644
--- a/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
@@ -130,7 +130,7 @@ const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
       </div>
 
       <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14">
-        <div className="mx-auto w-full max-w-app px-5">
+        <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
           <BlockBtn className="mb-[29px]" disabled={!selectedCountryCode} onClick={handleNext}>
             다음
           </BlockBtn>
diff --git a/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
index 003e9f034..5ce8d8cd0 100644
--- a/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
@@ -80,7 +80,7 @@ const StudyStatusScreen = ({ onNext }: StudyStatusScreenProps) => {
       </div>
 
       <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14">
-        <div className="mx-auto w-full max-w-app px-5">
+        <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
           <BlockBtn className="mb-[29px]" disabled={!preparationStatus} onClick={handleNext}>
             다음
           </BlockBtn>
diff --git a/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
index 95af3ef37..2bcb745c7 100644
--- a/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
@@ -203,7 +203,7 @@ const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
       </div>
 
       <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14">
-        <div className="mx-auto w-full max-w-app px-5">
+        <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
           <BlockBtn
             className="mb-[29px]"
             disabled={isSubmitting || !selectedCountryName || !universityId || !term || !verificationFile}
diff --git a/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx b/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
index aba847ee7..616a28e29 100644
--- a/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
+++ b/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
@@ -107,7 +107,7 @@ const PasswordContent = () => {
         )}
 
         <div className="fixed bottom-0 left-0 right-0 mb-20 w-full py-4">
-          <div className="mx-auto w-full max-w-app px-5">
+          <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
             {step === 0 && (
               <button
                 type="button"
diff --git a/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx b/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx
index 373c8af02..b53fae134 100644
--- a/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx
+++ b/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx
@@ -173,7 +173,7 @@ const EmailSignUpForm = () => {
         </div>
       </div>
 
-      <div className="fixed bottom-14 w-full max-w-app bg-white">
+      <div className="fixed bottom-14 w-full max-w-app bg-white md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:max-w-none">
         <div className="mb-[37px] px-5">
           <BlockBtn onClick={emailSignUp} disabled={!email || !password || !passwordConfirm || !passwordMatch}>
             다음
diff --git a/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
index c1ca01114..272c550e2 100644
--- a/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
+++ b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
@@ -7,7 +7,7 @@ type ApplicationBottomActionBarProps = {
 
 const ApplicationBottomActionBar = ({ label, onClick }: ApplicationBottomActionBarProps) => {
   return (
-    <div className="fixed bottom-14 w-full max-w-app bg-white">
+    <div className="fixed bottom-14 w-full max-w-app bg-white md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:max-w-none">
       <div className="mb-[37px] px-5">
         <BlockBtn onClick={onClick}>{label}</BlockBtn>
       </div>
diff --git a/apps/web/src/app/university/score/ScoreScreen.tsx b/apps/web/src/app/university/score/ScoreScreen.tsx
index 0c835884b..c57e8bcd0 100644
--- a/apps/web/src/app/university/score/ScoreScreen.tsx
+++ b/apps/web/src/app/university/score/ScoreScreen.tsx
@@ -85,7 +85,7 @@ const ScoreScreen = () => {
           </div>
         )}
       </div>
-      <div className="fixed bottom-14 w-full max-w-app bg-white">
+      <div className="fixed bottom-14 w-full max-w-app bg-white md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:max-w-none">
         <div className="mb-[37px] px-5">
           {curTab === "공인어학" ? (
             <BlockBtn onClick={() => router.push("/university/score/submit/language-test")}>
diff --git a/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx b/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
index 8913d5841..bac617d21 100644
--- a/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
+++ b/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
@@ -154,7 +154,7 @@ const GpaSubmitForm = () => {
             </div>
           </div>
         </div>
-        <div className="mt-10 w-full max-w-app">
+        <div className="mt-10 w-full max-w-app md:max-w-none">
           <button
             className={clsx(
               "mb-10 w-full rounded-lg py-4 text-white typo-sb-9",
diff --git a/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx b/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx
index 18e3072ce..36dac3921 100644
--- a/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx
+++ b/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx
@@ -158,7 +158,7 @@ const LanguageTestSubmitForm = () => {
             </div>
           </div>
         </div>
-        <div className="mt-10 w-full max-w-app px-5">
+        <div className="mt-10 w-full max-w-app px-5 md:max-w-none">
           <button
             className={clsx(
               "mb-10 w-full rounded-lg py-4 text-white typo-sb-9",
diff --git a/apps/web/src/components/layout/GlobalLayout/index.tsx b/apps/web/src/components/layout/GlobalLayout/index.tsx
index aee5bc8ab..9e1b5e10c 100644
--- a/apps/web/src/components/layout/GlobalLayout/index.tsx
+++ b/apps/web/src/components/layout/GlobalLayout/index.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import AIInspectorFab from "./ui/AIInspectorFab/index";
 import BottomNavigation from "./ui/BottomNavigation";
 import ClientModal from "./ui/ClientModal";
+import DesktopNavigation from "./ui/DesktopNavigation";
 
 // import ServerModal from "./ui/ServerModal";
 
@@ -14,12 +15,15 @@ type LayoutProps = {
 
 const GlobalLayout = ({ children }: LayoutProps) => {
   return (
-    <div className="mx-auto mb-14 w-full min-w-app max-w-app pt-14">
-      {children}
-      <BottomNavigation />
-      <AIInspectorFab />
-      <ClientModal />
-      {/* <ServerModal /> */}
+    <div className="min-h-screen bg-white md:bg-k-50 md:pl-[88px]">
+      <DesktopNavigation />
+      <div className="mx-auto mb-14 min-h-screen w-full min-w-app max-w-app bg-white pt-14 md:mx-0 md:mb-0 md:min-w-0 md:max-w-none md:pt-0">
+        {children}
+        <BottomNavigation />
+        <AIInspectorFab />
+        <ClientModal />
+        {/* <ServerModal /> */}
+      </div>
     </div>
   );
 };
diff --git a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx
index 4830dc587..b6ce6e9cf 100644
--- a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx
+++ b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx
@@ -30,7 +30,7 @@ const BottomNavigation = () => {
   }
 
   return (
-    <nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white shadow-magic-bottom-nav">
+    <nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white shadow-magic-bottom-nav md:hidden">
       {NAV_ITEMS.map(({ route, text, iconType }) => {
         const isActive = isRouteActive(pathname, route);
         const className = `flex flex-[1_0_0] flex-col items-center self-stretch px-3 pb-2 pt-1.5 no-underline ${
diff --git a/apps/web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsx b/apps/web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsx
new file mode 100644
index 000000000..8eeffac02
--- /dev/null
+++ b/apps/web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import clsx from "clsx";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import UniversityZoneLink from "@/components/ui/UniversityZoneLink";
+import { IconCloud } from "@/public/svgs/home";
+import { NAV_ITEMS } from "../BottomNavigation/constant/NAV_ITEMS";
+import isRouteActive from "../BottomNavigation/lib/isRouteActive";
+import DegreeHat from "../BottomNavigation/ui/DegreeHat";
+import EditTwo from "../BottomNavigation/ui/EditTwo";
+import Home from "../BottomNavigation/ui/Home";
+import Human from "../BottomNavigation/ui/Human";
+import WhatsNew from "../BottomNavigation/ui/WhatsNew";
+
+const ICON_COMPONENTS = {
+  university: DegreeHat,
+  community: EditTwo,
+  home: Home,
+  mentor: WhatsNew,
+  my: Human,
+} as const;
+
+const UNIVERSITY_ZONE_ROUTE = "/university";
+
+const DesktopNavigation = () => {
+  const pathname = usePathname();
+
+  return (
+    <nav
+      className="fixed inset-y-0 left-0 z-40 hidden w-[88px] flex-col border-r border-k-100 bg-white px-3 py-4 md:flex"
+      aria-label="주요 메뉴"
+    >
+      <Link
+        href="/"
+        className="flex h-14 w-full items-center justify-center rounded-2xl bg-primary text-k-0"
+        aria-label="홈으로 이동"
+      >
+        <IconCloud />
+      </Link>
+
+      <div className="mt-6 flex flex-1 flex-col gap-2">
+        {NAV_ITEMS.map(({ route, text, iconType }) => {
+          const isActive = isRouteActive(pathname, route);
+          const IconComp = ICON_COMPONENTS[iconType];
+          const className = clsx(
+            "flex h-[70px] flex-col items-center justify-center gap-1 rounded-2xl text-center transition-colors typo-medium-5",
+            isActive ? "bg-primary-100 text-primary" : "text-k-500 hover:bg-k-50 hover:text-k-700",
+          );
+          const content = (
+            <>
+              <IconComp />
+              <span>{text}</span>
+            </>
+          );
+
+          if (route === UNIVERSITY_ZONE_ROUTE) {
+            return (
+              <UniversityZoneLink
+                key={text}
+                href={route}
+                aria-current={isActive ? "page" : undefined}
+                aria-label={`${text} 페이지로 이동`}
+                className={className}
+              >
+                {content}
+              </UniversityZoneLink>
+            );
+          }
+
+          return (
+            <Link
+              key={text}
+              href={route}
+              aria-current={isActive ? "page" : undefined}
+              aria-label={`${text} 페이지로 이동`}
+              className={className}
+            >
+              {content}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+};
+
+export default DesktopNavigation;
diff --git a/apps/web/src/components/layout/PathBasedNavigation/index.tsx b/apps/web/src/components/layout/PathBasedNavigation/index.tsx
index 9774c4002..29da7c845 100644
--- a/apps/web/src/components/layout/PathBasedNavigation/index.tsx
+++ b/apps/web/src/components/layout/PathBasedNavigation/index.tsx
@@ -40,7 +40,7 @@ const PathBasedNavigation = ({
   }
 
   return (
-    <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5">
+    <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5 md:hidden">
       <button className="min-w-6 cursor-pointer" onClick={handleBack || routeBack} type="button" aria-label="뒤로 가기">
         <IconArrowBackFilled />
       </button>
diff --git a/apps/web/src/components/layout/TopDetailNavigation.tsx b/apps/web/src/components/layout/TopDetailNavigation.tsx
index eb67ed945..fba9c908b 100644
--- a/apps/web/src/components/layout/TopDetailNavigation.tsx
+++ b/apps/web/src/components/layout/TopDetailNavigation.tsx
@@ -23,7 +23,7 @@ const TopDetailNavigation = ({ title, handleBack, backHref, icon }: TopDetailNav
   };
 
   return (
-    <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5">
+    <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5 md:hidden">
       <button className="min-w-6 cursor-pointer" onClick={handleBack || routeBack} type="button" aria-label="뒤로 가기">
         <IconArrowBackFilled />
       </button>
diff --git a/apps/web/src/components/ui/TopLogoBar/index.tsx b/apps/web/src/components/ui/TopLogoBar/index.tsx
index 4b6ddd3eb..b0e19468a 100644
--- a/apps/web/src/components/ui/TopLogoBar/index.tsx
+++ b/apps/web/src/components/ui/TopLogoBar/index.tsx
@@ -5,7 +5,7 @@ import { IconCloud } from "@/public/svgs/home";
 const TopLogoBar = () => (
   <div
     className={clsx(
-      "fixed top-0 z-30 flex h-14 w-full max-w-app items-center",
+      "fixed top-0 z-30 flex h-14 w-full max-w-app items-center md:hidden",
       "bg-gradient-to-r from-primary-1 to-sub-b",
     )}
   >
diff --git a/apps/web/src/components/university/UniversityCards/index.tsx b/apps/web/src/components/university/UniversityCards/index.tsx
index 19d1fe05c..a960c5d70 100644
--- a/apps/web/src/components/university/UniversityCards/index.tsx
+++ b/apps/web/src/components/university/UniversityCards/index.tsx
@@ -15,9 +15,15 @@ type UniversityCardsProps = {
 
 const UniversityCards = ({ colleges, style, className, showCapacity = true, linkPrefix }: UniversityCardsProps) => {
   return (
-    <div className={clsx("flex flex-col gap-2.5", className)} style={style}>
+    <div
+      className={clsx(
+        "flex flex-col gap-2.5 md:grid md:grid-cols-2 md:gap-3 xl:grid-cols-3 2xl:grid-cols-4",
+        className,
+      )}
+      style={style}
+    >
       {colleges.map((college) => (
-        <div key={college.id} className="pb-2.5">
+        <div key={college.id} className="pb-2.5 md:pb-0">
           <UniversityCard university={college} showCapacity={showCapacity} linkPrefix={linkPrefix} />
         </div>
       ))}

From 4b10d9ea300324bc171990cf674873e580602540 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 00:48:59 +0900
Subject: [PATCH 02/20] =?UTF-8?q?feat:=20=EB=8D=B0=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=ED=86=B1=20=EC=A0=84=EC=9A=A9=20=EB=B7=B0=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/_ui/UniversityDetail/index.tsx       | 141 ++++++--
 .../_ui/UniversityListContent.tsx             | 303 +++++++++++++-----
 .../HomeDesktopView/HomeDesktopEntryPanel.tsx | 181 +++++++++++
 .../app/(home)/_ui/HomeDesktopView/index.tsx  | 225 +++++++++++++
 .../_ui/PopularUniversitySection/index.tsx    |   2 +-
 apps/web/src/app/(home)/page.tsx              |  40 ++-
 .../InterestCountriesScreen/index.tsx         |   2 +-
 .../_components/StudyStatusScreen/index.tsx   |   2 +-
 .../_components/UniversityScreen/index.tsx    |   2 +-
 .../my/password/_ui/PasswordContent/index.tsx |   2 +-
 10 files changed, 753 insertions(+), 147 deletions(-)
 create mode 100644 apps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsx
 create mode 100644 apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx

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 1f8c6b053..7b7181579 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
@@ -15,12 +15,25 @@ interface UniversityDetailProps {
 
 const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) => {
   return (
-    <div className="relative md:bg-k-0">
-      <div className="absolute top-4 z-20 flex w-full justify-between gap-3 px-5 md:top-8 md:justify-end md:px-8 lg:px-10">
+    <>
+      <div className="md:hidden">
+        <UniversityDetailMobile university={university} koreanName={koreanName} />
+      </div>
+      <div className="hidden md:block">
+        <UniversityDetailDesktop university={university} koreanName={koreanName} />
+      </div>
+    </>
+  );
+};
+
+const UniversityDetailMobile = ({ university, koreanName }: UniversityDetailProps) => {
+  return (
+    <div className="relative">
+      <div className="absolute top-4 z-20 flex w-full justify-between gap-3 px-5">
         <UniversityBtns universityId={university.id} />
       </div>
 
-      <div className="relative -z-10 h-60 w-full bg-blue-100 md:z-0 md:h-80">
+      <div className="relative -z-10 h-60 w-full bg-gradient-to-b from-k-700 to-k-900">
         <Image
           alt="대학 이미지"
           src={normalizeImageUrlToUploadCdn(university.backgroundImageUrl)}
@@ -29,20 +42,47 @@ const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) =>
           fallbackSrc="/svgs/placeholders/image-placeholder.svg"
         />
       </div>
-      <div className="relative z-10 -mt-16 rounded-t-3xl bg-white px-5 md:-mt-20 md:rounded-none md:px-8 md:pb-16 lg:px-10">
+      <div className="relative z-10 -mt-16 rounded-t-3xl bg-white px-5">
         <TitleSection
           title={koreanName}
           subTitle={university.englishName}
           logoUrl={normalizeImageUrlToUploadCdn(university.logoImageUrl)}
         />
-        {/* TODO: totalDispatchCount 추가시 연동, 나라에 국기 추가 */}
-        <div className="mb-7 mt-10 flex justify-center divide-x">
-          <span className="px-[30px] text-k-900 typo-sb-9">{}0회 파견</span>
-          <span className="px-[30px] text-k-900 typo-sb-9">{university.country}</span>
-          <span className="px-[30px] text-k-900 typo-sb-9">모집 {university.studentCapacity}명</span>
+        <UniversityStats university={university} />
+        <UniversityDetailBody university={university} />
+        <div className="h-48" />
+      </div>
+    </div>
+  );
+};
+
+const UniversityDetailDesktop = ({ university, koreanName }: UniversityDetailProps) => {
+  return (
+    <div className="min-h-screen bg-k-50">
+      <section className="relative h-[360px] bg-gradient-to-b from-k-700 to-k-900">
+        <Image
+          alt="대학 이미지"
+          src={normalizeImageUrlToUploadCdn(university.backgroundImageUrl)}
+          fill
+          className="object-cover"
+          fallbackSrc="/svgs/placeholders/image-placeholder.svg"
+          priority
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/15 to-black/25" />
+        <div className="absolute right-8 top-8 z-20 flex justify-end gap-3 lg:right-10">
+          <UniversityBtns universityId={university.id} />
         </div>
-        <div className="md:grid md:grid-cols-[minmax(320px,420px)_minmax(0,1fr)] md:gap-8">
-          <div>
+      </section>
+
+      <main className="relative -mt-24 px-8 pb-16 lg:px-10">
+        <div className="grid grid-cols-[minmax(330px,430px)_minmax(0,1fr)] items-start gap-8">
+          <aside className="sticky top-8 rounded-lg border border-k-100 bg-white px-6 pb-2 shadow-sm">
+            <TitleSection
+              title={koreanName}
+              subTitle={university.englishName}
+              logoUrl={normalizeImageUrlToUploadCdn(university.logoImageUrl)}
+            />
+            <UniversityStats university={university} />
             <LanguageSection
               detailsForLanguage={university.detailsForLanguage}
               languageRequirements={university.languageRequirements}
@@ -51,34 +91,69 @@ const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) =>
               semesterRequirement={university.semesterRequirement}
               semesterAvailableForDispatch={university.semesterAvailableForDispatch}
               detailsForApply={university.detailsForApply}
-              detailsForAccommodation={university?.detailsForAccommodation}
+              detailsForAccommodation={university.detailsForAccommodation}
             />
-          </div>
+          </aside>
 
-          <div className="min-w-0">
-            <div className="h-1 bg-k-50" />
-            <div className="my-7 px-3">
-              <div className="mb-3 text-k-900 typo-sb-7">전공상세</div>
-              <div className="break-words text-k-600 typo-medium-2">
-                <LinkifyText>{university?.detailsForMajor}</LinkifyText>
-              </div>
-            </div>
-            <div className="h-1 bg-k-50" />
-            <div className="my-7 px-3">
-              <div className="mb-3 text-k-900 typo-sb-7">영어강의 리스트</div>
-              <div>
-                <span className="break-words text-k-600 typo-medium-2">
-                  <LinkifyText>{university?.detailsForEnglishCourse}</LinkifyText>
-                </span>
-              </div>
-            </div>
+          <section className="min-w-0 rounded-lg border border-k-100 bg-white p-6 shadow-sm">
+            <header className="mb-7 border-b border-k-50 pb-5">
+              <p className="text-primary typo-sb-9">{university.country}</p>
+              <h2 className="mt-2 text-k-900 typo-bold-2">상세 정보</h2>
+              <p className="mt-2 text-k-500 typo-medium-3">
+                전공, 영어 강의, 위치 정보를 확인하고 지원 가능 여부를 판단해보세요.
+              </p>
+            </header>
+            <UniversityDetailTexts university={university} />
             <MapSection universityEnglishName={university.englishName} />
-          </div>
+          </section>
         </div>
-        <div className="h-48 md:h-0" />
-      </div>
+      </main>
     </div>
   );
 };
 
+const UniversityDetailBody = ({ university }: { university: University }) => (
+  <>
+    <LanguageSection
+      detailsForLanguage={university.detailsForLanguage}
+      languageRequirements={university.languageRequirements}
+    />
+    <InfoSection
+      semesterRequirement={university.semesterRequirement}
+      semesterAvailableForDispatch={university.semesterAvailableForDispatch}
+      detailsForApply={university.detailsForApply}
+      detailsForAccommodation={university.detailsForAccommodation}
+    />
+    <UniversityDetailTexts university={university} />
+    <MapSection universityEnglishName={university.englishName} />
+  </>
+);
+
+const UniversityStats = ({ university }: { university: University }) => (
+  <div className="mb-7 mt-10 flex justify-center divide-x divide-k-100">
+    <span className="px-[30px] text-k-900 typo-sb-9">0회 파견</span>
+    <span className="px-[30px] text-k-900 typo-sb-9">{university.country}</span>
+    <span className="px-[30px] text-k-900 typo-sb-9">모집 {university.studentCapacity}명</span>
+  </div>
+);
+
+const UniversityDetailTexts = ({ university }: { university: University }) => (
+  <div className="min-w-0">
+    <DetailTextSection title="전공상세">{university.detailsForMajor}</DetailTextSection>
+    <DetailTextSection title="영어강의 리스트">{university.detailsForEnglishCourse}</DetailTextSection>
+  </div>
+);
+
+const DetailTextSection = ({ title, children }: { title: string; children: string }) => (
+  <>
+    <div className="h-1 bg-k-50" />
+    <div className="my-7 px-3">
+      <div className="mb-3 text-k-900 typo-sb-7">{title}</div>
+      <div className="break-words text-k-600 typo-medium-2">
+        <LinkifyText>{children}</LinkifyText>
+      </div>
+    </div>
+  </>
+);
+
 export default UniversityDetail;
diff --git a/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsx b/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsx
index 2c94131f8..8d88daf70 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsx
@@ -46,68 +46,10 @@ const REGION_FILTER_ITEMS = [
 ] as const;
 
 const UniversityListPrerenderFallback = ({ universities, homeUniversitySlug, title }: UniversityListContentProps) => (
-  <div className="px-5 md:px-8 md:py-8 lg:px-10">
-    <div className="mb-6 hidden md:block">
-      <h1 className="text-k-900 typo-bold-1">{title}</h1>
-    </div>
-
-    <div className="md:grid md:grid-cols-[280px_minmax(0,1fr)] md:items-start md:gap-8">
-      <aside className="md:sticky md:top-8">
-        <div className="mb-4 mt-2 md:mt-0">
-          <div className="flex items-center gap-2 rounded-lg border border-k-100 bg-k-50 px-4 py-3 text-k-400">
-            <IconSearch className="h-5 w-5" />
-            <span className="flex-1 typo-medium-4">학교명 또는 국가 검색</span>
-          </div>
-
-          <Link
-            href={`/university/${homeUniversitySlug}/search`}
-            className="mt-2 flex items-center justify-end gap-1 text-k-500 typo-medium-5 hover:text-primary"
-          >
-            <span>조건 검색</span>
-            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M4.5 9L7.5 6L4.5 3"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </Link>
-        </div>
-
-        <div className="mb-4 flex gap-2 overflow-x-auto pb-1 md:flex-col md:overflow-visible">
-          {REGION_FILTER_ITEMS.map(({ value, label }) => (
-            <span
-              key={value}
-              className={
-                value === RegionEnumExtend.ALL
-                  ? "whitespace-nowrap rounded-full border border-primary bg-primary-100 px-4 py-2 text-primary typo-medium-4"
-                  : "whitespace-nowrap rounded-full border border-k-100 bg-k-50 px-4 py-2 text-k-500 typo-medium-4"
-              }
-            >
-              {label}
-            </span>
-          ))}
-        </div>
-      </aside>
-
-      <section className="min-w-0">
-        <div className="mb-3 text-k-500 typo-medium-4">
-          총 <span className="text-primary typo-bold-4">{universities.length}</span>개 학교
-        </div>
-
-        {universities.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-20">
-            <p className="text-k-400 typo-medium-3">검색 결과가 없습니다.</p>
-            <p className="mt-1 text-k-300 typo-medium-4">다른 검색어나 필터를 시도해보세요.</p>
-          </div>
-        ) : (
-          <UniversityCards colleges={universities} className="mt-3" linkPrefix={`/university/${homeUniversitySlug}`} />
-        )}
-      </section>
-    </div>
-  </div>
+  <>
+    <UniversityListMobileFallback universities={universities} homeUniversitySlug={homeUniversitySlug} />
+    <UniversityListDesktopFallback universities={universities} homeUniversitySlug={homeUniversitySlug} title={title} />
+  </>
 );
 
 const UniversityListContentInner = ({ universities, homeUniversitySlug, title }: UniversityListContentProps) => {
@@ -166,45 +108,230 @@ const UniversityListContentInner = ({ universities, homeUniversitySlug, title }:
   }, [universities, searchText, selectedRegions, queryLanguageTestType, queryCountryCodesKey]);
 
   return (
-    <div className="px-5 md:px-8 md:py-8 lg:px-10">
-      <div className="mb-6 hidden md:block">
-        <h1 className="text-k-900 typo-bold-1">{title}</h1>
-      </div>
+    <>
+      <UniversityListMobileView
+        universities={filteredUniversities}
+        homeUniversitySlug={homeUniversitySlug}
+        searchText={searchText}
+        selectedRegions={selectedRegions}
+        setSearchText={setSearchText}
+        setSelectedRegions={setSelectedRegions}
+      />
+      <UniversityListDesktopView
+        universities={filteredUniversities}
+        homeUniversitySlug={homeUniversitySlug}
+        title={title}
+        searchText={searchText}
+        selectedRegions={selectedRegions}
+        setSearchText={setSearchText}
+        setSelectedRegions={setSelectedRegions}
+      />
+      <FloatingUpBtn />
+    </>
+  );
+};
 
-      <div className="md:grid md:grid-cols-[280px_minmax(0,1fr)] md:items-start md:gap-8">
-        <aside className="md:sticky md:top-8">
-          <SearchBar value={searchText} onChange={setSearchText} homeUniversitySlug={homeUniversitySlug} />
+type UniversityListViewProps = {
+  universities: ListUniversity[];
+  homeUniversitySlug: HomeUniversitySlug;
+  searchText: string;
+  selectedRegions: RegionEnumExtend[];
+  setSearchText: (value: string) => void;
+  setSelectedRegions: (regions: RegionEnumExtend[]) => void;
+};
 
-          <RegionFilter selectedRegions={selectedRegions} onRegionChange={(region) => setSelectedRegions([region])} />
+const UniversityListMobileView = ({
+  universities,
+  homeUniversitySlug,
+  searchText,
+  selectedRegions,
+  setSearchText,
+  setSelectedRegions,
+}: UniversityListViewProps) => {
+  return (
+    <div className="px-5 md:hidden">
+      <SearchBar value={searchText} onChange={setSearchText} homeUniversitySlug={homeUniversitySlug} />
+      <RegionFilter selectedRegions={selectedRegions} onRegionChange={(region) => setSelectedRegions([region])} />
+      <ResultCount count={universities.length} />
+      <UniversityResultList universities={universities} homeUniversitySlug={homeUniversitySlug} className="mt-3" />
+    </div>
+  );
+};
+
+const UniversityListDesktopView = ({
+  universities,
+  homeUniversitySlug,
+  title,
+  searchText,
+  selectedRegions,
+  setSearchText,
+  setSelectedRegions,
+}: UniversityListViewProps & { title: string }) => {
+  return (
+    <div className="hidden min-h-screen bg-k-50 px-8 py-8 md:block lg:px-10">
+      <header className="mb-8 flex items-end justify-between gap-6">
+        <div>
+          <p className="text-primary typo-sb-9">{title}</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">파견학교 목록</h1>
+          <p className="mt-2 text-k-500 typo-medium-2">학교명, 국가, 권역 조건으로 지원 가능한 학교를 좁혀보세요.</p>
+        </div>
+        <Link
+          href={`/university/${homeUniversitySlug}/search`}
+          className="rounded-lg border border-k-100 bg-white px-4 py-3 text-k-700 transition-colors typo-sb-9 hover:border-primary hover:text-primary"
+        >
+          조건 검색
+        </Link>
+      </header>
+
+      <div className="grid grid-cols-[300px_minmax(0,1fr)] items-start gap-8">
+        <aside className="sticky top-8 space-y-5">
+          <section className="rounded-lg border border-k-100 bg-white p-5">
+            <h2 className="mb-4 text-k-900 typo-bold-4">검색</h2>
+            <SearchBar value={searchText} onChange={setSearchText} homeUniversitySlug={homeUniversitySlug} />
+          </section>
+
+          <section className="rounded-lg border border-k-100 bg-white p-5">
+            <h2 className="mb-4 text-k-900 typo-bold-4">권역</h2>
+            <RegionFilter selectedRegions={selectedRegions} onRegionChange={(region) => setSelectedRegions([region])} />
+          </section>
         </aside>
 
         <section className="min-w-0">
-          {/* 결과 카운트 */}
-          <div className="mb-3 text-k-500 typo-medium-4">
-            총 <span className="text-primary typo-bold-4">{filteredUniversities.length}</span>개 학교
+          <div className="mb-4 flex items-center justify-between gap-4">
+            <ResultCount count={universities.length} />
+            <span className="text-k-400 typo-medium-5">최신 파견학기 기준</span>
           </div>
-
-          {/* 결과 표시 */}
-          {filteredUniversities.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-20">
-              <p className="text-k-400 typo-medium-3">검색 결과가 없습니다.</p>
-              <p className="mt-1 text-k-300 typo-medium-4">다른 검색어나 필터를 시도해보세요.</p>
-            </div>
-          ) : (
-            <UniversityCards
-              colleges={filteredUniversities}
-              className="mt-3"
-              linkPrefix={`/university/${homeUniversitySlug}`}
-            />
-          )}
+          <UniversityResultList universities={universities} homeUniversitySlug={homeUniversitySlug} className="mt-0" />
         </section>
       </div>
+    </div>
+  );
+};
 
-      <FloatingUpBtn />
+const UniversityListMobileFallback = ({
+  universities,
+  homeUniversitySlug,
+}: Pick<UniversityListContentProps, "universities" | "homeUniversitySlug">) => (
+  <div className="px-5 md:hidden">
+    <SearchFallback homeUniversitySlug={homeUniversitySlug} />
+    <RegionFilterFallback />
+    <ResultCount count={universities.length} />
+    <UniversityResultList universities={universities} homeUniversitySlug={homeUniversitySlug} className="mt-3" />
+  </div>
+);
+
+const UniversityListDesktopFallback = ({ universities, homeUniversitySlug, title }: UniversityListContentProps) => (
+  <div className="hidden min-h-screen bg-k-50 px-8 py-8 md:block lg:px-10">
+    <header className="mb-8 flex items-end justify-between gap-6">
+      <div>
+        <p className="text-primary typo-sb-9">{title}</p>
+        <h1 className="mt-2 text-k-900 typo-bold-1">파견학교 목록</h1>
+        <p className="mt-2 text-k-500 typo-medium-2">학교명, 국가, 권역 조건으로 지원 가능한 학교를 좁혀보세요.</p>
+      </div>
+      <Link
+        href={`/university/${homeUniversitySlug}/search`}
+        className="rounded-lg border border-k-100 bg-white px-4 py-3 text-k-700 transition-colors typo-sb-9 hover:border-primary hover:text-primary"
+      >
+        조건 검색
+      </Link>
+    </header>
+
+    <div className="grid grid-cols-[300px_minmax(0,1fr)] items-start gap-8">
+      <aside className="sticky top-8 space-y-5">
+        <section className="rounded-lg border border-k-100 bg-white p-5">
+          <h2 className="mb-4 text-k-900 typo-bold-4">검색</h2>
+          <SearchFallback homeUniversitySlug={homeUniversitySlug} />
+        </section>
+        <section className="rounded-lg border border-k-100 bg-white p-5">
+          <h2 className="mb-4 text-k-900 typo-bold-4">권역</h2>
+          <RegionFilterFallback desktop />
+        </section>
+      </aside>
+
+      <section className="min-w-0">
+        <div className="mb-4 flex items-center justify-between gap-4">
+          <ResultCount count={universities.length} />
+          <span className="text-k-400 typo-medium-5">최신 파견학기 기준</span>
+        </div>
+        <UniversityResultList universities={universities} homeUniversitySlug={homeUniversitySlug} className="mt-0" />
+      </section>
+    </div>
+  </div>
+);
+
+const SearchFallback = ({ homeUniversitySlug }: { homeUniversitySlug: HomeUniversitySlug }) => (
+  <div className="mb-4 mt-2 md:mt-0">
+    <div className="flex items-center gap-2 rounded-lg border border-k-100 bg-k-50 px-4 py-3 text-k-400">
+      <IconSearch className="h-5 w-5" />
+      <span className="flex-1 typo-medium-4">학교명 또는 국가 검색</span>
     </div>
+
+    <Link
+      href={`/university/${homeUniversitySlug}/search`}
+      className="mt-2 flex items-center justify-end gap-1 text-k-500 typo-medium-5 hover:text-primary"
+    >
+      <span>조건 검색</span>
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M4.5 9L7.5 6L4.5 3"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </Link>
+  </div>
+);
+
+const RegionFilterFallback = ({ desktop = false }: { desktop?: boolean }) => (
+  <div className={desktop ? "mb-4 flex flex-col gap-2" : "mb-4 flex gap-2 overflow-x-auto pb-1"}>
+    {REGION_FILTER_ITEMS.map(({ value, label }) => (
+      <span
+        key={value}
+        className={
+          value === RegionEnumExtend.ALL
+            ? "whitespace-nowrap rounded-full border border-primary bg-primary-100 px-4 py-2 text-primary typo-medium-4"
+            : "whitespace-nowrap rounded-full border border-k-100 bg-k-50 px-4 py-2 text-k-500 typo-medium-4"
+        }
+      >
+        {label}
+      </span>
+    ))}
+  </div>
+);
+
+const ResultCount = ({ count }: { count: number }) => (
+  <div className="text-k-500 typo-medium-4">
+    총 <span className="text-primary typo-bold-4">{count}</span>개 학교
+  </div>
+);
+
+const UniversityResultList = ({
+  universities,
+  homeUniversitySlug,
+  className,
+}: {
+  universities: ListUniversity[];
+  homeUniversitySlug: HomeUniversitySlug;
+  className?: string;
+}) => {
+  if (universities.length === 0) {
+    return <EmptyUniversityResult />;
+  }
+
+  return (
+    <UniversityCards colleges={universities} className={className} linkPrefix={`/university/${homeUniversitySlug}`} />
   );
 };
 
+const EmptyUniversityResult = () => (
+  <div className="flex min-h-96 flex-col items-center justify-center rounded-lg border border-dashed border-k-100 bg-white py-20">
+    <p className="text-k-400 typo-medium-3">검색 결과가 없습니다.</p>
+    <p className="mt-1 text-k-300 typo-medium-4">다른 검색어나 필터를 시도해보세요.</p>
+  </div>
+);
+
 const UniversityListContent = (props: UniversityListContentProps) => (
   <Suspense fallback={<UniversityListPrerenderFallback {...props} />}>
     <UniversityListContentInner {...props} />
diff --git a/apps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsx b/apps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsx
new file mode 100644
index 000000000..a08d453fe
--- /dev/null
+++ b/apps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import clsx from "clsx";
+import Link from "next/link";
+
+import CustomDropdown from "@/components/search/CustomDropdown";
+import UniversityZoneLink from "@/components/ui/UniversityZoneLink";
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import { IconIdCard, IconMagnifyingGlass, IconMuseum, IconPaper } from "@/public/svgs/home";
+import { IconHatColor, IconHatGray, IconLocationColor, IconLocationGray } from "@/public/svgs/search";
+import useHomeUniversitySearch from "../HomeUniversitySearchSection/_hooks/useHomeUniversitySearch";
+
+const actionLinks = [
+  {
+    href: "/university/search",
+    label: "학교 검색하기",
+    description: "조건에 맞는 파견학교 찾기",
+    icon: IconMagnifyingGlass,
+    colorClassName: "bg-bg-accent-blue text-secondary",
+    isUniversityZone: true,
+  },
+  {
+    href: "/university/score",
+    label: "성적 입력하기",
+    description: "내 점수로 합격선 확인",
+    icon: IconPaper,
+    colorClassName: "bg-bg-accent-sky text-sub-a",
+    isUniversityZone: false,
+  },
+  {
+    href: "/university/application/apply",
+    label: "학교 지원하기",
+    description: "희망 학교 지원서 작성",
+    icon: IconMuseum,
+    colorClassName: "bg-bg-accent-orange text-accent-custom-orange",
+    isUniversityZone: false,
+  },
+  {
+    href: "/university/application",
+    label: "지원자 현황 확인",
+    description: "현재 경쟁률 확인",
+    icon: IconIdCard,
+    colorClassName: "bg-bg-accent-green text-accent-custom-green",
+    isUniversityZone: false,
+  },
+] as const;
+
+const HomeDesktopEntryPanel = () => {
+  const { isAuthenticated, isInitialized } = useAuthStore();
+  const {
+    homeUniversities,
+    selectedHomeUniversitySlug,
+    setSelectedHomeUniversitySlug,
+    languageTestType,
+    setLanguageTestType,
+    countries,
+    languageOptions,
+    countryOptionsByIndex,
+    handleCountryChange,
+    searchHref,
+  } = useHomeUniversitySearch();
+
+  if (!isInitialized) {
+    return (
+      <div className="rounded-lg border border-k-100 bg-white p-6">
+        <div className="h-7 w-36 animate-pulse rounded bg-k-100" />
+        <div className="mt-5 grid grid-cols-2 gap-3">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div key={index} className="h-28 animate-pulse rounded-lg bg-k-50" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (isAuthenticated) {
+    return (
+      <section className="rounded-lg border border-k-100 bg-white p-6">
+        <div className="mb-5">
+          <h2 className="text-k-900 typo-bold-4">빠른 실행</h2>
+          <p className="mt-1 text-k-500 typo-medium-4">자주 쓰는 교환학생 업무를 바로 이어갈 수 있어요.</p>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          {actionLinks.map(({ href, label, description, icon: Icon, colorClassName, isUniversityZone }) => {
+            const content = (
+              <div
+                key={href}
+                className={clsx("flex h-full min-h-32 flex-col justify-between rounded-lg p-4", colorClassName)}
+              >
+                <div>
+                  <span className="block typo-bold-5">{label}</span>
+                  <span className="mt-1 block text-k-700 typo-medium-5">{description}</span>
+                </div>
+                <div className="flex justify-end">
+                  <Icon />
+                </div>
+              </div>
+            );
+
+            return isUniversityZone ? (
+              <UniversityZoneLink key={href} href={href} className="h-full transition-transform hover:-translate-y-0.5">
+                {content}
+              </UniversityZoneLink>
+            ) : (
+              <Link key={href} href={href} className="h-full transition-transform hover:-translate-y-0.5">
+                {content}
+              </Link>
+            );
+          })}
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="rounded-lg border border-k-100 bg-white p-6">
+      <div className="mb-5">
+        <h2 className="text-k-900 typo-bold-4">파견학교 검색</h2>
+        <p className="mt-1 text-k-500 typo-medium-4">소속 대학과 조건을 선택해 지원 가능한 학교를 찾아보세요.</p>
+      </div>
+
+      <div className="mb-4 flex flex-wrap gap-2">
+        {homeUniversities.map((university) => {
+          const isSelected = university.slug === selectedHomeUniversitySlug;
+
+          return (
+            <button
+              key={university.slug}
+              type="button"
+              onClick={() => setSelectedHomeUniversitySlug(university.slug)}
+              className={clsx(
+                "min-w-0 rounded-full border px-4 py-2 transition-colors typo-medium-3",
+                isSelected
+                  ? "border-primary bg-primary-100 text-primary-900"
+                  : "border-k-100 bg-k-50 text-k-500 hover:border-k-200 hover:bg-k-100",
+              )}
+              aria-pressed={isSelected}
+            >
+              {university.shortName}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="grid gap-3">
+        <CustomDropdown
+          value={languageTestType}
+          onChange={setLanguageTestType}
+          placeholder="어학"
+          placeholderSelect="선택"
+          placeholderIcon={<IconHatGray />}
+          icon={<IconHatColor />}
+          options={languageOptions}
+        />
+
+        {countryOptionsByIndex.map((countryOptions, index) => (
+          <CustomDropdown
+            key={index}
+            value={countries[index]}
+            onChange={(value) => handleCountryChange(index, value)}
+            placeholder="관심있는 나라"
+            placeholderSelect="나라"
+            placeholderIcon={<IconLocationGray />}
+            icon={<IconLocationColor />}
+            options={countryOptions}
+          />
+        ))}
+
+        <UniversityZoneLink
+          href={searchHref}
+          className="mt-2 w-full rounded-lg bg-primary px-4 py-4 text-center text-k-0 transition-colors typo-sb-8 hover:bg-primary-600"
+        >
+          학교 검색하기
+        </UniversityZoneLink>
+      </div>
+    </section>
+  );
+};
+
+export default HomeDesktopEntryPanel;
diff --git a/apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx b/apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx
new file mode 100644
index 000000000..7d2910f92
--- /dev/null
+++ b/apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx
@@ -0,0 +1,225 @@
+import Link from "next/link";
+
+import Image from "@/components/ui/FallbackImage";
+import UniversityZoneLink from "@/components/ui/UniversityZoneLink";
+import { getHomeUniversitySlugByName, HOME_UNIVERSITY_LIST, isMatchedHomeUniversityName } from "@/constants/university";
+import { IconLoveLetter, IconRightArrow } from "@/public/svgs/home";
+import { IconDirectionRight } from "@/public/svgs/mentor";
+import type { News } from "@/types/news";
+import { type AllRegionsUniversityList, type ListUniversity, RegionEnumExtend } from "@/types/university";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
+import shortenLanguageTestName from "@/utils/universityUtils";
+import HomeDesktopEntryPanel from "./HomeDesktopEntryPanel";
+
+type HomeDesktopViewProps = {
+  recommendedUniversities: ListUniversity[];
+  allRegionsUniversityList: AllRegionsUniversityList;
+  newsList: News[];
+};
+
+const POPULAR_UNIVERSITY_COUNT = 6;
+const PREVIEW_UNIVERSITY_COUNT = 6;
+
+const getUniversityHref = (university: ListUniversity) => {
+  const homeUniversitySlug = getHomeUniversitySlugByName(university.homeUniversityName);
+
+  return homeUniversitySlug ? `/university/${homeUniversitySlug}/${university.id}` : "/university";
+};
+
+const getLanguageRequirementText = (university: ListUniversity) => {
+  const [firstRequirement] = university.languageRequirements;
+
+  if (!firstRequirement) {
+    return "어학 조건 없음";
+  }
+
+  const testName = shortenLanguageTestName(firstRequirement.languageTestType) ?? firstRequirement.languageTestType;
+
+  return `${testName} ${firstRequirement.minScore}`;
+};
+
+const HomeDesktopView = ({ recommendedUniversities, allRegionsUniversityList, newsList }: HomeDesktopViewProps) => {
+  const allUniversities = allRegionsUniversityList[RegionEnumExtend.ALL] ?? [];
+  const countryCount = new Set(allUniversities.map((university) => university.country)).size;
+  const popularUniversities = recommendedUniversities.slice(0, POPULAR_UNIVERSITY_COUNT);
+  const previewUniversities = allUniversities.slice(0, PREVIEW_UNIVERSITY_COUNT);
+  const universityCountsByHome = HOME_UNIVERSITY_LIST.map((homeUniversity) => ({
+    ...homeUniversity,
+    count: allUniversities.filter((university) =>
+      isMatchedHomeUniversityName(university.homeUniversityName, homeUniversity.name),
+    ).length,
+  }));
+
+  return (
+    <div className="hidden min-h-screen bg-k-50 px-8 py-8 md:block lg:px-10">
+      <header className="mb-8 flex items-end justify-between gap-6">
+        <div>
+          <p className="text-primary typo-sb-9">Solid Connection</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">교환학생 준비</h1>
+          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+            파견학교 탐색부터 성적 입력, 지원 현황까지 한 화면에서 이어갈 수 있어요.
+          </p>
+        </div>
+
+        <UniversityZoneLink
+          href="/university"
+          className="flex items-center gap-2 rounded-lg border border-k-100 bg-white px-4 py-3 text-k-700 transition-colors typo-sb-9 hover:border-primary hover:text-primary"
+        >
+          전체 파견학교
+          <IconDirectionRight className="h-4 w-4" />
+        </UniversityZoneLink>
+      </header>
+
+      <div className="grid grid-cols-[minmax(280px,340px)_minmax(0,1fr)] items-start gap-8 xl:grid-cols-[minmax(320px,390px)_minmax(0,1fr)]">
+        <aside className="sticky top-8 space-y-5">
+          <HomeDesktopEntryPanel />
+
+          <section className="rounded-lg border border-k-100 bg-white p-6">
+            <h2 className="text-k-900 typo-bold-4">학교 현황</h2>
+            <div className="mt-5 grid grid-cols-2 gap-3">
+              <div className="rounded-lg bg-k-50 p-4">
+                <span className="text-k-500 typo-medium-5">전체 학교</span>
+                <strong className="mt-2 block text-k-900 typo-bold-1">{allUniversities.length}</strong>
+              </div>
+              <div className="rounded-lg bg-primary-100 p-4">
+                <span className="text-primary typo-medium-5">국가</span>
+                <strong className="mt-2 block text-primary-900 typo-bold-1">{countryCount}</strong>
+              </div>
+            </div>
+            <div className="mt-4 divide-y divide-k-50">
+              {universityCountsByHome.map((homeUniversity) => (
+                <UniversityZoneLink
+                  key={homeUniversity.slug}
+                  href={`/university/${homeUniversity.slug}`}
+                  className="flex items-center justify-between py-3 text-k-700 hover:text-primary"
+                >
+                  <span className="typo-medium-3">{homeUniversity.name}</span>
+                  <span className="typo-sb-9">{homeUniversity.count}개</span>
+                </UniversityZoneLink>
+              ))}
+            </div>
+          </section>
+        </aside>
+
+        <main className="min-w-0 space-y-8">
+          <section>
+            <SectionHeader title="실시간 인기있는 파견학교" />
+            <div className="grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
+              {popularUniversities.map((university, index) => (
+                <UniversityZoneLink
+                  key={university.id}
+                  href={getUniversityHref(university)}
+                  className="group overflow-hidden rounded-lg border border-k-100 bg-white transition-transform hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10"
+                >
+                  <div className="relative h-40 bg-k-100">
+                    <Image
+                      alt={`${university.koreanName} 배경 이미지`}
+                      src={normalizeImageUrlToUploadCdn(university.backgroundImageUrl)}
+                      fill
+                      className="object-cover"
+                      fallbackSrc="/svgs/placeholders/university-background-placeholder.svg"
+                      priority={index === 0}
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent" />
+                    <span className="absolute bottom-3 left-3 rounded-full bg-white/90 px-2.5 py-1 text-k-700 typo-sb-11">
+                      {university.country}
+                    </span>
+                  </div>
+                  <div className="min-h-28 p-4">
+                    <h3 className="truncate text-k-900 typo-bold-5" title={university.koreanName}>
+                      {university.koreanName}
+                    </h3>
+                    <p className="mt-1 text-k-500 typo-medium-5">{university.region}</p>
+                    <p className="mt-3 text-primary typo-sb-11">{getLanguageRequirementText(university)}</p>
+                  </div>
+                </UniversityZoneLink>
+              ))}
+            </div>
+          </section>
+
+          <section>
+            <SectionHeader title="전체 학교 리스트" />
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 2xl:grid-cols-3">
+              {previewUniversities.map((university) => (
+                <UniversityZoneLink
+                  key={university.id}
+                  href={getUniversityHref(university)}
+                  className="flex min-w-0 items-center gap-4 rounded-lg border border-k-100 bg-white p-4 transition-transform hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10"
+                >
+                  <Image
+                    className="h-14 w-14 shrink-0 rounded-full border border-k-50 object-cover"
+                    src={normalizeImageUrlToUploadCdn(university.logoImageUrl)}
+                    width={56}
+                    height={56}
+                    alt={`${university.koreanName} 로고`}
+                    fallbackSrc="/svgs/placeholders/university-logo-placeholder.svg"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <h3 className="truncate text-k-900 typo-bold-5" title={university.koreanName}>
+                      {university.koreanName}
+                    </h3>
+                    <p className="mt-1 truncate text-k-500 typo-medium-5">
+                      {university.country} · {university.region}
+                    </p>
+                    <p className="mt-2 text-primary typo-sb-11">모집 {university.studentCapacity}명</p>
+                  </div>
+                </UniversityZoneLink>
+              ))}
+            </div>
+          </section>
+
+          <section className="pb-8">
+            <div className="mb-4 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <h2 className="text-k-900 typo-bold-4">솔커에서 맛보는 소식</h2>
+                <IconLoveLetter />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 2xl:grid-cols-3">
+              {newsList.map((news) => (
+                <Link
+                  key={news.id}
+                  href={news.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="overflow-hidden rounded-lg border border-k-100 bg-white transition-transform hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10"
+                >
+                  <Image
+                    loading="lazy"
+                    className="h-36 w-full object-cover"
+                    src={news.imageUrl}
+                    cdnHostType="default"
+                    alt={news.title}
+                    width={360}
+                    height={144}
+                  />
+                  <div className="p-4">
+                    <h3 className="line-clamp-2 text-k-900 typo-bold-5">{news.title}</h3>
+                    <p className="mt-2 line-clamp-2 text-k-500 typo-medium-4">{news.description}</p>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </section>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+const SectionHeader = ({ title }: { title: string }) => {
+  return (
+    <div className="mb-4 flex items-center justify-between gap-4">
+      <h2 className="text-k-900 typo-bold-4">{title}</h2>
+      <UniversityZoneLink
+        href="/university"
+        className="flex items-center gap-1 text-k-500 typo-sb-9 hover:text-primary"
+      >
+        더보기
+        <IconRightArrow className="h-4 w-4" />
+      </UniversityZoneLink>
+    </div>
+  );
+};
+
+export default HomeDesktopView;
diff --git a/apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx b/apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx
index 8aded683d..da7d3b15d 100644
--- a/apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx
+++ b/apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx
@@ -31,7 +31,7 @@ const PopularUniversitySection = ({ universities }: PopularUniversitySectionProp
             key={university.id}
             fallback={
               <div className="relative w-[153px] md:w-full">
-                <div className="h-[120px] w-[153px] animate-pulse rounded-lg bg-gray-200 md:w-full" />
+                <div className="h-[120px] w-[153px] animate-pulse rounded-lg bg-gray-200 md:h-40 md:w-full" />
               </div>
             }
           >
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index 060f8fd0c..403a29531 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -5,6 +5,7 @@ import { getHomeUniversitySlugByName } from "@/constants/university";
 import { type ListUniversity, RegionEnumExtend } from "@/types/university";
 import { createUrl } from "@/utils/seo";
 import FindLastYearScoreBar from "./_ui/FindLastYearScoreBar";
+import HomeDesktopView from "./_ui/HomeDesktopView";
 import HomeEntrySection from "./_ui/HomeEntrySection";
 import NewsSection from "./_ui/NewsSection";
 import PopularUniversitySection from "./_ui/PopularUniversitySection";
@@ -113,29 +114,26 @@ const HomePage = async () => {
   return (
     <>
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }} />
-      <div className="w-full md:min-h-screen md:px-8 md:py-8 lg:px-10">
-        <div className="md:grid md:grid-cols-[minmax(320px,420px)_minmax(0,1fr)] md:items-start md:gap-8">
-          <div className="md:sticky md:top-8 md:flex md:flex-col md:gap-4">
-            <FindLastYearScoreBar />
-            <HomeEntrySection />
-          </div>
-
-          <div className="md:min-w-0 md:space-y-8">
-            <div className="border-t-[5px] border-k-50 py-5 pl-5 md:border-t-0 md:py-0 md:pl-0">
-              <div className="mb-2 flex items-center gap-1.5 font-serif text-k-700 typo-sb-7">
-                실시간 인기있는 파견학교
-              </div>
-              <PopularUniversitySection universities={resolvedRecommendedUniversities} />
-            </div>
-
-            <div className="p-5 md:p-0">
-              <UniversityList allRegionsUniversityList={allRegionsUniversityList} />
-            </div>
-
-            <NewsSection newsList={newsList} />
-          </div>
+      <div className="w-full md:hidden">
+        <FindLastYearScoreBar />
+        <HomeEntrySection />
+
+        <div className="border-t-[5px] border-k-50 py-5 pl-5">
+          <div className="mb-2 flex items-center gap-1.5 font-serif text-k-700 typo-sb-7">실시간 인기있는 파견학교</div>
+          <PopularUniversitySection universities={resolvedRecommendedUniversities} />
+        </div>
+
+        <div className="p-5">
+          <UniversityList allRegionsUniversityList={allRegionsUniversityList} />
         </div>
+
+        <NewsSection newsList={newsList} />
       </div>
+      <HomeDesktopView
+        recommendedUniversities={resolvedRecommendedUniversities}
+        allRegionsUniversityList={allRegionsUniversityList}
+        newsList={newsList}
+      />
     </>
   );
 };
diff --git a/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
index 0e10ac047..24dcae83e 100644
--- a/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
@@ -129,7 +129,7 @@ const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
         </div>
       </div>
 
-      <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14">
+      <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]">
         <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
           <BlockBtn className="mb-[29px]" disabled={!selectedCountryCode} onClick={handleNext}>
             다음
diff --git a/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
index 5ce8d8cd0..bf576ca57 100644
--- a/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
@@ -79,7 +79,7 @@ const StudyStatusScreen = ({ onNext }: StudyStatusScreenProps) => {
         </div>
       </div>
 
-      <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14">
+      <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]">
         <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
           <BlockBtn className="mb-[29px]" disabled={!preparationStatus} onClick={handleNext}>
             다음
diff --git a/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
index 2bcb745c7..9a4ab10c9 100644
--- a/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
@@ -202,7 +202,7 @@ const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
         </div>
       </div>
 
-      <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14">
+      <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]">
         <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
           <BlockBtn
             className="mb-[29px]"
diff --git a/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx b/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
index 616a28e29..a2ab12965 100644
--- a/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
+++ b/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
@@ -106,7 +106,7 @@ const PasswordContent = () => {
           </>
         )}
 
-        <div className="fixed bottom-0 left-0 right-0 mb-20 w-full py-4">
+        <div className="fixed bottom-0 left-0 right-0 mb-20 w-full py-4 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]">
           <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
             {step === 0 && (
               <button

From fcf913b06f79d78f18ff2eff1a603646175f1997 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 08:15:08 +0900
Subject: [PATCH 03/20] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20?=
 =?UTF-8?q?=EB=B7=B0=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/my/_ui/MyProfileContent/index.tsx | 330 +++++++++++++++---
 1 file changed, 287 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/app/my/_ui/MyProfileContent/index.tsx b/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
index 39ecace3f..575d08f2f 100644
--- a/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
+++ b/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
@@ -22,6 +22,20 @@ import { openKakaoOpenChat } from "@/utils/openKakaoOpenChat";
 
 const NEXT_PUBLIC_CONTACT_LINK = process.env.NEXT_PUBLIC_CONTACT_LINK;
 
+type MyProfileViewProps = {
+  nickname?: string;
+  email?: string;
+  profileImageUrl?: string | null;
+  roleLabel: string;
+  roleBadgeClassName: string;
+  viewAsMentor: boolean;
+  university: string | null;
+  favoriteLocation: string;
+  handleContactClick: () => void;
+  handleDeleteUserAccount: () => void;
+  handleLogout: () => void;
+};
+
 const MyProfileContent = () => {
   const { data: profileData = {} as MyInfoResponse } = useGetMyInfo();
   const { mutate: deleteUserAccount } = useDeleteUserAccount();
@@ -31,6 +45,13 @@ const MyProfileContent = () => {
   const { nickname, email, profileImageUrl } = profileData;
   const isMentor = profileData.role === UserRole.MENTOR || profileData.role === UserRole.ADMIN;
   const viewAsMentor = clientRole ? clientRole === UserRole.MENTOR : isMentor;
+  const roleLabel = profileData.role === UserRole.ADMIN ? "Admin" : isMentor ? "Mentor" : "Mentee";
+  const roleBadgeClassName =
+    profileData.role === UserRole.ADMIN
+      ? "bg-red-100 text-red-600"
+      : isMentor
+        ? "bg-sub-d-100 text-sub-d-500"
+        : "bg-sub-e-100 text-sub-e-500";
 
   const university =
     profileData.role === UserRole.MENTOR || profileData.role === UserRole.ADMIN ? profileData.attendedUniversity : null;
@@ -46,36 +67,71 @@ const MyProfileContent = () => {
     openKakaoOpenChat(NEXT_PUBLIC_CONTACT_LINK);
   };
 
+  const handleDeleteUserAccount = () => {
+    if (confirm("정말 탈퇴하시겠습니까? 탈퇴 시 모든 데이터가 삭제되며, 복구할 수 없습니다.")) {
+      deleteUserAccount();
+    }
+  };
+
+  const viewProps = {
+    nickname,
+    email,
+    profileImageUrl,
+    roleLabel,
+    roleBadgeClassName,
+    viewAsMentor,
+    university,
+    favoriteLocation,
+    handleContactClick,
+    handleDeleteUserAccount,
+    handleLogout: () => postLogout(),
+  };
+
+  return (
+    <>
+      <div className="md:hidden">
+        <MyProfileMobileView {...viewProps} />
+      </div>
+      <MyProfileDesktopView {...viewProps} />
+    </>
+  );
+};
+
+const MyProfileMobileView = ({
+  nickname,
+  email,
+  profileImageUrl,
+  roleLabel,
+  roleBadgeClassName,
+  viewAsMentor,
+  university,
+  favoriteLocation,
+  handleContactClick,
+  handleDeleteUserAccount,
+  handleLogout,
+}: MyProfileViewProps) => {
+  const displayName = nickname || "회원";
+
   return (
     <div className="py-2">
       <div className="mb-4 text-start text-k-700 typo-sb-5">
-        <p>{nickname}님은</p>
+        <p>{displayName}님은</p>
         <p>
           현재{" "}
           <span className="text-primary typo-sb-5">
-            {profileData.role === UserRole.ADMIN ? "어드민" : isMentor ? "멘토" : "멘티"}
+            {roleLabel === "Admin" ? "어드민" : viewAsMentor ? "멘토" : "멘티"}
           </span>{" "}
           솔커예요.
         </p>
       </div>
-      {/* Profile Card */}
+
       <div className="mb-4 rounded-lg bg-k-50 p-4">
         <div className="mb-3 flex items-center space-x-3">
           <ProfileWithBadge profileImageUrl={profileImageUrl} isMentor={viewAsMentor} width={48} height={48} />
           <div>
             <div className="flex items-center gap-3 space-x-2">
-              <h3 className="text-primary typo-sb-5">{nickname}</h3>
-              <span
-                className={`rounded-2xl px-2 py-1 typo-medium-4 ${
-                  profileData.role === UserRole.ADMIN
-                    ? "bg-red-100 text-red-600"
-                    : isMentor
-                      ? "bg-sub-d-100 text-sub-d-500"
-                      : "bg-sub-e-100 text-sub-e-500"
-                }`}
-              >
-                {profileData.role === UserRole.ADMIN ? "Admin" : isMentor ? "Mentor" : "Mentee"}
-              </span>
+              <h3 className="text-primary typo-sb-5">{displayName}</h3>
+              <span className={`rounded-2xl px-2 py-1 typo-medium-4 ${roleBadgeClassName}`}>{roleLabel}</span>
             </div>
             <p className="mt-2 text-k-600 typo-regular-2">
               {viewAsMentor ? "수학학교" : "관심지역"} |{" "}
@@ -86,12 +142,12 @@ const MyProfileContent = () => {
 
         {viewAsMentor ? (
           <div className="w-full cursor-pointer rounded-lg bg-secondary-500 py-2 text-center text-white typo-medium-2">
-            <Link href={"/my/modify"}>프로필 변경</Link>
+            <Link href="/my/modify">프로필 변경</Link>
           </div>
         ) : (
           <div className="mt-4 flex items-center justify-between gap-3">
             <div className="w-full cursor-pointer rounded-lg bg-secondary-500 py-2 text-center text-white typo-medium-2">
-              <Link href={"/my/modify"}>프로필 변경</Link>
+              <Link href="/my/modify">프로필 변경</Link>
             </div>
             <Link
               href="/my/apply-mentor"
@@ -103,7 +159,6 @@ const MyProfileContent = () => {
         )}
       </div>
 
-      {/* Quick Actions */}
       <div className="grid grid-cols-3 gap-4 text-k-700 typo-sb-9">
         <Link href="/my/favorite" className="p-3 text-center">
           <div className="mx-auto mb-2 h-8 w-8">
@@ -111,13 +166,6 @@ const MyProfileContent = () => {
           </div>
           관심학교
         </Link>
-        {/* to do 좋아요한 글 가져오기  */}
-        {/* <Link href="/my/favorites" className="p-3 text-center">
-          <div className="mx-auto mb-2 h-8 w-8">
-            <IconLikeFill />
-          </div>
-          좋아요한 글
-        </Link> */}
         <button onClick={() => showIconToast("logo", "현재 불가능한 서비스입니다")} className="p-3 text-center">
           <div className="mx-auto mb-2 h-8 w-8">
             <IconLikeFill />
@@ -132,53 +180,249 @@ const MyProfileContent = () => {
         </Link>
       </div>
 
-      {/* My Information Section */}
       <div className="mt-6">
         <h2 className="px-1 text-primary typo-sb-5">내 지원 정보</h2>
-
         <LinkedTextWithIcon
           onClick={() => showIconToast("logo", "현재 불가능한 서비스입니다")}
           icon={<IconEarth />}
           text={viewAsMentor ? "수학 국가 변경" : "관심 국가 변경"}
         />
-
         <LinkedTextWithIcon
           href="/university/application/apply"
           icon={<IconUniversity />}
           text={viewAsMentor ? "수학 중/완료 학교 변경" : "지원 학교 변경"}
         />
-
         <LinkedTextWithIcon href="/university/score" icon={<IconBook />} text="공인 어학 / 학점 변경" />
       </div>
 
-      {/* Account Management Section */}
       <div className="mt-6">
         <h2 className="px-1 text-primary typo-sb-5">계정 관리</h2>
-
         <LinkedTextWithIcon href="/my/school-email" icon={<IconUniversity />} text="학교 인증" />
-
         <LinkedTextWithIcon icon={<IconLock />} text="로그인한 계정" subText={email} />
-
         <LinkedTextWithIcon href="/my/password" icon={<IconPassword />} text="비밀번호 변경" />
       </div>
 
-      {/* Additional Options */}
       <div className="mt-5 flex flex-col gap-0.5">
         <LinkedTextWithIcon href="/terms" text="서비스 이용약관" />
-
         <LinkedTextWithIcon onClick={handleContactClick} text="고객센터 문의" />
+        <LinkedTextWithIcon onClick={handleDeleteUserAccount} text="회원탈퇴" />
+        <LinkedTextWithIcon onClick={handleLogout} text="로그아웃" />
+      </div>
+    </div>
+  );
+};
 
-        <LinkedTextWithIcon
-          onClick={() => {
-            if (confirm("정말 탈퇴하시겠습니까? 탈퇴 시 모든 데이터가 삭제되며, 복구할 수 없습니다."))
-              deleteUserAccount();
-          }}
-          text="회원탈퇴"
-        />
+const MyProfileDesktopView = ({
+  nickname,
+  email,
+  profileImageUrl,
+  roleLabel,
+  roleBadgeClassName,
+  viewAsMentor,
+  university,
+  favoriteLocation,
+  handleContactClick,
+  handleDeleteUserAccount,
+  handleLogout,
+}: MyProfileViewProps) => {
+  const displayName = nickname || "회원";
+  const statusText = viewAsMentor ? university || "수학학교 미등록" : favoriteLocation;
+
+  return (
+    <div className="hidden min-h-screen bg-k-50 px-8 py-8 md:block lg:px-10">
+      <header className="mb-8">
+        <p className="text-primary typo-sb-9">My Solid</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)_320px]">
+        <main className="min-w-0 space-y-6">
+          <section className="rounded-lg border border-k-100 bg-white p-6">
+            <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+              <div className="flex min-w-0 items-center gap-5">
+                <ProfileWithBadge profileImageUrl={profileImageUrl} isMentor={viewAsMentor} width={86} height={86} />
+                <div className="min-w-0">
+                  <div className="flex min-w-0 items-center gap-3">
+                    <h2 className="truncate text-k-900 typo-bold-2">{displayName}</h2>
+                    <span className={`rounded-full px-3 py-1 typo-medium-4 ${roleBadgeClassName}`}>{roleLabel}</span>
+                  </div>
+                  <p className="mt-2 text-k-500 typo-medium-3">
+                    {viewAsMentor ? "수학학교" : "관심지역"} · <span className="text-primary">{statusText}</span>
+                  </p>
+                  {email && <p className="mt-1 truncate text-k-400 typo-medium-4">{email}</p>}
+                </div>
+              </div>
 
-        <LinkedTextWithIcon onClick={postLogout} text="로그아웃" />
+              <div className="flex shrink-0 flex-wrap gap-2">
+                <Link
+                  href="/my/modify"
+                  className="rounded-lg bg-secondary-500 px-4 py-3 text-white transition-colors typo-sb-9 hover:bg-secondary-600"
+                >
+                  프로필 변경
+                </Link>
+                {!viewAsMentor && (
+                  <Link
+                    href="/my/apply-mentor"
+                    className="rounded-lg bg-secondary-800 px-4 py-3 text-white transition-colors typo-sb-9 hover:bg-secondary-900"
+                  >
+                    멘토 회원 전환
+                  </Link>
+                )}
+              </div>
+            </div>
+          </section>
+
+          <section className="grid grid-cols-3 gap-4">
+            <DesktopQuickAction href="/my/favorite" icon={<IconInterestUniversity />} title="관심학교" />
+            <DesktopQuickAction
+              onClick={() => showIconToast("logo", "현재 불가능한 서비스입니다")}
+              icon={<IconLikeFill />}
+              title="좋아요한 글"
+            />
+            <DesktopQuickAction
+              href="/my/match"
+              icon={<IconGraduationPrimary />}
+              title={viewAsMentor ? "매칭 멘티" : "매칭 멘토"}
+            />
+          </section>
+
+          <section className="grid gap-6 lg:grid-cols-2">
+            <DesktopPanel title="내 지원 정보">
+              <DesktopMenuItem
+                onClick={() => showIconToast("logo", "현재 불가능한 서비스입니다")}
+                icon={<IconEarth />}
+                title={viewAsMentor ? "수학 국가 변경" : "관심 국가 변경"}
+              />
+              <DesktopMenuItem
+                href="/university/application/apply"
+                icon={<IconUniversity />}
+                title={viewAsMentor ? "수학 중/완료 학교 변경" : "지원 학교 변경"}
+              />
+              <DesktopMenuItem href="/university/score" icon={<IconBook />} title="공인 어학 / 학점 변경" />
+            </DesktopPanel>
+
+            <DesktopPanel title="계정 관리">
+              <DesktopMenuItem href="/my/school-email" icon={<IconUniversity />} title="학교 인증" />
+              <DesktopMenuItem icon={<IconLock />} title="로그인한 계정" subText={email} />
+              <DesktopMenuItem href="/my/password" icon={<IconPassword />} title="비밀번호 변경" />
+            </DesktopPanel>
+          </section>
+        </main>
+
+        <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 divide-y divide-k-50">
+            <DesktopTextAction href="/terms" title="서비스 이용약관" />
+            <DesktopTextAction onClick={handleContactClick} title="고객센터 문의" />
+            <DesktopTextAction onClick={handleDeleteUserAccount} title="회원탈퇴" tone="danger" />
+            <DesktopTextAction onClick={handleLogout} title="로그아웃" />
+          </div>
+        </aside>
       </div>
     </div>
   );
 };
+
+const DesktopQuickAction = ({
+  href,
+  onClick,
+  icon,
+  title,
+}: {
+  href?: string;
+  onClick?: () => void;
+  icon: React.ReactNode;
+  title: string;
+}) => {
+  const content = (
+    <div className="flex h-32 flex-col justify-between rounded-lg border border-k-100 bg-white p-5 text-k-700 transition-transform hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10">
+      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 text-primary [&>svg]:h-6 [&>svg]:w-6">
+        {icon}
+      </div>
+      <span className="typo-sb-7">{title}</span>
+    </div>
+  );
+
+  if (href) {
+    return <Link href={href}>{content}</Link>;
+  }
+
+  return (
+    <button type="button" onClick={onClick} className="text-left">
+      {content}
+    </button>
+  );
+};
+
+const DesktopPanel = ({ title, children }: { title: string; children: React.ReactNode }) => (
+  <section className="rounded-lg border border-k-100 bg-white p-6">
+    <h2 className="text-k-900 typo-bold-4">{title}</h2>
+    <div className="mt-5 grid gap-3">{children}</div>
+  </section>
+);
+
+const DesktopMenuItem = ({
+  href,
+  onClick,
+  icon,
+  title,
+  subText,
+}: {
+  href?: string;
+  onClick?: () => void;
+  icon?: React.ReactNode;
+  title: string;
+  subText?: string;
+}) => {
+  const content = (
+    <div className="flex items-center justify-between rounded-lg bg-k-50 px-4 py-3 text-k-700 transition-colors hover:bg-k-100">
+      <div className="flex min-w-0 items-center gap-3">
+        {icon && (
+          <span className="flex h-9 w-9 items-center justify-center rounded-full bg-white [&>svg]:h-5 [&>svg]:w-5">
+            {icon}
+          </span>
+        )}
+        <span className="truncate typo-medium-2">{title}</span>
+      </div>
+      {subText && <span className="ml-4 max-w-52 truncate text-k-500 typo-regular-2">{subText}</span>}
+    </div>
+  );
+
+  if (href) {
+    return <Link href={href}>{content}</Link>;
+  }
+
+  return (
+    <button type="button" onClick={onClick} className="text-left">
+      {content}
+    </button>
+  );
+};
+
+const DesktopTextAction = ({
+  href,
+  onClick,
+  title,
+  tone = "default",
+}: {
+  href?: string;
+  onClick?: () => void;
+  title: string;
+  tone?: "default" | "danger";
+}) => {
+  const className = tone === "danger" ? "text-accent-custom-red" : "text-k-700";
+  const content = <span className={`block py-4 typo-medium-2 ${className}`}>{title}</span>;
+
+  if (href) {
+    return <Link href={href}>{content}</Link>;
+  }
+
+  return (
+    <button type="button" onClick={onClick} className="w-full text-left">
+      {content}
+    </button>
+  );
+};
+
 export default MyProfileContent;

From dc4c965ba7561d182f7c2a21005da3600ba9a26d Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 08:30:15 +0900
Subject: [PATCH 04/20] =?UTF-8?q?feat:=20=EB=8D=B0=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=ED=86=B1=20=EB=B7=B0=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/_ui/UniversityDetail/index.tsx       |   1 -
 .../app/(home)/_ui/HomeDesktopView/index.tsx  |   2 +-
 .../_ui/HomeResponsiveContent/index.tsx       |  59 ++++
 apps/web/src/app/(home)/page.tsx              |  24 +-
 .../src/app/my/_ui/MyProfileContent/index.tsx |  25 +-
 .../_components/CompletionScreen/index.tsx    |  30 +-
 .../InterestCountriesScreen/index.tsx         |  25 +-
 .../_components/StudyStatusScreen/index.tsx   |  21 +-
 .../_components/UniversityScreen/index.tsx    |  25 +-
 apps/web/src/app/my/apply-mentor/page.tsx     |  52 +++-
 .../my/favorite/_ui/FavoriteContent/index.tsx | 274 +++++++++++++++---
 apps/web/src/app/my/favorite/page.tsx         |   2 +-
 .../app/my/match/_ui/MatchContent/index.tsx   | 139 +++++++--
 apps/web/src/app/my/match/page.tsx            |   2 +-
 .../app/my/modify/_ui/ModifyContent/index.tsx | 155 +++++++---
 apps/web/src/app/my/modify/page.tsx           |   2 +-
 apps/web/src/app/my/page.tsx                  |   2 +-
 .../my/password/_ui/PasswordContent/index.tsx | 211 ++++++++++----
 apps/web/src/app/my/password/page.tsx         |   2 +-
 .../SchoolEmailVerificationContent/index.tsx  | 137 +++++++++
 apps/web/src/utils/useIsDesktopViewport.ts    |  23 ++
 21 files changed, 984 insertions(+), 229 deletions(-)
 create mode 100644 apps/web/src/app/(home)/_ui/HomeResponsiveContent/index.tsx
 create mode 100644 apps/web/src/utils/useIsDesktopViewport.ts

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 7b7181579..b553fd04d 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
@@ -131,7 +131,6 @@ const UniversityDetailBody = ({ university }: { university: University }) => (
 
 const UniversityStats = ({ university }: { university: University }) => (
   <div className="mb-7 mt-10 flex justify-center divide-x divide-k-100">
-    <span className="px-[30px] text-k-900 typo-sb-9">0회 파견</span>
     <span className="px-[30px] text-k-900 typo-sb-9">{university.country}</span>
     <span className="px-[30px] text-k-900 typo-sb-9">모집 {university.studentCapacity}명</span>
   </div>
diff --git a/apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx b/apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx
index 7d2910f92..c29428366 100644
--- a/apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx
+++ b/apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx
@@ -51,7 +51,7 @@ const HomeDesktopView = ({ recommendedUniversities, allRegionsUniversityList, ne
   }));
 
   return (
-    <div className="hidden min-h-screen bg-k-50 px-8 py-8 md:block lg:px-10">
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
       <header className="mb-8 flex items-end justify-between gap-6">
         <div>
           <p className="text-primary typo-sb-9">Solid Connection</p>
diff --git a/apps/web/src/app/(home)/_ui/HomeResponsiveContent/index.tsx b/apps/web/src/app/(home)/_ui/HomeResponsiveContent/index.tsx
new file mode 100644
index 000000000..815e9aa14
--- /dev/null
+++ b/apps/web/src/app/(home)/_ui/HomeResponsiveContent/index.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import type { News } from "@/types/news";
+import type { AllRegionsUniversityList, ListUniversity } from "@/types/university";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+import FindLastYearScoreBar from "../FindLastYearScoreBar";
+import HomeDesktopView from "../HomeDesktopView";
+import HomeEntrySection from "../HomeEntrySection";
+import NewsSection from "../NewsSection";
+import PopularUniversitySection from "../PopularUniversitySection";
+import UniversityList from "../UniversityList";
+
+type HomeResponsiveContentProps = {
+  recommendedUniversities: ListUniversity[];
+  allRegionsUniversityList: AllRegionsUniversityList;
+  newsList: News[];
+};
+
+const HomeResponsiveContent = ({
+  recommendedUniversities,
+  allRegionsUniversityList,
+  newsList,
+}: HomeResponsiveContentProps) => {
+  const isDesktop = useIsDesktopViewport();
+
+  if (isDesktop === null) {
+    return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
+  }
+
+  if (isDesktop) {
+    return (
+      <HomeDesktopView
+        recommendedUniversities={recommendedUniversities}
+        allRegionsUniversityList={allRegionsUniversityList}
+        newsList={newsList}
+      />
+    );
+  }
+
+  return (
+    <div className="w-full">
+      <FindLastYearScoreBar />
+      <HomeEntrySection />
+
+      <div className="border-t-[5px] border-k-50 py-5 pl-5">
+        <div className="mb-2 flex items-center gap-1.5 font-serif text-k-700 typo-sb-7">실시간 인기있는 파견학교</div>
+        <PopularUniversitySection universities={recommendedUniversities} />
+      </div>
+
+      <div className="p-5">
+        <UniversityList allRegionsUniversityList={allRegionsUniversityList} />
+      </div>
+
+      <NewsSection newsList={newsList} />
+    </div>
+  );
+};
+
+export default HomeResponsiveContent;
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index 403a29531..8ceab92ff 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -4,12 +4,7 @@ import { getCategorizedUniversities, getRecommendedUniversity } from "@/apis/uni
 import { getHomeUniversitySlugByName } from "@/constants/university";
 import { type ListUniversity, RegionEnumExtend } from "@/types/university";
 import { createUrl } from "@/utils/seo";
-import FindLastYearScoreBar from "./_ui/FindLastYearScoreBar";
-import HomeDesktopView from "./_ui/HomeDesktopView";
-import HomeEntrySection from "./_ui/HomeEntrySection";
-import NewsSection from "./_ui/NewsSection";
-import PopularUniversitySection from "./_ui/PopularUniversitySection";
-import UniversityList from "./_ui/UniversityList";
+import HomeResponsiveContent from "./_ui/HomeResponsiveContent";
 
 const pageUrl = createUrl("/");
 const ogImageUrl = createUrl("/opengraph-image.png");
@@ -114,22 +109,7 @@ const HomePage = async () => {
   return (
     <>
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }} />
-      <div className="w-full md:hidden">
-        <FindLastYearScoreBar />
-        <HomeEntrySection />
-
-        <div className="border-t-[5px] border-k-50 py-5 pl-5">
-          <div className="mb-2 flex items-center gap-1.5 font-serif text-k-700 typo-sb-7">실시간 인기있는 파견학교</div>
-          <PopularUniversitySection universities={resolvedRecommendedUniversities} />
-        </div>
-
-        <div className="p-5">
-          <UniversityList allRegionsUniversityList={allRegionsUniversityList} />
-        </div>
-
-        <NewsSection newsList={newsList} />
-      </div>
-      <HomeDesktopView
+      <HomeResponsiveContent
         recommendedUniversities={resolvedRecommendedUniversities}
         allRegionsUniversityList={allRegionsUniversityList}
         newsList={newsList}
diff --git a/apps/web/src/app/my/_ui/MyProfileContent/index.tsx b/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
index 575d08f2f..bc942801a 100644
--- a/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
+++ b/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
@@ -19,6 +19,7 @@ import {
 } from "@/public/svgs/my";
 import { UserRole } from "@/types/mentor";
 import { openKakaoOpenChat } from "@/utils/openKakaoOpenChat";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
 const NEXT_PUBLIC_CONTACT_LINK = process.env.NEXT_PUBLIC_CONTACT_LINK;
 
@@ -41,6 +42,7 @@ const MyProfileContent = () => {
   const { mutate: deleteUserAccount } = useDeleteUserAccount();
   const { mutate: postLogout } = usePostLogout();
   const clientRole = useAuthStore((state) => state.clientRole);
+  const isDesktop = useIsDesktopViewport();
 
   const { nickname, email, profileImageUrl } = profileData;
   const isMentor = profileData.role === UserRole.MENTOR || profileData.role === UserRole.ADMIN;
@@ -87,14 +89,11 @@ const MyProfileContent = () => {
     handleLogout: () => postLogout(),
   };
 
-  return (
-    <>
-      <div className="md:hidden">
-        <MyProfileMobileView {...viewProps} />
-      </div>
-      <MyProfileDesktopView {...viewProps} />
-    </>
-  );
+  if (isDesktop === null) {
+    return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
+  }
+
+  return isDesktop ? <MyProfileDesktopView {...viewProps} /> : <MyProfileMobileView {...viewProps} />;
 };
 
 const MyProfileMobileView = ({
@@ -229,7 +228,7 @@ const MyProfileDesktopView = ({
   const statusText = viewAsMentor ? university || "수학학교 미등록" : favoriteLocation;
 
   return (
-    <div className="hidden min-h-screen bg-k-50 px-8 py-8 md:block lg:px-10">
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
       <header className="mb-8">
         <p className="text-primary typo-sb-9">My Solid</p>
         <h1 className="mt-2 text-k-900 typo-bold-1">마이페이지</h1>
@@ -348,6 +347,10 @@ const DesktopQuickAction = ({
     return <Link href={href}>{content}</Link>;
   }
 
+  if (!onClick) {
+    return content;
+  }
+
   return (
     <button type="button" onClick={onClick} className="text-left">
       {content}
@@ -393,6 +396,10 @@ const DesktopMenuItem = ({
     return <Link href={href}>{content}</Link>;
   }
 
+  if (!onClick) {
+    return content;
+  }
+
   return (
     <button type="button" onClick={onClick} className="text-left">
       {content}
diff --git a/apps/web/src/app/my/apply-mentor/_components/CompletionScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/CompletionScreen/index.tsx
index 9edd8c299..2dd50e9a9 100644
--- a/apps/web/src/app/my/apply-mentor/_components/CompletionScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/CompletionScreen/index.tsx
@@ -6,9 +6,37 @@ import BlockBtn from "@/components/button/BlockBtn";
 
 import { IconCheck } from "@/public/svgs/mentor";
 
-const CompletionScreen = () => {
+const CompletionScreen = ({ isDesktop = false }: { isDesktop?: boolean }) => {
   const router = useRouter();
 
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">My Solid</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">멘토 전환 신청</h1>
+          <p className="mt-2 text-k-500 typo-medium-2">신청서가 정상적으로 제출되었습니다.</p>
+        </header>
+
+        <section className="flex min-h-[520px] flex-col items-center justify-center rounded-lg border border-k-100 bg-white p-8 text-center">
+          <div className="mb-8 flex h-32 w-32 items-center justify-center rounded-full bg-primary-100">
+            <IconCheck className="h-16 w-16 text-primary" />
+          </div>
+          <h2 className="mb-4 text-primary typo-bold-1">멘토 전환 신청 완료</h2>
+          <p className="mb-12 text-k-600 typo-regular-2">관리자 검토가 완료되면 멘토 회원으로 전환돼요.</p>
+          <div className="w-full max-w-sm">
+            <BlockBtn
+              onClick={() => router.push("/my")}
+              className="hover:bg-primary-50 border border-primary bg-white text-primary"
+            >
+              마이페이지로 이동하기
+            </BlockBtn>
+          </div>
+        </section>
+      </div>
+    );
+  }
+
   return (
     <div className="flex min-h-screen flex-col items-center justify-center px-5">
       <div className="flex flex-col items-center">
diff --git a/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
index 24dcae83e..af8b6ce9b 100644
--- a/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
@@ -12,13 +12,14 @@ import type { MentorApplicationFormInputData } from "../../_lib/schema";
 
 type InterestCountriesScreenProps = {
   onNext: () => void;
+  isDesktop?: boolean;
 };
 
 const countryCodeByName = Object.fromEntries(
   Object.entries(COUNTRY_CODE_MAP).map(([code, countryName]) => [countryName, code]),
 ) as Record<string, CountryCode>;
 
-const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
+const InterestCountriesScreen = ({ onNext, isDesktop = false }: InterestCountriesScreenProps) => {
   const {
     watch,
     setValue,
@@ -51,9 +52,9 @@ const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
   const currentCountries = currentRegion?.countries.filter((country) => countryCodeByName[country]) ?? [];
 
   return (
-    <div className="pb-28">
-      <div className="px-5">
-        <div className="mt-5">
+    <div className={clsx({ "pb-28": !isDesktop })}>
+      <div className={clsx({ "px-5": !isDesktop })}>
+        <div className={clsx({ "mt-5": !isDesktop })}>
           <span className="text-k-900 typo-bold-1">
             나의
             <span className="text-primary"> 수학 국가</span>를
@@ -64,7 +65,7 @@ const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
 
         {/* Selected Country Tag */}
         {selectedCountryName && (
-          <div className="mt-5 grid grid-cols-3 gap-3">
+          <div className={clsx("mt-5 grid gap-3", isDesktop ? "grid-cols-5" : "grid-cols-3")}>
             <button
               className="relative h-10 rounded bg-primary-100 text-center text-k-800 typo-medium-2"
               onClick={() => {
@@ -84,7 +85,7 @@ const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
         {errors.country && <p className="mt-2 text-red-500 typo-regular-2">{errors.country.message}</p>}
 
         {/* Region Tabs - Large Icon Buttons */}
-        <div className="mt-10 grid grid-cols-3 gap-4">
+        <div className={clsx("mt-10 grid gap-4", isDesktop ? "grid-cols-5" : "grid-cols-3")}>
           {mentorRegionList.map((region) => (
             <button
               key={region.name}
@@ -112,7 +113,7 @@ const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
         </div>
 
         {/* Country Buttons - Only show current region's countries */}
-        <div className="mt-8 grid grid-cols-3 gap-3">
+        <div className={clsx("mt-8 grid gap-3", isDesktop ? "grid-cols-5" : "grid-cols-3")}>
           {currentCountries.map((country) => (
             <button
               key={country}
@@ -129,8 +130,14 @@ const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
         </div>
       </div>
 
-      <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]">
-        <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
+      <div
+        className={clsx(
+          isDesktop
+            ? "mt-10 w-full max-w-sm"
+            : "fixed bottom-0 left-0 right-0 w-full bg-white pb-14 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]",
+        )}
+      >
+        <div className={clsx({ "mx-auto w-full max-w-app px-5 md:max-w-none": !isDesktop })}>
           <BlockBtn className="mb-[29px]" disabled={!selectedCountryCode} onClick={handleNext}>
             다음
           </BlockBtn>
diff --git a/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
index bf576ca57..d30dd4fef 100644
--- a/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
@@ -9,9 +9,10 @@ import type { MentorApplicationFormInputData } from "../../_lib/schema";
 
 type StudyStatusScreenProps = {
   onNext: () => void;
+  isDesktop?: boolean;
 };
 
-const StudyStatusScreen = ({ onNext }: StudyStatusScreenProps) => {
+const StudyStatusScreen = ({ onNext, isDesktop = false }: StudyStatusScreenProps) => {
   const {
     watch,
     setValue,
@@ -29,9 +30,9 @@ const StudyStatusScreen = ({ onNext }: StudyStatusScreenProps) => {
   };
 
   return (
-    <div className="pb-28">
-      <div className="px-5">
-        <div className="mt-5">
+    <div className={clsx({ "pb-28": !isDesktop })}>
+      <div className={clsx({ "px-5": !isDesktop })}>
+        <div className={clsx({ "mt-5": !isDesktop })}>
           <span className="text-k-900 typo-bold-1">
             현재 나의
             <span className="text-primary"> 준비 단계</span>를
@@ -45,7 +46,7 @@ const StudyStatusScreen = ({ onNext }: StudyStatusScreenProps) => {
         )}
 
         <div className="mt-10">
-          <div className="flex flex-col gap-5">
+          <div className={clsx("grid gap-5", isDesktop ? "grid-cols-3" : "grid-cols-1")}>
             {/* 지원 솔커 - 비활성화 */}
             <StatusChoiceButton
               status="BEFORE_EXCHANGE"
@@ -79,8 +80,14 @@ const StudyStatusScreen = ({ onNext }: StudyStatusScreenProps) => {
         </div>
       </div>
 
-      <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]">
-        <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
+      <div
+        className={clsx(
+          isDesktop
+            ? "mt-10 w-full max-w-sm"
+            : "fixed bottom-0 left-0 right-0 w-full bg-white pb-14 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]",
+        )}
+      >
+        <div className={clsx({ "mx-auto w-full max-w-app px-5 md:max-w-none": !isDesktop })}>
           <BlockBtn className="mb-[29px]" disabled={!preparationStatus} onClick={handleNext}>
             다음
           </BlockBtn>
diff --git a/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
index 9a4ab10c9..0964f40ad 100644
--- a/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
@@ -15,9 +15,10 @@ type FormValues = z.input<typeof mentorApplicationSchema>;
 type UniversityScreenProps = {
   isSubmitting: boolean;
   onNext: () => void;
+  isDesktop?: boolean;
 };
 
-const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
+const UniversityScreen = ({ isSubmitting, onNext, isDesktop = false }: UniversityScreenProps) => {
   const {
     watch,
     setValue,
@@ -99,9 +100,9 @@ const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
   };
 
   return (
-    <div className="pb-28">
-      <div className="px-5">
-        <div className="mt-5">
+    <div className={clsx({ "pb-28": !isDesktop })}>
+      <div className={clsx({ "px-5": !isDesktop })}>
+        <div className={clsx({ "mt-5": !isDesktop })}>
           <span className="text-k-900 typo-bold-1">
             나의
             <span className="text-primary"> 수학 학교</span>를
@@ -110,9 +111,9 @@ const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
           </span>
         </div>
 
-        <div className="mt-10 flex flex-col gap-5">
+        <div className={clsx("mt-10 grid gap-5", isDesktop ? "grid-cols-2" : "grid-cols-1")}>
           {/* 선택한 국가 */}
-          <div className="flex flex-col gap-2">
+          <div className={clsx("flex flex-col gap-2", isDesktop && "col-span-2")}>
             <label className="text-k-900 typo-sb-9">국가</label>
             <div className="flex h-12 items-center rounded-lg border border-k-200 bg-k-50 px-4 text-accent-custom-indigo typo-regular-2">
               {selectedCountryName || "이전 단계에서 국가를 선택해주세요"}
@@ -120,7 +121,7 @@ const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
           </div>
 
           {/* 학교 선택 */}
-          <div className="flex flex-col gap-2">
+          <div className={clsx("flex flex-col gap-2", isDesktop && "col-span-2")}>
             <label className="text-k-900 typo-sb-9">학교</label>
             {isLoading ? (
               <div className="flex h-12 items-center justify-center rounded-lg border border-k-200 bg-k-50 px-4 text-k-400 typo-regular-2">
@@ -202,8 +203,14 @@ const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
         </div>
       </div>
 
-      <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]">
-        <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
+      <div
+        className={clsx(
+          isDesktop
+            ? "mt-10 w-full max-w-sm"
+            : "fixed bottom-0 left-0 right-0 w-full bg-white pb-14 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]",
+        )}
+      >
+        <div className={clsx({ "mx-auto w-full max-w-app px-5 md:max-w-none": !isDesktop })}>
           <BlockBtn
             className="mb-[29px]"
             disabled={isSubmitting || !selectedCountryName || !universityId || !term || !verificationFile}
diff --git a/apps/web/src/app/my/apply-mentor/page.tsx b/apps/web/src/app/my/apply-mentor/page.tsx
index ae45b5628..978e71b49 100644
--- a/apps/web/src/app/my/apply-mentor/page.tsx
+++ b/apps/web/src/app/my/apply-mentor/page.tsx
@@ -9,6 +9,7 @@ import { usePostMentorApplication } from "@/apis/mentor";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import { Progress } from "@/components/ui/Progress";
 import { showIconToast } from "@/lib/toast/showIconToast";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import CompletionScreen from "./_components/CompletionScreen";
 import InterestCountriesScreen from "./_components/InterestCountriesScreen";
 import StudyStatusScreen from "./_components/StudyStatusScreen";
@@ -20,6 +21,7 @@ type FormOutputValues = z.output<typeof mentorApplicationSchema>;
 
 const ApplyMentorPage = () => {
   const router = useRouter();
+  const isDesktop = useIsDesktopViewport(false);
   const [step, setStep] = useState<number>(1);
 
   const methods = useForm<FormInputValues, unknown, FormOutputValues>({
@@ -44,6 +46,7 @@ const ApplyMentorPage = () => {
   };
 
   const progress = ((step - 1) / 3) * 100;
+  const stepTitle = step === 1 ? "회원 유형 선택" : step === 2 ? "수학 국가 선택" : step === 3 ? "수학 학교 선택" : "";
 
   const onSubmit = methods.handleSubmit((data: FormOutputValues) => {
     postMentorApplication(
@@ -65,17 +68,56 @@ const ApplyMentorPage = () => {
   });
 
   if (step === 4) {
-    return <CompletionScreen />;
+    return <CompletionScreen isDesktop={Boolean(isDesktop)} />;
+  }
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <FormProvider {...methods}>
+          <header className="mb-8">
+            <p className="text-primary typo-sb-9">My Solid</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(560px,760px)_minmax(280px,360px)]">
+            <section className="rounded-lg border border-k-100 bg-white p-6">
+              <div className="mb-8">
+                <div className="mb-3 flex items-center justify-between">
+                  <span className="text-k-900 typo-bold-4">{stepTitle}</span>
+                  <span className="text-primary typo-sb-9">{step}/3</span>
+                </div>
+                <Progress showPercentage={false} value={progress} />
+              </div>
+
+              {step === 1 && <StudyStatusScreen isDesktop onNext={goNextStep} />}
+              {step === 2 && <InterestCountriesScreen isDesktop onNext={goNextStep} />}
+              {step === 3 && <UniversityScreen isDesktop isSubmitting={isPending} onNext={onSubmit} />}
+            </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>
+              <ol className="mt-5 space-y-4 text-k-600 typo-medium-3">
+                <li className={step === 1 ? "text-primary" : ""}>1. 준비 단계 선택</li>
+                <li className={step === 2 ? "text-primary" : ""}>2. 수학 국가 선택</li>
+                <li className={step === 3 ? "text-primary" : ""}>3. 학교와 증빙서류 제출</li>
+              </ol>
+              <p className="mt-6 text-k-500 typo-regular-2">
+                제출 후 관리자가 정보를 확인하면 멘토 회원으로 전환됩니다.
+              </p>
+            </aside>
+          </div>
+        </FormProvider>
+      </div>
+    );
   }
 
   return (
     <div className="w-full">
       <FormProvider {...methods}>
         {/* Top Navigation */}
-        <TopDetailNavigation
-          title={step === 1 ? "회원 유형 선택" : step === 2 ? "수학 국가 선택" : step === 3 ? "수학 학교 선택" : ""}
-          handleBack={goPrevStep}
-        />
+        <TopDetailNavigation title={stepTitle} handleBack={goPrevStep} />
 
         {/* Progress Bar */}
         <div className="px-5 pb-4 pt-4">
diff --git a/apps/web/src/app/my/favorite/_ui/FavoriteContent/index.tsx b/apps/web/src/app/my/favorite/_ui/FavoriteContent/index.tsx
index 14094f856..b6e84eef7 100644
--- a/apps/web/src/app/my/favorite/_ui/FavoriteContent/index.tsx
+++ b/apps/web/src/app/my/favorite/_ui/FavoriteContent/index.tsx
@@ -3,27 +3,75 @@
 import { useState } from "react";
 import { useGetMyInfo } from "@/apis/MyPage";
 import UniversityCard from "@/components/ui/UniverSityCard";
+import type { ListUniversity } from "@/types/university";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import useSelectUniversities from "./_hooks/useSelectUniversities";
 import useSortedUniversities from "./_hooks/useSortedUniversities";
 import FavoriteDropDown from "./_ui/FavoriteDropDown";
 
-// 필터 타입 Enum
 export enum filterType {
   LATEST = "최신순",
   LOW_SCORE = "낮은 성적순",
   NUMBER_OF_RECRUIT = "모집인원 순",
 }
 
-// 드롭다운에 표시될 아이템 목록
 const dropdownItems = [filterType.LATEST, filterType.LOW_SCORE, filterType.NUMBER_OF_RECRUIT];
 
 const FavoriteContent = () => {
   const { data: myInfo } = useGetMyInfo();
-  const { nickname } = myInfo || {}; // myInfo가 없을 경우를 대비
+  const { nickname } = myInfo || {};
   const { handleSelect, sortedUniversities, wishUniversity } = useSortedUniversities();
   const [isEditMode, setIsEditMode] = useState<boolean>(false);
   const { editSelected, handleEditSelected, handleDeleteAll } = useSelectUniversities();
+  const isDesktop = useIsDesktopViewport();
 
+  const handleDeleteSelected = () => {
+    setIsEditMode(false);
+    handleDeleteAll();
+  };
+
+  const viewProps = {
+    nickname,
+    sortedUniversities,
+    wishUniversity,
+    isEditMode,
+    editSelected,
+    setIsEditMode,
+    handleSelect,
+    handleEditSelected,
+    handleDeleteSelected,
+  };
+
+  if (isDesktop === null) {
+    return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
+  }
+
+  return isDesktop ? <FavoriteDesktopView {...viewProps} /> : <FavoriteMobileView {...viewProps} />;
+};
+
+type FavoriteViewProps = {
+  nickname?: string;
+  sortedUniversities: ListUniversity[];
+  wishUniversity: ListUniversity[];
+  isEditMode: boolean;
+  editSelected: number[];
+  setIsEditMode: (value: boolean) => void;
+  handleSelect: (value: string) => void;
+  handleEditSelected: (id: number) => void;
+  handleDeleteSelected: () => void;
+};
+
+const FavoriteMobileView = ({
+  nickname,
+  sortedUniversities,
+  wishUniversity,
+  isEditMode,
+  editSelected,
+  setIsEditMode,
+  handleSelect,
+  handleEditSelected,
+  handleDeleteSelected,
+}: FavoriteViewProps) => {
   return (
     <div className="px-5 pt-6">
       <div className="flex items-center justify-between">
@@ -33,61 +81,197 @@ const FavoriteContent = () => {
           관심있는 학교
         </p>
 
-        <div className="flex items-center gap-2">
-          <div className="flex gap-3">
-            {!isEditMode ? (
-              <button
-                className="min-w-16 rounded-lg bg-primary px-4 py-2 text-white transition-all duration-200 typo-medium-2"
-                onClick={() => setIsEditMode(true)}
-              >
-                편집
-              </button>
-            ) : (
-              <>
-                <button
-                  onClick={() => setIsEditMode(false)}
-                  className="min-w-16 rounded-lg border-2 border-gray-300 bg-white px-4 py-2 text-gray-700 transition-all duration-200 typo-medium-2 hover:bg-k-50"
-                >
-                  취소
-                </button>
-                <button
-                  onClick={() => {
-                    setIsEditMode(false);
-                    handleDeleteAll();
-                  }}
-                  className="min-w-16 rounded-lg border-2 border-primary bg-primary px-4 py-2 text-white transition-all duration-200 typo-medium-2"
-                >
-                  삭제
-                </button>
-              </>
-            )}
-          </div>
-          <FavoriteDropDown items={dropdownItems} handleSelect={handleSelect} />
-        </div>
+        <FavoriteToolbar
+          isEditMode={isEditMode}
+          setIsEditMode={setIsEditMode}
+          handleDeleteSelected={handleDeleteSelected}
+          handleSelect={handleSelect}
+        />
       </div>
 
       <div className="mt-5">
         {wishUniversity.length === 0 ? (
-          <p className="py-20 text-center text-k-400 typo-regular-2">관심 학교가 없습니다.</p>
+          <FavoriteEmptyState />
         ) : (
           <div className="flex flex-col gap-4 pb-10">
-            {/* 정렬된 배열을 사용하여 UI를 렌더링합니다. */}
             {sortedUniversities.map((university) => (
-              <div key={university.id} className="flex w-full items-center justify-between gap-2">
-                {isEditMode && (
-                  <button
-                    className={`h-6 w-6 rounded-full border-2 ${editSelected?.includes(university.id) ? "border-primary bg-primary" : "border-gray-300 bg-white"}`}
-                    onClick={() => handleEditSelected(university.id)}
-                  />
-                )}
-                <UniversityCard key={university.id} university={university} />
-              </div>
+              <FavoriteMobileItem
+                key={university.id}
+                university={university}
+                isEditMode={isEditMode}
+                isSelected={editSelected?.includes(university.id)}
+                onSelect={() => handleEditSelected(university.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const FavoriteDesktopView = ({
+  nickname,
+  sortedUniversities,
+  wishUniversity,
+  isEditMode,
+  editSelected,
+  setIsEditMode,
+  handleSelect,
+  handleEditSelected,
+  handleDeleteSelected,
+}: FavoriteViewProps) => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8 flex items-end justify-between gap-6">
+        <div>
+          <p className="text-primary typo-sb-9">My Solid</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">관심학교</h1>
+          <p className="mt-2 text-k-500 typo-medium-2">
+            {nickname ? `${nickname} 님이 저장한` : "저장한"} 파견학교를 비교하고 정리하세요.
+          </p>
+        </div>
+
+        <FavoriteToolbar
+          isEditMode={isEditMode}
+          setIsEditMode={setIsEditMode}
+          handleDeleteSelected={handleDeleteSelected}
+          handleSelect={handleSelect}
+        />
+      </header>
+
+      <section className="rounded-lg border border-k-100 bg-white p-6">
+        <div className="mb-5 flex items-center justify-between gap-4">
+          <div>
+            <h2 className="text-k-900 typo-bold-4">저장한 학교</h2>
+            <p className="mt-1 text-k-500 typo-medium-4">
+              총 <span className="text-primary typo-sb-9">{wishUniversity.length}</span>개
+            </p>
+          </div>
+          {isEditMode && (
+            <span className="rounded-full bg-primary-100 px-3 py-1 text-primary typo-medium-4">
+              {editSelected.length}개 선택
+            </span>
+          )}
+        </div>
+
+        {wishUniversity.length === 0 ? (
+          <FavoriteEmptyState />
+        ) : (
+          <div className="grid gap-4 lg:grid-cols-2 2xl:grid-cols-3">
+            {sortedUniversities.map((university) => (
+              <FavoriteDesktopItem
+                key={university.id}
+                university={university}
+                isEditMode={isEditMode}
+                isSelected={editSelected?.includes(university.id)}
+                onSelect={() => handleEditSelected(university.id)}
+              />
             ))}
           </div>
         )}
+      </section>
+    </div>
+  );
+};
+
+const FavoriteToolbar = ({
+  isEditMode,
+  setIsEditMode,
+  handleDeleteSelected,
+  handleSelect,
+}: {
+  isEditMode: boolean;
+  setIsEditMode: (value: boolean) => void;
+  handleDeleteSelected: () => void;
+  handleSelect: (value: string) => void;
+}) => {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex gap-3">
+        {!isEditMode ? (
+          <button
+            className="min-w-16 rounded-lg bg-primary px-4 py-2 text-white transition-all duration-200 typo-medium-2 hover:bg-primary-700"
+            onClick={() => setIsEditMode(true)}
+          >
+            편집
+          </button>
+        ) : (
+          <>
+            <button
+              onClick={() => setIsEditMode(false)}
+              className="min-w-16 rounded-lg border-2 border-gray-300 bg-white px-4 py-2 text-gray-700 transition-all duration-200 typo-medium-2 hover:bg-k-50"
+            >
+              취소
+            </button>
+            <button
+              onClick={handleDeleteSelected}
+              className="min-w-16 rounded-lg border-2 border-primary bg-primary px-4 py-2 text-white transition-all duration-200 typo-medium-2 hover:bg-primary-700"
+            >
+              삭제
+            </button>
+          </>
+        )}
       </div>
+      <FavoriteDropDown items={dropdownItems} handleSelect={handleSelect} />
     </div>
   );
 };
 
+const FavoriteMobileItem = ({
+  university,
+  isEditMode,
+  isSelected,
+  onSelect,
+}: {
+  university: ListUniversity;
+  isEditMode: boolean;
+  isSelected: boolean;
+  onSelect: () => void;
+}) => {
+  return (
+    <div className="flex w-full items-center justify-between gap-2">
+      {isEditMode && <SelectionButton isSelected={isSelected} onClick={onSelect} />}
+      <UniversityCard university={university} />
+    </div>
+  );
+};
+
+const FavoriteDesktopItem = ({
+  university,
+  isEditMode,
+  isSelected,
+  onSelect,
+}: {
+  university: ListUniversity;
+  isEditMode: boolean;
+  isSelected: boolean;
+  onSelect: () => void;
+}) => {
+  return (
+    <div className="flex min-w-0 items-center gap-3">
+      {isEditMode && <SelectionButton isSelected={isSelected} onClick={onSelect} />}
+      <UniversityCard university={university} />
+    </div>
+  );
+};
+
+const SelectionButton = ({ isSelected, onClick }: { isSelected: boolean; onClick: () => void }) => (
+  <button
+    type="button"
+    aria-pressed={isSelected}
+    aria-label={isSelected ? "선택 해제" : "선택"}
+    className={`h-6 w-6 shrink-0 rounded-full border-2 ${
+      isSelected ? "border-primary bg-primary" : "border-gray-300 bg-white"
+    }`}
+    onClick={onClick}
+  />
+);
+
+const FavoriteEmptyState = () => (
+  <div className="flex min-h-80 flex-col items-center justify-center rounded-lg border border-dashed border-k-100 bg-white py-20 text-center">
+    <p className="text-k-400 typo-regular-2">관심 학교가 없습니다.</p>
+  </div>
+);
+
 export default FavoriteContent;
diff --git a/apps/web/src/app/my/favorite/page.tsx b/apps/web/src/app/my/favorite/page.tsx
index e08a0b26c..7ae6cf921 100644
--- a/apps/web/src/app/my/favorite/page.tsx
+++ b/apps/web/src/app/my/favorite/page.tsx
@@ -14,7 +14,7 @@ const FavoritePage = () => {
   return (
     <>
       <TopDetailNavigation title="관심학교" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <FavoriteContent />
       </div>
     </>
diff --git a/apps/web/src/app/my/match/_ui/MatchContent/index.tsx b/apps/web/src/app/my/match/_ui/MatchContent/index.tsx
index 60a6e6328..f1e9721d9 100644
--- a/apps/web/src/app/my/match/_ui/MatchContent/index.tsx
+++ b/apps/web/src/app/my/match/_ui/MatchContent/index.tsx
@@ -1,11 +1,16 @@
 "use client";
 
+import Link from "next/link";
 import { useGetChatRooms } from "@/apis/chat";
 import { type MyInfoResponse, useGetMyInfo } from "@/apis/MyPage";
 import MentorCard from "@/components/mentor/MentorCard";
 import MentorChatCard from "@/components/mentor/MentorChatCard";
+import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
 import useAuthStore from "@/lib/zustand/useAuthStore";
+import type { ChatRoom } from "@/types/chat";
 import { UserRole } from "@/types/mentor";
+import { convertISODateToKoreanTime } from "@/utils/datetimeUtils";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
 const MatchContent = () => {
   const { data: myInfo = {} as MyInfoResponse } = useGetMyInfo();
@@ -14,9 +19,28 @@ const MatchContent = () => {
 
   const isMentor = myInfo.role === UserRole.MENTOR || myInfo.role === UserRole.ADMIN;
   const viewAsMentor = clientRole ? clientRole === UserRole.MENTOR : isMentor;
+  const isDesktop = useIsDesktopViewport();
 
-  const { nickname } = myInfo;
+  const viewProps = {
+    nickname: myInfo.nickname,
+    chatRoom,
+    viewAsMentor,
+  };
 
+  if (isDesktop === null) {
+    return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
+  }
+
+  return isDesktop ? <MatchDesktopView {...viewProps} /> : <MatchMobileView {...viewProps} />;
+};
+
+type MatchViewProps = {
+  nickname?: string;
+  chatRoom: ChatRoom[];
+  viewAsMentor: boolean;
+};
+
+const MatchMobileView = ({ nickname, chatRoom, viewAsMentor }: MatchViewProps) => {
   return (
     <div className="flex h-full flex-col px-5">
       <p className="font-pretendard text-k-700 typo-sb-4">
@@ -25,9 +49,7 @@ const MatchContent = () => {
         매칭된 {viewAsMentor ? "멘티" : "멘토"}
       </p>
       {chatRoom.length === 0 ? (
-        <p className="mt-6 text-center text-k-500 typo-regular-2">
-          매칭된 {viewAsMentor ? "멘티" : "멘토"}가 없습니다.
-        </p>
+        <MatchEmptyState viewAsMentor={viewAsMentor} />
       ) : (
         <div className="mt-6 flex flex-1 flex-col gap-4 pb-4">
           {chatRoom.map((room) =>
@@ -40,22 +62,7 @@ const MatchContent = () => {
                 time={room.lastReceivedTime}
               />
             ) : (
-              // TO DO 멘토 가져오기 API 구현시
-              <MentorCard
-                key={room.id}
-                mentor={{
-                  id: room.id,
-                  profileImageUrl: room.partner.profileUrl ?? null,
-                  nickname: room.partner.nickname ?? "",
-                  country: "",
-                  universityName: room.partner.university ?? "",
-                  menteeCount: 0,
-                  hasBadge: false,
-                  introduction: "",
-                  channels: [],
-                  term: "",
-                }}
-              />
+              <MentorCard key={room.id} mentor={toMentorPreview(room)} />
             ),
           )}
         </div>
@@ -63,4 +70,96 @@ const MatchContent = () => {
     </div>
   );
 };
+
+const MatchDesktopView = ({ nickname, chatRoom, viewAsMentor }: MatchViewProps) => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8 flex items-end justify-between gap-6">
+        <div>
+          <p className="text-primary typo-sb-9">My Solid</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">매칭된 {viewAsMentor ? "멘티" : "멘토"}</h1>
+          <p className="mt-2 text-k-500 typo-medium-2">
+            {nickname ? `${nickname}님의` : "회원님의"} 매칭 현황과 최근 대화를 확인하세요.
+          </p>
+        </div>
+        <div className="rounded-lg border border-k-100 bg-white px-5 py-4 text-right">
+          <span className="block text-k-500 typo-medium-5">전체 매칭</span>
+          <strong className="mt-1 block text-primary typo-bold-1">{chatRoom.length}</strong>
+        </div>
+      </header>
+
+      {chatRoom.length === 0 ? (
+        <section className="rounded-lg border border-k-100 bg-white p-6">
+          <MatchEmptyState viewAsMentor={viewAsMentor} />
+        </section>
+      ) : viewAsMentor ? (
+        <section className="grid gap-4 lg:grid-cols-2 2xl:grid-cols-3">
+          {chatRoom.map((room) => (
+            <DesktopChatRoomCard key={room.id} room={room} />
+          ))}
+        </section>
+      ) : (
+        <section className="grid gap-4 lg:grid-cols-2 2xl:grid-cols-3">
+          {chatRoom.map((room) => (
+            <MentorCard key={room.id} mentor={toMentorPreview(room)} />
+          ))}
+        </section>
+      )}
+    </div>
+  );
+};
+
+const DesktopChatRoomCard = ({ room }: { room: ChatRoom }) => {
+  const lastMessage = room.lastChatMessage || "안녕하세요! 교환학생에 대해 무엇이든 물어보세요!";
+
+  return (
+    <Link
+      href={`/mentor/chat/${room.id}`}
+      className="block rounded-lg border border-k-100 bg-white p-5 transition-transform hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10"
+    >
+      <div className="flex items-start gap-4">
+        <ProfileWithBadge profileImageUrl={room.partner.profileUrl} width={56} height={56} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <h2 className="truncate text-k-900 typo-bold-4">{room.partner.nickname}</h2>
+              <p className="mt-1 truncate text-k-500 typo-medium-4">{room.partner.university || "학교 정보 없음"}</p>
+            </div>
+            {room.lastReceivedTime && (
+              <span className="shrink-0 text-k-400 typo-regular-4">
+                {convertISODateToKoreanTime(room.lastReceivedTime)}
+              </span>
+            )}
+          </div>
+          <p className="mt-4 line-clamp-2 min-h-10 text-k-600 typo-regular-2">{lastMessage}</p>
+          {room.unReadCount > 0 && (
+            <span className="mt-4 inline-flex rounded-full bg-primary px-2.5 py-1 text-k-0 typo-sb-11">
+              새 메시지 {room.unReadCount}
+            </span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+const MatchEmptyState = ({ viewAsMentor }: { viewAsMentor: boolean }) => (
+  <div className="flex min-h-80 flex-col items-center justify-center rounded-lg border border-dashed border-k-100 bg-white py-20 text-center">
+    <p className="text-k-500 typo-regular-2">매칭된 {viewAsMentor ? "멘티" : "멘토"}가 없습니다.</p>
+  </div>
+);
+
+const toMentorPreview = (room: ChatRoom) => ({
+  id: room.id,
+  profileImageUrl: room.partner.profileUrl ?? null,
+  nickname: room.partner.nickname ?? "",
+  country: "",
+  universityName: room.partner.university ?? "",
+  menteeCount: 0,
+  hasBadge: false,
+  introduction: "",
+  channels: [],
+  term: "",
+});
+
 export default MatchContent;
diff --git a/apps/web/src/app/my/match/page.tsx b/apps/web/src/app/my/match/page.tsx
index c178ad698..4dc2c7603 100644
--- a/apps/web/src/app/my/match/page.tsx
+++ b/apps/web/src/app/my/match/page.tsx
@@ -14,7 +14,7 @@ const MatchPage = () => {
   return (
     <>
       <TopDetailNavigation title="매칭 멘토" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <MatchContent />
       </div>
     </>
diff --git a/apps/web/src/app/my/modify/_ui/ModifyContent/index.tsx b/apps/web/src/app/my/modify/_ui/ModifyContent/index.tsx
index a68111248..953968f3f 100644
--- a/apps/web/src/app/my/modify/_ui/ModifyContent/index.tsx
+++ b/apps/web/src/app/my/modify/_ui/ModifyContent/index.tsx
@@ -5,6 +5,7 @@ import { FormProvider } from "react-hook-form";
 
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import { UserRole } from "@/types/mentor";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import useModifyUserHookform from "./_hooks/useModifyUserHookform";
 import ImageInputFiled from "./_ui/ImageInputFiled";
 import InputField from "./_ui/InputFiled";
@@ -12,6 +13,7 @@ import ReadOnlyField from "./_ui/ReadOnlyField";
 
 const ModifyContent = () => {
   const { methods, myInfo, onSubmit } = useModifyUserHookform();
+  const isDesktop = useIsDesktopViewport(false);
 
   const defaultUniversity: string =
     (myInfo?.role === UserRole.MENTOR || myInfo?.role === UserRole.ADMIN) && myInfo.attendedUniversity
@@ -26,48 +28,127 @@ const ModifyContent = () => {
   if (!myInfo) {
     return <CloudSpinnerPage />;
   }
+
+  const roleText = myInfo.role === UserRole.ADMIN ? "어드민" : myInfo.role === UserRole.MENTOR ? "멘토" : "멘티";
+  const formProps = {
+    defaultUniversity,
+    isValid,
+    isDirty,
+    profileImageUrl: myInfo.profileImageUrl ?? null,
+    roleText,
+    onSubmit: handleSubmit(onSubmit),
+  };
+
   return (
     <FormProvider {...methods}>
-      <div className="px-5 py-6">
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-          {/* Profile Image Section */}
-          <ImageInputFiled initImagePreview={myInfo.profileImageUrl ?? null} />
-
-          {/* Form Fields */}
-          <div className="space-y-2">
-            {/* 닉네임 - 수정 가능 */}
-            <InputField name="nickname" label="닉네임" placeholder="닉네임을 입력해주세요" />
-
-            {/* 출신학교 - 읽기 전용 */}
-            <ReadOnlyField label="출신학교" value={defaultUniversity} placeholder="서울대학교" />
-
-            {/* 수학 학교 - 읽기 전용 */}
-            <ReadOnlyField label="수학 학교" value="컴퓨터공학과" placeholder="전공" />
-
-            {/* 사용자 유형 - 읽기 전용 */}
-            <ReadOnlyField
-              label="사용자 유형"
-              value={myInfo.role === UserRole.ADMIN ? "어드민" : myInfo.role === UserRole.MENTOR ? "멘토" : "멘티"}
-              placeholder="멘티"
-            />
-          </div>
+      {isDesktop ? <ModifyDesktopView {...formProps} /> : <ModifyMobileView {...formProps} />}
+    </FormProvider>
+  );
+};
+
+type ModifyViewProps = {
+  defaultUniversity: string;
+  isValid: boolean;
+  isDirty: boolean;
+  profileImageUrl: string | null;
+  roleText: string;
+  onSubmit: () => void;
+};
+
+const ModifyMobileView = ({
+  defaultUniversity,
+  isValid,
+  isDirty,
+  profileImageUrl,
+  roleText,
+  onSubmit,
+}: ModifyViewProps) => {
+  return (
+    <div className="px-5 py-6">
+      <ProfileEditForm
+        defaultUniversity={defaultUniversity}
+        isValid={isValid}
+        isDirty={isDirty}
+        profileImageUrl={profileImageUrl}
+        roleText={roleText}
+        onSubmit={onSubmit}
+      />
+    </div>
+  );
+};
 
-          {/* Submit Button */}
-          <div className="pt-6">
-            <button
-              type="submit"
-              disabled={!isValid || !isDirty}
-              className={clsx(
-                "w-full rounded-lg py-4 text-white transition-colors typo-sb-9",
-                isValid && isDirty ? "bg-primary hover:bg-primary-600" : "cursor-not-allowed bg-k-400",
-              )}
-            >
-              저장하기
-            </button>
+const ModifyDesktopView = ({
+  defaultUniversity,
+  isValid,
+  isDirty,
+  profileImageUrl,
+  roleText,
+  onSubmit,
+}: ModifyViewProps) => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8">
+        <p className="text-primary typo-sb-9">My Solid</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(420px,640px)_minmax(280px,360px)]">
+        <section className="rounded-lg border border-k-100 bg-white p-6">
+          <ProfileEditForm
+            defaultUniversity={defaultUniversity}
+            isValid={isValid}
+            isDirty={isDirty}
+            profileImageUrl={profileImageUrl}
+            roleText={roleText}
+            onSubmit={onSubmit}
+          />
+        </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 space-y-4 text-k-600 typo-medium-3">
+            <p>닉네임과 프로필 이미지는 커뮤니티, 멘토링, 채팅에서 함께 노출됩니다.</p>
+            <p>학교와 사용자 유형은 서비스 이용 상태에 따라 관리되며 이 화면에서는 직접 수정할 수 없습니다.</p>
           </div>
-        </form>
+        </aside>
       </div>
-    </FormProvider>
+    </div>
+  );
+};
+
+const ProfileEditForm = ({
+  defaultUniversity,
+  isValid,
+  isDirty,
+  profileImageUrl,
+  roleText,
+  onSubmit,
+}: ModifyViewProps) => {
+  return (
+    <form onSubmit={onSubmit} className="space-y-6">
+      <ImageInputFiled initImagePreview={profileImageUrl} />
+
+      <div className="space-y-2">
+        <InputField name="nickname" label="닉네임" placeholder="닉네임을 입력해주세요" />
+        <ReadOnlyField label="출신학교" value={defaultUniversity} placeholder="서울대학교" />
+        <ReadOnlyField label="수학 학교" value="컴퓨터공학과" placeholder="전공" />
+        <ReadOnlyField label="사용자 유형" value={roleText} placeholder="멘티" />
+      </div>
+
+      <div className="pt-6">
+        <button
+          type="submit"
+          disabled={!isValid || !isDirty}
+          className={clsx(
+            "w-full rounded-lg py-4 text-white transition-colors typo-sb-9",
+            isValid && isDirty ? "bg-primary hover:bg-primary-600" : "cursor-not-allowed bg-k-400",
+          )}
+        >
+          저장하기
+        </button>
+      </div>
+    </form>
   );
 };
 
diff --git a/apps/web/src/app/my/modify/page.tsx b/apps/web/src/app/my/modify/page.tsx
index 3945ec6a8..9e7cc2300 100644
--- a/apps/web/src/app/my/modify/page.tsx
+++ b/apps/web/src/app/my/modify/page.tsx
@@ -14,7 +14,7 @@ const ModifyPage = () => {
   return (
     <>
       <TopDetailNavigation title="프로필 수정" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <ModifyContent />
       </div>
     </>
diff --git a/apps/web/src/app/my/page.tsx b/apps/web/src/app/my/page.tsx
index b29490b02..8b31cc796 100644
--- a/apps/web/src/app/my/page.tsx
+++ b/apps/web/src/app/my/page.tsx
@@ -14,7 +14,7 @@ const MyPage = () => {
   return (
     <>
       <TopDetailNavigation title="마이페이지" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <MyProfileContent />
       </div>
     </>
diff --git a/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx b/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
index a2ab12965..79bf84195 100644
--- a/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
+++ b/apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
@@ -7,6 +7,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { usePatchMyPassword } from "@/apis/MyPage";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import PasswordInput from "./_ui/PasswordInput";
 
 export const changePasswordSchema = z
@@ -35,6 +36,7 @@ interface ChangePasswordFormData {
 const PasswordContent = () => {
   const { mutate: patchMyPassword } = usePatchMyPassword();
   const [step, setStep] = useState(0); // 0: 현재 비밀번호, 1: 새 비밀번호
+  const isDesktop = useIsDesktopViewport(false);
 
   const methods = useForm<ChangePasswordFormData>({
     resolver: zodResolver(changePasswordSchema),
@@ -73,71 +75,164 @@ const PasswordContent = () => {
     !errors.newPassword &&
     !errors.newPasswordConfirmation;
 
+  const formProps = {
+    step,
+    isStep1ButtonEnabled: Boolean(isStep1ButtonEnabled),
+    isStep2ButtonEnabled: Boolean(isStep2ButtonEnabled),
+    handleNextStep,
+    onSubmit: handleSubmit(onSubmit),
+  };
+
   return (
     <FormProvider {...methods}>
-      <form className="px-5 py-7" onSubmit={handleSubmit(onSubmit)}>
-        <p className="mb-8 typo-sb-4">비밀번호 변경</p>
-
-        {step === 0 && (
-          <PasswordInput
-            name="currentPassword"
-            label="현재 비밀번호를 입력해주세요"
-            placeholder="8자리 이상 입력해주세요"
-            approveMessage="올바른 비밀번호 형식입니다."
-            autoFocus
+      {isDesktop ? <PasswordDesktopView {...formProps} /> : <PasswordMobileView {...formProps} />}
+    </FormProvider>
+  );
+};
+
+type PasswordViewProps = {
+  step: number;
+  isStep1ButtonEnabled: boolean;
+  isStep2ButtonEnabled: boolean;
+  handleNextStep: () => Promise<void>;
+  onSubmit: () => void;
+};
+
+const PasswordMobileView = ({
+  step,
+  isStep1ButtonEnabled,
+  isStep2ButtonEnabled,
+  handleNextStep,
+  onSubmit,
+}: PasswordViewProps) => {
+  return (
+    <form className="px-5 py-7" onSubmit={onSubmit}>
+      <p className="mb-8 typo-sb-4">비밀번호 변경</p>
+      <PasswordFields step={step} />
+      <div className="fixed bottom-0 left-0 right-0 mb-20 w-full py-4 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]">
+        <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
+          <PasswordActionButton
+            step={step}
+            isStep1ButtonEnabled={isStep1ButtonEnabled}
+            isStep2ButtonEnabled={isStep2ButtonEnabled}
+            handleNextStep={handleNextStep}
           />
-        )}
+        </div>
+      </div>
+    </form>
+  );
+};
 
-        {step === 1 && (
-          <>
-            <PasswordInput
-              name="newPassword"
-              label="새로운 비밀번호를 입력해주세요"
-              placeholder="영문, 숫자, 특수문자 조합 8자 이상"
-              approveMessage="사용 가능한 비밀번호입니다."
-              autoFocus
-            />
-            <PasswordInput
-              approveMessage={"입력한 비밀번호와 동일합니다."}
-              name="newPasswordConfirmation"
-              label="비밀번호를 다시 입력해주세요"
-              placeholder="비밀번호 확인"
+const PasswordDesktopView = ({
+  step,
+  isStep1ButtonEnabled,
+  isStep2ButtonEnabled,
+  handleNextStep,
+  onSubmit,
+}: PasswordViewProps) => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8">
+        <p className="text-primary typo-sb-9">My Solid</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(420px,640px)_minmax(280px,360px)]">
+        <section className="rounded-lg border border-k-100 bg-white p-6">
+          <form onSubmit={onSubmit}>
+            <PasswordFields step={step} />
+            <PasswordActionButton
+              step={step}
+              isStep1ButtonEnabled={isStep1ButtonEnabled}
+              isStep2ButtonEnabled={isStep2ButtonEnabled}
+              handleNextStep={handleNextStep}
             />
-          </>
+          </form>
+        </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 space-y-4 text-k-600 typo-medium-3">
+            <p>새 비밀번호는 대문자, 소문자, 숫자를 포함해 8자 이상으로 설정해야 합니다.</p>
+            <p>다른 서비스에서 사용 중인 비밀번호와 동일하게 설정하지 않는 것을 권장합니다.</p>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+};
+
+const PasswordFields = ({ step }: { step: number }) => (
+  <>
+    {step === 0 && (
+      <PasswordInput
+        name="currentPassword"
+        label="현재 비밀번호를 입력해주세요"
+        placeholder="8자리 이상 입력해주세요"
+        approveMessage="올바른 비밀번호 형식입니다."
+        autoFocus
+      />
+    )}
+
+    {step === 1 && (
+      <>
+        <PasswordInput
+          name="newPassword"
+          label="새로운 비밀번호를 입력해주세요"
+          placeholder="영문, 숫자, 특수문자 조합 8자 이상"
+          approveMessage="사용 가능한 비밀번호입니다."
+          autoFocus
+        />
+        <PasswordInput
+          approveMessage="입력한 비밀번호와 동일합니다."
+          name="newPasswordConfirmation"
+          label="비밀번호를 다시 입력해주세요"
+          placeholder="비밀번호 확인"
+        />
+      </>
+    )}
+  </>
+);
+
+const PasswordActionButton = ({
+  step,
+  isStep1ButtonEnabled,
+  isStep2ButtonEnabled,
+  handleNextStep,
+}: {
+  step: number;
+  isStep1ButtonEnabled: boolean;
+  isStep2ButtonEnabled: boolean;
+  handleNextStep: () => Promise<void>;
+}) => {
+  if (step === 0) {
+    return (
+      <button
+        type="button"
+        onClick={handleNextStep}
+        disabled={!isStep1ButtonEnabled}
+        className={clsx(
+          "w-full rounded-lg py-4 text-white transition-colors typo-sb-9",
+          isStep1ButtonEnabled ? "bg-primary-600 hover:bg-primary-700" : "cursor-not-allowed bg-gray-400",
         )}
+      >
+        확인
+      </button>
+    );
+  }
 
-        <div className="fixed bottom-0 left-0 right-0 mb-20 w-full py-4 md:left-[88px] md:right-auto md:w-[calc(100%-88px)]">
-          <div className="mx-auto w-full max-w-app px-5 md:max-w-none">
-            {step === 0 && (
-              <button
-                type="button"
-                onClick={handleNextStep}
-                disabled={!isStep1ButtonEnabled}
-                className={clsx(
-                  "w-full rounded-lg py-4 text-white transition-colors typo-sb-9",
-                  isStep1ButtonEnabled ? "bg-primary-600 hover:bg-primary-700" : "cursor-not-allowed bg-gray-400",
-                )}
-              >
-                확인
-              </button>
-            )}
-
-            {step === 1 && (
-              <button
-                type="submit"
-                disabled={!isStep2ButtonEnabled}
-                className={clsx(
-                  "w-full rounded-lg py-4 text-white transition-colors typo-sb-9",
-                  isStep2ButtonEnabled ? "bg-primary-600 hover:bg-primary-700" : "cursor-not-allowed bg-gray-400",
-                )}
-              >
-                변경하기
-              </button>
-            )}
-          </div>
-        </div>
-      </form>
-    </FormProvider>
+  return (
+    <button
+      type="submit"
+      disabled={!isStep2ButtonEnabled}
+      className={clsx(
+        "w-full rounded-lg py-4 text-white transition-colors typo-sb-9",
+        isStep2ButtonEnabled ? "bg-primary-600 hover:bg-primary-700" : "cursor-not-allowed bg-gray-400",
+      )}
+    >
+      변경하기
+    </button>
   );
 };
 
diff --git a/apps/web/src/app/my/password/page.tsx b/apps/web/src/app/my/password/page.tsx
index a2490b2a3..2ef45c7bd 100644
--- a/apps/web/src/app/my/password/page.tsx
+++ b/apps/web/src/app/my/password/page.tsx
@@ -14,7 +14,7 @@ const ModifyPage = () => {
   return (
     <>
       <TopDetailNavigation title="비밀번호 수정" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <PasswordContent />
       </div>
     </>
diff --git a/apps/web/src/app/my/school-email/_ui/SchoolEmailVerificationContent/index.tsx b/apps/web/src/app/my/school-email/_ui/SchoolEmailVerificationContent/index.tsx
index 78890319b..9f2201ff6 100644
--- a/apps/web/src/app/my/school-email/_ui/SchoolEmailVerificationContent/index.tsx
+++ b/apps/web/src/app/my/school-email/_ui/SchoolEmailVerificationContent/index.tsx
@@ -8,6 +8,7 @@ import { Input } from "@/components/ui/Inputa";
 import { Label } from "@/components/ui/Label";
 import { Progress } from "@/components/ui/Progress";
 import { IconExpRed } from "@/public/svgs/ui";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
 const VERIFICATION_LIMIT_SECONDS = 300;
 const CODE_LENGTH = 6;
@@ -25,6 +26,7 @@ const formatTime = (seconds: number) => {
 
 const SchoolEmailVerificationContent = () => {
   const router = useRouter();
+  const isDesktop = useIsDesktopViewport(false);
   const { data: myInfo } = useGetMyInfo();
   const postSchoolEmailMutation = usePostSchoolEmail();
   const postConfirmSchoolEmailMutation = usePostConfirmSchoolEmail();
@@ -117,6 +119,33 @@ const SchoolEmailVerificationContent = () => {
   };
 
   if (step === "done") {
+    if (isDesktop) {
+      return (
+        <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+          <header className="mb-8">
+            <p className="text-primary typo-sb-9">My Solid</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">학교 인증</h1>
+            <p className="mt-2 text-k-500 typo-medium-2">학교 이메일 인증이 완료되었습니다.</p>
+          </header>
+
+          <section className="flex min-h-[520px] flex-col items-center justify-center rounded-lg border border-k-100 bg-white p-8 text-center">
+            <div className="mb-6 flex h-[120px] w-[120px] items-center justify-center rounded-full border-[10px] border-secondary">
+              <div className="h-10 w-16 -rotate-45 border-b-[10px] border-l-[10px] border-secondary" />
+            </div>
+            <h2 className="text-k-800 typo-bold-1">
+              학교 인증이 <span className="text-secondary">완료</span>되었어요!
+            </h2>
+            <p className="mt-3 text-k-500 typo-medium-2">
+              인증된 학교 정보를 기반으로 솔리드 커넥션을 이용할 수 있어요.
+            </p>
+            <div className="mt-10 w-full max-w-sm">
+              <BlockBtn onClick={() => router.replace("/")}>홈으로</BlockBtn>
+            </div>
+          </section>
+        </div>
+      );
+    }
+
     return (
       <div className="flex min-h-[calc(100dvh-3.5rem)] flex-col px-5">
         <div className="flex flex-1 flex-col items-center justify-center pb-24 text-center">
@@ -139,6 +168,114 @@ const SchoolEmailVerificationContent = () => {
     );
   }
 
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">My Solid</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(420px,640px)_minmax(280px,360px)]">
+          <section className="rounded-lg border border-k-100 bg-white p-6">
+            <Progress value={progressValue} showPercentage={false} />
+
+            <div className="mt-8">
+              <h2 className="text-k-900 typo-bold-2">
+                {step === "email" ? "학교 이메일을 통해" : "이메일로 발송한"}
+                <br />
+                {step === "email" ? "학교 인증을 진행해주세요" : "인증번호를 입력해주세요"}
+              </h2>
+            </div>
+
+            <div className="mt-8 flex flex-col gap-5">
+              <div>
+                <Label htmlFor="desktopSchoolEmail" className="text-k-900">
+                  학교 이메일
+                </Label>
+                <Input
+                  id="desktopSchoolEmail"
+                  variant="gray"
+                  placeholder="ID@example.com"
+                  type="email"
+                  autoComplete="email"
+                  value={schoolEmail}
+                  disabled={step === "code"}
+                  onChange={(event) => {
+                    setSchoolEmail(event.target.value);
+                    setEmailErrorMessage("");
+                  }}
+                />
+                {emailErrorMessage && renderErrorMessage(emailErrorMessage)}
+              </div>
+
+              {step === "code" && (
+                <div>
+                  <Label htmlFor="desktopVerificationCode" className="text-k-900">
+                    인증번호
+                  </Label>
+                  <div className="relative">
+                    <Input
+                      id="desktopVerificationCode"
+                      variant="gray"
+                      placeholder="인증번호 6자리 입력"
+                      inputMode="numeric"
+                      autoComplete="one-time-code"
+                      value={code}
+                      onChange={handleCodeChange}
+                    />
+                    <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-primary typo-medium-4">
+                      {formatTime(remainingSeconds)}
+                    </span>
+                  </div>
+                  {codeErrorMessage && renderErrorMessage(codeErrorMessage)}
+                  <div className="mt-3 flex items-center justify-center gap-2 typo-sb-9">
+                    <span className="text-k-400">인증번호가 오지 않는다면?</span>
+                    <button
+                      type="button"
+                      onClick={sendVerificationEmail}
+                      disabled={postSchoolEmailMutation.isPending}
+                      className="text-k-700 underline disabled:text-k-300"
+                    >
+                      재발송
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-10">
+              {step === "email" ? (
+                <BlockBtn
+                  onClick={sendVerificationEmail}
+                  disabled={!isEmailInputValid || postSchoolEmailMutation.isPending}
+                >
+                  인증번호 보내기
+                </BlockBtn>
+              ) : (
+                <BlockBtn
+                  onClick={confirmVerificationCode}
+                  disabled={!isCodeInputValid || isTimerExpired || postConfirmSchoolEmailMutation.isPending}
+                >
+                  인증하기
+                </BlockBtn>
+              )}
+            </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 space-y-4 text-k-600 typo-medium-3">
+              <p>학교 도메인의 이메일 주소로 인증번호를 받을 수 있어요.</p>
+              <p>인증번호는 5분 동안 유효하며, 만료되면 다시 발송해주세요.</p>
+            </div>
+          </aside>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-[calc(100dvh-3.5rem)] px-5 pt-10">
       <Progress value={progressValue} showPercentage={false} className="mt-4" />
diff --git a/apps/web/src/utils/useIsDesktopViewport.ts b/apps/web/src/utils/useIsDesktopViewport.ts
new file mode 100644
index 000000000..e649f0aea
--- /dev/null
+++ b/apps/web/src/utils/useIsDesktopViewport.ts
@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const DESKTOP_MEDIA_QUERY = "(min-width: 768px)";
+
+const useIsDesktopViewport = (initialValue: boolean | null = null) => {
+  const [isDesktop, setIsDesktop] = useState<boolean | null>(initialValue);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(DESKTOP_MEDIA_QUERY);
+    const updateIsDesktop = () => setIsDesktop(mediaQuery.matches);
+
+    updateIsDesktop();
+    mediaQuery.addEventListener("change", updateIsDesktop);
+
+    return () => mediaQuery.removeEventListener("change", updateIsDesktop);
+  }, []);
+
+  return isDesktop;
+};
+
+export default useIsDesktopViewport;

From f064a3452e67ed471f24c107d4f862313f38854f Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 08:39:52 +0900
Subject: [PATCH 05/20] =?UTF-8?q?feat:=20=EC=BB=A4=EB=AE=A4=EB=8B=88?=
 =?UTF-8?q?=ED=8B=B0=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20=EB=B7=B0=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[boardCode]/CommunityPageContent.tsx      | 145 +++++++++++
 .../app/community/[boardCode]/PostCards.tsx   |  72 +++++-
 .../[boardCode]/[postId]/CommentInput.tsx     |  17 +-
 .../[boardCode]/[postId]/CommentSection.tsx   |  41 ++-
 .../[boardCode]/[postId]/Content.tsx          | 108 +++++---
 .../[boardCode]/[postId]/PostPageContent.tsx  |  45 ++++
 .../[postId]/modify/PostModifyForm.tsx        | 235 +++++++++++------
 .../[boardCode]/[postId]/modify/page.tsx      |  10 +-
 .../community/[boardCode]/create/PostForm.tsx | 242 +++++++++++-------
 9 files changed, 676 insertions(+), 239 deletions(-)

diff --git a/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx b/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx
index 0243763cc..30937720a 100644
--- a/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx
+++ b/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { useGetPostList } from "@/apis/community";
@@ -8,7 +9,9 @@ import ButtonTab from "@/components/ui/ButtonTab";
 import { COMMUNITY_BOARDS, COMMUNITY_CATEGORIES } from "@/constants/community";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import useReportedPostsStore from "@/lib/zustand/useReportedPostsStore";
+import type { ListPost } from "@/types/community";
 import { buildLoginPathWithRedirect } from "@/utils/authRedirect";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import { CommunityPostListSkeleton } from "./CommunityPageSkeleton";
 import CommunityRegionSelector from "./CommunityRegionSelector";
 import PostCards from "./PostCards";
@@ -28,6 +31,7 @@ const CommunityPageContent = ({ boardCode }: CommunityPageContentProps) => {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const isInitialized = useAuthStore((state) => state.isInitialized);
   const refreshStatus = useAuthStore((state) => state.refreshStatus);
+  const isDesktop = useIsDesktopViewport();
 
   const { data: posts = [], isPending } = useGetPostList({
     boardCode,
@@ -78,7 +82,45 @@ const CommunityPageContent = ({ boardCode }: CommunityPageContentProps) => {
     return COMMUNITY_BOARDS.find((board) => board.code === code)?.nameKo ?? "";
   };
   const boardName = getBoardNameKo(boardCode);
+  const viewProps = {
+    boardCode,
+    boardName,
+    category,
+    setCategory,
+    visiblePosts,
+    isPending,
+    handleBoardChange,
+    postWriteHandler,
+  };
+
+  if (isDesktop === null) {
+    return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
+  }
+
+  return isDesktop ? <CommunityDesktopView {...viewProps} /> : <CommunityMobileView {...viewProps} />;
+};
+
+type CommunityViewProps = {
+  boardCode: string;
+  boardName: string;
+  category: string | null;
+  setCategory: React.Dispatch<React.SetStateAction<string | null>>;
+  visiblePosts: ListPost[];
+  isPending: boolean;
+  handleBoardChange: (newBoard: string) => void;
+  postWriteHandler: () => void;
+};
 
+const CommunityMobileView = ({
+  boardCode,
+  boardName,
+  category,
+  setCategory,
+  visiblePosts,
+  isPending,
+  handleBoardChange,
+  postWriteHandler,
+}: CommunityViewProps) => {
   return (
     <div>
       <CommunityRegionSelector
@@ -98,4 +140,107 @@ const CommunityPageContent = ({ boardCode }: CommunityPageContentProps) => {
   );
 };
 
+const CommunityDesktopView = ({
+  boardCode,
+  boardName,
+  category,
+  setCategory,
+  visiblePosts,
+  isPending,
+  handleBoardChange,
+  postWriteHandler,
+}: CommunityViewProps) => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8 flex items-end justify-between gap-6">
+        <div>
+          <p className="text-primary typo-sb-9">Community</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">{boardName || "커뮤니티"} 게시판</h1>
+          <p className="mt-2 text-k-500 typo-medium-2">
+            교환학생 준비와 파견 생활에 필요한 이야기를 주제별로 살펴보세요.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={postWriteHandler}
+          className="rounded-lg bg-primary px-5 py-3 text-white transition-colors typo-sb-9 hover:bg-primary-700"
+        >
+          글쓰기
+        </button>
+      </header>
+
+      <div className="grid items-start gap-8 xl:grid-cols-[280px_minmax(0,1fr)]">
+        <aside className="sticky top-8 space-y-5">
+          <section className="rounded-lg border border-k-100 bg-white p-5">
+            <h2 className="text-k-900 typo-bold-4">게시판</h2>
+            <div className="mt-4 grid gap-2">
+              {COMMUNITY_BOARDS.map((board) => {
+                const isActive = board.code === boardCode;
+
+                return (
+                  <button
+                    key={board.code}
+                    type="button"
+                    onClick={() => handleBoardChange(board.code)}
+                    className={clsx(
+                      "flex items-center justify-between rounded-lg px-4 py-3 text-left transition-colors typo-medium-2",
+                      isActive ? "bg-primary-100 text-primary" : "bg-k-50 text-k-700 hover:bg-k-100",
+                    )}
+                  >
+                    <span>{board.nameKo}</span>
+                    {isActive && <span className="typo-sb-11">선택됨</span>}
+                  </button>
+                );
+              })}
+            </div>
+          </section>
+
+          <section className="rounded-lg border border-k-100 bg-white p-5">
+            <h2 className="text-k-900 typo-bold-4">카테고리</h2>
+            <div className="mt-4 grid gap-2">
+              {COMMUNITY_CATEGORIES.map((item) => {
+                const isActive = item === category;
+
+                return (
+                  <button
+                    key={item}
+                    type="button"
+                    onClick={() => setCategory((prev) => (prev === item ? null : item))}
+                    className={clsx(
+                      "rounded-lg px-4 py-3 text-left transition-colors typo-medium-2",
+                      isActive ? "bg-primary text-white" : "bg-k-50 text-k-600 hover:bg-k-100",
+                    )}
+                  >
+                    {item}
+                  </button>
+                );
+              })}
+            </div>
+          </section>
+        </aside>
+
+        <main className="min-w-0">
+          <section className="mb-4 flex items-center justify-between gap-4">
+            <div>
+              <h2 className="text-k-900 typo-bold-4">게시글</h2>
+              <p className="mt-1 text-k-500 typo-medium-4">
+                총 <span className="text-primary typo-sb-9">{visiblePosts.length}</span>개
+              </p>
+            </div>
+            <span className="rounded-full bg-white px-4 py-2 text-k-500 typo-medium-4">
+              {category ?? "전체 카테고리"}
+            </span>
+          </section>
+
+          {isPending ? (
+            <CommunityPostListSkeleton />
+          ) : (
+            <PostCards posts={visiblePosts} boardCode={boardCode} variant="desktop" />
+          )}
+        </main>
+      </div>
+    </div>
+  );
+};
+
 export default CommunityPageContent;
diff --git a/apps/web/src/app/community/[boardCode]/PostCards.tsx b/apps/web/src/app/community/[boardCode]/PostCards.tsx
index 797613473..1b92fd222 100644
--- a/apps/web/src/app/community/[boardCode]/PostCards.tsx
+++ b/apps/web/src/app/community/[boardCode]/PostCards.tsx
@@ -13,25 +13,44 @@ import { convertISODateToDate } from "@/utils/datetimeUtils";
 type PostCardsProps = {
   posts: ListPost[];
   boardCode: string;
+  variant?: "mobile" | "desktop";
 };
 
-const PostCards = ({ posts, boardCode }: PostCardsProps) => {
+const PostCards = ({ posts, boardCode, variant = "mobile" }: PostCardsProps) => {
   const parentRef = useRef<HTMLDivElement>(null);
+  const isDesktop = variant === "desktop";
 
-  // 가상화 설정
   const virtualizer = useVirtualizer({
     count: posts.length,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => 140, // 각 PostCard의 예상 높이 (px)
-    overscan: 5, // 화면 밖에 미리 렌더링할 항목 수
+    estimateSize: () => (isDesktop ? 156 : 140),
+    overscan: 5,
   });
 
+  if (posts.length === 0) {
+    return (
+      <div
+        className={
+          isDesktop
+            ? "flex min-h-[420px] items-center justify-center rounded-lg border border-dashed border-k-100 bg-white text-k-400 typo-regular-2"
+            : "flex min-h-[320px] items-center justify-center text-k-400 typo-regular-2"
+        }
+      >
+        게시글이 없습니다.
+      </div>
+    );
+  }
+
   return (
     <div
       ref={parentRef}
-      className="flex flex-col overflow-auto"
+      className={
+        isDesktop
+          ? "flex flex-col overflow-auto rounded-lg border border-k-100 bg-white"
+          : "flex flex-col overflow-auto"
+      }
       style={{
-        height: "calc(100vh - 220px)", // 헤더, 탭 등을 제외한 높이
+        height: isDesktop ? "calc(100vh - 240px)" : "calc(100vh - 220px)",
         contain: "strict",
       }}
     >
@@ -58,7 +77,7 @@ const PostCards = ({ posts, boardCode }: PostCardsProps) => {
               data-index={virtualItem.index}
             >
               <Link href={`/community/${boardCode}/${post.id}`} className="no-underline">
-                <PostCard post={post} priorityImage={virtualItem.index === 0} />
+                <PostCard post={post} priorityImage={virtualItem.index === 0} variant={variant} />
               </Link>
             </div>
           );
@@ -100,18 +119,45 @@ const getPostThumbnailSrc = (postThumbnailUrl: string | null) => {
   return thumbnailSrc;
 };
 
-export const PostCard = ({ post, priorityImage = false }: { post: ListPost; priorityImage?: boolean }) => {
+export const PostCard = ({
+  post,
+  priorityImage = false,
+  variant = "mobile",
+}: {
+  post: ListPost;
+  priorityImage?: boolean;
+  variant?: "mobile" | "desktop";
+}) => {
   const thumbnailSrc = getPostThumbnailSrc(post.postThumbnailUrl);
+  const isDesktop = variant === "desktop";
 
   return (
-    <div className="flex justify-between border-b border-b-gray-c-100 px-5 py-4">
+    <div
+      className={
+        isDesktop
+          ? "flex h-full justify-between border-b border-b-gray-c-100 px-6 py-5 transition-colors hover:bg-k-50"
+          : "flex justify-between border-b border-b-gray-c-100 px-5 py-4"
+      }
+    >
       <div className="flex min-w-0 flex-1 flex-col">
         <div className="flex items-center truncate font-serif text-gray-250">
           <span className="typo-bold-5">{post.postCategory || ""}</span>
           <span className="ml-2.5 typo-regular-4">{convertISODateToDate(post.createdAt) || "1970. 1. 1."}</span>
         </div>
-        <span className="mt-2 font-serif text-black typo-sb-7">{post.title || ""}</span>
-        <div className="mt-1 h-11 overflow-hidden text-ellipsis break-all font-serif text-gray-250 typo-medium-2">
+        <span
+          className={
+            isDesktop ? "mt-2 truncate font-serif text-black typo-sb-4" : "mt-2 font-serif text-black typo-sb-7"
+          }
+        >
+          {post.title || ""}
+        </span>
+        <div
+          className={
+            isDesktop
+              ? "mt-2 line-clamp-2 min-h-11 break-all font-serif text-gray-250 typo-medium-2"
+              : "mt-1 h-11 overflow-hidden text-ellipsis break-all font-serif text-gray-250 typo-medium-2"
+          }
+        >
           {post.content || "내용 없음"}
         </div>
         <div className="mt-1 flex items-center gap-2.5">
@@ -127,13 +173,13 @@ export const PostCard = ({ post, priorityImage = false }: { post: ListPost; prio
       </div>
 
       {thumbnailSrc ? (
-        <div className="ml-4 mt-3 h-20 w-20 shrink-0 select-none">
+        <div className={isDesktop ? "ml-6 h-24 w-24 shrink-0 select-none" : "ml-4 mt-3 h-20 w-20 shrink-0 select-none"}>
           <div className="bg-gray-c-50 relative h-full w-full overflow-hidden rounded border border-k-100">
             <Image
               className="object-cover"
               src={thumbnailSrc}
               fill
-              sizes="80px"
+              sizes={isDesktop ? "96px" : "80px"}
               alt="게시글 사진"
               fallbackSrc="/images/article-thumb.png"
               loading={priorityImage ? "eager" : undefined}
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx b/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
index a7c6f4705..a70cf83c1 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
@@ -10,9 +10,16 @@ type CommentInputProps = {
   curSelectedComment: number | null;
   setCurSelectedComment: React.Dispatch<React.SetStateAction<number | null>>;
   refresh: () => void;
+  variant?: "mobile" | "desktop";
 };
 
-const CommentInput = ({ postId, curSelectedComment, setCurSelectedComment, refresh }: CommentInputProps) => {
+const CommentInput = ({
+  postId,
+  curSelectedComment,
+  setCurSelectedComment,
+  refresh,
+  variant = "mobile",
+}: CommentInputProps) => {
   const [content, setContent] = useState<string>("");
 
   const createCommentMutation = useCreateComment();
@@ -38,7 +45,13 @@ const CommentInput = ({ postId, curSelectedComment, setCurSelectedComment, refre
   };
 
   return (
-    <div className="fixed bottom-14 flex w-full min-w-app max-w-app items-center gap-3 border-t border-bg-400 bg-k-0 p-2 md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:min-w-0 md:max-w-none">
+    <div
+      className={
+        variant === "desktop"
+          ? "flex w-full items-center gap-3 border-t border-bg-400 bg-k-0 p-4"
+          : "fixed bottom-14 flex w-full min-w-app max-w-app items-center gap-3 border-t border-bg-400 bg-k-0 p-2 md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:min-w-0 md:max-w-none"
+      }
+    >
       <div className="w-full">
         {curSelectedComment && (
           <div className="flex h-10 w-full items-center justify-between rounded-t-lg bg-bg-500 px-2.5 pb-2.5 pt-3">
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
index d14d36058..0c74abbac 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
@@ -18,9 +18,10 @@ type CommentSectionProps = {
   comments: CommentType[];
   postId: number;
   refresh: () => void;
+  variant?: "mobile" | "desktop";
 };
 
-const CommentSection = ({ comments, postId, refresh }: CommentSectionProps) => {
+const CommentSection = ({ comments, postId, refresh, variant = "mobile" }: CommentSectionProps) => {
   const [curSelectedComment, setCurSelectedComment] = useState<number | null>(null);
   const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
   const blockedUserIds = useReportedPostsStore((state) => state.blockedUserIds);
@@ -42,9 +43,12 @@ const CommentSection = ({ comments, postId, refresh }: CommentSectionProps) => {
     deleteCommentMutation.mutate({ commentId, postId });
   };
 
-  return (
-    <div className="min-h-[50vh] pb-[49px]">
-      {visibleComments?.map((comment) => (
+  const commentList = (
+    <>
+      {visibleComments.length === 0 && (
+        <div className="flex min-h-40 items-center justify-center text-k-400 typo-regular-2">아직 댓글이 없습니다.</div>
+      )}
+      {visibleComments.map((comment) => (
         <Comment
           key={comment.id}
           comment={comment}
@@ -52,8 +56,34 @@ const CommentSection = ({ comments, postId, refresh }: CommentSectionProps) => {
           deleteComment={deleteComment}
           activeDropdown={activeDropdown}
           setActiveDropdown={setActiveDropdown}
+          variant={variant}
         />
       ))}
+    </>
+  );
+
+  if (variant === "desktop") {
+    return (
+      <aside className="flex max-h-[calc(100vh-132px)] min-h-[520px] flex-col rounded-lg border border-k-100 bg-white">
+        <div className="flex items-center justify-between border-b border-k-100 px-5 py-4">
+          <h2 className="text-k-900 typo-bold-4">댓글</h2>
+          <span className="text-primary typo-sb-9">{visibleComments.length}</span>
+        </div>
+        <div className="min-h-0 flex-1 overflow-auto">{commentList}</div>
+        <CommentInput
+          postId={postId}
+          curSelectedComment={curSelectedComment}
+          setCurSelectedComment={setCurSelectedComment}
+          refresh={refresh}
+          variant="desktop"
+        />
+      </aside>
+    );
+  }
+
+  return (
+    <div className="min-h-[50vh] pb-[49px]">
+      {commentList}
       <CommentInput
         postId={postId}
         curSelectedComment={curSelectedComment}
@@ -72,6 +102,7 @@ type CommentProps = {
   deleteComment: (commentId: number) => void;
   activeDropdown: number | null;
   setActiveDropdown: (commentId: number | null) => void;
+  variant?: "mobile" | "desktop";
 };
 
 const Comment = ({
@@ -80,6 +111,7 @@ const Comment = ({
   deleteComment,
   activeDropdown,
   setActiveDropdown,
+  variant = "mobile",
 }: CommentProps) => {
   const toggleDropdown = (commentId: number) => {
     setActiveDropdown(activeDropdown === commentId ? null : commentId);
@@ -91,6 +123,7 @@ const Comment = ({
     <div
       className={clsx(
         "flex border-b border-gray-c-100 px-5 py-[18px]",
+        variant === "desktop" && "transition-colors hover:bg-k-50",
         comment.parentId !== null ? "bg-line-1" : "bg-magic-comment-reply-bg",
       )}
       key={comment.id}
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx b/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
index cc5841457..2dd4e9d93 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
@@ -19,9 +19,10 @@ export const metadata: Metadata = {
 type ContentProps = {
   post: PostType;
   postId: number;
+  variant?: "mobile" | "desktop";
 };
 
-const Content = ({ post, postId }: ContentProps) => {
+const Content = ({ post, postId, variant = "mobile" }: ContentProps) => {
   const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
   const [likeCount, setLikeCount] = useState<number>(0);
   const [isLiked, setIsLiked] = useState<boolean>(false);
@@ -79,19 +80,31 @@ const Content = ({ post, postId }: ContentProps) => {
     }
   };
 
-  return (
+  const postBody = (
     <>
-      <div className="pb-3 pl-5 pt-6">
+      <div className={variant === "desktop" ? "p-6" : "pb-3 pl-5 pt-6"}>
         <div className="inline-flex rounded-full bg-primary px-3 py-[5px] font-serif text-white typo-medium-2">
           {post.postCategory || "카테고리"}
         </div>
-        <div className="mt-4 font-serif text-black typo-sb-4">{post.title || ""}</div>
-        <div className="mr-5 mt-3 whitespace-pre-wrap break-all font-serif text-gray-850 typo-regular-2">
+        <div
+          className={
+            variant === "desktop" ? "mt-5 font-serif text-black typo-bold-3" : "mt-4 font-serif text-black typo-sb-4"
+          }
+        >
+          {post.title || ""}
+        </div>
+        <div
+          className={
+            variant === "desktop"
+              ? "mt-5 whitespace-pre-wrap break-all font-serif text-gray-850 typo-regular-2"
+              : "mr-5 mt-3 whitespace-pre-wrap break-all font-serif text-gray-850 typo-regular-2"
+          }
+        >
           <LinkifyText>{post.content || ""}</LinkifyText>
         </div>
 
-        <div className="mt-3">
-          <PostImage images={postImages} onImageClick={handleImageClick} />
+        <div className="mt-5">
+          <PostImage images={postImages} onImageClick={handleImageClick} variant={variant} />
         </div>
         {selectedImageIndex !== null && postImages[selectedImageIndex] && (
           <ImagePopup
@@ -112,43 +125,71 @@ const Content = ({ post, postId }: ContentProps) => {
           </div>
         </div>
       </div>
+    </>
+  );
 
-      <div className="flex h-16 items-center justify-between border-y border-gray-c-100 px-5 py-3">
-        <div className="flex gap-2.5">
-          <div className="h-10 w-10 rounded-full bg-bg-600">
-            <Image
-              className="h-full w-full rounded-full object-cover"
-              src={
-                post.postFindSiteUserResponse.profileImageUrl
-                  ? normalizeImageUrlToUploadCdn(post.postFindSiteUserResponse.profileImageUrl)
-                  : DEFAULT_PROFILE_IMAGE
-              }
-              width={40}
-              height={40}
-              alt=""
-            />
+  const author = (
+    <div className="flex h-16 items-center justify-between border-y border-gray-c-100 px-5 py-3">
+      <div className="flex gap-2.5">
+        <div className="h-10 w-10 rounded-full bg-bg-600">
+          <Image
+            className="h-full w-full rounded-full object-cover"
+            src={
+              post.postFindSiteUserResponse.profileImageUrl
+                ? normalizeImageUrlToUploadCdn(post.postFindSiteUserResponse.profileImageUrl)
+                : DEFAULT_PROFILE_IMAGE
+            }
+            width={40}
+            height={40}
+            alt=""
+          />
+        </div>
+        <div className="flex flex-col">
+          <div className="overflow-hidden text-ellipsis font-serif text-black typo-medium-2">
+            {post.postFindSiteUserResponse.nickname || ""}
           </div>
-          <div className="flex flex-col">
-            <div className="overflow-hidden text-ellipsis font-serif text-black typo-medium-2">
-              {post.postFindSiteUserResponse.nickname || ""}
-            </div>
-            <div className="overflow-hidden font-serif text-gray-250 typo-regular-4">
-              {convertISODateToDateTime(post.createdAt) || ""}
-            </div>
+          <div className="overflow-hidden font-serif text-gray-250 typo-regular-4">
+            {convertISODateToDateTime(post.createdAt) || ""}
           </div>
         </div>
       </div>
+    </div>
+  );
+
+  if (variant === "desktop") {
+    return (
+      <article className="rounded-lg border border-k-100 bg-white">
+        {postBody}
+        {author}
+      </article>
+    );
+  }
+
+  return (
+    <>
+      {postBody}
+      {author}
     </>
   );
 };
 
 export default Content;
 
-const PostImage = ({ images, onImageClick }: { images: PostImageType[]; onImageClick: (index: number) => void }) => {
+const PostImage = ({
+  images,
+  onImageClick,
+  variant = "mobile",
+}: {
+  images: PostImageType[];
+  onImageClick: (index: number) => void;
+  variant?: "mobile" | "desktop";
+}) => {
   if (images.length === 1) {
     return (
-      <div className="mb-3 pr-5">
-        <div className="relative pt-[75%]">
+      <div className={variant === "desktop" ? "mb-3" : "mb-3 pr-5"}>
+        <div
+          className={variant === "desktop" ? "relative aspect-[16/10] overflow-hidden rounded-lg" : "relative pt-[75%]"}
+        >
           <Image
             src={normalizeImageUrlToUploadCdn(images[0].url)}
             layout="fill"
@@ -167,10 +208,11 @@ const PostImage = ({ images, onImageClick }: { images: PostImageType[]; onImageC
           <Image
             key={image.id}
             src={normalizeImageUrlToUploadCdn(image.url)}
-            width={197}
-            height={197}
+            width={variant === "desktop" ? 180 : 197}
+            height={variant === "desktop" ? 180 : 197}
             alt="image"
             onClick={() => onImageClick(index)}
+            className={variant === "desktop" ? "rounded-lg object-cover" : undefined}
           />
         ))}
       </div>
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx b/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx
index 7cc7b84bf..2d4c410bf 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx
@@ -6,6 +6,7 @@ import { useGetPostDetail } from "@/apis/community";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import useReportedPostsStore from "@/lib/zustand/useReportedPostsStore";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import CommentSection from "./CommentSection";
 import Content from "./Content";
 import KebabMenu from "./KebabMenu";
@@ -21,6 +22,7 @@ const PostPageContent = ({ boardCode, postId }: PostPageContentProps) => {
   const blockedUserIds = useReportedPostsStore((state) => state.blockedUserIds);
   const blockedPostIds = useReportedPostsStore((state) => state.blockedPostIds);
   const isHiddenPost = reportedPostIds.includes(postId) || blockedPostIds.includes(postId);
+  const isDesktop = useIsDesktopViewport();
 
   const { data: post, isLoading, isError, refetch } = useGetPostDetail(postId);
   const isBlockedUserPost = post ? blockedUserIds.includes(post.postFindSiteUserResponse.id) : false;
@@ -57,6 +59,49 @@ const PostPageContent = ({ boardCode, postId }: PostPageContentProps) => {
     return null;
   }
 
+  if (isDesktop === null) {
+    return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
+  }
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8 flex items-end justify-between gap-6">
+          <div>
+            <p className="text-primary typo-sb-9">Community</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">게시글</h1>
+            <p className="mt-2 text-k-500 typo-medium-2">본문과 댓글을 한 화면에서 확인하고 이어서 대화하세요.</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => router.push(`/community/${boardCode}`)}
+              className="rounded-lg border border-k-100 bg-white px-4 py-3 text-k-700 transition-colors typo-sb-9 hover:border-primary hover:text-primary"
+            >
+              목록으로
+            </button>
+            <KebabMenu
+              isOwner={post.isOwner}
+              postId={postId}
+              boardCode={boardCode}
+              authorId={post.isOwner ? undefined : post.postFindSiteUserResponse.id}
+            />
+          </div>
+        </header>
+
+        <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,760px)_minmax(320px,420px)]">
+          <Content post={post} postId={postId} variant="desktop" />
+          <CommentSection
+            comments={post.postFindCommentResponses}
+            postId={postId}
+            refresh={refetch}
+            variant="desktop"
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div>
       <TopDetailNavigation
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx b/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
index 0f826da14..5500c267b 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { useUpdatePost } from "@/apis/community";
@@ -7,6 +8,7 @@ import PostCategorySelector from "@/app/community/_components/PostCategorySelect
 import useCommunityImageUpload from "@/app/community/_hooks/useCommunityImageUpload";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import { IconArrowBackFilled, IconImage } from "@/public/svgs";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
 type PostModifyFormProps = {
   boardCode: string;
@@ -30,6 +32,7 @@ const PostModifyForm = ({
   const [postCategory, setPostCategory] = useState<string>(
     defaultPostCategory || (defaultIsQuestion ? "질문" : "자유"),
   );
+  const isDesktop = useIsDesktopViewport();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const titleRef = useRef<HTMLDivElement>(null);
   const {
@@ -121,105 +124,167 @@ const PostModifyForm = ({
   const noticeContent =
     "인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
 
-  return (
-    <>
-      <CustomTopDetailNavigation routeBack={routeBack} submitPost={submitPost} />
+  if (isDesktop === null) {
+    return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
+  }
+
+  const editor = (
+    <div
+      className={clsx("relative", isDesktop && "overflow-hidden rounded-lg border border-k-100 bg-white")}
+      onDragEnter={handleImageDragEnter}
+      onDragOver={handleImageDragOver}
+      onDragLeave={handleImageDragLeave}
+      onDrop={handleImageDrop}
+    >
+      {isDraggingImage ? (
+        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 px-5 text-center text-white typo-sb-9">
+          이미지를 놓아 업로드하세요
+        </div>
+      ) : null}
       <div
-        className="relative"
-        onDragEnter={handleImageDragEnter}
-        onDragOver={handleImageDragOver}
-        onDragLeave={handleImageDragLeave}
-        onDrop={handleImageDrop}
+        className="relative border-b border-b-gray-c-100 transition-height duration-200 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-c-100"
+        ref={titleRef}
       >
-        {isDraggingImage ? (
-          <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 px-5 text-center text-white typo-sb-9">
-            이미지를 놓아 업로드하세요
-          </div>
-        ) : null}
-        <div
-          className="relative border-b border-b-gray-c-100 transition-height duration-200 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-c-100"
-          ref={titleRef}
-        >
-          <textarea
-            className="placeholder:text-gray-250/87 w-full resize-none overflow-hidden px-5 pb-2.5 pt-5 text-black outline-none transition-height duration-200 typo-sb-4"
-            placeholder="제목을 입력하세요"
-            maxLength={40}
-            rows={1}
-            ref={textareaRef}
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-              }
+        <textarea
+          className={clsx(
+            "placeholder:text-gray-250/87 w-full resize-none overflow-hidden text-black outline-none transition-height duration-200 typo-sb-4",
+            isDesktop ? "px-6 pb-3 pt-6" : "px-5 pb-2.5 pt-5",
+          )}
+          placeholder="제목을 입력하세요"
+          maxLength={40}
+          rows={1}
+          ref={textareaRef}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+            }
+          }}
+        />
+      </div>
+      <div
+        className={clsx(
+          "flex h-[42px] items-center justify-between gap-3 border-b border-b-gray-c-100 py-2.5",
+          isDesktop ? "px-6" : "px-5",
+        )}
+      >
+        <PostCategorySelector value={postCategory} onChange={setPostCategory} />
+        <div>
+          <button
+            type="button"
+            onClick={() => {
+              openImagePicker();
             }}
+            aria-label="이미지 추가"
+          >
+            <IconImage />
+          </button>
+          <input
+            className="hidden"
+            ref={imageUploadRef}
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={handleImageChange}
           />
         </div>
-        <div className="flex h-[42px] items-center justify-between gap-3 border-b border-b-gray-c-100 px-5 py-2.5">
-          <PostCategorySelector value={postCategory} onChange={setPostCategory} />
+      </div>
+      <div>
+        <textarea
+          className={clsx(
+            "placeholder:text-gray-250/87 mt-4 box-border w-full resize-none border-0 text-black outline-none typo-regular-1",
+            isDesktop ? "h-[360px] px-6" : "h-90 px-5",
+          )}
+          placeholder="내용을 입력하세요"
+          value={content}
+          maxLength={255}
+          onChange={(e) => setContent(e.target.value)}
+        />
+      </div>
+      {imagePreviewUrls.length > 0 ? (
+        <div className={clsx("pb-2", isDesktop ? "px-6" : "px-5")}>
+          <p className="mb-2 text-gray-250/87 typo-regular-4">
+            첨부 이미지 ({selectedImages.length}/{maxImages})
+          </p>
+          <div className="flex gap-2 overflow-x-auto pb-1">
+            {imagePreviewUrls.map((imagePreviewUrl, index) => (
+              <div
+                key={`${selectedImages[index]?.name ?? "image"}-${selectedImages[index]?.lastModified ?? index}`}
+                className="relative h-24 w-24 shrink-0 overflow-hidden rounded-md border border-gray-c-100"
+              >
+                <img
+                  src={imagePreviewUrl}
+                  alt={`업로드 이미지 미리보기 ${index + 1}`}
+                  className="h-full w-full object-cover"
+                />
+                <button
+                  type="button"
+                  className="absolute right-1 top-1 rounded bg-black/60 px-1 py-0.5 text-xs text-white"
+                  onClick={() => removeSelectedImage(index)}
+                  aria-label={`이미지 ${index + 1} 제거`}
+                >
+                  삭제
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+      {!isDesktop && (
+        <div className="px-5 pt-2.5">
+          <p className="text-gray-250/87 typo-sb-9">{noticeTitle}</p>
+          <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{noticeContent}</p>
+        </div>
+      )}
+    </div>
+  );
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8 flex items-end justify-between gap-6">
           <div>
+            <p className="text-primary typo-sb-9">Community</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">글 수정</h1>
+            <p className="mt-2 text-k-500 typo-medium-2">게시글 내용을 수정하고 이미지를 추가로 첨부하세요.</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={routeBack}
+              className="rounded-lg border border-k-100 bg-white px-4 py-3 text-k-700 transition-colors typo-sb-9 hover:border-primary hover:text-primary"
+            >
+              취소
+            </button>
             <button
+              className="rounded-lg bg-primary px-5 py-3 text-white transition-colors typo-sb-9 hover:bg-primary-700"
+              onClick={submitPost}
               type="button"
-              onClick={() => {
-                openImagePicker();
-              }}
-              aria-label="이미지 추가"
             >
-              <IconImage />
+              등록
             </button>
-            <input
-              className="hidden"
-              ref={imageUploadRef}
-              type="file"
-              accept="image/*"
-              multiple
-              onChange={handleImageChange}
-            />
           </div>
-        </div>
-        <div>
-          <textarea
-            className="placeholder:text-gray-250/87 mt-4 box-border h-90 w-full resize-none border-0 px-5 text-black outline-none typo-regular-1"
-            placeholder="내용을 입력하세요"
-            value={content}
-            maxLength={255}
-            onChange={(e) => setContent(e.target.value)}
-          />
-        </div>
-        {imagePreviewUrls.length > 0 ? (
-          <div className="px-5 pb-2">
-            <p className="mb-2 text-gray-250/87 typo-regular-4">
-              첨부 이미지 ({selectedImages.length}/{maxImages})
-            </p>
-            <div className="flex gap-2 overflow-x-auto pb-1">
-              {imagePreviewUrls.map((imagePreviewUrl, index) => (
-                <div
-                  key={`${selectedImages[index]?.name ?? "image"}-${selectedImages[index]?.lastModified ?? index}`}
-                  className="relative h-24 w-24 shrink-0 overflow-hidden rounded-md border border-gray-c-100"
-                >
-                  <img
-                    src={imagePreviewUrl}
-                    alt={`업로드 이미지 미리보기 ${index + 1}`}
-                    className="h-full w-full object-cover"
-                  />
-                  <button
-                    type="button"
-                    className="absolute right-1 top-1 rounded bg-black/60 px-1 py-0.5 text-xs text-white"
-                    onClick={() => removeSelectedImage(index)}
-                    aria-label={`이미지 ${index + 1} 제거`}
-                  >
-                    삭제
-                  </button>
-                </div>
-              ))}
+        </header>
+
+        <div className="grid items-start gap-8 xl:grid-cols-[minmax(520px,760px)_minmax(280px,360px)]">
+          {editor}
+          <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
+            <h2 className="text-k-900 typo-bold-4">{noticeTitle}</h2>
+            <p className="mt-5 whitespace-pre-line text-k-600 typo-medium-3">{noticeContent}</p>
+            <div className="mt-6 rounded-lg bg-k-50 p-4 text-k-500 typo-regular-2">
+              새 첨부 이미지 {selectedImages.length}/{maxImages}
             </div>
-          </div>
-        ) : null}
-        <div className="px-5 pt-2.5">
-          <p className="text-gray-250/87 typo-sb-9">{noticeTitle}</p>
-          <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{noticeContent}</p>
+          </aside>
         </div>
       </div>
+    );
+  }
+
+  return (
+    <>
+      <CustomTopDetailNavigation routeBack={routeBack} submitPost={submitPost} />
+      {editor}
     </>
   );
 };
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/modify/page.tsx b/apps/web/src/app/community/[boardCode]/[postId]/modify/page.tsx
index 386875a16..6e46b1a22 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/modify/page.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/modify/page.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 
-import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import { NO_INDEX_ROBOTS } from "@/utils/seo";
 
 import PostModifyContent from "./PostModifyContent";
@@ -21,12 +20,9 @@ const PostModifyPage = async ({ params }: PostModifyPageProps) => {
   const { boardCode, postId } = await params;
 
   return (
-    <>
-      <TopDetailNavigation title="글 수정" />
-      <div className="w-full px-5">
-        <PostModifyContent boardCode={boardCode} postId={Number(postId)} />
-      </div>
-    </>
+    <div className="w-full px-5 md:px-0">
+      <PostModifyContent boardCode={boardCode} postId={Number(postId)} />
+    </div>
   );
 };
 
diff --git a/apps/web/src/app/community/[boardCode]/create/PostForm.tsx b/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
index 537524df4..9d4713740 100644
--- a/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
+++ b/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { useCreatePost } from "@/apis/community";
@@ -11,6 +12,7 @@ import { showIconToast } from "@/lib/toast/showIconToast";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { IconImage } from "@/public/svgs";
 import { buildLoginPathWithRedirect } from "@/utils/authRedirect";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
 type PostFormProps = {
   boardCode: string;
@@ -26,6 +28,7 @@ const PostForm = ({ boardCode }: PostFormProps) => {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const isInitialized = useAuthStore((state) => state.isInitialized);
   const refreshStatus = useAuthStore((state) => state.refreshStatus);
+  const isDesktop = useIsDesktopViewport();
   const {
     maxImages,
     imageUploadRef,
@@ -77,7 +80,7 @@ const PostForm = ({ boardCode }: PostFormProps) => {
     return () => {};
   }, []);
 
-  if (!isInitialized || refreshStatus === "refreshing" || !isAuthenticated || !accessToken) {
+  if (!isInitialized || refreshStatus === "refreshing" || !isAuthenticated || !accessToken || isDesktop === null) {
     return <CloudSpinnerPage />;
   }
 
@@ -123,6 +126,148 @@ const PostForm = ({ boardCode }: PostFormProps) => {
   const noticeContent =
     "인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
 
+  const editor = (
+    <div
+      className={clsx("relative", isDesktop && "overflow-hidden rounded-lg border border-k-100 bg-white")}
+      onDragEnter={handleImageDragEnter}
+      onDragOver={handleImageDragOver}
+      onDragLeave={handleImageDragLeave}
+      onDrop={handleImageDrop}
+    >
+      {isDraggingImage ? (
+        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 px-5 text-center text-white typo-sb-9">
+          이미지를 놓아 업로드하세요
+        </div>
+      ) : null}
+      <div
+        className="relative border-b border-b-gray-c-100 transition-height duration-200 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-c-100"
+        ref={titleRef}
+      >
+        <textarea
+          className={clsx(
+            "placeholder:text-gray-250/87 w-full resize-none overflow-hidden text-black outline-none transition-height duration-200 typo-sb-4",
+            isDesktop ? "px-6 pb-3 pt-6" : "px-5 pb-2.5 pt-5",
+          )}
+          placeholder="제목을 입력하세요"
+          maxLength={40}
+          rows={1}
+          ref={textareaRef}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+            }
+          }}
+        />
+      </div>
+      <div
+        className={clsx(
+          "flex h-[42px] items-center justify-between gap-3 border-b border-b-gray-c-100 py-2.5",
+          isDesktop ? "px-6" : "px-5",
+        )}
+      >
+        <PostCategorySelector value={postCategory} onChange={setPostCategory} />
+        <div>
+          <button
+            onClick={() => {
+              openImagePicker();
+            }}
+            type="button"
+            aria-label="이미지 추가"
+          >
+            <IconImage />
+          </button>
+          <input
+            className="hidden"
+            ref={imageUploadRef}
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={handleImageChange}
+          />
+        </div>
+      </div>
+      <div>
+        <textarea
+          className={clsx(
+            "placeholder:text-gray-250/87 mt-4 box-border w-full resize-none border-0 text-black outline-none typo-regular-1",
+            isDesktop ? "h-[360px] px-6" : "h-90 px-5",
+          )}
+          placeholder="내용을 입력하세요"
+          value={content}
+          maxLength={255}
+          onChange={(e) => setContent(e.target.value)}
+        />
+      </div>
+      {imagePreviewUrls.length > 0 ? (
+        <div className={clsx("pb-2", isDesktop ? "px-6" : "px-5")}>
+          <p className="mb-2 text-gray-250/87 typo-regular-4">
+            첨부 이미지 ({selectedImages.length}/{maxImages})
+          </p>
+          <div className="flex gap-2 overflow-x-auto pb-1">
+            {imagePreviewUrls.map((imagePreviewUrl, index) => (
+              <div
+                key={`${selectedImages[index]?.name ?? "image"}-${selectedImages[index]?.lastModified ?? index}`}
+                className="relative h-24 w-24 shrink-0 overflow-hidden rounded-md border border-gray-c-100"
+              >
+                <img
+                  src={imagePreviewUrl}
+                  alt={`업로드 이미지 미리보기 ${index + 1}`}
+                  className="h-full w-full object-cover"
+                />
+                <button
+                  type="button"
+                  className="absolute right-1 top-1 rounded bg-black/60 px-1 py-0.5 text-xs text-white"
+                  onClick={() => removeSelectedImage(index)}
+                  aria-label={`이미지 ${index + 1} 제거`}
+                >
+                  삭제
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+      {!isDesktop && (
+        <div className="px-5 pt-2.5">
+          <p className="text-gray-250/87 typo-sb-9">{noticeTitle}</p>
+          <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{noticeContent}</p>
+        </div>
+      )}
+    </div>
+  );
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8 flex items-end justify-between gap-6">
+          <div>
+            <p className="text-primary typo-sb-9">Community</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">글쓰기</h1>
+            <p className="mt-2 text-k-500 typo-medium-2">게시판에 공유할 이야기와 이미지를 작성하세요.</p>
+          </div>
+          <button
+            className="rounded-lg bg-primary px-5 py-3 text-white transition-colors typo-sb-9 hover:bg-primary-700"
+            onClick={submitPost}
+            type="button"
+          >
+            등록
+          </button>
+        </header>
+
+        <div className="grid items-start gap-8 xl:grid-cols-[minmax(520px,760px)_minmax(280px,360px)]">
+          {editor}
+          <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
+            <h2 className="text-k-900 typo-bold-4">{noticeTitle}</h2>
+            <p className="mt-5 whitespace-pre-line text-k-600 typo-medium-3">{noticeContent}</p>
+            <div className="mt-6 rounded-lg bg-k-50 p-4 text-k-500 typo-regular-2">
+              첨부 이미지 {selectedImages.length}/{maxImages}
+            </div>
+          </aside>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <TopDetailNavigation
@@ -137,100 +282,7 @@ const PostForm = ({ boardCode }: PostFormProps) => {
           </button>
         }
       />
-      <div
-        className="relative"
-        onDragEnter={handleImageDragEnter}
-        onDragOver={handleImageDragOver}
-        onDragLeave={handleImageDragLeave}
-        onDrop={handleImageDrop}
-      >
-        {isDraggingImage ? (
-          <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 px-5 text-center text-white typo-sb-9">
-            이미지를 놓아 업로드하세요
-          </div>
-        ) : null}
-        <div
-          className="relative border-b border-b-gray-c-100 transition-height duration-200 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-c-100"
-          ref={titleRef}
-        >
-          <textarea
-            className="placeholder:text-gray-250/87 w-full resize-none overflow-hidden px-5 pb-2.5 pt-5 text-black outline-none transition-height duration-200 typo-sb-4"
-            placeholder="제목을 입력하세요"
-            maxLength={40}
-            rows={1}
-            ref={textareaRef}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-              }
-            }}
-          />
-        </div>
-        <div className="flex h-[42px] items-center justify-between gap-3 border-b border-b-gray-c-100 px-5 py-2.5">
-          <PostCategorySelector value={postCategory} onChange={setPostCategory} />
-          <div>
-            <button
-              onClick={() => {
-                openImagePicker();
-              }}
-              type="button"
-              aria-label="이미지 추가"
-            >
-              <IconImage />
-            </button>
-            <input
-              className="hidden"
-              ref={imageUploadRef}
-              type="file"
-              accept="image/*"
-              multiple
-              onChange={handleImageChange}
-            />
-          </div>
-        </div>
-        <div>
-          <textarea
-            className="placeholder:text-gray-250/87 mt-4 box-border h-90 w-full resize-none border-0 px-5 text-black outline-none typo-regular-1"
-            placeholder="내용을 입력하세요"
-            value={content}
-            maxLength={255}
-            onChange={(e) => setContent(e.target.value)}
-          />
-        </div>
-        {imagePreviewUrls.length > 0 ? (
-          <div className="px-5 pb-2">
-            <p className="mb-2 text-gray-250/87 typo-regular-4">
-              첨부 이미지 ({selectedImages.length}/{maxImages})
-            </p>
-            <div className="flex gap-2 overflow-x-auto pb-1">
-              {imagePreviewUrls.map((imagePreviewUrl, index) => (
-                <div
-                  key={`${selectedImages[index]?.name ?? "image"}-${selectedImages[index]?.lastModified ?? index}`}
-                  className="relative h-24 w-24 shrink-0 overflow-hidden rounded-md border border-gray-c-100"
-                >
-                  <img
-                    src={imagePreviewUrl}
-                    alt={`업로드 이미지 미리보기 ${index + 1}`}
-                    className="h-full w-full object-cover"
-                  />
-                  <button
-                    type="button"
-                    className="absolute right-1 top-1 rounded bg-black/60 px-1 py-0.5 text-xs text-white"
-                    onClick={() => removeSelectedImage(index)}
-                    aria-label={`이미지 ${index + 1} 제거`}
-                  >
-                    삭제
-                  </button>
-                </div>
-              ))}
-            </div>
-          </div>
-        ) : null}
-        <div className="px-5 pt-2.5">
-          <p className="text-gray-250/87 typo-sb-9">{noticeTitle}</p>
-          <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{noticeContent}</p>
-        </div>
-      </div>
+      {editor}
     </>
   );
 };

From eba6e6177da703428cb1cf461e04e2cdd9fe6744 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 08:54:03 +0900
Subject: [PATCH 06/20] =?UTF-8?q?feat:=20=EB=A9=98=ED=86=A0=20=EB=8D=B0?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=ED=86=B1=20=EB=B7=B0=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/_ui/MentorDetialContent/index.tsx    | 157 ++++++++++----
 apps/web/src/app/mentor/[id]/page.tsx         |   2 +-
 .../_ui/MentorClient/_ui/MenteePage/index.tsx |  23 +-
 .../MentorClient/_ui/MenteePageTabs/index.tsx |  88 ++++----
 .../_ui/MentorFindSection/index.tsx           |  23 +-
 .../_ui/MentorClient/_ui/MentorPage/index.tsx |  46 ++--
 .../src/app/mentor/_ui/MentorClient/index.tsx |  16 +-
 .../chat/[chatId]/_ui/ChatContent/index.tsx   |  24 ++-
 .../chat/[chatId]/_ui/ChatNavBar/index.tsx    |  42 +++-
 .../web/src/app/mentor/chat/[chatId]/page.tsx |   6 +-
 .../mentor/chat/_ui/ChatPageClient/index.tsx  | 202 ++++++++++++------
 apps/web/src/app/mentor/chat/page.tsx         |   2 +-
 apps/web/src/app/mentor/loading.tsx           |   2 +-
 .../mentor/modify/_ui/ModifyContent/index.tsx | 107 +++++++++-
 apps/web/src/app/mentor/modify/page.tsx       |   2 +-
 apps/web/src/app/mentor/page.tsx              |   2 +-
 .../waiting/_ui/WaitingContent/index.tsx      |  67 ++++++
 17 files changed, 613 insertions(+), 198 deletions(-)

diff --git a/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx b/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx
index 10065e32f..738030b9b 100644
--- a/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx
+++ b/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx
@@ -2,12 +2,14 @@
 
 import clsx from "clsx";
 import Link from "next/link";
+import type { ReactNode } from "react";
 import { useGetMentorDetail, usePostApplyMentoring } from "@/apis/mentor";
 import { useGetArticleList } from "@/apis/news";
 import StudyDate from "@/components/mentor/StudyDate";
 import ChannelBadge from "@/components/ui/ChannelBadge";
 import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
 import type { ChannelType } from "@/types/mentor";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import MentorArticle from "./_ui/MentorArticle";
 
 interface MentorDetailContentProps {
@@ -18,8 +20,9 @@ const MentorDetialContent = ({ mentorId }: MentorDetailContentProps) => {
   const { data: mentorDetail } = useGetMentorDetail(mentorId);
   const { data: articleList = [] } = useGetArticleList(mentorId);
   const { mutate: postApplyMentoring } = usePostApplyMentoring();
+  const isDesktop = useIsDesktopViewport();
 
-  if (!mentorDetail) return null; // type guard
+  if (!mentorDetail || isDesktop === null) return null; // type guard
 
   const {
     id,
@@ -34,12 +37,11 @@ const MentorDetialContent = ({ mentorId }: MentorDetailContentProps) => {
     isApplied,
     term,
   } = mentorDetail;
+  const handleApplyMentoring = () => postApplyMentoring({ mentorId: id });
 
-  return (
+  const profileSummary = (
     <>
-      {/* 멘토 프로필 섹션 */}
-      <div className="mt-2 flex">
-        {/* 프로필 이미지 */}
+      <div className="flex items-start gap-6">
         <ProfileWithBadge
           width={86}
           height={86}
@@ -47,24 +49,75 @@ const MentorDetialContent = ({ mentorId }: MentorDetailContentProps) => {
           isBadgeUp={false}
           profileImageUrl={profileImageUrl}
         />
-        <div className="ml-6 flex flex-col justify-start">
-          {/* 국가 및 학교 정보 */}
-          <div className="mb-2 flex items-center gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="mb-2 flex flex-wrap items-center gap-3">
             <span className="text-primary typo-sb-9">{country}</span>
             <StudyDate term={term} />
           </div>
-
-          {/* 멘토 이름 */}
           <h1 className="mb-2 text-k-900 typo-sb-4">{nickname}님</h1>
+          <p className="text-k-500 typo-regular-1">{universityName}</p>
+        </div>
+      </div>
+    </>
+  );
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">Mentor</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">멘토 상세</h1>
+          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+            멘토의 파견 경험과 아티클을 확인하고 멘토링을 신청하세요.
+          </p>
+        </header>
+
+        <div className="grid items-start gap-8 xl:grid-cols-[minmax(320px,420px)_minmax(0,1fr)]">
+          <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
+            {profileSummary}
+
+            <div className="my-6 h-px bg-k-100" />
+
+            <h2 className="mb-3 text-secondary typo-sb-7">멘토 채널</h2>
+            <ChannelLinks channels={channels} />
+
+            <button
+              type="button"
+              onClick={handleApplyMentoring}
+              disabled={isApplied}
+              className={getApplyButtonClassName(isApplied, "mt-6")}
+            >
+              멘토 신청하기
+            </button>
+          </aside>
 
-          {/* 학교  */}
-          <p className="mb-2 text-k-500 typo-regular-1">{universityName}</p>
+          <main className="grid gap-5">
+            <DesktopInfoPanel title="멘토 한마디">
+              <p className="whitespace-pre-wrap text-k-700 typo-regular-2">{introduction}</p>
+            </DesktopInfoPanel>
 
-          {/* 연락 가능 시간 */}
-          {/* <p className="text-sm font-semibold text-k-800">방해 금지 시간</p> */}
-          {/* <p className="text-sm font-normal text-k-500">0:00 ~ 8:00</p> */}
+            <DesktopInfoPanel title="합격 레시피">
+              <p className="whitespace-pre-wrap text-k-700 typo-regular-2">{passTip || "정보가 없습니다."}</p>
+            </DesktopInfoPanel>
+
+            <DesktopInfoPanel title="멘토의 아티클">
+              <div className="grid gap-5 lg:grid-cols-2">
+                {articleList.map((article) => (
+                  <MentorArticle key={article.title} article={article} mentorId={mentorId} />
+                ))}
+              </div>
+              {articleList.length === 0 && <p className="text-k-500 typo-regular-2">정보가 없습니다.</p>}
+            </DesktopInfoPanel>
+          </main>
         </div>
       </div>
+    );
+  }
+
+  return (
+    <>
+      {/* 멘토 프로필 섹션 */}
+      <div className="mt-2 flex">{profileSummary}</div>
       <hr className="mb-[30px] mt-[30px]" />
 
       {/* 멘토 한마디 */}
@@ -74,29 +127,7 @@ const MentorDetialContent = ({ mentorId }: MentorDetailContentProps) => {
       {/* 멘토 채널 */}
       <h3 className="mb-2 text-secondary typo-regular-1">멘토 채널</h3>
       <div className="mb-7">
-        <div
-          className={`grid gap-2 ${
-            channels.length === 1
-              ? "grid-cols-1"
-              : channels.length === 2
-                ? "grid-cols-2"
-                : channels.length === 3
-                  ? "grid-cols-2"
-                  : "grid-cols-2"
-          }`}
-        >
-          {channels.map((channel, idx) => (
-            <Link
-              rel={"noopener noreferrer"}
-              href={channel.url}
-              target="_blank"
-              key={idx}
-              className={`h-[40px] ${channels.length === 1 ? "w-full" : channels.length === 3 && idx === 2 ? "col-span-2" : ""}`}
-            >
-              <ChannelBadge channelType={channel.type as ChannelType} />
-            </Link>
-          ))}
-        </div>
+        <ChannelLinks channels={channels} />
       </div>
 
       {/* 합격 레시피 */}
@@ -120,15 +151,9 @@ const MentorDetialContent = ({ mentorId }: MentorDetailContentProps) => {
         <div className="pointer-events-auto w-1/2 max-w-md px-4">
           <button
             type="button"
-            onClick={() => postApplyMentoring({ mentorId: id })}
+            onClick={handleApplyMentoring}
             disabled={isApplied}
-            className={clsx(
-              "flex h-10 w-full items-center justify-center gap-3 rounded-[20px] px-5 py-[10px] typo-medium-2",
-              {
-                "cursor-not-allowed bg-k-100 text-k-400": isApplied,
-                "bg-primary text-white": !isApplied,
-              },
-            )}
+            className={getApplyButtonClassName(isApplied)}
           >
             {"멘토 신청하기"}
           </button>
@@ -137,4 +162,44 @@ const MentorDetialContent = ({ mentorId }: MentorDetailContentProps) => {
     </>
   );
 };
+
+const getApplyButtonClassName = (isApplied: boolean, className?: string) =>
+  clsx(
+    "flex h-10 w-full items-center justify-center gap-3 rounded-[20px] px-5 py-[10px] typo-medium-2",
+    {
+      "cursor-not-allowed bg-k-100 text-k-400": isApplied,
+      "bg-primary text-white": !isApplied,
+    },
+    className,
+  );
+
+const getChannelLinkClassName = (channelCount: number, index: number) =>
+  clsx("h-[40px]", {
+    "w-full": channelCount === 1,
+    "col-span-2": channelCount === 3 && index === 2,
+  });
+
+const ChannelLinks = ({ channels }: { channels: Array<{ type: ChannelType; url: string }> }) => (
+  <div className={clsx("grid gap-2", channels.length === 1 ? "grid-cols-1" : "grid-cols-2")}>
+    {channels.map((channel, idx) => (
+      <Link
+        rel="noopener noreferrer"
+        href={channel.url}
+        target="_blank"
+        key={`${channel.type}-${channel.url}`}
+        className={getChannelLinkClassName(channels.length, idx)}
+      >
+        <ChannelBadge channelType={channel.type} />
+      </Link>
+    ))}
+  </div>
+);
+
+const DesktopInfoPanel = ({ title, children }: { title: string; children: ReactNode }) => (
+  <section className="rounded-lg border border-k-100 bg-white p-6">
+    <h2 className="mb-4 text-secondary typo-sb-7">{title}</h2>
+    {children}
+  </section>
+);
+
 export default MentorDetialContent;
diff --git a/apps/web/src/app/mentor/[id]/page.tsx b/apps/web/src/app/mentor/[id]/page.tsx
index 23788c732..dac502137 100644
--- a/apps/web/src/app/mentor/[id]/page.tsx
+++ b/apps/web/src/app/mentor/[id]/page.tsx
@@ -18,7 +18,7 @@ const MentorDetailPage = async ({ params }: MentorDetailPageProps) => {
   const mentorId = Number(id);
 
   return (
-    <div className="flex w-full flex-col px-5">
+    <div className="flex w-full flex-col px-5 md:px-0">
       <MentorDetialContent mentorId={mentorId} />
     </div>
   );
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePage/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePage/index.tsx
index af161d4e4..2c20676e9 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePage/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePage/index.tsx
@@ -8,12 +8,29 @@ import MentorFindSection from "../MentorFindSection";
  * - 나의 멘토 탭 (진행 중, 대기 중)
  * - 멘토 찾기 섹션
  */
-const MenteePage = () => {
+const MenteePage = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
+  if (variant === "desktop") {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">Mentor</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">멘토링</h1>
+          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+            진행 중인 멘토링을 확인하고, 교환학생 경험을 나눠줄 멘토를 찾아보세요.
+          </p>
+        </header>
+
+        <div className="grid items-start gap-8 xl:grid-cols-[minmax(360px,440px)_minmax(0,1fr)]">
+          <MenteePageTabs variant="desktop" />
+          <MentorFindSection variant="desktop" />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
-      {/* 탭 및 나의 멘토, 멘티요청 리스트 채팅카드 */}
       <MenteePageTabs />
-      {/* 멘토찾기 섹션 */}
       <MentorFindSection />
     </>
   );
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx
index 093c7a376..0a1a806b3 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx
@@ -12,7 +12,7 @@ import { VerifyStatus } from "@/types/mentee";
 import { MenteeTab } from "@/types/mentor";
 import { MentorChatCardsSkeleton } from "../../../MentorPageSkeleton";
 
-const MenteePageTabs = () => {
+const MenteePageTabs = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
   // api
   const { data: mentoList = [], isPending: isMentoListPending } = useGetChatRooms();
   const { data: menteeWaitingMentoringList = [], isPending: isWaitingListPending } = useGetMenteeMentoringList(
@@ -26,27 +26,27 @@ const MenteePageTabs = () => {
 
   // 현재 탭에 따라 보여줄 데이터의 길이
   const currentDataLength = selectedTab === MenteeTab.MY_MENTOR ? mentoList.length : menteeWaitingMentoringList.length;
+  const isDesktop = variant === "desktop";
+  const visibleCount = isDesktop ? 4 : 2;
+  const sectionTitle = selectedTab === MenteeTab.MY_MENTOR ? "진행 중인 멘토링" : "대기 중인 멘토링";
+  const emptyMessage = selectedTab === MenteeTab.MY_MENTOR ? "진행중인 멘토링이 없어요!" : "대기중인 멘토링이 없어요!";
+  const viewAllHref = selectedTab === MenteeTab.MY_MENTOR ? "/mentor/chat" : "/mentor/waiting";
 
-  return (
+  const content = (
     <>
-      <header className="">
+      <header>
         <TabSelector tabs={tabs} selectedTab={selectedTab} onTabChange={(tab) => setSelectedTab(tab as MenteeTab)} />
       </header>
 
       <div className="mb-3 mt-5 flex justify-between">
         <div className="flex items-center">
-          <h2 className="mr-2 text-k-900 typo-sb-5">
-            {selectedTab === MenteeTab.MY_MENTOR ? "진행 중인 멘토링" : "대기 중인 멘토링"}
-          </h2>
-          {currentDataLength > 2 && (
-            <span className="rounded-2xl bg-primary-1 px-2 text-k-0">{currentDataLength - 2}+</span>
+          <h2 className="mr-2 text-k-900 typo-sb-5">{sectionTitle}</h2>
+          {currentDataLength > visibleCount && (
+            <span className="rounded-2xl bg-primary-1 px-2 text-k-0">{currentDataLength - visibleCount}+</span>
           )}
         </div>
-        {currentDataLength > 2 && (
-          <Link
-            href={selectedTab === MenteeTab.MY_MENTOR ? "/mentor/chat" : "/mentor/waiting"}
-            className="flex items-center text-k-500 typo-medium-3"
-          >
+        {currentDataLength > visibleCount && (
+          <Link href={viewAllHref} className="flex items-center text-k-500 typo-medium-3">
             전체보기
             <span className="flex h-[20px] w-[20px] items-center justify-center">
               <IconDirectionRight />
@@ -58,37 +58,45 @@ const MenteePageTabs = () => {
       {isCurrentTabPending ? (
         <MentorChatCardsSkeleton />
       ) : currentDataLength === 0 ? (
-        <EmptyMentorChatCards
-          message={selectedTab === MenteeTab.MY_MENTOR ? "진행중인 멘토링이 없어요!" : "대기중인 멘토링이 없어요!"}
-        />
+        <EmptyMentorChatCards message={emptyMessage} />
       ) : null}
 
-      {!isCurrentTabPending &&
-        selectedTab === MenteeTab.MY_MENTOR &&
-        mentoList.slice(0, 2).map((mentor) => (
-          <Link href={`mentor/chat/${mentor.id}`} key={mentor.id}>
-            <MentorChatCard
-              key={mentor.id}
-              nickname={mentor.partner.nickname}
-              profileImageUrl={mentor.partner.profileUrl}
-              description={mentor.lastChatMessage || "새로운 멘토링이 시작되었어요!"}
-            />
-          </Link>
-        ))}
-      {!isCurrentTabPending &&
-        selectedTab === MenteeTab.MY_APPLIED &&
-        menteeWaitingMentoringList
-          .slice(0, 2)
-          .map((mentor) => (
-            <MentorChatCard
-              key={mentor.mentoringId}
-              profileImageUrl={mentor.profileImageUrl}
-              nickname={mentor.nickname}
-              description={"안녕하세요! 교환학생에 대해 무엇이든 물어보세요!"}
-            />
+      <div className={isDesktop ? "grid gap-3" : ""}>
+        {!isCurrentTabPending &&
+          selectedTab === MenteeTab.MY_MENTOR &&
+          mentoList.slice(0, visibleCount).map((mentor) => (
+            <Link href={`mentor/chat/${mentor.id}`} key={mentor.id}>
+              <MentorChatCard
+                key={mentor.id}
+                nickname={mentor.partner.nickname}
+                profileImageUrl={mentor.partner.profileUrl}
+                description={mentor.lastChatMessage || "새로운 멘토링이 시작되었어요!"}
+              />
+            </Link>
           ))}
+        {!isCurrentTabPending &&
+          selectedTab === MenteeTab.MY_APPLIED &&
+          menteeWaitingMentoringList
+            .slice(0, visibleCount)
+            .map((mentor) => (
+              <MentorChatCard
+                key={mentor.mentoringId}
+                profileImageUrl={mentor.profileImageUrl}
+                nickname={mentor.nickname}
+                description={"안녕하세요! 교환학생에 대해 무엇이든 물어보세요!"}
+              />
+            ))}
+      </div>
+    </>
+  );
+
+  if (isDesktop) {
+    return <section className="rounded-lg border border-k-100 bg-white p-6">{content}</section>;
+  }
 
-      {/* 중간 밑줄 */}
+  return (
+    <>
+      {content}
       <div className="my-8 h-1.5 w-full bg-k-50"></div>
     </>
   );
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx
index 2d3ff3543..8c344462a 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx
@@ -11,7 +11,7 @@ import { MentorCardListSkeleton } from "../../../MentorPageSkeleton";
 import usePrefetchMentorFindTab from "./_hooks/usePrefetchMentorFindTab";
 import useSelectedTab from "./_hooks/useSelectedTab";
 
-const MentorFindSection = () => {
+const MentorFindSection = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
   const { listRef, selectedTab, handleSelectTab } = useSelectedTab();
 
   const {
@@ -25,12 +25,18 @@ const MentorFindSection = () => {
   const { lastElementRef } = useInfinityScroll({ fetchNextPage, hasNextPage });
   usePrefetchMentorFindTab();
 
+  const isDesktop = variant === "desktop";
+
   return (
-    <>
-      <h2 className="mb-3 text-gray-900 typo-sb-5">멘토 찾기</h2>
+    <section className={isDesktop ? "rounded-lg border border-k-100 bg-white p-6" : ""}>
+      <div className={isDesktop ? "mb-5 flex items-start justify-between gap-4" : ""}>
+        <div>
+          <h2 className="mb-3 text-gray-900 typo-sb-5">멘토 찾기</h2>
+          {isDesktop && <p className="text-k-500 typo-medium-3">권역별로 멘토를 탐색하고 멘토링을 신청하세요.</p>}
+        </div>
+      </div>
 
-      {/* 필터 탭 */}
-      <div className="mb-3 flex gap-2">
+      <div className="mb-3 flex gap-2 overflow-x-auto whitespace-nowrap">
         {Object.values(FilterTab).map((tab) => (
           <button
             key={tab}
@@ -44,8 +50,7 @@ const MentorFindSection = () => {
         ))}
       </div>
 
-      {/* 멘토 리스트 */}
-      <div ref={listRef} className="space-y-4 pb-28">
+      <div ref={listRef} className={isDesktop ? "grid gap-4 lg:grid-cols-2 2xl:grid-cols-3" : "space-y-4 pb-28"}>
         {isPending ? (
           <MentorCardListSkeleton />
         ) : mentorList.length === 0 ? (
@@ -61,8 +66,8 @@ const MentorFindSection = () => {
         )}
       </div>
 
-      <FloatingUpBtn />
-    </>
+      {!isDesktop && <FloatingUpBtn />}
+    </section>
   );
 };
 
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/index.tsx
index ca479694e..c043769d9 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/index.tsx
@@ -13,26 +13,26 @@ import { MentorChatCardsSkeleton } from "../../../MentorPageSkeleton";
 import ApplicantListSection from "./_ui/ApplicantListSection";
 import MyMentorSection from "./_ui/MyMentorSection";
 
-const MentorPage = () => {
+const MentorPage = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
   const [selectedTab, setSelectedTab] = useState<MentorTab>(MentorTab.MY_MENTEE);
   const isMyMenteeTab = selectedTab === MentorTab.MY_MENTEE;
   const tabs = [MentorTab.MY_MENTEE, MentorTab.APPLY_LIST];
 
   const { data: myMenteeList = [], isPending: isMyMenteeListPending } = useGetChatRooms();
 
-  return (
+  const isDesktop = variant === "desktop";
+
+  const menteeListContent = (
     <>
       <header className="flex items-center justify-between">
-        {/* 탭 */}
         <div className="w-full">
           <TabSelector tabs={tabs} selectedTab={selectedTab} onTabChange={(tab) => setSelectedTab(tab as MentorTab)} />
         </div>
       </header>
 
-      <div className="mb-10 mt-4">
+      <div className={isDesktop ? "mt-4" : "mb-10 mt-4"}>
         <div className="mb-2 flex justify-between">
           <h2 className="text-gray-900 typo-sb-5">나의 멘티</h2>
-          {/* 전체보기 버튼 */}
           {isMyMenteeTab && myMenteeList.length > 2 && (
             <Link href={`/mentor/chat`} className="flex items-center text-k-500 typo-medium-3">
               전체보기
@@ -43,10 +43,8 @@ const MentorPage = () => {
           )}
         </div>
 
-        {/* 멘티 보기 탭일때 */}
         {isMyMenteeTab ? (
           <>
-            {/* 나의 멘티  */}
             {isMyMenteeListPending ? (
               <MentorChatCardsSkeleton count={3} />
             ) : myMenteeList.length === 0 ? (
@@ -66,18 +64,42 @@ const MentorPage = () => {
                 );
               })
             )}
-            {/* 중간 밑줄 */}
-            <div className="my-8 h-1.5 w-full bg-k-50"></div>
-            {/* 나의 멘토 페이지 */}
-            <MyMentorSection />
+            {!isDesktop && (
+              <>
+                <div className="my-8 h-1.5 w-full bg-k-50"></div>
+                <MyMentorSection />
+              </>
+            )}
           </>
         ) : (
-          // 멘티 신청 보기 탭일때
           <ApplicantListSection />
         )}
       </div>
     </>
   );
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">Mentor</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">멘토 페이지</h1>
+          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+            멘토링 신청과 나의 멘토 프로필을 한 화면에서 관리하세요.
+          </p>
+        </header>
+
+        <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(340px,420px)]">
+          <section className="rounded-lg border border-k-100 bg-white p-6">{menteeListContent}</section>
+          <section className="rounded-lg border border-k-100 bg-white p-6">
+            <MyMentorSection />
+          </section>
+        </div>
+      </div>
+    );
+  }
+
+  return menteeListContent;
 };
 
 export default MentorPage;
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/index.tsx
index 2d44a9367..c90eb9af9 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/index.tsx
@@ -7,6 +7,7 @@ import { useGetMyInfo } from "@/apis/MyPage";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { UserRole } from "@/types/mentor";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import MentorPageSkeleton from "../MentorPageSkeleton";
 import MenteePage from "./_ui/MenteePage";
 import MentorPage from "./_ui/MentorPage";
@@ -14,6 +15,7 @@ import MentorPage from "./_ui/MentorPage";
 const MentorClient = () => {
   const router = useRouter();
   const clientRole = useAuthStore((state) => state.clientRole);
+  const isDesktop = useIsDesktopViewport();
   const { data: myInfo, isLoading, isFetching, isError, error, refetch } = useGetMyInfo();
   const role = myInfo?.role;
   const status = (error as AxiosError | null)?.response?.status;
@@ -27,7 +29,7 @@ const MentorClient = () => {
     }
   }, [isAuthResolving, isUnauthorized, isError, role, router]);
 
-  if (isAuthResolving) {
+  if (isAuthResolving || isDesktop === null) {
     return <MentorPageSkeleton />;
   }
 
@@ -51,10 +53,18 @@ const MentorClient = () => {
   }
 
   if (role === UserRole.ADMIN) {
-    return clientRole === UserRole.MENTEE ? <MenteePage /> : <MentorPage />;
+    return clientRole === UserRole.MENTEE ? (
+      <MenteePage variant={isDesktop ? "desktop" : "mobile"} />
+    ) : (
+      <MentorPage variant={isDesktop ? "desktop" : "mobile"} />
+    );
   }
 
-  return role === UserRole.MENTOR ? <MentorPage /> : <MenteePage />;
+  return role === UserRole.MENTOR ? (
+    <MentorPage variant={isDesktop ? "desktop" : "mobile"} />
+  ) : (
+    <MenteePage variant={isDesktop ? "desktop" : "mobile"} />
+  );
 };
 
 export default MentorClient;
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx
index 9293a7007..9596097ba 100644
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx
@@ -10,6 +10,7 @@ import useAuthStore from "@/lib/zustand/useAuthStore";
 import { ConnectionStatus } from "@/types/chat";
 import { UserRole } from "@/types/mentor";
 import { tokenParse } from "@/utils/jwtUtils";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import useChatListHandler from "./_hooks/useChatListHandler";
 import usePutChatReadHandler from "./_hooks/usePutChatReadHandler";
 import { formatDateSeparator, isSameDay } from "./_lib/dateUtils";
@@ -27,6 +28,7 @@ const ChatContent = ({ chatId }: ChatContentProps) => {
 
   const isMentor = parsedData?.role === UserRole.MENTOR || parsedData?.role === UserRole.ADMIN;
   const isPartnerMentor = !isMentor;
+  const isDesktop = useIsDesktopViewport();
 
   // 채팅 읽음 상태 업데이트 훅 진입시 자동으로
   usePutChatReadHandler(chatId);
@@ -57,16 +59,26 @@ const ChatContent = ({ chatId }: ChatContentProps) => {
 
   const { partnerId, nickname, profileUrl, university } = partnerInfo ?? {};
 
+  if (isDesktop === null) return null;
+
   return (
-    <div className="relative flex h-[calc(100vh-112px)] flex-col">
+    <div
+      className={clsx(
+        "relative flex flex-col",
+        isDesktop
+          ? "h-[calc(100vh-204px)] min-h-[560px] overflow-hidden rounded-lg border border-k-100 bg-white"
+          : "h-[calc(100vh-112px)]",
+      )}
+    >
       <div className="flex-1 overflow-hidden">
-        <div className="flex h-full flex-col px-5 pb-2">
+        <div className={clsx("flex h-full flex-col", isDesktop ? "px-6 pb-3" : "px-5 pb-2")}>
           {/* 하단 여백 추가 */}
           {/* Floating 멘토 정보 영역 */}
-          <div className="z-10 mt-5 h-16 w-full flex-shrink-0">
+          <div className={clsx("z-10 w-full flex-shrink-0", isDesktop ? "border-b border-k-100 py-4" : "mt-5 h-16")}>
             <div
               className={clsx(
-                "flex w-full items-center justify-between rounded px-2.5 py-2",
+                "flex w-full items-center justify-between",
+                isDesktop ? "rounded-lg px-4 py-3" : "rounded px-2.5 py-2",
                 isMentor ? "bg-sub-c-100 text-sub-c-500" : "bg-primary-100 text-primary",
               )}
             >
@@ -87,7 +99,7 @@ const ChatContent = ({ chatId }: ChatContentProps) => {
                 {isMentor ? "멘티 페이지" : "멘토 페이지"}
               </Link>
             </div>
-            <div className="rounded bg-white px-4 py-2 text-center">
+            <div className={clsx("bg-white px-4 text-center", isDesktop ? "pt-3" : "rounded py-2")}>
               <div className="rounded bg-white px-4 py-2 text-center">
                 {connectionStatus === ConnectionStatus.Connected ? (
                   <p
@@ -111,7 +123,7 @@ const ChatContent = ({ chatId }: ChatContentProps) => {
           {/* 채팅 메시지 영역 - 항상 스크롤 가능, 스크롤바 숨김 */}
           <div
             ref={scrollContainerRef}
-            className="scrollbar-hide mt-4 flex-1 overflow-y-auto p-4 pb-6"
+            className={clsx("scrollbar-hide flex-1 overflow-y-auto", isDesktop ? "p-6" : "mt-4 p-4 pb-6")}
             style={{
               scrollbarWidth: "none" /* Firefox */,
               msOverflowStyle: "none" /* Internet Explorer 10+ */,
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx
index 9d172d731..6b100989f 100644
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx
@@ -11,6 +11,7 @@ import useAuthStore from "@/lib/zustand/useAuthStore";
 import { IconAlert, IconAlertSubC, IconDirectionRight, IconSetting } from "@/public/svgs/mentor";
 import { UserRole } from "@/types/mentor";
 import { tokenParse } from "@/utils/jwtUtils";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import ReportPanel from "../../../../../../components/ui/ReportPanel";
 
 interface ChatNavBarProps {
@@ -21,6 +22,7 @@ const ChatNavBar = ({ chatId }: ChatNavBarProps) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
   const accessToken = useAuthStore((state) => state.accessToken);
+  const isDesktop = useIsDesktopViewport();
   const result = tokenParse(accessToken);
   const isMentor = result?.role === UserRole.MENTOR || result?.role === UserRole.ADMIN;
   const isPartnerMentor = !isMentor;
@@ -50,18 +52,42 @@ const ChatNavBar = ({ chatId }: ChatNavBarProps) => {
     }, 300);
   };
 
+  if (isDesktop === null) return null;
+
   return (
     <div className="relative">
-      <nav>
-        <TopDetailNavigation
-          title={"멘토 채팅"}
-          icon={
-            <button className="h-4 w-4" onClick={handleSettingsClick}>
+      {isDesktop ? (
+        <header className="px-8 pt-8 lg:px-10">
+          <div className="mb-8 flex items-start justify-between gap-6">
+            <div>
+              <p className="text-primary typo-sb-9">Mentor</p>
+              <h1 className="mt-2 text-k-900 typo-bold-1">멘토 채팅</h1>
+              <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+                멘토링 상대와 실시간으로 대화하며 궁금한 점을 해결하세요.
+              </p>
+            </div>
+            <button
+              type="button"
+              className="flex h-10 w-10 items-center justify-center rounded-full border border-k-100 bg-white"
+              onClick={handleSettingsClick}
+              aria-label="채팅 설정 열기"
+            >
               <IconSetting />
             </button>
-          }
-        />
-      </nav>
+          </div>
+        </header>
+      ) : (
+        <nav>
+          <TopDetailNavigation
+            title={"멘토 채팅"}
+            icon={
+              <button type="button" className="h-4 w-4" onClick={handleSettingsClick}>
+                <IconSetting />
+              </button>
+            }
+          />
+        </nav>
+      )}
 
       {/* 오버레이 (패널 외부 클릭 시 닫기) */}
       {(isExpanded || isAnimating) && (
diff --git a/apps/web/src/app/mentor/chat/[chatId]/page.tsx b/apps/web/src/app/mentor/chat/[chatId]/page.tsx
index 4e5dc3e6e..ebc62b2ba 100644
--- a/apps/web/src/app/mentor/chat/[chatId]/page.tsx
+++ b/apps/web/src/app/mentor/chat/[chatId]/page.tsx
@@ -21,9 +21,11 @@ const ChatDetailPage = async ({ params }: ChatDetailPageProps) => {
 
   if (Number.isNaN(chatId)) notFound();
   return (
-    <div className="flex w-full flex-col">
+    <div className="flex w-full flex-col md:min-h-screen md:bg-k-50">
       <ChatNavBar chatId={chatId} />
-      <ChatContent chatId={chatId} />
+      <div className="md:px-8 md:pb-8 lg:px-10">
+        <ChatContent chatId={chatId} />
+      </div>
     </div>
   );
 };
diff --git a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
index cf67d213f..026120493 100644
--- a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
+++ b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import Link from "next/link";
 import { useGetChatRooms } from "@/apis/chat";
 import { useGetMyInfo } from "@/apis/MyPage";
@@ -7,51 +8,60 @@ import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
 import { IconSearchBlue, IconSolidConnentionLogo } from "@/public/svgs/mentor";
 import { UserRole } from "@/types/mentor";
 import { convertISODateToKoreanTime } from "@/utils/datetimeUtils";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+
+type ChatRoom = NonNullable<ReturnType<typeof useGetChatRooms>["data"]>[number];
 
 const ChatPageClient = () => {
   const { data: chatRooms = [] } = useGetChatRooms();
   const { data: myInfo } = useGetMyInfo();
+  const isDesktop = useIsDesktopViewport();
 
   const isMentee = myInfo?.role === UserRole.MENTEE;
   const isPartnerMentor = isMentee;
+  const listTitle = isMentee ? "나의 멘토" : "나의 멘티";
+
+  if (isDesktop === null) return null;
 
-  // 연결된 멘토가 없을 때의 처리 (멘티만)
   if (chatRooms.length === 0 && isMentee) {
-    return (
-      <div className="flex min-h-screen flex-col items-center justify-center">
-        <div className="w-15 h-[45px]">
-          <IconSolidConnentionLogo />
-        </div>
-        <p className="text-center text-k-300 typo-medium-2">
-          현재 매칭된 멘토가 없어요.
-          <br />
-          멘토부터 찾아볼까요?
-        </p>
-        <Link
-          href={"/mentor"}
-          className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-gradient-to-l from-primary to-sub-a px-[10px] text-white typo-sb-9"
-        >
-          멘토 찾으러 가볼까요?
-        </Link>
-      </div>
-    );
+    return <ChatEmptyState isDesktop={isDesktop} isMentee />;
   }
 
-  // 멘토/어드민이고 채팅방이 없을 때
   if (chatRooms.length === 0) {
+    return <ChatEmptyState isDesktop={isDesktop} isMentee={false} />;
+  }
+
+  if (isDesktop) {
     return (
-      <div className="flex min-h-screen flex-col items-center justify-center">
-        <div className="w-15 h-[45px]">
-          <IconSolidConnentionLogo />
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">Mentor</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">멘토 채팅</h1>
+          <p className="mt-2 max-w-2xl 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">
+            <ChatListHeader title={listTitle} count={chatRooms.length} />
+            <ChatRoomList chatRooms={chatRooms} isPartnerMentor={isPartnerMentor} isDesktop />
+          </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">
+              {isMentee && <DesktopQuickLink href="/mentor" title="멘토 찾기" description="새로운 멘토를 탐색해요" />}
+              <DesktopQuickLink href="/mentor/waiting" title="신청 목록" description="대기 중인 멘토링을 확인해요" />
+            </div>
+          </aside>
         </div>
-        <p className="text-center text-k-300 typo-medium-2">현재 진행 중인 채팅이 없어요.</p>
       </div>
     );
   }
 
   return (
     <div className="flex h-full w-full flex-col">
-      {/* 헤더 - 멘티일 때만 표시 */}
       {isMentee && (
         <Link href="/mentor" className="flex h-[66px] w-full items-center justify-between bg-secondary-100 px-9 py-3">
           <div>
@@ -69,49 +79,115 @@ const ChatPageClient = () => {
         </Link>
       )}
 
-      {/* 채팅 리스트 섹션 */}
       <div className="px-5 py-4">
-        <div className="mb-4 flex items-center gap-[10px]">
-          <h2 className="text-gray-900 typo-sb-5">{isMentee ? "나의 멘토" : "나의 멘티"}</h2>
-          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-center text-white typo-regular-4">
-            {chatRooms.length}
-          </span>
-        </div>
+        <ChatListHeader title={listTitle} count={chatRooms.length} />
+        <ChatRoomList chatRooms={chatRooms} isPartnerMentor={isPartnerMentor} />
+      </div>
+    </div>
+  );
+};
 
-        {/* 채팅 리스트 */}
-        <div className="w-full space-y-3">
-          {chatRooms.map((chat) => {
-            const { nickname, profileUrl } = chat.partner;
-            const { lastChatMessage, lastReceivedTime, unReadCount } = chat;
-
-            return (
-              <Link
-                key={chat.id}
-                href={`/mentor/chat/${chat.id}`}
-                className="flex items-center justify-between border-b border-k-50 py-2"
-              >
-                <div className="flex items-center gap-2">
-                  <ProfileWithBadge profileImageUrl={profileUrl} isMentor={isPartnerMentor} width={48} height={48} />
-                  <div className="flex flex-col items-start">
-                    <h3 className="text-k-900 typo-sb-9">{nickname}</h3>
-                    <p className="truncate text-k-600 typo-regular-2">{lastChatMessage}</p>
-                  </div>
-                </div>
-                <div className="flex flex-col items-end gap-1">
-                  <p className="text-k-500 typo-regular-4">{convertISODateToKoreanTime(lastReceivedTime)}</p>
-                  {unReadCount > 0 && (
-                    <span className="ml-2 rounded-full bg-secondary px-2 py-1 text-white typo-regular-4">
-                      {unReadCount > 9 ? "9+" : unReadCount}
-                    </span>
-                  )}
-                </div>
-              </Link>
-            );
-          })}
-        </div>
+const ChatEmptyState = ({ isDesktop, isMentee }: { isDesktop: boolean; isMentee: boolean }) => {
+  const content = (
+    <div className={clsx("flex flex-col items-center justify-center", isDesktop ? "min-h-[360px]" : "min-h-screen")}>
+      <div className="w-15 h-[45px]">
+        <IconSolidConnentionLogo />
       </div>
+      <p className="text-center text-k-300 typo-medium-2">
+        {isMentee ? (
+          <>
+            현재 매칭된 멘토가 없어요.
+            <br />
+            멘토부터 찾아볼까요?
+          </>
+        ) : (
+          "현재 진행 중인 채팅이 없어요."
+        )}
+      </p>
+      {isMentee && (
+        <Link
+          href="/mentor"
+          className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-gradient-to-l from-primary to-sub-a px-[10px] text-white typo-sb-9"
+        >
+          멘토 찾으러 가볼까요?
+        </Link>
+      )}
+    </div>
+  );
+
+  if (!isDesktop) {
+    return content;
+  }
+
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8">
+        <p className="text-primary typo-sb-9">Mentor</p>
+        <h1 className="mt-2 text-k-900 typo-bold-1">멘토 채팅</h1>
+      </header>
+      <section className="rounded-lg border border-k-100 bg-white p-6">{content}</section>
     </div>
   );
 };
 
+const ChatListHeader = ({ title, count }: { title: string; count: number }) => (
+  <div className="mb-4 flex items-center gap-[10px]">
+    <h2 className="text-gray-900 typo-sb-5">{title}</h2>
+    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-center text-white typo-regular-4">
+      {count}
+    </span>
+  </div>
+);
+
+const ChatRoomList = ({
+  chatRooms,
+  isPartnerMentor,
+  isDesktop = false,
+}: {
+  chatRooms: ChatRoom[];
+  isPartnerMentor: boolean;
+  isDesktop?: boolean;
+}) => (
+  <div className={isDesktop ? "grid gap-2" : "w-full space-y-3"}>
+    {chatRooms.map((chat) => {
+      const { nickname, profileUrl } = chat.partner;
+      const { lastChatMessage, lastReceivedTime, unReadCount } = chat;
+
+      return (
+        <Link
+          key={chat.id}
+          href={`/mentor/chat/${chat.id}`}
+          className={clsx(
+            "flex items-center justify-between border-k-50",
+            isDesktop ? "rounded-lg border px-4 py-3 transition-colors hover:bg-k-50" : "border-b py-2",
+          )}
+        >
+          <div className="flex min-w-0 items-center gap-3">
+            <ProfileWithBadge profileImageUrl={profileUrl} isMentor={isPartnerMentor} width={48} height={48} />
+            <div className="flex min-w-0 flex-col items-start">
+              <h3 className="text-k-900 typo-sb-9">{nickname}</h3>
+              <p className="max-w-full truncate text-k-600 typo-regular-2">{lastChatMessage}</p>
+            </div>
+          </div>
+          <div className="ml-4 flex shrink-0 flex-col items-end gap-1">
+            <p className="text-k-500 typo-regular-4">{convertISODateToKoreanTime(lastReceivedTime)}</p>
+            {unReadCount > 0 && (
+              <span className="ml-2 rounded-full bg-secondary px-2 py-1 text-white typo-regular-4">
+                {unReadCount > 9 ? "9+" : unReadCount}
+              </span>
+            )}
+          </div>
+        </Link>
+      );
+    })}
+  </div>
+);
+
+const DesktopQuickLink = ({ href, title, description }: { href: string; title: string; description: string }) => (
+  <Link href={href} className="rounded-lg bg-k-50 px-4 py-3 transition-colors hover:bg-k-100">
+    <span className="block text-k-800 typo-sb-7">{title}</span>
+    <span className="mt-1 block text-k-500 typo-regular-2">{description}</span>
+  </Link>
+);
+
 export default ChatPageClient;
diff --git a/apps/web/src/app/mentor/chat/page.tsx b/apps/web/src/app/mentor/chat/page.tsx
index eab30e153..5ca779f3e 100644
--- a/apps/web/src/app/mentor/chat/page.tsx
+++ b/apps/web/src/app/mentor/chat/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 
 const ChatPage = () => {
   return (
-    <div className="w-full px-5">
+    <div className="w-full px-5 md:px-0">
       <ChatPageClient />
     </div>
   );
diff --git a/apps/web/src/app/mentor/loading.tsx b/apps/web/src/app/mentor/loading.tsx
index f78863043..f9614a585 100644
--- a/apps/web/src/app/mentor/loading.tsx
+++ b/apps/web/src/app/mentor/loading.tsx
@@ -1,7 +1,7 @@
 import MentorPageSkeleton from "./_ui/MentorPageSkeleton";
 
 const MentorLoading = () => (
-  <div className="w-full px-5">
+  <div className="w-full px-5 md:px-0">
     <MentorPageSkeleton />
   </div>
 );
diff --git a/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx b/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx
index 885bacbf7..bc0bf7e62 100644
--- a/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx
+++ b/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx
@@ -6,6 +6,7 @@ import { useGetArticleList } from "@/apis/news";
 import StudyDate from "@/components/mentor/StudyDate";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import MentoProfile from "@/components/ui/ProfileWithBadge";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import useModifyHookForm from "./_hooks/useModifyHookForm";
 import usePutMyMentorProfileHandler from "./_hooks/usePutMyMentorProfileHandler";
 import AddArticleCard from "./_ui/AddArticleCard";
@@ -15,6 +16,7 @@ import ChannelBox from "./_ui/ChannelBox";
 const ModifyContent = () => {
   const { data: myMentorProfile = null } = useGetMentorMyProfile();
   const { data: articleList = [] } = useGetArticleList(myMentorProfile?.id || 0);
+  const isDesktop = useIsDesktopViewport();
 
   const method = useModifyHookForm(myMentorProfile);
   const {
@@ -25,9 +27,112 @@ const ModifyContent = () => {
 
   const { onSubmit } = usePutMyMentorProfileHandler();
   // 채널 타입들을 감시
-  if (!myMentorProfile) return <CloudSpinnerPage />;
+  if (!myMentorProfile || isDesktop === null) return <CloudSpinnerPage />;
   const { profileImageUrl, hasBadge, nickname, country, universityName, term, channels } = myMentorProfile;
 
+  if (isDesktop) {
+    return (
+      <FormProvider {...method}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+            <header className="mb-8">
+              <p className="text-primary typo-sb-9">Mentor</p>
+              <h1 className="mt-2 text-k-900 typo-bold-1">멘토 정보 수정</h1>
+              <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+                멘토 채널과 소개, 아티클을 정리해서 멘티에게 보여줄 프로필을 관리하세요.
+              </p>
+            </header>
+
+            <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(320px,380px)]">
+              <main className="grid gap-6">
+                <section className="rounded-lg border border-k-100 bg-white p-6">
+                  <h2 className="text-primary-1 typo-sb-5">내 채널 관리</h2>
+                  <div className="mt-2.5 grid gap-3">
+                    <ChannelBox channels={channels} />
+                  </div>
+                </section>
+
+                <section className="rounded-lg border border-k-100 bg-white p-6">
+                  <h2 className="text-primary-1 typo-sb-5">멘토 소개</h2>
+                  <div className="mt-5 grid gap-5 lg:grid-cols-2">
+                    <div>
+                      <label htmlFor="mentor-introduction" className="text-k-900 typo-sb-7">
+                        멘토 한마디
+                      </label>
+                      <textarea
+                        id="mentor-introduction"
+                        {...register("introduction")}
+                        className="mt-2.5 h-40 w-full rounded-lg bg-k-50 p-5 text-k-900 placeholder:text-k-300 typo-regular-2"
+                        placeholder="최대 200자 이내"
+                        maxLength={200}
+                      />
+                      {errors.introduction && (
+                        <p className="mt-1 text-red-500 typo-regular-2">
+                          {typeof errors.introduction === "object" && errors.introduction.message
+                            ? errors.introduction.message
+                            : "멘토 한마디를 입력해주세요"}
+                        </p>
+                      )}
+                    </div>
+                    <div>
+                      <label htmlFor="mentor-pass-tip" className="text-k-900 typo-sb-7">
+                        합격 레시피
+                      </label>
+                      <textarea
+                        id="mentor-pass-tip"
+                        {...register("passTip")}
+                        className="mt-2.5 h-40 w-full rounded-lg bg-k-50 p-5 text-k-900 placeholder:text-k-300 typo-regular-2"
+                        placeholder="최대 200자 이내"
+                        maxLength={200}
+                      />
+                      {errors.passTip && (
+                        <p className="mt-1 text-red-500 typo-regular-2">
+                          {typeof errors.passTip === "object" && errors.passTip.message
+                            ? errors.passTip.message
+                            : "합격 레시피를 입력해주세요"}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </section>
+
+                <section className="rounded-lg border border-k-100 bg-white p-6">
+                  <h2 className="text-primary-1 typo-sb-5">멘토 아티클</h2>
+                  <div className="mt-2.5">
+                    <AddArticleCard />
+                  </div>
+                  <div className="mt-6 grid gap-6 lg:grid-cols-2">
+                    {articleList.map((article) => (
+                      <ArticlePanel key={article.title} userId={myMentorProfile.id} article={article} />
+                    ))}
+                  </div>
+                </section>
+              </main>
+
+              <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 flex items-start gap-4">
+                  <MentoProfile profileImageUrl={profileImageUrl} hasBadge={hasBadge} />
+                  <div className="min-w-0">
+                    <div className="text-primary typo-sb-7">{country}</div>
+                    <div className="mt-1 text-gray-900 typo-sb-5">{nickname}</div>
+                    <div className="mt-1 text-gray-500 typo-regular-2">{universityName}</div>
+                    <div className="mt-2">
+                      <StudyDate term={term} />
+                    </div>
+                  </div>
+                </div>
+                <button type="submit" className="mt-6 h-10 w-full rounded-3xl bg-primary-1 px-5 py-2.5 text-k-0">
+                  수정하기
+                </button>
+              </aside>
+            </div>
+          </div>
+        </form>
+      </FormProvider>
+    );
+  }
+
   return (
     <div className="px-5">
       <FormProvider {...method}>
diff --git a/apps/web/src/app/mentor/modify/page.tsx b/apps/web/src/app/mentor/modify/page.tsx
index 7a4e71699..fed7a5616 100644
--- a/apps/web/src/app/mentor/modify/page.tsx
+++ b/apps/web/src/app/mentor/modify/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 };
 
 const ModifyPage = () => {
-  return <div className="w-full px-5">{<ModifyContent />}</div>;
+  return <div className="w-full px-5 md:px-0">{<ModifyContent />}</div>;
 };
 
 export default ModifyPage;
diff --git a/apps/web/src/app/mentor/page.tsx b/apps/web/src/app/mentor/page.tsx
index 1c29c6493..60db518c0 100644
--- a/apps/web/src/app/mentor/page.tsx
+++ b/apps/web/src/app/mentor/page.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 
 const MentorPage = () => {
   return (
-    <div className="w-full px-5">
+    <div className="w-full px-5 md:px-0">
       <MentorClient />
     </div>
   );
diff --git a/apps/web/src/app/mentor/waiting/_ui/WaitingContent/index.tsx b/apps/web/src/app/mentor/waiting/_ui/WaitingContent/index.tsx
index f94a76d3d..9b55d3e91 100644
--- a/apps/web/src/app/mentor/waiting/_ui/WaitingContent/index.tsx
+++ b/apps/web/src/app/mentor/waiting/_ui/WaitingContent/index.tsx
@@ -6,6 +6,7 @@ import MentorExpandChatCard from "@/components/mentor/MentorExpandChatCard";
 import EmptySdwBCards from "@/components/ui/EmptySdwBCards";
 
 import { VerifyStatus } from "@/types/mentee";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import MentorWaitingListBox from "./_ui/MentorWaitingListBox";
 
 const DEFAULT_VISIBLE_ITEMS = 2;
@@ -13,8 +14,66 @@ const DEFAULT_VISIBLE_ITEMS = 2;
 const WaitingContent = () => {
   const { data: approveList = [] } = useGetApplyMentoringList(VerifyStatus.APPROVED);
   const { data: pendingList = [] } = useGetApplyMentoringList(VerifyStatus.PENDING);
+  const isDesktop = useIsDesktopViewport();
   const totalLength = approveList.length + pendingList.length;
 
+  if (isDesktop === null) return null;
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">Mentor</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">멘토링 신청 목록</h1>
+          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+            수락된 멘토링과 아직 대기 중인 신청을 한 화면에서 확인하세요.
+          </p>
+        </header>
+
+        <div className="grid items-start gap-8 xl:grid-cols-2">
+          <section className="rounded-lg border border-k-100 bg-white p-6">
+            <DesktopListHeader title="수락 완료" count={approveList.length} />
+            <div className="mt-5 grid gap-3">
+              {approveList.length === 0 ? (
+                <EmptySdwBCards message="신규 매칭된 멘토가 없어요." />
+              ) : (
+                approveList.map((item) => (
+                  <MentorExpandChatCard
+                    key={item.mentoringId}
+                    isChecked={item.isChecked}
+                    mentoringId={item.mentoringId}
+                    profileImageUrl={item.profileImageUrl}
+                    nickname={item.nickname}
+                    message="멘토가 멘티 신청을 수락했어요."
+                    date={item.createdAt}
+                  />
+                ))
+              )}
+            </div>
+          </section>
+
+          <section className="rounded-lg border border-k-100 bg-white p-6">
+            <DesktopListHeader title="수락 대기중" count={pendingList.length} />
+            <div className="mt-5 grid gap-3">
+              {pendingList.length === 0 ? (
+                <EmptySdwBCards message="멘토 신청 내역이 없습니다." />
+              ) : (
+                pendingList.map((item) => (
+                  <MentorChatCard
+                    key={item.mentoringId}
+                    profileImageUrl={item.profileImageUrl}
+                    nickname={item.nickname}
+                    description="멘토에게 멘티 신청을 보냈어요."
+                  />
+                ))
+              )}
+            </div>
+          </section>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-full w-full flex-col">
       <div className="mb-3 mt-5 flex justify-between px-5">
@@ -78,4 +137,12 @@ const WaitingContent = () => {
     </div>
   );
 };
+
+const DesktopListHeader = ({ title, count }: { title: string; count: number }) => (
+  <div className="flex items-center justify-between">
+    <h2 className="text-k-900 typo-bold-4">{title}</h2>
+    <span className="rounded-full bg-primary-1 px-2.5 py-1 text-k-0 typo-medium-3">{count}</span>
+  </div>
+);
+
 export default WaitingContent;

From 614f150ecfaa2fecdf9afc1eeecd431f3cf7ae5f Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 09:02:52 +0900
Subject: [PATCH 07/20] =?UTF-8?q?feat:=20=EC=9D=B8=EC=A6=9D=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20=EB=B7=B0=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/login/LoginContent.tsx       | 207 ++++++++++-------
 .../web/src/app/login/apple/callback/page.tsx |   2 +-
 .../web/src/app/login/kakao/callback/page.tsx |   2 +-
 apps/web/src/app/login/page.tsx               |   2 +-
 .../src/app/sign-up/email/EmailSignUpForm.tsx | 219 +++++++++++-------
 apps/web/src/app/sign-up/email/page.tsx       |   2 +-
 apps/web/src/app/sign-up/page.tsx             |   2 +-
 apps/web/src/app/terms/page.tsx               |  75 ++++--
 .../login/signup/SignupPolicyScreen.tsx       |  18 +-
 .../login/signup/SignupPrepareScreen.tsx      |  18 +-
 .../login/signup/SignupProfileScreen.tsx      |   9 +-
 .../login/signup/SignupRegionScreen.tsx       |  29 ++-
 .../components/login/signup/SignupSurvey.tsx  |  46 +++-
 13 files changed, 419 insertions(+), 212 deletions(-)

diff --git a/apps/web/src/app/login/LoginContent.tsx b/apps/web/src/app/login/LoginContent.tsx
index d3a763974..4bc35d1af 100644
--- a/apps/web/src/app/login/LoginContent.tsx
+++ b/apps/web/src/app/login/LoginContent.tsx
@@ -14,9 +14,9 @@ import {
   getSafeCommunityRedirectPath,
 } from "@/utils/authRedirect";
 import { appleLogin, kakaoLogin } from "@/utils/authUtils";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import useInputHandler from "./_hooks/useInputHandler";
 
-// Zod 스키마 정의
 const loginSchema = z.object({
   email: z.string().min(1, "이메일을 입력해주세요.").email("올바른 이메일 형식을 입력해주세요."),
   password: z.string().min(1, "비밀번호를 입력해주세요.").min(6, "비밀번호는 최소 6자 이상이어야 합니다."),
@@ -31,6 +31,7 @@ const LoginContent = () => {
 
   const { mutate: postEmailAuth, isPending } = usePostEmailAuth({ redirectPath });
   const { showPasswordField, handleEmailChange } = useInputHandler();
+  const isDesktop = useIsDesktopViewport();
 
   const {
     register,
@@ -63,6 +64,131 @@ const LoginContent = () => {
     router.push("/");
   };
 
+  if (isDesktop === null) return null;
+
+  const fieldWrapperClassName = isDesktop ? "" : "mx-5";
+
+  const loginForm = (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col gap-3">
+        <div className={fieldWrapperClassName}>
+          <input
+            type="email"
+            placeholder="이메일"
+            className="w-full rounded-lg border border-k-100 px-5 py-3 font-serif text-k-400 typo-regular-4 focus:outline-none"
+            {...register("email", {
+              onChange: handleEmailChange,
+            })}
+            onKeyDown={handleKeyDown}
+          />
+          {errors.email && <p className="mt-1 text-red-500 typo-regular-4">{errors.email.message}</p>}
+        </div>
+
+        <div
+          className={`${fieldWrapperClassName} overflow-hidden transition-all duration-500 ease-in-out ${
+            showPasswordField ? "max-h-20 opacity-100" : "max-h-0 opacity-0"
+          }`}
+        >
+          <input
+            type="password"
+            placeholder="비밀번호"
+            className="w-full rounded-lg border border-k-100 px-5 py-3 font-serif text-k-400 typo-regular-4 focus:outline-none"
+            {...register("password")}
+            onKeyDown={handleKeyDown}
+          />
+          {errors.password && <p className="mt-1 text-red-500 typo-regular-4">{errors.password.message}</p>}
+        </div>
+
+        <div className={`${fieldWrapperClassName} transition active:scale-95`}>
+          <button
+            type="submit"
+            disabled={isPending}
+            className="flex h-11 w-full items-center justify-center rounded-lg bg-primary p-2.5 font-serif text-white typo-medium-1 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isPending ? "로그인 중..." : "로그인"}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+
+  const socialButtons = (
+    <div className="mt-3">
+      <div className="text-center font-serif text-k-300 typo-medium-1">or</div>
+      <div className="mt-3 flex flex-col gap-3">
+        <div className={`${fieldWrapperClassName} transition active:scale-95`}>
+          <button
+            onClick={() => kakaoLogin(redirectPath)}
+            type="button"
+            className="flex h-11 w-full items-center justify-center gap-[5px] rounded-lg bg-accent-custom-yellow p-2.5"
+          >
+            <IconKakaoLogo />
+            <span className="text-black">카카오로 시작하기</span>
+          </button>
+        </div>
+        <div className={`${fieldWrapperClassName} transition active:scale-95`}>
+          <button
+            onClick={() => router.push(buildSignUpEmailPathWithRedirect(redirectPath))}
+            type="button"
+            className="flex h-11 w-full items-center justify-center gap-[5px] rounded-lg bg-secondary p-2.5"
+          >
+            <IconEmailIcon />
+            <span className="text-white">이메일로 시작하기</span>
+          </button>
+        </div>
+        <div className={`${fieldWrapperClassName} transition active:scale-95`}>
+          <button
+            onClick={() => appleLogin(redirectPath)}
+            type="button"
+            className="flex h-11 w-full items-center justify-center gap-[5px] rounded-lg bg-black p-2.5"
+          >
+            <IconAppleLogo />
+            <span className="text-white">애플로 시작하기</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <div className="grid min-h-[calc(100vh-64px)] items-center gap-8 xl:grid-cols-[minmax(360px,440px)_minmax(420px,520px)] xl:justify-center">
+          <aside className="rounded-lg border border-k-100 bg-white p-8">
+            <Link href="/" aria-label="홈으로 이동">
+              <IconSolidConnectionFullBlackLogo />
+            </Link>
+            <p className="mt-10 text-primary typo-sb-9">Solid Connection</p>
+            <h1 className="mt-3 text-k-900 typo-bold-1">교환학생 여정을 이어가세요</h1>
+            <p className="mt-4 text-k-500 typo-medium-2">
+              학교 탐색부터 지원 준비, 멘토링과 커뮤니티까지 한 계정에서 관리할 수 있습니다.
+            </p>
+            <div className="mt-8 grid gap-3">
+              {["관심 학교 저장", "지원 정보 관리", "멘토링 채팅"].map((item) => (
+                <div key={item} className="rounded-lg bg-k-50 px-4 py-3 text-k-700 typo-medium-2">
+                  {item}
+                </div>
+              ))}
+            </div>
+          </aside>
+
+          <section className="rounded-lg border border-k-100 bg-white p-8">
+            <div>
+              <p className="text-primary typo-sb-9">Login</p>
+              <h2 className="mt-2 font-serif text-k-900 typo-bold-1">로그인</h2>
+              <p className="mt-2 text-k-500 typo-medium-2">교환학생을 위한 여정을 지금 시작하세요.</p>
+            </div>
+
+            <div className="mt-8">
+              {loginForm}
+              {socialButtons}
+            </div>
+          </section>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div>
       <div className="-mx-5 mt-[-56px] flex h-[77px] items-center gap-3 border-b border-bg-200 px-5">
@@ -87,83 +213,8 @@ const LoginContent = () => {
         </div>
       </div>
 
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="flex flex-col gap-3">
-          <div className="mx-5">
-            <input
-              type="email"
-              placeholder="이메일"
-              className="w-full rounded-lg border border-k-100 px-5 py-3 font-serif text-k-400 typo-regular-4 focus:outline-none"
-              {...register("email", {
-                onChange: handleEmailChange,
-              })}
-              onKeyDown={handleKeyDown}
-            />
-            {errors.email && <p className="mt-1 text-red-500 typo-regular-4">{errors.email.message}</p>}
-          </div>
-
-          <div
-            className={`mx-5 overflow-hidden transition-all duration-500 ease-in-out ${
-              showPasswordField ? "max-h-20 opacity-100" : "max-h-0 opacity-0"
-            }`}
-          >
-            <input
-              type="password"
-              placeholder="비밀번호"
-              className="w-full rounded-lg border border-k-100 px-5 py-3 font-serif text-k-400 typo-regular-4 focus:outline-none"
-              {...register("password")}
-              onKeyDown={handleKeyDown}
-            />
-            {errors.password && <p className="mt-1 text-red-500 typo-regular-4">{errors.password.message}</p>}
-          </div>
-
-          <div className="mx-5 transition active:scale-95">
-            <button
-              type="submit"
-              disabled={isPending}
-              className="flex h-11 w-full items-center justify-center rounded-lg bg-primary p-2.5 font-serif text-white typo-medium-1 disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              {isPending ? "로그인 중..." : "로그인"}
-            </button>
-          </div>
-        </div>
-      </form>
-
-      <div className="mt-3">
-        <div className="text-center font-serif text-k-300 typo-medium-1">or</div>
-        <div className="mt-3 flex flex-col gap-3">
-          <div className="mx-5 transition active:scale-95">
-            <button
-              onClick={() => kakaoLogin(redirectPath)}
-              type="button"
-              className="flex h-11 w-full items-center justify-center gap-[5px] rounded-lg bg-accent-custom-yellow p-2.5"
-            >
-              <IconKakaoLogo />
-              <span className="text-black">카카오로 시작하기</span>
-            </button>
-          </div>
-          <div className="mx-5 transition active:scale-95">
-            <button
-              onClick={() => router.push(buildSignUpEmailPathWithRedirect(redirectPath))}
-              type="button"
-              className="flex h-11 w-full items-center justify-center gap-[5px] rounded-lg bg-secondary p-2.5"
-            >
-              <IconEmailIcon />
-              <span className="text-white">이메일로 시작하기</span>
-            </button>
-          </div>
-          <div className="mx-5 transition active:scale-95">
-            <button
-              onClick={() => appleLogin(redirectPath)}
-              type="button"
-              className="flex h-11 w-full items-center justify-center gap-[5px] rounded-lg bg-black p-2.5"
-            >
-              <IconAppleLogo />
-              <span className="text-white">애플로 시작하기</span>
-            </button>
-          </div>
-        </div>
-      </div>
+      {loginForm}
+      {socialButtons}
     </div>
   );
 };
diff --git a/apps/web/src/app/login/apple/callback/page.tsx b/apps/web/src/app/login/apple/callback/page.tsx
index 6337d6a07..aa40d8816 100644
--- a/apps/web/src/app/login/apple/callback/page.tsx
+++ b/apps/web/src/app/login/apple/callback/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 };
 
 const Page = () => (
-  <div className="w-full px-5">
+  <div className="w-full px-5 md:px-0">
     <Suspense fallback={<CloudSpinnerPage />}>
       <AppleLoginCallbackPage />
     </Suspense>
diff --git a/apps/web/src/app/login/kakao/callback/page.tsx b/apps/web/src/app/login/kakao/callback/page.tsx
index 300cc3c32..7d45b38ac 100644
--- a/apps/web/src/app/login/kakao/callback/page.tsx
+++ b/apps/web/src/app/login/kakao/callback/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 };
 
 const Page = () => (
-  <div className="w-full px-5">
+  <div className="w-full px-5 md:px-0">
     <Suspense fallback={<CloudSpinnerPage />}>
       <KakaoLoginCallbackPage />
     </Suspense>
diff --git a/apps/web/src/app/login/page.tsx b/apps/web/src/app/login/page.tsx
index cb0d7b49b..a3b1701dc 100644
--- a/apps/web/src/app/login/page.tsx
+++ b/apps/web/src/app/login/page.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 const LoginPage = () => {
   return (
-    <div className="w-full px-5">
+    <div className="w-full px-5 md:px-0">
       <KakaoScriptLoader />
       <Suspense fallback={<CloudSpinnerPage />}>
         <LoginContent />
diff --git a/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx b/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx
index b53fae134..feecb3e99 100644
--- a/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx
+++ b/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx
@@ -10,6 +10,7 @@ import { Progress } from "@/components/ui/Progress";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import { IconCheckBlue, IconExpRed, IconEyeOff, IconEyeOn } from "@/public/svgs/ui";
 import { AUTH_REDIRECT_PARAM, buildSignUpPath, getSafeCommunityRedirectPath } from "@/utils/authRedirect";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
 const EmailSignUpForm = () => {
   const router = useRouter();
@@ -22,6 +23,7 @@ const EmailSignUpForm = () => {
   const [passwordConfirm, setPasswordConfirm] = useState<string>("");
   const [passwordsVisible, setPasswordsVisible] = useState<boolean>(false);
   const [passwordMatch, setPasswordMatch] = useState<boolean | null>(null);
+  const isDesktop = useIsDesktopViewport();
 
   const emailSignUpMutation = usePostEmailSignUp();
 
@@ -78,6 +80,135 @@ const EmailSignUpForm = () => {
     );
   };
 
+  if (isDesktop === null) return null;
+
+  const formFields = (
+    <div className="mt-10 flex flex-col gap-5">
+      <div>
+        <Label htmlFor="email" className="text-k-900">
+          이메일
+        </Label>
+        <Input
+          id="email"
+          variant="gray"
+          placeholder="ID@example.com"
+          type="email"
+          autoComplete="email"
+          value={email}
+          onChange={handleEmailChange}
+        />
+      </div>
+      {showPassword && (
+        <>
+          <div>
+            <Label htmlFor="password" className="text-k-900">
+              비밀번호
+            </Label>
+            <div className="relative">
+              <Input
+                id="password"
+                variant="gray"
+                placeholder="비밀번호를 입력해주세요"
+                type={passwordsVisible ? "text" : "password"}
+                autoComplete="new-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <button
+                type="button"
+                onClick={togglePasswordVisibility}
+                className="absolute right-3.5 top-1/2 -translate-y-1/2"
+                aria-label={passwordsVisible ? "비밀번호 숨기기" : "비밀번호 보기"}
+              >
+                {passwordsVisible ? <IconEyeOn /> : <IconEyeOff />}
+              </button>
+            </div>
+          </div>
+          <div>
+            <Label htmlFor="passwordConfirm" className="text-k-900">
+              비밀번호 확인
+            </Label>
+            <div className="relative">
+              <Input
+                id="passwordConfirm"
+                variant="gray"
+                placeholder="비밀번호를 다시 입력해주세요"
+                type={passwordsVisible ? "text" : "password"}
+                autoComplete="new-password"
+                value={passwordConfirm}
+                onChange={(e) => setPasswordConfirm(e.target.value)}
+              />
+              <button
+                type="button"
+                onClick={togglePasswordVisibility}
+                className="absolute right-3.5 top-1/2 -translate-y-1/2"
+                aria-label={passwordsVisible ? "비밀번호 숨기기" : "비밀번호 보기"}
+              >
+                {passwordsVisible ? <IconEyeOn /> : <IconEyeOff />}
+              </button>
+            </div>
+
+            {passwordConfirm !== "" && (
+              <div className="mt-1">
+                {passwordMatch ? (
+                  <span className="flex items-center gap-1">
+                    <IconCheckBlue />
+                    <p className="text-sub-a typo-regular-4">입력한 비밀번호와 동일합니다.</p>
+                  </span>
+                ) : (
+                  <span className="flex items-center gap-1">
+                    <IconExpRed />
+                    <p className="text-accent-custom-red typo-regular-4">입력한 비밀번호와 동일하지 않습니다.</p>
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  const submitButton = (
+    <BlockBtn onClick={emailSignUp} disabled={!email || !password || !passwordConfirm || !passwordMatch}>
+      다음
+    </BlockBtn>
+  );
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <div className="grid min-h-[calc(100vh-64px)] items-center gap-8 xl:grid-cols-[minmax(420px,520px)_minmax(300px,380px)] xl:justify-center">
+          <section className="rounded-lg border border-k-100 bg-white p-8">
+            <p className="text-primary typo-sb-9">Sign up</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">이메일로 시작하기</h1>
+            <p className="mt-2 text-k-500 typo-medium-2">이메일과 비밀번호를 입력해 솔커 계정을 만들어보세요.</p>
+
+            <Progress value={currentStep * 50} showPercentage={true} className="mt-8" />
+            {formFields}
+            <div className="mt-8">{submitButton}</div>
+          </section>
+
+          <aside className="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">
+              {["이메일 입력", "비밀번호 설정", "프로필 완성"].map((item, index) => (
+                <div
+                  key={item}
+                  className={`rounded-lg px-4 py-3 typo-medium-2 ${
+                    currentStep >= index ? "bg-primary-100 text-primary" : "bg-k-50 text-k-500"
+                  }`}
+                >
+                  {item}
+                </div>
+              ))}
+            </div>
+          </aside>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <div className="px-5 pt-2.5">
@@ -90,95 +221,11 @@ const EmailSignUpForm = () => {
           </span>
         </div>
 
-        <div className="mt-10 flex flex-col gap-5">
-          <div>
-            <Label htmlFor="email" className="text-k-900">
-              이메일
-            </Label>
-            <Input
-              variant="gray"
-              placeholder="ID@example.com"
-              type="email"
-              autoComplete="email"
-              value={email}
-              onChange={handleEmailChange}
-            />
-          </div>
-          {showPassword && (
-            <>
-              <div>
-                <Label htmlFor="password" className="text-k-900">
-                  비밀번호
-                </Label>
-                <div className="relative">
-                  <Input
-                    variant="gray"
-                    placeholder="비밀번호를 입력해주세요"
-                    type={passwordsVisible ? "text" : "password"}
-                    autoComplete="new-password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                  <button
-                    type="button"
-                    onClick={togglePasswordVisibility}
-                    className="absolute right-3.5 top-1/2 -translate-y-1/2"
-                  >
-                    {passwordsVisible ? <IconEyeOn /> : <IconEyeOff />}
-                  </button>
-                </div>
-              </div>
-              {/* TODO: 이메일 주소 구조 검증 */}
-              <div>
-                <Label htmlFor="passwordConfirm" className="text-k-900">
-                  비밀번호 확인
-                </Label>
-                <div className="relative">
-                  <Input
-                    variant="gray"
-                    placeholder="비밀번호를 다시 입력해주세요"
-                    type={passwordsVisible ? "text" : "password"}
-                    autoComplete="new-password"
-                    value={passwordConfirm}
-                    onChange={(e) => setPasswordConfirm(e.target.value)}
-                  />
-                  <button
-                    type="button"
-                    onClick={togglePasswordVisibility}
-                    className="absolute right-3.5 top-1/2 -translate-y-1/2"
-                  >
-                    {passwordsVisible ? <IconEyeOn /> : <IconEyeOff />}
-                  </button>
-                </div>
-                {/* TODO: 비밀번호 요건 검증 */}
-
-                {passwordConfirm !== "" && (
-                  <div className="mt-1">
-                    {passwordMatch ? (
-                      <span className="flex items-center gap-1">
-                        <IconCheckBlue />
-                        <p className="text-sub-a typo-regular-4">입력한 비밀번호와 동일합니다.</p>
-                      </span>
-                    ) : (
-                      <span className="flex items-center gap-1">
-                        <IconExpRed />
-                        <p className="text-accent-custom-red typo-regular-4">입력한 비밀번호와 동일하지 않습니다.</p>
-                      </span>
-                    )}
-                  </div>
-                )}
-              </div>
-            </>
-          )}
-        </div>
+        {formFields}
       </div>
 
       <div className="fixed bottom-14 w-full max-w-app bg-white md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:max-w-none">
-        <div className="mb-[37px] px-5">
-          <BlockBtn onClick={emailSignUp} disabled={!email || !password || !passwordConfirm || !passwordMatch}>
-            다음
-          </BlockBtn>
-        </div>
+        <div className="mb-[37px] px-5">{submitButton}</div>
       </div>
     </>
   );
diff --git a/apps/web/src/app/sign-up/email/page.tsx b/apps/web/src/app/sign-up/email/page.tsx
index 708a19d84..1dc3091ac 100644
--- a/apps/web/src/app/sign-up/email/page.tsx
+++ b/apps/web/src/app/sign-up/email/page.tsx
@@ -16,7 +16,7 @@ const EmailSignUpPage = () => {
   return (
     <>
       <TopDetailNavigation title="이메일로 시작하기" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <Suspense fallback={<CloudSpinnerPage />}>
           <EmailSignUpForm />
         </Suspense>
diff --git a/apps/web/src/app/sign-up/page.tsx b/apps/web/src/app/sign-up/page.tsx
index aa7295f01..820669438 100644
--- a/apps/web/src/app/sign-up/page.tsx
+++ b/apps/web/src/app/sign-up/page.tsx
@@ -15,7 +15,7 @@ const SignUpPage = () => {
   return (
     <>
       <TopDetailNavigation title="회원가입" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <Suspense fallback={<CloudSpinnerPage />}>
           <SignupSurvey baseNickname="" baseEmail="" baseProfileImageUrl="" />
         </Suspense>
diff --git a/apps/web/src/app/terms/page.tsx b/apps/web/src/app/terms/page.tsx
index f8b99ed24..1472699ca 100644
--- a/apps/web/src/app/terms/page.tsx
+++ b/apps/web/src/app/terms/page.tsx
@@ -141,26 +141,65 @@ const TermsPage = () => {
   return (
     <>
       <TopDetailNavigation title="이용약관" />
-      <div className="w-full">
-        <div className="px-5 py-6">
-          <p className="mb-6 text-k-800 typo-regular-2">시행일: 2026년 2월 21일</p>
-
-          <div className="space-y-7">
-            {TERMS_SECTIONS.map((section) => (
-              <section key={section.title}>
-                <p className="pb-2 text-k-902 font-normal">{section.title}</p>
-                <ol className="ml-4 list-decimal space-y-2 text-k-900 typo-regular-2">
-                  {section.items.map((item) => (
-                    <li key={item}>{item}</li>
-                  ))}
-                </ol>
-              </section>
-            ))}
-          </div>
-        </div>
-      </div>
+      <TermsMobileView />
+      <TermsDesktopView />
     </>
   );
 };
 
+const TermsMobileView = () => (
+  <div className="w-full md:hidden">
+    <div className="px-5 py-6">
+      <p className="mb-6 text-k-800 typo-regular-2">시행일: 2026년 2월 21일</p>
+      <TermsSectionList />
+    </div>
+  </div>
+);
+
+const TermsDesktopView = () => (
+  <div className="hidden min-h-screen bg-k-50 px-8 py-8 md:block lg:px-10">
+    <header className="mb-8">
+      <p className="text-primary typo-sb-9">Terms</p>
+      <h1 className="mt-2 text-k-900 typo-bold-1">이용약관</h1>
+      <p className="mt-2 text-k-500 typo-medium-2">시행일: 2026년 2월 21일</p>
+    </header>
+
+    <div className="grid items-start gap-8 xl:grid-cols-[minmax(240px,300px)_minmax(0,860px)]">
+      <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
+        <h2 className="text-k-900 typo-bold-4">목차</h2>
+        <nav className="mt-5 grid gap-2">
+          {TERMS_SECTIONS.map((section) => (
+            <a
+              key={section.title}
+              href={`#${section.title}`}
+              className="rounded-lg bg-k-50 px-4 py-3 text-k-600 transition-colors hover:bg-k-100 typo-medium-3"
+            >
+              {section.title}
+            </a>
+          ))}
+        </nav>
+      </aside>
+
+      <article className="rounded-lg border border-k-100 bg-white p-8">
+        <TermsSectionList withAnchors />
+      </article>
+    </div>
+  </div>
+);
+
+const TermsSectionList = ({ withAnchors = false }: { withAnchors?: boolean }) => (
+  <div className="space-y-7">
+    {TERMS_SECTIONS.map((section) => (
+      <section key={section.title} id={withAnchors ? section.title : undefined} className="scroll-mt-8">
+        <p className="pb-2 text-k-902 font-normal">{section.title}</p>
+        <ol className="ml-4 list-decimal space-y-2 text-k-900 typo-regular-2">
+          {section.items.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ol>
+      </section>
+    ))}
+  </div>
+);
+
 export default TermsPage;
diff --git a/apps/web/src/components/login/signup/SignupPolicyScreen.tsx b/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
index 1a61e4b2d..82d4367bd 100644
--- a/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
@@ -8,16 +8,18 @@ import { Checkbox } from "@/components/ui/Checkbox";
 
 interface SignupPolicyScreenProps {
   toNextStage: () => void;
+  variant?: "mobile" | "desktop";
 }
 
-const SignupPolicyScreen = ({ toNextStage }: SignupPolicyScreenProps) => {
+const SignupPolicyScreen = ({ toNextStage, variant = "mobile" }: SignupPolicyScreenProps) => {
   const [isChecked, setIsChecked] = useState(false);
+  const isDesktop = variant === "desktop";
 
   return (
-    <div className="mt-[-56px]">
-      <div className="border-b border-[#bgbgbg]">
-        <div className="h-[375px] pl-5">
-          <div className="mt-[149px]">
+    <div className={isDesktop ? "" : "mt-[-56px]"}>
+      <div className={isDesktop ? "rounded-lg bg-k-50 p-6" : "border-b border-[#bgbgbg]"}>
+        <div className={isDesktop ? "" : "h-[375px] pl-5"}>
+          <div className={isDesktop ? "" : "mt-[149px]"}>
             <svg xmlns="http://www.w3.org/2000/svg" width="46" height="30" viewBox="0 0 46 30" fill="none">
               <path
                 d="M35.033 7.24056C34.8945 7.24056 34.7535 7.24056 34.6125 7.2493C33.282 4.95166 31.3474 3.06247 29.0188 1.78689C26.6902 0.511304 24.0566 -0.101918 21.404 0.013814C18.7514 0.129546 16.1813 0.969807 13.9726 2.44335C11.764 3.91689 10.0012 5.9674 8.87585 8.37219C7.28625 8.6738 5.78364 9.3252 4.47687 10.2792C3.17009 11.2332 2.09188 12.4659 1.32032 13.8881C0.548772 15.3102 0.103204 16.8862 0.0158961 18.5018C-0.0714116 20.1174 0.201727 21.7322 0.815527 23.2292C1.42933 24.7262 2.36842 26.0679 3.56477 27.1572C4.76113 28.2465 6.18479 29.056 7.73262 29.5272C9.28046 29.9983 10.9137 30.1193 12.5141 29.8814C14.1144 29.6434 15.6418 29.0524 16.9856 28.1513C18.6002 28.7508 20.3089 29.0571 22.0311 29.0559C22.3031 29.0559 22.5864 29.0471 22.8771 29.0309H34.3231C34.5863 29.0471 34.8109 29.0559 35.028 29.0559C35.2451 29.0559 35.4697 29.0471 35.7329 29.0309H36.8795V28.8987C39.5687 28.4316 41.9851 26.9734 43.6518 24.812C45.3186 22.6506 46.1145 19.9429 45.8827 17.2233C45.6508 14.5037 44.4079 11.9699 42.3994 10.1218C40.3908 8.2737 37.7624 7.24567 35.033 7.24056ZM34.1322 20.3073C33.9685 19.7219 33.6931 19.1736 33.3212 18.6928C32.8446 18.0952 32.2357 17.6947 31.4597 17.419C32.1902 17.1835 32.8374 16.7426 33.3237 16.1488C33.6963 15.6657 33.9717 15.1149 34.1347 14.5269C34.2977 15.1146 34.5727 15.6653 34.9444 16.1488C35.4298 16.7436 36.0766 17.1855 36.8072 17.4214C36.0299 17.6997 35.421 18.0977 34.9444 18.6953C34.5726 19.1764 34.2969 19.7245 34.1322 20.3098V20.3073ZM10.9257 10.4882C12.6691 10.4866 14.3718 11.0147 15.8083 12.0025C17.2448 12.9904 18.3472 14.3914 18.9696 16.0199C19.5919 17.6484 19.7048 19.4276 19.2932 21.1216C18.8817 22.8157 17.9651 24.3448 16.665 25.5063C13.9783 24.1939 11.866 21.9419 10.7283 19.1767C9.59061 16.4115 9.50637 13.3251 10.4916 10.5019C10.6363 10.4945 10.7785 10.4907 10.9208 10.4907L10.9257 10.4882ZM10.9257 27.7059C8.90689 27.7046 6.95269 26.9938 5.40475 25.6978C3.85681 24.4018 2.81359 22.6029 2.45744 20.6157C2.1013 18.6285 2.45488 16.5794 3.45638 14.8264C4.45789 13.0735 6.0436 11.7283 7.93636 11.026C7.19007 14.0278 7.4215 17.1896 8.59696 20.0508C9.77242 22.912 11.8305 25.3233 14.4716 26.9336C13.3567 27.4412 12.1458 27.7033 10.9208 27.7021L10.9257 27.7059ZM22.8184 26.7365H22.7835C22.534 26.7514 22.2844 26.7589 22.0411 26.7589C21.0285 26.759 20.0197 26.6333 19.038 26.3846C20.4105 24.8586 21.3244 22.9762 21.6747 20.9539C22.025 18.9316 21.7974 16.8514 21.0182 14.9527C20.239 13.0539 18.9397 11.4137 17.2698 10.2204C15.5998 9.0272 13.6271 8.32948 11.5783 8.2075C12.7061 6.34344 14.3116 4.81459 16.2285 3.77914C18.1454 2.74368 20.3042 2.23924 22.4815 2.31799C24.6587 2.39674 26.7754 3.05583 28.6126 4.22706C30.4497 5.39829 31.9405 7.03913 32.9307 8.9798L33.2925 9.68722H33.3062C33.1378 12.714 32.8908 14.3634 32.1833 15.2455C31.3736 16.2611 29.7504 16.4695 26.2383 16.7003V18.1476C29.7504 18.3797 31.3736 18.5868 32.1833 19.6024C32.9931 20.6179 33.2014 22.6878 33.3798 26.739L22.8184 26.7365ZM35.6556 26.7365H35.6119C35.3923 26.7514 35.2089 26.7577 35.038 26.7577H34.8845C35.0629 22.6916 35.2588 20.6267 36.081 19.5999C36.9032 18.573 38.5152 18.3772 42.0261 18.1451V16.6978C38.5152 16.467 36.8907 16.2586 36.081 15.243C35.3661 14.3485 35.1241 12.6616 34.9581 9.54748H35.0417C37.2574 9.56811 39.3799 10.4423 40.9674 11.9881C42.5549 13.534 43.4853 15.6324 43.5648 17.8468C43.6444 20.0612 42.8671 22.221 41.3946 23.8768C39.9221 25.5326 37.8678 26.5569 35.6593 26.7365H35.6556Z"
@@ -35,7 +37,9 @@ const SignupPolicyScreen = ({ toNextStage }: SignupPolicyScreenProps) => {
         </div>
       </div>
 
-      <div className="flex flex-col py-5 pl-4 pr-5">
+      <div
+        className={isDesktop ? "mt-5 flex flex-col rounded-lg border border-k-100 p-4" : "flex flex-col py-5 pl-4 pr-5"}
+      >
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Checkbox className="" checked={isChecked} onClick={() => setIsChecked(!isChecked)} />
@@ -57,7 +61,7 @@ const SignupPolicyScreen = ({ toNextStage }: SignupPolicyScreenProps) => {
         </div>
       </div>
 
-      <div className="mt-10 px-5 pb-7">
+      <div className={isDesktop ? "mt-8" : "mt-10 px-5 pb-7"}>
         <BlockBtn className={isChecked ? "bg-primary" : "bg-bg-800"} disabled={!isChecked} onClick={toNextStage}>
           다음
         </BlockBtn>
diff --git a/apps/web/src/components/login/signup/SignupPrepareScreen.tsx b/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
index 95779283d..522cf145b 100644
--- a/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
@@ -11,9 +11,17 @@ type SignupPrepareScreenProps = {
   preparation: PreparationStatus | null;
   setPreparation: Dispatch<SetStateAction<PreparationStatus | null>>;
   toNextStage: () => void;
+  variant?: "mobile" | "desktop";
 };
 
-const SignupPrepareScreen = ({ preparation, setPreparation, toNextStage }: SignupPrepareScreenProps) => {
+const SignupPrepareScreen = ({
+  preparation,
+  setPreparation,
+  toNextStage,
+  variant = "mobile",
+}: SignupPrepareScreenProps) => {
+  const isDesktop = variant === "desktop";
+
   const submit = () => {
     if (!preparation) {
       showIconToast("logo", "준비 단계를 선택해주세요.");
@@ -24,8 +32,8 @@ const SignupPrepareScreen = ({ preparation, setPreparation, toNextStage }: Signu
 
   return (
     <div>
-      <div className="px-5">
-        <div className="mt-5">
+      <div className={isDesktop ? "" : "px-5"}>
+        <div className={isDesktop ? "" : "mt-5"}>
           <span className="text-k-900 typo-bold-1">
             현재 나의
             <span className="text-primary"> 준비 단계</span>를
@@ -35,7 +43,7 @@ const SignupPrepareScreen = ({ preparation, setPreparation, toNextStage }: Signu
         </div>
 
         <div className="mt-10">
-          <div className="flex flex-col gap-5">
+          <div className={isDesktop ? "grid gap-4" : "flex flex-col gap-5"}>
             <PrepareChoiceButton
               status={PreparationStatusEnum.CONSIDERING}
               description="교환학생 지원을 고민 중인가요?"
@@ -66,7 +74,7 @@ const SignupPrepareScreen = ({ preparation, setPreparation, toNextStage }: Signu
         </div>
       </div>
 
-      <div className="mt-10 px-5 pb-7">
+      <div className={isDesktop ? "mt-8" : "mt-10 px-5 pb-7"}>
         <BlockBtn disabled={!preparation} onClick={submit}>
           다음
         </BlockBtn>
diff --git a/apps/web/src/components/login/signup/SignupProfileScreen.tsx b/apps/web/src/components/login/signup/SignupProfileScreen.tsx
index 78ad94496..a78e8b1b3 100644
--- a/apps/web/src/components/login/signup/SignupProfileScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupProfileScreen.tsx
@@ -13,6 +13,7 @@ type SignupProfileScreenProps = {
   defaultProfileImageUrl: string;
   profileImageFile: File | null;
   setProfileImageFile: Dispatch<SetStateAction<File | null>>;
+  variant?: "mobile" | "desktop";
 };
 
 const SignupProfileScreen = ({
@@ -22,9 +23,11 @@ const SignupProfileScreen = ({
   defaultProfileImageUrl,
   profileImageFile,
   setProfileImageFile,
+  variant = "mobile",
 }: SignupProfileScreenProps) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploadedProfileImageFileView, setUploadedProfileImageFileView] = useState<string | null>(null);
+  const isDesktop = variant === "desktop";
 
   const submit = () => {
     if (!nickname) {
@@ -64,8 +67,8 @@ const SignupProfileScreen = ({
 
   return (
     <div>
-      <div className="px-5">
-        <div className="mt-5">
+      <div className={isDesktop ? "" : "px-5"}>
+        <div className={isDesktop ? "" : "mt-5"}>
           <span className="text-k-900 typo-bold-1">
             닉네임을
             <br />
@@ -104,7 +107,7 @@ const SignupProfileScreen = ({
         </div>
       </div>
 
-      <div className="mt-10 px-5 pb-7">
+      <div className={isDesktop ? "mt-8" : "mt-10 px-5 pb-7"}>
         <BlockBtn disabled={!nickname} onClick={submit}>
           가입 완료
         </BlockBtn>
diff --git a/apps/web/src/components/login/signup/SignupRegionScreen.tsx b/apps/web/src/components/login/signup/SignupRegionScreen.tsx
index f11345e71..14d4fa312 100644
--- a/apps/web/src/components/login/signup/SignupRegionScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupRegionScreen.tsx
@@ -12,6 +12,7 @@ type SignupRegionScreenProps = {
   curCountries: string[];
   setCurCountries: Dispatch<SetStateAction<string[]>>;
   toNextStage: () => void;
+  variant?: "mobile" | "desktop";
 };
 
 const SignupRegionScreen = ({
@@ -20,7 +21,10 @@ const SignupRegionScreen = ({
   curCountries,
   setCurCountries,
   toNextStage,
+  variant = "mobile",
 }: SignupRegionScreenProps) => {
+  const isDesktop = variant === "desktop";
+
   const submit = () => {
     if (!curRegion) {
       showIconToast("logo", "권역을 선택해주세요.");
@@ -31,8 +35,8 @@ const SignupRegionScreen = ({
 
   return (
     <div>
-      <div className="px-5">
-        <div className="mt-5">
+      <div className={isDesktop ? "" : "px-5"}>
+        <div className={isDesktop ? "" : "mt-5"}>
           <span className="text-k-900 typo-bold-1">
             현재 나의
             <span className="text-primary"> 관심 국가</span>를
@@ -42,12 +46,17 @@ const SignupRegionScreen = ({
         </div>
 
         <div className="mt-10">
-          <RegionButtons curRegion={curRegion} setCurRegion={setCurRegion} />
-          <CountryButtons curCountries={curCountries} setCurCountries={setCurCountries} region={curRegion} />
+          <RegionButtons curRegion={curRegion} setCurRegion={setCurRegion} variant={variant} />
+          <CountryButtons
+            curCountries={curCountries}
+            setCurCountries={setCurCountries}
+            region={curRegion}
+            variant={variant}
+          />
         </div>
       </div>
 
-      <div className="mt-10 px-5 pb-7">
+      <div className={isDesktop ? "mt-8" : "mt-10 px-5 pb-7"}>
         <BlockBtn disabled={!curRegion} onClick={submit}>
           다음
         </BlockBtn>
@@ -61,10 +70,11 @@ export default SignupRegionScreen;
 type RegionButtonsProps = {
   curRegion: string | null;
   setCurRegion: Dispatch<SetStateAction<string | null>>;
+  variant?: "mobile" | "desktop";
 };
 
-const RegionButtons = ({ curRegion, setCurRegion }: RegionButtonsProps) => (
-  <div className="grid grid-cols-2 gap-5">
+const RegionButtons = ({ curRegion, setCurRegion, variant = "mobile" }: RegionButtonsProps) => (
+  <div className={variant === "desktop" ? "grid grid-cols-3 gap-4" : "grid grid-cols-2 gap-5"}>
     {regionList.map((region) => (
       <button
         key={region.name}
@@ -99,9 +109,10 @@ type CountryButtonsProps = {
   curCountries: string[];
   setCurCountries: Dispatch<SetStateAction<string[]>>;
   region: string | null;
+  variant?: "mobile" | "desktop";
 };
 
-const CountryButtons = ({ curCountries, setCurCountries, region }: CountryButtonsProps) => {
+const CountryButtons = ({ curCountries, setCurCountries, region, variant = "mobile" }: CountryButtonsProps) => {
   const toggleCountry = (country: string) => {
     if (curCountries.includes(country)) {
       setCurCountries(curCountries.filter((c) => c !== country));
@@ -113,7 +124,7 @@ const CountryButtons = ({ curCountries, setCurCountries, region }: CountryButton
   const countries = regionList.find((r) => r.name === region)?.countries || [];
 
   return (
-    <div className="mt-5 grid grid-cols-3 gap-4">
+    <div className={variant === "desktop" ? "mt-5 grid grid-cols-4 gap-3" : "mt-5 grid grid-cols-3 gap-4"}>
       {countries.map((country) => (
         <button
           key={country}
diff --git a/apps/web/src/components/login/signup/SignupSurvey.tsx b/apps/web/src/components/login/signup/SignupSurvey.tsx
index 91a572662..e751c3f58 100644
--- a/apps/web/src/components/login/signup/SignupSurvey.tsx
+++ b/apps/web/src/components/login/signup/SignupSurvey.tsx
@@ -15,6 +15,7 @@ import {
   getCommunityRedirectOrFallback,
   getSafeCommunityRedirectPath,
 } from "@/utils/authRedirect";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import SignupPolicyScreen from "./SignupPolicyScreen";
 import SignupPrepareScreen from "./SignupPrepareScreen";
 import SignupProfileScreen from "./SignupProfileScreen";
@@ -26,6 +27,8 @@ type SignupSurveyProps = {
   baseProfileImageUrl: string;
 };
 
+type SignupScreenVariant = "mobile" | "desktop";
+
 const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSurveyProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -33,6 +36,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
   const signUpToken = searchParams?.get("token");
   const redirectPath = getSafeCommunityRedirectPath(searchParams?.get(AUTH_REDIRECT_PARAM)) ?? undefined;
   const { setAccessToken } = useAuthStore();
+  const isDesktop = useIsDesktopViewport();
   const [curStage, setCurStage] = useState<number>(1);
   const [curProgress, setCurProgress] = useState<number>(0);
 
@@ -57,10 +61,12 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
     setCurProgress(((curStage - 1) / 3) * 100);
   }, [curStage]);
 
-  if (!signUpToken) {
+  if (!signUpToken || isDesktop === null) {
     return null;
   }
 
+  const variant: SignupScreenVariant = isDesktop ? "desktop" : "mobile";
+
   const createRegisterRequest = async (): Promise<SignUpRequest> => {
     const submitRegion: RegionKo[] = region === "아직 잘 모르겠어요" ? [] : [region as RegionKo];
 
@@ -113,6 +119,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
       case 1:
         return (
           <SignupPolicyScreen
+            variant={variant}
             toNextStage={() => {
               setCurStage(2);
             }}
@@ -121,6 +128,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
       case 2:
         return (
           <SignupPrepareScreen
+            variant={variant}
             preparation={curPreparation}
             setPreparation={setCurPreparation}
             toNextStage={() => {
@@ -131,6 +139,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
       case 3:
         return (
           <SignupRegionScreen
+            variant={variant}
             curRegion={region}
             setCurRegion={setRegion}
             curCountries={countries}
@@ -143,6 +152,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
       case 4:
         return (
           <SignupProfileScreen
+            variant={variant}
             toNextStage={submitRegisterRequest}
             nickname={nickname}
             setNickname={setNickname}
@@ -156,6 +166,40 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
     }
   };
 
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <div className="grid min-h-[calc(100vh-64px)] items-center gap-8 xl:grid-cols-[minmax(420px,560px)_minmax(300px,380px)] xl:justify-center">
+          <section className="rounded-lg border border-k-100 bg-white p-8">
+            <p className="text-primary typo-sb-9">Sign up</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">회원가입</h1>
+            <p className="mt-2 text-k-500 typo-medium-2">
+              관심 국가와 준비 단계를 입력해 맞춤형 솔커 계정을 완성하세요.
+            </p>
+            <Progress value={curProgress} className="mt-8" />
+            <div className="mt-8">{renderCurrentSurvey()}</div>
+          </section>
+
+          <aside className="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">
+              {["약관 동의", "준비 단계", "관심 국가", "프로필"].map((item, index) => (
+                <div
+                  key={item}
+                  className={`rounded-lg px-4 py-3 typo-medium-2 ${
+                    curStage >= index + 1 ? "bg-primary-100 text-primary" : "bg-k-50 text-k-500"
+                  }`}
+                >
+                  {item}
+                </div>
+              ))}
+            </div>
+          </aside>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div>
       <div className="mt-8 px-5">

From fc55e768bac1c367439f18a001aee9140ac120b5 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 09:18:58 +0900
Subject: [PATCH 08/20] =?UTF-8?q?feat:=20=EB=8C=80=ED=95=99=20=EC=A7=80?=
 =?UTF-8?q?=EC=9B=90=20=EC=84=B1=EC=A0=81=20=ED=99=94=EB=A9=B4=20=EB=8D=B0?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=ED=86=B1=20=EB=B7=B0=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../application/ScorePageContent.tsx          | 228 +++++++++++++--
 .../app/university/application/ScoreSheet.tsx |  26 +-
 .../ApplicationBottomActionBar.tsx            |  11 +-
 .../application/apply/ApplyPageContent.tsx    | 163 ++++++++---
 .../application/apply/ConfirmStep.tsx         |  21 +-
 .../university/application/apply/DoneStep.tsx |  13 +-
 .../university/application/apply/EmptyGPA.tsx |  11 +-
 .../university/application/apply/GpaStep.tsx  |  18 +-
 .../application/apply/LanguageStep.tsx        |  17 +-
 .../application/apply/UniversityStep.tsx      |  10 +-
 .../src/app/university/score/ScoreCard.tsx    |  25 +-
 .../src/app/university/score/ScoreScreen.tsx  | 266 ++++++++++++++----
 apps/web/src/app/university/score/page.tsx    |   2 +-
 .../score/submit/gpa/GpaSubmitForm.tsx        | 208 ++++++++------
 .../app/university/score/submit/gpa/page.tsx  |   2 +-
 .../language-test/LanguageTestSubmitForm.tsx  | 205 ++++++++------
 .../score/submit/language-test/page.tsx       |   2 +-
 .../src/components/score/SubmitLinkTab.tsx    |  29 +-
 .../web/src/components/score/SubmitResult.tsx |  97 ++++---
 19 files changed, 985 insertions(+), 369 deletions(-)

diff --git a/apps/web/src/app/university/application/ScorePageContent.tsx b/apps/web/src/app/university/application/ScorePageContent.tsx
index b44bd1715..399bc500d 100644
--- a/apps/web/src/app/university/application/ScorePageContent.tsx
+++ b/apps/web/src/app/university/application/ScorePageContent.tsx
@@ -1,7 +1,8 @@
 "use client";
 
+import clsx from "clsx";
 import { useRouter } from "next/navigation";
-import { type FormEvent, useEffect, useMemo, useRef, useState } from "react";
+import { type FormEvent, type ReactNode, type RefObject, useEffect, useMemo, useRef, useState } from "react";
 import { useGetApplicationsList } from "@/apis/applications";
 import ConfirmCancelModal from "@/components/modal/ConfirmCancelModal";
 import ButtonTab from "@/components/ui/ButtonTab";
@@ -10,14 +11,32 @@ import { DEFAULT_MAX_CHOICE_COUNT, getHomeUniversityById, REGIONS_KO } from "@/c
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import type { ScoreSheet as ScoreSheetType } from "@/types/application";
 import type { RegionKo } from "@/types/university";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import ApplicationSectionTitle from "./_components/ApplicationSectionTitle";
 import ScoreSearchBar from "./ScoreSearchBar";
 import ScoreSearchField from "./ScoreSearchField";
 import ScoreSheet from "./ScoreSheet";
 
+type ScorePageViewProps = {
+  searchRef: RefObject<HTMLInputElement>;
+  searchActive: boolean;
+  regionFilter: RegionKo | "";
+  preferenceChoices: string[];
+  selectedPreference: string;
+  scoreSheets: ScoreSheetType[];
+  hotKeyWords: string[];
+  onSearch: (event: FormEvent) => void;
+  onSearchClick: () => void;
+  onKeywordClick: (keyword: string) => void;
+  onPreferenceChange: (nextPreference: string) => void;
+  onMobileRegionChange: (nextRegion: string | null | ((prev: string | null) => string | null)) => void;
+  onDesktopRegionChange: (nextRegion: RegionKo | "") => void;
+};
+
 const ScorePageContent = () => {
   const router = useRouter();
   const searchRef = useRef<HTMLInputElement>(null!);
+  const isDesktop = useIsDesktopViewport();
   const homeUniversityId = useAuthStore((state) => state.homeUniversityId);
   const maxChoiceCount = getHomeUniversityById(homeUniversityId)?.maxChoiceCount ?? DEFAULT_MAX_CHOICE_COUNT;
 
@@ -39,20 +58,15 @@ const ScorePageContent = () => {
   );
 
   const filteredAndSortedData = useMemo(() => {
-    // ✨ 1. 대학 이름(koreanName)을 기준으로 중복을 제거하는 헬퍼 함수
     const uniqueByKoreanName = (data: ScoreSheetType[]) => {
-      // Map을 사용해 koreanName을 키로 하여 중복을 효율적으로 제거합니다.
       const universityMap = new Map(data.map((sheet) => [sheet.koreanName, sheet]));
-      // Map의 값들만 다시 배열로 변환하여 반환합니다.
       return Array.from(universityMap.values());
     };
 
-    // ✨ 2. API 응답 데이터를 받자마자 중복부터 제거하고 정렬합니다.
     const sortedData = scoreChoices.map((choice) =>
       uniqueByKoreanName(choice).sort((a, b) => b.applicants.length - a.applicants.length),
     );
 
-    // 4. 기존 필터링 로직을 적용합니다.
     const applyFilters = (data: ScoreSheetType[]) => {
       let result = data;
       if (regionFilter) {
@@ -67,7 +81,6 @@ const ScorePageContent = () => {
     return sortedData.map(applyFilters);
   }, [scoreChoices, regionFilter, searchValue]);
 
-  // (이하 코드는 동일)
   const handleSearch = (event: FormEvent) => {
     event.preventDefault();
     const keyword = searchRef.current?.value || "";
@@ -89,6 +102,17 @@ const ScorePageContent = () => {
     setSearchActive(true);
   };
 
+  const applyRegionFilter = (nextRegion: RegionKo | "") => {
+    if (searchRef.current) searchRef.current.value = "";
+    setSearchValue("");
+    setRegionFilter(nextRegion);
+  };
+
+  const handleMobileRegionChange = (nextRegion: string | null | ((prev: string | null) => string | null)) => {
+    const resolvedRegion = typeof nextRegion === "function" ? nextRegion(regionFilter || null) : nextRegion;
+    applyRegionFilter((resolvedRegion ?? "") as RegionKo | "");
+  };
+
   const handlePreferenceChange = (nextPreference: string) => {
     const nextIndex = preferenceChoices.indexOf(nextPreference);
     setPreferenceIndex(nextIndex >= 0 ? nextIndex : 0);
@@ -109,8 +133,55 @@ const ScorePageContent = () => {
     }
   }, [isError, isLoading, router]);
 
+  if (isDesktop === null) return null;
+
   const hotKeyWords = ["RMIT", "오스트라바", "칼스루에", "그라츠", "추오", "프라하", "보라스", "빈", "메모리얼"];
+  const viewProps = {
+    searchRef,
+    searchActive,
+    regionFilter,
+    preferenceChoices,
+    selectedPreference,
+    scoreSheets,
+    hotKeyWords,
+    onSearch: handleSearch,
+    onSearchClick: handleSearchClick,
+    onKeywordClick: handleSearchField,
+    onPreferenceChange: handlePreferenceChange,
+    onMobileRegionChange: handleMobileRegionChange,
+    onDesktopRegionChange: applyRegionFilter,
+  };
 
+  return (
+    <>
+      {isDesktop ? <ApplicationScoreDesktopView {...viewProps} /> : <ApplicationScoreMobileView {...viewProps} />}
+      <ConfirmCancelModal
+        title="학교 지원이 필요합니다"
+        isOpen={showNeedApply}
+        handleCancel={() => router.push("/")}
+        handleConfirm={() => router.push("/university/application/apply")}
+        content={"점수 공유현황을 확인하려면 지원절차를\n진행해주세요."}
+        cancelText="확인"
+        approveText="학교 지원하기"
+      />
+    </>
+  );
+};
+
+const ApplicationScoreMobileView = ({
+  searchRef,
+  searchActive,
+  regionFilter,
+  preferenceChoices,
+  selectedPreference,
+  scoreSheets,
+  hotKeyWords,
+  onSearch,
+  onSearchClick,
+  onKeywordClick,
+  onPreferenceChange,
+  onMobileRegionChange,
+}: ScorePageViewProps) => {
   return (
     <div className="px-5">
       <ApplicationSectionTitle
@@ -118,25 +189,21 @@ const ScorePageContent = () => {
         title="지원자 현황"
         description="지원 순위와 지역 필터로 원하는 학교 현황을 빠르게 확인할 수 있어요."
       />
-      <ScoreSearchBar onClick={handleSearchClick} textRef={searchRef} searchHandler={handleSearch} />
+      <ScoreSearchBar onClick={onSearchClick} textRef={searchRef} searchHandler={onSearch} />
 
       {searchActive ? (
         <div className="mt-3 rounded-lg bg-white py-4 shadow-sdwB">
-          <ScoreSearchField keyWords={hotKeyWords} setKeyWord={handleSearchField} />
+          <ScoreSearchField keyWords={hotKeyWords} setKeyWord={onKeywordClick} />
         </div>
       ) : (
         <>
           <div className="mt-4 rounded-lg bg-white px-2 shadow-sdwB">
-            <Tab choices={preferenceChoices} choice={selectedPreference} setChoice={handlePreferenceChange} />
+            <Tab choices={preferenceChoices} choice={selectedPreference} setChoice={onPreferenceChange} />
           </div>
           <ButtonTab
             choices={REGIONS_KO}
             choice={regionFilter}
-            setChoice={(newRegion) => {
-              if (searchRef.current) searchRef.current.value = "";
-              setSearchValue("");
-              setRegionFilter(newRegion as RegionKo | "");
-            }}
+            setChoice={onMobileRegionChange}
             style={{ padding: "10px 0 10px 8px" }}
           />
 
@@ -145,19 +212,132 @@ const ScorePageContent = () => {
               <ScoreSheet key={choice.koreanName} scoreSheet={choice} />
             ))}
           </div>
-          <ConfirmCancelModal
-            title="학교 지원이 필요합니다"
-            isOpen={showNeedApply}
-            handleCancel={() => router.push("/")}
-            handleConfirm={() => router.push("/university/application/apply")}
-            content={"점수 공유현황을 확인하려면 지원절차를\n진행해주세요."}
-            cancelText="확인"
-            approveText="학교 지원하기"
-          />
         </>
       )}
     </div>
   );
 };
 
+const ApplicationScoreDesktopView = ({
+  searchRef,
+  searchActive,
+  regionFilter,
+  preferenceChoices,
+  selectedPreference,
+  scoreSheets,
+  hotKeyWords,
+  onSearch,
+  onSearchClick,
+  onKeywordClick,
+  onPreferenceChange,
+  onDesktopRegionChange,
+}: ScorePageViewProps) => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <div className="mx-auto max-w-6xl">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">Application scores</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(320px,380px)]">
+          <section className="min-h-[620px] rounded-lg border border-k-100 bg-white p-6">
+            <div className="flex items-start justify-between gap-6">
+              <div>
+                <h2 className="text-k-900 typo-bold-4">{selectedPreference} 학교 현황</h2>
+                <p className="mt-1 text-k-500 typo-medium-3">조건에 맞는 학교 {scoreSheets.length}개</p>
+              </div>
+              <div className="w-80">
+                <Tab choices={preferenceChoices} choice={selectedPreference} setChoice={onPreferenceChange} />
+              </div>
+            </div>
+
+            {scoreSheets.length === 0 ? (
+              <ApplicationScoreEmptyState />
+            ) : (
+              <div className="mt-6 grid gap-4 lg:grid-cols-2">
+                {scoreSheets.map((choice) => (
+                  <ScoreSheet key={choice.koreanName} scoreSheet={choice} variant="desktop" />
+                ))}
+              </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">
+              <ScoreSearchBar onClick={onSearchClick} textRef={searchRef} searchHandler={onSearch} />
+            </div>
+
+            <div className={clsx("mt-5", searchActive ? "block" : "hidden xl:block")}>
+              <h3 className="text-k-800 typo-sb-7">인기 검색</h3>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {hotKeyWords.map((keyWord) => (
+                  <button
+                    key={keyWord}
+                    type="button"
+                    className="rounded-full bg-k-50 px-3 py-[5px] text-k-800 transition-colors hover:bg-k-100 typo-medium-2"
+                    onClick={() => onKeywordClick(keyWord)}
+                  >
+                    {keyWord}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="mt-6">
+              <h3 className="text-k-800 typo-sb-7">지역 필터</h3>
+              <div className="mt-3 flex flex-wrap gap-2">
+                <DesktopRegionButton isActive={regionFilter === ""} onClick={() => onDesktopRegionChange("")}>
+                  전체
+                </DesktopRegionButton>
+                {REGIONS_KO.map((region) => (
+                  <DesktopRegionButton
+                    key={region}
+                    isActive={regionFilter === region}
+                    onClick={() => onDesktopRegionChange(region as RegionKo)}
+                  >
+                    {region}
+                  </DesktopRegionButton>
+                ))}
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const DesktopRegionButton = ({
+  children,
+  isActive,
+  onClick,
+}: {
+  children: ReactNode;
+  isActive: boolean;
+  onClick: () => void;
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className={clsx(
+      "rounded-full px-3 py-1.5 transition-colors typo-medium-2",
+      isActive ? "bg-primary text-white" : "bg-k-50 text-k-500 hover:bg-k-100 hover:text-k-700",
+    )}
+  >
+    {children}
+  </button>
+);
+
+const ApplicationScoreEmptyState = () => (
+  <div className="mt-6 flex min-h-[360px] flex-col items-center justify-center rounded-lg border border-k-100 bg-white px-6 py-8 text-center">
+    <p className="text-k-900 typo-sb-5">조건에 맞는 학교가 없어요.</p>
+    <p className="mt-2 text-k-500 typo-medium-3">다른 순위, 지역, 검색어로 다시 확인해 주세요.</p>
+  </div>
+);
+
 export default ScorePageContent;
diff --git a/apps/web/src/app/university/application/ScoreSheet.tsx b/apps/web/src/app/university/application/ScoreSheet.tsx
index d568cdced..56a350428 100644
--- a/apps/web/src/app/university/application/ScoreSheet.tsx
+++ b/apps/web/src/app/university/application/ScoreSheet.tsx
@@ -1,19 +1,32 @@
+import clsx from "clsx";
 import { useState } from "react";
 import { IconExpandMoreFilled } from "@/public/svgs/community";
 import type { ScoreSheet as ScoreSheetType } from "@/types/application";
 import { formatLanguageTestScore, isLanguageTestEnum, languageTestMapping } from "@/types/score";
 
-const ScoreSheet = ({ scoreSheet }: { scoreSheet: ScoreSheetType }) => {
+const ScoreSheet = ({
+  scoreSheet,
+  variant = "mobile",
+}: {
+  scoreSheet: ScoreSheetType;
+  variant?: "mobile" | "desktop";
+}) => {
   const [tableOpened, setTableOpened] = useState(false);
+  const isDesktop = variant === "desktop";
 
   return (
-    <div className="w-full overflow-hidden rounded-lg bg-white shadow-sdwB">
+    <div
+      className={clsx("w-full overflow-hidden rounded-lg bg-white", isDesktop ? "border border-k-100" : "shadow-sdwB")}
+    >
       <button
         onClick={() => setTableOpened(!tableOpened)}
-        className="flex min-h-12 w-full items-center justify-between border-b border-k-50 bg-k-50 px-4 text-left"
+        className={clsx(
+          "flex w-full items-center justify-between border-b border-k-50 bg-k-50 text-left",
+          isDesktop ? "min-h-14 px-5" : "min-h-12 px-4",
+        )}
         type="button"
       >
-        <p className="truncate text-k-900 typo-sb-7">
+        <p className={clsx("truncate text-k-900", isDesktop ? "typo-sb-5" : "typo-sb-7")}>
           {scoreSheet.koreanName} ({scoreSheet.applicants.length}/{scoreSheet.studentCapacity})
         </p>
         <span className="flex h-6 w-6 items-center justify-center">
@@ -24,7 +37,10 @@ const ScoreSheet = ({ scoreSheet }: { scoreSheet: ScoreSheetType }) => {
       {tableOpened ? (
         <div className="divide-y divide-k-50">
           {scoreSheet.applicants.map((applicant) => (
-            <div key={applicant.nicknameForApply} className="flex min-h-12 items-center px-4 text-k-600 typo-medium-3">
+            <div
+              key={applicant.nicknameForApply}
+              className={clsx("flex min-h-12 items-center text-k-600 typo-medium-3", isDesktop ? "px-5" : "px-4")}
+            >
               <span className="min-w-[30px] flex-1 overflow-hidden whitespace-nowrap text-k-900 typo-regular-2">
                 {applicant.nicknameForApply}
               </span>
diff --git a/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
index 181325386..204ec83d6 100644
--- a/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
+++ b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
@@ -3,9 +3,18 @@ import BlockBtn from "@/components/button/BlockBtn";
 type ApplicationBottomActionBarProps = {
   label: string;
   onClick: () => void;
+  variant?: "mobile" | "desktop";
 };
 
-const ApplicationBottomActionBar = ({ label, onClick }: ApplicationBottomActionBarProps) => {
+const ApplicationBottomActionBar = ({ label, onClick, variant = "mobile" }: ApplicationBottomActionBarProps) => {
+  if (variant === "desktop") {
+    return (
+      <div className="mt-8">
+        <BlockBtn onClick={onClick}>{label}</BlockBtn>
+      </div>
+    );
+  }
+
   return (
     <div className="fixed bottom-[78px] left-1/2 w-full max-w-app -translate-x-1/2 px-5 md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:max-w-none md:translate-x-0">
       <BlockBtn onClick={onClick}>{label}</BlockBtn>
diff --git a/apps/web/src/app/university/application/apply/ApplyPageContent.tsx b/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
index 80f29ff19..0f212b653 100644
--- a/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
+++ b/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { usePostSubmitApplication } from "@/apis/applications";
@@ -11,6 +12,7 @@ import { DEFAULT_MAX_CHOICE_COUNT, getHomeUniversityById } from "@/constants/uni
 import { showIconToast } from "@/lib/toast/showIconToast";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import type { ListUniversity } from "@/types/university";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import ConfirmStep from "./ConfirmStep";
 import DoneStep from "./DoneStep";
 import EmptyGPA from "./EmptyGPA";
@@ -19,9 +21,11 @@ import LanguageStep from "./LanguageStep";
 import UniversityStep from "./UniversityStep";
 
 const APPLY_PROGRESS_TOTAL_STEPS = 5;
+const APPLY_STEP_LABELS = ["어학 성적 선택", "학점 선택", "학교 선택", "제출 확인", "지원 완료"] as const;
 
 const ApplyPageContent = () => {
   const router = useRouter();
+  const isDesktop = useIsDesktopViewport();
   const homeUniversityId = useAuthStore((state) => state.homeUniversityId);
   const [step, setStep] = useState<number>(1);
   const maxChoiceCount = getHomeUniversityById(homeUniversityId)?.maxChoiceCount ?? DEFAULT_MAX_CHOICE_COUNT;
@@ -46,12 +50,11 @@ const ApplyPageContent = () => {
   const [curGpaScore, setCurGpaScore] = useState<number | null>(null);
   const [curUniversityList, setCurUniversityList] = useState<number[]>([]);
 
-  // 다음 스텝으로 넘어가기
   const goNextStep = () => setStep((prev) => prev + 1);
-  // 이전 스텝으로 돌아가기
   const goPrevStep = () => {
     if (step === 1) {
       router.back();
+      return;
     }
     setStep((prev) => prev - 1);
   };
@@ -85,9 +88,122 @@ const ApplyPageContent = () => {
     });
   };
 
+  if (isDesktop === null) return null;
+
   const isDataExist = gpaScoreList.length === 0 || languageTestScoreList.length === 0;
   const hasSelectedUniversity = curUniversityList.some((universityId) => universityId > 0);
   const progressStep = step === 3 && hasSelectedUniversity ? APPLY_PROGRESS_TOTAL_STEPS : step + 1;
+  const activeStepIndex =
+    step === 99 ? APPLY_STEP_LABELS.length - 1 : Math.max(0, Math.min(step - 1, APPLY_STEP_LABELS.length - 1));
+
+  const renderStep = (variant: "mobile" | "desktop") => {
+    if (isDataExist) {
+      return <EmptyGPA variant={variant} />;
+    }
+
+    return (
+      <>
+        {step === 1 && (
+          <LanguageStep
+            languageTestScoreList={languageTestScoreList}
+            curLanguageTestScore={curLanguageTestScore}
+            setCurLanguageTestScore={setCurLanguageTestScore}
+            onNext={goNextStep}
+            variant={variant}
+          />
+        )}
+        {step === 2 && (
+          <GpaStep
+            gpaScoreList={gpaScoreList}
+            curGpaScore={curGpaScore}
+            setCurGpaScore={setCurGpaScore}
+            onNext={goNextStep}
+            variant={variant}
+          />
+        )}
+        {step === 3 && (
+          <UniversityStep
+            universityList={universityList}
+            curUniversityList={curUniversityList}
+            setCurUniversityList={setCurUniversityList}
+            maxChoiceCount={maxChoiceCount}
+            onNext={goNextStep}
+            variant={variant}
+          />
+        )}
+        {step === 4 && (
+          <ConfirmStep
+            universityList={
+              curUniversityList
+                .map((id) => universityList.find((university) => university.id === id))
+                .filter(Boolean) as ListUniversity[]
+            }
+            onNext={handleSubmit}
+            variant={variant}
+          />
+        )}
+        {step === 99 && <DoneStep variant={variant} />}
+      </>
+    );
+  };
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <div className="mx-auto max-w-6xl">
+          <header className="mb-8 flex items-start justify-between gap-6">
+            <div>
+              <p className="text-primary typo-sb-9">Application</p>
+              <h1 className="mt-2 text-k-900 typo-bold-1">지원하기</h1>
+              <p className="mt-2 text-k-500 typo-medium-2">성적과 희망 학교를 선택해 모의 지원을 제출하세요.</p>
+            </div>
+            <button
+              type="button"
+              onClick={goPrevStep}
+              className="rounded-lg border border-k-100 bg-white px-4 py-3 text-k-600 transition-colors hover:bg-k-50 typo-sb-9"
+            >
+              이전으로
+            </button>
+          </header>
+
+          <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(300px,360px)]">
+            <section className="min-h-[620px] rounded-lg border border-k-100 bg-white p-8">
+              {(step === 1 || step === 2 || step === 3) && (
+                <ProgressBar currentStep={progressStep} totalSteps={APPLY_PROGRESS_TOTAL_STEPS} />
+              )}
+              <div className="mt-8">{renderStep("desktop")}</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">
+                {APPLY_STEP_LABELS.map((label, index) => {
+                  const isActive = index === activeStepIndex;
+                  const isDone = index < activeStepIndex;
+                  return (
+                    <div
+                      key={label}
+                      className={clsx(
+                        "rounded-lg px-4 py-3 typo-medium-2",
+                        isActive && "bg-primary-100 text-primary",
+                        isDone && "bg-secondary-100 text-secondary",
+                        !isActive && !isDone && "bg-k-50 text-k-500",
+                      )}
+                    >
+                      {index + 1}. {label}
+                    </div>
+                  );
+                })}
+              </div>
+              <p className="mt-5 text-k-500 typo-medium-3">
+                제출 후에는 지원자 현황에서 선택한 학교의 경쟁률을 확인할 수 있어요.
+              </p>
+            </aside>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <>
@@ -97,48 +213,7 @@ const ApplyPageContent = () => {
           <ProgressBar currentStep={progressStep} totalSteps={APPLY_PROGRESS_TOTAL_STEPS} />
         )}
       </div>
-      {isDataExist ? (
-        <EmptyGPA />
-      ) : (
-        <>
-          {step === 1 && (
-            <LanguageStep
-              languageTestScoreList={languageTestScoreList}
-              curLanguageTestScore={curLanguageTestScore}
-              setCurLanguageTestScore={setCurLanguageTestScore}
-              onNext={goNextStep}
-            />
-          )}
-          {step === 2 && (
-            <GpaStep
-              gpaScoreList={gpaScoreList}
-              curGpaScore={curGpaScore}
-              setCurGpaScore={setCurGpaScore}
-              onNext={goNextStep}
-            />
-          )}
-          {step === 3 && (
-            <UniversityStep
-              universityList={universityList}
-              curUniversityList={curUniversityList}
-              setCurUniversityList={setCurUniversityList}
-              maxChoiceCount={maxChoiceCount}
-              onNext={goNextStep}
-            />
-          )}
-          {step === 4 && (
-            <ConfirmStep
-              universityList={
-                curUniversityList
-                  .map((id) => universityList.find((university) => university.id === id))
-                  .filter(Boolean) as ListUniversity[]
-              }
-              onNext={handleSubmit}
-            />
-          )}
-          {step === 99 && <DoneStep />}
-        </>
-      )}
+      {renderStep("mobile")}
     </>
   );
 };
diff --git a/apps/web/src/app/university/application/apply/ConfirmStep.tsx b/apps/web/src/app/university/application/apply/ConfirmStep.tsx
index cd8fa7a65..4febb9b10 100644
--- a/apps/web/src/app/university/application/apply/ConfirmStep.tsx
+++ b/apps/web/src/app/university/application/apply/ConfirmStep.tsx
@@ -7,17 +7,24 @@ import ApplicationBottomActionBar from "../_components/ApplicationBottomActionBa
 type ConfirmStepProps = {
   universityList: ListUniversity[];
   onNext: () => void;
+  variant?: "mobile" | "desktop";
 };
 
 type ConfirmUniversityCardProps = {
   universityList: ListUniversity[];
+  variant?: "mobile" | "desktop";
 };
 
-const ConfirmUniversityCard = ({ universityList }: ConfirmUniversityCardProps) => {
+const ConfirmUniversityCard = ({ universityList, variant = "mobile" }: ConfirmUniversityCardProps) => {
   if (universityList.length === 0) return null;
 
   return (
-    <div className="mt-10 rounded-lg border border-secondary bg-white px-5 py-6 shadow-[0_0_5px_rgba(0,0,0,0.25)]">
+    <div
+      className={clsx(
+        "mt-10 rounded-lg border border-secondary bg-white px-5 py-6",
+        variant === "desktop" ? "shadow-none" : "shadow-[0_0_5px_rgba(0,0,0,0.25)]",
+      )}
+    >
       {universityList.map((university, index) => (
         <div
           key={university.id}
@@ -38,9 +45,11 @@ const ConfirmUniversityCard = ({ universityList }: ConfirmUniversityCardProps) =
   );
 };
 
-const ConfirmStep = ({ universityList, onNext }: ConfirmStepProps) => {
+const ConfirmStep = ({ universityList, onNext, variant = "mobile" }: ConfirmStepProps) => {
+  const isDesktop = variant === "desktop";
+
   return (
-    <div className="px-5 pb-40 pt-[76px]">
+    <div className={clsx(isDesktop ? "pt-4" : "px-5 pb-40 pt-[76px]")}>
       <div className="flex items-center justify-center">
         <IconCheck />
       </div>
@@ -54,8 +63,8 @@ const ConfirmStep = ({ universityList, onNext }: ConfirmStepProps) => {
         </p>
       </div>
 
-      <ConfirmUniversityCard universityList={universityList} />
-      <ApplicationBottomActionBar label="제출하기" onClick={onNext} />
+      <ConfirmUniversityCard universityList={universityList} variant={variant} />
+      <ApplicationBottomActionBar label="제출하기" onClick={onNext} variant={variant} />
     </div>
   );
 };
diff --git a/apps/web/src/app/university/application/apply/DoneStep.tsx b/apps/web/src/app/university/application/apply/DoneStep.tsx
index 1b297fde8..638460e9a 100644
--- a/apps/web/src/app/university/application/apply/DoneStep.tsx
+++ b/apps/web/src/app/university/application/apply/DoneStep.tsx
@@ -1,13 +1,18 @@
+import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import BlockBtn from "@/components/button/BlockBtn";
 import Image from "@/components/ui/FallbackImage";
 import ApplicationSectionTitle from "../_components/ApplicationSectionTitle";
 
-const DoneStep = () => {
+const DoneStep = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
   const router = useRouter();
+  const isDesktop = variant === "desktop";
+
   return (
-    <div className="mt-24 px-5">
-      <div className="rounded-lg bg-white px-6 py-8 text-center shadow-sdwB">
+    <div className={clsx(isDesktop ? "" : "mt-24 px-5")}>
+      <div
+        className={clsx("rounded-lg bg-white px-6 py-8 text-center", isDesktop ? "border border-k-100" : "shadow-sdwB")}
+      >
         <div className="flex justify-center">
           <Image src="/images/survey-complete-icon.png" width={120} height={120} alt="지원 완료" />
         </div>
@@ -18,7 +23,7 @@ const DoneStep = () => {
         />
       </div>
 
-      <div className="mt-6 flex w-full flex-col gap-3">
+      <div className={clsx("mt-6 grid w-full gap-3", isDesktop ? "grid-cols-2" : "grid-cols-1")}>
         <BlockBtn
           onClick={() => {
             router.push("/university/application");
diff --git a/apps/web/src/app/university/application/apply/EmptyGPA.tsx b/apps/web/src/app/university/application/apply/EmptyGPA.tsx
index cbd0aa40b..6e0adad14 100644
--- a/apps/web/src/app/university/application/apply/EmptyGPA.tsx
+++ b/apps/web/src/app/university/application/apply/EmptyGPA.tsx
@@ -1,12 +1,17 @@
+import clsx from "clsx";
 import Link from "next/link";
 
 import { IconSolidConnectionSmallLogo } from "@/public/svgs/my";
 import ApplicationSectionTitle from "../_components/ApplicationSectionTitle";
 
-const EmptyGPA = () => {
+const EmptyGPA = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
+  const isDesktop = variant === "desktop";
+
   return (
-    <div className="mt-24 px-5">
-      <div className="rounded-lg bg-white px-6 py-8 text-center shadow-sdwB">
+    <div className={clsx(isDesktop ? "" : "mt-24 px-5")}>
+      <div
+        className={clsx("rounded-lg bg-white px-6 py-8 text-center", isDesktop ? "border border-k-100" : "shadow-sdwB")}
+      >
         <div className="flex justify-center">
           <IconSolidConnectionSmallLogo />
         </div>
diff --git a/apps/web/src/app/university/application/apply/GpaStep.tsx b/apps/web/src/app/university/application/apply/GpaStep.tsx
index a7033a2f7..160a09a95 100644
--- a/apps/web/src/app/university/application/apply/GpaStep.tsx
+++ b/apps/web/src/app/university/application/apply/GpaStep.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import { useState } from "react";
 import ScoreCard from "@/app/university/score/ScoreCard";
 import TextModal from "@/components/modal/TextModal";
@@ -14,10 +15,12 @@ type GpaStepProps = {
   curGpaScore: number | null;
   setCurGpaScore: (id: number) => void;
   onNext: () => void;
+  variant?: "mobile" | "desktop";
 };
 
-const GpaStep = ({ gpaScoreList, curGpaScore, setCurGpaScore, onNext }: GpaStepProps) => {
+const GpaStep = ({ gpaScoreList, curGpaScore, setCurGpaScore, onNext, variant = "mobile" }: GpaStepProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const isDesktop = variant === "desktop";
 
   const handleNext = () => {
     if (curGpaScore === null) {
@@ -29,10 +32,12 @@ const GpaStep = ({ gpaScoreList, curGpaScore, setCurGpaScore, onNext }: GpaStepP
 
   return (
     <>
-      <div className="my-5 px-5">
+      <div className={clsx({ "my-5 px-5": !isDesktop })}>
         <ApplicationSectionTitle title="학점 성적 선택" description="지원에 사용할 학점 성적을 선택해주세요." />
-        <Tab choices={["공인어학", "학점"]} choice="학점" setChoice={() => {}} />
-        <div className="my-[14px] mb-40 flex flex-col gap-3">
+        <div className={clsx(isDesktop ? "mt-5 max-w-md" : "")}>
+          <Tab choices={["공인어학", "학점"]} choice="학점" setChoice={() => {}} />
+        </div>
+        <div className={clsx("my-[14px] grid gap-3", isDesktop ? "mb-0 lg:grid-cols-2" : "mb-40 grid-cols-1")}>
           {gpaScoreList.map((score) => (
             <button
               key={score.id}
@@ -54,14 +59,15 @@ const GpaStep = ({ gpaScoreList, curGpaScore, setCurGpaScore, onNext }: GpaStepP
                 score={`${score.gpaResponse.gpa.toFixed(2)}/${score.gpaResponse.gpaCriteria}`}
                 status={score.verifyStatus}
                 // date={new Date(score.issueDate).toISOString()}
-                date="2025-01-01"
+                date={score.issueDate}
                 isFocused={score.id === curGpaScore}
+                variant={variant}
               />
             </button>
           ))}
         </div>
       </div>
-      <ApplicationBottomActionBar label="다음" onClick={handleNext} />
+      <ApplicationBottomActionBar label="다음" onClick={handleNext} variant={variant} />
       <TextModal
         isOpen={isModalOpen}
         handleClose={() => setIsModalOpen(false)}
diff --git a/apps/web/src/app/university/application/apply/LanguageStep.tsx b/apps/web/src/app/university/application/apply/LanguageStep.tsx
index ecc8e7b8e..aa41ad317 100644
--- a/apps/web/src/app/university/application/apply/LanguageStep.tsx
+++ b/apps/web/src/app/university/application/apply/LanguageStep.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import { useState } from "react";
 import ScoreCard from "@/app/university/score/ScoreCard";
 import TextModal from "@/components/modal/TextModal";
@@ -14,6 +15,7 @@ type LanguageStepProps = {
   curLanguageTestScore: number | null;
   setCurLanguageTestScore: (id: number) => void;
   onNext: () => void;
+  variant?: "mobile" | "desktop";
 };
 
 const LanguageStep = ({
@@ -21,8 +23,10 @@ const LanguageStep = ({
   curLanguageTestScore,
   setCurLanguageTestScore,
   onNext,
+  variant = "mobile",
 }: LanguageStepProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const isDesktop = variant === "desktop";
 
   const handleNext = () => {
     if (curLanguageTestScore === null) {
@@ -34,10 +38,12 @@ const LanguageStep = ({
 
   return (
     <>
-      <div className="my-5 px-5">
+      <div className={clsx({ "my-5 px-5": !isDesktop })}>
         <ApplicationSectionTitle title="어학 성적 선택" description="지원에 사용할 공인어학 성적을 선택해주세요." />
-        <Tab choices={["공인어학", "학점"]} choice="공인어학" setChoice={() => {}} />
-        <div className="my-[14px] mb-40 flex flex-col gap-3">
+        <div className={clsx(isDesktop ? "mt-5 max-w-md" : "")}>
+          <Tab choices={["공인어학", "학점"]} choice="공인어학" setChoice={() => {}} />
+        </div>
+        <div className={clsx("my-[14px] grid gap-3", isDesktop ? "mb-0 lg:grid-cols-2" : "mb-40 grid-cols-1")}>
           {languageTestScoreList.map((score) => (
             <button
               className="transition-transform hover:scale-[1.01] active:scale-[0.97]"
@@ -63,14 +69,15 @@ const LanguageStep = ({
                 )}
                 status={score.verifyStatus}
                 // date={new Date(score.issueDate).toISOString()}
-                date="2025-01-01"
+                date={score.issueDate}
                 isFocused={score.id === curLanguageTestScore}
+                variant={variant}
               />
             </button>
           ))}
         </div>
       </div>
-      <ApplicationBottomActionBar label="다음" onClick={handleNext} />
+      <ApplicationBottomActionBar label="다음" onClick={handleNext} variant={variant} />
       <TextModal
         isOpen={isModalOpen}
         handleClose={() => setIsModalOpen(false)}
diff --git a/apps/web/src/app/university/application/apply/UniversityStep.tsx b/apps/web/src/app/university/application/apply/UniversityStep.tsx
index d234563e8..3a9d25aad 100644
--- a/apps/web/src/app/university/application/apply/UniversityStep.tsx
+++ b/apps/web/src/app/university/application/apply/UniversityStep.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import { useMemo, useState } from "react";
 
 import TextModal from "@/components/modal/TextModal";
@@ -14,6 +15,7 @@ type UniversityStepProps = {
   setCurUniversityList: (idList: number[]) => void;
   maxChoiceCount: number;
   onNext: () => void;
+  variant?: "mobile" | "desktop";
 };
 
 type UniversityChoiceSelectProps = {
@@ -68,9 +70,11 @@ const UniversityStep = ({
   setCurUniversityList,
   maxChoiceCount,
   onNext,
+  variant = "mobile",
 }: UniversityStepProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const choiceIndexes = useMemo(() => Array.from({ length: maxChoiceCount }, (_, index) => index), [maxChoiceCount]);
+  const isDesktop = variant === "desktop";
 
   const handleSelect = (index: number, value: number) => {
     const newList = curUniversityList.slice(0, maxChoiceCount);
@@ -96,9 +100,9 @@ const UniversityStep = ({
 
   return (
     <>
-      <div className="px-5 pb-40 pt-3">
+      <div className={clsx(isDesktop ? "" : "px-5 pb-40 pt-3")}>
         <p className="text-k-300 typo-regular-4">본 과정 완료 후, 지원자 현황을 확인할 수 있습니다.</p>
-        <div className="mt-7 flex flex-col gap-[7px]">
+        <div className={clsx(isDesktop ? "mt-6 grid gap-4 md:grid-cols-2" : "mt-7 flex flex-col gap-[7px]")}>
           {choiceIndexes.map((index) => (
             <UniversityChoiceSelect
               key={index}
@@ -112,7 +116,7 @@ const UniversityStep = ({
           ))}
         </div>
       </div>
-      <ApplicationBottomActionBar label="다음" onClick={handleNext} />
+      <ApplicationBottomActionBar label="다음" onClick={handleNext} variant={variant} />
       <TextModal
         isOpen={isModalOpen}
         handleClose={() => setIsModalOpen(false)}
diff --git a/apps/web/src/app/university/score/ScoreCard.tsx b/apps/web/src/app/university/score/ScoreCard.tsx
index 3d4029d4f..abe31d334 100644
--- a/apps/web/src/app/university/score/ScoreCard.tsx
+++ b/apps/web/src/app/university/score/ScoreCard.tsx
@@ -7,6 +7,7 @@ type ScoreCardProps = {
   status: ScoreSubmitStatus;
   date: string; // Date ISO string
   isFocused?: boolean;
+  variant?: "mobile" | "desktop";
 };
 
 const formatDate = (date: string) => {
@@ -47,36 +48,42 @@ const getStatus = (status: ScoreSubmitStatus) => {
   }
 };
 
-const ScoreCard = ({ name, score, status, date, isFocused = false }: ScoreCardProps) => {
+const ScoreCard = ({ name, score, status, date, isFocused = false, variant = "mobile" }: ScoreCardProps) => {
   const isVerified = status === "APPROVED";
+  const isDesktop = variant === "desktop";
 
   return (
     <div
       className={clsx(
-        "flex h-[66px] flex-col rounded-lg px-5 py-3",
+        "flex flex-col rounded-lg",
+        isDesktop ? "min-h-[88px] px-5 py-4" : "h-[66px] px-5 py-3",
         isVerified ? "bg-secondary-100" : "bg-k-50",
         isFocused && "border border-secondary",
       )}
     >
-      <div className="flex">
+      <div className="flex h-full items-center">
         <div>{getStatus(status)}</div>
         <div
-          className={clsx("ml-3 flex flex-col text-start font-serif typo-sb-9", {
+          className={clsx("ml-3 flex min-w-0 flex-col text-start font-serif", isDesktop ? "typo-sb-7" : "typo-sb-9", {
             "text-k-900": isVerified,
             "text-k-300": !isVerified,
           })}
         >
-          {name}
+          <span className="truncate">{name}</span>
           <span className="font-serif text-k-300 typo-regular-5">
             {status === "APPROVED" ? "만료일 : " : "제출일 : "}
             {formatDate(date)}
           </span>
         </div>
         <div
-          className={clsx("ml-auto flex items-center font-serif typo-bold-5", {
-            "text-secondary": isFocused,
-            "text-secondary-300": !isFocused,
-          })}
+          className={clsx(
+            "ml-auto flex shrink-0 items-center pl-4 font-serif",
+            isDesktop ? "typo-bold-3" : "typo-bold-5",
+            {
+              "text-secondary": isFocused,
+              "text-secondary-300": !isFocused,
+            },
+          )}
         >
           {score}
         </div>
diff --git a/apps/web/src/app/university/score/ScoreScreen.tsx b/apps/web/src/app/university/score/ScoreScreen.tsx
index da6d1e0bc..334764eb9 100644
--- a/apps/web/src/app/university/score/ScoreScreen.tsx
+++ b/apps/web/src/app/university/score/ScoreScreen.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useGetMyGpaScore, useGetMyLanguageTestScore } from "@/apis/Scores";
@@ -7,15 +8,34 @@ import BlockBtn from "@/components/button/BlockBtn";
 import Tab from "@/components/ui/Tab";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import { IconSolidConnectionSmallLogo } from "@/public/svgs/my";
-import { formatLanguageTestScore, languageTestMapping, ScoreSubmitStatus } from "@/types/score";
+import {
+  formatLanguageTestScore,
+  type GpaScore,
+  type LanguageTestScore,
+  languageTestMapping,
+  ScoreSubmitStatus,
+} from "@/types/score";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import ScoreCard from "./ScoreCard";
 
 const SCORE_TAB_CHOICES = ["공인어학", "학점"] as const;
 type ScoreTab = (typeof SCORE_TAB_CHOICES)[number];
+type ScoreViewProps = {
+  curTab: ScoreTab;
+  setCurTab: (tab: ScoreTab) => void;
+  gpaScoreList: GpaScore[];
+  languageTestScoreList: LanguageTestScore[];
+  isEmptyCurrentTab: boolean;
+  onScoreClick: (status: ScoreSubmitStatus, rejectedReason?: string | null) => void;
+  onSubmitClick: () => void;
+};
+
+const getSubmitLabel = (curTab: ScoreTab) => (curTab === "공인어학" ? "어학 성적 입력하기" : "학점 입력하기");
 
 const ScoreScreen = () => {
   const router = useRouter();
   const [curTab, setCurTab] = useState<ScoreTab>("공인어학");
+  const isDesktop = useIsDesktopViewport();
   const { data: gpaScoreList = [] } = useGetMyGpaScore();
   const { data: languageTestScoreList = [] } = useGetMyLanguageTestScore();
   const isEmptyCurrentTab = curTab === "공인어학" ? languageTestScoreList.length === 0 : gpaScoreList.length === 0;
@@ -30,77 +50,207 @@ const ScoreScreen = () => {
     }
   };
 
+  const handleSubmitClick = () => {
+    router.push(curTab === "공인어학" ? "/university/score/submit/language-test" : "/university/score/submit/gpa");
+  };
+
+  if (isDesktop === null) return null;
+
+  const viewProps = {
+    curTab,
+    setCurTab,
+    gpaScoreList,
+    languageTestScoreList,
+    isEmptyCurrentTab,
+    onScoreClick: handleScoreClick,
+    onSubmitClick: handleSubmitClick,
+  };
+
+  return isDesktop ? <ScoreDesktopView {...viewProps} /> : <ScoreMobileView {...viewProps} />;
+};
+
+const ScoreMobileView = ({
+  curTab,
+  setCurTab,
+  gpaScoreList,
+  languageTestScoreList,
+  isEmptyCurrentTab,
+  onScoreClick,
+  onSubmitClick,
+}: ScoreViewProps) => {
   return (
     <div className="h-full">
       <div className="mx-5 mb-40">
         <Tab<ScoreTab> choices={SCORE_TAB_CHOICES} choice={curTab} setChoice={setCurTab} />
         {isEmptyCurrentTab ? (
-          <div className="mt-24 flex flex-col items-center rounded-lg bg-white px-6 py-8 text-center shadow-sdwB">
-            <IconSolidConnectionSmallLogo />
-            <p className="mt-3 text-k-500 typo-regular-2">
-              아직 등록된 성적이 없어요.
-              <br />
-              아래 버튼을 눌러 성적을 입력해 주세요.
-            </p>
-          </div>
+          <ScoreEmptyState />
         ) : (
-          <div className="mt-3.5 flex flex-col gap-3.5">
-            {curTab === "공인어학" &&
-              languageTestScoreList.map((score) => (
-                <button
-                  key={score.id}
-                  type="button"
-                  className="text-left"
-                  onClick={() => handleScoreClick(score.verifyStatus, score.rejectedReason)}
-                >
-                  <ScoreCard
-                    name={languageTestMapping[score.languageTestResponse.languageTestType]}
-                    score={formatLanguageTestScore(
-                      score.languageTestResponse.languageTestType,
-                      score.languageTestResponse.languageTestScore,
-                    )}
-                    status={score.verifyStatus}
-                    // date={new Date(score.issueDate).toISOString()}
-                    date="2026-01-01"
-                    isFocused={score.verifyStatus === "APPROVED"}
-                  />
-                </button>
-              ))}
-
-            {curTab === "학점" &&
-              gpaScoreList.map((score) => (
-                <button
-                  key={score.id}
-                  type="button"
-                  className="text-left"
-                  onClick={() => handleScoreClick(score.verifyStatus, score.rejectedReason)}
-                >
-                  <ScoreCard
-                    name="인하대학교" // TODO: 학교명 API에서 받아오기
-                    score={`${score.gpaResponse.gpa.toFixed(2)}/${score.gpaResponse.gpaCriteria}`}
-                    status={score.verifyStatus}
-                    // date={new Date(score.issueDate).toISOString()}
-                    date="2026-01-01"
-                    isFocused={score.verifyStatus === "APPROVED"}
-                  />
-                </button>
-              ))}
-          </div>
+          <ScoreList
+            curTab={curTab}
+            gpaScoreList={gpaScoreList}
+            languageTestScoreList={languageTestScoreList}
+            onScoreClick={onScoreClick}
+          />
         )}
       </div>
       <div className="fixed bottom-14 w-full max-w-app bg-white md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:max-w-none">
         <div className="mb-[37px] px-5">
-          {curTab === "공인어학" ? (
-            <BlockBtn onClick={() => router.push("/university/score/submit/language-test")}>
-              어학 성적 입력하기
-            </BlockBtn>
-          ) : (
-            <BlockBtn onClick={() => router.push("/university/score/submit/gpa")}>학점 입력하기</BlockBtn>
-          )}
+          <BlockBtn onClick={onSubmitClick}>{getSubmitLabel(curTab)}</BlockBtn>
         </div>
       </div>
     </div>
   );
 };
 
+const ScoreDesktopView = ({
+  curTab,
+  setCurTab,
+  gpaScoreList,
+  languageTestScoreList,
+  isEmptyCurrentTab,
+  onScoreClick,
+  onSubmitClick,
+}: ScoreViewProps) => {
+  const currentScoreCount = curTab === "공인어학" ? languageTestScoreList.length : gpaScoreList.length;
+
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <div className="mx-auto max-w-6xl">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">My scores</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(320px,380px)]">
+          <section className="min-h-[560px] rounded-lg border border-k-100 bg-white p-6">
+            <div className="flex items-start justify-between gap-6">
+              <div>
+                <h2 className="text-k-900 typo-bold-4">내 성적</h2>
+                <p className="mt-1 text-k-500 typo-medium-3">현재 탭에 등록된 성적 {currentScoreCount}개</p>
+              </div>
+              <div className="w-72">
+                <Tab<ScoreTab> choices={SCORE_TAB_CHOICES} choice={curTab} setChoice={setCurTab} />
+              </div>
+            </div>
+
+            {isEmptyCurrentTab ? (
+              <ScoreEmptyState variant="desktop" />
+            ) : (
+              <ScoreList
+                curTab={curTab}
+                gpaScoreList={gpaScoreList}
+                languageTestScoreList={languageTestScoreList}
+                onScoreClick={onScoreClick}
+                variant="desktop"
+              />
+            )}
+          </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>
+            <p className="mt-2 text-k-500 typo-medium-3">
+              새 성적을 제출하면 운영팀 승인 후 지원서에서 사용할 수 있습니다.
+            </p>
+            <div className="mt-5 grid gap-3">
+              <div className="rounded-lg bg-k-50 px-4 py-3 text-k-700 typo-medium-2">
+                공인어학과 학점은 각각 제출할 수 있어요.
+              </div>
+              <div className="rounded-lg bg-k-50 px-4 py-3 text-k-700 typo-medium-2">
+                승인 거절 사유는 해당 성적을 누르면 확인할 수 있어요.
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={onSubmitClick}
+              className="mt-6 w-full rounded-lg bg-primary px-5 py-4 text-white typo-sb-9 transition-colors hover:bg-primary/90"
+            >
+              {getSubmitLabel(curTab)}
+            </button>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ScoreEmptyState = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
+  const isDesktop = variant === "desktop";
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-col items-center rounded-lg bg-white px-6 py-8 text-center shadow-sdwB",
+        isDesktop ? "mt-8 min-h-[320px] justify-center border border-k-100 shadow-none" : "mt-24",
+      )}
+    >
+      <IconSolidConnectionSmallLogo />
+      <p className="mt-3 text-k-500 typo-regular-2">
+        아직 등록된 성적이 없어요.
+        <br />
+        아래 버튼을 눌러 성적을 입력해 주세요.
+      </p>
+    </div>
+  );
+};
+
+const ScoreList = ({
+  curTab,
+  gpaScoreList,
+  languageTestScoreList,
+  onScoreClick,
+  variant = "mobile",
+}: Pick<ScoreViewProps, "curTab" | "gpaScoreList" | "languageTestScoreList" | "onScoreClick"> & {
+  variant?: "mobile" | "desktop";
+}) => {
+  const isDesktop = variant === "desktop";
+
+  return (
+    <div className={clsx(isDesktop ? "mt-6 grid gap-4 lg:grid-cols-2" : "mt-3.5 flex flex-col gap-3.5")}>
+      {curTab === "공인어학" &&
+        languageTestScoreList.map((score) => (
+          <button
+            key={score.id}
+            type="button"
+            className="text-left"
+            onClick={() => onScoreClick(score.verifyStatus, score.rejectedReason)}
+          >
+            <ScoreCard
+              name={languageTestMapping[score.languageTestResponse.languageTestType]}
+              score={formatLanguageTestScore(
+                score.languageTestResponse.languageTestType,
+                score.languageTestResponse.languageTestScore,
+              )}
+              status={score.verifyStatus}
+              date={score.issueDate}
+              isFocused={score.verifyStatus === "APPROVED"}
+              variant={variant}
+            />
+          </button>
+        ))}
+
+      {curTab === "학점" &&
+        gpaScoreList.map((score) => (
+          <button
+            key={score.id}
+            type="button"
+            className="text-left"
+            onClick={() => onScoreClick(score.verifyStatus, score.rejectedReason)}
+          >
+            <ScoreCard
+              name="인하대학교"
+              score={`${score.gpaResponse.gpa.toFixed(2)}/${score.gpaResponse.gpaCriteria}`}
+              status={score.verifyStatus}
+              date={score.issueDate}
+              isFocused={score.verifyStatus === "APPROVED"}
+              variant={variant}
+            />
+          </button>
+        ))}
+    </div>
+  );
+};
+
 export default ScoreScreen;
diff --git a/apps/web/src/app/university/score/page.tsx b/apps/web/src/app/university/score/page.tsx
index 39aaac633..3ed9e634d 100644
--- a/apps/web/src/app/university/score/page.tsx
+++ b/apps/web/src/app/university/score/page.tsx
@@ -13,7 +13,7 @@ const ScorePage = () => {
   return (
     <>
       <TopDetailNavigation title="성적 확인하기" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <ScoreScreen />
       </div>
     </>
diff --git a/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx b/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
index bac617d21..76d51a7c2 100644
--- a/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
+++ b/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
@@ -11,6 +11,7 @@ import SubmitLinkTab from "@/components/score/SubmitLinkTab";
 import SubmitResult, { type InfoRowProps } from "@/components/score/SubmitResult";
 import CustomDropdown from "@/components/search/CustomDropdown";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import { type GpaFormData, gpaSchema } from "./_lib/schema";
 
 const GpaSubmitForm = () => {
@@ -18,8 +19,8 @@ const GpaSubmitForm = () => {
   const [showResult, setShowResult] = useState(false);
   const [submittedData, setSubmittedData] = useState<GpaFormData | null>(null);
   const { mutateAsync: postGpaScore } = usePostGpaScore();
+  const isDesktop = useIsDesktopViewport();
 
-  // 2. react-hook-form 설정
   const {
     register,
     handleSubmit,
@@ -33,22 +34,22 @@ const GpaSubmitForm = () => {
   });
   const selectedFile = watch("file");
 
-  // 3. 폼 제출 핸들러
   const onSubmit: SubmitHandler<GpaFormData> = async (data) => {
     await postGpaScore({
       gpaScoreRequest: {
         gpa: Number(data.gpa),
         gpaCriteria: Number(data.gpaCriteria),
-        issueDate: "2025-01-01", // TODO: 실제 날짜 데이터로 변경
+        issueDate: "2025-01-01",
       },
       file: data.file[0],
     });
-    // 성공 시, 결과 화면에 보여줄 데이터를 저장하고 상태 변경
     setSubmittedData(data);
     setShowResult(true);
     reset();
   };
 
+  if (isDesktop === null) return null;
+
   if (showResult && submittedData) {
     const infoRows: InfoRowProps[] = [
       {
@@ -72,6 +73,7 @@ const GpaSubmitForm = () => {
         title="학점 입력 완료"
         description="성적 승인은 최대 3일까지 걸릴 수 있습니다."
         buttonText="홈으로"
+        variant={isDesktop ? "desktop" : "mobile"}
         onClick={() => router.push("/")}
         handleClose={() => setShowResult(false)}
         infoRows={infoRows}
@@ -79,91 +81,133 @@ const GpaSubmitForm = () => {
     );
   }
 
+  const formTitle = (
+    <div>
+      <p className="font-serif text-k-900 typo-sb-3">대학교 성적 입력</p>
+      <p className="font-serif text-k-600 typo-medium-3">
+        공적 증명서만 인정됩니다.
+        <br />
+        미인정 서류를 업로드 할 경우 권한이 거부될 수 있습니다.
+      </p>
+    </div>
+  );
+
+  const formFields = (
+    <div className="mt-[30px] flex flex-col gap-5">
+      <div className="flex flex-col gap-1">
+        <label className="font-serif typo-sb-7">학점 기준</label>
+        <Controller
+          name="gpaCriteria"
+          control={control}
+          render={({ field }) => (
+            <CustomDropdown
+              placeholderSelect=""
+              value={field.value}
+              onChange={field.onChange}
+              placeholder="학점 기준을 선택해주세요"
+              options={[
+                { value: "4.5", label: "4.5 만점" },
+                { value: "4.3", label: "4.3 만점" },
+              ]}
+            />
+          )}
+        />
+        {errors.gpaCriteria && <p className="mt-1 text-red-500 typo-regular-2">{errors.gpaCriteria.message}</p>}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <label className="font-serif typo-sb-7">점수</label>
+        <input
+          type="number"
+          step="0.01"
+          className="flex h-10 items-center rounded-lg bg-k-50 px-5 py-2.5 font-serif text-secondary typo-sb-9"
+          {...register("gpa")}
+        />
+        {errors.gpa && <p className="mt-1 text-red-500 typo-regular-2">{errors.gpa.message}</p>}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <label className="font-serif typo-sb-7">증명서 첨부</label>
+        <div className="flex items-center gap-3">
+          <span className="flex h-10 flex-1 items-center truncate rounded-lg bg-k-50 px-5 py-2.5 font-serif text-secondary typo-sb-9">
+            {selectedFile?.[0]?.name || "파일을 선택해주세요."}
+          </span>
+        </div>
+        {errors.file && <p className="mt-1 text-red-500 typo-regular-2">{errors.file.message as string}</p>}
+
+        <div className="mt-2 flex flex-wrap items-center gap-4">
+          <label className="cursor-pointer rounded-full bg-sub-c-100 px-4 py-2.5 font-serif text-sub-c-500 typo-sb-9">
+            증명서 첨부
+            <input id="file-upload" type="file" className="hidden" {...register("file")} />
+          </label>
+          <Link
+            href="/university/score/example/gpa-cert"
+            target="_blank"
+            className="rounded-full bg-sub-e-100 px-4 py-2.5 text-sub-e-500 typo-sb-9"
+          >
+            증명서 예시 보기
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+
+  const submitButton = (
+    <button
+      className={clsx(
+        "w-full rounded-lg py-4 text-white typo-sb-9",
+        isValid ? "bg-primary" : "cursor-not-allowed bg-k-100",
+      )}
+      disabled={!isValid}
+    >
+      다음
+    </button>
+  );
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <div className="mx-auto max-w-5xl">
+          <header className="mb-8">
+            <p className="text-primary typo-sb-9">Score submit</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(460px,600px)_minmax(300px,360px)]">
+            <section className="rounded-lg border border-k-100 bg-white p-8">
+              <SubmitLinkTab variant="desktop" />
+              <form onSubmit={handleSubmit(onSubmit)} className="mt-8">
+                {formTitle}
+                {formFields}
+                <div className="mt-8">{submitButton}</div>
+              </form>
+            </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>
+    );
+  }
+
   return (
     <>
       <SubmitLinkTab />
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="pt-[30px]">
-          <div>
-            <p className="font-serif text-k-900 typo-sb-3">대학교 성적 입력</p>
-            <p className="font-serif text-k-600 typo-medium-3">
-              공적 증명서만 인정됩니다.
-              <br />
-              미인정 서류를 업로드 할 경우 권한이 거부될 수 있습니다.
-            </p>
-          </div>
-
-          <div className="mt-[30px] flex flex-col gap-5">
-            {/* 학점 기준 드롭다운 */}
-            <div className="flex flex-col gap-1">
-              <label className="font-serif typo-sb-7">학점 기준</label>
-              <Controller
-                name="gpaCriteria"
-                control={control}
-                render={({ field }) => (
-                  <CustomDropdown
-                    placeholderSelect=""
-                    value={field.value}
-                    onChange={field.onChange}
-                    placeholder="학점 기준을 선택해주세요"
-                    options={[
-                      { value: "4.5", label: "4.5 만점" },
-                      { value: "4.3", label: "4.3 만점" },
-                    ]}
-                  />
-                )}
-              />
-              {errors.gpaCriteria && <p className="mt-1 text-red-500 typo-regular-2">{errors.gpaCriteria.message}</p>}
-            </div>
-
-            {/* 점수 입력 */}
-            <div className="flex flex-col gap-1">
-              <label className="font-serif typo-sb-7">점수</label>
-              <input
-                type="number"
-                step="0.01" // 소수점 두 자리까지 입력 가능하도록 설정
-                className="flex h-10 items-center rounded-lg bg-k-50 px-5 py-2.5 font-serif text-secondary typo-sb-9"
-                {...register("gpa")}
-              />
-              {errors.gpa && <p className="mt-1 text-red-500 typo-regular-2">{errors.gpa.message}</p>}
-            </div>
-
-            {/* 증명서 첨부 */}
-            <div className="flex flex-col gap-1">
-              <label className="font-serif typo-sb-7">증명서 첨부</label>
-              <div className="flex items-center gap-3">
-                <span className="flex h-10 flex-1 items-center truncate rounded-lg bg-k-50 px-5 py-2.5 font-serif text-secondary typo-sb-9">
-                  {selectedFile?.[0]?.name || "파일을 선택해주세요."}
-                </span>
-              </div>
-              {errors.file && <p className="mt-1 text-red-500 typo-regular-2">{errors.file.message as string}</p>}
-
-              <div className="mt-2 flex items-center gap-4">
-                <label className="cursor-pointer rounded-full bg-sub-c-100 px-4 py-2.5 font-serif text-sub-c-500 typo-sb-9">
-                  증명서 첨부
-                  <input id="file-upload" type="file" className="hidden" {...register("file")} />
-                </label>
-                <Link
-                  href="/university/score/example/gpa-cert"
-                  target="_blank"
-                  className="rounded-full bg-sub-e-100 px-4 py-2.5 text-sub-e-500 typo-sb-9"
-                >
-                  증명서 예시 보기
-                </Link>
-              </div>
-            </div>
-          </div>
+          {formTitle}
+          {formFields}
         </div>
         <div className="mt-10 w-full max-w-app md:max-w-none">
-          <button
-            className={clsx(
-              "mb-10 w-full rounded-lg py-4 text-white typo-sb-9",
-              isValid ? "bg-primary" : "cursor-not-allowed bg-k-100",
-            )}
-            disabled={!isValid}
-          >
-            다음
-          </button>
+          <div className="mb-10">{submitButton}</div>
         </div>
       </form>
     </>
diff --git a/apps/web/src/app/university/score/submit/gpa/page.tsx b/apps/web/src/app/university/score/submit/gpa/page.tsx
index 63b2f17b6..e146e3af7 100644
--- a/apps/web/src/app/university/score/submit/gpa/page.tsx
+++ b/apps/web/src/app/university/score/submit/gpa/page.tsx
@@ -13,7 +13,7 @@ const SubmitGpaPage = () => {
   return (
     <>
       <TopDetailNavigation title="성적 입력하기" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <GpaSubmitForm />
       </div>
     </>
diff --git a/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx b/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx
index 36dac3921..ecc65dc81 100644
--- a/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx
+++ b/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx
@@ -12,6 +12,7 @@ import SubmitResult, { type InfoRowProps } from "@/components/score/SubmitResult
 import CustomDropdown from "@/components/search/CustomDropdown";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import { formatLanguageTestScoreWithMax, LanguageTestEnum, languageTestScoreInfo } from "@/types/score";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import { type LanguageTestFormData, languageTestSchema } from "./_lib/schema";
 
 const LanguageTestSubmitForm = () => {
@@ -19,8 +20,8 @@ const LanguageTestSubmitForm = () => {
   const [showResult, setShowResult] = useState(false);
   const { mutateAsync: postLanguageTestScore } = usePostLanguageTestScore();
   const [submittedData, setSubmittedData] = useState<LanguageTestFormData | null>(null);
+  const isDesktop = useIsDesktopViewport();
 
-  // 3. react-hook-form 설정
   const {
     register,
     handleSubmit,
@@ -30,12 +31,11 @@ const LanguageTestSubmitForm = () => {
     formState: { errors, isValid },
   } = useForm<LanguageTestFormData>({
     resolver: zodResolver(languageTestSchema),
-    mode: "onChange", // 입력값이 변경될 때마다 유효성 검사
+    mode: "onChange",
   });
 
   const selectedFile = watch("file");
 
-  // 4. 폼 제출 핸들러
   const onSubmit: SubmitHandler<LanguageTestFormData> = async (data) => {
     try {
       await postLanguageTestScore({
@@ -47,7 +47,6 @@ const LanguageTestSubmitForm = () => {
         file: data.file[0],
       });
 
-      // 성공 시에만 실행
       reset();
       setShowResult(true);
       setSubmittedData(data);
@@ -56,6 +55,8 @@ const LanguageTestSubmitForm = () => {
     }
   };
 
+  if (isDesktop === null) return null;
+
   if (showResult && submittedData) {
     const submittedTestInfo = languageTestScoreInfo[submittedData.testType];
 
@@ -77,6 +78,7 @@ const LanguageTestSubmitForm = () => {
         title="어학 성적 제출 완료"
         description="성적 승인은 최대 3일까지 걸릴 수 있습니다."
         buttonText="학점입력하기"
+        variant={isDesktop ? "desktop" : "mobile"}
         onClick={() => router.push("/university/score/submit/gpa")}
         handleClose={() => setShowResult(false)}
         infoRows={infoRows}
@@ -84,90 +86,131 @@ const LanguageTestSubmitForm = () => {
     );
   }
 
+  const formTitle = (
+    <div>
+      <p className="font-serif text-k-900 typo-sb-3">어학 성적 입력</p>
+      <p className="font-serif text-k-600 typo-medium-3">
+        공적 증명서만 인정됩니다.
+        <br />
+        미인정 서류를 업로드 할 경우 권한이 거부될 수 있습니다.
+      </p>
+    </div>
+  );
+
+  const formFields = (
+    <div className="mt-[30px] flex flex-col gap-5">
+      <div className="flex flex-col gap-1">
+        <label className="font-serif typo-sb-7">어학 종류</label>
+        <Controller
+          name="testType"
+          control={control}
+          render={({ field }) => (
+            <CustomDropdown
+              placeholderSelect=""
+              value={field.value}
+              onChange={field.onChange}
+              placeholder="어학 종류를 선택해주세요"
+              options={Object.values(LanguageTestEnum).map((value) => ({
+                value: value,
+                label: value,
+              }))}
+            />
+          )}
+        />
+        {errors.testType && <p className="mt-1 text-red-500 typo-regular-2">{errors.testType.message}</p>}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <label className="font-serif typo-sb-7">점수</label>
+        <input
+          type="text"
+          className="flex h-10 items-center rounded-lg bg-k-50 px-5 py-2.5 font-serif text-secondary typo-sb-9"
+          {...register("score")}
+        />
+        {errors.score && <p className="mt-1 text-red-500 typo-regular-2">{errors.score.message}</p>}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <label className="font-serif typo-sb-7">증명서 첨부</label>
+        <div className="flex items-center gap-3">
+          <span className="flex h-10 flex-1 items-center truncate rounded-lg bg-k-50 px-5 py-2.5 font-serif text-secondary typo-sb-9">
+            {selectedFile?.[0]?.name || "파일을 선택해주세요."}
+          </span>
+        </div>
+        {errors.file && <p className="mt-1 text-red-500 typo-regular-2">{errors.file.message as string}</p>}
+        <div className="mt-2 flex flex-wrap items-center gap-4">
+          <label className="cursor-pointer rounded-full bg-sub-c-100 px-4 py-2.5 font-serif text-sub-c-500 typo-sb-9">
+            증명서 첨부
+            <input id="file-upload" type="file" className="hidden" {...register("file")} />
+          </label>
+          <Link
+            href="/university/score/example/lang-cert"
+            target="_blank"
+            className="rounded-full bg-sub-e-100 px-4 py-2.5 text-sub-e-500 typo-sb-9"
+          >
+            증명서 예시 보기
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+
+  const submitButton = (
+    <button
+      className={clsx(
+        "w-full rounded-lg py-4 text-white typo-sb-9",
+        isValid ? "bg-primary" : "cursor-not-allowed bg-k-100",
+      )}
+      disabled={!isValid}
+    >
+      다음
+    </button>
+  );
+
+  if (isDesktop) {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <div className="mx-auto max-w-5xl">
+          <header className="mb-8">
+            <p className="text-primary typo-sb-9">Score submit</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(460px,600px)_minmax(300px,360px)]">
+            <section className="rounded-lg border border-k-100 bg-white p-8">
+              <SubmitLinkTab isActiveGpa={false} variant="desktop" />
+              <form onSubmit={handleSubmit(onSubmit)} className="mt-8">
+                {formTitle}
+                {formFields}
+                <div className="mt-8">{submitButton}</div>
+              </form>
+            </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>
+    );
+  }
+
   return (
     <>
       <SubmitLinkTab isActiveGpa={false} />
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="px-5 pt-[30px]">
-          <div>
-            <p className="font-serif text-k-900 typo-sb-3">어학 성적 입력</p>
-            <p className="font-serif text-k-600 typo-medium-3">
-              공적 증명서만 인정됩니다.
-              <br />
-              미인정 서류를 업로드 할 경우 권한이 거부될 수 있습니다.
-            </p>
-          </div>
-
-          <div className="mt-[30px] flex flex-col gap-5">
-            {/* 어학 종류 드롭다운 */}
-            <div className="flex flex-col gap-1">
-              <label className="font-serif typo-sb-7">어학 종류</label>
-              {/* 5. Controller로 CustomDropdown 연동 */}
-              <Controller
-                name="testType"
-                control={control}
-                render={({ field }) => (
-                  <CustomDropdown
-                    placeholderSelect=""
-                    value={field.value}
-                    onChange={field.onChange} // ❌ setValue -> ✅ onChange 로 수정
-                    placeholder="어학 종류를 선택해주세요"
-                    options={Object.values(LanguageTestEnum).map((value) => ({
-                      value: value,
-                      label: value,
-                    }))}
-                  />
-                )}
-              />
-              {errors.testType && <p className="mt-1 text-red-500 typo-regular-2">{errors.testType.message}</p>}
-            </div>
-
-            {/* 점수 입력 */}
-            <div className="flex flex-col gap-1">
-              <label className="font-serif typo-sb-7">점수</label>
-              <input
-                type="text"
-                className="flex h-10 items-center rounded-lg bg-k-50 px-5 py-2.5 font-serif text-secondary typo-sb-9"
-                {...register("score")}
-              />
-              {errors.score && <p className="mt-1 text-red-500 typo-regular-2">{errors.score.message}</p>}
-            </div>
-
-            {/* 증명서 첨부 */}
-            <div className="flex flex-col gap-1">
-              <label className="font-serif typo-sb-7">증명서 첨부</label>
-              <div className="flex items-center gap-3">
-                <span className="flex h-10 flex-1 items-center truncate rounded-lg bg-k-50 px-5 py-2.5 font-serif text-secondary typo-sb-9">
-                  {selectedFile?.[0]?.name || "파일을 선택해주세요."}
-                </span>
-              </div>
-              {errors.file && <p className="mt-1 text-red-500 typo-regular-2">{errors.file.message as string}</p>}
-              <div className="mt-2 flex items-center gap-4">
-                <label className="cursor-pointer rounded-full bg-sub-c-100 px-4 py-2.5 font-serif text-sub-c-500 typo-sb-9">
-                  증명서 첨부
-                  <input id="file-upload" type="file" className="hidden" {...register("file")} />
-                </label>
-                <Link
-                  href="/university/score/example/lang-cert"
-                  target="_blank"
-                  className="rounded-full bg-sub-e-100 px-4 py-2.5 text-sub-e-500 typo-sb-9"
-                >
-                  증명서 예시 보기
-                </Link>
-              </div>
-            </div>
-          </div>
+          {formTitle}
+          {formFields}
         </div>
         <div className="mt-10 w-full max-w-app px-5 md:max-w-none">
-          <button
-            className={clsx(
-              "mb-10 w-full rounded-lg py-4 text-white typo-sb-9",
-              isValid ? "bg-primary" : "cursor-not-allowed bg-k-100",
-            )}
-            disabled={!isValid}
-          >
-            다음
-          </button>
+          <div className="mb-10">{submitButton}</div>
         </div>
       </form>
     </>
diff --git a/apps/web/src/app/university/score/submit/language-test/page.tsx b/apps/web/src/app/university/score/submit/language-test/page.tsx
index ffdd4fe7a..1da8ed682 100644
--- a/apps/web/src/app/university/score/submit/language-test/page.tsx
+++ b/apps/web/src/app/university/score/submit/language-test/page.tsx
@@ -13,7 +13,7 @@ const SubmitLanguageTestPage = () => {
   return (
     <>
       <TopDetailNavigation title="성적 입력하기" />
-      <div className="w-full px-5">
+      <div className="w-full px-5 md:px-0">
         <LanguageTestSubmitForm />
       </div>
     </>
diff --git a/apps/web/src/components/score/SubmitLinkTab.tsx b/apps/web/src/components/score/SubmitLinkTab.tsx
index 66c4f3452..d7b853d45 100644
--- a/apps/web/src/components/score/SubmitLinkTab.tsx
+++ b/apps/web/src/components/score/SubmitLinkTab.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 
 type SubmitLinkTabProps = {
   isActiveGpa?: boolean;
+  variant?: "mobile" | "desktop";
   color?: {
     activeBtn?: string;
     deactiveBtn?: string;
@@ -11,7 +12,7 @@ type SubmitLinkTabProps = {
   };
 };
 
-const SubmitLinkTab = ({ color, isActiveGpa = true }: SubmitLinkTabProps) => {
+const SubmitLinkTab = ({ color, isActiveGpa = true, variant = "mobile" }: SubmitLinkTabProps) => {
   const defaultColor = {
     activeBtnFont: "text-black",
     deactiveBtnFont: "text-gray-200",
@@ -20,6 +21,32 @@ const SubmitLinkTab = ({ color, isActiveGpa = true }: SubmitLinkTabProps) => {
     activeBtnFont: color?.activeBtnFont ? `text-[${color.activeBtnFont}]` : defaultColor.activeBtnFont,
     deactiveBtnFont: color?.deactiveBtnFont ? `text-[${color.deactiveBtnFont}]` : defaultColor.deactiveBtnFont,
   };
+
+  if (variant === "desktop") {
+    return (
+      <div className="grid h-11 w-full grid-cols-2 rounded-lg bg-k-50 p-1 typo-medium-2">
+        <Link
+          href="/university/score/submit/language-test"
+          className={clsx(
+            "flex items-center justify-center rounded-md transition-colors",
+            !isActiveGpa ? "bg-white text-primary shadow-sdwA" : "text-k-500 hover:text-k-700",
+          )}
+        >
+          공인어학
+        </Link>
+        <Link
+          href="/university/score/submit/gpa"
+          className={clsx(
+            "flex items-center justify-center rounded-md transition-colors",
+            isActiveGpa ? "bg-white text-primary shadow-sdwA" : "text-k-500 hover:text-k-700",
+          )}
+        >
+          학점
+        </Link>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-9 w-full cursor-pointer flex-row typo-medium-2">
       <Link
diff --git a/apps/web/src/components/score/SubmitResult.tsx b/apps/web/src/components/score/SubmitResult.tsx
index a8e97b8f5..5b2dcd7a9 100644
--- a/apps/web/src/components/score/SubmitResult.tsx
+++ b/apps/web/src/components/score/SubmitResult.tsx
@@ -18,58 +18,87 @@ interface SubmitResultProps {
   description: string;
   infoRows: InfoRowProps[];
   buttonText: string;
+  variant?: "mobile" | "desktop";
   onClick?: () => void;
   handleClose?: () => void;
 }
 
 // --- 메인 컴포넌트 ---
-const SubmitResult = ({ title, description, infoRows, buttonText, onClick, handleClose }: SubmitResultProps) => {
-  return (
-    <div className="flex min-h-screen w-full flex-col items-center justify-center p-4 font-sans">
-      <div className="w-full max-w-md text-center">
-        {/* 상단 아이콘 및 텍스트 */}
-        <div className="mb-8 flex flex-col items-center">
-          <IconCheck />
-          <h1 className="mt-4 text-gray-800 typo-bold-1">{title}</h1>
-          <p className="mt-2 text-gray-500 typo-regular-2">{description}</p>
-        </div>
+const SubmitResult = ({
+  title,
+  description,
+  infoRows,
+  buttonText,
+  variant = "mobile",
+  onClick,
+  handleClose,
+}: SubmitResultProps) => {
+  const content = (
+    <div className="w-full max-w-md text-center">
+      <div className="mb-8 flex flex-col items-center">
+        <IconCheck />
+        <h1 className="mt-4 text-gray-800 typo-bold-1">{title}</h1>
+        <p className="mt-2 text-gray-500 typo-regular-2">{description}</p>
+      </div>
 
-        {/* 정보 카드 */}
-        <div className="rounded-2xl border border-gray-200 bg-white p-2 shadow-sm">
-          <div className="space-y-2">
-            {infoRows.map((row, index) => (
-              <div
-                key={row.label}
-                className={clsx(
-                  "flex items-center justify-between px-4 py-5 typo-regular-2",
-                  index < infoRows.length - 1 && "border-b border-gray-100",
-                )}
-              >
-                <span className="text-gray-600 typo-medium-2">{row.label}</span>
-                <div className="flex items-center gap-3">
-                  <span className={clsx("typo-sb-9", row.statusColor || "text-gray-900")}>{row.status}</span>
-                  {row.details && <span className="text-gray-400">{row.details}</span>}
-                </div>
+      <div className="rounded-lg border border-gray-200 bg-white p-2 shadow-sm">
+        <div className="space-y-2">
+          {infoRows.map((row, index) => (
+            <div
+              key={row.label}
+              className={clsx(
+                "flex items-center justify-between px-4 py-5 typo-regular-2",
+                index < infoRows.length - 1 && "border-b border-gray-100",
+              )}
+            >
+              <span className="text-gray-600 typo-medium-2">{row.label}</span>
+              <div className="flex min-w-0 items-center gap-3 pl-4">
+                <span className={clsx("shrink-0 typo-sb-9", row.statusColor || "text-gray-900")}>{row.status}</span>
+                {row.details && <span className="truncate text-gray-400">{row.details}</span>}
               </div>
-            ))}
-          </div>
+            </div>
+          ))}
         </div>
+      </div>
 
-        {/* 하단 버튼 */}
-        <div className="mt-8 grid grid-cols-2 gap-4">
+      <div className={clsx("mt-8 grid gap-4", handleClose ? "grid-cols-2" : "grid-cols-1")}>
+        {handleClose && (
           <button
+            type="button"
             onClick={handleClose}
             className="w-full rounded-lg border border-primary bg-primary-100 py-3 text-primary typo-sb-9"
           >
             닫기
           </button>
-          <button onClick={onClick} className="w-full rounded-lg bg-primary py-3 text-white typo-sb-9">
-            {buttonText}
-          </button>
-        </div>
+        )}
+        <button type="button" onClick={onClick} className="w-full rounded-lg bg-primary py-3 text-white typo-sb-9">
+          {buttonText}
+        </button>
       </div>
     </div>
   );
+
+  if (variant === "desktop") {
+    return (
+      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+        <div className="mx-auto grid min-h-[calc(100vh-64px)] max-w-5xl items-center gap-8 xl:grid-cols-[minmax(420px,520px)_minmax(280px,340px)]">
+          <section className="flex justify-center">{content}</section>
+          <aside className="rounded-lg border border-k-100 bg-white p-6">
+            <p className="text-primary typo-sb-9">Score submitted</p>
+            <h2 className="mt-2 text-k-900 typo-bold-4">승인 안내</h2>
+            <p className="mt-3 text-k-500 typo-medium-3">
+              제출한 성적은 운영팀 확인 후 사용할 수 있어요. 심사 중에는 지원에 사용할 수 없습니다.
+            </p>
+            <div className="mt-5 rounded-lg bg-k-50 px-4 py-3 text-k-600 typo-medium-3">
+              승인 결과는 성적 확인하기 화면에서 다시 확인할 수 있습니다.
+            </div>
+          </aside>
+        </div>
+      </div>
+    );
+  }
+
+  return <div className="flex min-h-screen w-full flex-col items-center justify-center p-4 font-sans">{content}</div>;
 };
 
 // --- 컴포넌트 사용 예시 ---

From 7e67a467bb6625cab3dd983a121fa8a746da53f9 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 09:26:38 +0900
Subject: [PATCH 09/20] =?UTF-8?q?feat:=20=EC=84=B1=EC=A0=81=20=EC=A6=9D?=
 =?UTF-8?q?=EB=AA=85=EC=84=9C=20=EC=98=88=EC=8B=9C=20=EB=8D=B0=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=ED=86=B1=20=EB=B7=B0=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../score/example/gpa-cert/page.tsx           | 253 +++++++++++-------
 .../score/example/lang-cert/page.tsx          |  91 ++++++-
 2 files changed, 240 insertions(+), 104 deletions(-)

diff --git a/apps/web/src/app/university/score/example/gpa-cert/page.tsx b/apps/web/src/app/university/score/example/gpa-cert/page.tsx
index bfb746916..11d2d0690 100644
--- a/apps/web/src/app/university/score/example/gpa-cert/page.tsx
+++ b/apps/web/src/app/university/score/example/gpa-cert/page.tsx
@@ -4,114 +4,187 @@ import Link from "next/link";
 import BlockBtn from "@/components/button/BlockBtn";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import Image from "@/components/ui/FallbackImage";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+
+const GPA_CERT_STEPS = [
+  {
+    title: "1. 인하대 포털 > 학사행정",
+    image: {
+      src: "/images/gpa-cert-example-1.png",
+      width: 458,
+      height: 215,
+      mobileWidth: 162,
+      mobileHeight: 76,
+    },
+  },
+  {
+    title: "2. 성적 > 성적 및 석차 확인",
+    image: {
+      src: "/images/gpa-cert-example-2.png",
+      width: 432,
+      height: 192,
+      mobileWidth: 177,
+      mobileHeight: 80,
+    },
+  },
+  {
+    title: "3. PDF 다운로드",
+    image: {
+      src: "/images/gpa-cert-example-3.png",
+      width: 1695,
+      height: 400,
+      mobileWidth: 291,
+      mobileHeight: 68,
+    },
+  },
+] as const;
+
+const GPA_CERT_LINKS = [
+  {
+    href: "https://portal.inha.ac.kr/",
+    label: "인하대학교 포털시스템",
+  },
+  {
+    href: "https://cert.inha.ac.kr/icerti/index_internet.jsp",
+    label: "인하대학교 증명발급시스템",
+  },
+] as const;
 
 const GpaCertExamplePage = () => {
+  const isDesktop = useIsDesktopViewport();
   const closeWindow = () => {
     window.close();
   };
 
-  const divStyle = {
-    padding: "33px 20px 36px 20px",
-    fontFamily: "Pretendard",
-    fontSize: "14px",
-    lineHeight: "150%",
-  };
-
-  const h1Style = {
-    display: "block",
-    fontFamily: "Pretendard",
-    fontSize: "18px",
-    fontWeight: 700,
-    lineHeight: "150%",
-  };
-
-  const h3Style = {
-    marginTop: "30px",
-    display: "block",
-    fontFamily: "Pretendard",
-    fontSize: "14px",
-    lineHeight: "150%",
-  };
+  if (isDesktop === null) return null;
 
-  const aStyle = {
-    display: "block",
-    marginTop: "24px",
-    fontFamily: "Pretendard",
-    fontSize: "14px",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "150%",
-    textDecorationLine: "underline",
-  };
+  return isDesktop ? <GpaCertDesktopView onClose={closeWindow} /> : <GpaCertMobileView onClose={closeWindow} />;
+};
 
+const GpaCertMobileView = ({ onClose }: { onClose: () => void }) => {
   return (
     <div className="w-full">
-      <TopDetailNavigation title="증명서 예시" handleBack={closeWindow} />
-      <div style={divStyle} className="border-b border-magic-certificate-divider text-gray-800">
+      <TopDetailNavigation title="증명서 예시" handleBack={onClose} />
+      <div className="border-b border-magic-certificate-divider px-5 py-[33px] pb-9 text-gray-800 typo-regular-2">
         학번과 직전학기가 표시된 증명서만 승인됩니다.
         <br />
         <br />
         증명서 포털에서 발급되는 성적표 또는 인하대 수강신청 또는 앱에서 직전학기 성적이 명시된 스크린 샷 허용
       </div>
-      <div style={{ margin: "23px 20px 0 20px" }}>
-        <span style={h1Style} className="text-gray-800">
-          성적 증명서 발급 방법
-        </span>
-        <span style={h3Style} className="text-gray-800">
-          1. 인하대 포털 {">"} 학사행정
-        </span>
-        <Image
-          style={{ marginTop: "10px" }}
-          src="/images/gpa-cert-example-1.png"
-          width={162}
-          height={76}
-          alt="성적 증명서 발급 방법"
-        />
-        <span style={h3Style} className="text-gray-800">
-          2. 성적 {">"} 성적 및 석차 확인
-        </span>
-        <Image
-          style={{ marginTop: "10px" }}
-          src="/images/gpa-cert-example-2.png"
-          width={177}
-          height={80}
-          alt="성적 증명서 발급 방법"
-        />
-        <span style={h3Style} className="text-gray-800">
-          3. PDF 다운로드
-        </span>
-        <Image
-          style={{ marginTop: "10px" }}
-          src="/images/gpa-cert-example-3.png"
-          width={291}
-          height={68}
-          alt="성적 증명서 발급 방법"
-        />
-        <span style={h3Style} className="text-gray-800">
-          4. 파일 첨부하기 버튼 {">"} 업로드 완료
-        </span>
-        <span style={{ ...h1Style, marginTop: "48px" }}>성적 증명서 발급 방법</span>
-        <Link style={aStyle} className="text-black" href="https://portal.inha.ac.kr/" target="_blank">
-          인하대학교 포털시스템 (inha.ac.kr)
-        </Link>
-        <Link style={aStyle} href="https://cert.inha.ac.kr/icerti/index_internet.jsp" target="_blank">
-          인하대학교 증명발급시스템[ICerti] (inha.ac.kr)
-        </Link>
-        <span
-          className="text-black"
-          style={{
-            fontFamily: "Pretendard",
-            fontSize: "12px",
-            fontStyle: "normal",
-            fontWeight: 400,
-            lineHeight: "150%",
-          }}
-        >
+      <div className="mx-5 mt-[23px]">
+        <span className="block text-gray-800 typo-bold-4">성적 증명서 발급 방법</span>
+        {GPA_CERT_STEPS.map((step) => (
+          <div key={step.title}>
+            <span className="mt-[30px] block text-gray-800 typo-regular-2">{step.title}</span>
+            <Image
+              className="mt-2.5 h-auto max-w-full"
+              src={step.image.src}
+              width={step.image.mobileWidth}
+              height={step.image.mobileHeight}
+              alt="성적 증명서 발급 방법"
+            />
+          </div>
+        ))}
+        <span className="mt-[30px] block text-gray-800 typo-regular-2">4. 파일 첨부하기 버튼 {">"} 업로드 완료</span>
+        <span className="mt-12 block text-gray-800 typo-bold-4">발급 바로가기</span>
+        {GPA_CERT_LINKS.map((link) => (
+          <Link
+            key={link.href}
+            className="mt-6 block text-black underline typo-medium-2"
+            href={link.href}
+            target="_blank"
+          >
+            {link.label} (inha.ac.kr)
+          </Link>
+        ))}
+        <span className="mt-6 block text-black typo-regular-4">
           *포털 시스템뿐만 아니라 증명발급 시스템에서도 성적 증명서를 다운받을 수 있습니다.
         </span>
       </div>
-      <div style={{ margin: "60px 20px 0 20px" }}>
-        <BlockBtn onClick={closeWindow}>닫기</BlockBtn>
+      <div className="mx-5 mt-[60px]">
+        <BlockBtn onClick={onClose}>닫기</BlockBtn>
+      </div>
+    </div>
+  );
+};
+
+const GpaCertDesktopView = ({ onClose }: { onClose: () => void }) => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <div className="mx-auto max-w-6xl">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">Certificate guide</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-8">
+            <div className="rounded-lg bg-k-50 px-5 py-4 text-k-700 typo-medium-2">
+              학번과 직전학기가 표시된 증명서만 승인됩니다. 증명서 포털에서 발급되는 성적표 또는 직전학기 성적이 명시된
+              스크린샷을 사용할 수 있어요.
+            </div>
+
+            <div className="mt-8">
+              <h2 className="text-k-900 typo-bold-4">발급 방법</h2>
+              <div className="mt-5 grid gap-6">
+                {GPA_CERT_STEPS.map((step) => (
+                  <div key={step.title} className="rounded-lg border border-k-100 bg-white p-5">
+                    <h3 className="text-k-800 typo-sb-7">{step.title}</h3>
+                    <Image
+                      className="mt-4 h-auto w-full rounded-lg border border-k-100 bg-white"
+                      src={step.image.src}
+                      width={step.image.width}
+                      height={step.image.height}
+                      alt={step.title}
+                    />
+                  </div>
+                ))}
+                <div className="rounded-lg border border-k-100 bg-k-50 px-5 py-4 text-k-700 typo-medium-2">
+                  4. 파일 첨부하기 버튼을 눌러 다운로드한 파일을 업로드하면 됩니다.
+                </div>
+              </div>
+            </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">PDF, 이미지 파일 모두 업로드할 수 있습니다.</div>
+            </div>
+
+            <div className="mt-6">
+              <h3 className="text-k-900 typo-sb-7">발급 바로가기</h3>
+              <div className="mt-3 grid gap-2">
+                {GPA_CERT_LINKS.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    target="_blank"
+                    className="rounded-lg bg-sub-e-100 px-4 py-3 text-sub-e-500 typo-sb-9"
+                  >
+                    {link.label}
+                  </Link>
+                ))}
+              </div>
+              <p className="mt-3 text-k-400 typo-regular-4">
+                포털 시스템뿐만 아니라 증명발급 시스템에서도 성적 증명서를 다운받을 수 있습니다.
+              </p>
+            </div>
+
+            <button
+              type="button"
+              onClick={onClose}
+              className="mt-6 w-full rounded-lg bg-primary px-5 py-4 text-white typo-sb-9 transition-colors hover:bg-primary/90"
+            >
+              닫기
+            </button>
+          </aside>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/src/app/university/score/example/lang-cert/page.tsx b/apps/web/src/app/university/score/example/lang-cert/page.tsx
index 0d2ab4741..d8d3b9a37 100644
--- a/apps/web/src/app/university/score/example/lang-cert/page.tsx
+++ b/apps/web/src/app/university/score/example/lang-cert/page.tsx
@@ -3,37 +3,100 @@
 import BlockBtn from "@/components/button/BlockBtn";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import Image from "@/components/ui/FallbackImage";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
-const GpaCertExamplePage = () => {
+const LangCertExamplePage = () => {
+  const isDesktop = useIsDesktopViewport();
   const closeWindow = () => {
     window.close();
   };
 
-  const divStyle = {
-    padding: "33px 20px 27px 20px",
-    fontFamily: "Pretendard",
-    fontSize: "14px",
-    lineHeight: "150%",
-  };
+  if (isDesktop === null) return null;
+
+  return isDesktop ? <LangCertDesktopView onClose={closeWindow} /> : <LangCertMobileView onClose={closeWindow} />;
+};
 
+const LangCertMobileView = ({ onClose }: { onClose: () => void }) => {
   return (
     <div className="w-full">
-      <TopDetailNavigation title="증명서 예시" handleBack={closeWindow} />
-      <div style={divStyle} className="text-gray-800">
+      <TopDetailNavigation title="증명서 예시" handleBack={onClose} />
+      <div className="px-5 py-[33px] pb-[27px] text-gray-800 typo-regular-2">
         공인 어학 성적은 해당 홈페이지를 통해
         <br />
         공식 인증 기간 마크가 포함된 파일의 원본을 제출해주세요.
         <br />
         <br />* 본교 교환학생을 지원할때, 제출해야 하는 동일한 공인어학 점수 파일입니다.
       </div>
-      <div style={{ margin: "0 20px 0 20px" }}>
-        <Image src="/images/lang-cert-example-1.png" width={323} height={337} alt="성적 증명서 발급 방법" />
+      <div className="mx-5">
+        <Image
+          className="h-auto max-w-full"
+          src="/images/lang-cert-example-1.png"
+          width={323}
+          height={337}
+          alt="어학 증명서 예시"
+        />
       </div>
-      <div style={{ margin: "60px 20px 0 20px" }}>
-        <BlockBtn onClick={closeWindow}>닫기</BlockBtn>
+      <div className="mx-5 mt-[60px]">
+        <BlockBtn onClick={onClose}>닫기</BlockBtn>
+      </div>
+    </div>
+  );
+};
+
+const LangCertDesktopView = ({ onClose }: { onClose: () => void }) => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <div className="mx-auto max-w-6xl">
+        <header className="mb-8">
+          <p className="text-primary typo-sb-9">Certificate guide</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-8">
+            <div className="rounded-lg bg-k-50 px-5 py-4 text-k-700 typo-medium-2">
+              공인 어학 성적은 해당 시험 홈페이지에서 발급되는 원본 파일을 제출해 주세요. 본교 교환학생 지원 시 제출하는
+              동일한 공인어학 점수 파일입니다.
+            </div>
+
+            <div className="mt-8 overflow-hidden rounded-lg border border-k-100 bg-white p-5">
+              <h2 className="text-k-900 typo-bold-4">제출 파일 예시</h2>
+              <Image
+                className="mx-auto mt-5 h-auto w-full max-w-3xl rounded-lg border border-k-100 bg-white"
+                src="/images/lang-cert-example-1.png"
+                width={1011}
+                height={1055}
+                alt="어학 증명서 예시"
+              />
+            </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>
+            <p className="mt-5 text-k-500 typo-medium-3">
+              미인정 서류를 업로드하면 승인 거절될 수 있어요. 성적 입력 화면의 점수와 첨부 파일의 점수가 같은지도 함께
+              확인해 주세요.
+            </p>
+            <button
+              type="button"
+              onClick={onClose}
+              className="mt-6 w-full rounded-lg bg-primary px-5 py-4 text-white typo-sb-9 transition-colors hover:bg-primary/90"
+            >
+              닫기
+            </button>
+          </aside>
+        </div>
       </div>
     </div>
   );
 };
 
-export default GpaCertExamplePage;
+export default LangCertExamplePage;

From b864b84578bf8c1f7be823aff957d21ac94fac6e Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 10:05:36 +0900
Subject: [PATCH 10/20] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=9E=98?=
 =?UTF-8?q?=EB=B9=97=20=EB=A6=AC=EB=B7=B0=EC=99=80=20=EB=8C=80=ED=95=99=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20?=
 =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(home)/_ui/HomeUniversityCard.tsx         |  54 ++++++--
 .../src/app/university/(home)/page.tsx        |  65 +++++++--
 .../search/_ui/SearchPageContent.tsx          |  44 +++++-
 .../[homeUniversity]/search/page.tsx          |  34 ++++-
 .../src/app/university/search/PageContent.tsx |  44 +++++-
 .../src/app/university/search/SearchBar.tsx   |  21 ++-
 .../university/search/SearchClientContent.tsx | 129 ++++++++++++++----
 .../src/app/university/search/page.tsx        |  16 ++-
 .../[postId]/modify/PostModifyForm.tsx        |   6 +-
 .../community/[boardCode]/create/PostForm.tsx |   6 +-
 .../MentorClient/_ui/MenteePageTabs/index.tsx |   2 +-
 .../mentor/chat/_ui/ChatPageClient/index.tsx  |   9 +-
 apps/web/src/app/my/apply-mentor/page.tsx     |  13 +-
 .../_hooks/useSelectUniversities.ts           |   6 +-
 .../my/favorite/_ui/FavoriteContent/index.tsx |   3 +-
 .../app/my/match/_ui/MatchContent/index.tsx   |   2 +-
 apps/web/src/app/terms/page.tsx               |  12 +-
 .../application/ScorePageContent.tsx          |   8 +-
 .../application/apply/ApplyPageContent.tsx    |   4 +-
 .../src/app/university/score/ScoreCard.tsx    |   5 +-
 apps/web/src/app/university/score/page.tsx    |   2 +-
 .../login/signup/SignupPolicyScreen.tsx       |   2 +-
 apps/web/src/constants/university.ts          |   3 +-
 apps/web/src/types/university.ts              |   2 +-
 24 files changed, 401 insertions(+), 91 deletions(-)

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) => {
       </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;
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 (
-    <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>
+    </>
   );
 };
 
diff --git a/apps/university-web/src/app/university/[homeUniversity]/search/_ui/SearchPageContent.tsx b/apps/university-web/src/app/university/[homeUniversity]/search/_ui/SearchPageContent.tsx
index 57e0688cb..a8c3776ce 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/search/_ui/SearchPageContent.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/search/_ui/SearchPageContent.tsx
@@ -34,7 +34,40 @@ interface SearchPageContentProps {
   homeUniversitySlug: string;
 }
 
-const SearchPageContent = ({ homeUniversitySlug }: SearchPageContentProps) => {
+const SearchPageContent = (props: SearchPageContentProps) => {
+  return (
+    <SearchPageContentBase
+      {...props}
+      regionListClassName="mb-6 flex gap-2 overflow-x-auto"
+      dropdownGridClassName="grid grid-cols-1 gap-3"
+      submitClassName="mt-10"
+    />
+  );
+};
+
+export const DesktopSearchPageContent = (props: SearchPageContentProps) => {
+  return (
+    <SearchPageContentBase
+      {...props}
+      regionListClassName="mb-6 flex flex-wrap gap-2"
+      dropdownGridClassName="grid gap-3 md:grid-cols-2"
+      submitClassName="mt-8 w-full md:max-w-xs"
+    />
+  );
+};
+
+type SearchPageContentBaseProps = SearchPageContentProps & {
+  regionListClassName: string;
+  dropdownGridClassName: string;
+  submitClassName: string;
+};
+
+const SearchPageContentBase = ({
+  homeUniversitySlug,
+  regionListClassName,
+  dropdownGridClassName,
+  submitClassName,
+}: SearchPageContentBaseProps) => {
   const router = useRouter();
   const [searchText, setSearchText] = useState("");
 
@@ -97,7 +130,7 @@ const SearchPageContent = ({ homeUniversitySlug }: SearchPageContentProps) => {
       {/* 필터 검색 폼 */}
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-1 flex-col">
         {/* 지역 필터 */}
-        <div className="mb-6 flex space-x-2">
+        <div className={regionListClassName}>
           {REGIONS_SEARCH.map((region) => (
             <button
               key={region}
@@ -122,7 +155,7 @@ const SearchPageContent = ({ homeUniversitySlug }: SearchPageContentProps) => {
         </div>
 
         {/* 어학 및 국가 선택 */}
-        <div className="space-y-3">
+        <div className={dropdownGridClassName}>
           <Controller
             name="languageTestType"
             control={control}
@@ -175,7 +208,10 @@ const SearchPageContent = ({ homeUniversitySlug }: SearchPageContentProps) => {
 
         <button
           type="submit"
-          className="mt-10 rounded-lg bg-primary px-4 py-3 text-center text-white transition-colors typo-sb-9 hover:bg-primary-600"
+          className={clsx(
+            "rounded-lg bg-primary px-4 py-3 text-center text-white transition-colors typo-sb-9 hover:bg-primary-600",
+            submitClassName,
+          )}
         >
           학교 검색
         </button>
diff --git a/apps/university-web/src/app/university/[homeUniversity]/search/page.tsx b/apps/university-web/src/app/university/[homeUniversity]/search/page.tsx
index 2d31245fe..b8b5dfeb4 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/search/page.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/search/page.tsx
@@ -6,7 +6,7 @@ import { getHomeUniversityBySlug, HOME_UNIVERSITY_SLUGS } from "@/constants/univ
 import type { HomeUniversitySlug } from "@/types/university";
 import { NO_INDEX_ROBOTS } from "@/utils/seo";
 
-import SearchPageContent from "./_ui/SearchPageContent";
+import SearchPageContent, { DesktopSearchPageContent } from "./_ui/SearchPageContent";
 
 export const revalidate = false;
 export const dynamicParams = false;
@@ -62,13 +62,43 @@ const SearchPage = async ({ params }: PageProps) => {
         title={`${universityInfo.shortName} 파견학교 검색`}
         backHref={`/university/${homeUniversity}`}
       />
-      <div className="w-full">
+      <div className="w-full md:hidden">
         <main className="flex flex-1 flex-col p-5">
           <h2 className="mb-1 typo-bold-1">오직 나를 위한</h2>
           <h2 className="mb-6 typo-bold-1">맞춤 파견 학교 찾기</h2>
           <SearchPageContent homeUniversitySlug={homeUniversity} />
         </main>
       </div>
+      <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">{universityInfo.shortName} search</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">맞춤 파견 학교 찾기</h1>
+            <p className="mt-2 text-k-500 typo-medium-2">
+              {universityInfo.shortName} 학생 기준으로 지역, 국가, 어학 조건에 맞는 학교를 찾아보세요.
+            </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">
+                <DesktopSearchPageContent homeUniversitySlug={homeUniversity} />
+              </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">소속 학교: {universityInfo.name}</div>
+                <div className="rounded-lg bg-k-50 px-4 py-3">지역을 여러 개 선택해 넓게 탐색할 수 있어요.</div>
+                <div className="rounded-lg bg-k-50 px-4 py-3">국가는 최대 3개까지 조합할 수 있어요.</div>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </div>
     </>
   );
 };
diff --git a/apps/university-web/src/app/university/search/PageContent.tsx b/apps/university-web/src/app/university/search/PageContent.tsx
index e9a7f9cd9..6d81c3297 100644
--- a/apps/university-web/src/app/university/search/PageContent.tsx
+++ b/apps/university-web/src/app/university/search/PageContent.tsx
@@ -33,8 +33,41 @@ interface SchoolSearchFormProps {
   homeUniversitySlug: HomeUniversitySlug;
 }
 
+const SchoolSearchForm = (props: SchoolSearchFormProps) => {
+  return (
+    <SchoolSearchFormBase
+      {...props}
+      regionListClassName="mb-6 flex gap-2 overflow-x-auto"
+      dropdownGridClassName="grid grid-cols-1 gap-3"
+      submitClassName="mt-10"
+    />
+  );
+};
+
+export const DesktopSchoolSearchForm = (props: SchoolSearchFormProps) => {
+  return (
+    <SchoolSearchFormBase
+      {...props}
+      regionListClassName="mb-6 flex flex-wrap gap-2"
+      dropdownGridClassName="grid gap-3 md:grid-cols-2"
+      submitClassName="mt-8 w-full md:max-w-xs"
+    />
+  );
+};
+
+type SchoolSearchFormBaseProps = SchoolSearchFormProps & {
+  regionListClassName: string;
+  dropdownGridClassName: string;
+  submitClassName: string;
+};
+
 // --- 메인 폼 컴포넌트 ---
-const SchoolSearchForm = ({ homeUniversitySlug }: SchoolSearchFormProps) => {
+const SchoolSearchFormBase = ({
+  homeUniversitySlug,
+  regionListClassName,
+  dropdownGridClassName,
+  submitClassName,
+}: SchoolSearchFormBaseProps) => {
   const router = useRouter();
 
   const { handleSubmit, control, watch, setValue } = useForm<SearchFormData>({
@@ -62,7 +95,7 @@ const SchoolSearchForm = ({ homeUniversitySlug }: SchoolSearchFormProps) => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="flex flex-1 flex-col">
-      <div className="mb-6 flex space-x-2">
+      <div className={regionListClassName}>
         {REGIONS_SEARCH.map((region) => (
           <button
             key={region}
@@ -83,7 +116,7 @@ const SchoolSearchForm = ({ homeUniversitySlug }: SchoolSearchFormProps) => {
           </button>
         ))}
       </div>
-      <div className="space-y-3">
+      <div className={dropdownGridClassName}>
         <Controller
           name="languageTestType"
           control={control}
@@ -135,7 +168,10 @@ const SchoolSearchForm = ({ homeUniversitySlug }: SchoolSearchFormProps) => {
       </div>
       <button
         type="submit"
-        className="mt-10 rounded-lg bg-primary px-4 py-3 text-center text-white transition-colors typo-sb-9 hover:bg-primary-600"
+        className={clsx(
+          "rounded-lg bg-primary px-4 py-3 text-center text-white transition-colors typo-sb-9 hover:bg-primary-600",
+          submitClassName,
+        )}
       >
         학교 검색
       </button>
diff --git a/apps/university-web/src/app/university/search/SearchBar.tsx b/apps/university-web/src/app/university/search/SearchBar.tsx
index 8f3bd06d5..ce88e1337 100644
--- a/apps/university-web/src/app/university/search/SearchBar.tsx
+++ b/apps/university-web/src/app/university/search/SearchBar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { z } from "zod";
@@ -26,8 +27,21 @@ interface SearchBarProps {
   initText?: string;
   homeUniversitySlug: HomeUniversitySlug;
 }
+
+const SearchBar = (props: SearchBarProps) => {
+  return <SearchBarForm {...props} inputClassName="p-3 pl-4 pr-10" />;
+};
+
+export const DesktopSearchBar = (props: SearchBarProps) => {
+  return <SearchBarForm {...props} inputClassName="h-12 px-4 pr-10" />;
+};
+
+type SearchBarFormProps = SearchBarProps & {
+  inputClassName: string;
+};
+
 // --- 폼 로직을 관리하는 부모 컴포넌트 ---
-const SearchBar = ({ initText, homeUniversitySlug }: SearchBarProps) => {
+const SearchBarForm = ({ initText, homeUniversitySlug, inputClassName }: SearchBarFormProps) => {
   const router = useRouter();
 
   const {
@@ -58,7 +72,10 @@ const SearchBar = ({ initText, homeUniversitySlug }: SearchBarProps) => {
         <input
           type="text"
           placeholder={"해외 파견 학교를 검색하세요."}
-          className="w-full rounded-lg border border-gray-c-200 bg-k-50 p-3 pl-4 pr-10 text-k-600 focus:border-primary"
+          className={clsx(
+            "w-full rounded-lg border border-gray-c-200 bg-k-50 text-k-600 focus:border-primary",
+            inputClassName,
+          )}
           {...register("searchText")}
         />
         <div className="absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400">
diff --git a/apps/university-web/src/app/university/search/SearchClientContent.tsx b/apps/university-web/src/app/university/search/SearchClientContent.tsx
index 22233b472..ff2775bbe 100644
--- a/apps/university-web/src/app/university/search/SearchClientContent.tsx
+++ b/apps/university-web/src/app/university/search/SearchClientContent.tsx
@@ -4,8 +4,8 @@ import clsx from "clsx";
 import { useState } from "react";
 import { HOME_UNIVERSITY_LIST, HOME_UNIVERSITY_TO_SLUG_MAP } from "@/constants/university";
 import { HomeUniversity, type HomeUniversitySlug } from "@/types/university";
-import SchoolSearchForm from "./PageContent";
-import SearchBar from "./SearchBar";
+import SchoolSearchForm, { DesktopSchoolSearchForm } from "./PageContent";
+import SearchBar, { DesktopSearchBar } from "./SearchBar";
 
 const SearchClientContent = () => {
   const [selectedHomeUniversitySlug, setSelectedHomeUniversitySlug] = useState<HomeUniversitySlug>(
@@ -14,28 +14,10 @@ const SearchClientContent = () => {
 
   return (
     <>
-      <div className="mb-4 flex gap-2 overflow-x-auto">
-        {HOME_UNIVERSITY_LIST.map((university) => {
-          const isSelected = university.slug === selectedHomeUniversitySlug;
-
-          return (
-            <button
-              key={university.slug}
-              type="button"
-              onClick={() => setSelectedHomeUniversitySlug(university.slug)}
-              className={clsx(
-                "min-w-fit whitespace-nowrap rounded-full border px-4 py-2 transition-colors",
-                isSelected
-                  ? "border-primary bg-primary-100 text-primary-900"
-                  : "border-k-50 bg-k-50 text-k-300 hover:border-k-100 hover:bg-k-100",
-              )}
-              aria-pressed={isSelected}
-            >
-              {university.shortName}
-            </button>
-          );
-        })}
-      </div>
+      <MobileHomeUniversitySelector
+        selectedHomeUniversitySlug={selectedHomeUniversitySlug}
+        setSelectedHomeUniversitySlug={setSelectedHomeUniversitySlug}
+      />
 
       <div className="relative mb-4">
         <SearchBar homeUniversitySlug={selectedHomeUniversitySlug} />
@@ -46,4 +28,103 @@ const SearchClientContent = () => {
   );
 };
 
+export const SearchDesktopContent = () => {
+  const [selectedHomeUniversitySlug, setSelectedHomeUniversitySlug] = useState<HomeUniversitySlug>(
+    HOME_UNIVERSITY_TO_SLUG_MAP[HomeUniversity.INHA],
+  );
+
+  return (
+    <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(280px,340px)]">
+      <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">
+          <DesktopSearchBar homeUniversitySlug={selectedHomeUniversitySlug} />
+        </div>
+        <div className="mt-6">
+          <DesktopSchoolSearchForm homeUniversitySlug={selectedHomeUniversitySlug} />
+        </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>
+        <p className="mt-2 text-k-500 typo-medium-3">선택한 학교 기준으로 검색 결과가 제공됩니다.</p>
+        <div className="mt-5">
+          <DesktopHomeUniversitySelector
+            selectedHomeUniversitySlug={selectedHomeUniversitySlug}
+            setSelectedHomeUniversitySlug={setSelectedHomeUniversitySlug}
+          />
+        </div>
+      </aside>
+    </div>
+  );
+};
+
+type HomeUniversitySelectorProps = {
+  selectedHomeUniversitySlug: HomeUniversitySlug;
+  setSelectedHomeUniversitySlug: (slug: HomeUniversitySlug) => void;
+};
+
+const MobileHomeUniversitySelector = ({
+  selectedHomeUniversitySlug,
+  setSelectedHomeUniversitySlug,
+}: HomeUniversitySelectorProps) => {
+  return (
+    <div className="mb-4 flex gap-2 overflow-x-auto">
+      {HOME_UNIVERSITY_LIST.map((university) => {
+        const isSelected = university.slug === selectedHomeUniversitySlug;
+
+        return (
+          <button
+            key={university.slug}
+            type="button"
+            onClick={() => setSelectedHomeUniversitySlug(university.slug)}
+            className={clsx(
+              "min-w-fit whitespace-nowrap border transition-colors",
+              "rounded-full px-4 py-2",
+              isSelected
+                ? "border-primary bg-primary-100 text-primary-900"
+                : "border-k-50 bg-k-50 text-k-300 hover:border-k-100 hover:bg-k-100",
+            )}
+            aria-pressed={isSelected}
+          >
+            {university.shortName}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+const DesktopHomeUniversitySelector = ({
+  selectedHomeUniversitySlug,
+  setSelectedHomeUniversitySlug,
+}: HomeUniversitySelectorProps) => {
+  return (
+    <div className="grid gap-2">
+      {HOME_UNIVERSITY_LIST.map((university) => {
+        const isSelected = university.slug === selectedHomeUniversitySlug;
+
+        return (
+          <button
+            key={university.slug}
+            type="button"
+            onClick={() => setSelectedHomeUniversitySlug(university.slug)}
+            className={clsx(
+              "min-w-fit whitespace-nowrap rounded-lg border px-4 py-3 text-left transition-colors",
+              isSelected
+                ? "border-primary bg-primary-100 text-primary-900"
+                : "border-k-50 bg-k-50 text-k-300 hover:border-k-100 hover:bg-k-100",
+            )}
+            aria-pressed={isSelected}
+          >
+            <span className="block typo-sb-9">{university.shortName}</span>
+            <span className="mt-1 block typo-medium-4">{university.name}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
 export default SearchClientContent;
diff --git a/apps/university-web/src/app/university/search/page.tsx b/apps/university-web/src/app/university/search/page.tsx
index fb439c1d9..5edead125 100644
--- a/apps/university-web/src/app/university/search/page.tsx
+++ b/apps/university-web/src/app/university/search/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import { NO_INDEX_ROBOTS } from "@/utils/seo";
-import SearchClientContent from "./SearchClientContent";
+import SearchClientContent, { SearchDesktopContent } from "./SearchClientContent";
 
 export const revalidate = false;
 
@@ -15,13 +15,25 @@ const Page = async () => {
   return (
     <>
       <TopDetailNavigation title="파견학교 검색" />
-      <div className="w-full">
+      <div className="w-full md:hidden">
         <main className="flex flex-1 flex-col p-5">
           <h2 className="mb-1 typo-bold-1">오직 나를 위한</h2>
           <h2 className="mb-6 typo-bold-1">맞춤 파견 학교 찾기</h2>
           <SearchClientContent />
         </main>
       </div>
+      <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">Search</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">맞춤 파견 학교 찾기</h1>
+            <p className="mt-2 text-k-500 typo-medium-2">
+              소속 학교와 관심 조건을 조합해서 지원 가능한 파견 학교를 찾아보세요.
+            </p>
+          </header>
+          <SearchDesktopContent />
+        </div>
+      </div>
     </>
   );
 };
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx b/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
index 5500c267b..45d5a17da 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
@@ -58,6 +58,10 @@ const PostModifyForm = ({
   };
 
   useEffect(() => {
+    if (isDesktop === null) {
+      return () => {};
+    }
+
     const textarea = textareaRef.current;
     const titleDiv = titleRef.current;
 
@@ -78,7 +82,7 @@ const PostModifyForm = ({
       return () => textarea.removeEventListener("input", adjustHeight);
     }
     return () => {};
-  }, []);
+  }, [isDesktop]);
 
   const submitPost = async () => {
     const trimmedTitle = title.trim();
diff --git a/apps/web/src/app/community/[boardCode]/create/PostForm.tsx b/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
index 9d4713740..472aee8ee 100644
--- a/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
+++ b/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
@@ -58,6 +58,10 @@ const PostForm = ({ boardCode }: PostFormProps) => {
   }, [accessToken, createPath, isAuthenticated, isInitialized, refreshStatus, router]);
 
   useEffect(() => {
+    if (isDesktop === null) {
+      return () => {};
+    }
+
     const textarea = textareaRef.current;
     const title = titleRef.current;
 
@@ -78,7 +82,7 @@ const PostForm = ({ boardCode }: PostFormProps) => {
       return () => textarea.removeEventListener("input", adjustHeight);
     }
     return () => {};
-  }, []);
+  }, [isDesktop]);
 
   if (!isInitialized || refreshStatus === "refreshing" || !isAuthenticated || !accessToken || isDesktop === null) {
     return <CloudSpinnerPage />;
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx
index 0a1a806b3..4ba9ec270 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx
@@ -65,7 +65,7 @@ const MenteePageTabs = ({ variant = "mobile" }: { variant?: "mobile" | "desktop"
         {!isCurrentTabPending &&
           selectedTab === MenteeTab.MY_MENTOR &&
           mentoList.slice(0, visibleCount).map((mentor) => (
-            <Link href={`mentor/chat/${mentor.id}`} key={mentor.id}>
+            <Link href={`/mentor/chat/${mentor.id}`} key={mentor.id}>
               <MentorChatCard
                 key={mentor.id}
                 nickname={mentor.partner.nickname}
diff --git a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
index 026120493..50fda4bad 100644
--- a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
+++ b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
@@ -13,15 +13,18 @@ import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 type ChatRoom = NonNullable<ReturnType<typeof useGetChatRooms>["data"]>[number];
 
 const ChatPageClient = () => {
-  const { data: chatRooms = [] } = useGetChatRooms();
-  const { data: myInfo } = useGetMyInfo();
+  const { data: chatRooms = [], isPending: isChatRoomsPending } = useGetChatRooms();
+  const { data: myInfo, isError: isMyInfoError, isLoading: isMyInfoLoading } = useGetMyInfo();
   const isDesktop = useIsDesktopViewport();
 
   const isMentee = myInfo?.role === UserRole.MENTEE;
   const isPartnerMentor = isMentee;
   const listTitle = isMentee ? "나의 멘토" : "나의 멘티";
+  const isProfilePending = isMyInfoLoading || (!isMyInfoError && !myInfo?.role);
 
-  if (isDesktop === null) return null;
+  if (isDesktop === null || isProfilePending || isChatRoomsPending) {
+    return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
+  }
 
   if (chatRooms.length === 0 && isMentee) {
     return <ChatEmptyState isDesktop={isDesktop} isMentee />;
diff --git a/apps/web/src/app/my/apply-mentor/page.tsx b/apps/web/src/app/my/apply-mentor/page.tsx
index 978e71b49..11a2efe0f 100644
--- a/apps/web/src/app/my/apply-mentor/page.tsx
+++ b/apps/web/src/app/my/apply-mentor/page.tsx
@@ -85,7 +85,18 @@ const ApplyMentorPage = () => {
             <section className="rounded-lg border border-k-100 bg-white p-6">
               <div className="mb-8">
                 <div className="mb-3 flex items-center justify-between">
-                  <span className="text-k-900 typo-bold-4">{stepTitle}</span>
+                  <div className="flex items-center gap-3">
+                    {step > 1 && (
+                      <button
+                        type="button"
+                        onClick={goPrevStep}
+                        className="rounded-lg border border-k-100 px-3 py-2 text-k-600 transition-colors hover:border-primary-300 hover:text-primary typo-sb-9"
+                      >
+                        이전
+                      </button>
+                    )}
+                    <span className="text-k-900 typo-bold-4">{stepTitle}</span>
+                  </div>
                   <span className="text-primary typo-sb-9">{step}/3</span>
                 </div>
                 <Progress showPercentage={false} value={progress} />
diff --git a/apps/web/src/app/my/favorite/_ui/FavoriteContent/_hooks/useSelectUniversities.ts b/apps/web/src/app/my/favorite/_ui/FavoriteContent/_hooks/useSelectUniversities.ts
index 5b00926a1..d3d583e37 100644
--- a/apps/web/src/app/my/favorite/_ui/FavoriteContent/_hooks/useSelectUniversities.ts
+++ b/apps/web/src/app/my/favorite/_ui/FavoriteContent/_hooks/useSelectUniversities.ts
@@ -7,7 +7,7 @@ import { showIconToast } from "@/lib/toast/showIconToast";
 interface UseSelectUniversitiesReturn {
   editSelected: number[];
   handleEditSelected: (id: number) => void;
-  handleDeleteAll: () => void;
+  handleDeleteAll: (onSuccess?: () => void) => void;
 }
 const useSelectUniversities = (): UseSelectUniversitiesReturn => {
   const { mutate: deleteUserAccount } = useDeleteWish();
@@ -22,7 +22,7 @@ const useSelectUniversities = (): UseSelectUniversitiesReturn => {
       setEditSelected([...editSelected, id]);
     }
   };
-  const handleDeleteAll = () => {
+  const handleDeleteAll = (onSuccess?: () => void) => {
     if (!confirm("정말 삭제하시겠습니까?")) return;
 
     Promise.allSettled(
@@ -38,6 +38,8 @@ const useSelectUniversities = (): UseSelectUniversitiesReturn => {
     ).then((results) => {
       const hasError = results.some((r) => r.status === "rejected");
       if (!hasError) {
+        setEditSelected([]);
+        onSuccess?.();
         showIconToast("logo", "모든 학교가 삭제되었습니다.");
       }
       queryClient.invalidateQueries({ queryKey: [QueryKeys.universities.wishList] });
diff --git a/apps/web/src/app/my/favorite/_ui/FavoriteContent/index.tsx b/apps/web/src/app/my/favorite/_ui/FavoriteContent/index.tsx
index b6e84eef7..2df02b5e3 100644
--- a/apps/web/src/app/my/favorite/_ui/FavoriteContent/index.tsx
+++ b/apps/web/src/app/my/favorite/_ui/FavoriteContent/index.tsx
@@ -26,8 +26,7 @@ const FavoriteContent = () => {
   const isDesktop = useIsDesktopViewport();
 
   const handleDeleteSelected = () => {
-    setIsEditMode(false);
-    handleDeleteAll();
+    handleDeleteAll(() => setIsEditMode(false));
   };
 
   const viewProps = {
diff --git a/apps/web/src/app/my/match/_ui/MatchContent/index.tsx b/apps/web/src/app/my/match/_ui/MatchContent/index.tsx
index f1e9721d9..e7ee32ec3 100644
--- a/apps/web/src/app/my/match/_ui/MatchContent/index.tsx
+++ b/apps/web/src/app/my/match/_ui/MatchContent/index.tsx
@@ -150,7 +150,7 @@ const MatchEmptyState = ({ viewAsMentor }: { viewAsMentor: boolean }) => (
 );
 
 const toMentorPreview = (room: ChatRoom) => ({
-  id: room.id,
+  id: room.partner.partnerId,
   profileImageUrl: room.partner.profileUrl ?? null,
   nickname: room.partner.nickname ?? "",
   country: "",
diff --git a/apps/web/src/app/terms/page.tsx b/apps/web/src/app/terms/page.tsx
index 1472699ca..b721733f1 100644
--- a/apps/web/src/app/terms/page.tsx
+++ b/apps/web/src/app/terms/page.tsx
@@ -168,10 +168,10 @@ const TermsDesktopView = () => (
       <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
         <h2 className="text-k-900 typo-bold-4">목차</h2>
         <nav className="mt-5 grid gap-2">
-          {TERMS_SECTIONS.map((section) => (
+          {TERMS_SECTIONS.map((section, index) => (
             <a
               key={section.title}
-              href={`#${section.title}`}
+              href={`#${getTermsSectionId(index)}`}
               className="rounded-lg bg-k-50 px-4 py-3 text-k-600 transition-colors hover:bg-k-100 typo-medium-3"
             >
               {section.title}
@@ -189,9 +189,9 @@ const TermsDesktopView = () => (
 
 const TermsSectionList = ({ withAnchors = false }: { withAnchors?: boolean }) => (
   <div className="space-y-7">
-    {TERMS_SECTIONS.map((section) => (
-      <section key={section.title} id={withAnchors ? section.title : undefined} className="scroll-mt-8">
-        <p className="pb-2 text-k-902 font-normal">{section.title}</p>
+    {TERMS_SECTIONS.map((section, index) => (
+      <section key={section.title} id={withAnchors ? getTermsSectionId(index) : undefined} className="scroll-mt-8">
+        <p className="pb-2 text-k-800 font-normal">{section.title}</p>
         <ol className="ml-4 list-decimal space-y-2 text-k-900 typo-regular-2">
           {section.items.map((item) => (
             <li key={item}>{item}</li>
@@ -202,4 +202,6 @@ const TermsSectionList = ({ withAnchors = false }: { withAnchors?: boolean }) =>
   </div>
 );
 
+const getTermsSectionId = (index: number) => `terms-section-${index + 1}`;
+
 export default TermsPage;
diff --git a/apps/web/src/app/university/application/ScorePageContent.tsx b/apps/web/src/app/university/application/ScorePageContent.tsx
index 399bc500d..7f8260509 100644
--- a/apps/web/src/app/university/application/ScorePageContent.tsx
+++ b/apps/web/src/app/university/application/ScorePageContent.tsx
@@ -110,7 +110,7 @@ const ScorePageContent = () => {
 
   const handleMobileRegionChange = (nextRegion: string | null | ((prev: string | null) => string | null)) => {
     const resolvedRegion = typeof nextRegion === "function" ? nextRegion(regionFilter || null) : nextRegion;
-    applyRegionFilter((resolvedRegion ?? "") as RegionKo | "");
+    applyRegionFilter(isRegionKo(resolvedRegion) ? resolvedRegion : "");
   };
 
   const handlePreferenceChange = (nextPreference: string) => {
@@ -298,7 +298,7 @@ const ApplicationScoreDesktopView = ({
                   <DesktopRegionButton
                     key={region}
                     isActive={regionFilter === region}
-                    onClick={() => onDesktopRegionChange(region as RegionKo)}
+                    onClick={() => onDesktopRegionChange(region)}
                   >
                     {region}
                   </DesktopRegionButton>
@@ -312,6 +312,10 @@ const ApplicationScoreDesktopView = ({
   );
 };
 
+const isRegionKo = (value: string | null): value is RegionKo => {
+  return value !== null && REGIONS_KO.some((region) => region === value);
+};
+
 const DesktopRegionButton = ({
   children,
   isActive,
diff --git a/apps/web/src/app/university/application/apply/ApplyPageContent.tsx b/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
index 0f212b653..b3d054ea5 100644
--- a/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
+++ b/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
@@ -90,14 +90,14 @@ const ApplyPageContent = () => {
 
   if (isDesktop === null) return null;
 
-  const isDataExist = gpaScoreList.length === 0 || languageTestScoreList.length === 0;
+  const isScoreDataEmpty = gpaScoreList.length === 0 || languageTestScoreList.length === 0;
   const hasSelectedUniversity = curUniversityList.some((universityId) => universityId > 0);
   const progressStep = step === 3 && hasSelectedUniversity ? APPLY_PROGRESS_TOTAL_STEPS : step + 1;
   const activeStepIndex =
     step === 99 ? APPLY_STEP_LABELS.length - 1 : Math.max(0, Math.min(step - 1, APPLY_STEP_LABELS.length - 1));
 
   const renderStep = (variant: "mobile" | "desktop") => {
-    if (isDataExist) {
+    if (isScoreDataEmpty) {
       return <EmptyGPA variant={variant} />;
     }
 
diff --git a/apps/web/src/app/university/score/ScoreCard.tsx b/apps/web/src/app/university/score/ScoreCard.tsx
index abe31d334..b669fbd84 100644
--- a/apps/web/src/app/university/score/ScoreCard.tsx
+++ b/apps/web/src/app/university/score/ScoreCard.tsx
@@ -70,10 +70,7 @@ const ScoreCard = ({ name, score, status, date, isFocused = false, variant = "mo
           })}
         >
           <span className="truncate">{name}</span>
-          <span className="font-serif text-k-300 typo-regular-5">
-            {status === "APPROVED" ? "만료일 : " : "제출일 : "}
-            {formatDate(date)}
-          </span>
+          <span className="font-serif text-k-300 typo-regular-5">제출일 : {formatDate(date)}</span>
         </div>
         <div
           className={clsx(
diff --git a/apps/web/src/app/university/score/page.tsx b/apps/web/src/app/university/score/page.tsx
index 3ed9e634d..b2861ddd1 100644
--- a/apps/web/src/app/university/score/page.tsx
+++ b/apps/web/src/app/university/score/page.tsx
@@ -13,7 +13,7 @@ const ScorePage = () => {
   return (
     <>
       <TopDetailNavigation title="성적 확인하기" />
-      <div className="w-full px-5 md:px-0">
+      <div className="w-full md:px-0">
         <ScoreScreen />
       </div>
     </>
diff --git a/apps/web/src/components/login/signup/SignupPolicyScreen.tsx b/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
index 82d4367bd..cfe9cd8b1 100644
--- a/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
@@ -17,7 +17,7 @@ const SignupPolicyScreen = ({ toNextStage, variant = "mobile" }: SignupPolicyScr
 
   return (
     <div className={isDesktop ? "" : "mt-[-56px]"}>
-      <div className={isDesktop ? "rounded-lg bg-k-50 p-6" : "border-b border-[#bgbgbg]"}>
+      <div className={isDesktop ? "rounded-lg bg-k-50 p-6" : "border-b border-[#bcbcbc]"}>
         <div className={isDesktop ? "" : "h-[375px] pl-5"}>
           <div className={isDesktop ? "" : "mt-[149px]"}>
             <svg xmlns="http://www.w3.org/2000/svg" width="46" height="30" viewBox="0 0 46 30" fill="none">
diff --git a/apps/web/src/constants/university.ts b/apps/web/src/constants/university.ts
index 13f95ea49..1f55a225d 100644
--- a/apps/web/src/constants/university.ts
+++ b/apps/web/src/constants/university.ts
@@ -4,12 +4,13 @@ import {
   type HomeUniversitySlug,
   LanguageTestType,
   RegionEnumExtend,
+  type RegionKo,
   type TestScoreInfo,
 } from "@/types/university";
 
 export const REGIONS_SEARCH = ["유럽권", "미주권", "아시아권", "중국권"] as const;
 
-export const REGIONS_KO = ["유럽권", "미주권", "아시아권", "중국권"];
+export const REGIONS_KO: RegionKo[] = ["유럽권", "미주권", "아시아권", "중국권"];
 
 /**
  * 홈 대학교 URL 슬러그 매핑
diff --git a/apps/web/src/types/university.ts b/apps/web/src/types/university.ts
index 3885d73a9..d43c908a3 100644
--- a/apps/web/src/types/university.ts
+++ b/apps/web/src/types/university.ts
@@ -1,4 +1,4 @@
-export type RegionKo = "유럽권" | "미주권" | "아시아권";
+export type RegionKo = "유럽권" | "미주권" | "아시아권" | "중국권";
 
 export enum HomeUniversityName {
   INHA = "인하대학교",

From 832d487bf02b763f2955832053e1cf7c90d18773 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 10:09:38 +0900
Subject: [PATCH 11/20] =?UTF-8?q?fix:=20=EC=84=B1=EC=A0=81=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EC=B6=9C=EC=9D=BC=20=EB=9D=BC=EB=B2=A8=20?=
 =?UTF-8?q?=EB=AA=85=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/university/score/ScoreCard.tsx   | 15 +++++++++++++--
 apps/web/src/app/university/score/ScoreScreen.tsx |  2 ++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/university/score/ScoreCard.tsx b/apps/web/src/app/university/score/ScoreCard.tsx
index b669fbd84..712cfc346 100644
--- a/apps/web/src/app/university/score/ScoreCard.tsx
+++ b/apps/web/src/app/university/score/ScoreCard.tsx
@@ -6,6 +6,7 @@ type ScoreCardProps = {
   score: string;
   status: ScoreSubmitStatus;
   date: string; // Date ISO string
+  dateLabel?: string;
   isFocused?: boolean;
   variant?: "mobile" | "desktop";
 };
@@ -48,7 +49,15 @@ const getStatus = (status: ScoreSubmitStatus) => {
   }
 };
 
-const ScoreCard = ({ name, score, status, date, isFocused = false, variant = "mobile" }: ScoreCardProps) => {
+const ScoreCard = ({
+  name,
+  score,
+  status,
+  date,
+  dateLabel = "제출일",
+  isFocused = false,
+  variant = "mobile",
+}: ScoreCardProps) => {
   const isVerified = status === "APPROVED";
   const isDesktop = variant === "desktop";
 
@@ -70,7 +79,9 @@ const ScoreCard = ({ name, score, status, date, isFocused = false, variant = "mo
           })}
         >
           <span className="truncate">{name}</span>
-          <span className="font-serif text-k-300 typo-regular-5">제출일 : {formatDate(date)}</span>
+          <span className="font-serif text-k-300 typo-regular-5">
+            {dateLabel} : {formatDate(date)}
+          </span>
         </div>
         <div
           className={clsx(
diff --git a/apps/web/src/app/university/score/ScoreScreen.tsx b/apps/web/src/app/university/score/ScoreScreen.tsx
index 334764eb9..4e042a6a4 100644
--- a/apps/web/src/app/university/score/ScoreScreen.tsx
+++ b/apps/web/src/app/university/score/ScoreScreen.tsx
@@ -225,6 +225,7 @@ const ScoreList = ({
               )}
               status={score.verifyStatus}
               date={score.issueDate}
+              dateLabel="제출일"
               isFocused={score.verifyStatus === "APPROVED"}
               variant={variant}
             />
@@ -244,6 +245,7 @@ const ScoreList = ({
               score={`${score.gpaResponse.gpa.toFixed(2)}/${score.gpaResponse.gpaCriteria}`}
               status={score.verifyStatus}
               date={score.issueDate}
+              dateLabel="제출일"
               isFocused={score.verifyStatus === "APPROVED"}
               variant={variant}
             />

From 631ade4d13a24156633585d83459edbbd54d4d9a Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 10:10:37 +0900
Subject: [PATCH 12/20] =?UTF-8?q?fix:=20=EC=84=B1=EC=A0=81=20=EC=A0=9C?=
 =?UTF-8?q?=EC=B6=9C=EC=9D=BC=20=EC=A0=84=EB=8B=AC=20=EC=9D=98=EB=8F=84=20?=
 =?UTF-8?q?=EB=AA=85=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/university/score/ScoreScreen.tsx  | 86 ++++++++++---------
 1 file changed, 47 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/app/university/score/ScoreScreen.tsx b/apps/web/src/app/university/score/ScoreScreen.tsx
index 4e042a6a4..e0c2d53ca 100644
--- a/apps/web/src/app/university/score/ScoreScreen.tsx
+++ b/apps/web/src/app/university/score/ScoreScreen.tsx
@@ -210,47 +210,55 @@ const ScoreList = ({
   return (
     <div className={clsx(isDesktop ? "mt-6 grid gap-4 lg:grid-cols-2" : "mt-3.5 flex flex-col gap-3.5")}>
       {curTab === "공인어학" &&
-        languageTestScoreList.map((score) => (
-          <button
-            key={score.id}
-            type="button"
-            className="text-left"
-            onClick={() => onScoreClick(score.verifyStatus, score.rejectedReason)}
-          >
-            <ScoreCard
-              name={languageTestMapping[score.languageTestResponse.languageTestType]}
-              score={formatLanguageTestScore(
-                score.languageTestResponse.languageTestType,
-                score.languageTestResponse.languageTestScore,
-              )}
-              status={score.verifyStatus}
-              date={score.issueDate}
-              dateLabel="제출일"
-              isFocused={score.verifyStatus === "APPROVED"}
-              variant={variant}
-            />
-          </button>
-        ))}
+        languageTestScoreList.map((score) => {
+          const submittedDate = score.issueDate;
+
+          return (
+            <button
+              key={score.id}
+              type="button"
+              className="text-left"
+              onClick={() => onScoreClick(score.verifyStatus, score.rejectedReason)}
+            >
+              <ScoreCard
+                name={languageTestMapping[score.languageTestResponse.languageTestType]}
+                score={formatLanguageTestScore(
+                  score.languageTestResponse.languageTestType,
+                  score.languageTestResponse.languageTestScore,
+                )}
+                status={score.verifyStatus}
+                date={submittedDate}
+                dateLabel="제출일"
+                isFocused={score.verifyStatus === "APPROVED"}
+                variant={variant}
+              />
+            </button>
+          );
+        })}
 
       {curTab === "학점" &&
-        gpaScoreList.map((score) => (
-          <button
-            key={score.id}
-            type="button"
-            className="text-left"
-            onClick={() => onScoreClick(score.verifyStatus, score.rejectedReason)}
-          >
-            <ScoreCard
-              name="인하대학교"
-              score={`${score.gpaResponse.gpa.toFixed(2)}/${score.gpaResponse.gpaCriteria}`}
-              status={score.verifyStatus}
-              date={score.issueDate}
-              dateLabel="제출일"
-              isFocused={score.verifyStatus === "APPROVED"}
-              variant={variant}
-            />
-          </button>
-        ))}
+        gpaScoreList.map((score) => {
+          const submittedDate = score.issueDate;
+
+          return (
+            <button
+              key={score.id}
+              type="button"
+              className="text-left"
+              onClick={() => onScoreClick(score.verifyStatus, score.rejectedReason)}
+            >
+              <ScoreCard
+                name="인하대학교"
+                score={`${score.gpaResponse.gpa.toFixed(2)}/${score.gpaResponse.gpaCriteria}`}
+                status={score.verifyStatus}
+                date={submittedDate}
+                dateLabel="제출일"
+                isFocused={score.verifyStatus === "APPROVED"}
+                variant={variant}
+              />
+            </button>
+          );
+        })}
     </div>
   );
 };

From 27631bf04faa4c0d13a081070230f4c6b3d6af0b Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 10:17:23 +0900
Subject: [PATCH 13/20] =?UTF-8?q?refactor:=20=EB=A9=98=ED=86=A0=20?=
 =?UTF-8?q?=ED=99=88=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_ui/MentorClient/_ui/MenteePage/index.tsx | 44 ++++++++--------
 .../MentorClient/_ui/MenteePageTabs/index.tsx | 16 ++++--
 .../_ui/MentorFindSection/index.tsx           | 10 ++--
 .../_ui/MentorClient/_ui/MentorPage/index.tsx | 50 ++++++++++---------
 .../src/app/mentor/_ui/MentorClient/index.tsx | 20 +++-----
 5 files changed, 73 insertions(+), 67 deletions(-)

diff --git a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePage/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePage/index.tsx
index 2c20676e9..2b1eaa07c 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePage/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePage/index.tsx
@@ -1,39 +1,39 @@
 "use client";
 
-import MenteePageTabs from "../MenteePageTabs";
-import MentorFindSection from "../MentorFindSection";
+import { MenteeMentoringDesktopPanel, MenteeMentoringMobileSection } from "../MenteePageTabs";
+import { MentorFindDesktopPanel, MentorFindMobileSection } from "../MentorFindSection";
 
 /**
  * 멘티 페이지 컴포넌트
  * - 나의 멘토 탭 (진행 중, 대기 중)
  * - 멘토 찾기 섹션
  */
-const MenteePage = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
-  if (variant === "desktop") {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <header className="mb-8">
-          <p className="text-primary typo-sb-9">Mentor</p>
-          <h1 className="mt-2 text-k-900 typo-bold-1">멘토링</h1>
-          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
-            진행 중인 멘토링을 확인하고, 교환학생 경험을 나눠줄 멘토를 찾아보세요.
-          </p>
-        </header>
+export const MenteeDesktopPage = () => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8">
+        <p className="text-primary typo-sb-9">Mentor</p>
+        <h1 className="mt-2 text-k-900 typo-bold-1">멘토링</h1>
+        <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+          진행 중인 멘토링을 확인하고, 교환학생 경험을 나눠줄 멘토를 찾아보세요.
+        </p>
+      </header>
 
-        <div className="grid items-start gap-8 xl:grid-cols-[minmax(360px,440px)_minmax(0,1fr)]">
-          <MenteePageTabs variant="desktop" />
-          <MentorFindSection variant="desktop" />
-        </div>
+      <div className="grid items-start gap-8 xl:grid-cols-[minmax(360px,440px)_minmax(0,1fr)]">
+        <MenteeMentoringDesktopPanel />
+        <MentorFindDesktopPanel />
       </div>
-    );
-  }
+    </div>
+  );
+};
 
+export const MenteeMobilePage = () => {
   return (
     <>
-      <MenteePageTabs />
-      <MentorFindSection />
+      <MenteeMentoringMobileSection />
+      <MentorFindMobileSection />
     </>
   );
 };
 
-export default MenteePage;
+export default MenteeMobilePage;
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx
index 4ba9ec270..8011f9824 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx
@@ -12,7 +12,12 @@ import { VerifyStatus } from "@/types/mentee";
 import { MenteeTab } from "@/types/mentor";
 import { MentorChatCardsSkeleton } from "../../../MentorPageSkeleton";
 
-const MenteePageTabs = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
+type MenteeMentoringSectionBaseProps = {
+  isDesktop: boolean;
+  visibleCount: number;
+};
+
+const MenteeMentoringSectionBase = ({ isDesktop, visibleCount }: MenteeMentoringSectionBaseProps) => {
   // api
   const { data: mentoList = [], isPending: isMentoListPending } = useGetChatRooms();
   const { data: menteeWaitingMentoringList = [], isPending: isWaitingListPending } = useGetMenteeMentoringList(
@@ -26,8 +31,6 @@ const MenteePageTabs = ({ variant = "mobile" }: { variant?: "mobile" | "desktop"
 
   // 현재 탭에 따라 보여줄 데이터의 길이
   const currentDataLength = selectedTab === MenteeTab.MY_MENTOR ? mentoList.length : menteeWaitingMentoringList.length;
-  const isDesktop = variant === "desktop";
-  const visibleCount = isDesktop ? 4 : 2;
   const sectionTitle = selectedTab === MenteeTab.MY_MENTOR ? "진행 중인 멘토링" : "대기 중인 멘토링";
   const emptyMessage = selectedTab === MenteeTab.MY_MENTOR ? "진행중인 멘토링이 없어요!" : "대기중인 멘토링이 없어요!";
   const viewAllHref = selectedTab === MenteeTab.MY_MENTOR ? "/mentor/chat" : "/mentor/waiting";
@@ -101,4 +104,9 @@ const MenteePageTabs = ({ variant = "mobile" }: { variant?: "mobile" | "desktop"
     </>
   );
 };
-export default MenteePageTabs;
+
+export const MenteeMentoringDesktopPanel = () => <MenteeMentoringSectionBase isDesktop visibleCount={4} />;
+
+export const MenteeMentoringMobileSection = () => <MenteeMentoringSectionBase isDesktop={false} visibleCount={2} />;
+
+export default MenteeMentoringMobileSection;
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx
index 8c344462a..6e7bc3e70 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx
@@ -11,7 +11,7 @@ import { MentorCardListSkeleton } from "../../../MentorPageSkeleton";
 import usePrefetchMentorFindTab from "./_hooks/usePrefetchMentorFindTab";
 import useSelectedTab from "./_hooks/useSelectedTab";
 
-const MentorFindSection = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
+const MentorFindSectionBase = ({ isDesktop }: { isDesktop: boolean }) => {
   const { listRef, selectedTab, handleSelectTab } = useSelectedTab();
 
   const {
@@ -25,8 +25,6 @@ const MentorFindSection = ({ variant = "mobile" }: { variant?: "mobile" | "deskt
   const { lastElementRef } = useInfinityScroll({ fetchNextPage, hasNextPage });
   usePrefetchMentorFindTab();
 
-  const isDesktop = variant === "desktop";
-
   return (
     <section className={isDesktop ? "rounded-lg border border-k-100 bg-white p-6" : ""}>
       <div className={isDesktop ? "mb-5 flex items-start justify-between gap-4" : ""}>
@@ -71,4 +69,8 @@ const MentorFindSection = ({ variant = "mobile" }: { variant?: "mobile" | "deskt
   );
 };
 
-export default MentorFindSection;
+export const MentorFindDesktopPanel = () => <MentorFindSectionBase isDesktop />;
+
+export const MentorFindMobileSection = () => <MentorFindSectionBase isDesktop={false} />;
+
+export default MentorFindMobileSection;
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/index.tsx
index c043769d9..09729e284 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/index.tsx
@@ -13,16 +13,14 @@ import { MentorChatCardsSkeleton } from "../../../MentorPageSkeleton";
 import ApplicantListSection from "./_ui/ApplicantListSection";
 import MyMentorSection from "./_ui/MyMentorSection";
 
-const MentorPage = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
+const MentorMenteeListContent = ({ isDesktop }: { isDesktop: boolean }) => {
   const [selectedTab, setSelectedTab] = useState<MentorTab>(MentorTab.MY_MENTEE);
   const isMyMenteeTab = selectedTab === MentorTab.MY_MENTEE;
   const tabs = [MentorTab.MY_MENTEE, MentorTab.APPLY_LIST];
 
   const { data: myMenteeList = [], isPending: isMyMenteeListPending } = useGetChatRooms();
 
-  const isDesktop = variant === "desktop";
-
-  const menteeListContent = (
+  return (
     <>
       <header className="flex items-center justify-between">
         <div className="w-full">
@@ -77,29 +75,33 @@ const MentorPage = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" })
       </div>
     </>
   );
+};
 
-  if (isDesktop) {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <header className="mb-8">
-          <p className="text-primary typo-sb-9">Mentor</p>
-          <h1 className="mt-2 text-k-900 typo-bold-1">멘토 페이지</h1>
-          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
-            멘토링 신청과 나의 멘토 프로필을 한 화면에서 관리하세요.
-          </p>
-        </header>
+export const MentorDesktopPage = () => {
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8">
+        <p className="text-primary typo-sb-9">Mentor</p>
+        <h1 className="mt-2 text-k-900 typo-bold-1">멘토 페이지</h1>
+        <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+          멘토링 신청과 나의 멘토 프로필을 한 화면에서 관리하세요.
+        </p>
+      </header>
 
-        <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(340px,420px)]">
-          <section className="rounded-lg border border-k-100 bg-white p-6">{menteeListContent}</section>
-          <section className="rounded-lg border border-k-100 bg-white p-6">
-            <MyMentorSection />
-          </section>
-        </div>
+      <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(340px,420px)]">
+        <section className="rounded-lg border border-k-100 bg-white p-6">
+          <MentorMenteeListContent isDesktop />
+        </section>
+        <section className="rounded-lg border border-k-100 bg-white p-6">
+          <MyMentorSection />
+        </section>
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-  return menteeListContent;
+export const MentorMobilePage = () => {
+  return <MentorMenteeListContent isDesktop={false} />;
 };
 
-export default MentorPage;
+export default MentorMobilePage;
diff --git a/apps/web/src/app/mentor/_ui/MentorClient/index.tsx b/apps/web/src/app/mentor/_ui/MentorClient/index.tsx
index c90eb9af9..de8830633 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/index.tsx
@@ -9,8 +9,8 @@ import useAuthStore from "@/lib/zustand/useAuthStore";
 import { UserRole } from "@/types/mentor";
 import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import MentorPageSkeleton from "../MentorPageSkeleton";
-import MenteePage from "./_ui/MenteePage";
-import MentorPage from "./_ui/MentorPage";
+import { MenteeDesktopPage, MenteeMobilePage } from "./_ui/MenteePage";
+import { MentorDesktopPage, MentorMobilePage } from "./_ui/MentorPage";
 
 const MentorClient = () => {
   const router = useRouter();
@@ -52,19 +52,13 @@ const MentorClient = () => {
     );
   }
 
-  if (role === UserRole.ADMIN) {
-    return clientRole === UserRole.MENTEE ? (
-      <MenteePage variant={isDesktop ? "desktop" : "mobile"} />
-    ) : (
-      <MentorPage variant={isDesktop ? "desktop" : "mobile"} />
-    );
+  const shouldRenderMentorPage = role === UserRole.ADMIN ? clientRole !== UserRole.MENTEE : role === UserRole.MENTOR;
+
+  if (shouldRenderMentorPage) {
+    return isDesktop ? <MentorDesktopPage /> : <MentorMobilePage />;
   }
 
-  return role === UserRole.MENTOR ? (
-    <MentorPage variant={isDesktop ? "desktop" : "mobile"} />
-  ) : (
-    <MenteePage variant={isDesktop ? "desktop" : "mobile"} />
-  );
+  return isDesktop ? <MenteeDesktopPage /> : <MenteeMobilePage />;
 };
 
 export default MentorClient;

From 7f15d0ec386802de73b92b3a8b02cae434ceb095 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 10:27:37 +0900
Subject: [PATCH 14/20] =?UTF-8?q?refactor:=20=EB=8C=80=ED=95=99=20?=
 =?UTF-8?q?=EC=A7=80=EC=9B=90=20=EC=84=B1=EC=A0=81=20=EB=8D=B0=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=ED=86=B1=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../application/ScorePageContent.tsx          |  6 +-
 .../app/university/application/ScoreSheet.tsx | 17 ++--
 .../ApplicationBottomActionBar.tsx            | 19 ++++-
 .../application/apply/ApplyPageContent.tsx    | 81 +++++++++++++------
 .../application/apply/ConfirmStep.tsx         | 26 +++---
 .../university/application/apply/DoneStep.tsx |  9 ++-
 .../university/application/apply/EmptyGPA.tsx | 11 ++-
 .../university/application/apply/GpaStep.tsx  | 28 +++++--
 .../application/apply/LanguageStep.tsx        | 26 +++---
 .../application/apply/UniversityStep.tsx      | 22 +++--
 .../src/app/university/score/ScoreCard.tsx    | 14 ++--
 .../src/app/university/score/ScoreScreen.tsx  | 37 +++++----
 .../score/submit/gpa/GpaSubmitForm.tsx        | 12 +--
 .../language-test/LanguageTestSubmitForm.tsx  | 12 +--
 .../src/components/score/SubmitLinkTab.tsx    | 12 ++-
 .../web/src/components/score/SubmitResult.tsx | 17 ++--
 16 files changed, 221 insertions(+), 128 deletions(-)

diff --git a/apps/web/src/app/university/application/ScorePageContent.tsx b/apps/web/src/app/university/application/ScorePageContent.tsx
index 7f8260509..7d32bf7a5 100644
--- a/apps/web/src/app/university/application/ScorePageContent.tsx
+++ b/apps/web/src/app/university/application/ScorePageContent.tsx
@@ -15,7 +15,7 @@ import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import ApplicationSectionTitle from "./_components/ApplicationSectionTitle";
 import ScoreSearchBar from "./ScoreSearchBar";
 import ScoreSearchField from "./ScoreSearchField";
-import ScoreSheet from "./ScoreSheet";
+import { DesktopScoreSheet, MobileScoreSheet } from "./ScoreSheet";
 
 type ScorePageViewProps = {
   searchRef: RefObject<HTMLInputElement>;
@@ -209,7 +209,7 @@ const ApplicationScoreMobileView = ({
 
           <div className="mx-auto mt-3 flex w-full flex-col gap-3 overflow-x-auto pb-4">
             {scoreSheets.map((choice) => (
-              <ScoreSheet key={choice.koreanName} scoreSheet={choice} />
+              <MobileScoreSheet key={choice.koreanName} scoreSheet={choice} />
             ))}
           </div>
         </>
@@ -260,7 +260,7 @@ const ApplicationScoreDesktopView = ({
             ) : (
               <div className="mt-6 grid gap-4 lg:grid-cols-2">
                 {scoreSheets.map((choice) => (
-                  <ScoreSheet key={choice.koreanName} scoreSheet={choice} variant="desktop" />
+                  <DesktopScoreSheet key={choice.koreanName} scoreSheet={choice} />
                 ))}
               </div>
             )}
diff --git a/apps/web/src/app/university/application/ScoreSheet.tsx b/apps/web/src/app/university/application/ScoreSheet.tsx
index 56a350428..fd2da6c84 100644
--- a/apps/web/src/app/university/application/ScoreSheet.tsx
+++ b/apps/web/src/app/university/application/ScoreSheet.tsx
@@ -4,15 +4,12 @@ import { IconExpandMoreFilled } from "@/public/svgs/community";
 import type { ScoreSheet as ScoreSheetType } from "@/types/application";
 import { formatLanguageTestScore, isLanguageTestEnum, languageTestMapping } from "@/types/score";
 
-const ScoreSheet = ({
-  scoreSheet,
-  variant = "mobile",
-}: {
+type ScoreSheetProps = {
   scoreSheet: ScoreSheetType;
-  variant?: "mobile" | "desktop";
-}) => {
+};
+
+const ScoreSheetBase = ({ scoreSheet, isDesktop }: ScoreSheetProps & { isDesktop: boolean }) => {
   const [tableOpened, setTableOpened] = useState(false);
-  const isDesktop = variant === "desktop";
 
   return (
     <div
@@ -63,4 +60,8 @@ const ScoreSheet = ({
   );
 };
 
-export default ScoreSheet;
+export const DesktopScoreSheet = (props: ScoreSheetProps) => <ScoreSheetBase {...props} isDesktop />;
+
+export const MobileScoreSheet = (props: ScoreSheetProps) => <ScoreSheetBase {...props} isDesktop={false} />;
+
+export default MobileScoreSheet;
diff --git a/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
index 204ec83d6..3ca037f0d 100644
--- a/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
+++ b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
@@ -3,11 +3,14 @@ import BlockBtn from "@/components/button/BlockBtn";
 type ApplicationBottomActionBarProps = {
   label: string;
   onClick: () => void;
-  variant?: "mobile" | "desktop";
 };
 
-const ApplicationBottomActionBar = ({ label, onClick, variant = "mobile" }: ApplicationBottomActionBarProps) => {
-  if (variant === "desktop") {
+const ApplicationBottomActionBarBase = ({
+  label,
+  onClick,
+  isDesktop,
+}: ApplicationBottomActionBarProps & { isDesktop: boolean }) => {
+  if (isDesktop) {
     return (
       <div className="mt-8">
         <BlockBtn onClick={onClick}>{label}</BlockBtn>
@@ -22,4 +25,12 @@ const ApplicationBottomActionBar = ({ label, onClick, variant = "mobile" }: Appl
   );
 };
 
-export default ApplicationBottomActionBar;
+export const DesktopApplicationBottomActionBar = (props: ApplicationBottomActionBarProps) => (
+  <ApplicationBottomActionBarBase {...props} isDesktop />
+);
+
+export const MobileApplicationBottomActionBar = (props: ApplicationBottomActionBarProps) => (
+  <ApplicationBottomActionBarBase {...props} isDesktop={false} />
+);
+
+export default MobileApplicationBottomActionBar;
diff --git a/apps/web/src/app/university/application/apply/ApplyPageContent.tsx b/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
index b3d054ea5..eb6889e8d 100644
--- a/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
+++ b/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
@@ -13,12 +13,12 @@ import { showIconToast } from "@/lib/toast/showIconToast";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import type { ListUniversity } from "@/types/university";
 import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
-import ConfirmStep from "./ConfirmStep";
-import DoneStep from "./DoneStep";
-import EmptyGPA from "./EmptyGPA";
-import GpaStep from "./GpaStep";
-import LanguageStep from "./LanguageStep";
-import UniversityStep from "./UniversityStep";
+import { DesktopConfirmStep, MobileConfirmStep } from "./ConfirmStep";
+import { DesktopDoneStep, MobileDoneStep } from "./DoneStep";
+import { DesktopEmptyGPA, MobileEmptyGPA } from "./EmptyGPA";
+import { DesktopGpaStep, MobileGpaStep } from "./GpaStep";
+import { DesktopLanguageStep, MobileLanguageStep } from "./LanguageStep";
+import { DesktopUniversityStep, MobileUniversityStep } from "./UniversityStep";
 
 const APPLY_PROGRESS_TOTAL_STEPS = 5;
 const APPLY_STEP_LABELS = ["어학 성적 선택", "학점 선택", "학교 선택", "제출 확인", "지원 완료"] as const;
@@ -96,53 +96,82 @@ const ApplyPageContent = () => {
   const activeStepIndex =
     step === 99 ? APPLY_STEP_LABELS.length - 1 : Math.max(0, Math.min(step - 1, APPLY_STEP_LABELS.length - 1));
 
-  const renderStep = (variant: "mobile" | "desktop") => {
+  const selectedUniversityList = curUniversityList
+    .map((id) => universityList.find((university) => university.id === id))
+    .filter(Boolean) as ListUniversity[];
+
+  const renderDesktopStep = () => {
     if (isScoreDataEmpty) {
-      return <EmptyGPA variant={variant} />;
+      return <DesktopEmptyGPA />;
     }
 
     return (
       <>
         {step === 1 && (
-          <LanguageStep
+          <DesktopLanguageStep
             languageTestScoreList={languageTestScoreList}
             curLanguageTestScore={curLanguageTestScore}
             setCurLanguageTestScore={setCurLanguageTestScore}
             onNext={goNextStep}
-            variant={variant}
           />
         )}
         {step === 2 && (
-          <GpaStep
+          <DesktopGpaStep
             gpaScoreList={gpaScoreList}
             curGpaScore={curGpaScore}
             setCurGpaScore={setCurGpaScore}
             onNext={goNextStep}
-            variant={variant}
           />
         )}
         {step === 3 && (
-          <UniversityStep
+          <DesktopUniversityStep
             universityList={universityList}
             curUniversityList={curUniversityList}
             setCurUniversityList={setCurUniversityList}
             maxChoiceCount={maxChoiceCount}
             onNext={goNextStep}
-            variant={variant}
           />
         )}
-        {step === 4 && (
-          <ConfirmStep
-            universityList={
-              curUniversityList
-                .map((id) => universityList.find((university) => university.id === id))
-                .filter(Boolean) as ListUniversity[]
-            }
-            onNext={handleSubmit}
-            variant={variant}
+        {step === 4 && <DesktopConfirmStep universityList={selectedUniversityList} onNext={handleSubmit} />}
+        {step === 99 && <DesktopDoneStep />}
+      </>
+    );
+  };
+
+  const renderMobileStep = () => {
+    if (isScoreDataEmpty) {
+      return <MobileEmptyGPA />;
+    }
+
+    return (
+      <>
+        {step === 1 && (
+          <MobileLanguageStep
+            languageTestScoreList={languageTestScoreList}
+            curLanguageTestScore={curLanguageTestScore}
+            setCurLanguageTestScore={setCurLanguageTestScore}
+            onNext={goNextStep}
+          />
+        )}
+        {step === 2 && (
+          <MobileGpaStep
+            gpaScoreList={gpaScoreList}
+            curGpaScore={curGpaScore}
+            setCurGpaScore={setCurGpaScore}
+            onNext={goNextStep}
+          />
+        )}
+        {step === 3 && (
+          <MobileUniversityStep
+            universityList={universityList}
+            curUniversityList={curUniversityList}
+            setCurUniversityList={setCurUniversityList}
+            maxChoiceCount={maxChoiceCount}
+            onNext={goNextStep}
           />
         )}
-        {step === 99 && <DoneStep variant={variant} />}
+        {step === 4 && <MobileConfirmStep universityList={selectedUniversityList} onNext={handleSubmit} />}
+        {step === 99 && <MobileDoneStep />}
       </>
     );
   };
@@ -171,7 +200,7 @@ const ApplyPageContent = () => {
               {(step === 1 || step === 2 || step === 3) && (
                 <ProgressBar currentStep={progressStep} totalSteps={APPLY_PROGRESS_TOTAL_STEPS} />
               )}
-              <div className="mt-8">{renderStep("desktop")}</div>
+              <div className="mt-8">{renderDesktopStep()}</div>
             </section>
 
             <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
@@ -213,7 +242,7 @@ const ApplyPageContent = () => {
           <ProgressBar currentStep={progressStep} totalSteps={APPLY_PROGRESS_TOTAL_STEPS} />
         )}
       </div>
-      {renderStep("mobile")}
+      {renderMobileStep()}
     </>
   );
 };
diff --git a/apps/web/src/app/university/application/apply/ConfirmStep.tsx b/apps/web/src/app/university/application/apply/ConfirmStep.tsx
index 4febb9b10..77114d8e7 100644
--- a/apps/web/src/app/university/application/apply/ConfirmStep.tsx
+++ b/apps/web/src/app/university/application/apply/ConfirmStep.tsx
@@ -2,27 +2,29 @@ import clsx from "clsx";
 
 import { IconCheck } from "@/public/svgs/mentor";
 import type { ListUniversity } from "@/types/university";
-import ApplicationBottomActionBar from "../_components/ApplicationBottomActionBar";
+import {
+  DesktopApplicationBottomActionBar,
+  MobileApplicationBottomActionBar,
+} from "../_components/ApplicationBottomActionBar";
 
 type ConfirmStepProps = {
   universityList: ListUniversity[];
   onNext: () => void;
-  variant?: "mobile" | "desktop";
 };
 
 type ConfirmUniversityCardProps = {
   universityList: ListUniversity[];
-  variant?: "mobile" | "desktop";
+  isDesktop: boolean;
 };
 
-const ConfirmUniversityCard = ({ universityList, variant = "mobile" }: ConfirmUniversityCardProps) => {
+const ConfirmUniversityCard = ({ universityList, isDesktop }: ConfirmUniversityCardProps) => {
   if (universityList.length === 0) return null;
 
   return (
     <div
       className={clsx(
         "mt-10 rounded-lg border border-secondary bg-white px-5 py-6",
-        variant === "desktop" ? "shadow-none" : "shadow-[0_0_5px_rgba(0,0,0,0.25)]",
+        isDesktop ? "shadow-none" : "shadow-[0_0_5px_rgba(0,0,0,0.25)]",
       )}
     >
       {universityList.map((university, index) => (
@@ -45,8 +47,8 @@ const ConfirmUniversityCard = ({ universityList, variant = "mobile" }: ConfirmUn
   );
 };
 
-const ConfirmStep = ({ universityList, onNext, variant = "mobile" }: ConfirmStepProps) => {
-  const isDesktop = variant === "desktop";
+const ConfirmStepBase = ({ universityList, onNext, isDesktop }: ConfirmStepProps & { isDesktop: boolean }) => {
+  const ActionBar = isDesktop ? DesktopApplicationBottomActionBar : MobileApplicationBottomActionBar;
 
   return (
     <div className={clsx(isDesktop ? "pt-4" : "px-5 pb-40 pt-[76px]")}>
@@ -63,10 +65,14 @@ const ConfirmStep = ({ universityList, onNext, variant = "mobile" }: ConfirmStep
         </p>
       </div>
 
-      <ConfirmUniversityCard universityList={universityList} variant={variant} />
-      <ApplicationBottomActionBar label="제출하기" onClick={onNext} variant={variant} />
+      <ConfirmUniversityCard universityList={universityList} isDesktop={isDesktop} />
+      <ActionBar label="제출하기" onClick={onNext} />
     </div>
   );
 };
 
-export default ConfirmStep;
+export const DesktopConfirmStep = (props: ConfirmStepProps) => <ConfirmStepBase {...props} isDesktop />;
+
+export const MobileConfirmStep = (props: ConfirmStepProps) => <ConfirmStepBase {...props} isDesktop={false} />;
+
+export default MobileConfirmStep;
diff --git a/apps/web/src/app/university/application/apply/DoneStep.tsx b/apps/web/src/app/university/application/apply/DoneStep.tsx
index 638460e9a..700193862 100644
--- a/apps/web/src/app/university/application/apply/DoneStep.tsx
+++ b/apps/web/src/app/university/application/apply/DoneStep.tsx
@@ -4,9 +4,8 @@ import BlockBtn from "@/components/button/BlockBtn";
 import Image from "@/components/ui/FallbackImage";
 import ApplicationSectionTitle from "../_components/ApplicationSectionTitle";
 
-const DoneStep = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
+const DoneStepBase = ({ isDesktop }: { isDesktop: boolean }) => {
   const router = useRouter();
-  const isDesktop = variant === "desktop";
 
   return (
     <div className={clsx(isDesktop ? "" : "mt-24 px-5")}>
@@ -43,4 +42,8 @@ const DoneStep = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) =>
   );
 };
 
-export default DoneStep;
+export const DesktopDoneStep = () => <DoneStepBase isDesktop />;
+
+export const MobileDoneStep = () => <DoneStepBase isDesktop={false} />;
+
+export default MobileDoneStep;
diff --git a/apps/web/src/app/university/application/apply/EmptyGPA.tsx b/apps/web/src/app/university/application/apply/EmptyGPA.tsx
index 6e0adad14..fa4ab6ac9 100644
--- a/apps/web/src/app/university/application/apply/EmptyGPA.tsx
+++ b/apps/web/src/app/university/application/apply/EmptyGPA.tsx
@@ -4,9 +4,7 @@ import Link from "next/link";
 import { IconSolidConnectionSmallLogo } from "@/public/svgs/my";
 import ApplicationSectionTitle from "../_components/ApplicationSectionTitle";
 
-const EmptyGPA = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
-  const isDesktop = variant === "desktop";
-
+const EmptyGPABase = ({ isDesktop }: { isDesktop: boolean }) => {
   return (
     <div className={clsx(isDesktop ? "" : "mt-24 px-5")}>
       <div
@@ -30,4 +28,9 @@ const EmptyGPA = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) =>
     </div>
   );
 };
-export default EmptyGPA;
+
+export const DesktopEmptyGPA = () => <EmptyGPABase isDesktop />;
+
+export const MobileEmptyGPA = () => <EmptyGPABase isDesktop={false} />;
+
+export default MobileEmptyGPA;
diff --git a/apps/web/src/app/university/application/apply/GpaStep.tsx b/apps/web/src/app/university/application/apply/GpaStep.tsx
index 160a09a95..9f87f0253 100644
--- a/apps/web/src/app/university/application/apply/GpaStep.tsx
+++ b/apps/web/src/app/university/application/apply/GpaStep.tsx
@@ -2,12 +2,15 @@
 
 import clsx from "clsx";
 import { useState } from "react";
-import ScoreCard from "@/app/university/score/ScoreCard";
+import { DesktopScoreCard, MobileScoreCard } from "@/app/university/score/ScoreCard";
 import TextModal from "@/components/modal/TextModal";
 import Tab from "@/components/ui/Tab";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import { type GpaScore, ScoreSubmitStatus } from "@/types/score";
-import ApplicationBottomActionBar from "../_components/ApplicationBottomActionBar";
+import {
+  DesktopApplicationBottomActionBar,
+  MobileApplicationBottomActionBar,
+} from "../_components/ApplicationBottomActionBar";
 import ApplicationSectionTitle from "../_components/ApplicationSectionTitle";
 
 type GpaStepProps = {
@@ -15,12 +18,18 @@ type GpaStepProps = {
   curGpaScore: number | null;
   setCurGpaScore: (id: number) => void;
   onNext: () => void;
-  variant?: "mobile" | "desktop";
 };
 
-const GpaStep = ({ gpaScoreList, curGpaScore, setCurGpaScore, onNext, variant = "mobile" }: GpaStepProps) => {
+const GpaStepBase = ({
+  gpaScoreList,
+  curGpaScore,
+  setCurGpaScore,
+  onNext,
+  isDesktop,
+}: GpaStepProps & { isDesktop: boolean }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const isDesktop = variant === "desktop";
+  const ScoreCard = isDesktop ? DesktopScoreCard : MobileScoreCard;
+  const ActionBar = isDesktop ? DesktopApplicationBottomActionBar : MobileApplicationBottomActionBar;
 
   const handleNext = () => {
     if (curGpaScore === null) {
@@ -61,13 +70,12 @@ const GpaStep = ({ gpaScoreList, curGpaScore, setCurGpaScore, onNext, variant =
                 // date={new Date(score.issueDate).toISOString()}
                 date={score.issueDate}
                 isFocused={score.id === curGpaScore}
-                variant={variant}
               />
             </button>
           ))}
         </div>
       </div>
-      <ApplicationBottomActionBar label="다음" onClick={handleNext} variant={variant} />
+      <ActionBar label="다음" onClick={handleNext} />
       <TextModal
         isOpen={isModalOpen}
         handleClose={() => setIsModalOpen(false)}
@@ -78,4 +86,8 @@ const GpaStep = ({ gpaScoreList, curGpaScore, setCurGpaScore, onNext, variant =
   );
 };
 
-export default GpaStep;
+export const DesktopGpaStep = (props: GpaStepProps) => <GpaStepBase {...props} isDesktop />;
+
+export const MobileGpaStep = (props: GpaStepProps) => <GpaStepBase {...props} isDesktop={false} />;
+
+export default MobileGpaStep;
diff --git a/apps/web/src/app/university/application/apply/LanguageStep.tsx b/apps/web/src/app/university/application/apply/LanguageStep.tsx
index aa41ad317..ff3f1c45e 100644
--- a/apps/web/src/app/university/application/apply/LanguageStep.tsx
+++ b/apps/web/src/app/university/application/apply/LanguageStep.tsx
@@ -2,12 +2,15 @@
 
 import clsx from "clsx";
 import { useState } from "react";
-import ScoreCard from "@/app/university/score/ScoreCard";
+import { DesktopScoreCard, MobileScoreCard } from "@/app/university/score/ScoreCard";
 import TextModal from "@/components/modal/TextModal";
 import Tab from "@/components/ui/Tab";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import { formatLanguageTestScoreWithMax, type LanguageTestScore, ScoreSubmitStatus } from "@/types/score";
-import ApplicationBottomActionBar from "../_components/ApplicationBottomActionBar";
+import {
+  DesktopApplicationBottomActionBar,
+  MobileApplicationBottomActionBar,
+} from "../_components/ApplicationBottomActionBar";
 import ApplicationSectionTitle from "../_components/ApplicationSectionTitle";
 
 type LanguageStepProps = {
@@ -15,18 +18,18 @@ type LanguageStepProps = {
   curLanguageTestScore: number | null;
   setCurLanguageTestScore: (id: number) => void;
   onNext: () => void;
-  variant?: "mobile" | "desktop";
 };
 
-const LanguageStep = ({
+const LanguageStepBase = ({
   languageTestScoreList,
   curLanguageTestScore,
   setCurLanguageTestScore,
   onNext,
-  variant = "mobile",
-}: LanguageStepProps) => {
+  isDesktop,
+}: LanguageStepProps & { isDesktop: boolean }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const isDesktop = variant === "desktop";
+  const ScoreCard = isDesktop ? DesktopScoreCard : MobileScoreCard;
+  const ActionBar = isDesktop ? DesktopApplicationBottomActionBar : MobileApplicationBottomActionBar;
 
   const handleNext = () => {
     if (curLanguageTestScore === null) {
@@ -71,13 +74,12 @@ const LanguageStep = ({
                 // date={new Date(score.issueDate).toISOString()}
                 date={score.issueDate}
                 isFocused={score.id === curLanguageTestScore}
-                variant={variant}
               />
             </button>
           ))}
         </div>
       </div>
-      <ApplicationBottomActionBar label="다음" onClick={handleNext} variant={variant} />
+      <ActionBar label="다음" onClick={handleNext} />
       <TextModal
         isOpen={isModalOpen}
         handleClose={() => setIsModalOpen(false)}
@@ -88,4 +90,8 @@ const LanguageStep = ({
   );
 };
 
-export default LanguageStep;
+export const DesktopLanguageStep = (props: LanguageStepProps) => <LanguageStepBase {...props} isDesktop />;
+
+export const MobileLanguageStep = (props: LanguageStepProps) => <LanguageStepBase {...props} isDesktop={false} />;
+
+export default MobileLanguageStep;
diff --git a/apps/web/src/app/university/application/apply/UniversityStep.tsx b/apps/web/src/app/university/application/apply/UniversityStep.tsx
index 3a9d25aad..4b8fea3a6 100644
--- a/apps/web/src/app/university/application/apply/UniversityStep.tsx
+++ b/apps/web/src/app/university/application/apply/UniversityStep.tsx
@@ -7,7 +7,10 @@ import TextModal from "@/components/modal/TextModal";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/Select";
 
 import type { ListUniversity } from "@/types/university";
-import ApplicationBottomActionBar from "../_components/ApplicationBottomActionBar";
+import {
+  DesktopApplicationBottomActionBar,
+  MobileApplicationBottomActionBar,
+} from "../_components/ApplicationBottomActionBar";
 
 type UniversityStepProps = {
   universityList: ListUniversity[];
@@ -15,7 +18,6 @@ type UniversityStepProps = {
   setCurUniversityList: (idList: number[]) => void;
   maxChoiceCount: number;
   onNext: () => void;
-  variant?: "mobile" | "desktop";
 };
 
 type UniversityChoiceSelectProps = {
@@ -64,17 +66,17 @@ const UniversityChoiceSelect = ({
   );
 };
 
-const UniversityStep = ({
+const UniversityStepBase = ({
   universityList,
   curUniversityList,
   setCurUniversityList,
   maxChoiceCount,
   onNext,
-  variant = "mobile",
-}: UniversityStepProps) => {
+  isDesktop,
+}: UniversityStepProps & { isDesktop: boolean }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const choiceIndexes = useMemo(() => Array.from({ length: maxChoiceCount }, (_, index) => index), [maxChoiceCount]);
-  const isDesktop = variant === "desktop";
+  const ActionBar = isDesktop ? DesktopApplicationBottomActionBar : MobileApplicationBottomActionBar;
 
   const handleSelect = (index: number, value: number) => {
     const newList = curUniversityList.slice(0, maxChoiceCount);
@@ -116,7 +118,7 @@ const UniversityStep = ({
           ))}
         </div>
       </div>
-      <ApplicationBottomActionBar label="다음" onClick={handleNext} variant={variant} />
+      <ActionBar label="다음" onClick={handleNext} />
       <TextModal
         isOpen={isModalOpen}
         handleClose={() => setIsModalOpen(false)}
@@ -127,4 +129,8 @@ const UniversityStep = ({
   );
 };
 
-export default UniversityStep;
+export const DesktopUniversityStep = (props: UniversityStepProps) => <UniversityStepBase {...props} isDesktop />;
+
+export const MobileUniversityStep = (props: UniversityStepProps) => <UniversityStepBase {...props} isDesktop={false} />;
+
+export default MobileUniversityStep;
diff --git a/apps/web/src/app/university/score/ScoreCard.tsx b/apps/web/src/app/university/score/ScoreCard.tsx
index 712cfc346..37306e351 100644
--- a/apps/web/src/app/university/score/ScoreCard.tsx
+++ b/apps/web/src/app/university/score/ScoreCard.tsx
@@ -8,7 +8,6 @@ type ScoreCardProps = {
   date: string; // Date ISO string
   dateLabel?: string;
   isFocused?: boolean;
-  variant?: "mobile" | "desktop";
 };
 
 const formatDate = (date: string) => {
@@ -49,17 +48,16 @@ const getStatus = (status: ScoreSubmitStatus) => {
   }
 };
 
-const ScoreCard = ({
+const ScoreCardBase = ({
   name,
   score,
   status,
   date,
   dateLabel = "제출일",
   isFocused = false,
-  variant = "mobile",
-}: ScoreCardProps) => {
+  isDesktop,
+}: ScoreCardProps & { isDesktop: boolean }) => {
   const isVerified = status === "APPROVED";
-  const isDesktop = variant === "desktop";
 
   return (
     <div
@@ -100,4 +98,8 @@ const ScoreCard = ({
   );
 };
 
-export default ScoreCard;
+export const DesktopScoreCard = (props: ScoreCardProps) => <ScoreCardBase {...props} isDesktop />;
+
+export const MobileScoreCard = (props: ScoreCardProps) => <ScoreCardBase {...props} isDesktop={false} />;
+
+export default MobileScoreCard;
diff --git a/apps/web/src/app/university/score/ScoreScreen.tsx b/apps/web/src/app/university/score/ScoreScreen.tsx
index e0c2d53ca..f8fb16083 100644
--- a/apps/web/src/app/university/score/ScoreScreen.tsx
+++ b/apps/web/src/app/university/score/ScoreScreen.tsx
@@ -16,7 +16,7 @@ import {
   ScoreSubmitStatus,
 } from "@/types/score";
 import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
-import ScoreCard from "./ScoreCard";
+import { DesktopScoreCard, MobileScoreCard } from "./ScoreCard";
 
 const SCORE_TAB_CHOICES = ["공인어학", "학점"] as const;
 type ScoreTab = (typeof SCORE_TAB_CHOICES)[number];
@@ -83,9 +83,9 @@ const ScoreMobileView = ({
       <div className="mx-5 mb-40">
         <Tab<ScoreTab> choices={SCORE_TAB_CHOICES} choice={curTab} setChoice={setCurTab} />
         {isEmptyCurrentTab ? (
-          <ScoreEmptyState />
+          <MobileScoreEmptyState />
         ) : (
-          <ScoreList
+          <MobileScoreList
             curTab={curTab}
             gpaScoreList={gpaScoreList}
             languageTestScoreList={languageTestScoreList}
@@ -137,14 +137,13 @@ const ScoreDesktopView = ({
             </div>
 
             {isEmptyCurrentTab ? (
-              <ScoreEmptyState variant="desktop" />
+              <DesktopScoreEmptyState />
             ) : (
-              <ScoreList
+              <DesktopScoreList
                 curTab={curTab}
                 gpaScoreList={gpaScoreList}
                 languageTestScoreList={languageTestScoreList}
                 onScoreClick={onScoreClick}
-                variant="desktop"
               />
             )}
           </section>
@@ -176,9 +175,7 @@ const ScoreDesktopView = ({
   );
 };
 
-const ScoreEmptyState = ({ variant = "mobile" }: { variant?: "mobile" | "desktop" }) => {
-  const isDesktop = variant === "desktop";
-
+const ScoreEmptyStateBase = ({ isDesktop }: { isDesktop: boolean }) => {
   return (
     <div
       className={clsx(
@@ -196,16 +193,20 @@ const ScoreEmptyState = ({ variant = "mobile" }: { variant?: "mobile" | "desktop
   );
 };
 
-const ScoreList = ({
+const MobileScoreEmptyState = () => <ScoreEmptyStateBase isDesktop={false} />;
+
+const DesktopScoreEmptyState = () => <ScoreEmptyStateBase isDesktop />;
+
+const ScoreListBase = ({
   curTab,
   gpaScoreList,
   languageTestScoreList,
   onScoreClick,
-  variant = "mobile",
+  isDesktop,
 }: Pick<ScoreViewProps, "curTab" | "gpaScoreList" | "languageTestScoreList" | "onScoreClick"> & {
-  variant?: "mobile" | "desktop";
+  isDesktop: boolean;
 }) => {
-  const isDesktop = variant === "desktop";
+  const ScoreCard = isDesktop ? DesktopScoreCard : MobileScoreCard;
 
   return (
     <div className={clsx(isDesktop ? "mt-6 grid gap-4 lg:grid-cols-2" : "mt-3.5 flex flex-col gap-3.5")}>
@@ -230,7 +231,6 @@ const ScoreList = ({
                 date={submittedDate}
                 dateLabel="제출일"
                 isFocused={score.verifyStatus === "APPROVED"}
-                variant={variant}
               />
             </button>
           );
@@ -254,7 +254,6 @@ const ScoreList = ({
                 date={submittedDate}
                 dateLabel="제출일"
                 isFocused={score.verifyStatus === "APPROVED"}
-                variant={variant}
               />
             </button>
           );
@@ -263,4 +262,12 @@ const ScoreList = ({
   );
 };
 
+const MobileScoreList = (
+  props: Pick<ScoreViewProps, "curTab" | "gpaScoreList" | "languageTestScoreList" | "onScoreClick">,
+) => <ScoreListBase {...props} isDesktop={false} />;
+
+const DesktopScoreList = (
+  props: Pick<ScoreViewProps, "curTab" | "gpaScoreList" | "languageTestScoreList" | "onScoreClick">,
+) => <ScoreListBase {...props} isDesktop />;
+
 export default ScoreScreen;
diff --git a/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx b/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
index 76d51a7c2..d2da2e3fb 100644
--- a/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
+++ b/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
@@ -7,8 +7,8 @@ import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
 import { Controller, type SubmitHandler, useForm } from "react-hook-form";
 import { usePostGpaScore } from "@/apis/Scores";
-import SubmitLinkTab from "@/components/score/SubmitLinkTab";
-import SubmitResult, { type InfoRowProps } from "@/components/score/SubmitResult";
+import { DesktopSubmitLinkTab, MobileSubmitLinkTab } from "@/components/score/SubmitLinkTab";
+import { DesktopSubmitResult, type InfoRowProps, MobileSubmitResult } from "@/components/score/SubmitResult";
 import CustomDropdown from "@/components/search/CustomDropdown";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
@@ -51,6 +51,7 @@ const GpaSubmitForm = () => {
   if (isDesktop === null) return null;
 
   if (showResult && submittedData) {
+    const Result = isDesktop ? DesktopSubmitResult : MobileSubmitResult;
     const infoRows: InfoRowProps[] = [
       {
         label: "학점 기준",
@@ -69,11 +70,10 @@ const GpaSubmitForm = () => {
     ];
 
     return (
-      <SubmitResult
+      <Result
         title="학점 입력 완료"
         description="성적 승인은 최대 3일까지 걸릴 수 있습니다."
         buttonText="홈으로"
-        variant={isDesktop ? "desktop" : "mobile"}
         onClick={() => router.push("/")}
         handleClose={() => setShowResult(false)}
         infoRows={infoRows}
@@ -176,7 +176,7 @@ const GpaSubmitForm = () => {
 
           <div className="grid items-start gap-8 xl:grid-cols-[minmax(460px,600px)_minmax(300px,360px)]">
             <section className="rounded-lg border border-k-100 bg-white p-8">
-              <SubmitLinkTab variant="desktop" />
+              <DesktopSubmitLinkTab />
               <form onSubmit={handleSubmit(onSubmit)} className="mt-8">
                 {formTitle}
                 {formFields}
@@ -200,7 +200,7 @@ const GpaSubmitForm = () => {
 
   return (
     <>
-      <SubmitLinkTab />
+      <MobileSubmitLinkTab />
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="pt-[30px]">
           {formTitle}
diff --git a/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx b/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx
index ecc65dc81..a9966788b 100644
--- a/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx
+++ b/apps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsx
@@ -7,8 +7,8 @@ import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
 import { Controller, type SubmitHandler, useForm } from "react-hook-form";
 import { usePostLanguageTestScore } from "@/apis/Scores";
-import SubmitLinkTab from "@/components/score/SubmitLinkTab";
-import SubmitResult, { type InfoRowProps } from "@/components/score/SubmitResult";
+import { DesktopSubmitLinkTab, MobileSubmitLinkTab } from "@/components/score/SubmitLinkTab";
+import { DesktopSubmitResult, type InfoRowProps, MobileSubmitResult } from "@/components/score/SubmitResult";
 import CustomDropdown from "@/components/search/CustomDropdown";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import { formatLanguageTestScoreWithMax, LanguageTestEnum, languageTestScoreInfo } from "@/types/score";
@@ -59,6 +59,7 @@ const LanguageTestSubmitForm = () => {
 
   if (showResult && submittedData) {
     const submittedTestInfo = languageTestScoreInfo[submittedData.testType];
+    const Result = isDesktop ? DesktopSubmitResult : MobileSubmitResult;
 
     const infoRows: InfoRowProps[] = [
       {
@@ -74,11 +75,10 @@ const LanguageTestSubmitForm = () => {
     ];
 
     return (
-      <SubmitResult
+      <Result
         title="어학 성적 제출 완료"
         description="성적 승인은 최대 3일까지 걸릴 수 있습니다."
         buttonText="학점입력하기"
-        variant={isDesktop ? "desktop" : "mobile"}
         onClick={() => router.push("/university/score/submit/gpa")}
         handleClose={() => setShowResult(false)}
         infoRows={infoRows}
@@ -179,7 +179,7 @@ const LanguageTestSubmitForm = () => {
 
           <div className="grid items-start gap-8 xl:grid-cols-[minmax(460px,600px)_minmax(300px,360px)]">
             <section className="rounded-lg border border-k-100 bg-white p-8">
-              <SubmitLinkTab isActiveGpa={false} variant="desktop" />
+              <DesktopSubmitLinkTab isActiveGpa={false} />
               <form onSubmit={handleSubmit(onSubmit)} className="mt-8">
                 {formTitle}
                 {formFields}
@@ -203,7 +203,7 @@ const LanguageTestSubmitForm = () => {
 
   return (
     <>
-      <SubmitLinkTab isActiveGpa={false} />
+      <MobileSubmitLinkTab isActiveGpa={false} />
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="px-5 pt-[30px]">
           {formTitle}
diff --git a/apps/web/src/components/score/SubmitLinkTab.tsx b/apps/web/src/components/score/SubmitLinkTab.tsx
index d7b853d45..7ab929222 100644
--- a/apps/web/src/components/score/SubmitLinkTab.tsx
+++ b/apps/web/src/components/score/SubmitLinkTab.tsx
@@ -3,7 +3,6 @@ import Link from "next/link";
 
 type SubmitLinkTabProps = {
   isActiveGpa?: boolean;
-  variant?: "mobile" | "desktop";
   color?: {
     activeBtn?: string;
     deactiveBtn?: string;
@@ -12,7 +11,7 @@ type SubmitLinkTabProps = {
   };
 };
 
-const SubmitLinkTab = ({ color, isActiveGpa = true, variant = "mobile" }: SubmitLinkTabProps) => {
+const SubmitLinkTabBase = ({ color, isActiveGpa = true, isDesktop }: SubmitLinkTabProps & { isDesktop: boolean }) => {
   const defaultColor = {
     activeBtnFont: "text-black",
     deactiveBtnFont: "text-gray-200",
@@ -22,7 +21,7 @@ const SubmitLinkTab = ({ color, isActiveGpa = true, variant = "mobile" }: Submit
     deactiveBtnFont: color?.deactiveBtnFont ? `text-[${color.deactiveBtnFont}]` : defaultColor.deactiveBtnFont,
   };
 
-  if (variant === "desktop") {
+  if (isDesktop) {
     return (
       <div className="grid h-11 w-full grid-cols-2 rounded-lg bg-k-50 p-1 typo-medium-2">
         <Link
@@ -72,4 +71,9 @@ const SubmitLinkTab = ({ color, isActiveGpa = true, variant = "mobile" }: Submit
     </div>
   );
 };
-export default SubmitLinkTab;
+
+export const DesktopSubmitLinkTab = (props: SubmitLinkTabProps) => <SubmitLinkTabBase {...props} isDesktop />;
+
+export const MobileSubmitLinkTab = (props: SubmitLinkTabProps) => <SubmitLinkTabBase {...props} isDesktop={false} />;
+
+export default MobileSubmitLinkTab;
diff --git a/apps/web/src/components/score/SubmitResult.tsx b/apps/web/src/components/score/SubmitResult.tsx
index 5b2dcd7a9..53b990b3d 100644
--- a/apps/web/src/components/score/SubmitResult.tsx
+++ b/apps/web/src/components/score/SubmitResult.tsx
@@ -18,21 +18,20 @@ interface SubmitResultProps {
   description: string;
   infoRows: InfoRowProps[];
   buttonText: string;
-  variant?: "mobile" | "desktop";
   onClick?: () => void;
   handleClose?: () => void;
 }
 
 // --- 메인 컴포넌트 ---
-const SubmitResult = ({
+const SubmitResultBase = ({
   title,
   description,
   infoRows,
   buttonText,
-  variant = "mobile",
   onClick,
   handleClose,
-}: SubmitResultProps) => {
+  isDesktop,
+}: SubmitResultProps & { isDesktop: boolean }) => {
   const content = (
     <div className="w-full max-w-md text-center">
       <div className="mb-8 flex flex-col items-center">
@@ -78,7 +77,7 @@ const SubmitResult = ({
     </div>
   );
 
-  if (variant === "desktop") {
+  if (isDesktop) {
     return (
       <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
         <div className="mx-auto grid min-h-[calc(100vh-64px)] max-w-5xl items-center gap-8 xl:grid-cols-[minmax(420px,520px)_minmax(280px,340px)]">
@@ -101,6 +100,10 @@ const SubmitResult = ({
   return <div className="flex min-h-screen w-full flex-col items-center justify-center p-4 font-sans">{content}</div>;
 };
 
+export const DesktopSubmitResult = (props: SubmitResultProps) => <SubmitResultBase {...props} isDesktop />;
+
+export const MobileSubmitResult = (props: SubmitResultProps) => <SubmitResultBase {...props} isDesktop={false} />;
+
 // --- 컴포넌트 사용 예시 ---
 const _ExamplePage = () => {
   const infoRows = [
@@ -118,7 +121,7 @@ const _ExamplePage = () => {
   ];
 
   return (
-    <SubmitResult
+    <MobileSubmitResult
       title={"어학 성적 입력 완료"}
       description={"지원은 총 3번만 가능하며, 제출 완료 후 성적을 변경 하실 수 없습니다."}
       infoRows={infoRows}
@@ -127,4 +130,4 @@ const _ExamplePage = () => {
   );
 };
 
-export default SubmitResult;
+export default MobileSubmitResult;

From dbb90bdfc613701d36b872766022b58c9eeddc72 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 12:59:23 +0900
Subject: [PATCH 15/20] =?UTF-8?q?refactor:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../login/signup/SignupPolicyScreen.tsx       |  14 +-
 .../login/signup/SignupPrepareScreen.tsx      |  19 +-
 .../login/signup/SignupProfileScreen.tsx      |  18 +-
 .../login/signup/SignupRegionScreen.tsx       |  35 ++--
 .../components/login/signup/SignupSurvey.tsx  | 164 ++++++++++++------
 5 files changed, 163 insertions(+), 87 deletions(-)

diff --git a/apps/web/src/components/login/signup/SignupPolicyScreen.tsx b/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
index cfe9cd8b1..8124d44b0 100644
--- a/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
@@ -8,12 +8,10 @@ import { Checkbox } from "@/components/ui/Checkbox";
 
 interface SignupPolicyScreenProps {
   toNextStage: () => void;
-  variant?: "mobile" | "desktop";
 }
 
-const SignupPolicyScreen = ({ toNextStage, variant = "mobile" }: SignupPolicyScreenProps) => {
+const SignupPolicyScreenBase = ({ toNextStage, isDesktop }: SignupPolicyScreenProps & { isDesktop: boolean }) => {
   const [isChecked, setIsChecked] = useState(false);
-  const isDesktop = variant === "desktop";
 
   return (
     <div className={isDesktop ? "" : "mt-[-56px]"}>
@@ -70,4 +68,12 @@ const SignupPolicyScreen = ({ toNextStage, variant = "mobile" }: SignupPolicyScr
   );
 };
 
-export default SignupPolicyScreen;
+export const DesktopSignupPolicyScreen = (props: SignupPolicyScreenProps) => (
+  <SignupPolicyScreenBase {...props} isDesktop />
+);
+
+export const MobileSignupPolicyScreen = (props: SignupPolicyScreenProps) => (
+  <SignupPolicyScreenBase {...props} isDesktop={false} />
+);
+
+export default MobileSignupPolicyScreen;
diff --git a/apps/web/src/components/login/signup/SignupPrepareScreen.tsx b/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
index 522cf145b..25bf647cb 100644
--- a/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
@@ -11,17 +11,14 @@ type SignupPrepareScreenProps = {
   preparation: PreparationStatus | null;
   setPreparation: Dispatch<SetStateAction<PreparationStatus | null>>;
   toNextStage: () => void;
-  variant?: "mobile" | "desktop";
 };
 
-const SignupPrepareScreen = ({
+const SignupPrepareScreenBase = ({
   preparation,
   setPreparation,
   toNextStage,
-  variant = "mobile",
-}: SignupPrepareScreenProps) => {
-  const isDesktop = variant === "desktop";
-
+  isDesktop,
+}: SignupPrepareScreenProps & { isDesktop: boolean }) => {
   const submit = () => {
     if (!preparation) {
       showIconToast("logo", "준비 단계를 선택해주세요.");
@@ -118,4 +115,12 @@ const PrepareChoiceButton = ({
   );
 };
 
-export default SignupPrepareScreen;
+export const DesktopSignupPrepareScreen = (props: SignupPrepareScreenProps) => (
+  <SignupPrepareScreenBase {...props} isDesktop />
+);
+
+export const MobileSignupPrepareScreen = (props: SignupPrepareScreenProps) => (
+  <SignupPrepareScreenBase {...props} isDesktop={false} />
+);
+
+export default MobileSignupPrepareScreen;
diff --git a/apps/web/src/components/login/signup/SignupProfileScreen.tsx b/apps/web/src/components/login/signup/SignupProfileScreen.tsx
index a78e8b1b3..944c2b4eb 100644
--- a/apps/web/src/components/login/signup/SignupProfileScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupProfileScreen.tsx
@@ -13,21 +13,19 @@ type SignupProfileScreenProps = {
   defaultProfileImageUrl: string;
   profileImageFile: File | null;
   setProfileImageFile: Dispatch<SetStateAction<File | null>>;
-  variant?: "mobile" | "desktop";
 };
 
-const SignupProfileScreen = ({
+const SignupProfileScreenBase = ({
   toNextStage,
   nickname,
   setNickname,
   defaultProfileImageUrl,
   profileImageFile,
   setProfileImageFile,
-  variant = "mobile",
-}: SignupProfileScreenProps) => {
+  isDesktop,
+}: SignupProfileScreenProps & { isDesktop: boolean }) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploadedProfileImageFileView, setUploadedProfileImageFileView] = useState<string | null>(null);
-  const isDesktop = variant === "desktop";
 
   const submit = () => {
     if (!nickname) {
@@ -116,4 +114,12 @@ const SignupProfileScreen = ({
   );
 };
 
-export default SignupProfileScreen;
+export const DesktopSignupProfileScreen = (props: SignupProfileScreenProps) => (
+  <SignupProfileScreenBase {...props} isDesktop />
+);
+
+export const MobileSignupProfileScreen = (props: SignupProfileScreenProps) => (
+  <SignupProfileScreenBase {...props} isDesktop={false} />
+);
+
+export default MobileSignupProfileScreen;
diff --git a/apps/web/src/components/login/signup/SignupRegionScreen.tsx b/apps/web/src/components/login/signup/SignupRegionScreen.tsx
index 14d4fa312..198df2d96 100644
--- a/apps/web/src/components/login/signup/SignupRegionScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupRegionScreen.tsx
@@ -12,19 +12,16 @@ type SignupRegionScreenProps = {
   curCountries: string[];
   setCurCountries: Dispatch<SetStateAction<string[]>>;
   toNextStage: () => void;
-  variant?: "mobile" | "desktop";
 };
 
-const SignupRegionScreen = ({
+const SignupRegionScreenBase = ({
   curRegion,
   setCurRegion,
   curCountries,
   setCurCountries,
   toNextStage,
-  variant = "mobile",
-}: SignupRegionScreenProps) => {
-  const isDesktop = variant === "desktop";
-
+  isDesktop,
+}: SignupRegionScreenProps & { isDesktop: boolean }) => {
   const submit = () => {
     if (!curRegion) {
       showIconToast("logo", "권역을 선택해주세요.");
@@ -46,12 +43,12 @@ const SignupRegionScreen = ({
         </div>
 
         <div className="mt-10">
-          <RegionButtons curRegion={curRegion} setCurRegion={setCurRegion} variant={variant} />
+          <RegionButtons curRegion={curRegion} setCurRegion={setCurRegion} isDesktop={isDesktop} />
           <CountryButtons
             curCountries={curCountries}
             setCurCountries={setCurCountries}
             region={curRegion}
-            variant={variant}
+            isDesktop={isDesktop}
           />
         </div>
       </div>
@@ -65,16 +62,24 @@ const SignupRegionScreen = ({
   );
 };
 
-export default SignupRegionScreen;
+export const DesktopSignupRegionScreen = (props: SignupRegionScreenProps) => (
+  <SignupRegionScreenBase {...props} isDesktop />
+);
+
+export const MobileSignupRegionScreen = (props: SignupRegionScreenProps) => (
+  <SignupRegionScreenBase {...props} isDesktop={false} />
+);
+
+export default MobileSignupRegionScreen;
 
 type RegionButtonsProps = {
   curRegion: string | null;
   setCurRegion: Dispatch<SetStateAction<string | null>>;
-  variant?: "mobile" | "desktop";
+  isDesktop: boolean;
 };
 
-const RegionButtons = ({ curRegion, setCurRegion, variant = "mobile" }: RegionButtonsProps) => (
-  <div className={variant === "desktop" ? "grid grid-cols-3 gap-4" : "grid grid-cols-2 gap-5"}>
+const RegionButtons = ({ curRegion, setCurRegion, isDesktop }: RegionButtonsProps) => (
+  <div className={isDesktop ? "grid grid-cols-3 gap-4" : "grid grid-cols-2 gap-5"}>
     {regionList.map((region) => (
       <button
         key={region.name}
@@ -109,10 +114,10 @@ type CountryButtonsProps = {
   curCountries: string[];
   setCurCountries: Dispatch<SetStateAction<string[]>>;
   region: string | null;
-  variant?: "mobile" | "desktop";
+  isDesktop: boolean;
 };
 
-const CountryButtons = ({ curCountries, setCurCountries, region, variant = "mobile" }: CountryButtonsProps) => {
+const CountryButtons = ({ curCountries, setCurCountries, region, isDesktop }: CountryButtonsProps) => {
   const toggleCountry = (country: string) => {
     if (curCountries.includes(country)) {
       setCurCountries(curCountries.filter((c) => c !== country));
@@ -124,7 +129,7 @@ const CountryButtons = ({ curCountries, setCurCountries, region, variant = "mobi
   const countries = regionList.find((r) => r.name === region)?.countries || [];
 
   return (
-    <div className={variant === "desktop" ? "mt-5 grid grid-cols-4 gap-3" : "mt-5 grid grid-cols-3 gap-4"}>
+    <div className={isDesktop ? "mt-5 grid grid-cols-4 gap-3" : "mt-5 grid grid-cols-3 gap-4"}>
       {countries.map((country) => (
         <button
           key={country}
diff --git a/apps/web/src/components/login/signup/SignupSurvey.tsx b/apps/web/src/components/login/signup/SignupSurvey.tsx
index e751c3f58..12d5d7b1e 100644
--- a/apps/web/src/components/login/signup/SignupSurvey.tsx
+++ b/apps/web/src/components/login/signup/SignupSurvey.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import { usePostSignUp } from "@/apis/Auth";
 import { useUploadProfileImagePublic } from "@/apis/image-upload";
 import { Progress } from "@/components/ui/Progress";
@@ -16,10 +16,10 @@ import {
   getSafeCommunityRedirectPath,
 } from "@/utils/authRedirect";
 import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
-import SignupPolicyScreen from "./SignupPolicyScreen";
-import SignupPrepareScreen from "./SignupPrepareScreen";
-import SignupProfileScreen from "./SignupProfileScreen";
-import SignupRegionScreen from "./SignupRegionScreen";
+import { DesktopSignupPolicyScreen, MobileSignupPolicyScreen } from "./SignupPolicyScreen";
+import { DesktopSignupPrepareScreen, MobileSignupPrepareScreen } from "./SignupPrepareScreen";
+import { DesktopSignupProfileScreen, MobileSignupProfileScreen } from "./SignupProfileScreen";
+import { DesktopSignupRegionScreen, MobileSignupRegionScreen } from "./SignupRegionScreen";
 
 type SignupSurveyProps = {
   baseNickname: string;
@@ -27,8 +27,6 @@ type SignupSurveyProps = {
   baseProfileImageUrl: string;
 };
 
-type SignupScreenVariant = "mobile" | "desktop";
-
 const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSurveyProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -65,8 +63,6 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
     return null;
   }
 
-  const variant: SignupScreenVariant = isDesktop ? "desktop" : "mobile";
-
   const createRegisterRequest = async (): Promise<SignUpRequest> => {
     const submitRegion: RegionKo[] = region === "아직 잘 모르겠어요" ? [] : [region as RegionKo];
 
@@ -114,12 +110,11 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
     }
   };
 
-  const renderCurrentSurvey = () => {
+  const renderDesktopSurvey = () => {
     switch (curStage) {
       case 1:
         return (
-          <SignupPolicyScreen
-            variant={variant}
+          <DesktopSignupPolicyScreen
             toNextStage={() => {
               setCurStage(2);
             }}
@@ -127,8 +122,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
         );
       case 2:
         return (
-          <SignupPrepareScreen
-            variant={variant}
+          <DesktopSignupPrepareScreen
             preparation={curPreparation}
             setPreparation={setCurPreparation}
             toNextStage={() => {
@@ -138,8 +132,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
         );
       case 3:
         return (
-          <SignupRegionScreen
-            variant={variant}
+          <DesktopSignupRegionScreen
             curRegion={region}
             setCurRegion={setRegion}
             curCountries={countries}
@@ -151,8 +144,55 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
         );
       case 4:
         return (
-          <SignupProfileScreen
-            variant={variant}
+          <DesktopSignupProfileScreen
+            toNextStage={submitRegisterRequest}
+            nickname={nickname}
+            setNickname={setNickname}
+            defaultProfileImageUrl={baseProfileImageUrl}
+            profileImageFile={profileImageFile}
+            setProfileImageFile={setProfileImageFile}
+          />
+        );
+      default:
+        return <div>회원 가입이 완료되었습니다</div>;
+    }
+  };
+
+  const renderMobileSurvey = () => {
+    switch (curStage) {
+      case 1:
+        return (
+          <MobileSignupPolicyScreen
+            toNextStage={() => {
+              setCurStage(2);
+            }}
+          />
+        );
+      case 2:
+        return (
+          <MobileSignupPrepareScreen
+            preparation={curPreparation}
+            setPreparation={setCurPreparation}
+            toNextStage={() => {
+              setCurStage(3);
+            }}
+          />
+        );
+      case 3:
+        return (
+          <MobileSignupRegionScreen
+            curRegion={region}
+            setCurRegion={setRegion}
+            curCountries={countries}
+            setCurCountries={setCountries}
+            toNextStage={() => {
+              setCurStage(4);
+            }}
+          />
+        );
+      case 4:
+        return (
+          <MobileSignupProfileScreen
             toNextStage={submitRegisterRequest}
             nickname={nickname}
             setNickname={setNickname}
@@ -168,46 +208,60 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
 
   if (isDesktop) {
     return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <div className="grid min-h-[calc(100vh-64px)] items-center gap-8 xl:grid-cols-[minmax(420px,560px)_minmax(300px,380px)] xl:justify-center">
-          <section className="rounded-lg border border-k-100 bg-white p-8">
-            <p className="text-primary typo-sb-9">Sign up</p>
-            <h1 className="mt-2 text-k-900 typo-bold-1">회원가입</h1>
-            <p className="mt-2 text-k-500 typo-medium-2">
-              관심 국가와 준비 단계를 입력해 맞춤형 솔커 계정을 완성하세요.
-            </p>
-            <Progress value={curProgress} className="mt-8" />
-            <div className="mt-8">{renderCurrentSurvey()}</div>
-          </section>
-
-          <aside className="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">
-              {["약관 동의", "준비 단계", "관심 국가", "프로필"].map((item, index) => (
-                <div
-                  key={item}
-                  className={`rounded-lg px-4 py-3 typo-medium-2 ${
-                    curStage >= index + 1 ? "bg-primary-100 text-primary" : "bg-k-50 text-k-500"
-                  }`}
-                >
-                  {item}
-                </div>
-              ))}
-            </div>
-          </aside>
-        </div>
-      </div>
+      <SignupDesktopSurveyView curProgress={curProgress} curStage={curStage}>
+        {renderDesktopSurvey()}
+      </SignupDesktopSurveyView>
     );
   }
 
-  return (
-    <div>
-      <div className="mt-8 px-5">
-        <Progress value={curProgress} />
-      </div>
-      {renderCurrentSurvey()}
-    </div>
-  );
+  return <SignupMobileSurveyView curProgress={curProgress}>{renderMobileSurvey()}</SignupMobileSurveyView>;
 };
 
+const SignupDesktopSurveyView = ({
+  curProgress,
+  curStage,
+  children,
+}: {
+  curProgress: number;
+  curStage: number;
+  children: ReactNode;
+}) => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <div className="grid min-h-[calc(100vh-64px)] items-center gap-8 xl:grid-cols-[minmax(420px,560px)_minmax(300px,380px)] xl:justify-center">
+      <section className="rounded-lg border border-k-100 bg-white p-8">
+        <p className="text-primary typo-sb-9">Sign up</p>
+        <h1 className="mt-2 text-k-900 typo-bold-1">회원가입</h1>
+        <p className="mt-2 text-k-500 typo-medium-2">관심 국가와 준비 단계를 입력해 맞춤형 솔커 계정을 완성하세요.</p>
+        <Progress value={curProgress} className="mt-8" />
+        <div className="mt-8">{children}</div>
+      </section>
+
+      <aside className="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">
+          {["약관 동의", "준비 단계", "관심 국가", "프로필"].map((item, index) => (
+            <div
+              key={item}
+              className={`rounded-lg px-4 py-3 typo-medium-2 ${
+                curStage >= index + 1 ? "bg-primary-100 text-primary" : "bg-k-50 text-k-500"
+              }`}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      </aside>
+    </div>
+  </div>
+);
+
+const SignupMobileSurveyView = ({ curProgress, children }: { curProgress: number; children: ReactNode }) => (
+  <div>
+    <div className="mt-8 px-5">
+      <Progress value={curProgress} />
+    </div>
+    {children}
+  </div>
+);
+
 export default SignupSurvey;

From a26341bcf6d2b941687abed14bcdcbca7aeedd02 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 13:11:38 +0900
Subject: [PATCH 16/20] =?UTF-8?q?refactor:=20=EC=BB=A4=EB=AE=A4=EB=8B=88?=
 =?UTF-8?q?=ED=8B=B0=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[boardCode]/CommunityPageContent.tsx      |  10 +-
 .../app/community/[boardCode]/PostCards.tsx   |  29 +-
 .../[boardCode]/[postId]/CommentInput.tsx     |  15 +-
 .../[boardCode]/[postId]/CommentSection.tsx   |  30 +-
 .../[boardCode]/[postId]/Content.tsx          |  48 ++-
 .../[boardCode]/[postId]/PostPageContent.tsx  |  17 +-
 .../[postId]/modify/PostModifyForm.tsx        | 396 +++++++++++-------
 .../community/[boardCode]/create/PostForm.tsx | 387 ++++++++++-------
 8 files changed, 565 insertions(+), 367 deletions(-)

diff --git a/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx b/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx
index 30937720a..d69dce20e 100644
--- a/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx
+++ b/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx
@@ -14,7 +14,7 @@ import { buildLoginPathWithRedirect } from "@/utils/authRedirect";
 import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import { CommunityPostListSkeleton } from "./CommunityPageSkeleton";
 import CommunityRegionSelector from "./CommunityRegionSelector";
-import PostCards from "./PostCards";
+import { DesktopPostCards, MobilePostCards } from "./PostCards";
 import PostWriteButton from "./PostWriteButton";
 
 interface CommunityPageContentProps {
@@ -134,7 +134,7 @@ const CommunityMobileView = ({
         setChoice={setCategory}
         style={{ padding: "10px 0 10px 18px" }}
       />
-      {isPending ? <CommunityPostListSkeleton /> : <PostCards posts={visiblePosts} boardCode={boardCode} />}
+      {isPending ? <CommunityPostListSkeleton /> : <MobilePostCards posts={visiblePosts} boardCode={boardCode} />}
       <PostWriteButton onClick={postWriteHandler} />
     </div>
   );
@@ -232,11 +232,7 @@ const CommunityDesktopView = ({
             </span>
           </section>
 
-          {isPending ? (
-            <CommunityPostListSkeleton />
-          ) : (
-            <PostCards posts={visiblePosts} boardCode={boardCode} variant="desktop" />
-          )}
+          {isPending ? <CommunityPostListSkeleton /> : <DesktopPostCards posts={visiblePosts} boardCode={boardCode} />}
         </main>
       </div>
     </div>
diff --git a/apps/web/src/app/community/[boardCode]/PostCards.tsx b/apps/web/src/app/community/[boardCode]/PostCards.tsx
index 1b92fd222..d01641a08 100644
--- a/apps/web/src/app/community/[boardCode]/PostCards.tsx
+++ b/apps/web/src/app/community/[boardCode]/PostCards.tsx
@@ -13,12 +13,11 @@ import { convertISODateToDate } from "@/utils/datetimeUtils";
 type PostCardsProps = {
   posts: ListPost[];
   boardCode: string;
-  variant?: "mobile" | "desktop";
 };
 
-const PostCards = ({ posts, boardCode, variant = "mobile" }: PostCardsProps) => {
+const PostCardsBase = ({ posts, boardCode, isDesktop }: PostCardsProps & { isDesktop: boolean }) => {
   const parentRef = useRef<HTMLDivElement>(null);
-  const isDesktop = variant === "desktop";
+  const PostCard = isDesktop ? DesktopPostCard : MobilePostCard;
 
   const virtualizer = useVirtualizer({
     count: posts.length,
@@ -77,7 +76,7 @@ const PostCards = ({ posts, boardCode, variant = "mobile" }: PostCardsProps) =>
               data-index={virtualItem.index}
             >
               <Link href={`/community/${boardCode}/${post.id}`} className="no-underline">
-                <PostCard post={post} priorityImage={virtualItem.index === 0} variant={variant} />
+                <PostCard post={post} priorityImage={virtualItem.index === 0} />
               </Link>
             </div>
           );
@@ -87,7 +86,11 @@ const PostCards = ({ posts, boardCode, variant = "mobile" }: PostCardsProps) =>
   );
 };
 
-export default PostCards;
+export const DesktopPostCards = (props: PostCardsProps) => <PostCardsBase {...props} isDesktop />;
+
+export const MobilePostCards = (props: PostCardsProps) => <PostCardsBase {...props} isDesktop={false} />;
+
+export default MobilePostCards;
 
 const DEFAULT_THUMBNAIL_PATHS = new Set([
   "/article-thumb.png",
@@ -119,17 +122,13 @@ const getPostThumbnailSrc = (postThumbnailUrl: string | null) => {
   return thumbnailSrc;
 };
 
-export const PostCard = ({
-  post,
-  priorityImage = false,
-  variant = "mobile",
-}: {
+type PostCardProps = {
   post: ListPost;
   priorityImage?: boolean;
-  variant?: "mobile" | "desktop";
-}) => {
+};
+
+const PostCardBase = ({ post, priorityImage = false, isDesktop }: PostCardProps & { isDesktop: boolean }) => {
   const thumbnailSrc = getPostThumbnailSrc(post.postThumbnailUrl);
-  const isDesktop = variant === "desktop";
 
   return (
     <div
@@ -190,3 +189,7 @@ export const PostCard = ({
     </div>
   );
 };
+
+export const DesktopPostCard = (props: PostCardProps) => <PostCardBase {...props} isDesktop />;
+
+export const MobilePostCard = (props: PostCardProps) => <PostCardBase {...props} isDesktop={false} />;
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx b/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
index a70cf83c1..5168e3883 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
@@ -10,16 +10,15 @@ type CommentInputProps = {
   curSelectedComment: number | null;
   setCurSelectedComment: React.Dispatch<React.SetStateAction<number | null>>;
   refresh: () => void;
-  variant?: "mobile" | "desktop";
 };
 
-const CommentInput = ({
+const CommentInputBase = ({
   postId,
   curSelectedComment,
   setCurSelectedComment,
   refresh,
-  variant = "mobile",
-}: CommentInputProps) => {
+  isDesktop,
+}: CommentInputProps & { isDesktop: boolean }) => {
   const [content, setContent] = useState<string>("");
 
   const createCommentMutation = useCreateComment();
@@ -47,7 +46,7 @@ const CommentInput = ({
   return (
     <div
       className={
-        variant === "desktop"
+        isDesktop
           ? "flex w-full items-center gap-3 border-t border-bg-400 bg-k-0 p-4"
           : "fixed bottom-14 flex w-full min-w-app max-w-app items-center gap-3 border-t border-bg-400 bg-k-0 p-2 md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:min-w-0 md:max-w-none"
       }
@@ -86,4 +85,8 @@ const CommentInput = ({
   );
 };
 
-export default CommentInput;
+export const DesktopCommentInput = (props: CommentInputProps) => <CommentInputBase {...props} isDesktop />;
+
+export const MobileCommentInput = (props: CommentInputProps) => <CommentInputBase {...props} isDesktop={false} />;
+
+export default MobileCommentInput;
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
index 0c74abbac..aece2907d 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
@@ -12,19 +12,20 @@ import { IconMoreVertFilled, IconSubComment } from "@/public/svgs";
 import type { Comment as CommentType, CommunityUser } from "@/types/community";
 import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 import { convertISODateToDateTime } from "@/utils/datetimeUtils";
-import CommentInput from "./CommentInput";
+import { DesktopCommentInput, MobileCommentInput } from "./CommentInput";
 
 type CommentSectionProps = {
   comments: CommentType[];
   postId: number;
   refresh: () => void;
-  variant?: "mobile" | "desktop";
 };
 
-const CommentSection = ({ comments, postId, refresh, variant = "mobile" }: CommentSectionProps) => {
+const CommentSectionBase = ({ comments, postId, refresh, isDesktop }: CommentSectionProps & { isDesktop: boolean }) => {
   const [curSelectedComment, setCurSelectedComment] = useState<number | null>(null);
   const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
   const blockedUserIds = useReportedPostsStore((state) => state.blockedUserIds);
+  const Comment = isDesktop ? DesktopComment : MobileComment;
+  const CommentInput = isDesktop ? DesktopCommentInput : MobileCommentInput;
 
   const deleteCommentMutation = useDeleteComment();
 
@@ -56,13 +57,12 @@ const CommentSection = ({ comments, postId, refresh, variant = "mobile" }: Comme
           deleteComment={deleteComment}
           activeDropdown={activeDropdown}
           setActiveDropdown={setActiveDropdown}
-          variant={variant}
         />
       ))}
     </>
   );
 
-  if (variant === "desktop") {
+  if (isDesktop) {
     return (
       <aside className="flex max-h-[calc(100vh-132px)] min-h-[520px] flex-col rounded-lg border border-k-100 bg-white">
         <div className="flex items-center justify-between border-b border-k-100 px-5 py-4">
@@ -75,7 +75,6 @@ const CommentSection = ({ comments, postId, refresh, variant = "mobile" }: Comme
           curSelectedComment={curSelectedComment}
           setCurSelectedComment={setCurSelectedComment}
           refresh={refresh}
-          variant="desktop"
         />
       </aside>
     );
@@ -94,7 +93,11 @@ const CommentSection = ({ comments, postId, refresh, variant = "mobile" }: Comme
   );
 };
 
-export default CommentSection;
+export const DesktopCommentSection = (props: CommentSectionProps) => <CommentSectionBase {...props} isDesktop />;
+
+export const MobileCommentSection = (props: CommentSectionProps) => <CommentSectionBase {...props} isDesktop={false} />;
+
+export default MobileCommentSection;
 
 type CommentProps = {
   comment: CommentType;
@@ -102,17 +105,16 @@ type CommentProps = {
   deleteComment: (commentId: number) => void;
   activeDropdown: number | null;
   setActiveDropdown: (commentId: number | null) => void;
-  variant?: "mobile" | "desktop";
 };
 
-const Comment = ({
+const CommentBase = ({
   comment,
   setCurSelectedComment,
   deleteComment,
   activeDropdown,
   setActiveDropdown,
-  variant = "mobile",
-}: CommentProps) => {
+  isDesktop,
+}: CommentProps & { isDesktop: boolean }) => {
   const toggleDropdown = (commentId: number) => {
     setActiveDropdown(activeDropdown === commentId ? null : commentId);
   };
@@ -123,7 +125,7 @@ const Comment = ({
     <div
       className={clsx(
         "flex border-b border-gray-c-100 px-5 py-[18px]",
-        variant === "desktop" && "transition-colors hover:bg-k-50",
+        isDesktop && "transition-colors hover:bg-k-50",
         comment.parentId !== null ? "bg-line-1" : "bg-magic-comment-reply-bg",
       )}
       key={comment.id}
@@ -182,6 +184,10 @@ const Comment = ({
   );
 };
 
+const DesktopComment = (props: CommentProps) => <CommentBase {...props} isDesktop />;
+
+const MobileComment = (props: CommentProps) => <CommentBase {...props} isDesktop={false} />;
+
 const CommentProfile = ({ user }: { user: CommunityUser }) => {
   return (
     <div className="flex items-center gap-2">
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx b/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
index 2dd4e9d93..cdf587f56 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
@@ -19,14 +19,14 @@ export const metadata: Metadata = {
 type ContentProps = {
   post: PostType;
   postId: number;
-  variant?: "mobile" | "desktop";
 };
 
-const Content = ({ post, postId, variant = "mobile" }: ContentProps) => {
+const ContentBase = ({ post, postId, isDesktop }: ContentProps & { isDesktop: boolean }) => {
   const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
   const [likeCount, setLikeCount] = useState<number>(0);
   const [isLiked, setIsLiked] = useState<boolean>(false);
   const postImages = (post.postFindPostImageResponses || []).slice(0, COMMUNITY_MAX_UPLOAD_IMAGES);
+  const PostImage = isDesktop ? DesktopPostImage : MobilePostImage;
 
   const postLikeMutation = usePostLike();
   const deleteLikeMutation = useDeleteLike();
@@ -82,20 +82,16 @@ const Content = ({ post, postId, variant = "mobile" }: ContentProps) => {
 
   const postBody = (
     <>
-      <div className={variant === "desktop" ? "p-6" : "pb-3 pl-5 pt-6"}>
+      <div className={isDesktop ? "p-6" : "pb-3 pl-5 pt-6"}>
         <div className="inline-flex rounded-full bg-primary px-3 py-[5px] font-serif text-white typo-medium-2">
           {post.postCategory || "카테고리"}
         </div>
-        <div
-          className={
-            variant === "desktop" ? "mt-5 font-serif text-black typo-bold-3" : "mt-4 font-serif text-black typo-sb-4"
-          }
-        >
+        <div className={isDesktop ? "mt-5 font-serif text-black typo-bold-3" : "mt-4 font-serif text-black typo-sb-4"}>
           {post.title || ""}
         </div>
         <div
           className={
-            variant === "desktop"
+            isDesktop
               ? "mt-5 whitespace-pre-wrap break-all font-serif text-gray-850 typo-regular-2"
               : "mr-5 mt-3 whitespace-pre-wrap break-all font-serif text-gray-850 typo-regular-2"
           }
@@ -104,7 +100,7 @@ const Content = ({ post, postId, variant = "mobile" }: ContentProps) => {
         </div>
 
         <div className="mt-5">
-          <PostImage images={postImages} onImageClick={handleImageClick} variant={variant} />
+          <PostImage images={postImages} onImageClick={handleImageClick} />
         </div>
         {selectedImageIndex !== null && postImages[selectedImageIndex] && (
           <ImagePopup
@@ -156,7 +152,7 @@ const Content = ({ post, postId, variant = "mobile" }: ContentProps) => {
     </div>
   );
 
-  if (variant === "desktop") {
+  if (isDesktop) {
     return (
       <article className="rounded-lg border border-k-100 bg-white">
         {postBody}
@@ -173,23 +169,25 @@ const Content = ({ post, postId, variant = "mobile" }: ContentProps) => {
   );
 };
 
-export default Content;
+export const DesktopContent = (props: ContentProps) => <ContentBase {...props} isDesktop />;
+
+export const MobileContent = (props: ContentProps) => <ContentBase {...props} isDesktop={false} />;
+
+export default MobileContent;
 
 const PostImage = ({
   images,
   onImageClick,
-  variant = "mobile",
+  isDesktop,
 }: {
   images: PostImageType[];
   onImageClick: (index: number) => void;
-  variant?: "mobile" | "desktop";
+  isDesktop: boolean;
 }) => {
   if (images.length === 1) {
     return (
-      <div className={variant === "desktop" ? "mb-3" : "mb-3 pr-5"}>
-        <div
-          className={variant === "desktop" ? "relative aspect-[16/10] overflow-hidden rounded-lg" : "relative pt-[75%]"}
-        >
+      <div className={isDesktop ? "mb-3" : "mb-3 pr-5"}>
+        <div className={isDesktop ? "relative aspect-[16/10] overflow-hidden rounded-lg" : "relative pt-[75%]"}>
           <Image
             src={normalizeImageUrlToUploadCdn(images[0].url)}
             layout="fill"
@@ -208,11 +206,11 @@ const PostImage = ({
           <Image
             key={image.id}
             src={normalizeImageUrlToUploadCdn(image.url)}
-            width={variant === "desktop" ? 180 : 197}
-            height={variant === "desktop" ? 180 : 197}
+            width={isDesktop ? 180 : 197}
+            height={isDesktop ? 180 : 197}
             alt="image"
             onClick={() => onImageClick(index)}
-            className={variant === "desktop" ? "rounded-lg object-cover" : undefined}
+            className={isDesktop ? "rounded-lg object-cover" : undefined}
           />
         ))}
       </div>
@@ -220,6 +218,14 @@ const PostImage = ({
   );
 };
 
+const DesktopPostImage = (props: { images: PostImageType[]; onImageClick: (index: number) => void }) => (
+  <PostImage {...props} isDesktop />
+);
+
+const MobilePostImage = (props: { images: PostImageType[]; onImageClick: (index: number) => void }) => (
+  <PostImage {...props} isDesktop={false} />
+);
+
 type ImagePopupProps = {
   image: PostImageType;
   title: string;
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx b/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx
index 2d4c410bf..dfe5e502d 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx
@@ -7,8 +7,8 @@ import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import useReportedPostsStore from "@/lib/zustand/useReportedPostsStore";
 import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
-import CommentSection from "./CommentSection";
-import Content from "./Content";
+import { DesktopCommentSection, MobileCommentSection } from "./CommentSection";
+import { DesktopContent, MobileContent } from "./Content";
 import KebabMenu from "./KebabMenu";
 
 interface PostPageContentProps {
@@ -90,13 +90,8 @@ const PostPageContent = ({ boardCode, postId }: PostPageContentProps) => {
         </header>
 
         <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,760px)_minmax(320px,420px)]">
-          <Content post={post} postId={postId} variant="desktop" />
-          <CommentSection
-            comments={post.postFindCommentResponses}
-            postId={postId}
-            refresh={refetch}
-            variant="desktop"
-          />
+          <DesktopContent post={post} postId={postId} />
+          <DesktopCommentSection comments={post.postFindCommentResponses} postId={postId} refresh={refetch} />
         </div>
       </div>
     );
@@ -118,8 +113,8 @@ const PostPageContent = ({ boardCode, postId }: PostPageContentProps) => {
           />
         }
       />
-      <Content post={post} postId={postId} />
-      <CommentSection comments={post.postFindCommentResponses} postId={postId} refresh={refetch} />
+      <MobileContent post={post} postId={postId} />
+      <MobileCommentSection comments={post.postFindCommentResponses} postId={postId} refresh={refetch} />
     </div>
   );
 };
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx b/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
index 45d5a17da..601556de1 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
@@ -2,7 +2,16 @@
 
 import clsx from "clsx";
 import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import {
+  type ChangeEvent,
+  type Dispatch,
+  type DragEvent,
+  type RefObject,
+  type SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useUpdatePost } from "@/apis/community";
 import PostCategorySelector from "@/app/community/_components/PostCategorySelector";
 import useCommunityImageUpload from "@/app/community/_hooks/useCommunityImageUpload";
@@ -19,6 +28,38 @@ type PostModifyFormProps = {
   defaultPostCategory: string;
 };
 
+type PostModifyEditorProps = {
+  titleRef: RefObject<HTMLDivElement | null>;
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  title: string;
+  setTitle: Dispatch<SetStateAction<string>>;
+  content: string;
+  setContent: Dispatch<SetStateAction<string>>;
+  postCategory: string;
+  setPostCategory: Dispatch<SetStateAction<string>>;
+  maxImages: number;
+  imageUploadRef: RefObject<HTMLInputElement | null>;
+  selectedImages: File[];
+  imagePreviewUrls: string[];
+  isDraggingImage: boolean;
+  handleImageChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  handleImageDragEnter: (event: DragEvent<HTMLDivElement>) => void;
+  handleImageDragOver: (event: DragEvent<HTMLDivElement>) => void;
+  handleImageDragLeave: (event: DragEvent<HTMLDivElement>) => void;
+  handleImageDrop: (event: DragEvent<HTMLDivElement>) => void;
+  removeSelectedImage: (index: number) => void;
+  openImagePicker: () => void;
+};
+
+type PostModifyFormViewProps = PostModifyEditorProps & {
+  routeBack: () => void;
+  submitPost: () => void;
+};
+
+const NOTICE_TITLE = "[글 작성 시 유의사항]";
+const NOTICE_CONTENT =
+  "인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
+
 const PostModifyForm = ({
   boardCode,
   postId,
@@ -124,183 +165,240 @@ const PostModifyForm = ({
     );
   };
 
-  const noticeTitle = "[글 작성 시 유의사항]";
-  const noticeContent =
-    "인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
-
   if (isDesktop === null) {
     return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
   }
 
-  const editor = (
+  const editorProps: PostModifyEditorProps = {
+    titleRef,
+    textareaRef,
+    title,
+    setTitle,
+    content,
+    setContent,
+    postCategory,
+    setPostCategory,
+    maxImages,
+    imageUploadRef,
+    selectedImages,
+    imagePreviewUrls,
+    isDraggingImage,
+    handleImageChange,
+    handleImageDragEnter,
+    handleImageDragOver,
+    handleImageDragLeave,
+    handleImageDrop,
+    removeSelectedImage,
+    openImagePicker,
+  };
+
+  if (isDesktop) {
+    return <DesktopPostModifyFormView {...editorProps} routeBack={routeBack} submitPost={submitPost} />;
+  }
+
+  return <MobilePostModifyFormView {...editorProps} routeBack={routeBack} submitPost={submitPost} />;
+};
+
+export default PostModifyForm;
+
+type PostModifyEditorBaseProps = PostModifyEditorProps & {
+  isDesktop: boolean;
+};
+
+const PostModifyEditorBase = ({
+  titleRef,
+  textareaRef,
+  title,
+  setTitle,
+  content,
+  setContent,
+  postCategory,
+  setPostCategory,
+  maxImages,
+  imageUploadRef,
+  selectedImages,
+  imagePreviewUrls,
+  isDraggingImage,
+  handleImageChange,
+  handleImageDragEnter,
+  handleImageDragOver,
+  handleImageDragLeave,
+  handleImageDrop,
+  removeSelectedImage,
+  openImagePicker,
+  isDesktop,
+}: PostModifyEditorBaseProps) => (
+  <div
+    className={clsx("relative", isDesktop && "overflow-hidden rounded-lg border border-k-100 bg-white")}
+    onDragEnter={handleImageDragEnter}
+    onDragOver={handleImageDragOver}
+    onDragLeave={handleImageDragLeave}
+    onDrop={handleImageDrop}
+  >
+    {isDraggingImage ? (
+      <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 px-5 text-center text-white typo-sb-9">
+        이미지를 놓아 업로드하세요
+      </div>
+    ) : null}
     <div
-      className={clsx("relative", isDesktop && "overflow-hidden rounded-lg border border-k-100 bg-white")}
-      onDragEnter={handleImageDragEnter}
-      onDragOver={handleImageDragOver}
-      onDragLeave={handleImageDragLeave}
-      onDrop={handleImageDrop}
+      className="relative border-b border-b-gray-c-100 transition-height duration-200 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-c-100"
+      ref={titleRef}
     >
-      {isDraggingImage ? (
-        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 px-5 text-center text-white typo-sb-9">
-          이미지를 놓아 업로드하세요
-        </div>
-      ) : null}
-      <div
-        className="relative border-b border-b-gray-c-100 transition-height duration-200 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-c-100"
-        ref={titleRef}
-      >
-        <textarea
-          className={clsx(
-            "placeholder:text-gray-250/87 w-full resize-none overflow-hidden text-black outline-none transition-height duration-200 typo-sb-4",
-            isDesktop ? "px-6 pb-3 pt-6" : "px-5 pb-2.5 pt-5",
-          )}
-          placeholder="제목을 입력하세요"
-          maxLength={40}
-          rows={1}
-          ref={textareaRef}
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") {
-              event.preventDefault();
-            }
+      <textarea
+        className={clsx(
+          "placeholder:text-gray-250/87 w-full resize-none overflow-hidden text-black outline-none transition-height duration-200 typo-sb-4",
+          isDesktop ? "px-6 pb-3 pt-6" : "px-5 pb-2.5 pt-5",
+        )}
+        placeholder="제목을 입력하세요"
+        maxLength={40}
+        rows={1}
+        ref={textareaRef}
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+          }
+        }}
+      />
+    </div>
+    <div
+      className={clsx(
+        "flex h-[42px] items-center justify-between gap-3 border-b border-b-gray-c-100 py-2.5",
+        isDesktop ? "px-6" : "px-5",
+      )}
+    >
+      <PostCategorySelector value={postCategory} onChange={setPostCategory} />
+      <div>
+        <button
+          type="button"
+          onClick={() => {
+            openImagePicker();
           }}
+          aria-label="이미지 추가"
+        >
+          <IconImage />
+        </button>
+        <input
+          className="hidden"
+          ref={imageUploadRef}
+          type="file"
+          accept="image/*"
+          multiple
+          onChange={handleImageChange}
         />
       </div>
-      <div
+    </div>
+    <div>
+      <textarea
         className={clsx(
-          "flex h-[42px] items-center justify-between gap-3 border-b border-b-gray-c-100 py-2.5",
-          isDesktop ? "px-6" : "px-5",
+          "placeholder:text-gray-250/87 mt-4 box-border w-full resize-none border-0 text-black outline-none typo-regular-1",
+          isDesktop ? "h-[360px] px-6" : "h-90 px-5",
         )}
-      >
-        <PostCategorySelector value={postCategory} onChange={setPostCategory} />
+        placeholder="내용을 입력하세요"
+        value={content}
+        maxLength={255}
+        onChange={(e) => setContent(e.target.value)}
+      />
+    </div>
+    {imagePreviewUrls.length > 0 ? (
+      <div className={clsx("pb-2", isDesktop ? "px-6" : "px-5")}>
+        <p className="mb-2 text-gray-250/87 typo-regular-4">
+          첨부 이미지 ({selectedImages.length}/{maxImages})
+        </p>
+        <div className="flex gap-2 overflow-x-auto pb-1">
+          {imagePreviewUrls.map((imagePreviewUrl, index) => (
+            <div
+              key={`${selectedImages[index]?.name ?? "image"}-${selectedImages[index]?.lastModified ?? index}`}
+              className="relative h-24 w-24 shrink-0 overflow-hidden rounded-md border border-gray-c-100"
+            >
+              <img
+                src={imagePreviewUrl}
+                alt={`업로드 이미지 미리보기 ${index + 1}`}
+                className="h-full w-full object-cover"
+              />
+              <button
+                type="button"
+                className="absolute right-1 top-1 rounded bg-black/60 px-1 py-0.5 text-xs text-white"
+                onClick={() => removeSelectedImage(index)}
+                aria-label={`이미지 ${index + 1} 제거`}
+              >
+                삭제
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    ) : null}
+    {!isDesktop && (
+      <div className="px-5 pt-2.5">
+        <p className="text-gray-250/87 typo-sb-9">{NOTICE_TITLE}</p>
+        <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{NOTICE_CONTENT}</p>
+      </div>
+    )}
+  </div>
+);
+
+const DesktopPostModifyEditor = (props: PostModifyEditorProps) => <PostModifyEditorBase {...props} isDesktop />;
+
+const MobilePostModifyEditor = (props: PostModifyEditorProps) => <PostModifyEditorBase {...props} isDesktop={false} />;
+
+const DesktopPostModifyFormView = (props: PostModifyFormViewProps) => {
+  const { routeBack, submitPost, selectedImages, maxImages } = props;
+
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8 flex items-end justify-between gap-6">
         <div>
+          <p className="text-primary typo-sb-9">Community</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">글 수정</h1>
+          <p className="mt-2 text-k-500 typo-medium-2">게시글 내용을 수정하고 이미지를 추가로 첨부하세요.</p>
+        </div>
+        <div className="flex items-center gap-3">
           <button
             type="button"
-            onClick={() => {
-              openImagePicker();
-            }}
-            aria-label="이미지 추가"
+            onClick={routeBack}
+            className="rounded-lg border border-k-100 bg-white px-4 py-3 text-k-700 transition-colors typo-sb-9 hover:border-primary hover:text-primary"
           >
-            <IconImage />
+            취소
+          </button>
+          <button
+            className="rounded-lg bg-primary px-5 py-3 text-white transition-colors typo-sb-9 hover:bg-primary-700"
+            onClick={submitPost}
+            type="button"
+          >
+            등록
           </button>
-          <input
-            className="hidden"
-            ref={imageUploadRef}
-            type="file"
-            accept="image/*"
-            multiple
-            onChange={handleImageChange}
-          />
-        </div>
-      </div>
-      <div>
-        <textarea
-          className={clsx(
-            "placeholder:text-gray-250/87 mt-4 box-border w-full resize-none border-0 text-black outline-none typo-regular-1",
-            isDesktop ? "h-[360px] px-6" : "h-90 px-5",
-          )}
-          placeholder="내용을 입력하세요"
-          value={content}
-          maxLength={255}
-          onChange={(e) => setContent(e.target.value)}
-        />
-      </div>
-      {imagePreviewUrls.length > 0 ? (
-        <div className={clsx("pb-2", isDesktop ? "px-6" : "px-5")}>
-          <p className="mb-2 text-gray-250/87 typo-regular-4">
-            첨부 이미지 ({selectedImages.length}/{maxImages})
-          </p>
-          <div className="flex gap-2 overflow-x-auto pb-1">
-            {imagePreviewUrls.map((imagePreviewUrl, index) => (
-              <div
-                key={`${selectedImages[index]?.name ?? "image"}-${selectedImages[index]?.lastModified ?? index}`}
-                className="relative h-24 w-24 shrink-0 overflow-hidden rounded-md border border-gray-c-100"
-              >
-                <img
-                  src={imagePreviewUrl}
-                  alt={`업로드 이미지 미리보기 ${index + 1}`}
-                  className="h-full w-full object-cover"
-                />
-                <button
-                  type="button"
-                  className="absolute right-1 top-1 rounded bg-black/60 px-1 py-0.5 text-xs text-white"
-                  onClick={() => removeSelectedImage(index)}
-                  aria-label={`이미지 ${index + 1} 제거`}
-                >
-                  삭제
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      ) : null}
-      {!isDesktop && (
-        <div className="px-5 pt-2.5">
-          <p className="text-gray-250/87 typo-sb-9">{noticeTitle}</p>
-          <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{noticeContent}</p>
         </div>
-      )}
-    </div>
-  );
+      </header>
 
-  if (isDesktop) {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <header className="mb-8 flex items-end justify-between gap-6">
-          <div>
-            <p className="text-primary typo-sb-9">Community</p>
-            <h1 className="mt-2 text-k-900 typo-bold-1">글 수정</h1>
-            <p className="mt-2 text-k-500 typo-medium-2">게시글 내용을 수정하고 이미지를 추가로 첨부하세요.</p>
+      <div className="grid items-start gap-8 xl:grid-cols-[minmax(520px,760px)_minmax(280px,360px)]">
+        <DesktopPostModifyEditor {...props} />
+        <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
+          <h2 className="text-k-900 typo-bold-4">{NOTICE_TITLE}</h2>
+          <p className="mt-5 whitespace-pre-line text-k-600 typo-medium-3">{NOTICE_CONTENT}</p>
+          <div className="mt-6 rounded-lg bg-k-50 p-4 text-k-500 typo-regular-2">
+            새 첨부 이미지 {selectedImages.length}/{maxImages}
           </div>
-          <div className="flex items-center gap-3">
-            <button
-              type="button"
-              onClick={routeBack}
-              className="rounded-lg border border-k-100 bg-white px-4 py-3 text-k-700 transition-colors typo-sb-9 hover:border-primary hover:text-primary"
-            >
-              취소
-            </button>
-            <button
-              className="rounded-lg bg-primary px-5 py-3 text-white transition-colors typo-sb-9 hover:bg-primary-700"
-              onClick={submitPost}
-              type="button"
-            >
-              등록
-            </button>
-          </div>
-        </header>
-
-        <div className="grid items-start gap-8 xl:grid-cols-[minmax(520px,760px)_minmax(280px,360px)]">
-          {editor}
-          <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
-            <h2 className="text-k-900 typo-bold-4">{noticeTitle}</h2>
-            <p className="mt-5 whitespace-pre-line text-k-600 typo-medium-3">{noticeContent}</p>
-            <div className="mt-6 rounded-lg bg-k-50 p-4 text-k-500 typo-regular-2">
-              새 첨부 이미지 {selectedImages.length}/{maxImages}
-            </div>
-          </aside>
-        </div>
+        </aside>
       </div>
-    );
-  }
-
-  return (
-    <>
-      <CustomTopDetailNavigation routeBack={routeBack} submitPost={submitPost} />
-      {editor}
-    </>
+    </div>
   );
 };
 
-export default PostModifyForm;
+const MobilePostModifyFormView = ({ routeBack, submitPost, ...editorProps }: PostModifyFormViewProps) => (
+  <>
+    <MobilePostModifyNavigation routeBack={routeBack} submitPost={submitPost} />
+    <MobilePostModifyEditor {...editorProps} />
+  </>
+);
 
 type CustomTopDetailNavigationProps = {
   routeBack: () => void;
   submitPost: () => void;
 };
 
-const CustomTopDetailNavigation = ({ routeBack, submitPost }: CustomTopDetailNavigationProps) => (
+const MobilePostModifyNavigation = ({ routeBack, submitPost }: CustomTopDetailNavigationProps) => (
   <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-app items-center justify-between bg-white px-5 md:hidden">
     <button className="min-w-6 cursor-pointer" onClick={routeBack} type="button" aria-label="뒤로 가기">
       <IconArrowBackFilled />
diff --git a/apps/web/src/app/community/[boardCode]/create/PostForm.tsx b/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
index 472aee8ee..79f339c5e 100644
--- a/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
+++ b/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
@@ -2,7 +2,16 @@
 
 import clsx from "clsx";
 import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import {
+  type ChangeEvent,
+  type Dispatch,
+  type DragEvent,
+  type RefObject,
+  type SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useCreatePost } from "@/apis/community";
 import PostCategorySelector from "@/app/community/_components/PostCategorySelector";
 import useCommunityImageUpload from "@/app/community/_hooks/useCommunityImageUpload";
@@ -18,6 +27,35 @@ type PostFormProps = {
   boardCode: string;
 };
 
+type PostEditorProps = {
+  titleRef: RefObject<HTMLDivElement | null>;
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  content: string;
+  setContent: Dispatch<SetStateAction<string>>;
+  postCategory: string;
+  setPostCategory: Dispatch<SetStateAction<string>>;
+  maxImages: number;
+  imageUploadRef: RefObject<HTMLInputElement | null>;
+  selectedImages: File[];
+  imagePreviewUrls: string[];
+  isDraggingImage: boolean;
+  handleImageChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  handleImageDragEnter: (event: DragEvent<HTMLDivElement>) => void;
+  handleImageDragOver: (event: DragEvent<HTMLDivElement>) => void;
+  handleImageDragLeave: (event: DragEvent<HTMLDivElement>) => void;
+  handleImageDrop: (event: DragEvent<HTMLDivElement>) => void;
+  removeSelectedImage: (index: number) => void;
+  openImagePicker: () => void;
+};
+
+type PostFormViewProps = PostEditorProps & {
+  submitPost: () => void;
+};
+
+const NOTICE_TITLE = "[글 작성 시 유의사항]";
+const NOTICE_CONTENT =
+  "인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
+
 const PostForm = ({ boardCode }: PostFormProps) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const titleRef = useRef<HTMLDivElement>(null);
@@ -126,169 +164,222 @@ const PostForm = ({ boardCode }: PostFormProps) => {
     );
   };
 
-  const noticeTitle = "[글 작성 시 유의사항]";
-  const noticeContent =
-    "인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
+  const editorProps: PostEditorProps = {
+    titleRef,
+    textareaRef,
+    content,
+    setContent,
+    postCategory,
+    setPostCategory,
+    maxImages,
+    imageUploadRef,
+    selectedImages,
+    imagePreviewUrls,
+    isDraggingImage,
+    handleImageChange,
+    handleImageDragEnter,
+    handleImageDragOver,
+    handleImageDragLeave,
+    handleImageDrop,
+    removeSelectedImage,
+    openImagePicker,
+  };
+
+  if (isDesktop) {
+    return <DesktopPostFormView {...editorProps} submitPost={submitPost} />;
+  }
+
+  return <MobilePostFormView {...editorProps} submitPost={submitPost} />;
+};
+
+type PostEditorBaseProps = PostEditorProps & {
+  isDesktop: boolean;
+};
 
-  const editor = (
+const PostEditorBase = ({
+  titleRef,
+  textareaRef,
+  content,
+  setContent,
+  postCategory,
+  setPostCategory,
+  maxImages,
+  imageUploadRef,
+  selectedImages,
+  imagePreviewUrls,
+  isDraggingImage,
+  handleImageChange,
+  handleImageDragEnter,
+  handleImageDragOver,
+  handleImageDragLeave,
+  handleImageDrop,
+  removeSelectedImage,
+  openImagePicker,
+  isDesktop,
+}: PostEditorBaseProps) => (
+  <div
+    className={clsx("relative", isDesktop && "overflow-hidden rounded-lg border border-k-100 bg-white")}
+    onDragEnter={handleImageDragEnter}
+    onDragOver={handleImageDragOver}
+    onDragLeave={handleImageDragLeave}
+    onDrop={handleImageDrop}
+  >
+    {isDraggingImage ? (
+      <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 px-5 text-center text-white typo-sb-9">
+        이미지를 놓아 업로드하세요
+      </div>
+    ) : null}
     <div
-      className={clsx("relative", isDesktop && "overflow-hidden rounded-lg border border-k-100 bg-white")}
-      onDragEnter={handleImageDragEnter}
-      onDragOver={handleImageDragOver}
-      onDragLeave={handleImageDragLeave}
-      onDrop={handleImageDrop}
+      className="relative border-b border-b-gray-c-100 transition-height duration-200 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-c-100"
+      ref={titleRef}
     >
-      {isDraggingImage ? (
-        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 px-5 text-center text-white typo-sb-9">
-          이미지를 놓아 업로드하세요
-        </div>
-      ) : null}
-      <div
-        className="relative border-b border-b-gray-c-100 transition-height duration-200 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-c-100"
-        ref={titleRef}
-      >
-        <textarea
-          className={clsx(
-            "placeholder:text-gray-250/87 w-full resize-none overflow-hidden text-black outline-none transition-height duration-200 typo-sb-4",
-            isDesktop ? "px-6 pb-3 pt-6" : "px-5 pb-2.5 pt-5",
-          )}
-          placeholder="제목을 입력하세요"
-          maxLength={40}
-          rows={1}
-          ref={textareaRef}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") {
-              event.preventDefault();
-            }
+      <textarea
+        className={clsx(
+          "placeholder:text-gray-250/87 w-full resize-none overflow-hidden text-black outline-none transition-height duration-200 typo-sb-4",
+          isDesktop ? "px-6 pb-3 pt-6" : "px-5 pb-2.5 pt-5",
+        )}
+        placeholder="제목을 입력하세요"
+        maxLength={40}
+        rows={1}
+        ref={textareaRef}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+          }
+        }}
+      />
+    </div>
+    <div
+      className={clsx(
+        "flex h-[42px] items-center justify-between gap-3 border-b border-b-gray-c-100 py-2.5",
+        isDesktop ? "px-6" : "px-5",
+      )}
+    >
+      <PostCategorySelector value={postCategory} onChange={setPostCategory} />
+      <div>
+        <button
+          onClick={() => {
+            openImagePicker();
           }}
+          type="button"
+          aria-label="이미지 추가"
+        >
+          <IconImage />
+        </button>
+        <input
+          className="hidden"
+          ref={imageUploadRef}
+          type="file"
+          accept="image/*"
+          multiple
+          onChange={handleImageChange}
         />
       </div>
-      <div
+    </div>
+    <div>
+      <textarea
         className={clsx(
-          "flex h-[42px] items-center justify-between gap-3 border-b border-b-gray-c-100 py-2.5",
-          isDesktop ? "px-6" : "px-5",
+          "placeholder:text-gray-250/87 mt-4 box-border w-full resize-none border-0 text-black outline-none typo-regular-1",
+          isDesktop ? "h-[360px] px-6" : "h-90 px-5",
         )}
-      >
-        <PostCategorySelector value={postCategory} onChange={setPostCategory} />
-        <div>
-          <button
-            onClick={() => {
-              openImagePicker();
-            }}
-            type="button"
-            aria-label="이미지 추가"
-          >
-            <IconImage />
-          </button>
-          <input
-            className="hidden"
-            ref={imageUploadRef}
-            type="file"
-            accept="image/*"
-            multiple
-            onChange={handleImageChange}
-          />
+        placeholder="내용을 입력하세요"
+        value={content}
+        maxLength={255}
+        onChange={(e) => setContent(e.target.value)}
+      />
+    </div>
+    {imagePreviewUrls.length > 0 ? (
+      <div className={clsx("pb-2", isDesktop ? "px-6" : "px-5")}>
+        <p className="mb-2 text-gray-250/87 typo-regular-4">
+          첨부 이미지 ({selectedImages.length}/{maxImages})
+        </p>
+        <div className="flex gap-2 overflow-x-auto pb-1">
+          {imagePreviewUrls.map((imagePreviewUrl, index) => (
+            <div
+              key={`${selectedImages[index]?.name ?? "image"}-${selectedImages[index]?.lastModified ?? index}`}
+              className="relative h-24 w-24 shrink-0 overflow-hidden rounded-md border border-gray-c-100"
+            >
+              <img
+                src={imagePreviewUrl}
+                alt={`업로드 이미지 미리보기 ${index + 1}`}
+                className="h-full w-full object-cover"
+              />
+              <button
+                type="button"
+                className="absolute right-1 top-1 rounded bg-black/60 px-1 py-0.5 text-xs text-white"
+                onClick={() => removeSelectedImage(index)}
+                aria-label={`이미지 ${index + 1} 제거`}
+              >
+                삭제
+              </button>
+            </div>
+          ))}
         </div>
       </div>
-      <div>
-        <textarea
-          className={clsx(
-            "placeholder:text-gray-250/87 mt-4 box-border w-full resize-none border-0 text-black outline-none typo-regular-1",
-            isDesktop ? "h-[360px] px-6" : "h-90 px-5",
-          )}
-          placeholder="내용을 입력하세요"
-          value={content}
-          maxLength={255}
-          onChange={(e) => setContent(e.target.value)}
-        />
+    ) : null}
+    {!isDesktop && (
+      <div className="px-5 pt-2.5">
+        <p className="text-gray-250/87 typo-sb-9">{NOTICE_TITLE}</p>
+        <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{NOTICE_CONTENT}</p>
       </div>
-      {imagePreviewUrls.length > 0 ? (
-        <div className={clsx("pb-2", isDesktop ? "px-6" : "px-5")}>
-          <p className="mb-2 text-gray-250/87 typo-regular-4">
-            첨부 이미지 ({selectedImages.length}/{maxImages})
-          </p>
-          <div className="flex gap-2 overflow-x-auto pb-1">
-            {imagePreviewUrls.map((imagePreviewUrl, index) => (
-              <div
-                key={`${selectedImages[index]?.name ?? "image"}-${selectedImages[index]?.lastModified ?? index}`}
-                className="relative h-24 w-24 shrink-0 overflow-hidden rounded-md border border-gray-c-100"
-              >
-                <img
-                  src={imagePreviewUrl}
-                  alt={`업로드 이미지 미리보기 ${index + 1}`}
-                  className="h-full w-full object-cover"
-                />
-                <button
-                  type="button"
-                  className="absolute right-1 top-1 rounded bg-black/60 px-1 py-0.5 text-xs text-white"
-                  onClick={() => removeSelectedImage(index)}
-                  aria-label={`이미지 ${index + 1} 제거`}
-                >
-                  삭제
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      ) : null}
-      {!isDesktop && (
-        <div className="px-5 pt-2.5">
-          <p className="text-gray-250/87 typo-sb-9">{noticeTitle}</p>
-          <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{noticeContent}</p>
+    )}
+  </div>
+);
+
+const DesktopPostEditor = (props: PostEditorProps) => <PostEditorBase {...props} isDesktop />;
+
+const MobilePostEditor = (props: PostEditorProps) => <PostEditorBase {...props} isDesktop={false} />;
+
+const DesktopPostFormView = (props: PostFormViewProps) => {
+  const { submitPost, selectedImages, maxImages } = props;
+
+  return (
+    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8 flex items-end justify-between gap-6">
+        <div>
+          <p className="text-primary typo-sb-9">Community</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">글쓰기</h1>
+          <p className="mt-2 text-k-500 typo-medium-2">게시판에 공유할 이야기와 이미지를 작성하세요.</p>
         </div>
-      )}
-    </div>
-  );
+        <button
+          className="rounded-lg bg-primary px-5 py-3 text-white transition-colors typo-sb-9 hover:bg-primary-700"
+          onClick={submitPost}
+          type="button"
+        >
+          등록
+        </button>
+      </header>
 
-  if (isDesktop) {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <header className="mb-8 flex items-end justify-between gap-6">
-          <div>
-            <p className="text-primary typo-sb-9">Community</p>
-            <h1 className="mt-2 text-k-900 typo-bold-1">글쓰기</h1>
-            <p className="mt-2 text-k-500 typo-medium-2">게시판에 공유할 이야기와 이미지를 작성하세요.</p>
+      <div className="grid items-start gap-8 xl:grid-cols-[minmax(520px,760px)_minmax(280px,360px)]">
+        <DesktopPostEditor {...props} />
+        <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
+          <h2 className="text-k-900 typo-bold-4">{NOTICE_TITLE}</h2>
+          <p className="mt-5 whitespace-pre-line text-k-600 typo-medium-3">{NOTICE_CONTENT}</p>
+          <div className="mt-6 rounded-lg bg-k-50 p-4 text-k-500 typo-regular-2">
+            첨부 이미지 {selectedImages.length}/{maxImages}
           </div>
-          <button
-            className="rounded-lg bg-primary px-5 py-3 text-white transition-colors typo-sb-9 hover:bg-primary-700"
-            onClick={submitPost}
-            type="button"
-          >
-            등록
-          </button>
-        </header>
-
-        <div className="grid items-start gap-8 xl:grid-cols-[minmax(520px,760px)_minmax(280px,360px)]">
-          {editor}
-          <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
-            <h2 className="text-k-900 typo-bold-4">{noticeTitle}</h2>
-            <p className="mt-5 whitespace-pre-line text-k-600 typo-medium-3">{noticeContent}</p>
-            <div className="mt-6 rounded-lg bg-k-50 p-4 text-k-500 typo-regular-2">
-              첨부 이미지 {selectedImages.length}/{maxImages}
-            </div>
-          </aside>
-        </div>
+        </aside>
       </div>
-    );
-  }
-
-  return (
-    <>
-      <TopDetailNavigation
-        title="글쓰기"
-        icon={
-          <button
-            className="h-8 cursor-pointer rounded-full border-0 bg-primary px-3 py-[5px] text-white typo-medium-2"
-            onClick={submitPost}
-            type="button"
-          >
-            등록
-          </button>
-        }
-      />
-      {editor}
-    </>
+    </div>
   );
 };
 
+const MobilePostFormView = ({ submitPost, ...editorProps }: PostFormViewProps) => (
+  <>
+    <TopDetailNavigation
+      title="글쓰기"
+      icon={
+        <button
+          className="h-8 cursor-pointer rounded-full border-0 bg-primary px-3 py-[5px] text-white typo-medium-2"
+          onClick={submitPost}
+          type="button"
+        >
+          등록
+        </button>
+      }
+    />
+    <MobilePostEditor {...editorProps} />
+  </>
+);
+
 export default PostForm;

From 4b33d32721ee79d2df2bf13a388992b2ad952689 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 13:17:25 +0900
Subject: [PATCH 17/20] =?UTF-8?q?refactor:=20=EB=A9=98=ED=86=A0=20?=
 =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EA=B3=BC=20=EC=B1=84=ED=8C=85=20=EB=8D=B0?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=ED=86=B1=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat/[chatId]/_ui/ChatContent/index.tsx   | 425 ++++++++++++------
 .../chat/[chatId]/_ui/ChatNavBar/index.tsx    | 316 +++++++------
 .../mentor/chat/_ui/ChatPageClient/index.tsx  | 217 ++++-----
 .../_components/CompletionScreen/index.tsx    |   8 +-
 .../InterestCountriesScreen/index.tsx         |  17 +-
 .../_components/StudyStatusScreen/index.tsx   |  17 +-
 .../_components/UniversityScreen/index.tsx    |  15 +-
 apps/web/src/app/my/apply-mentor/page.tsx     |  22 +-
 8 files changed, 628 insertions(+), 409 deletions(-)

diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx
index 9596097ba..205b928cd 100644
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx
@@ -2,12 +2,13 @@
 
 import clsx from "clsx";
 import Link from "next/link";
+import type { ReactNode, Ref, RefObject } from "react";
 import { useGetPartnerInfo } from "@/apis/chat";
 import { useUploadChatImages } from "@/apis/image-upload";
 import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import useAuthStore from "@/lib/zustand/useAuthStore";
-import { ConnectionStatus } from "@/types/chat";
+import { type ChatMessage, ConnectionStatus } from "@/types/chat";
 import { UserRole } from "@/types/mentor";
 import { tokenParse } from "@/utils/jwtUtils";
 import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
@@ -61,163 +62,289 @@ const ChatContent = ({ chatId }: ChatContentProps) => {
 
   if (isDesktop === null) return null;
 
-  return (
+  const inputBar = (
+    <ChatInputBar
+      onSendMessage={(data) => {
+        sendTextMessage(data.message, userId);
+      }}
+      onSendImages={async (data) => {
+        const previewUrls = addImageMessagePreview(data.images, userId);
+
+        try {
+          const imageUrls = await uploadChatImagesMutation.mutateAsync(data.images);
+          const isSent = sendImageMessage(imageUrls, previewUrls);
+
+          if (!isSent) {
+            removeImageMessagePreviews(previewUrls);
+            showIconToast("logo", "채팅 연결이 원활하지 않아 이미지를 전송하지 못했어요.");
+          }
+        } catch {
+          removeImageMessagePreviews(previewUrls);
+          showIconToast("logo", "이미지 전송에 실패했어요. 다시 시도해주세요.");
+        }
+      }}
+      onSendFiles={(data) => {
+        addImageMessagePreview(data.files, userId);
+      }}
+    />
+  );
+
+  const viewProps: ChatContentViewProps = {
+    userId,
+    isMentor,
+    isPartnerMentor,
+    partnerId,
+    nickname,
+    profileUrl,
+    university,
+    messages,
+    connectionStatus,
+    isLoading,
+    isFetchingNextPage,
+    scrollContainerRef,
+    messagesEndRef,
+    topDetectorRef,
+    inputBar,
+  };
+
+  return isDesktop ? <DesktopChatContentView {...viewProps} /> : <MobileChatContentView {...viewProps} />;
+};
+
+type ChatContentViewProps = {
+  userId: number;
+  isMentor: boolean;
+  isPartnerMentor: boolean;
+  partnerId?: number;
+  nickname?: string;
+  profileUrl?: string | null;
+  university?: string | null;
+  messages: ChatMessage[];
+  connectionStatus: ConnectionStatus;
+  isLoading: boolean;
+  isFetchingNextPage: boolean;
+  scrollContainerRef: RefObject<HTMLDivElement | null>;
+  messagesEndRef: RefObject<HTMLDivElement | null>;
+  topDetectorRef: Ref<HTMLDivElement>;
+  inputBar: ReactNode;
+};
+
+type ChatContentViewBaseProps = ChatContentViewProps & {
+  isDesktop: boolean;
+};
+
+const ChatContentViewBase = ({
+  userId,
+  isMentor,
+  isPartnerMentor,
+  partnerId,
+  nickname,
+  profileUrl,
+  university,
+  messages,
+  connectionStatus,
+  isLoading,
+  isFetchingNextPage,
+  scrollContainerRef,
+  messagesEndRef,
+  topDetectorRef,
+  inputBar,
+  isDesktop,
+}: ChatContentViewBaseProps) => (
+  <div
+    className={clsx(
+      "relative flex flex-col",
+      isDesktop
+        ? "h-[calc(100vh-204px)] min-h-[560px] overflow-hidden rounded-lg border border-k-100 bg-white"
+        : "h-[calc(100vh-112px)]",
+    )}
+  >
+    <div className="flex-1 overflow-hidden">
+      <div className={clsx("flex h-full flex-col", isDesktop ? "px-6 pb-3" : "px-5 pb-2")}>
+        <PartnerSummary
+          isMentor={isMentor}
+          isPartnerMentor={isPartnerMentor}
+          partnerId={partnerId}
+          nickname={nickname}
+          profileUrl={profileUrl}
+          university={university}
+          connectionStatus={connectionStatus}
+          isDesktop={isDesktop}
+        />
+        <ChatMessageList
+          userId={userId}
+          isPartnerMentor={isPartnerMentor}
+          nickname={nickname}
+          profileUrl={profileUrl}
+          messages={messages}
+          isLoading={isLoading}
+          isFetchingNextPage={isFetchingNextPage}
+          scrollContainerRef={scrollContainerRef}
+          messagesEndRef={messagesEndRef}
+          topDetectorRef={topDetectorRef}
+          isDesktop={isDesktop}
+        />
+      </div>
+    </div>
+    {inputBar}
+  </div>
+);
+
+const DesktopChatContentView = (props: ChatContentViewProps) => <ChatContentViewBase {...props} isDesktop />;
+
+const MobileChatContentView = (props: ChatContentViewProps) => <ChatContentViewBase {...props} isDesktop={false} />;
+
+type PartnerSummaryProps = {
+  isMentor: boolean;
+  isPartnerMentor: boolean;
+  partnerId?: number;
+  nickname?: string;
+  profileUrl?: string | null;
+  university?: string | null;
+  connectionStatus: ConnectionStatus;
+  isDesktop: boolean;
+};
+
+const PartnerSummary = ({
+  isMentor,
+  isPartnerMentor,
+  partnerId,
+  nickname,
+  profileUrl,
+  university,
+  connectionStatus,
+  isDesktop,
+}: PartnerSummaryProps) => (
+  <div className={clsx("z-10 w-full flex-shrink-0", isDesktop ? "border-b border-k-100 py-4" : "mt-5 h-16")}>
     <div
       className={clsx(
-        "relative flex flex-col",
-        isDesktop
-          ? "h-[calc(100vh-204px)] min-h-[560px] overflow-hidden rounded-lg border border-k-100 bg-white"
-          : "h-[calc(100vh-112px)]",
+        "flex w-full items-center justify-between",
+        isDesktop ? "rounded-lg px-4 py-3" : "rounded px-2.5 py-2",
+        isMentor ? "bg-sub-c-100 text-sub-c-500" : "bg-primary-100 text-primary",
       )}
     >
-      <div className="flex-1 overflow-hidden">
-        <div className={clsx("flex h-full flex-col", isDesktop ? "px-6 pb-3" : "px-5 pb-2")}>
-          {/* 하단 여백 추가 */}
-          {/* Floating 멘토 정보 영역 */}
-          <div className={clsx("z-10 w-full flex-shrink-0", isDesktop ? "border-b border-k-100 py-4" : "mt-5 h-16")}>
-            <div
-              className={clsx(
-                "flex w-full items-center justify-between",
-                isDesktop ? "rounded-lg px-4 py-3" : "rounded px-2.5 py-2",
-                isMentor ? "bg-sub-c-100 text-sub-c-500" : "bg-primary-100 text-primary",
-              )}
-            >
-              <div className="flex items-center gap-2">
-                <ProfileWithBadge profileImageUrl={profileUrl} isMentor={isPartnerMentor} width={30} height={30} />
-                <div className="flex h-full items-center">
-                  <span className="text-k-700 typo-sb-7">{nickname}</span>
-                  <div className="mx-4 h-10 w-[1px] bg-k-100"></div>
-                  <div className="flex typo-medium-2">{university ? university : "예비솔커"}</div>
-                </div>
-              </div>
-              <Link
-                className={clsx("rounded-3xl px-4 py-2 text-k-0 typo-sb-9", isMentor ? "bg-sub-c-500" : "bg-primary")}
-                // TODO 멘티 페이지 라우터 변경 시 수정 필요
-                // partnerId 가 mentorId가 맞는지 확인 필요
-                href={isMentor ? `/${partnerId}` : `/mentor/${partnerId}`}
-              >
-                {isMentor ? "멘티 페이지" : "멘토 페이지"}
-              </Link>
-            </div>
-            <div className={clsx("bg-white px-4 text-center", isDesktop ? "pt-3" : "rounded py-2")}>
-              <div className="rounded bg-white px-4 py-2 text-center">
-                {connectionStatus === ConnectionStatus.Connected ? (
-                  <p
-                    className={clsx(
-                      "bg-gradient-to-r bg-clip-text text-transparent typo-sb-9",
-                      isMentor ? "from-sub-c-500 to-primary-600" : "from-primary to-sub-a",
-                    )}
-                  >
-                    멘토링이 연결되었습니다! 채팅을 시작해보세요!
-                  </p>
-                ) : connectionStatus === ConnectionStatus.Pending ? (
-                  <p className="text-yellow-500 typo-sb-9">연결 대기 중입니다. 잠시만 기다려주세요.</p>
-                ) : connectionStatus === ConnectionStatus.Error ? (
-                  <p className="text-red-500 typo-sb-9">연결 중 오류가 발생했습니다. 다시 시도해주세요.</p>
-                ) : connectionStatus === ConnectionStatus.Disconnected ? (
-                  <p className="text-gray-500 typo-sb-9">연결이 끊어졌습니다. 잠시 후 다시 시도해주세요.</p>
-                ) : null}
-              </div>
-            </div>
-          </div>
-          {/* 채팅 메시지 영역 - 항상 스크롤 가능, 스크롤바 숨김 */}
-          <div
-            ref={scrollContainerRef}
-            className={clsx("scrollbar-hide flex-1 overflow-y-auto", isDesktop ? "p-6" : "mt-4 p-4 pb-6")}
-            style={{
-              scrollbarWidth: "none" /* Firefox */,
-              msOverflowStyle: "none" /* Internet Explorer 10+ */,
-            }}
-          >
-            {/* 초기 로딩 표시 - 상단 고정 */}
-            {isLoading && (
-              <div className="flex justify-center py-4">
-                <span className="text-k-500">채팅 기록을 불러오는 중...</span>
-              </div>
+      <div className="flex items-center gap-2">
+        <ProfileWithBadge profileImageUrl={profileUrl} isMentor={isPartnerMentor} width={30} height={30} />
+        <div className="flex h-full items-center">
+          <span className="text-k-700 typo-sb-7">{nickname}</span>
+          <div className="mx-4 h-10 w-[1px] bg-k-100"></div>
+          <div className="flex typo-medium-2">{university ? university : "예비솔커"}</div>
+        </div>
+      </div>
+      <Link
+        className={clsx("rounded-3xl px-4 py-2 text-k-0 typo-sb-9", isMentor ? "bg-sub-c-500" : "bg-primary")}
+        href={isMentor ? `/${partnerId}` : `/mentor/${partnerId}`}
+      >
+        {isMentor ? "멘티 페이지" : "멘토 페이지"}
+      </Link>
+    </div>
+    <div className={clsx("bg-white px-4 text-center", isDesktop ? "pt-3" : "rounded py-2")}>
+      <div className="rounded bg-white px-4 py-2 text-center">
+        {connectionStatus === ConnectionStatus.Connected ? (
+          <p
+            className={clsx(
+              "bg-gradient-to-r bg-clip-text text-transparent typo-sb-9",
+              isMentor ? "from-sub-c-500 to-primary-600" : "from-primary to-sub-a",
             )}
+          >
+            멘토링이 연결되었습니다! 채팅을 시작해보세요!
+          </p>
+        ) : connectionStatus === ConnectionStatus.Pending ? (
+          <p className="text-yellow-500 typo-sb-9">연결 대기 중입니다. 잠시만 기다려주세요.</p>
+        ) : connectionStatus === ConnectionStatus.Error ? (
+          <p className="text-red-500 typo-sb-9">연결 중 오류가 발생했습니다. 다시 시도해주세요.</p>
+        ) : connectionStatus === ConnectionStatus.Disconnected ? (
+          <p className="text-gray-500 typo-sb-9">연결이 끊어졌습니다. 잠시 후 다시 시도해주세요.</p>
+        ) : null}
+      </div>
+    </div>
+  </div>
+);
+
+type ChatMessageListProps = {
+  userId: number;
+  isPartnerMentor: boolean;
+  nickname?: string;
+  profileUrl?: string | null;
+  messages: ChatMessage[];
+  isLoading: boolean;
+  isFetchingNextPage: boolean;
+  scrollContainerRef: RefObject<HTMLDivElement | null>;
+  messagesEndRef: RefObject<HTMLDivElement | null>;
+  topDetectorRef: Ref<HTMLDivElement>;
+  isDesktop: boolean;
+};
+
+const ChatMessageList = ({
+  userId,
+  isPartnerMentor,
+  nickname,
+  profileUrl,
+  messages,
+  isLoading,
+  isFetchingNextPage,
+  scrollContainerRef,
+  messagesEndRef,
+  topDetectorRef,
+  isDesktop,
+}: ChatMessageListProps) => (
+  <div
+    ref={scrollContainerRef}
+    className={clsx("scrollbar-hide flex-1 overflow-y-auto", isDesktop ? "p-6" : "mt-4 p-4 pb-6")}
+    style={{
+      scrollbarWidth: "none",
+      msOverflowStyle: "none",
+    }}
+  >
+    {isLoading && (
+      <div className="flex justify-center py-4">
+        <span className="text-k-500">채팅 기록을 불러오는 중...</span>
+      </div>
+    )}
 
-            <div className="space-y-4">
-              {/* 상단 무한 스크롤 로딩 표시 */}
-              {isFetchingNextPage && (
-                <div className="flex justify-center py-2">
-                  <div className="flex items-center gap-2">
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
-                    <span className="text-k-500 typo-regular-2">이전 메시지를 불러오는 중...</span>
-                  </div>
-                </div>
-              )}
-
-              {/* 첫 번째 메시지에 ref 부착하여 위로 스크롤 시 더 오래된 메시지 로드 */}
-              {messages.map((message, index) => {
-                const showDateSeparator = index === 0 || !isSameDay(messages[index - 1].createdAt, message.createdAt);
-                const previewMessageKey = message.attachments
-                  .map((attachment) => attachment.previewUrl)
-                  .find((previewUrl): previewUrl is string => Boolean(previewUrl));
-                const messageKey = previewMessageKey
-                  ? `preview-${previewMessageKey}`
-                  : message.id > 0
-                    ? `message-${message.id}`
-                    : `message-${message.senderId}-${message.createdAt}-${message.content}-${index}`;
-
-                return (
-                  <div
-                    key={messageKey}
-                    ref={index === 0 ? topDetectorRef : null} // 첫 번째 메시지에 ref 부착
-                  >
-                    {/* 날짜 구분선 */}
-                    {showDateSeparator && (
-                      <div className="my-4 mb-6 flex w-full justify-center">
-                        <span className="rounded-full bg-k-50 px-3 py-1 text-k-600 typo-regular-2">
-                          {formatDateSeparator(message.createdAt)}
-                        </span>
-                      </div>
-                    )}
-                    {/* 일반 채팅 메시지 */}
-                    <ChatMessageBox
-                      message={message}
-                      currentUserId={userId}
-                      partnerNickname={nickname}
-                      partnerProfileUrl={profileUrl}
-                      isPartnerMentor={isPartnerMentor}
-                    />
-                  </div>
-                );
-              })}
-
-              {/* 스크롤 타겟 - 메시지 목록 끝 */}
-              <div ref={messagesEndRef} />
-            </div>
+    <div className="space-y-4">
+      {isFetchingNextPage && (
+        <div className="flex justify-center py-2">
+          <div className="flex items-center gap-2">
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+            <span className="text-k-500 typo-regular-2">이전 메시지를 불러오는 중...</span>
           </div>
         </div>
-      </div>
+      )}
 
-      {/* 메시지 입력 영역 - 항상 하단 고정 */}
-      <ChatInputBar
-        onSendMessage={(data) => {
-          sendTextMessage(data.message, userId);
-        }}
-        onSendImages={async (data) => {
-          const previewUrls = addImageMessagePreview(data.images, userId);
-
-          try {
-            const imageUrls = await uploadChatImagesMutation.mutateAsync(data.images);
-            const isSent = sendImageMessage(imageUrls, previewUrls);
-
-            if (!isSent) {
-              removeImageMessagePreviews(previewUrls);
-              showIconToast("logo", "채팅 연결이 원활하지 않아 이미지를 전송하지 못했어요.");
-            }
-          } catch {
-            removeImageMessagePreviews(previewUrls);
-            showIconToast("logo", "이미지 전송에 실패했어요. 다시 시도해주세요.");
-          }
-        }}
-        onSendFiles={(data) => {
-          addImageMessagePreview(data.files, userId);
-        }}
-      />
+      {messages.map((message, index) => {
+        const showDateSeparator = index === 0 || !isSameDay(messages[index - 1].createdAt, message.createdAt);
+        const previewMessageKey = message.attachments
+          .map((attachment) => attachment.previewUrl)
+          .find((previewUrl): previewUrl is string => Boolean(previewUrl));
+        const messageKey = previewMessageKey
+          ? `preview-${previewMessageKey}`
+          : message.id > 0
+            ? `message-${message.id}`
+            : `message-${message.senderId}-${message.createdAt}-${message.content}-${index}`;
+
+        return (
+          <div key={messageKey} ref={index === 0 ? topDetectorRef : null}>
+            {showDateSeparator && (
+              <div className="my-4 mb-6 flex w-full justify-center">
+                <span className="rounded-full bg-k-50 px-3 py-1 text-k-600 typo-regular-2">
+                  {formatDateSeparator(message.createdAt)}
+                </span>
+              </div>
+            )}
+            <ChatMessageBox
+              message={message}
+              currentUserId={userId}
+              partnerNickname={nickname}
+              partnerProfileUrl={profileUrl}
+              isPartnerMentor={isPartnerMentor}
+            />
+          </div>
+        );
+      })}
+
+      <div ref={messagesEndRef} />
     </div>
-  );
-};
+  </div>
+);
 
 export default ChatContent;
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx
index 6b100989f..e4328f979 100644
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatNavBar/index.tsx
@@ -18,6 +18,9 @@ interface ChatNavBarProps {
   chatId: number;
 }
 
+type PartnerInfo = NonNullable<ReturnType<typeof useGetPartnerInfo>["data"]>;
+type MyInfo = NonNullable<ReturnType<typeof useGetMyInfo>["data"]>;
+
 const ChatNavBar = ({ chatId }: ChatNavBarProps) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
@@ -54,151 +57,190 @@ const ChatNavBar = ({ chatId }: ChatNavBarProps) => {
 
   if (isDesktop === null) return null;
 
-  return (
-    <div className="relative">
-      {isDesktop ? (
-        <header className="px-8 pt-8 lg:px-10">
-          <div className="mb-8 flex items-start justify-between gap-6">
-            <div>
-              <p className="text-primary typo-sb-9">Mentor</p>
-              <h1 className="mt-2 text-k-900 typo-bold-1">멘토 채팅</h1>
-              <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
-                멘토링 상대와 실시간으로 대화하며 궁금한 점을 해결하세요.
-              </p>
-            </div>
-            <button
-              type="button"
-              className="flex h-10 w-10 items-center justify-center rounded-full border border-k-100 bg-white"
-              onClick={handleSettingsClick}
-              aria-label="채팅 설정 열기"
-            >
-              <IconSetting />
-            </button>
-          </div>
-        </header>
-      ) : (
-        <nav>
-          <TopDetailNavigation
-            title={"멘토 채팅"}
-            icon={
-              <button type="button" className="h-4 w-4" onClick={handleSettingsClick}>
-                <IconSetting />
-              </button>
-            }
+  const viewProps: ChatNavBarViewProps = {
+    chatId,
+    isMentor,
+    isPartnerMentor,
+    partnerInfo,
+    myInfo,
+    isExpanded,
+    isAnimating,
+    handleSettingsClick,
+    handleClose,
+  };
+
+  return isDesktop ? <DesktopChatNavBarView {...viewProps} /> : <MobileChatNavBarView {...viewProps} />;
+};
+
+type ChatNavBarViewProps = {
+  chatId: number;
+  isMentor: boolean;
+  isPartnerMentor: boolean;
+  partnerInfo?: PartnerInfo;
+  myInfo?: MyInfo;
+  isExpanded: boolean;
+  isAnimating: boolean;
+  handleSettingsClick: () => void;
+  handleClose: () => void;
+};
+
+const DesktopChatNavBarView = (props: ChatNavBarViewProps) => (
+  <div className="relative">
+    <header className="px-8 pt-8 lg:px-10">
+      <div className="mb-8 flex items-start justify-between gap-6">
+        <div>
+          <p className="text-primary typo-sb-9">Mentor</p>
+          <h1 className="mt-2 text-k-900 typo-bold-1">멘토 채팅</h1>
+          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+            멘토링 상대와 실시간으로 대화하며 궁금한 점을 해결하세요.
+          </p>
+        </div>
+        <ChatSettingsButton onClick={props.handleSettingsClick} size="desktop" />
+      </div>
+    </header>
+    <ChatSettingsPanel {...props} />
+  </div>
+);
+
+const MobileChatNavBarView = (props: ChatNavBarViewProps) => (
+  <div className="relative">
+    <nav>
+      <TopDetailNavigation
+        title={"멘토 채팅"}
+        icon={<ChatSettingsButton onClick={props.handleSettingsClick} size="mobile" />}
+      />
+    </nav>
+    <ChatSettingsPanel {...props} />
+  </div>
+);
+
+const ChatSettingsButton = ({ onClick, size }: { onClick: () => void; size: "desktop" | "mobile" }) => (
+  <button
+    type="button"
+    className={
+      size === "desktop"
+        ? "flex h-10 w-10 items-center justify-center rounded-full border border-k-100 bg-white"
+        : "h-4 w-4"
+    }
+    onClick={onClick}
+    aria-label="채팅 설정 열기"
+  >
+    <IconSetting />
+  </button>
+);
+
+const ChatSettingsPanel = ({
+  chatId,
+  isMentor,
+  isPartnerMentor,
+  partnerInfo,
+  myInfo,
+  isExpanded,
+  isAnimating,
+  handleClose,
+}: ChatNavBarViewProps) => (
+  <>
+    {(isExpanded || isAnimating) && (
+      <button
+        className={clsx("fixed inset-0 right-0 top-0 z-20 bg-black bg-opacity-20", {
+          "animate-fadeIn": isExpanded,
+          "animate-fadeOut": !isExpanded && isAnimating,
+        })}
+        onClick={handleClose}
+        aria-label="설정 패널 닫기"
+      />
+    )}
+    {(isExpanded || isAnimating) && (
+      <div
+        className={clsx(
+          "fixed right-0 top-0 z-30 h-[100vh] w-80 overflow-y-auto rounded-l-2xl bg-white p-4 shadow-2xl",
+          {
+            "animate-slideInRight": isExpanded,
+            "animate-slideOutRight": !isExpanded && isAnimating,
+          },
+        )}
+      >
+        <div className="w-full">
+          <button className="h-[30px] w-[30px]" onClick={handleClose} aria-label="뒤로가기">
+            <IconDirectionRight />
+          </button>
+        </div>
+        <div className="mb-6 flex flex-col items-center">
+          <ProfileWithBadge
+            profileImageUrl={partnerInfo?.profileUrl}
+            isMentor={isPartnerMentor}
+            width={64}
+            height={64}
           />
-        </nav>
-      )}
-
-      {/* 오버레이 (패널 외부 클릭 시 닫기) */}
-      {(isExpanded || isAnimating) && (
-        <button
-          className={clsx("fixed inset-0 right-0 top-0 z-20 bg-black bg-opacity-20", {
-            "animate-fadeIn": isExpanded,
-            "animate-fadeOut": !isExpanded && isAnimating,
-          })}
-          onClick={handleClose}
-          aria-label="설정 패널 닫기"
-        />
-      )}
-      {/* 확장된 설정 패널 */}
-      {(isExpanded || isAnimating) && (
-        <div
-          className={clsx(
-            "fixed right-0 top-0 z-30 h-[100vh] w-80 overflow-y-auto rounded-l-2xl bg-white p-4 shadow-2xl",
-            {
-              "animate-slideInRight": isExpanded,
-              "animate-slideOutRight": !isExpanded && isAnimating,
-            },
-          )}
-        >
-          {/* 상대방 프로필 섹션 */}
-          <div className="w-full">
-            <button className="h-[30px] w-[30px]" onClick={handleClose} aria-label="뒤로가기">
-              <IconDirectionRight />
-            </button>
-          </div>
-          <div className="mb-6 flex flex-col items-center">
-            <ProfileWithBadge
-              profileImageUrl={partnerInfo?.profileUrl}
-              isMentor={isPartnerMentor}
-              width={64}
-              height={64}
-            />
-            <h3 className="text-gray-800 typo-sb-5">{partnerInfo?.nickname || "상대방"}</h3>
-            <p className={clsx("typo-medium-2", { "text-sub-c-500": isMentor, "text-primary-500": !isMentor })}>
-              {partnerInfo?.university || "예비솔커"}
-            </p>
-
-            <Link
-              // TODO 멘티 페이지 라우터 변경 시 수정 필요
-              href={`/mentor/${partnerInfo?.partnerId}`}
-              className={clsx("mt-3 w-full rounded-3xl px-4 py-2 text-center text-white typo-medium-2", {
-                "bg-sub-c-500": isMentor,
-                "bg-primary": !isMentor,
-              })}
-            >
-              {isMentor ? "멘티 페이지 가기" : "멘토 페이지 가기"}
-            </Link>
-          </div>
+          <h3 className="text-gray-800 typo-sb-5">{partnerInfo?.nickname || "상대방"}</h3>
+          <p className={clsx("typo-medium-2", { "text-sub-c-500": isMentor, "text-primary-500": !isMentor })}>
+            {partnerInfo?.university || "예비솔커"}
+          </p>
 
-          <hr className="mb-6 mt-6" />
-          {/* 알림 설정 */}
-          <div className="mb-4 flex items-center justify-between py-2">
-            <div className="flex items-center gap-1">
-              <span className="h-[18px] w-[18px]">{isMentor ? <IconAlertSubC /> : <IconAlert />}</span>
-              <span className="text-k-800 typo-medium-3">알림</span>
-            </div>
-            <label className="relative inline-flex cursor-pointer items-center">
-              <input type="checkbox" className="peer sr-only" defaultChecked disabled />
-              <div
-                className={clsx(
-                  "peer h-6 w-11 rounded-full after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
-                  {
-                    "bg-primary-300 peer-checked:bg-primary-500": !isMentor,
-                    "bg-sub-c-300 peer-checked:bg-sub-c-500": isMentor,
-                    "cursor-not-allowed opacity-50": true, // 비활성화 시 시각적으로 표시
-                  },
-                )}
-              ></div>
-            </label>
+          <Link
+            href={`/mentor/${partnerInfo?.partnerId}`}
+            className={clsx("mt-3 w-full rounded-3xl px-4 py-2 text-center text-white typo-medium-2", {
+              "bg-sub-c-500": isMentor,
+              "bg-primary": !isMentor,
+            })}
+          >
+            {isMentor ? "멘티 페이지 가기" : "멘토 페이지 가기"}
+          </Link>
+        </div>
+
+        <hr className="mb-6 mt-6" />
+        <div className="mb-4 flex items-center justify-between py-2">
+          <div className="flex items-center gap-1">
+            <span className="h-[18px] w-[18px]">{isMentor ? <IconAlertSubC /> : <IconAlert />}</span>
+            <span className="text-k-800 typo-medium-3">알림</span>
           </div>
-          <hr className="mb-6 mt-6" />
-          {/* 참여자 섹션 */}
-          <p className="text-gray-600 typo-regular-2">참여자 2</p>
-          <div className="mt-2 space-y-3">
-            {/* 현재 사용자 */}
-            <div className="flex items-center gap-3">
-              <ProfileWithBadge profileImageUrl={myInfo?.profileImageUrl} isMentor={isMentor} width={24} height={24} />
-              {/* '나' 표시 div */}
-              <div className="flex h-3 w-3 items-center justify-center rounded-full bg-pink-200">
-                <span className="text-center text-pink-600 typo-medium-5">나</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-k-800 typo-medium-2">
-                  {myInfo?.nickname || "나"} ({myInfo?.role === UserRole.ADMIN ? "어드민" : isMentor ? "멘토" : "멘티"})
-                </span>
-              </div>
+          <label className="relative inline-flex cursor-pointer items-center">
+            <input type="checkbox" className="peer sr-only" defaultChecked disabled />
+            <div
+              className={clsx(
+                "peer h-6 w-11 rounded-full after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
+                {
+                  "bg-primary-300 peer-checked:bg-primary-500": !isMentor,
+                  "bg-sub-c-300 peer-checked:bg-sub-c-500": isMentor,
+                  "cursor-not-allowed opacity-50": true,
+                },
+              )}
+            ></div>
+          </label>
+        </div>
+        <hr className="mb-6 mt-6" />
+        <p className="text-gray-600 typo-regular-2">참여자 2</p>
+        <div className="mt-2 space-y-3">
+          <div className="flex items-center gap-3">
+            <ProfileWithBadge profileImageUrl={myInfo?.profileImageUrl} isMentor={isMentor} width={24} height={24} />
+            <div className="flex h-3 w-3 items-center justify-center rounded-full bg-pink-200">
+              <span className="text-center text-pink-600 typo-medium-5">나</span>
             </div>
-
-            {/* 상대방 */}
-            <div className="flex items-center gap-3">
-              <ProfileWithBadge
-                profileImageUrl={partnerInfo?.profileUrl}
-                isMentor={isPartnerMentor}
-                width={24}
-                height={24}
-              />
+            <div className="flex items-center gap-2">
               <span className="text-k-800 typo-medium-2">
-                {partnerInfo?.nickname || "상대방"} ({isMentor ? "멘티" : "멘토"})
+                {myInfo?.nickname || "나"} ({myInfo?.role === UserRole.ADMIN ? "어드민" : isMentor ? "멘토" : "멘티"})
               </span>
             </div>
           </div>
-          <div className="absolute bottom-0 left-0 flex w-full items-center rounded-bl-2xl bg-white px-[10px] py-[22px] shadow-top">
-            <ReportPanel idx={chatId} />
+
+          <div className="flex items-center gap-3">
+            <ProfileWithBadge
+              profileImageUrl={partnerInfo?.profileUrl}
+              isMentor={isPartnerMentor}
+              width={24}
+              height={24}
+            />
+            <span className="text-k-800 typo-medium-2">
+              {partnerInfo?.nickname || "상대방"} ({isMentor ? "멘티" : "멘토"})
+            </span>
           </div>
         </div>
-      )}
-    </div>
-  );
-};
+        <div className="absolute bottom-0 left-0 flex w-full items-center rounded-bl-2xl bg-white px-[10px] py-[22px] shadow-top">
+          <ReportPanel idx={chatId} />
+        </div>
+      </div>
+    )}
+  </>
+);
+
 export default ChatNavBar;
diff --git a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
index 50fda4bad..e30bf730b 100644
--- a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
+++ b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
@@ -26,112 +26,122 @@ const ChatPageClient = () => {
     return <div aria-hidden className="min-h-screen bg-white md:bg-k-50" />;
   }
 
-  if (chatRooms.length === 0 && isMentee) {
-    return <ChatEmptyState isDesktop={isDesktop} isMentee />;
-  }
-
   if (chatRooms.length === 0) {
-    return <ChatEmptyState isDesktop={isDesktop} isMentee={false} />;
+    return isDesktop ? <DesktopChatEmptyState isMentee={isMentee} /> : <MobileChatEmptyState isMentee={isMentee} />;
   }
 
-  if (isDesktop) {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <header className="mb-8">
-          <p className="text-primary typo-sb-9">Mentor</p>
-          <h1 className="mt-2 text-k-900 typo-bold-1">멘토 채팅</h1>
-          <p className="mt-2 max-w-2xl 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">
-            <ChatListHeader title={listTitle} count={chatRooms.length} />
-            <ChatRoomList chatRooms={chatRooms} isPartnerMentor={isPartnerMentor} isDesktop />
-          </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">
-              {isMentee && <DesktopQuickLink href="/mentor" title="멘토 찾기" description="새로운 멘토를 탐색해요" />}
-              <DesktopQuickLink href="/mentor/waiting" title="신청 목록" description="대기 중인 멘토링을 확인해요" />
-            </div>
-          </aside>
-        </div>
-      </div>
-    );
-  }
+  const viewProps = {
+    chatRooms,
+    isMentee,
+    isPartnerMentor,
+    listTitle,
+  };
 
-  return (
-    <div className="flex h-full w-full flex-col">
-      {isMentee && (
-        <Link href="/mentor" className="flex h-[66px] w-full items-center justify-between bg-secondary-100 px-9 py-3">
-          <div>
-            <div className="flex items-center gap-2">
-              <span className="h-5 w-5">
-                <IconSearchBlue />
-              </span>
-              <span className="text-secondary typo-sb-9">멘토를 찾으러 가볼까요?</span>
-            </div>
-            <p className="w-[140px] text-end text-k-600 typo-medium-3">나의 멘토 찾으러가기</p>
-          </div>
-          <div className="text-blue-600">
-            <span>›</span>
-          </div>
-        </Link>
-      )}
+  return isDesktop ? <DesktopChatPageView {...viewProps} /> : <MobileChatPageView {...viewProps} />;
+};
 
-      <div className="px-5 py-4">
-        <ChatListHeader title={listTitle} count={chatRooms.length} />
-        <ChatRoomList chatRooms={chatRooms} isPartnerMentor={isPartnerMentor} />
-      </div>
-    </div>
-  );
+type ChatPageViewProps = {
+  chatRooms: ChatRoom[];
+  isMentee: boolean;
+  isPartnerMentor: boolean;
+  listTitle: string;
 };
 
-const ChatEmptyState = ({ isDesktop, isMentee }: { isDesktop: boolean; isMentee: boolean }) => {
-  const content = (
-    <div className={clsx("flex flex-col items-center justify-center", isDesktop ? "min-h-[360px]" : "min-h-screen")}>
-      <div className="w-15 h-[45px]">
-        <IconSolidConnentionLogo />
-      </div>
-      <p className="text-center text-k-300 typo-medium-2">
-        {isMentee ? (
-          <>
-            현재 매칭된 멘토가 없어요.
-            <br />
-            멘토부터 찾아볼까요?
-          </>
-        ) : (
-          "현재 진행 중인 채팅이 없어요."
-        )}
+const DesktopChatPageView = ({ chatRooms, isMentee, isPartnerMentor, listTitle }: ChatPageViewProps) => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <header className="mb-8">
+      <p className="text-primary typo-sb-9">Mentor</p>
+      <h1 className="mt-2 text-k-900 typo-bold-1">멘토 채팅</h1>
+      <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+        진행 중인 멘토링 대화를 확인하고 바로 이어서 대화하세요.
       </p>
-      {isMentee && (
-        <Link
-          href="/mentor"
-          className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-gradient-to-l from-primary to-sub-a px-[10px] text-white typo-sb-9"
-        >
-          멘토 찾으러 가볼까요?
-        </Link>
-      )}
+    </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">
+        <ChatListHeader title={listTitle} count={chatRooms.length} />
+        <DesktopChatRoomList chatRooms={chatRooms} isPartnerMentor={isPartnerMentor} />
+      </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">
+          {isMentee && <DesktopQuickLink href="/mentor" title="멘토 찾기" description="새로운 멘토를 탐색해요" />}
+          <DesktopQuickLink href="/mentor/waiting" title="신청 목록" description="대기 중인 멘토링을 확인해요" />
+        </div>
+      </aside>
     </div>
-  );
+  </div>
+);
 
-  if (!isDesktop) {
-    return content;
-  }
+const MobileChatPageView = ({ chatRooms, isMentee, isPartnerMentor, listTitle }: ChatPageViewProps) => (
+  <div className="flex h-full w-full flex-col">
+    {isMentee && (
+      <Link href="/mentor" className="flex h-[66px] w-full items-center justify-between bg-secondary-100 px-9 py-3">
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="h-5 w-5">
+              <IconSearchBlue />
+            </span>
+            <span className="text-secondary typo-sb-9">멘토를 찾으러 가볼까요?</span>
+          </div>
+          <p className="w-[140px] text-end text-k-600 typo-medium-3">나의 멘토 찾으러가기</p>
+        </div>
+        <div className="text-blue-600">
+          <span>›</span>
+        </div>
+      </Link>
+    )}
 
-  return (
-    <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-      <header className="mb-8">
-        <p className="text-primary typo-sb-9">Mentor</p>
-        <h1 className="mt-2 text-k-900 typo-bold-1">멘토 채팅</h1>
-      </header>
-      <section className="rounded-lg border border-k-100 bg-white p-6">{content}</section>
+    <div className="px-5 py-4">
+      <ChatListHeader title={listTitle} count={chatRooms.length} />
+      <MobileChatRoomList chatRooms={chatRooms} isPartnerMentor={isPartnerMentor} />
     </div>
-  );
-};
+  </div>
+);
+
+const ChatEmptyStateBase = ({ isDesktop, isMentee }: { isDesktop: boolean; isMentee: boolean }) => (
+  <div className={clsx("flex flex-col items-center justify-center", isDesktop ? "min-h-[360px]" : "min-h-screen")}>
+    <div className="w-15 h-[45px]">
+      <IconSolidConnentionLogo />
+    </div>
+    <p className="text-center text-k-300 typo-medium-2">
+      {isMentee ? (
+        <>
+          현재 매칭된 멘토가 없어요.
+          <br />
+          멘토부터 찾아볼까요?
+        </>
+      ) : (
+        "현재 진행 중인 채팅이 없어요."
+      )}
+    </p>
+    {isMentee && (
+      <Link
+        href="/mentor"
+        className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-gradient-to-l from-primary to-sub-a px-[10px] text-white typo-sb-9"
+      >
+        멘토 찾으러 가볼까요?
+      </Link>
+    )}
+  </div>
+);
+
+const DesktopChatEmptyState = ({ isMentee }: { isMentee: boolean }) => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <header className="mb-8">
+      <p className="text-primary typo-sb-9">Mentor</p>
+      <h1 className="mt-2 text-k-900 typo-bold-1">멘토 채팅</h1>
+    </header>
+    <section className="rounded-lg border border-k-100 bg-white p-6">
+      <ChatEmptyStateBase isDesktop isMentee={isMentee} />
+    </section>
+  </div>
+);
+
+const MobileChatEmptyState = ({ isMentee }: { isMentee: boolean }) => (
+  <ChatEmptyStateBase isDesktop={false} isMentee={isMentee} />
+);
 
 const ChatListHeader = ({ title, count }: { title: string; count: number }) => (
   <div className="mb-4 flex items-center gap-[10px]">
@@ -142,15 +152,16 @@ const ChatListHeader = ({ title, count }: { title: string; count: number }) => (
   </div>
 );
 
-const ChatRoomList = ({
-  chatRooms,
-  isPartnerMentor,
-  isDesktop = false,
-}: {
+type ChatRoomListProps = {
   chatRooms: ChatRoom[];
   isPartnerMentor: boolean;
-  isDesktop?: boolean;
-}) => (
+};
+
+type ChatRoomListBaseProps = ChatRoomListProps & {
+  isDesktop: boolean;
+};
+
+const ChatRoomListBase = ({ chatRooms, isPartnerMentor, isDesktop }: ChatRoomListBaseProps) => (
   <div className={isDesktop ? "grid gap-2" : "w-full space-y-3"}>
     {chatRooms.map((chat) => {
       const { nickname, profileUrl } = chat.partner;
@@ -186,6 +197,10 @@ const ChatRoomList = ({
   </div>
 );
 
+const DesktopChatRoomList = (props: ChatRoomListProps) => <ChatRoomListBase {...props} isDesktop />;
+
+const MobileChatRoomList = (props: ChatRoomListProps) => <ChatRoomListBase {...props} isDesktop={false} />;
+
 const DesktopQuickLink = ({ href, title, description }: { href: string; title: string; description: string }) => (
   <Link href={href} className="rounded-lg bg-k-50 px-4 py-3 transition-colors hover:bg-k-100">
     <span className="block text-k-800 typo-sb-7">{title}</span>
diff --git a/apps/web/src/app/my/apply-mentor/_components/CompletionScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/CompletionScreen/index.tsx
index 2dd50e9a9..5c5603fb6 100644
--- a/apps/web/src/app/my/apply-mentor/_components/CompletionScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/CompletionScreen/index.tsx
@@ -6,7 +6,7 @@ import BlockBtn from "@/components/button/BlockBtn";
 
 import { IconCheck } from "@/public/svgs/mentor";
 
-const CompletionScreen = ({ isDesktop = false }: { isDesktop?: boolean }) => {
+const CompletionScreenBase = ({ isDesktop }: { isDesktop: boolean }) => {
   const router = useRouter();
 
   if (isDesktop) {
@@ -71,4 +71,8 @@ const CompletionScreen = ({ isDesktop = false }: { isDesktop?: boolean }) => {
   );
 };
 
-export default CompletionScreen;
+export const DesktopCompletionScreen = () => <CompletionScreenBase isDesktop />;
+
+export const MobileCompletionScreen = () => <CompletionScreenBase isDesktop={false} />;
+
+export default MobileCompletionScreen;
diff --git a/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
index af8b6ce9b..52d05c891 100644
--- a/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
@@ -12,14 +12,17 @@ import type { MentorApplicationFormInputData } from "../../_lib/schema";
 
 type InterestCountriesScreenProps = {
   onNext: () => void;
-  isDesktop?: boolean;
+};
+
+type InterestCountriesScreenBaseProps = InterestCountriesScreenProps & {
+  isDesktop: boolean;
 };
 
 const countryCodeByName = Object.fromEntries(
   Object.entries(COUNTRY_CODE_MAP).map(([code, countryName]) => [countryName, code]),
 ) as Record<string, CountryCode>;
 
-const InterestCountriesScreen = ({ onNext, isDesktop = false }: InterestCountriesScreenProps) => {
+const InterestCountriesScreenBase = ({ onNext, isDesktop }: InterestCountriesScreenBaseProps) => {
   const {
     watch,
     setValue,
@@ -147,4 +150,12 @@ const InterestCountriesScreen = ({ onNext, isDesktop = false }: InterestCountrie
   );
 };
 
-export default InterestCountriesScreen;
+export const DesktopInterestCountriesScreen = (props: InterestCountriesScreenProps) => (
+  <InterestCountriesScreenBase {...props} isDesktop />
+);
+
+export const MobileInterestCountriesScreen = (props: InterestCountriesScreenProps) => (
+  <InterestCountriesScreenBase {...props} isDesktop={false} />
+);
+
+export default MobileInterestCountriesScreen;
diff --git a/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
index d30dd4fef..eaa07b1c4 100644
--- a/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
@@ -9,10 +9,13 @@ import type { MentorApplicationFormInputData } from "../../_lib/schema";
 
 type StudyStatusScreenProps = {
   onNext: () => void;
-  isDesktop?: boolean;
 };
 
-const StudyStatusScreen = ({ onNext, isDesktop = false }: StudyStatusScreenProps) => {
+type StudyStatusScreenBaseProps = StudyStatusScreenProps & {
+  isDesktop: boolean;
+};
+
+const StudyStatusScreenBase = ({ onNext, isDesktop }: StudyStatusScreenBaseProps) => {
   const {
     watch,
     setValue,
@@ -97,7 +100,15 @@ const StudyStatusScreen = ({ onNext, isDesktop = false }: StudyStatusScreenProps
   );
 };
 
-export default StudyStatusScreen;
+export const DesktopStudyStatusScreen = (props: StudyStatusScreenProps) => (
+  <StudyStatusScreenBase {...props} isDesktop />
+);
+
+export const MobileStudyStatusScreen = (props: StudyStatusScreenProps) => (
+  <StudyStatusScreenBase {...props} isDesktop={false} />
+);
+
+export default MobileStudyStatusScreen;
 
 type StatusChoiceButtonProps = {
   status: string;
diff --git a/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx b/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
index 0964f40ad..03a6c4105 100644
--- a/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
+++ b/apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
@@ -15,10 +15,13 @@ type FormValues = z.input<typeof mentorApplicationSchema>;
 type UniversityScreenProps = {
   isSubmitting: boolean;
   onNext: () => void;
-  isDesktop?: boolean;
 };
 
-const UniversityScreen = ({ isSubmitting, onNext, isDesktop = false }: UniversityScreenProps) => {
+type UniversityScreenBaseProps = UniversityScreenProps & {
+  isDesktop: boolean;
+};
+
+const UniversityScreenBase = ({ isSubmitting, onNext, isDesktop }: UniversityScreenBaseProps) => {
   const {
     watch,
     setValue,
@@ -224,4 +227,10 @@ const UniversityScreen = ({ isSubmitting, onNext, isDesktop = false }: Universit
   );
 };
 
-export default UniversityScreen;
+export const DesktopUniversityScreen = (props: UniversityScreenProps) => <UniversityScreenBase {...props} isDesktop />;
+
+export const MobileUniversityScreen = (props: UniversityScreenProps) => (
+  <UniversityScreenBase {...props} isDesktop={false} />
+);
+
+export default MobileUniversityScreen;
diff --git a/apps/web/src/app/my/apply-mentor/page.tsx b/apps/web/src/app/my/apply-mentor/page.tsx
index 11a2efe0f..c1b80a033 100644
--- a/apps/web/src/app/my/apply-mentor/page.tsx
+++ b/apps/web/src/app/my/apply-mentor/page.tsx
@@ -10,10 +10,10 @@ import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import { Progress } from "@/components/ui/Progress";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
-import CompletionScreen from "./_components/CompletionScreen";
-import InterestCountriesScreen from "./_components/InterestCountriesScreen";
-import StudyStatusScreen from "./_components/StudyStatusScreen";
-import UniversityScreen from "./_components/UniversityScreen";
+import { DesktopCompletionScreen, MobileCompletionScreen } from "./_components/CompletionScreen";
+import { DesktopInterestCountriesScreen, MobileInterestCountriesScreen } from "./_components/InterestCountriesScreen";
+import { DesktopStudyStatusScreen, MobileStudyStatusScreen } from "./_components/StudyStatusScreen";
+import { DesktopUniversityScreen, MobileUniversityScreen } from "./_components/UniversityScreen";
 import { mentorApplicationSchema } from "./_lib/schema";
 
 type FormInputValues = z.input<typeof mentorApplicationSchema>;
@@ -68,7 +68,7 @@ const ApplyMentorPage = () => {
   });
 
   if (step === 4) {
-    return <CompletionScreen isDesktop={Boolean(isDesktop)} />;
+    return isDesktop ? <DesktopCompletionScreen /> : <MobileCompletionScreen />;
   }
 
   if (isDesktop) {
@@ -102,9 +102,9 @@ const ApplyMentorPage = () => {
                 <Progress showPercentage={false} value={progress} />
               </div>
 
-              {step === 1 && <StudyStatusScreen isDesktop onNext={goNextStep} />}
-              {step === 2 && <InterestCountriesScreen isDesktop onNext={goNextStep} />}
-              {step === 3 && <UniversityScreen isDesktop isSubmitting={isPending} onNext={onSubmit} />}
+              {step === 1 && <DesktopStudyStatusScreen onNext={goNextStep} />}
+              {step === 2 && <DesktopInterestCountriesScreen onNext={goNextStep} />}
+              {step === 3 && <DesktopUniversityScreen isSubmitting={isPending} onNext={onSubmit} />}
             </section>
 
             <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
@@ -136,9 +136,9 @@ const ApplyMentorPage = () => {
         </div>
 
         {/* Step Content */}
-        {step === 1 && <StudyStatusScreen onNext={goNextStep} />}
-        {step === 2 && <InterestCountriesScreen onNext={goNextStep} />}
-        {step === 3 && <UniversityScreen isSubmitting={isPending} onNext={onSubmit} />}
+        {step === 1 && <MobileStudyStatusScreen onNext={goNextStep} />}
+        {step === 2 && <MobileInterestCountriesScreen onNext={goNextStep} />}
+        {step === 3 && <MobileUniversityScreen isSubmitting={isPending} onNext={onSubmit} />}
       </FormProvider>
     </div>
   );

From 8c53ba6e3c45a6dfd226cd8812b79a3826401628 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 13:23:40 +0900
Subject: [PATCH 18/20] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=A6=9D=EA=B3=BC?=
 =?UTF-8?q?=20=EB=A9=98=ED=86=A0=20=EA=B4=80=EB=A6=AC=20=EB=8D=B0=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=ED=86=B1=20=EB=B7=B0=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/login/LoginContent.tsx       | 145 +++---
 .../[id]/_ui/MentorDetialContent/index.tsx    | 224 +++++----
 .../mentor/modify/_ui/ModifyContent/index.tsx | 228 +++++----
 .../waiting/_ui/WaitingContent/index.tsx      | 224 +++++----
 .../SchoolEmailVerificationContent/index.tsx  | 474 +++++++++---------
 .../src/app/sign-up/email/EmailSignUpForm.tsx | 112 +++--
 6 files changed, 758 insertions(+), 649 deletions(-)

diff --git a/apps/web/src/app/login/LoginContent.tsx b/apps/web/src/app/login/LoginContent.tsx
index 4bc35d1af..3ed8cbead 100644
--- a/apps/web/src/app/login/LoginContent.tsx
+++ b/apps/web/src/app/login/LoginContent.tsx
@@ -66,9 +66,7 @@ const LoginContent = () => {
 
   if (isDesktop === null) return null;
 
-  const fieldWrapperClassName = isDesktop ? "" : "mx-5";
-
-  const loginForm = (
+  const renderLoginForm = (fieldWrapperClassName: string) => (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col gap-3">
         <div className={fieldWrapperClassName}>
@@ -112,7 +110,7 @@ const LoginContent = () => {
     </form>
   );
 
-  const socialButtons = (
+  const renderSocialButtons = (fieldWrapperClassName: string) => (
     <div className="mt-3">
       <div className="text-center font-serif text-k-300 typo-medium-1">or</div>
       <div className="mt-3 flex flex-col gap-3">
@@ -150,73 +148,92 @@ const LoginContent = () => {
     </div>
   );
 
-  if (isDesktop) {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <div className="grid min-h-[calc(100vh-64px)] items-center gap-8 xl:grid-cols-[minmax(360px,440px)_minmax(420px,520px)] xl:justify-center">
-          <aside className="rounded-lg border border-k-100 bg-white p-8">
-            <Link href="/" aria-label="홈으로 이동">
-              <IconSolidConnectionFullBlackLogo />
-            </Link>
-            <p className="mt-10 text-primary typo-sb-9">Solid Connection</p>
-            <h1 className="mt-3 text-k-900 typo-bold-1">교환학생 여정을 이어가세요</h1>
-            <p className="mt-4 text-k-500 typo-medium-2">
-              학교 탐색부터 지원 준비, 멘토링과 커뮤니티까지 한 계정에서 관리할 수 있습니다.
-            </p>
-            <div className="mt-8 grid gap-3">
-              {["관심 학교 저장", "지원 정보 관리", "멘토링 채팅"].map((item) => (
-                <div key={item} className="rounded-lg bg-k-50 px-4 py-3 text-k-700 typo-medium-2">
-                  {item}
-                </div>
-              ))}
-            </div>
-          </aside>
+  const desktopViewProps = {
+    loginForm: renderLoginForm(""),
+    socialButtons: renderSocialButtons(""),
+  };
+  const mobileViewProps = {
+    loginForm: renderLoginForm("mx-5"),
+    socialButtons: renderSocialButtons("mx-5"),
+    handleBack,
+  };
 
-          <section className="rounded-lg border border-k-100 bg-white p-8">
-            <div>
-              <p className="text-primary typo-sb-9">Login</p>
-              <h2 className="mt-2 font-serif text-k-900 typo-bold-1">로그인</h2>
-              <p className="mt-2 text-k-500 typo-medium-2">교환학생을 위한 여정을 지금 시작하세요.</p>
-            </div>
+  return isDesktop ? <DesktopLoginView {...desktopViewProps} /> : <MobileLoginView {...mobileViewProps} />;
+};
 
-            <div className="mt-8">
-              {loginForm}
-              {socialButtons}
-            </div>
-          </section>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <div className="-mx-5 mt-[-56px] flex h-[77px] items-center gap-3 border-b border-bg-200 px-5">
-        <button
-          type="button"
-          onClick={handleBack}
-          className="flex h-6 w-6 shrink-0 items-center justify-center"
-          aria-label="뒤로가기"
-        >
-          <IconArrowBackFilled />
-        </button>
+type DesktopLoginViewProps = {
+  loginForm: React.ReactNode;
+  socialButtons: React.ReactNode;
+};
+
+type MobileLoginViewProps = DesktopLoginViewProps & {
+  handleBack: () => void;
+};
+
+const DesktopLoginView = ({ loginForm, socialButtons }: DesktopLoginViewProps) => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <div className="grid min-h-[calc(100vh-64px)] items-center gap-8 xl:grid-cols-[minmax(360px,440px)_minmax(420px,520px)] xl:justify-center">
+      <aside className="rounded-lg border border-k-100 bg-white p-8">
         <Link href="/" aria-label="홈으로 이동">
           <IconSolidConnectionFullBlackLogo />
         </Link>
-      </div>
-      <div className="h-[229px] pt-[90px]">
-        <div className="text-center font-serif text-k-900 typo-sb-3">로그인</div>
-        <div className="text-center font-serif text-k-300 typo-medium-4">
-          교환학생을 위한 여정
-          <br />
-          지금 솔리드 커넥션에서 시작하세요.
+        <p className="mt-10 text-primary typo-sb-9">Solid Connection</p>
+        <h1 className="mt-3 text-k-900 typo-bold-1">교환학생 여정을 이어가세요</h1>
+        <p className="mt-4 text-k-500 typo-medium-2">
+          학교 탐색부터 지원 준비, 멘토링과 커뮤니티까지 한 계정에서 관리할 수 있습니다.
+        </p>
+        <div className="mt-8 grid gap-3">
+          {["관심 학교 저장", "지원 정보 관리", "멘토링 채팅"].map((item) => (
+            <div key={item} className="rounded-lg bg-k-50 px-4 py-3 text-k-700 typo-medium-2">
+              {item}
+            </div>
+          ))}
         </div>
-      </div>
+      </aside>
 
-      {loginForm}
-      {socialButtons}
+      <section className="rounded-lg border border-k-100 bg-white p-8">
+        <div>
+          <p className="text-primary typo-sb-9">Login</p>
+          <h2 className="mt-2 font-serif text-k-900 typo-bold-1">로그인</h2>
+          <p className="mt-2 text-k-500 typo-medium-2">교환학생을 위한 여정을 지금 시작하세요.</p>
+        </div>
+
+        <div className="mt-8">
+          {loginForm}
+          {socialButtons}
+        </div>
+      </section>
     </div>
-  );
-};
+  </div>
+);
+
+const MobileLoginView = ({ loginForm, socialButtons, handleBack }: MobileLoginViewProps) => (
+  <div>
+    <div className="-mx-5 mt-[-56px] flex h-[77px] items-center gap-3 border-b border-bg-200 px-5">
+      <button
+        type="button"
+        onClick={handleBack}
+        className="flex h-6 w-6 shrink-0 items-center justify-center"
+        aria-label="뒤로가기"
+      >
+        <IconArrowBackFilled />
+      </button>
+      <Link href="/" aria-label="홈으로 이동">
+        <IconSolidConnectionFullBlackLogo />
+      </Link>
+    </div>
+    <div className="h-[229px] pt-[90px]">
+      <div className="text-center font-serif text-k-900 typo-sb-3">로그인</div>
+      <div className="text-center font-serif text-k-300 typo-medium-4">
+        교환학생을 위한 여정
+        <br />
+        지금 솔리드 커넥션에서 시작하세요.
+      </div>
+    </div>
+
+    {loginForm}
+    {socialButtons}
+  </div>
+);
 
 export default LoginContent;
diff --git a/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx b/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx
index 738030b9b..76fc4c38c 100644
--- a/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx
+++ b/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx
@@ -61,107 +61,141 @@ const MentorDetialContent = ({ mentorId }: MentorDetailContentProps) => {
     </>
   );
 
-  if (isDesktop) {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <header className="mb-8">
-          <p className="text-primary typo-sb-9">Mentor</p>
-          <h1 className="mt-2 text-k-900 typo-bold-1">멘토 상세</h1>
-          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
-            멘토의 파견 경험과 아티클을 확인하고 멘토링을 신청하세요.
-          </p>
-        </header>
-
-        <div className="grid items-start gap-8 xl:grid-cols-[minmax(320px,420px)_minmax(0,1fr)]">
-          <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
-            {profileSummary}
-
-            <div className="my-6 h-px bg-k-100" />
-
-            <h2 className="mb-3 text-secondary typo-sb-7">멘토 채널</h2>
-            <ChannelLinks channels={channels} />
-
-            <button
-              type="button"
-              onClick={handleApplyMentoring}
-              disabled={isApplied}
-              className={getApplyButtonClassName(isApplied, "mt-6")}
-            >
-              멘토 신청하기
-            </button>
-          </aside>
-
-          <main className="grid gap-5">
-            <DesktopInfoPanel title="멘토 한마디">
-              <p className="whitespace-pre-wrap text-k-700 typo-regular-2">{introduction}</p>
-            </DesktopInfoPanel>
-
-            <DesktopInfoPanel title="합격 레시피">
-              <p className="whitespace-pre-wrap text-k-700 typo-regular-2">{passTip || "정보가 없습니다."}</p>
-            </DesktopInfoPanel>
-
-            <DesktopInfoPanel title="멘토의 아티클">
-              <div className="grid gap-5 lg:grid-cols-2">
-                {articleList.map((article) => (
-                  <MentorArticle key={article.title} article={article} mentorId={mentorId} />
-                ))}
-              </div>
-              {articleList.length === 0 && <p className="text-k-500 typo-regular-2">정보가 없습니다.</p>}
-            </DesktopInfoPanel>
-          </main>
-        </div>
-      </div>
-    );
-  }
+  const viewProps: MentorDetailViewProps = {
+    mentorId,
+    articleList,
+    channels,
+    profileSummary,
+    introduction,
+    passTip,
+    isApplied,
+    handleApplyMentoring,
+  };
 
-  return (
-    <>
-      {/* 멘토 프로필 섹션 */}
-      <div className="mt-2 flex">{profileSummary}</div>
-      <hr className="mb-[30px] mt-[30px]" />
+  return isDesktop ? <DesktopMentorDetailView {...viewProps} /> : <MobileMentorDetailView {...viewProps} />;
+};
 
-      {/* 멘토 한마디 */}
-      <h3 className="mb-2 text-secondary typo-regular-1">멘토 한마디</h3>
-      <p className="mb-7 text-k-500 typo-regular-2">{introduction}</p>
+type MentorDetailViewProps = {
+  mentorId: number;
+  articleList: NonNullable<ReturnType<typeof useGetArticleList>["data"]>;
+  channels: Array<{ type: ChannelType; url: string }>;
+  profileSummary: ReactNode;
+  introduction: string;
+  passTip?: string | null;
+  isApplied: boolean;
+  handleApplyMentoring: () => void;
+};
 
-      {/* 멘토 채널 */}
-      <h3 className="mb-2 text-secondary typo-regular-1">멘토 채널</h3>
-      <div className="mb-7">
+const DesktopMentorDetailView = ({
+  mentorId,
+  articleList,
+  channels,
+  profileSummary,
+  introduction,
+  passTip,
+  isApplied,
+  handleApplyMentoring,
+}: MentorDetailViewProps) => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <header className="mb-8">
+      <p className="text-primary typo-sb-9">Mentor</p>
+      <h1 className="mt-2 text-k-900 typo-bold-1">멘토 상세</h1>
+      <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+        멘토의 파견 경험과 아티클을 확인하고 멘토링을 신청하세요.
+      </p>
+    </header>
+
+    <div className="grid items-start gap-8 xl:grid-cols-[minmax(320px,420px)_minmax(0,1fr)]">
+      <aside className="sticky top-8 rounded-lg border border-k-100 bg-white p-6">
+        {profileSummary}
+
+        <div className="my-6 h-px bg-k-100" />
+
+        <h2 className="mb-3 text-secondary typo-sb-7">멘토 채널</h2>
         <ChannelLinks channels={channels} />
-      </div>
 
-      {/* 합격 레시피 */}
-      <h3 className="mb-2 text-secondary typo-regular-1">합격 레시피</h3>
-      {passTip ? (
-        <p className="mb-7 text-k-500 typo-regular-2">{passTip}</p>
-      ) : (
-        // TODO: passTip 없을 때 처리 필요
-        <p className="mb-7 text-k-500 typo-regular-2">정보가 없습니다.</p>
-      )}
-
-      {/* 멘토의 아티클 */}
-      <h3 className="mb-2 text-secondary typo-regular-1">멘토의 아티클</h3>
-      <div className="mb-6 space-y-4">
-        {articleList.map((article) => (
-          <MentorArticle key={article.title} article={article} mentorId={mentorId} />
-        ))}
-        {articleList.length === 0 && <p className="mb-7 text-k-500 typo-regular-2">정보가 없습니다.</p>}
-      </div>
-      <div className="pointer-events-none fixed bottom-20 left-1/2 flex w-full -translate-x-1/2 justify-center">
-        <div className="pointer-events-auto w-1/2 max-w-md px-4">
-          <button
-            type="button"
-            onClick={handleApplyMentoring}
-            disabled={isApplied}
-            className={getApplyButtonClassName(isApplied)}
-          >
-            {"멘토 신청하기"}
-          </button>
-        </div>
+        <button
+          type="button"
+          onClick={handleApplyMentoring}
+          disabled={isApplied}
+          className={getApplyButtonClassName(isApplied, "mt-6")}
+        >
+          멘토 신청하기
+        </button>
+      </aside>
+
+      <main className="grid gap-5">
+        <DesktopInfoPanel title="멘토 한마디">
+          <p className="whitespace-pre-wrap text-k-700 typo-regular-2">{introduction}</p>
+        </DesktopInfoPanel>
+
+        <DesktopInfoPanel title="합격 레시피">
+          <p className="whitespace-pre-wrap text-k-700 typo-regular-2">{passTip || "정보가 없습니다."}</p>
+        </DesktopInfoPanel>
+
+        <DesktopInfoPanel title="멘토의 아티클">
+          <div className="grid gap-5 lg:grid-cols-2">
+            {articleList.map((article) => (
+              <MentorArticle key={article.title} article={article} mentorId={mentorId} />
+            ))}
+          </div>
+          {articleList.length === 0 && <p className="text-k-500 typo-regular-2">정보가 없습니다.</p>}
+        </DesktopInfoPanel>
+      </main>
+    </div>
+  </div>
+);
+
+const MobileMentorDetailView = ({
+  mentorId,
+  articleList,
+  channels,
+  profileSummary,
+  introduction,
+  passTip,
+  isApplied,
+  handleApplyMentoring,
+}: MentorDetailViewProps) => (
+  <>
+    <div className="mt-2 flex">{profileSummary}</div>
+    <hr className="mb-[30px] mt-[30px]" />
+
+    <h3 className="mb-2 text-secondary typo-regular-1">멘토 한마디</h3>
+    <p className="mb-7 text-k-500 typo-regular-2">{introduction}</p>
+
+    <h3 className="mb-2 text-secondary typo-regular-1">멘토 채널</h3>
+    <div className="mb-7">
+      <ChannelLinks channels={channels} />
+    </div>
+
+    <h3 className="mb-2 text-secondary typo-regular-1">합격 레시피</h3>
+    {passTip ? (
+      <p className="mb-7 text-k-500 typo-regular-2">{passTip}</p>
+    ) : (
+      <p className="mb-7 text-k-500 typo-regular-2">정보가 없습니다.</p>
+    )}
+
+    <h3 className="mb-2 text-secondary typo-regular-1">멘토의 아티클</h3>
+    <div className="mb-6 space-y-4">
+      {articleList.map((article) => (
+        <MentorArticle key={article.title} article={article} mentorId={mentorId} />
+      ))}
+      {articleList.length === 0 && <p className="mb-7 text-k-500 typo-regular-2">정보가 없습니다.</p>}
+    </div>
+    <div className="pointer-events-none fixed bottom-20 left-1/2 flex w-full -translate-x-1/2 justify-center">
+      <div className="pointer-events-auto w-1/2 max-w-md px-4">
+        <button
+          type="button"
+          onClick={handleApplyMentoring}
+          disabled={isApplied}
+          className={getApplyButtonClassName(isApplied)}
+        >
+          멘토 신청하기
+        </button>
       </div>
-    </>
-  );
-};
+    </div>
+  </>
+);
 
 const getApplyButtonClassName = (isApplied: boolean, className?: string) =>
   clsx(
diff --git a/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx b/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx
index bc0bf7e62..38957d90b 100644
--- a/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx
+++ b/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx
@@ -19,125 +19,149 @@ const ModifyContent = () => {
   const isDesktop = useIsDesktopViewport();
 
   const method = useModifyHookForm(myMentorProfile);
+  const { onSubmit } = usePutMyMentorProfileHandler();
+
+  if (!myMentorProfile || isDesktop === null) return <CloudSpinnerPage />;
+
+  const viewProps: ModifyContentViewProps = {
+    method,
+    onSubmit,
+    myMentorProfile,
+    articleList,
+  };
+
+  return isDesktop ? <ModifyDesktopView {...viewProps} /> : <ModifyMobileView {...viewProps} />;
+};
+
+type ModifyContentViewProps = {
+  method: ReturnType<typeof useModifyHookForm>;
+  onSubmit: ReturnType<typeof usePutMyMentorProfileHandler>["onSubmit"];
+  myMentorProfile: NonNullable<ReturnType<typeof useGetMentorMyProfile>["data"]>;
+  articleList: NonNullable<ReturnType<typeof useGetArticleList>["data"]>;
+};
+
+const ModifyDesktopView = ({ method, onSubmit, myMentorProfile, articleList }: ModifyContentViewProps) => {
   const {
     handleSubmit,
     formState: { errors },
     register,
   } = method;
-
-  const { onSubmit } = usePutMyMentorProfileHandler();
-  // 채널 타입들을 감시
-  if (!myMentorProfile || isDesktop === null) return <CloudSpinnerPage />;
   const { profileImageUrl, hasBadge, nickname, country, universityName, term, channels } = myMentorProfile;
 
-  if (isDesktop) {
-    return (
-      <FormProvider {...method}>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-            <header className="mb-8">
-              <p className="text-primary typo-sb-9">Mentor</p>
-              <h1 className="mt-2 text-k-900 typo-bold-1">멘토 정보 수정</h1>
-              <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
-                멘토 채널과 소개, 아티클을 정리해서 멘티에게 보여줄 프로필을 관리하세요.
-              </p>
-            </header>
-
-            <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(320px,380px)]">
-              <main className="grid gap-6">
-                <section className="rounded-lg border border-k-100 bg-white p-6">
-                  <h2 className="text-primary-1 typo-sb-5">내 채널 관리</h2>
-                  <div className="mt-2.5 grid gap-3">
-                    <ChannelBox channels={channels} />
-                  </div>
-                </section>
-
-                <section className="rounded-lg border border-k-100 bg-white p-6">
-                  <h2 className="text-primary-1 typo-sb-5">멘토 소개</h2>
-                  <div className="mt-5 grid gap-5 lg:grid-cols-2">
-                    <div>
-                      <label htmlFor="mentor-introduction" className="text-k-900 typo-sb-7">
-                        멘토 한마디
-                      </label>
-                      <textarea
-                        id="mentor-introduction"
-                        {...register("introduction")}
-                        className="mt-2.5 h-40 w-full rounded-lg bg-k-50 p-5 text-k-900 placeholder:text-k-300 typo-regular-2"
-                        placeholder="최대 200자 이내"
-                        maxLength={200}
-                      />
-                      {errors.introduction && (
-                        <p className="mt-1 text-red-500 typo-regular-2">
-                          {typeof errors.introduction === "object" && errors.introduction.message
-                            ? errors.introduction.message
-                            : "멘토 한마디를 입력해주세요"}
-                        </p>
-                      )}
-                    </div>
-                    <div>
-                      <label htmlFor="mentor-pass-tip" className="text-k-900 typo-sb-7">
-                        합격 레시피
-                      </label>
-                      <textarea
-                        id="mentor-pass-tip"
-                        {...register("passTip")}
-                        className="mt-2.5 h-40 w-full rounded-lg bg-k-50 p-5 text-k-900 placeholder:text-k-300 typo-regular-2"
-                        placeholder="최대 200자 이내"
-                        maxLength={200}
-                      />
-                      {errors.passTip && (
-                        <p className="mt-1 text-red-500 typo-regular-2">
-                          {typeof errors.passTip === "object" && errors.passTip.message
-                            ? errors.passTip.message
-                            : "합격 레시피를 입력해주세요"}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </section>
+  return (
+    <FormProvider {...method}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+          <header className="mb-8">
+            <p className="text-primary typo-sb-9">Mentor</p>
+            <h1 className="mt-2 text-k-900 typo-bold-1">멘토 정보 수정</h1>
+            <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+              멘토 채널과 소개, 아티클을 정리해서 멘티에게 보여줄 프로필을 관리하세요.
+            </p>
+          </header>
 
-                <section className="rounded-lg border border-k-100 bg-white p-6">
-                  <h2 className="text-primary-1 typo-sb-5">멘토 아티클</h2>
-                  <div className="mt-2.5">
-                    <AddArticleCard />
+          <div className="grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(320px,380px)]">
+            <main className="grid gap-6">
+              <section className="rounded-lg border border-k-100 bg-white p-6">
+                <h2 className="text-primary-1 typo-sb-5">내 채널 관리</h2>
+                <div className="mt-2.5 grid gap-3">
+                  <ChannelBox channels={channels} />
+                </div>
+              </section>
+
+              <section className="rounded-lg border border-k-100 bg-white p-6">
+                <h2 className="text-primary-1 typo-sb-5">멘토 소개</h2>
+                <div className="mt-5 grid gap-5 lg:grid-cols-2">
+                  <div>
+                    <label htmlFor="mentor-introduction" className="text-k-900 typo-sb-7">
+                      멘토 한마디
+                    </label>
+                    <textarea
+                      id="mentor-introduction"
+                      {...register("introduction")}
+                      className="mt-2.5 h-40 w-full rounded-lg bg-k-50 p-5 text-k-900 placeholder:text-k-300 typo-regular-2"
+                      placeholder="최대 200자 이내"
+                      maxLength={200}
+                    />
+                    {errors.introduction && (
+                      <p className="mt-1 text-red-500 typo-regular-2">
+                        {typeof errors.introduction === "object" && errors.introduction.message
+                          ? errors.introduction.message
+                          : "멘토 한마디를 입력해주세요"}
+                      </p>
+                    )}
                   </div>
-                  <div className="mt-6 grid gap-6 lg:grid-cols-2">
-                    {articleList.map((article) => (
-                      <ArticlePanel key={article.title} userId={myMentorProfile.id} article={article} />
-                    ))}
+                  <div>
+                    <label htmlFor="mentor-pass-tip" className="text-k-900 typo-sb-7">
+                      합격 레시피
+                    </label>
+                    <textarea
+                      id="mentor-pass-tip"
+                      {...register("passTip")}
+                      className="mt-2.5 h-40 w-full rounded-lg bg-k-50 p-5 text-k-900 placeholder:text-k-300 typo-regular-2"
+                      placeholder="최대 200자 이내"
+                      maxLength={200}
+                    />
+                    {errors.passTip && (
+                      <p className="mt-1 text-red-500 typo-regular-2">
+                        {typeof errors.passTip === "object" && errors.passTip.message
+                          ? errors.passTip.message
+                          : "합격 레시피를 입력해주세요"}
+                      </p>
+                    )}
                   </div>
-                </section>
-              </main>
-
-              <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 flex items-start gap-4">
-                  <MentoProfile profileImageUrl={profileImageUrl} hasBadge={hasBadge} />
-                  <div className="min-w-0">
-                    <div className="text-primary typo-sb-7">{country}</div>
-                    <div className="mt-1 text-gray-900 typo-sb-5">{nickname}</div>
-                    <div className="mt-1 text-gray-500 typo-regular-2">{universityName}</div>
-                    <div className="mt-2">
-                      <StudyDate term={term} />
-                    </div>
+                </div>
+              </section>
+
+              <section className="rounded-lg border border-k-100 bg-white p-6">
+                <h2 className="text-primary-1 typo-sb-5">멘토 아티클</h2>
+                <div className="mt-2.5">
+                  <AddArticleCard />
+                </div>
+                <div className="mt-6 grid gap-6 lg:grid-cols-2">
+                  {articleList.map((article) => (
+                    <ArticlePanel key={article.title} userId={myMentorProfile.id} article={article} />
+                  ))}
+                </div>
+              </section>
+            </main>
+
+            <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 flex items-start gap-4">
+                <MentoProfile profileImageUrl={profileImageUrl} hasBadge={hasBadge} />
+                <div className="min-w-0">
+                  <div className="text-primary typo-sb-7">{country}</div>
+                  <div className="mt-1 text-gray-900 typo-sb-5">{nickname}</div>
+                  <div className="mt-1 text-gray-500 typo-regular-2">{universityName}</div>
+                  <div className="mt-2">
+                    <StudyDate term={term} />
                   </div>
                 </div>
-                <button type="submit" className="mt-6 h-10 w-full rounded-3xl bg-primary-1 px-5 py-2.5 text-k-0">
-                  수정하기
-                </button>
-              </aside>
-            </div>
+              </div>
+              <button type="submit" className="mt-6 h-10 w-full rounded-3xl bg-primary-1 px-5 py-2.5 text-k-0">
+                수정하기
+              </button>
+            </aside>
           </div>
-        </form>
-      </FormProvider>
-    );
-  }
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+const ModifyMobileView = ({ method, onSubmit, myMentorProfile, articleList }: ModifyContentViewProps) => {
+  const {
+    handleSubmit,
+    formState: { errors },
+    register,
+  } = method;
+  const { profileImageUrl, hasBadge, nickname, country, universityName, term, channels } = myMentorProfile;
 
   return (
     <div className="px-5">
       <FormProvider {...method}>
         <form onSubmit={handleSubmit(onSubmit)}>
-          {/* Profile Header */}
           <div className="gap-4">
             <h1 className="text-gray-900 typo-sb-5">나의 멘토</h1>
             <div className="flex gap-4">
@@ -155,7 +179,6 @@ const ModifyContent = () => {
           <div className="mt-10 pb-36">
             <h2 className="mb-2.5 text-primary-1 typo-sb-5">내 채널 관리</h2>
             <ChannelBox channels={channels} />
-            {/* 4개의 고정된 채널 입력 필드 */}
             <h2 className="mt-10 text-primary-1 typo-sb-5">멘토 한마디</h2>
             <textarea
               {...register("introduction")}
@@ -185,7 +208,6 @@ const ModifyContent = () => {
               </p>
             )}{" "}
             <h2 className="mt-10 text-primary-1 typo-sb-5">멘토 아티클</h2>
-            {/* 새 아티클 추가 버튼 */}
             <div className="mb-6">
               <AddArticleCard />
             </div>
diff --git a/apps/web/src/app/mentor/waiting/_ui/WaitingContent/index.tsx b/apps/web/src/app/mentor/waiting/_ui/WaitingContent/index.tsx
index 9b55d3e91..4c7862833 100644
--- a/apps/web/src/app/mentor/waiting/_ui/WaitingContent/index.tsx
+++ b/apps/web/src/app/mentor/waiting/_ui/WaitingContent/index.tsx
@@ -19,124 +19,136 @@ const WaitingContent = () => {
 
   if (isDesktop === null) return null;
 
-  if (isDesktop) {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <header className="mb-8">
-          <p className="text-primary typo-sb-9">Mentor</p>
-          <h1 className="mt-2 text-k-900 typo-bold-1">멘토링 신청 목록</h1>
-          <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
-            수락된 멘토링과 아직 대기 중인 신청을 한 화면에서 확인하세요.
-          </p>
-        </header>
+  const viewProps = {
+    approveList,
+    pendingList,
+    totalLength,
+  };
 
-        <div className="grid items-start gap-8 xl:grid-cols-2">
-          <section className="rounded-lg border border-k-100 bg-white p-6">
-            <DesktopListHeader title="수락 완료" count={approveList.length} />
-            <div className="mt-5 grid gap-3">
-              {approveList.length === 0 ? (
-                <EmptySdwBCards message="신규 매칭된 멘토가 없어요." />
-              ) : (
-                approveList.map((item) => (
-                  <MentorExpandChatCard
-                    key={item.mentoringId}
-                    isChecked={item.isChecked}
-                    mentoringId={item.mentoringId}
-                    profileImageUrl={item.profileImageUrl}
-                    nickname={item.nickname}
-                    message="멘토가 멘티 신청을 수락했어요."
-                    date={item.createdAt}
-                  />
-                ))
-              )}
-            </div>
-          </section>
+  return isDesktop ? <DesktopWaitingView {...viewProps} /> : <MobileWaitingView {...viewProps} />;
+};
 
-          <section className="rounded-lg border border-k-100 bg-white p-6">
-            <DesktopListHeader title="수락 대기중" count={pendingList.length} />
-            <div className="mt-5 grid gap-3">
-              {pendingList.length === 0 ? (
-                <EmptySdwBCards message="멘토 신청 내역이 없습니다." />
-              ) : (
-                pendingList.map((item) => (
-                  <MentorChatCard
-                    key={item.mentoringId}
-                    profileImageUrl={item.profileImageUrl}
-                    nickname={item.nickname}
-                    description="멘토에게 멘티 신청을 보냈어요."
-                  />
-                ))
-              )}
-            </div>
-          </section>
+type WaitingViewProps = {
+  approveList: NonNullable<ReturnType<typeof useGetApplyMentoringList>["data"]>;
+  pendingList: NonNullable<ReturnType<typeof useGetApplyMentoringList>["data"]>;
+  totalLength: number;
+};
+
+const DesktopWaitingView = ({ approveList, pendingList }: WaitingViewProps) => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <header className="mb-8">
+      <p className="text-primary typo-sb-9">Mentor</p>
+      <h1 className="mt-2 text-k-900 typo-bold-1">멘토링 신청 목록</h1>
+      <p className="mt-2 max-w-2xl text-k-500 typo-medium-2">
+        수락된 멘토링과 아직 대기 중인 신청을 한 화면에서 확인하세요.
+      </p>
+    </header>
+
+    <div className="grid items-start gap-8 xl:grid-cols-2">
+      <section className="rounded-lg border border-k-100 bg-white p-6">
+        <DesktopListHeader title="수락 완료" count={approveList.length} />
+        <div className="mt-5 grid gap-3">
+          {approveList.length === 0 ? (
+            <EmptySdwBCards message="신규 매칭된 멘토가 없어요." />
+          ) : (
+            approveList.map((item) => (
+              <MentorExpandChatCard
+                key={item.mentoringId}
+                isChecked={item.isChecked}
+                mentoringId={item.mentoringId}
+                profileImageUrl={item.profileImageUrl}
+                nickname={item.nickname}
+                message="멘토가 멘티 신청을 수락했어요."
+                date={item.createdAt}
+              />
+            ))
+          )}
         </div>
-      </div>
-    );
-  }
+      </section>
 
-  return (
-    <div className="flex h-full w-full flex-col">
-      <div className="mb-3 mt-5 flex justify-between px-5">
-        <div className="flex items-center">
-          <h2 className="mr-2 text-k-900 typo-sb-5">대기 중인 멘토링</h2>
-          {totalLength > DEFAULT_VISIBLE_ITEMS && (
-            <span className="rounded-2xl bg-primary-1 px-2 text-k-0">{totalLength - DEFAULT_VISIBLE_ITEMS}+</span>
+      <section className="rounded-lg border border-k-100 bg-white p-6">
+        <DesktopListHeader title="수락 대기중" count={pendingList.length} />
+        <div className="mt-5 grid gap-3">
+          {pendingList.length === 0 ? (
+            <EmptySdwBCards message="멘토 신청 내역이 없습니다." />
+          ) : (
+            pendingList.map((item) => (
+              <MentorChatCard
+                key={item.mentoringId}
+                profileImageUrl={item.profileImageUrl}
+                nickname={item.nickname}
+                description="멘토에게 멘티 신청을 보냈어요."
+              />
+            ))
           )}
         </div>
+      </section>
+    </div>
+  </div>
+);
+
+const MobileWaitingView = ({ approveList, pendingList, totalLength }: WaitingViewProps) => (
+  <div className="flex h-full w-full flex-col">
+    <div className="mb-3 mt-5 flex justify-between px-5">
+      <div className="flex items-center">
+        <h2 className="mr-2 text-k-900 typo-sb-5">대기 중인 멘토링</h2>
+        {totalLength > DEFAULT_VISIBLE_ITEMS && (
+          <span className="rounded-2xl bg-primary-1 px-2 text-k-0">{totalLength - DEFAULT_VISIBLE_ITEMS}+</span>
+        )}
       </div>
-      <MentorWaitingListBox hasExpand={approveList.length > DEFAULT_VISIBLE_ITEMS} className="mx-5 mt-2">
-        {({ isExpanded }) => (
+    </div>
+    <MentorWaitingListBox hasExpand={approveList.length > DEFAULT_VISIBLE_ITEMS} className="mx-5 mt-2">
+      {({ isExpanded }) => (
+        <div className="space-y-2">
+          <h3 className="mt-3 px-5 text-k-900 typo-sb-5">수락 완료</h3>
           <div className="space-y-2">
-            <h3 className="mt-3 px-5 text-k-900 typo-sb-5">수락 완료</h3>
-            <div className="space-y-2">
-              {approveList.length === 0 ? (
-                <div className="px-4 py-3">
-                  <EmptySdwBCards message="신규 매칭된 멘토가 없어요." />
-                </div>
-              ) : (
-                (isExpanded ? approveList : approveList.slice(0, DEFAULT_VISIBLE_ITEMS)).map((item) => (
-                  <MentorExpandChatCard
-                    key={item.mentoringId}
-                    isChecked={item.isChecked}
-                    mentoringId={item.mentoringId}
-                    profileImageUrl={item.profileImageUrl}
-                    nickname={item.nickname}
-                    message="멘토가 멘티 신청을 수락했어요."
-                    date={item.createdAt}
-                  />
-                ))
-              )}
-            </div>
+            {approveList.length === 0 ? (
+              <div className="px-4 py-3">
+                <EmptySdwBCards message="신규 매칭된 멘토가 없어요." />
+              </div>
+            ) : (
+              (isExpanded ? approveList : approveList.slice(0, DEFAULT_VISIBLE_ITEMS)).map((item) => (
+                <MentorExpandChatCard
+                  key={item.mentoringId}
+                  isChecked={item.isChecked}
+                  mentoringId={item.mentoringId}
+                  profileImageUrl={item.profileImageUrl}
+                  nickname={item.nickname}
+                  message="멘토가 멘티 신청을 수락했어요."
+                  date={item.createdAt}
+                />
+              ))
+            )}
           </div>
-        )}
-      </MentorWaitingListBox>
+        </div>
+      )}
+    </MentorWaitingListBox>
 
-      <MentorWaitingListBox hasExpand={pendingList.length > DEFAULT_VISIBLE_ITEMS} className="mx-5 mt-2">
-        {({ isExpanded }) => (
+    <MentorWaitingListBox hasExpand={pendingList.length > DEFAULT_VISIBLE_ITEMS} className="mx-5 mt-2">
+      {({ isExpanded }) => (
+        <div className="space-y-2">
+          <h3 className="mt-3 px-5 text-k-900 typo-sb-5">수락 대기중</h3>
           <div className="space-y-2">
-            <h3 className="mt-3 px-5 text-k-900 typo-sb-5">수락 대기중</h3>
-            <div className="space-y-2">
-              {pendingList.length === 0 ? (
-                <div className="px-4 py-3">
-                  <EmptySdwBCards message="멘토 신청 내역이 없습니다." />
-                </div>
-              ) : (
-                (isExpanded ? pendingList : pendingList.slice(0, DEFAULT_VISIBLE_ITEMS)).map((item) => (
-                  <MentorChatCard
-                    key={item.mentoringId}
-                    profileImageUrl={item.profileImageUrl}
-                    nickname={item.nickname}
-                    description="멘토에게 멘티 신청을 보냈어요."
-                  />
-                ))
-              )}
-            </div>
+            {pendingList.length === 0 ? (
+              <div className="px-4 py-3">
+                <EmptySdwBCards message="멘토 신청 내역이 없습니다." />
+              </div>
+            ) : (
+              (isExpanded ? pendingList : pendingList.slice(0, DEFAULT_VISIBLE_ITEMS)).map((item) => (
+                <MentorChatCard
+                  key={item.mentoringId}
+                  profileImageUrl={item.profileImageUrl}
+                  nickname={item.nickname}
+                  description="멘토에게 멘티 신청을 보냈어요."
+                />
+              ))
+            )}
           </div>
-        )}
-      </MentorWaitingListBox>
-    </div>
-  );
-};
+        </div>
+      )}
+    </MentorWaitingListBox>
+  </div>
+);
 
 const DesktopListHeader = ({ title, count }: { title: string; count: number }) => (
   <div className="flex items-center justify-between">
diff --git a/apps/web/src/app/my/school-email/_ui/SchoolEmailVerificationContent/index.tsx b/apps/web/src/app/my/school-email/_ui/SchoolEmailVerificationContent/index.tsx
index 9f2201ff6..8a23db4ee 100644
--- a/apps/web/src/app/my/school-email/_ui/SchoolEmailVerificationContent/index.tsx
+++ b/apps/web/src/app/my/school-email/_ui/SchoolEmailVerificationContent/index.tsx
@@ -119,252 +119,264 @@ const SchoolEmailVerificationContent = () => {
   };
 
   if (step === "done") {
-    if (isDesktop) {
-      return (
-        <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-          <header className="mb-8">
-            <p className="text-primary typo-sb-9">My Solid</p>
-            <h1 className="mt-2 text-k-900 typo-bold-1">학교 인증</h1>
-            <p className="mt-2 text-k-500 typo-medium-2">학교 이메일 인증이 완료되었습니다.</p>
-          </header>
-
-          <section className="flex min-h-[520px] flex-col items-center justify-center rounded-lg border border-k-100 bg-white p-8 text-center">
-            <div className="mb-6 flex h-[120px] w-[120px] items-center justify-center rounded-full border-[10px] border-secondary">
-              <div className="h-10 w-16 -rotate-45 border-b-[10px] border-l-[10px] border-secondary" />
-            </div>
-            <h2 className="text-k-800 typo-bold-1">
-              학교 인증이 <span className="text-secondary">완료</span>되었어요!
-            </h2>
-            <p className="mt-3 text-k-500 typo-medium-2">
-              인증된 학교 정보를 기반으로 솔리드 커넥션을 이용할 수 있어요.
-            </p>
-            <div className="mt-10 w-full max-w-sm">
-              <BlockBtn onClick={() => router.replace("/")}>홈으로</BlockBtn>
-            </div>
-          </section>
-        </div>
-      );
-    }
-
-    return (
-      <div className="flex min-h-[calc(100dvh-3.5rem)] flex-col px-5">
-        <div className="flex flex-1 flex-col items-center justify-center pb-24 text-center">
-          <div className="mb-6 flex h-[120px] w-[120px] items-center justify-center rounded-full border-[10px] border-secondary">
-            <div className="h-10 w-16 -rotate-45 border-b-[10px] border-l-[10px] border-secondary" />
-          </div>
-          <h1 className="text-center text-k-800 typo-bold-3">
-            학교 인증이
-            <br />
-            <span className="text-secondary">완료</span>되었어요!
-          </h1>
-        </div>
-
-        <div className="fixed bottom-14 left-0 right-0 w-full bg-white">
-          <div className="mx-auto mb-[37px] w-full max-w-app px-5">
-            <BlockBtn onClick={() => router.replace("/")}>홈으로</BlockBtn>
-          </div>
-        </div>
-      </div>
+    const doneViewProps = {
+      onHomeClick: () => router.replace("/"),
+    };
+
+    return isDesktop ? (
+      <DesktopSchoolEmailDoneView {...doneViewProps} />
+    ) : (
+      <MobileSchoolEmailDoneView {...doneViewProps} />
     );
   }
 
-  if (isDesktop) {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <header className="mb-8">
-          <p className="text-primary typo-sb-9">My Solid</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(420px,640px)_minmax(280px,360px)]">
-          <section className="rounded-lg border border-k-100 bg-white p-6">
-            <Progress value={progressValue} showPercentage={false} />
-
-            <div className="mt-8">
-              <h2 className="text-k-900 typo-bold-2">
-                {step === "email" ? "학교 이메일을 통해" : "이메일로 발송한"}
-                <br />
-                {step === "email" ? "학교 인증을 진행해주세요" : "인증번호를 입력해주세요"}
-              </h2>
-            </div>
-
-            <div className="mt-8 flex flex-col gap-5">
-              <div>
-                <Label htmlFor="desktopSchoolEmail" className="text-k-900">
-                  학교 이메일
-                </Label>
-                <Input
-                  id="desktopSchoolEmail"
-                  variant="gray"
-                  placeholder="ID@example.com"
-                  type="email"
-                  autoComplete="email"
-                  value={schoolEmail}
-                  disabled={step === "code"}
-                  onChange={(event) => {
-                    setSchoolEmail(event.target.value);
-                    setEmailErrorMessage("");
-                  }}
-                />
-                {emailErrorMessage && renderErrorMessage(emailErrorMessage)}
-              </div>
-
-              {step === "code" && (
-                <div>
-                  <Label htmlFor="desktopVerificationCode" className="text-k-900">
-                    인증번호
-                  </Label>
-                  <div className="relative">
-                    <Input
-                      id="desktopVerificationCode"
-                      variant="gray"
-                      placeholder="인증번호 6자리 입력"
-                      inputMode="numeric"
-                      autoComplete="one-time-code"
-                      value={code}
-                      onChange={handleCodeChange}
-                    />
-                    <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-primary typo-medium-4">
-                      {formatTime(remainingSeconds)}
-                    </span>
-                  </div>
-                  {codeErrorMessage && renderErrorMessage(codeErrorMessage)}
-                  <div className="mt-3 flex items-center justify-center gap-2 typo-sb-9">
-                    <span className="text-k-400">인증번호가 오지 않는다면?</span>
-                    <button
-                      type="button"
-                      onClick={sendVerificationEmail}
-                      disabled={postSchoolEmailMutation.isPending}
-                      className="text-k-700 underline disabled:text-k-300"
-                    >
-                      재발송
-                    </button>
-                  </div>
-                </div>
-              )}
-            </div>
-
-            <div className="mt-10">
-              {step === "email" ? (
-                <BlockBtn
-                  onClick={sendVerificationEmail}
-                  disabled={!isEmailInputValid || postSchoolEmailMutation.isPending}
-                >
-                  인증번호 보내기
-                </BlockBtn>
-              ) : (
-                <BlockBtn
-                  onClick={confirmVerificationCode}
-                  disabled={!isCodeInputValid || isTimerExpired || postConfirmSchoolEmailMutation.isPending}
-                >
-                  인증하기
-                </BlockBtn>
-              )}
-            </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 space-y-4 text-k-600 typo-medium-3">
-              <p>학교 도메인의 이메일 주소로 인증번호를 받을 수 있어요.</p>
-              <p>인증번호는 5분 동안 유효하며, 만료되면 다시 발송해주세요.</p>
-            </div>
-          </aside>
-        </div>
-      </div>
-    );
-  }
+  const formViewProps: SchoolEmailFormViewProps = {
+    step,
+    progressValue,
+    schoolEmail,
+    code,
+    remainingSeconds,
+    emailErrorMessage,
+    codeErrorMessage,
+    isEmailInputValid,
+    isCodeInputValid,
+    isTimerExpired,
+    isSendingEmail: postSchoolEmailMutation.isPending,
+    isConfirmingCode: postConfirmSchoolEmailMutation.isPending,
+    setSchoolEmail,
+    setEmailErrorMessage,
+    handleCodeChange,
+    sendVerificationEmail,
+    confirmVerificationCode,
+    renderErrorMessage,
+  };
 
-  return (
-    <div className="min-h-[calc(100dvh-3.5rem)] px-5 pt-10">
-      <Progress value={progressValue} showPercentage={false} className="mt-4" />
+  return isDesktop ? (
+    <DesktopSchoolEmailFormView {...formViewProps} />
+  ) : (
+    <MobileSchoolEmailFormView {...formViewProps} />
+  );
+};
+
+type SchoolEmailDoneViewProps = {
+  onHomeClick: () => void;
+};
+
+const DesktopSchoolEmailDoneView = ({ onHomeClick }: SchoolEmailDoneViewProps) => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <header className="mb-8">
+      <p className="text-primary typo-sb-9">My Solid</p>
+      <h1 className="mt-2 text-k-900 typo-bold-1">학교 인증</h1>
+      <p className="mt-2 text-k-500 typo-medium-2">학교 이메일 인증이 완료되었습니다.</p>
+    </header>
+
+    <section className="flex min-h-[520px] flex-col items-center justify-center rounded-lg border border-k-100 bg-white p-8 text-center">
+      <div className="mb-6 flex h-[120px] w-[120px] items-center justify-center rounded-full border-[10px] border-secondary">
+        <div className="h-10 w-16 -rotate-45 border-b-[10px] border-l-[10px] border-secondary" />
+      </div>
+      <h2 className="text-k-800 typo-bold-1">
+        학교 인증이 <span className="text-secondary">완료</span>되었어요!
+      </h2>
+      <p className="mt-3 text-k-500 typo-medium-2">인증된 학교 정보를 기반으로 솔리드 커넥션을 이용할 수 있어요.</p>
+      <div className="mt-10 w-full max-w-sm">
+        <BlockBtn onClick={onHomeClick}>홈으로</BlockBtn>
+      </div>
+    </section>
+  </div>
+);
+
+const MobileSchoolEmailDoneView = ({ onHomeClick }: SchoolEmailDoneViewProps) => (
+  <div className="flex min-h-[calc(100dvh-3.5rem)] flex-col px-5">
+    <div className="flex flex-1 flex-col items-center justify-center pb-24 text-center">
+      <div className="mb-6 flex h-[120px] w-[120px] items-center justify-center rounded-full border-[10px] border-secondary">
+        <div className="h-10 w-16 -rotate-45 border-b-[10px] border-l-[10px] border-secondary" />
+      </div>
+      <h1 className="text-center text-k-800 typo-bold-3">
+        학교 인증이
+        <br />
+        <span className="text-secondary">완료</span>되었어요!
+      </h1>
+    </div>
 
-      <div className="mt-10">
-        <h1 className="text-k-900 typo-bold-1">
-          {step === "email" ? "학교 이메일을 통해" : "이메일로 발송한"}
-          <br />
-          {step === "email" ? "학교 인증을 진행해주세요" : "인증번호를 입력해주세요"}
-        </h1>
+    <div className="fixed bottom-14 left-0 right-0 w-full bg-white">
+      <div className="mx-auto mb-[37px] w-full max-w-app px-5">
+        <BlockBtn onClick={onHomeClick}>홈으로</BlockBtn>
       </div>
+    </div>
+  </div>
+);
+
+type SchoolEmailFormViewProps = {
+  step: VerificationStep;
+  progressValue: number;
+  schoolEmail: string;
+  code: string;
+  remainingSeconds: number;
+  emailErrorMessage: string;
+  codeErrorMessage: string;
+  isEmailInputValid: boolean;
+  isCodeInputValid: boolean;
+  isTimerExpired: boolean;
+  isSendingEmail: boolean;
+  isConfirmingCode: boolean;
+  setSchoolEmail: (value: string) => void;
+  setEmailErrorMessage: (value: string) => void;
+  handleCodeChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  sendVerificationEmail: () => void;
+  confirmVerificationCode: () => void;
+  renderErrorMessage: (message: string) => React.ReactNode;
+};
 
-      <div className="mt-10 flex flex-col gap-5">
-        <div>
-          <Label htmlFor="schoolEmail" className="text-k-900">
-            학교 이메일
-          </Label>
+const SchoolEmailFields = ({
+  step,
+  schoolEmail,
+  code,
+  remainingSeconds,
+  emailErrorMessage,
+  codeErrorMessage,
+  isSendingEmail,
+  setSchoolEmail,
+  setEmailErrorMessage,
+  handleCodeChange,
+  sendVerificationEmail,
+  renderErrorMessage,
+  idPrefix,
+}: SchoolEmailFormViewProps & { idPrefix: "desktop" | "mobile" }) => (
+  <div className="mt-8 flex flex-col gap-5">
+    <div>
+      <Label htmlFor={`${idPrefix}SchoolEmail`} className="text-k-900">
+        학교 이메일
+      </Label>
+      <Input
+        id={`${idPrefix}SchoolEmail`}
+        variant="gray"
+        placeholder="ID@example.com"
+        type="email"
+        autoComplete="email"
+        value={schoolEmail}
+        disabled={step === "code"}
+        onChange={(event) => {
+          setSchoolEmail(event.target.value);
+          setEmailErrorMessage("");
+        }}
+      />
+      {emailErrorMessage && renderErrorMessage(emailErrorMessage)}
+    </div>
+
+    {step === "code" && (
+      <div>
+        <Label htmlFor={`${idPrefix}VerificationCode`} className="text-k-900">
+          인증번호
+        </Label>
+        <div className="relative">
           <Input
-            id="schoolEmail"
+            id={`${idPrefix}VerificationCode`}
             variant="gray"
-            placeholder="ID@example.com"
-            type="email"
-            autoComplete="email"
-            value={schoolEmail}
-            disabled={step === "code"}
-            onChange={(event) => {
-              setSchoolEmail(event.target.value);
-              setEmailErrorMessage("");
-            }}
+            placeholder="인증번호 6자리 입력"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            value={code}
+            onChange={handleCodeChange}
           />
-          {emailErrorMessage && renderErrorMessage(emailErrorMessage)}
+          <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-primary typo-medium-4">
+            {formatTime(remainingSeconds)}
+          </span>
+        </div>
+        {codeErrorMessage && renderErrorMessage(codeErrorMessage)}
+        <div className="mt-3 flex items-center justify-center gap-2 typo-sb-9">
+          <span className="text-k-400">인증번호가 오지 않는다면?</span>
+          <button
+            type="button"
+            onClick={sendVerificationEmail}
+            disabled={isSendingEmail}
+            className="text-k-700 underline disabled:text-k-300"
+          >
+            재발송
+          </button>
         </div>
-
-        {step === "code" && (
-          <div>
-            <Label htmlFor="verificationCode" className="text-k-900">
-              인증번호
-            </Label>
-            <div className="relative">
-              <Input
-                id="verificationCode"
-                variant="gray"
-                placeholder="인증번호 6자리 입력"
-                inputMode="numeric"
-                autoComplete="one-time-code"
-                value={code}
-                onChange={handleCodeChange}
-              />
-              <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-primary typo-medium-4">
-                {formatTime(remainingSeconds)}
-              </span>
-            </div>
-            {codeErrorMessage && renderErrorMessage(codeErrorMessage)}
-            <div className="mt-3 flex items-center justify-center gap-2 typo-sb-9">
-              <span className="text-k-400">인증번호가 오지 않는다면?</span>
-              <button
-                type="button"
-                onClick={sendVerificationEmail}
-                disabled={postSchoolEmailMutation.isPending}
-                className="text-k-700 underline disabled:text-k-300"
-              >
-                재발송
-              </button>
-            </div>
-          </div>
-        )}
       </div>
+    )}
+  </div>
+);
+
+const SchoolEmailActionButton = ({
+  step,
+  isEmailInputValid,
+  isCodeInputValid,
+  isTimerExpired,
+  isSendingEmail,
+  isConfirmingCode,
+  sendVerificationEmail,
+  confirmVerificationCode,
+}: SchoolEmailFormViewProps) =>
+  step === "email" ? (
+    <BlockBtn onClick={sendVerificationEmail} disabled={!isEmailInputValid || isSendingEmail}>
+      인증번호 보내기
+    </BlockBtn>
+  ) : (
+    <BlockBtn onClick={confirmVerificationCode} disabled={!isCodeInputValid || isTimerExpired || isConfirmingCode}>
+      인증하기
+    </BlockBtn>
+  );
+
+const DesktopSchoolEmailFormView = (props: SchoolEmailFormViewProps) => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <header className="mb-8">
+      <p className="text-primary typo-sb-9">My Solid</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(420px,640px)_minmax(280px,360px)]">
+      <section className="rounded-lg border border-k-100 bg-white p-6">
+        <Progress value={props.progressValue} showPercentage={false} />
+
+        <div className="mt-8">
+          <h2 className="text-k-900 typo-bold-2">
+            {props.step === "email" ? "학교 이메일을 통해" : "이메일로 발송한"}
+            <br />
+            {props.step === "email" ? "학교 인증을 진행해주세요" : "인증번호를 입력해주세요"}
+          </h2>
+        </div>
+
+        <SchoolEmailFields {...props} idPrefix="desktop" />
 
-      <div className="fixed bottom-14 left-0 right-0 w-full bg-white">
-        <div className="mx-auto mb-[37px] w-full max-w-app px-5">
-          {step === "email" ? (
-            <BlockBtn
-              onClick={sendVerificationEmail}
-              disabled={!isEmailInputValid || postSchoolEmailMutation.isPending}
-            >
-              인증번호 보내기
-            </BlockBtn>
-          ) : (
-            <BlockBtn
-              onClick={confirmVerificationCode}
-              disabled={!isCodeInputValid || isTimerExpired || postConfirmSchoolEmailMutation.isPending}
-            >
-              인증하기
-            </BlockBtn>
-          )}
+        <div className="mt-10">
+          <SchoolEmailActionButton {...props} />
         </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 space-y-4 text-k-600 typo-medium-3">
+          <p>학교 도메인의 이메일 주소로 인증번호를 받을 수 있어요.</p>
+          <p>인증번호는 5분 동안 유효하며, 만료되면 다시 발송해주세요.</p>
+        </div>
+      </aside>
+    </div>
+  </div>
+);
+
+const MobileSchoolEmailFormView = (props: SchoolEmailFormViewProps) => (
+  <div className="min-h-[calc(100dvh-3.5rem)] px-5 pt-10">
+    <Progress value={props.progressValue} showPercentage={false} className="mt-4" />
+
+    <div className="mt-10">
+      <h1 className="text-k-900 typo-bold-1">
+        {props.step === "email" ? "학교 이메일을 통해" : "이메일로 발송한"}
+        <br />
+        {props.step === "email" ? "학교 인증을 진행해주세요" : "인증번호를 입력해주세요"}
+      </h1>
+    </div>
+
+    <SchoolEmailFields {...props} idPrefix="mobile" />
+
+    <div className="fixed bottom-14 left-0 right-0 w-full bg-white">
+      <div className="mx-auto mb-[37px] w-full max-w-app px-5">
+        <SchoolEmailActionButton {...props} />
       </div>
     </div>
-  );
-};
+  </div>
+);
 
 export default SchoolEmailVerificationContent;
diff --git a/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx b/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx
index feecb3e99..45702cc55 100644
--- a/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx
+++ b/apps/web/src/app/sign-up/email/EmailSignUpForm.tsx
@@ -175,60 +175,72 @@ const EmailSignUpForm = () => {
     </BlockBtn>
   );
 
-  if (isDesktop) {
-    return (
-      <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
-        <div className="grid min-h-[calc(100vh-64px)] items-center gap-8 xl:grid-cols-[minmax(420px,520px)_minmax(300px,380px)] xl:justify-center">
-          <section className="rounded-lg border border-k-100 bg-white p-8">
-            <p className="text-primary typo-sb-9">Sign up</p>
-            <h1 className="mt-2 text-k-900 typo-bold-1">이메일로 시작하기</h1>
-            <p className="mt-2 text-k-500 typo-medium-2">이메일과 비밀번호를 입력해 솔커 계정을 만들어보세요.</p>
-
-            <Progress value={currentStep * 50} showPercentage={true} className="mt-8" />
-            {formFields}
-            <div className="mt-8">{submitButton}</div>
-          </section>
-
-          <aside className="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">
-              {["이메일 입력", "비밀번호 설정", "프로필 완성"].map((item, index) => (
-                <div
-                  key={item}
-                  className={`rounded-lg px-4 py-3 typo-medium-2 ${
-                    currentStep >= index ? "bg-primary-100 text-primary" : "bg-k-50 text-k-500"
-                  }`}
-                >
-                  {item}
-                </div>
-              ))}
+  const viewProps = {
+    currentStep,
+    formFields,
+    submitButton,
+  };
+
+  return isDesktop ? <DesktopEmailSignUpView {...viewProps} /> : <MobileEmailSignUpView {...viewProps} />;
+};
+
+type EmailSignUpViewProps = {
+  currentStep: number;
+  formFields: React.ReactNode;
+  submitButton: React.ReactNode;
+};
+
+const DesktopEmailSignUpView = ({ currentStep, formFields, submitButton }: EmailSignUpViewProps) => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <div className="grid min-h-[calc(100vh-64px)] items-center gap-8 xl:grid-cols-[minmax(420px,520px)_minmax(300px,380px)] xl:justify-center">
+      <section className="rounded-lg border border-k-100 bg-white p-8">
+        <p className="text-primary typo-sb-9">Sign up</p>
+        <h1 className="mt-2 text-k-900 typo-bold-1">이메일로 시작하기</h1>
+        <p className="mt-2 text-k-500 typo-medium-2">이메일과 비밀번호를 입력해 솔커 계정을 만들어보세요.</p>
+
+        <Progress value={currentStep * 50} showPercentage={true} className="mt-8" />
+        {formFields}
+        <div className="mt-8">{submitButton}</div>
+      </section>
+
+      <aside className="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">
+          {["이메일 입력", "비밀번호 설정", "프로필 완성"].map((item, index) => (
+            <div
+              key={item}
+              className={`rounded-lg px-4 py-3 typo-medium-2 ${
+                currentStep >= index ? "bg-primary-100 text-primary" : "bg-k-50 text-k-500"
+              }`}
+            >
+              {item}
             </div>
-          </aside>
+          ))}
         </div>
+      </aside>
+    </div>
+  </div>
+);
+
+const MobileEmailSignUpView = ({ currentStep, formFields, submitButton }: EmailSignUpViewProps) => (
+  <>
+    <div className="px-5 pt-2.5">
+      <Progress value={currentStep * 50} showPercentage={true} className="mt-4" />
+      <div className="mt-10">
+        <span className="text-k-900 typo-bold-1">
+          이메일을
+          <br />
+          입력해주세요
+        </span>
       </div>
-    );
-  }
-
-  return (
-    <>
-      <div className="px-5 pt-2.5">
-        <Progress value={currentStep * 50} showPercentage={true} className="mt-4" />
-        <div className="mt-10">
-          <span className="text-k-900 typo-bold-1">
-            이메일을
-            <br />
-            입력해주세요
-          </span>
-        </div>
 
-        {formFields}
-      </div>
+      {formFields}
+    </div>
 
-      <div className="fixed bottom-14 w-full max-w-app bg-white md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:max-w-none">
-        <div className="mb-[37px] px-5">{submitButton}</div>
-      </div>
-    </>
-  );
-};
+    <div className="fixed bottom-14 w-full max-w-app bg-white md:bottom-0 md:left-[88px] md:w-[calc(100%-88px)] md:max-w-none">
+      <div className="mb-[37px] px-5">{submitButton}</div>
+    </div>
+  </>
+);
 
 export default EmailSignUpForm;

From 9dd86788c6b1941f6dae19c5ba5cb4c175b1e901 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 13:29:59 +0900
Subject: [PATCH 19/20] =?UTF-8?q?fix:=20=EB=8C=80=ED=95=99=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20SSG=20=EC=8B=A4=ED=8C=A8=20=EC=8B=9C=20=EB=B9=8C?=
 =?UTF-8?q?=EB=93=9C=20=EC=9C=A0=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../universities/server/getSearchUniversitiesByFilter.ts | 7 ++++++-
 .../universities/server/getSearchUniversitiesByText.ts   | 9 ++++++++-
 .../src/app/university/[homeUniversity]/[id]/page.tsx    | 5 +++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/university-web/src/apis/universities/server/getSearchUniversitiesByFilter.ts b/apps/university-web/src/apis/universities/server/getSearchUniversitiesByFilter.ts
index 19c1e7077..5bbf208b0 100644
--- a/apps/university-web/src/apis/universities/server/getSearchUniversitiesByFilter.ts
+++ b/apps/university-web/src/apis/universities/server/getSearchUniversitiesByFilter.ts
@@ -89,5 +89,10 @@ export const getSearchUniversitiesAllRegions = async (
 
   const endpoint = `/univ-apply-infos/search/text?${searchParams.toString()}`;
   const response = await serverFetch<UniversitySearchResponse>(endpoint);
-  return assertUniversitySsgResponse(response, "search all universities").univApplyInfoPreviews;
+
+  if (!response.ok) {
+    return [];
+  }
+
+  return response.data.univApplyInfoPreviews;
 };
diff --git a/apps/university-web/src/apis/universities/server/getSearchUniversitiesByText.ts b/apps/university-web/src/apis/universities/server/getSearchUniversitiesByText.ts
index 89fb40497..7274f6016 100644
--- a/apps/university-web/src/apis/universities/server/getSearchUniversitiesByText.ts
+++ b/apps/university-web/src/apis/universities/server/getSearchUniversitiesByText.ts
@@ -63,7 +63,14 @@ export const getUniversitiesByText = async (
 };
 
 export const getAllUniversities = async (params?: UniversitySearchTextParams): Promise<ListUniversity[]> => {
-  return getUniversitiesByText("", params);
+  const endpoint = createSearchTextEndpoint("", params);
+  const response = await serverFetch<UniversitySearchResponse>(endpoint);
+
+  if (!response.ok) {
+    return [];
+  }
+
+  return response.data.univApplyInfoPreviews;
 };
 
 export const getCategorizedUniversities = async (
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..815689130 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx
@@ -12,8 +12,9 @@ import { createUrl, NO_INDEX_ROBOTS } from "@/utils/seo";
 import UniversityDetail from "./_ui/UniversityDetail";
 import UniversityDetailPreparingFallback from "./_ui/UniversityDetailPreparingFallback";
 
-export const revalidate = false; // 완전 정적 생성
-export const dynamicParams = false;
+export const revalidate = false; // 가능한 상세 경로는 빌드 시 정적으로 생성
+// 전체 학교 목록 API가 일시적으로 실패해도 배포가 404-only 상태가 되지 않도록 런타임 생성을 허용합니다.
+export const dynamicParams = true;
 
 // 모든 homeUniversity + id 조합에 대해 정적 경로 생성
 export async function generateStaticParams() {

From b328df962e0a49917376e6d0af099e94301e1844 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Thu, 25 Jun 2026 13:53:16 +0900
Subject: [PATCH 20/20] =?UTF-8?q?feat:=20=EB=8C=80=ED=95=99=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20=EB=B7=B0=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../server/getSearchUniversitiesByFilter.ts   |   7 +-
 .../server/getSearchUniversitiesByText.ts     |   9 +-
 .../_ui/UniversityDetail/_ui/InfoSection.tsx  |   8 +-
 .../_ui/UniversityDetail/_ui/MapSection.tsx   |  20 +-
 .../[id]/_ui/UniversityDetail/index.tsx       | 221 ++++++++++++++----
 .../_ui/UniversityDetailPreparingFallback.tsx |  53 +++--
 .../university/[homeUniversity]/[id]/page.tsx |  11 +-
 7 files changed, 250 insertions(+), 79 deletions(-)

diff --git a/apps/university-web/src/apis/universities/server/getSearchUniversitiesByFilter.ts b/apps/university-web/src/apis/universities/server/getSearchUniversitiesByFilter.ts
index 5bbf208b0..19c1e7077 100644
--- a/apps/university-web/src/apis/universities/server/getSearchUniversitiesByFilter.ts
+++ b/apps/university-web/src/apis/universities/server/getSearchUniversitiesByFilter.ts
@@ -89,10 +89,5 @@ export const getSearchUniversitiesAllRegions = async (
 
   const endpoint = `/univ-apply-infos/search/text?${searchParams.toString()}`;
   const response = await serverFetch<UniversitySearchResponse>(endpoint);
-
-  if (!response.ok) {
-    return [];
-  }
-
-  return response.data.univApplyInfoPreviews;
+  return assertUniversitySsgResponse(response, "search all universities").univApplyInfoPreviews;
 };
diff --git a/apps/university-web/src/apis/universities/server/getSearchUniversitiesByText.ts b/apps/university-web/src/apis/universities/server/getSearchUniversitiesByText.ts
index 7274f6016..89fb40497 100644
--- a/apps/university-web/src/apis/universities/server/getSearchUniversitiesByText.ts
+++ b/apps/university-web/src/apis/universities/server/getSearchUniversitiesByText.ts
@@ -63,14 +63,7 @@ export const getUniversitiesByText = async (
 };
 
 export const getAllUniversities = async (params?: UniversitySearchTextParams): Promise<ListUniversity[]> => {
-  const endpoint = createSearchTextEndpoint("", params);
-  const response = await serverFetch<UniversitySearchResponse>(endpoint);
-
-  if (!response.ok) {
-    return [];
-  }
-
-  return response.data.univApplyInfoPreviews;
+  return getUniversitiesByText("", params);
 };
 
 export const getCategorizedUniversities = async (
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 = () => {
     <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"
diff --git a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/MapSection.tsx b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/MapSection.tsx
index 5785da1e0..45c103026 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/MapSection.tsx
+++ b/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>
     </>
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 b553fd04d..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,17 @@ 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 (
     <>
       <div className="md:hidden">
         <UniversityDetailMobile university={university} koreanName={koreanName} />
       </div>
       <div className="hidden md:block">
-        <UniversityDetailDesktop university={university} koreanName={koreanName} />
+        <UniversityDetailDesktop university={university} koreanName={koreanName} backHref={backHref} />
       </div>
     </>
   );
@@ -56,10 +60,10 @@ const UniversityDetailMobile = ({ university, koreanName }: UniversityDetailProp
   );
 };
 
-const UniversityDetailDesktop = ({ university, koreanName }: UniversityDetailProps) => {
+const UniversityDetailDesktop = ({ university, koreanName, backHref = "/university" }: UniversityDetailProps) => {
   return (
     <div className="min-h-screen bg-k-50">
-      <section className="relative h-[360px] bg-gradient-to-b from-k-700 to-k-900">
+      <section className="relative h-[380px] bg-gradient-to-b from-k-700 to-k-900">
         <Image
           alt="대학 이미지"
           src={normalizeImageUrlToUploadCdn(university.backgroundImageUrl)}
@@ -68,45 +72,39 @@ const UniversityDetailDesktop = ({ university, koreanName }: UniversityDetailPro
           fallbackSrc="/svgs/placeholders/image-placeholder.svg"
           priority
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/15 to-black/25" />
-        <div className="absolute right-8 top-8 z-20 flex justify-end gap-3 lg:right-10">
-          <UniversityBtns universityId={university.id} />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-black/35" />
+        <Link
+          href={backHref}
+          className="absolute left-8 top-8 z-20 rounded-lg border border-white/30 bg-black/20 px-4 py-2 text-white backdrop-blur-sm transition-colors typo-sb-9 hover:bg-white/15 lg:left-10"
+        >
+          목록으로 돌아가기
+        </Link>
+        <div className="relative z-10 mx-auto flex h-full max-w-7xl items-end justify-between gap-8 px-8 pb-12 lg:px-10">
+          <div className="min-w-0">
+            <p className="text-white/80 typo-sb-9">
+              {university.country} · {university.region}
+            </p>
+            <h1 className="mt-3 max-w-4xl break-keep text-white typo-bold-1">{koreanName}</h1>
+            <p className="mt-2 max-w-4xl break-words text-white/80 typo-medium-2">{university.englishName}</p>
+          </div>
+          <div className="mb-1 flex shrink-0 gap-3">
+            <UniversityBtns universityId={university.id} />
+          </div>
         </div>
       </section>
 
-      <main className="relative -mt-24 px-8 pb-16 lg:px-10">
-        <div className="grid grid-cols-[minmax(330px,430px)_minmax(0,1fr)] items-start gap-8">
-          <aside className="sticky top-8 rounded-lg border border-k-100 bg-white px-6 pb-2 shadow-sm">
-            <TitleSection
-              title={koreanName}
-              subTitle={university.englishName}
-              logoUrl={normalizeImageUrlToUploadCdn(university.logoImageUrl)}
-            />
-            <UniversityStats university={university} />
-            <LanguageSection
-              detailsForLanguage={university.detailsForLanguage}
-              languageRequirements={university.languageRequirements}
-            />
-            <InfoSection
-              semesterRequirement={university.semesterRequirement}
-              semesterAvailableForDispatch={university.semesterAvailableForDispatch}
-              detailsForApply={university.detailsForApply}
-              detailsForAccommodation={university.detailsForAccommodation}
-            />
-          </aside>
-
-          <section className="min-w-0 rounded-lg border border-k-100 bg-white p-6 shadow-sm">
-            <header className="mb-7 border-b border-k-50 pb-5">
-              <p className="text-primary typo-sb-9">{university.country}</p>
-              <h2 className="mt-2 text-k-900 typo-bold-2">상세 정보</h2>
-              <p className="mt-2 text-k-500 typo-medium-3">
-                전공, 영어 강의, 위치 정보를 확인하고 지원 가능 여부를 판단해보세요.
-              </p>
-            </header>
-            <UniversityDetailTexts university={university} />
-            <MapSection universityEnglishName={university.englishName} />
-          </section>
-        </div>
+      <main className="relative z-10 mx-auto grid max-w-7xl grid-cols-[minmax(0,1fr)_360px] items-start gap-8 px-8 pb-16 pt-8 lg:px-10">
+        <section className="min-w-0 space-y-6">
+          <DesktopOverviewSection university={university} />
+          <DesktopDetailTexts university={university} />
+          <MapSection universityEnglishName={university.englishName} variant="desktop" />
+        </section>
+
+        <aside className="sticky top-8 space-y-5">
+          <DesktopUniversitySummary university={university} koreanName={koreanName} />
+          <DesktopLanguageSummary university={university} />
+          <DesktopRequirementSummary university={university} />
+        </aside>
       </main>
     </div>
   );
@@ -136,6 +134,127 @@ const UniversityStats = ({ university }: { university: University }) => (
   </div>
 );
 
+const DesktopUniversitySummary = ({ university, koreanName }: UniversityDetailProps) => (
+  <section className="rounded-lg border border-k-100 bg-white p-6 shadow-sm">
+    <div className="flex min-w-0 gap-3">
+      <Image
+        src={normalizeImageUrlToUploadCdn(university.logoImageUrl)}
+        alt="대학 로고"
+        width={56}
+        height={56}
+        className="shrink-0 rounded-full border border-k-50 object-cover"
+        fallbackSrc="/svgs/placeholders/university-logo-placeholder.svg"
+      />
+      <div className="min-w-0">
+        <h2 className="truncate text-k-900 typo-sb-4" title={koreanName}>
+          {koreanName}
+        </h2>
+        <p className="mt-1 truncate text-k-400 typo-medium-2" title={university.englishName}>
+          {university.englishName}
+        </p>
+      </div>
+    </div>
+
+    <dl className="mt-6 grid grid-cols-2 gap-3">
+      <DesktopStatItem label="국가" value={university.country} />
+      <DesktopStatItem label="모집 인원" value={`${university.studentCapacity}명`} />
+      <DesktopStatItem label="파견 학기" value={university.semesterAvailableForDispatch} />
+      <DesktopStatItem label="최저 학기" value={university.semesterRequirement} />
+    </dl>
+  </section>
+);
+
+const DesktopStatItem = ({ label, value }: { label: string; value: string }) => (
+  <div className="rounded-lg bg-k-50 px-4 py-3">
+    <dt className="text-k-400 typo-medium-5">{label}</dt>
+    <dd className="mt-1 truncate text-k-900 typo-sb-9" title={value}>
+      {value}
+    </dd>
+  </div>
+);
+
+const DesktopOverviewSection = ({ university }: { university: University }) => (
+  <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">Overview</p>
+      <h2 className="mt-2 text-k-900 typo-bold-2">지원 전 확인할 정보</h2>
+      <p className="mt-2 text-k-500 typo-medium-3">
+        모집 규모, 등록금 유형, 성적 기준을 한 번에 확인하고 상세 요건으로 이어서 살펴보세요.
+      </p>
+    </header>
+
+    <dl className="mt-6 grid gap-4 lg:grid-cols-3">
+      <DesktopOverviewItem label="모집 인원" value={`${university.studentCapacity}명`} />
+      <DesktopOverviewItem label="등록금 납부 유형" value={university.tuitionFeeType} />
+      <DesktopOverviewItem
+        label="최저 성적"
+        value={`${university.gpaRequirementCriteria} ${university.gpaRequirement}`}
+      />
+    </dl>
+  </section>
+);
+
+const DesktopOverviewItem = ({ label, value }: { label: string; value: string }) => (
+  <div className="rounded-lg border border-k-100 bg-k-0 p-5">
+    <dt className="text-k-400 typo-medium-4">{label}</dt>
+    <dd className="mt-2 break-keep text-k-900 typo-sb-7">{value}</dd>
+  </div>
+);
+
+const DesktopLanguageSummary = ({ university }: { university: University }) => (
+  <section className="rounded-lg border border-k-100 bg-white p-6 shadow-sm">
+    <h2 className="text-k-900 typo-bold-4">어학 성적</h2>
+    <div className="mt-5 space-y-4">
+      {university.languageRequirements.map((requirement, index) => (
+        <div
+          key={`${requirement.languageTestType}-${index}`}
+          className="flex items-center justify-between gap-3 rounded-lg bg-k-50 px-4 py-3"
+        >
+          <div className="flex min-w-0 items-center gap-3">
+            <Image
+              src={getLanguageTestLogo(requirement.languageTestType)}
+              alt="어학시험"
+              width={36}
+              height={36}
+              className="shrink-0"
+              fallbackSrc="/images/language/default.png"
+            />
+            <span className="truncate text-k-800 typo-sb-10">
+              {formatLanguageTestName(requirement.languageTestType)}
+            </span>
+          </div>
+          <span className="shrink-0 text-secondary typo-sb-9">{requirement.minScore}</span>
+        </div>
+      ))}
+    </div>
+    <div className="mt-5 border-t border-k-50 pt-5">
+      <p className="mb-2 text-k-900 typo-sb-9">세부 요건</p>
+      <p className="break-words text-k-600 typo-medium-3">
+        <LinkifyText>{university.detailsForLanguage}</LinkifyText>
+      </p>
+    </div>
+  </section>
+);
+
+const DesktopRequirementSummary = ({ university }: { university: University }) => (
+  <section className="rounded-lg border border-k-100 bg-white p-6 shadow-sm">
+    <h2 className="text-k-900 typo-bold-4">지원 요건</h2>
+    <div className="mt-5 space-y-5">
+      <DesktopRequirementBlock title="자격요건">{university.detailsForApply}</DesktopRequirementBlock>
+      <DesktopRequirementBlock title="기숙사">{university.detailsForAccommodation}</DesktopRequirementBlock>
+    </div>
+  </section>
+);
+
+const DesktopRequirementBlock = ({ title, children }: { title: string; children: string }) => (
+  <div>
+    <h3 className="mb-2 text-k-900 typo-sb-9">{title}</h3>
+    <p className="break-words text-k-600 typo-medium-3">
+      <LinkifyText>{children}</LinkifyText>
+    </p>
+  </div>
+);
+
 const UniversityDetailTexts = ({ university }: { university: University }) => (
   <div className="min-w-0">
     <DetailTextSection title="전공상세">{university.detailsForMajor}</DetailTextSection>
@@ -143,6 +262,28 @@ const UniversityDetailTexts = ({ university }: { university: University }) => (
   </div>
 );
 
+const DesktopDetailTexts = ({ university }: { university: University }) => (
+  <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">Details</p>
+      <h2 className="mt-2 text-k-900 typo-bold-2">전공과 강의 정보</h2>
+    </header>
+    <div className="mt-6 grid gap-6">
+      <DesktopTextSection title="전공상세">{university.detailsForMajor}</DesktopTextSection>
+      <DesktopTextSection title="영어강의 리스트">{university.detailsForEnglishCourse}</DesktopTextSection>
+    </div>
+  </section>
+);
+
+const DesktopTextSection = ({ title, children }: { title: string; children: string }) => (
+  <section>
+    <h3 className="mb-3 text-k-900 typo-sb-7">{title}</h3>
+    <div className="break-words rounded-lg bg-k-50 px-5 py-4 text-k-600 typo-medium-2">
+      <LinkifyText>{children}</LinkifyText>
+    </div>
+  </section>
+);
+
 const DetailTextSection = ({ title, children }: { title: string; children: string }) => (
   <>
     <div className="h-1 bg-k-50" />
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 (
-    <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">{title}</p>
-      <p className="mt-1 text-k-400 typo-regular-3">{description}</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"
+    <>
+      <div
+        className="flex min-h-[calc(100vh-56px)] flex-col items-center justify-center px-5 pb-24 pt-20 text-center md:hidden"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
       >
-        파견학교 목록으로 돌아가기
-      </Link>
-    </div>
+        <IconSolidConnectionSmallLogo />
+        <p className="mt-3 text-k-700 typo-sb-9">{title}</p>
+        <p className="mt-1 text-k-400 typo-regular-3">{description}</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>
+
+      <div
+        className="hidden min-h-screen items-center justify-center bg-k-50 px-8 py-16 md:flex lg:px-10"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        <section className="w-full max-w-3xl rounded-lg border border-k-100 bg-white p-10 text-center shadow-sm">
+          <div className="flex justify-center">
+            <IconSolidConnectionSmallLogo />
+          </div>
+          <p className="mt-4 text-k-900 typo-bold-2">{title}</p>
+          <p className="mt-2 text-k-500 typo-medium-3">{description}</p>
+          <Link
+            href={backHref}
+            className="mt-7 inline-flex rounded-lg border border-k-100 bg-k-0 px-5 py-3 text-k-700 typo-sb-9 transition-colors hover:border-primary hover:text-primary"
+          >
+            파견학교 목록으로 돌아가기
+          </Link>
+        </section>
+      </div>
+    </>
   );
 };
 
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 815689130..ae574d12c 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx
@@ -12,9 +12,8 @@ import { createUrl, NO_INDEX_ROBOTS } from "@/utils/seo";
 import UniversityDetail from "./_ui/UniversityDetail";
 import UniversityDetailPreparingFallback from "./_ui/UniversityDetailPreparingFallback";
 
-export const revalidate = false; // 가능한 상세 경로는 빌드 시 정적으로 생성
-// 전체 학교 목록 API가 일시적으로 실패해도 배포가 404-only 상태가 되지 않도록 런타임 생성을 허용합니다.
-export const dynamicParams = true;
+export const revalidate = false; // 완전 정적 생성
+export const dynamicParams = false;
 
 // 모든 homeUniversity + id 조합에 대해 정적 경로 생성
 export async function generateStaticParams() {
@@ -186,7 +185,11 @@ const CollegeDetailPage = async ({ params }: PageProps) => {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }} />
       <TopDetailNavigation title={convertedKoreanName} backHref={`/university/${homeUniversity}`} />
       <div className="w-full">
-        <UniversityDetail koreanName={convertedKoreanName} university={universityData} />
+        <UniversityDetail
+          koreanName={convertedKoreanName}
+          university={universityData}
+          backHref={`/university/${homeUniversity}`}
+        />
       </div>
     </>
   );