diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 648b661f9..ffb648688 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,6 +36,7 @@ jobs:
               - 'pnpm-lock.yaml'
               - 'pnpm-workspace.yaml'
               - 'scripts/**'
+              - 'packages/**'
               - 'turbo.json'
               - '.github/workflows/**'
 
@@ -216,3 +217,77 @@ jobs:
         run: pnpm --filter @solid-connect/admin run build
         env:
           NODE_ENV: production
+
+  web-e2e:
+    name: Web - E2E (${{ matrix.project }})
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    needs: [detect-changes, web-quality-check, university-web-quality-check]
+    if: |
+      always() &&
+      (needs.detect-changes.outputs.web == 'true' || needs.detect-changes.outputs.university-web == 'true' || needs.detect-changes.outputs.root == 'true') &&
+      (needs.web-quality-check.result == 'success' || needs.web-quality-check.result == 'skipped') &&
+      (needs.university-web-quality-check.result == 'success' || needs.university-web-quality-check.result == 'skipped')
+    strategy:
+      fail-fast: false
+      matrix:
+        project: [desktop, mobile, responsive]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22.x"
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm --filter @solid-connect/web exec playwright install --with-deps chromium
+      - name: Run browser flows against the local fixture API
+        run: pnpm --filter @solid-connect/web run test:e2e --project=${{ matrix.project }}
+      - name: Upload browser report and failure traces
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: web-e2e-${{ matrix.project }}
+          path: |
+            apps/web/playwright-report/
+            apps/web/test-results/
+          retention-days: 7
+          if-no-files-found: ignore
+
+  web-stories:
+    name: Web - Storybook
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    needs: [detect-changes, web-quality-check]
+    if: |
+      (needs.detect-changes.outputs.web == 'true' || needs.detect-changes.outputs.root == 'true') &&
+      needs.web-quality-check.result == 'success'
+    env:
+      STORYBOOK_DISABLE_TELEMETRY: "1"
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22.x"
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm --filter @solid-connect/web exec playwright install --with-deps chromium
+      - name: Build component documentation
+        run: pnpm --filter @solid-connect/web run build:storybook
+      - name: Run story render and interaction tests in Chromium
+        run: pnpm --filter @solid-connect/web run test:stories
+      - name: Upload Storybook and failure screenshots
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: web-storybook
+          path: |
+            apps/web/storybook-static/
+            apps/web/test-results/storybook/
+          retention-days: 7
+          if-no-files-found: ignore
diff --git a/.gitignore b/.gitignore
index 02e8e113c..00e139c38 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,8 @@ docs/superpowers/
 # Turborepo
 .turbo
 **/.turbo
+
+# Browser test and Storybook artifacts
+**/playwright-report/
+**/test-results/
+**/storybook-static/
diff --git a/apps/university-web/next.config.mjs b/apps/university-web/next.config.mjs
index 84d8530fb..8f1b54aa3 100644
--- a/apps/university-web/next.config.mjs
+++ b/apps/university-web/next.config.mjs
@@ -38,6 +38,7 @@ const nextConfig = {
     remotePatterns: imageRemotePatterns,
     formats: ["image/avif", "image/webp"],
     deviceSizes: [360, 640, 768, 1024, 1280],
+    qualities: [50, 55, 60, 75],
   },
   // 압축 활성화
   compress: true,
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]/[id]/_ui/UniversityDetail/_ui/InfoSection.tsx b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/InfoSection.tsx
index 2c9e2fa67..b2ef51456 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
@@ -202,8 +202,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"
@@ -217,8 +217,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/LanguageSection.tsx b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/LanguageSection.tsx
index 9cfbe45ce..0fe1a3363 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/LanguageSection.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/LanguageSection.tsx
@@ -20,7 +20,7 @@ const LanguageSection = ({ languageRequirements, detailsForLanguage }: LanguageS
           <div className="flex flex-col gap-5 pt-5">
             {languageRequirements.map((req, idx) => (
               <Language
-                key={`${req.languageTestType}-${idx}`}
+                key={`${req.languageTestType}-${req.minScore}-${idx}`}
                 name={formatLanguageTestName(req.languageTestType)}
                 logoUrl={getLanguageTestLogo(req.languageTestType)}
                 score={req.minScore}
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 5a39c5885..1789f0303 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,11 +2,33 @@ import GoogleEmbedMap from "@/components/ui/map/GoogleEmbedMap";
 
 interface MapSectionProps {
   universityEnglishName: string;
+  variant?: "mobile" | "desktop";
 }
 
 const SCHOOL_LOCATION_OVERVIEW_ZOOM = 5;
 
-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={SCHOOL_LOCATION_OVERVIEW_ZOOM}
+            style={{ border: "0" }}
+          />
+        </div>
+      </section>
+    );
+  }
+
   return (
     <>
       <div className="h-1 bg-k-50" />
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..7c573a1b1 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,19 +8,23 @@ 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="대학 로고"
           width={48}
           height={48}
-          className="rounded-full object-cover"
+          className="h-12 w-12 shrink-0 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 37c8cd10a..4c3a36ebf 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,21 +14,46 @@ import UniversityBtns from "./_ui/UniversityBtns";
 interface UniversityDetailProps {
   university: University;
   koreanName: string;
+  backHref?: string;
 }
 
-const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) => {
-  const capacityLabel =
-    university.studentCapacity === null || university.studentCapacity === undefined
-      ? "모집 인원 미정"
-      : `모집 ${university.studentCapacity}명`;
+const getCapacityValue = (university: University) => {
+  if (university.studentCapacity === null || university.studentCapacity === undefined) {
+    return "미정";
+  }
+
+  return `${university.studentCapacity}명`;
+};
+
+const getCapacityLabel = (university: University) => {
+  if (university.studentCapacity === null || university.studentCapacity === undefined) {
+    return "모집 인원 미정";
+  }
 
+  return `모집 ${university.studentCapacity}명`;
+};
+
+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} backHref={backHref} />
+      </div>
+    </>
+  );
+};
+
+const UniversityDetailMobile = ({ university, koreanName }: UniversityDetailProps) => {
   return (
     <div className="relative">
-      <div className="absolute top-4 flex w-full justify-between gap-3 px-5">
+      <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">
+      <div className="relative h-60 w-full bg-gradient-to-b from-k-700 to-k-900">
         <Image
           alt="대학 이미지"
           src={normalizeImageUrlToUploadCdn(university.backgroundImageUrl)}
@@ -34,49 +62,254 @@ 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">
         <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">{capacityLabel}</span>
-        </div>
-        <LanguageSection
-          detailsForLanguage={university.detailsForLanguage}
-          languageRequirements={university.languageRequirements}
-        />
-        <InfoSection
-          semesterRequirement={university.semesterRequirement}
-          semesterAvailableForDispatch={university.semesterAvailableForDispatch}
-          detailsForApply={university.detailsForApply}
-          detailsForAccommodation={university?.detailsForAccommodation}
+        <UniversityStats university={university} />
+        <UniversityDetailBody university={university} />
+        <div className="h-48" />
+      </div>
+    </div>
+  );
+};
+
+const UniversityDetailDesktop = ({ university, koreanName, backHref = "/university" }: UniversityDetailProps) => {
+  return (
+    <div className="min-h-screen bg-k-50">
+      <section className="relative h-[380px] 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="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 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>
-        <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>
+      </section>
+
+      <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>
+  );
+};
+
+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">{university.country}</span>
+    <span className="px-[30px] text-k-900 typo-sb-9">{getCapacityLabel(university)}</span>
+  </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="h-14 w-14 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={getCapacityValue(university)} />
+      <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={getCapacityValue(university)} />
+      <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}-${requirement.minScore}-${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="h-9 w-9 shrink-0 object-contain"
+              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>
-        <MapSection universityEnglishName={university.englishName} />
-        <div className="h-48" />
+      ))}
+    </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>
+    <DetailTextSection title="영어강의 리스트">{university.detailsForEnglishCourse}</DetailTextSection>
+  </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" />
+    <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]/[id]/_ui/UniversityDetailCsrFallback.tsx b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetailCsrFallback.tsx
index 7fae9f396..935b70081 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetailCsrFallback.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetailCsrFallback.tsx
@@ -33,7 +33,7 @@ const UniversityDetailCsrFallback = ({ universityId, backHref }: UniversityDetai
 
   return (
     <div className="w-full">
-      <UniversityDetail koreanName={university.koreanName} university={university} />
+      <UniversityDetail koreanName={university.koreanName} university={university} backHref={backHref} />
     </div>
   );
 };
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 eb33a95ad..0d762f4e1 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/[id]/page.tsx
@@ -193,7 +193,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>
     </>
   );
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..56ff14d03 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-wrap md:overflow-visible xl:flex-col">
       {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 ca6e02bce..fec827204 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,73 +45,14 @@ const REGION_FILTER_ITEMS = [
   { value: RegionEnumExtend.CHINA, label: "중국권" },
 ] as const;
 
-const CurrentTermEmptyState = () => (
-  <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>
-);
-
-const SearchEmptyState = () => (
-  <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>
-);
-
-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>
-    </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="mb-3 text-k-500 typo-medium-4">
-      총 <span className="text-primary typo-bold-4">{universities.length}</span>개 학교
-    </div>
-
-    {universities.length === 0 ? (
-      <CurrentTermEmptyState />
-    ) : (
-      <UniversityCards colleges={universities} className="mt-3" linkPrefix={`/university/${homeUniversitySlug}`} />
-    )}
-  </div>
+const UniversityListPrerenderFallback = ({ universities, homeUniversitySlug, title }: UniversityListContentProps) => (
+  <>
+    <UniversityListMobileFallback universities={universities} homeUniversitySlug={homeUniversitySlug} />
+    <UniversityListDesktopFallback universities={universities} homeUniversitySlug={homeUniversitySlug} title={title} />
+  </>
 );
 
-const UniversityListContentInner = ({ universities, homeUniversitySlug }: UniversityListContentProps) => {
+const UniversityListContentInner = ({ universities, homeUniversitySlug, title }: UniversityListContentProps) => {
   const searchParams = useSearchParams();
   const querySearchText = searchParams.get("searchText") ?? "";
   const languageTestTypeParam = searchParams.get("languageTestType");
@@ -166,34 +108,261 @@ const UniversityListContentInner = ({ universities, homeUniversitySlug }: Univer
   }, [universities, searchText, selectedRegions, queryLanguageTestType, queryCountryCodesKey]);
 
   return (
-    <div className="px-5">
-      <SearchBar value={searchText} onChange={setSearchText} homeUniversitySlug={homeUniversitySlug} />
+    <>
+      <UniversityListMobileView
+        universities={filteredUniversities}
+        isCurrentTermEmpty={universities.length === 0}
+        homeUniversitySlug={homeUniversitySlug}
+        searchText={searchText}
+        selectedRegions={selectedRegions}
+        setSearchText={setSearchText}
+        setSelectedRegions={setSelectedRegions}
+      />
+      <UniversityListDesktopView
+        universities={filteredUniversities}
+        isCurrentTermEmpty={universities.length === 0}
+        homeUniversitySlug={homeUniversitySlug}
+        title={title}
+        searchText={searchText}
+        selectedRegions={selectedRegions}
+        setSearchText={setSearchText}
+        setSelectedRegions={setSelectedRegions}
+      />
+      <FloatingUpBtn />
+    </>
+  );
+};
+
+type UniversityListViewProps = {
+  isCurrentTermEmpty: boolean;
+  universities: ListUniversity[];
+  homeUniversitySlug: HomeUniversitySlug;
+  searchText: string;
+  selectedRegions: RegionEnumExtend[];
+  setSearchText: (value: string) => void;
+  setSelectedRegions: (regions: RegionEnumExtend[]) => void;
+};
 
+const UniversityListMobileView = ({
+  isCurrentTermEmpty,
+  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}
+        isCurrentTermEmpty={isCurrentTermEmpty}
+        className="mt-3"
+      />
+    </div>
+  );
+};
 
-      {/* 결과 카운트 */}
-      <div className="mb-3 text-k-500 typo-medium-4">
-        총 <span className="text-primary typo-bold-4">{filteredUniversities.length}</span>개 학교
+const UniversityListDesktopView = ({
+  isCurrentTermEmpty,
+  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="shrink-0 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-1 items-start gap-8 xl:grid-cols-[300px_minmax(0,1fr)]">
+        <aside className="space-y-5 xl:sticky xl:top-8">
+          <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-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}
+            isCurrentTermEmpty={isCurrentTermEmpty}
+            className="mt-0"
+          />
+        </section>
       </div>
+    </div>
+  );
+};
 
-      {/* 결과 표시 */}
-      {universities.length === 0 ? (
-        <CurrentTermEmptyState />
-      ) : filteredUniversities.length === 0 ? (
-        <SearchEmptyState />
-      ) : (
-        <UniversityCards
-          colleges={filteredUniversities}
-          className="mt-3"
-          linkPrefix={`/university/${homeUniversitySlug}`}
+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}
+      isCurrentTermEmpty={universities.length === 0}
+      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="shrink-0 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-1 items-start gap-8 xl:grid-cols-[300px_minmax(0,1fr)]">
+      <aside className="space-y-5 xl:sticky xl:top-8">
+        <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}
+          isCurrentTermEmpty={universities.length === 0}
+          className="mt-0"
         />
-      )}
+      </section>
+    </div>
+  </div>
+);
 
-      <FloatingUpBtn />
+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-wrap gap-2 xl:flex-col" : "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 = ({
+  isCurrentTermEmpty = false,
+  universities,
+  homeUniversitySlug,
+  className,
+}: {
+  universities: ListUniversity[];
+  homeUniversitySlug: HomeUniversitySlug;
+  className?: string;
+  isCurrentTermEmpty?: boolean;
+}) => {
+  if (universities.length === 0) {
+    return <EmptyUniversityResult isCurrentTermEmpty={isCurrentTermEmpty} />;
+  }
+
+  return (
+    <UniversityCards colleges={universities} className={className} linkPrefix={`/university/${homeUniversitySlug}`} />
   );
 };
 
+const EmptyUniversityResult = ({ isCurrentTermEmpty }: { isCurrentTermEmpty: boolean }) => (
+  <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">
+      {isCurrentTermEmpty ? "현재 학기 지원대학이 없습니다." : "검색 결과가 없습니다."}
+    </p>
+    <p className="mt-1 text-k-300 typo-medium-4">
+      {isCurrentTermEmpty ? "지금은 지원을 받는 대학이 없습니다." : "다른 검색어나 필터를 시도해보세요."}
+    </p>
+  </div>
+);
+
 const UniversityListContent = (props: UniversityListContentProps) => (
   <Suspense fallback={<UniversityListPrerenderFallback {...props} />}>
     <UniversityListContentInner {...props} />
diff --git a/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListCsrFallback.tsx b/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListCsrFallback.tsx
index e813a4ddc..c666a7d59 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListCsrFallback.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListCsrFallback.tsx
@@ -4,6 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { QueryKeys } from "@/apis/queryKeys";
 import { type SearchTextResponse, universitiesApi } from "@/apis/universities/api";
+import { getHomeUniversityBySlug } from "@/constants/university";
 import type { HomeUniversitySlug, ListUniversity } from "@/types/university";
 
 import UniversityListContent from "./UniversityListContent";
@@ -53,7 +54,13 @@ const UniversityListCsrFallback = ({ homeUniversityId, homeUniversitySlug }: Uni
     );
   }
 
-  return <UniversityListContent universities={universities} homeUniversitySlug={homeUniversitySlug} />;
+  return (
+    <UniversityListContent
+      universities={universities}
+      homeUniversitySlug={homeUniversitySlug}
+      title={`${getHomeUniversityBySlug(homeUniversitySlug)?.shortName ?? "학교"} 파견학교`}
+    />
+  );
 };
 
 export default UniversityListCsrFallback;
diff --git a/apps/university-web/src/app/university/[homeUniversity]/page.tsx b/apps/university-web/src/app/university/[homeUniversity]/page.tsx
index 24332518d..8619574e5 100644
--- a/apps/university-web/src/app/university/[homeUniversity]/page.tsx
+++ b/apps/university-web/src/app/university/[homeUniversity]/page.tsx
@@ -68,7 +68,11 @@ const UniversityListPage = async ({ params }: PageProps) => {
           homeUniversitySlug={homeUniversitySlug}
         />
       ) : (
-        <UniversityListContent universities={universities} homeUniversitySlug={homeUniversitySlug} />
+        <UniversityListContent
+          universities={universities}
+          homeUniversitySlug={homeUniversitySlug}
+          title={`${universityInfo.shortName} 파견학교`}
+        />
       )}
     </>
   );
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/university-web/src/components/layout/GlobalLayout/index.tsx b/apps/university-web/src/components/layout/GlobalLayout/index.tsx
index 37b1d36b3..03ee15906 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 AdminViewSwitcherFab from "./ui/AdminViewSwitcherFab/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 />
-      <AdminViewSwitcherFab />
-      <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 />
+        <AdminViewSwitcherFab />
+        <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..27e40a6a3 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,10 @@ const BottomNavigation = () => {
   }
 
   return (
-    <nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white shadow-magic-bottom-nav">
+    <nav
+      aria-label="하단 메뉴"
+      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/ui/UniverSityCard/index.tsx b/apps/university-web/src/components/ui/UniverSityCard/index.tsx
index 8bf12e118..9f636b746 100644
--- a/apps/university-web/src/components/ui/UniverSityCard/index.tsx
+++ b/apps/university-web/src/components/ui/UniverSityCard/index.tsx
@@ -29,12 +29,12 @@ const UniversityCard = ({ university, showCapacity = true, linkPrefix = "/univer
 
   return (
     <Link className="block" href={universityDetailHref} aria-labelledby={`university-name-${university.id}`}>
-      <div className="relative h-[91px] w-full overflow-hidden rounded-lg border border-solid border-k-100 hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10">
-        <div className="flex justify-between px-5 py-3.5">
-          <div className="flex gap-[23.5px]">
+      <div className="relative h-[91px] w-full overflow-hidden rounded-lg border border-solid border-k-100 transition-transform hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10 md:h-[112px]">
+        <div className="flex h-full items-center justify-between gap-4 px-5 py-3.5 md:px-6 md:py-5">
+          <div className="flex min-w-0 gap-[23.5px] md:gap-5">
             <div className="flex flex-shrink-0 items-center">
               <Image
-                className="h-14 w-14 rounded-full object-cover"
+                className="h-14 w-14 rounded-full object-cover md:h-16 md:w-16"
                 src={normalizeImageUrlToUploadCdn(university.logoImageUrl)}
                 width={56}
                 height={56}
@@ -43,25 +43,30 @@ const UniversityCard = ({ university, showCapacity = true, linkPrefix = "/univer
               />
             </div>
 
-            <div className="flex flex-col">
+            <div className="flex min-w-0 flex-col">
               <span
                 id={`university-name-${university.id}`}
-                className="truncate text-k-700 typo-bold-4"
+                className="truncate text-k-700 typo-bold-4 md:typo-bold-3"
                 title={convertedKoreanName}
               >
                 {convertedKoreanName}
               </span>
               <div className="flex items-center gap-2.5">
-                <span className="text-k-500 typo-medium-4">
+                <span className="truncate text-k-500 typo-medium-4 md:typo-medium-3">
                   {university.country} | {university.region}
                 </span>
-                {showCapacity && <span className="text-primary typo-sb-11">{capacityLabel}</span>}
+                {showCapacity && (
+                  <span className="shrink-0 text-primary typo-sb-11 md:typo-sb-10">{capacityLabel}</span>
+                )}
               </div>
-              <div className="flex gap-4">
-                {university.languageRequirements.slice(0, 3).map((requirement) => {
+              <div className="flex gap-4 md:mt-1">
+                {university.languageRequirements.slice(0, 3).map((requirement, index) => {
                   const testName = shortenLanguageTestName(requirement.languageTestType);
                   return (
-                    <span key={requirement.languageTestType} className="whitespace-nowrap text-primary typo-sb-11">
+                    <span
+                      key={`${requirement.languageTestType}-${requirement.minScore}-${index}`}
+                      className="whitespace-nowrap text-primary typo-sb-11 md:typo-sb-10"
+                    >
                       {testName ?? requirement.languageTestType} {requirement.minScore}
                     </span>
                   );
@@ -69,7 +74,7 @@ const UniversityCard = ({ university, showCapacity = true, linkPrefix = "/univer
               </div>
             </div>
           </div>
-          <div className="flex items-center">
+          <div className="flex shrink-0 items-center">
             <CheveronRightFilled color="black" opacity="0.54" />
           </div>
         </div>
diff --git a/apps/university-web/src/components/university/UniversityCards/index.tsx b/apps/university-web/src/components/university/UniversityCards/index.tsx
index 525b4e941..a9b1705f1 100644
--- a/apps/university-web/src/components/university/UniversityCards/index.tsx
+++ b/apps/university-web/src/components/university/UniversityCards/index.tsx
@@ -64,40 +64,52 @@ const UniversityCards = ({ colleges, style, className, showCapacity = true, link
   const virtualItems = virtualizer.getVirtualItems();
 
   return (
-    <div
-      ref={listRef}
-      className={clsx("relative w-full", className)}
-      role="list"
-      style={{
-        ...style,
-        height: `${virtualizer.getTotalSize()}px`,
-      }}
-    >
-      {virtualItems.map((virtualItem) => {
-        const college = colleges[virtualItem.index];
-
-        if (!college) {
-          return null;
-        }
-
-        return (
-          <div
-            key={virtualItem.key}
-            ref={virtualizer.measureElement}
-            className="absolute left-0 top-0 w-full pb-2.5"
-            data-index={virtualItem.index}
-            role="listitem"
-            aria-posinset={virtualItem.index + 1}
-            aria-setsize={colleges.length}
-            style={{
-              transform: `translateY(${virtualItem.start - virtualizer.options.scrollMargin}px)`,
-            }}
-          >
+    <>
+      <div
+        ref={listRef}
+        className={clsx("relative w-full md:hidden", className)}
+        role="list"
+        style={{
+          ...style,
+          height: `${virtualizer.getTotalSize()}px`,
+        }}
+      >
+        {virtualItems.map((virtualItem) => {
+          const college = colleges[virtualItem.index];
+
+          if (!college) {
+            return null;
+          }
+
+          return (
+            <div
+              key={virtualItem.key}
+              ref={virtualizer.measureElement}
+              className="absolute left-0 top-0 w-full pb-2.5"
+              data-index={virtualItem.index}
+              role="listitem"
+              aria-posinset={virtualItem.index + 1}
+              aria-setsize={colleges.length}
+              style={{
+                transform: `translateY(${virtualItem.start - virtualizer.options.scrollMargin}px)`,
+              }}
+            >
+              <UniversityCard university={college} showCapacity={showCapacity} linkPrefix={linkPrefix} />
+            </div>
+          );
+        })}
+      </div>
+      <div
+        className={clsx("hidden gap-4 md:grid md:grid-cols-[repeat(auto-fit,minmax(min(100%,360px),1fr))]", className)}
+        style={style}
+      >
+        {colleges.map((college) => (
+          <div key={college.id}>
             <UniversityCard university={college} showCapacity={showCapacity} linkPrefix={linkPrefix} />
           </div>
-        );
-      })}
-    </div>
+        ))}
+      </div>
+    </>
   );
 };
 
diff --git a/apps/web/.storybook/main.ts b/apps/web/.storybook/main.ts
new file mode 100644
index 000000000..991378b52
--- /dev/null
+++ b/apps/web/.storybook/main.ts
@@ -0,0 +1,23 @@
+import { fileURLToPath } from "node:url";
+import type { StorybookConfig } from "@storybook/nextjs-vite";
+import svgr from "vite-plugin-svgr";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-docs", "@storybook/addon-vitest"],
+  framework: {
+    name: "@storybook/nextjs-vite",
+    options: {
+      nextConfigPath: fileURLToPath(new URL("./next.config.mjs", import.meta.url)),
+      image: { excludeFiles: ["**/*.svg"] },
+    },
+  },
+  viteFinal: async (config) => ({
+    ...config,
+    // Static files are served by staticDirs. Icon source modules must remain importable.
+    publicDir: false,
+    plugins: [...(config.plugins ?? []), svgr({ include: "**/*.svg", svgrOptions: { exportType: "default" } })],
+  }),
+  staticDirs: ["../public"],
+};
+export default config;
diff --git a/apps/web/.storybook/next.config.mjs b/apps/web/.storybook/next.config.mjs
new file mode 100644
index 000000000..9d7b9660e
--- /dev/null
+++ b/apps/web/.storybook/next.config.mjs
@@ -0,0 +1,7 @@
+// Component rendering does not need deployment rewrites or Sentry uploads.
+/** @type {import("next").NextConfig} */
+export default {
+  images: { unoptimized: true },
+  transpilePackages: ["@solid-connect/ui"],
+  typescript: { tsconfigPath: "../tsconfig.json" },
+};
diff --git a/apps/web/.storybook/preview.tsx b/apps/web/.storybook/preview.tsx
new file mode 100644
index 000000000..389165e86
--- /dev/null
+++ b/apps/web/.storybook/preview.tsx
@@ -0,0 +1,18 @@
+import type { Preview } from "@storybook/nextjs-vite";
+import "../src/styles/globals.css";
+
+const preview: Preview = {
+  parameters: { nextjs: { appDirectory: true }, layout: "padded" },
+  decorators: [
+    (Story, context) =>
+      context.parameters.layout === "fullscreen" ? (
+        <Story />
+      ) : (
+        <div className="mx-auto w-full max-w-screen-sm">
+          <Story />
+        </div>
+      ),
+  ],
+  tags: ["autodocs"],
+};
+export default preview;
diff --git a/apps/web/biome.json b/apps/web/biome.json
index b776eb42c..7d9e1c502 100644
--- a/apps/web/biome.json
+++ b/apps/web/biome.json
@@ -2,7 +2,17 @@
   "$schema": "https://biomejs.dev/schemas/2.3.12/schema.json",
   "extends": ["../../packages/config/biome/base.json"],
   "files": {
-    "includes": ["**", "!node_modules", "!.next", "!build", "!dist", "!*.tsbuildinfo"]
+    "includes": [
+      "**",
+      "!node_modules",
+      "!.next",
+      "!build",
+      "!dist",
+      "!*.tsbuildinfo",
+      "!playwright-report",
+      "!test-results",
+      "!storybook-static"
+    ]
   },
   "vcs": {
     "useIgnoreFile": false
diff --git a/apps/web/e2e/chat.spec.ts b/apps/web/e2e/chat.spec.ts
new file mode 100644
index 000000000..99059d17b
--- /dev/null
+++ b/apps/web/e2e/chat.spec.ts
@@ -0,0 +1,194 @@
+import { apiURL, expect, login, openChat, test } from "./fixtures/test";
+
+test("채팅 기록과 텍스트 전송을 합치고 중복 없이 새로고침 후 유지한다", async ({ page, request }) => {
+  await openChat(page);
+  await page.getByRole("textbox", { name: "메시지", exact: true }).fill("안녕하세요 멘토님");
+  await page.getByRole("button", { name: "메시지 보내기" }).click();
+  await expect(page.locator("[data-message-key]").filter({ hasText: "안녕하세요 멘토님" })).toHaveCount(1);
+  await expect(page.getByRole("textbox", { name: "메시지", exact: true })).toHaveValue("");
+  await expect.poll(async () => (await (await request.get(`${apiURL}/__state`)).json()).sends.length).toBe(1);
+  await page.reload();
+  await expect(page.locator("[data-message-key]").filter({ hasText: "안녕하세요 멘토님" })).toHaveCount(1);
+});
+
+test("이전 기록을 추가할 때 읽던 위치를 유지한다", async ({ page }) => {
+  await openChat(page);
+  const region = page.getByRole("region", { name: "채팅 메시지", exact: true });
+  await region.evaluate((element) => {
+    element.scrollTop = 0;
+  });
+  const anchor = page.locator("[data-message-key]").first();
+  const key = await anchor.getAttribute("data-message-key");
+  const before = (await anchor.boundingBox())!.y;
+  await page.getByRole("button", { name: "이전 메시지 더 보기" }).click();
+  await expect(page.locator("[data-message-key]")).toHaveCount(40);
+  await expect
+    .poll(async () => Math.abs((await page.locator(`[data-message-key="${key}"]`).boundingBox())!.y - before))
+    .toBeLessThan(5);
+});
+
+test("연결 중단 중 초안을 지키고 여러 페이지의 누락 메시지를 복구한다", async ({ page, request }) => {
+  await openChat(page);
+  const input = page.getByRole("textbox", { name: "메시지", exact: true });
+  await input.fill("연결 후 보낼 초안");
+  await request.post(`${apiURL}/__control`, { data: { paused: true } });
+  await expect(page.getByRole("button", { name: "메시지 보내기" })).toBeDisabled();
+  await request.post(`${apiURL}/__control`, { data: { push: 45 } });
+  await request.post(`${apiURL}/__control`, { data: { paused: false } });
+  await page.getByRole("button", { name: "다시 연결", exact: true }).click();
+  await expect(page.getByText("실시간으로 연결되어 있어요.")).toBeVisible();
+  await expect(page.locator("[data-message-key]")).toHaveCount(65);
+  for (let index = 1; index <= 45; index++)
+    await expect(page.getByText(`복구 메시지 ${index}`, { exact: true })).toHaveCount(1);
+  await expect(input).toHaveValue("연결 후 보낼 초안");
+  expect((await (await request.get(`${apiURL}/__state`)).json()).sends).toHaveLength(0);
+});
+
+test("이미지 업로드 실패 후 선택과 텍스트를 유지하고 재시도한다", async ({ page, request }) => {
+  await openChat(page);
+  await page.getByRole("textbox", { name: "메시지", exact: true }).fill("별도로 보낼 텍스트");
+  await page.getByLabel("채팅 이미지 선택").setInputFiles({
+    name: "campus.png",
+    mimeType: "image/png",
+    buffer: Buffer.from(
+      "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jRZkAAAAASUVORK5CYII=",
+      "base64",
+    ),
+  });
+  await request.post(`${apiURL}/__control`, { data: { failUpload: true } });
+  await page.getByRole("button", { name: "이미지 1장 보내기" }).click();
+  await expect(page.getByRole("list", { name: "선택한 이미지" })).toBeVisible();
+  await expect(page.getByRole("alert").filter({ hasText: "입력 내용" })).toBeVisible();
+  await request.post(`${apiURL}/__control`, { data: { failUpload: false } });
+  await page.getByRole("button", { name: "이미지 1장 보내기" }).click();
+  await expect(page.getByRole("list", { name: "선택한 이미지" })).toHaveCount(0);
+  await expect(page.getByRole("textbox", { name: "메시지", exact: true })).toHaveValue("별도로 보낼 텍스트");
+  await expect(page.locator("[data-message-key]").getByAltText("첨부 이미지")).toHaveCount(1);
+  const state = await (await request.get(`${apiURL}/__state`)).json();
+  expect(state.uploads).toBe(2);
+  expect(state.sends).toHaveLength(1);
+});
+
+test("목록 조회 실패를 재시도로 복구하고 다른 방으로 이동한다", async ({ page, request }) => {
+  await openChat(page);
+  await request.post(`${apiURL}/__control`, { data: { failRooms: true } });
+  await page.goto("/mentor/chat");
+  await expect(page.getByText("채팅 목록을 불러오지 못했어요.")).toBeVisible({ timeout: 20_000 });
+  await request.post(`${apiURL}/__control`, { data: { failRooms: false } });
+  await page.getByRole("button", { name: "다시 시도", exact: true }).click();
+  await page.getByRole("link").filter({ hasText: "두번째 멘토" }).click();
+  await expect(page).toHaveURL("/mentor/chat/2");
+  await expect(page.getByText("아직 대화가 없어요. 첫 메시지를 보내보세요.")).toBeVisible();
+  await expect(page.locator("[data-message-key]")).toHaveCount(0);
+});
+
+test("접근 권한이 없으면 메시지와 전송을 막는다", async ({ page, request }) => {
+  await openChat(page);
+  await request.post(`${apiURL}/__control`, { data: { denied: true } });
+  await page.reload();
+  await expect(page.getByText("이 채팅방에 접근할 수 없습니다.")).toBeVisible();
+  await expect(page.locator("[data-message-key]")).toHaveCount(0);
+  await expect(page.getByRole("textbox", { name: "메시지", exact: true })).toBeDisabled();
+});
+
+test("좁은 화면에서도 작성 영역과 전송 버튼이 화면 안에 있다", async ({ page }) => {
+  await openChat(page);
+  const composer = page.getByRole("form", { name: "채팅 메시지 작성" });
+  const box = (await composer.boundingBox())!;
+  const viewport = page.viewportSize()!;
+  expect(box.x).toBeGreaterThanOrEqual(0);
+  expect(box.x + box.width).toBeLessThanOrEqual(viewport.width);
+  expect(box.y + box.height).toBeLessThanOrEqual(viewport.height);
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+});
+
+test("기록 조회 실패에서 재시도하면 전송 가능한 상태로 복구한다", async ({ page, request }) => {
+  await login(page);
+  await request.post(`${apiURL}/__control`, { data: { failHistory: true } });
+  await page.goto("/mentor/chat/1");
+  // Connecting also synchronizes history. Finish that attempt before enabling recovery.
+  await expect(page.getByText("실시간으로 연결되어 있어요.")).toBeVisible();
+  await expect(page.getByRole("region", { name: "채팅 메시지", exact: true }).getByRole("alert")).toBeVisible();
+  await expect(page.getByRole("button", { name: "메시지 보내기" })).toBeDisabled();
+  await request.post(`${apiURL}/__control`, { data: { failHistory: false } });
+  await page.getByRole("button", { name: "다시 시도", exact: true }).click();
+  await expect(page.getByText("기존 메시지 45", { exact: true })).toBeVisible();
+  await page.getByRole("textbox", { name: "메시지", exact: true }).fill("복구 후 전송");
+  await expect(page.getByRole("button", { name: "메시지 보내기" })).toBeEnabled();
+});
+
+test("기록 조회보다 늦게 도착한 소켓 응답도 전송을 한 번만 확인한다", async ({ page, request }) => {
+  await openChat(page);
+  await request.post(`${apiURL}/__control`, { data: { echo: false } });
+  await page.getByRole("textbox", { name: "메시지", exact: true }).fill("기록이 먼저 도착한 전송");
+  await page.getByRole("button", { name: "메시지 보내기" }).click();
+  await expect.poll(async () => (await (await request.get(`${apiURL}/__state`)).json()).sends.length).toBe(1);
+  await page.evaluate(() => window.dispatchEvent(new Event("focus")));
+  await expect(page.locator("[data-message-key]").filter({ hasText: "기록이 먼저 도착한 전송" })).toHaveCount(1);
+  await expect(page.getByText("전송 확인 중…", { exact: true })).toBeVisible();
+  await request.post(`${apiURL}/__control`, { data: { flushEcho: true } });
+  await expect(page.getByText("전송 확인 중…", { exact: true })).toHaveCount(0);
+  await expect(page.getByText("기록이 먼저 도착한 전송", { exact: true })).toHaveCount(1);
+});
+
+test("토큰 갱신의 일시 장애에서 초안과 선택 이미지를 보존하고 재연결한다", async ({ page, request }) => {
+  await openChat(page);
+  const input = page.getByRole("textbox", { name: "메시지", exact: true });
+  await input.fill("갱신 중에도 보존할 초안");
+  await page
+    .getByLabel("채팅 이미지 선택")
+    .setInputFiles({ name: "draft.png", mimeType: "image/png", buffer: Buffer.from("image") });
+  await page.clock.setFixedTime(new Date("2100-01-01T00:00:01Z"));
+  await request.post(`${apiURL}/__control`, { data: { paused: true, reissueStatus: 503 } });
+  await expect(page.getByRole("button", { name: "다시 연결", exact: true })).toBeVisible();
+  await request.post(`${apiURL}/__control`, { data: { paused: false } });
+  await page.getByRole("button", { name: "다시 연결", exact: true }).click();
+  await expect(page.getByText("채팅에 연결하지 못했어요. 다시 연결해주세요.")).toBeVisible();
+  await expect(input).toHaveValue("갱신 중에도 보존할 초안");
+  await expect(page.getByRole("list", { name: "선택한 이미지" })).toBeVisible();
+  await expect(page).toHaveURL("/mentor/chat/1");
+  await request.post(`${apiURL}/__control`, { data: { reissueStatus: 200 } });
+  await page.getByRole("button", { name: "다시 연결", exact: true }).click();
+  await expect(page.getByText("실시간으로 연결되어 있어요.")).toBeVisible();
+  await expect(input).toHaveValue("갱신 중에도 보존할 초안");
+  await expect(page.getByRole("list", { name: "선택한 이미지" })).toBeVisible();
+  expect((await (await request.get(`${apiURL}/__state`)).json()).refreshes).toBeGreaterThanOrEqual(2);
+});
+
+test("만료된 토큰으로 방에 처음 들어가도 로그인 재요청 없이 갱신과 재시도를 처리한다", async ({ page, request }) => {
+  await login(page);
+  await page.goto("/mentor/chat");
+  const room = page.getByRole("link").filter({ hasText: "두번째 멘토" });
+  await expect(room).toBeVisible();
+  await page.clock.setFixedTime(new Date("2100-01-01T00:00:01Z"));
+  await request.post(`${apiURL}/__control`, { data: { reissueStatus: 503 } });
+  await room.click();
+  await expect(page).toHaveURL("/mentor/chat/2");
+  await expect(page.getByRole("button", { name: "다시 확인", exact: true })).toBeVisible();
+  await expect(page.getByRole("link", { name: "로그인하기", exact: true })).toHaveCount(0);
+  await request.post(`${apiURL}/__control`, { data: { reissueStatus: 200 } });
+  await page.getByRole("button", { name: "다시 확인", exact: true }).click();
+  await expect(page.getByText("실시간으로 연결되어 있어요.")).toBeVisible();
+  await expect(page.getByText("아직 대화가 없어요. 첫 메시지를 보내보세요.")).toBeVisible();
+  expect((await (await request.get(`${apiURL}/__state`)).json()).refreshes).toBe(2);
+});
+
+test("이전 기록을 읽는 중 토큰이 만료되고 수신해도 초안과 전송을 유지한다", async ({ page, request }) => {
+  await openChat(page);
+  const region = page.getByRole("region", { name: "채팅 메시지", exact: true });
+  await region.evaluate((element) => {
+    element.scrollTop = 0;
+  });
+  await expect.poll(() => region.evaluate((element) => element.scrollTop)).toBe(0);
+  const input = page.getByRole("textbox", { name: "메시지", exact: true });
+  await input.fill("만료 후에도 보낼 초안");
+  await page.clock.setFixedTime(new Date("2100-01-01T00:00:01Z"));
+  await request.post(`${apiURL}/__control`, { data: { reissueStatus: 200, push: 1 } });
+  await expect(page.getByText("복구 메시지 1", { exact: true })).toHaveCount(1);
+  await expect(input).toHaveValue("만료 후에도 보낼 초안");
+  await expect(page.getByText("테스트 멘토님과 채팅", { exact: true })).toBeVisible();
+  await expect(page.getByRole("button", { name: "메시지 보내기" })).toBeEnabled();
+  await expect.poll(() => region.evaluate((element) => element.scrollTop)).toBe(0);
+  await page.getByRole("button", { name: "메시지 보내기" }).click();
+  await expect(page.locator("[data-message-key]").filter({ hasText: "만료 후에도 보낼 초안" })).toHaveCount(1);
+});
diff --git a/apps/web/e2e/fixtures/server.mjs b/apps/web/e2e/fixtures/server.mjs
new file mode 100644
index 000000000..b09ab40ef
--- /dev/null
+++ b/apps/web/e2e/fixtures/server.mjs
@@ -0,0 +1,323 @@
+import { createServer } from "node:http";
+import { WebSocket, WebSocketServer } from "ws";
+import { searchUniversities, universities, universityDetail } from "./universities.mjs";
+
+// Local-only REST + SockJS/STOMP contract fixture. Never connects to the real API.
+const host = "127.0.0.1";
+const port = 43180;
+const png = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jRZkAAAAASUVORK5CYII=",
+  "base64",
+);
+const token = `${Buffer.from('{"alg":"none"}').toString("base64url")}.${Buffer.from(JSON.stringify({ sub: "101", role: "MENTEE", home_university: "1", exp: 4102444800 })).toString("base64url")}.fixture`;
+const partner = (room) => ({
+  partnerId: room === 1 ? 202 : 203,
+  nickname: room === 1 ? "테스트 멘토" : "두번째 멘토",
+  university: "테스트 대학",
+  profileUrl: null,
+});
+const sockets = new Map();
+let state;
+function reset() {
+  for (const ws of sockets.keys()) ws.close();
+  sockets.clear();
+  state = {
+    activeToken: token,
+    reissueStatus: 401,
+    refreshes: 0,
+    pendingEchoes: [],
+    paused: false,
+    failRooms: false,
+    failHistory: false,
+    failUpload: false,
+    denied: false,
+    echo: true,
+    sends: [],
+    reads: 0,
+    uploads: 0,
+    unexpected: [],
+    rooms: new Map([
+      [1, []],
+      [2, []],
+    ]),
+    nextId: 0,
+  };
+  for (let index = 0; index < 45; index++) append(1, `기존 메시지 ${index + 1}`, 202);
+}
+function append(room, content, senderId, attachments = []) {
+  const message = {
+    id: ++state.nextId,
+    content,
+    senderId,
+    attachments,
+    createdAt: new Date(Date.UTC(2026, 9, 1, 0, 0, state.nextId)).toISOString(),
+  };
+  state.rooms.get(room).push(message);
+  return message;
+}
+function frame(ws, data) {
+  if (ws.readyState === WebSocket.OPEN) ws.send(`a${JSON.stringify([data])}`);
+}
+function broadcast(room, message) {
+  for (const [ws, subscription] of sockets) {
+    if (subscription?.room !== room) continue;
+    const body = JSON.stringify(message);
+    frame(
+      ws,
+      `MESSAGE\nsubscription:${subscription.id}\nmessage-id:${message.id}\ndestination:/topic/chat/${room}\ncontent-type:application/json\n\n${body}\0`,
+    );
+  }
+}
+reset();
+const server = createServer(async (req, res) => {
+  res.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:43181");
+  res.setHeader("Access-Control-Allow-Credentials", "true");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");
+  res.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE,OPTIONS");
+  if (req.method === "OPTIONS") {
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+  const url = new URL(req.url, `http://${host}:${port}`);
+  const path = url.pathname;
+  const chunks = [];
+  for await (const chunk of req) chunks.push(chunk);
+  const raw = Buffer.concat(chunks).toString();
+  const json = (data, status = 200) => {
+    res.writeHead(status, { "Content-Type": "application/json" });
+    res.end(JSON.stringify(data));
+  };
+  const expectedMethod =
+    path === "/__reset" || path === "/__control" || path.startsWith("/auth/") || path === "/file/chat"
+      ? "POST"
+      : /^\/chats\/rooms\/\d+\/read$/.test(path)
+        ? "PUT"
+        : "GET";
+  if (req.method !== expectedMethod) {
+    state.unexpected.push(`${req.method} ${path}`);
+    return json({ message: `Expected ${expectedMethod} ${path}` }, 405);
+  }
+  const protectedPath =
+    path === "/my" ||
+    path.startsWith("/chats/") ||
+    path.startsWith("/scores/") ||
+    path === "/file/chat" ||
+    path.startsWith("/applications/") ||
+    path === "/auth/sign-out";
+  if (protectedPath && req.headers.authorization !== `Bearer ${state.activeToken}`) return json({}, 401);
+  if (path === "/__health") return json({ ok: true });
+  if (path === "/__reset") {
+    reset();
+    return json({ ok: true });
+  }
+  if (path === "/__state") return json({ ...state, rooms: Object.fromEntries(state.rooms) });
+  if (path === "/__control") {
+    const control = JSON.parse(raw);
+    if (control.push) {
+      for (let index = 0; index < control.push; index++) {
+        const message = append(control.room ?? 1, `복구 메시지 ${index + 1}`, 202);
+        if (!state.paused) broadcast(control.room ?? 1, message);
+      }
+    }
+    if (control.flushEcho) {
+      for (const { room, message } of state.pendingEchoes.splice(0)) {
+        broadcast(room, message);
+        broadcast(room, message);
+      }
+    }
+    if ("reissueStatus" in control) state.reissueStatus = control.reissueStatus;
+    for (const key of ["paused", "failRooms", "failHistory", "failUpload", "denied", "echo"]) {
+      if (key in control) state[key] = control[key];
+    }
+    if (control.paused) for (const ws of sockets.keys()) ws.close();
+    return json({ ok: true });
+  }
+  if (path === "/connect/info")
+    return json({ websocket: true, cookie_needed: false, origins: ["*:*"], entropy: 12345 });
+  if (path === "/image.png") {
+    res.writeHead(200, { "Content-Type": "image/png" });
+    res.end(png);
+    return;
+  }
+  if (path === "/auth/email/sign-in") {
+    const credentials = JSON.parse(raw);
+    if (credentials.password !== "LocalTest123!") return json({ message: "이메일 또는 비밀번호를 확인해주세요." }, 401);
+    return json({ accessToken: token, refreshToken: "fixture-only" });
+  }
+  if (path === "/auth/reissue") {
+    state.refreshes++;
+    if (state.reissueStatus !== 200) return json({ message: "fixture refresh unavailable" }, state.reissueStatus);
+    state.activeToken = `${Buffer.from('{"alg":"none"}').toString("base64url")}.${Buffer.from(JSON.stringify({ sub: "101", role: "MENTEE", home_university: "1", exp: 7258118400 })).toString("base64url")}.refreshed`;
+    return json({ accessToken: state.activeToken });
+  }
+  if (path === "/auth/sign-out") return json({});
+  if (path === "/my") {
+    if (!req.headers.authorization) return json({}, 401);
+    return json({
+      role: "MENTEE",
+      nickname: "테스트 학생",
+      email: "student@example.test",
+      authType: "EMAIL",
+      profileImageUrl: null,
+      interestedCountries: ["미국"],
+      likedUniversityCount: 0,
+      likedPostCount: 0,
+      likedMentorCount: 0,
+      homeUniversityName: "인하대학교",
+    });
+  }
+  if (path === "/chats/rooms") {
+    if (state.failRooms) return json({}, 503);
+    return json({
+      chatRooms: [1, 2].map((id) => ({
+        id,
+        partner: partner(id),
+        lastChatMessage: state.rooms.get(id).at(-1)?.content ?? "",
+        lastReceivedTime: "2026-10-01T10:00:00Z",
+        unReadCount: id,
+      })),
+    });
+  }
+  const match = path.match(/^\/chats\/rooms\/(\d+)(?:\/(partner|read))?$/);
+  if (match) {
+    const room = Number(match[1]);
+    if (state.denied || !state.rooms.has(room)) return json({}, 403);
+    if (match[2] === "partner") return json(partner(room));
+    if (match[2] === "read") {
+      state.reads++;
+      return json({});
+    }
+    if (state.failHistory) return json({}, 503);
+    const page = Number(url.searchParams.get("page") ?? 1);
+    const size = Number(url.searchParams.get("size") ?? 20);
+    const messages = [...state.rooms.get(room)].reverse();
+    return json({
+      content: messages.slice((page - 1) * size, page * size),
+      nextPageNumber: page * size < messages.length ? page + 1 : -1,
+    });
+  }
+  if (path === "/file/chat") {
+    state.uploads++;
+    if (state.failUpload) return json({}, 503);
+    const count = [...raw.matchAll(/filename="/g)].length;
+    return json(Array.from({ length: count }, () => ({ fileUrl: `http://${host}:${port}/image.png` })));
+  }
+  if (path === "/news") return json({ newsResponseList: [] });
+  if (path === "/univ-apply-infos/recommend")
+    return json({ recommendedUniversities: universities.filter((item) => item.id <= 6) });
+  if (path.startsWith("/univ-apply-infos/search/"))
+    return json({ univApplyInfoPreviews: searchUniversities(url.searchParams) });
+  const universityId = path.match(/^\/univ-apply-infos\/(\d+)$/);
+  if (universityId) {
+    const detail = universityDetail(Number(universityId[1]));
+    return detail ? json(detail) : json({}, 404);
+  }
+  if (path.startsWith("/boards/"))
+    return json([
+      {
+        id: 1,
+        title: "교환학생 준비 질문",
+        content: "지원 서류 준비는 어떻게 하나요?",
+        likeCount: 0,
+        commentCount: 0,
+        createdAt: "2026-10-01T10:00:00Z",
+        updatedAt: "2026-10-01T10:00:00Z",
+        postCategory: "질문",
+        postThumbnailUrl: null,
+        postFindSiteUserResponse: { id: 202, nickname: "테스트 멘토", profileImageUrl: null },
+      },
+    ]);
+  if (path === "/scores/gpas") return json({ homeUniversityName: "인하대학교", gpaScoreStatusResponseList: [] });
+  if (path === "/scores/language-tests") return json({ languageTestScoreStatusResponseList: [] });
+  if (path === "/applications/preview") return json({ totalUniversityCount: 0, universities: [] });
+  state.unexpected.push(`${req.method} ${path}`);
+  return json({ message: `Unimplemented fixture: ${req.method} ${path}` }, 501);
+});
+const wss = new WebSocketServer({ noServer: true });
+server.on("upgrade", (req, socket, head) => {
+  const url = new URL(req.url, `http://${host}:${port}`);
+  if (url.searchParams.get("token") !== state.activeToken) {
+    state.unexpected.push("WebSocket authentication missing or invalid");
+    socket.destroy();
+    return;
+  }
+  if (state.paused || !/^\/connect\/[^/]+\/[^/]+\/websocket$/.test(url.pathname)) {
+    socket.destroy();
+    return;
+  }
+  wss.handleUpgrade(req, socket, head, (ws) => wss.emit("connection", ws));
+});
+wss.on("connection", (ws) => {
+  sockets.set(ws, null);
+  ws.send("o");
+  ws.on("close", () => sockets.delete(ws));
+  ws.on("message", (data) => {
+    for (const frameText of JSON.parse(data.toString())) {
+      for (const frameData of frameText.split("\0")) {
+        if (!frameData.trim()) continue;
+        const [headersText, ...bodyParts] = frameData.replace(/^\n+/, "").split("\n\n");
+        const [command, ...headerLines] = headersText.split("\n");
+        const headers = Object.fromEntries(
+          headerLines.map((line) => {
+            const colon = line.indexOf(":");
+            return [line.slice(0, colon), line.slice(colon + 1)];
+          }),
+        );
+        if (command === "CONNECT" || command === "STOMP") frame(ws, "CONNECTED\nversion:1.2\nheart-beat:0,0\n\n\0");
+        if (command === "SUBSCRIBE") {
+          const subscription = headers.destination?.match(/^\/topic\/chat\/(\d+)$/);
+          if (!subscription || !state.rooms.has(Number(subscription[1]))) {
+            state.unexpected.push(`STOMP SUBSCRIBE ${headers.destination}`);
+            frame(ws, "ERROR\nmessage:Invalid subscription\n\n\0");
+            continue;
+          }
+          sockets.set(ws, { room: Number(subscription[1]), id: headers.id });
+        }
+        if (command === "SEND") {
+          const destination = headers.destination?.match(/^\/publish\/chat\/(\d+)(\/image)?$/);
+          if (!destination || !state.rooms.has(Number(destination[1]))) {
+            state.unexpected.push(`STOMP SEND ${headers.destination}`);
+            frame(ws, "ERROR\nmessage:Invalid destination\n\n\0");
+            continue;
+          }
+          const room = Number(destination[1]);
+          const body = JSON.parse(bodyParts.join("\n\n"));
+          const validPayload = destination[2]
+            ? Array.isArray(body.imageUrls) &&
+              body.imageUrls.length > 0 &&
+              body.imageUrls.every((url) => typeof url === "string")
+            : body.senderId === 101 && typeof body.content === "string" && body.content.trim().length > 0;
+          if (!validPayload) {
+            state.unexpected.push(`STOMP PAYLOAD ${headers.destination}`);
+            frame(ws, "ERROR\nmessage:Invalid payload\n\n\0");
+            continue;
+          }
+          state.sends.push({ room, ...body });
+          const attachments = (body.imageUrls ?? []).map((url, id) => ({
+            id: id + 1,
+            isImage: true,
+            url,
+            thumbnailUrl: null,
+            createdAt: "2026-10-01T12:00:00Z",
+          }));
+          const message = append(room, body.content ?? "", body.senderId ?? 101, attachments);
+          if (state.echo) broadcast(room, message);
+          else state.pendingEchoes.push({ room, message });
+        }
+        if (command === "DISCONNECT") {
+          if (headers.receipt) frame(ws, `RECEIPT\nreceipt-id:${headers.receipt}\n\n\0`);
+          ws.close();
+        }
+      }
+    }
+  });
+});
+server.listen(port, host);
+function shutdown() {
+  for (const ws of sockets.keys()) ws.terminate();
+  wss.close();
+  server.close();
+}
+process.on("SIGTERM", shutdown);
+process.on("SIGINT", shutdown);
diff --git a/apps/web/e2e/fixtures/test.ts b/apps/web/e2e/fixtures/test.ts
new file mode 100644
index 000000000..90e054b6d
--- /dev/null
+++ b/apps/web/e2e/fixtures/test.ts
@@ -0,0 +1,33 @@
+import { test as base, expect } from "@playwright/test";
+
+export const apiURL = "http://127.0.0.1:43180";
+export const test = base.extend({
+  page: async ({ page, request }, use) => {
+    await request.post(`${apiURL}/__reset`);
+    // Local assets and fixture API only. Analytics and third-party SDKs are irrelevant here.
+    await page.route("**/*", (route) => {
+      const url = new URL(route.request().url());
+      return url.hostname === "127.0.0.1" || url.protocol === "data:" || url.protocol === "blob:"
+        ? route.continue()
+        : route.abort();
+    });
+    await use(page);
+    const state = await (await request.get(`${apiURL}/__state`)).json();
+    expect(state.unexpected, "Every API request must have an explicit fixture contract").toEqual([]);
+  },
+});
+export { expect };
+
+export async function login(page: import("@playwright/test").Page) {
+  await page.goto("/login");
+  await page.getByPlaceholder("이메일", { exact: true }).fill("student@example.test");
+  await page.getByPlaceholder("비밀번호", { exact: true }).fill("LocalTest123!");
+  await page.getByRole("button", { name: "로그인", exact: true }).click();
+  await expect(page).toHaveURL("/");
+}
+export async function openChat(page: import("@playwright/test").Page) {
+  await login(page);
+  await page.goto("/mentor/chat/1");
+  await expect(page.getByText("실시간으로 연결되어 있어요.")).toBeVisible();
+  await expect(page.getByText("기존 메시지 45", { exact: true })).toBeVisible();
+}
diff --git a/apps/web/e2e/fixtures/universities.mjs b/apps/web/e2e/fixtures/universities.mjs
new file mode 100644
index 000000000..8adceb9d9
--- /dev/null
+++ b/apps/web/e2e/fixtures/universities.mjs
@@ -0,0 +1,54 @@
+const homes = ["인하대학교", "경희대학교", "중앙대학교"];
+export const universities = homes.flatMap((homeUniversityName, homeIndex) =>
+  Array.from({ length: 48 }, (_, index) => ({
+    id: homeIndex * 100 + index + 1,
+    homeUniversityName,
+    term: "2027-1",
+    koreanName:
+      index === 0
+        ? "매우 긴 이름의 국제 교환학생 파견 프로그램을 운영하는 테스트 대학교"
+        : `테스트 파견대학교 ${index + 1}`,
+    englishName: `Test University ${index + 1}`,
+    country: index % 2 === 0 ? "독일" : "미국",
+    region: index % 2 === 0 ? "유럽권" : "미주권",
+    logoImageUrl: "/svgs/placeholders/university-logo-placeholder.svg",
+    backgroundImageUrl: "/svgs/placeholders/university-background-placeholder.svg",
+    studentCapacity: (index % 5) + 1,
+    languageRequirements: [
+      { languageTestType: "TOEFL_IBT", minScore: "80" },
+      { languageTestType: "IELTS", minScore: "6.0" },
+      { languageTestType: "TOEIC", minScore: "800" },
+    ],
+  })),
+);
+export function searchUniversities(params) {
+  const home = Number(params.get("homeUniversityId"));
+  const query = params.get("value") ?? "";
+  return universities.filter(
+    (university) =>
+      (!home || university.homeUniversityName === homes[home - 1]) && university.koreanName.includes(query),
+  );
+}
+export function universityDetail(id) {
+  const university = universities.find((item) => item.id === id);
+  if (!university) return null;
+  return {
+    ...university,
+    formatName: university.englishName,
+    homepageUrl: "https://example.test",
+    detailsForLocal: "예시 지역 안내",
+    tuitionFeeType: "HOME_UNIVERSITY",
+    semesterAvailableForDispatch: "1학기",
+    detailsForLanguage: "어학 성적을 제출해주세요.",
+    gpaRequirement: "3.0",
+    gpaRequirementCriteria: "4.5",
+    semesterRequirement: "2학기",
+    detailsForApply: "예시 지원 조건",
+    detailsForMajor: "전공별 조건을 확인해주세요.",
+    detailsForAccommodation: "기숙사 안내",
+    accommodationUrl: "https://example.test/accommodation",
+    detailsForEnglishCourse: "영어 강의 안내",
+    englishCourseUrl: "https://example.test/courses",
+    details: "예시 대학 정보",
+  };
+}
diff --git a/apps/web/e2e/responsive.spec.ts b/apps/web/e2e/responsive.spec.ts
new file mode 100644
index 000000000..4aaefcdea
--- /dev/null
+++ b/apps/web/e2e/responsive.spec.ts
@@ -0,0 +1,135 @@
+import { expect, login, openChat, test } from "./fixtures/test";
+
+const widths = [390, 767, 768, 1024, 1280, 1440, 1536];
+async function noHorizontalOverflow(page: import("@playwright/test").Page) {
+  await expect
+    .poll(() => page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth))
+    .toBeLessThanOrEqual(1);
+}
+
+test("홈 탐색과 카드가 앱과 웹 경계에서 겹치거나 잘리지 않는다", async ({ page }) => {
+  await page.goto("/");
+  for (const width of widths) {
+    await test.step(`${width}px`, async () => {
+      await page.setViewportSize({ width, height: 1000 });
+      const desktop = page.getByRole("navigation", { name: "주요 메뉴", includeHidden: true });
+      const bottom = page.getByRole("navigation", { name: "하단 메뉴", includeHidden: true });
+      if (width >= 768) {
+        await expect(desktop).toBeVisible();
+        await expect(bottom).toBeHidden();
+      } else {
+        await expect(desktop).toBeHidden();
+        await expect(bottom).toBeVisible();
+      }
+      await expect(page.getByRole("link", { name: "학교 검색하기", exact: true })).toBeVisible();
+      await noHorizontalOverflow(page);
+      if (width < 768) {
+        const card = page.getByRole("link", {
+          name: "매우 긴 이름의 국제 교환학생 파견 프로그램을 운영하는 테스트 대학교",
+          exact: true,
+        });
+        const cardBox = (await card.boundingBox())!;
+        const arrow = (await card.locator("svg").last().boundingBox())!;
+        expect(arrow.x + arrow.width).toBeLessThanOrEqual(cardBox.x + cardBox.width);
+      }
+      if (width >= 768) {
+        const cards = page.locator('a[href="/university/inha/1"]');
+        await expect(cards.first()).toBeVisible();
+        expect((await cards.first().boundingBox())!.width).toBeGreaterThanOrEqual(220);
+      }
+      if ([390, 768, 1440].includes(width))
+        await page.screenshot({ caret: "initial", path: test.info().outputPath(`home-${width}.png`), fullPage: true });
+    });
+  }
+});
+
+test("767와 768 경계를 넘어도 학교와 어학 및 국가 조건을 보존한다", async ({ page }) => {
+  await page.setViewportSize({ width: 767, height: 1000 });
+  await page.goto("/");
+  const form = page.getByRole("region", { name: "파견학교 검색" });
+  await form.getByRole("button", { name: "경희대", exact: true }).click();
+  await form.getByRole("button", { name: /어학.*선택/ }).click();
+  await page.getByRole("button", { name: "인터넷 기반 영어 시험 (TOEFL iBT)", exact: true }).click();
+  await form
+    .getByRole("button", { name: /관심있는 나라.*나라/ })
+    .first()
+    .click();
+  await page.getByRole("button", { name: "독일", exact: true }).click();
+  const search = page.getByRole("link", { name: "학교 검색하기", exact: true });
+  const href = await search.getAttribute("href");
+  expect(href).toContain("/university/kyunghee?");
+  for (const width of [768, 1440, 390, 767]) {
+    await page.setViewportSize({ width, height: 1000 });
+    await expect(search).toHaveAttribute("href", href!);
+    await expect(form.getByRole("button", { name: "경희대", exact: true })).toHaveAttribute("aria-pressed", "true");
+  }
+  await search.click();
+  await expect(page).toHaveURL(href!);
+  await noHorizontalOverflow(page);
+});
+
+test("대학 목록에서 폭을 바꾸고 검색과 빈 결과 및 초기화를 처리한다", async ({ page }) => {
+  await page.goto("/university/inha");
+  for (const width of widths) {
+    await page.setViewportSize({ width, height: 1000 });
+    await expect(page.getByRole("link").filter({ hasText: "매우 긴 이름의 국제" }).first()).toBeVisible();
+    await noHorizontalOverflow(page);
+    if ([390, 768, 1440].includes(width))
+      await page.screenshot({ caret: "initial", path: test.info().outputPath(`catalog-${width}.png`) });
+  }
+  const search = page.getByPlaceholder("학교명 또는 국가 검색").filter({ visible: true });
+  await search.fill("아무 결과도 없는 검색어");
+  await expect(page.getByText("검색 결과가 없습니다.", { exact: true }).filter({ visible: true })).toBeVisible();
+  await search.fill("");
+  await expect(page.getByRole("link").filter({ hasText: "매우 긴 이름의 국제" }).first()).toBeVisible();
+});
+
+test("로그인 입력이 화면 전환에도 유지되고 로그인을 완료한다", async ({ page }) => {
+  await page.setViewportSize({ width: 767, height: 1000 });
+  await page.goto("/login");
+  await page.getByPlaceholder("이메일", { exact: true }).fill("student@example.test");
+  await page.getByPlaceholder("비밀번호", { exact: true }).fill("LocalTest123!");
+  for (const width of [768, 1024, 1440, 390]) {
+    await page.setViewportSize({ width, height: 1000 });
+    await expect(page.getByPlaceholder("이메일", { exact: true })).toHaveValue("student@example.test");
+    await expect(page.getByPlaceholder("비밀번호", { exact: true })).toHaveValue("LocalTest123!");
+    await noHorizontalOverflow(page);
+    if (width === 1440)
+      await page.screenshot({ caret: "initial", path: test.info().outputPath(`login-${width}.png`), fullPage: true });
+  }
+  await page.getByRole("button", { name: "로그인", exact: true }).click();
+  await expect(page).toHaveURL("/");
+});
+
+test("채팅 작성기와 참여자 탐색이 모든 폭에서 화면 안에 있다", async ({ page }) => {
+  await openChat(page);
+  const input = page.getByRole("textbox", { name: "메시지", exact: true });
+  await input.fill("화면을 바꿔도 보존할 초안");
+  for (const width of widths) {
+    await page.setViewportSize({ width, height: 1000 });
+    await expect(input).toHaveValue("화면을 바꿔도 보존할 초안");
+    await expect(page.getByText("참여자", { exact: true })).toBeVisible();
+    const composer = (await page.getByRole("form", { name: "채팅 메시지 작성" }).boundingBox())!;
+    expect(composer.x).toBeGreaterThanOrEqual(0);
+    expect(composer.x + composer.width).toBeLessThanOrEqual(width);
+    expect(composer.y + composer.height).toBeLessThanOrEqual(1000);
+    await noHorizontalOverflow(page);
+    if ([390, 768, 1440].includes(width))
+      await page.screenshot({ caret: "initial", path: test.info().outputPath(`chat-${width}.png`), fullPage: true });
+  }
+  await page.getByRole("button", { name: "메시지 보내기" }).click();
+  await expect(page.locator("[data-message-key]").filter({ hasText: "화면을 바꿔도 보존할 초안" })).toHaveCount(1);
+});
+
+test("마이페이지의 프로필과 작업 메뉴가 앱과 웹에서 접근 가능하다", async ({ page }) => {
+  await login(page);
+  await page.goto("/my");
+  for (const width of widths) {
+    await page.setViewportSize({ width, height: 1000 });
+    await expect(page.getByText(/테스트 학생/).first()).toBeVisible();
+    await expect(page.getByRole("link", { name: "공인 어학 / 학점 변경", exact: true })).toBeVisible();
+    await noHorizontalOverflow(page);
+    if ([390, 1440].includes(width))
+      await page.screenshot({ caret: "initial", path: test.info().outputPath(`my-${width}.png`), fullPage: true });
+  }
+});
diff --git a/apps/web/e2e/web-flows.spec.ts b/apps/web/e2e/web-flows.spec.ts
new file mode 100644
index 000000000..5c30eaea0
--- /dev/null
+++ b/apps/web/e2e/web-flows.spec.ts
@@ -0,0 +1,102 @@
+import { apiURL, expect, login, test } from "./fixtures/test";
+
+test("홈에서 학교 검색 링크와 준비중 안내를 제공한다", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: /파견 ?학교 (찾기|검색)/ })).toBeVisible();
+  await expect(page.getByRole("link").filter({ hasText: "학교 검색" }).first()).toHaveAttribute(
+    "href",
+    "/university/inha",
+  );
+  if (test.info().project.name === "mobile") {
+    await page.getByRole("button", { name: /작년도 합격 점수 확인하러 가기/ }).click();
+    await expect(page.getByText("해당 기능은 현재 준비중입니다.")).toBeVisible();
+  } else {
+    await expect(page.getByRole("link", { name: "전체 파견학교", exact: true })).toHaveAttribute("href", "/university");
+  }
+});
+
+test("이메일 로그인 실패 후 입력을 수정해 로그인하고 마이페이지를 연다", async ({ page }) => {
+  await page.goto("/login");
+  await page.getByPlaceholder("이메일", { exact: true }).fill("student@example.test");
+  await page.getByPlaceholder("비밀번호", { exact: true }).fill("wrong-password");
+  await page.getByRole("button", { name: "로그인", exact: true }).click();
+  await expect(page.getByText("이메일 또는 비밀번호를 확인해주세요.")).toBeVisible();
+  await expect(page.getByPlaceholder("이메일", { exact: true })).toHaveValue("student@example.test");
+  await page.getByPlaceholder("비밀번호", { exact: true }).fill("LocalTest123!");
+  await page.getByRole("button", { name: "로그인", exact: true }).click();
+  await expect(page).toHaveURL("/");
+  await page.getByRole("link", { name: "마이 페이지로 이동", exact: true }).click();
+  await expect(page).toHaveURL("/my");
+  await expect(page.getByText(/테스트 학생/).first()).toBeVisible();
+});
+
+for (const path of ["/my", "/mentor"]) {
+  test(`비회원의 ${path} 진입은 로그인으로 안내한다`, async ({ page }) => {
+    await page.goto(path);
+    await expect(page).toHaveURL("/login");
+    await expect(page.getByPlaceholder("이메일", { exact: true })).toBeVisible();
+  });
+}
+
+test("비회원 채팅은 로그인 링크만 제공하고 채팅 API를 호출하지 않는다", async ({ page, request }) => {
+  await page.goto("/mentor/chat/1");
+  await expect(page.getByText("채팅하려면 로그인이 필요해요.")).toBeVisible();
+  await expect(page.getByRole("link", { name: "로그인하기", exact: true })).toHaveAttribute("href", "/login");
+  await expect(page.getByRole("form", { name: "채팅 메시지 작성" })).toHaveCount(0);
+  expect((await (await request.get(`${apiURL}/__state`)).json()).reads).toBe(0);
+});
+
+test("커뮤니티에서 글쓰기를 누르면 로그인 후 원래 작성 화면으로 돌아온다", async ({ page }) => {
+  await page.goto("/community");
+  await expect(page).toHaveURL("/community/FREE");
+  await expect(page.getByText("교환학생 준비 질문", { exact: true })).toBeVisible();
+  await page.getByRole("button", { name: "글쓰기", exact: true }).click();
+  await expect(page).toHaveURL(/\/login\?redirect=/);
+  await page.getByPlaceholder("이메일", { exact: true }).fill("student@example.test");
+  await page.getByPlaceholder("비밀번호", { exact: true }).fill("LocalTest123!");
+  await page.getByRole("button", { name: "로그인", exact: true }).click();
+  await expect(page).toHaveURL("/community/FREE/create");
+  await expect(page.getByPlaceholder("제목을 입력하세요")).toBeVisible();
+});
+
+test("성적 화면에서 공인어학과 학점 탭을 전환하고 입력으로 이동한다", async ({ page }) => {
+  await login(page);
+  await page.goto("/university/score");
+  await expect(page.getByText("아직 등록된 성적이 없어요.", { exact: false })).toBeVisible();
+  await page.getByRole("button", { name: "학점", exact: true }).click();
+  await expect(page.getByRole("button", { name: "학점 입력하기" })).toBeVisible();
+  await page.getByRole("button", { name: "공인어학", exact: true }).click();
+  await page.getByRole("button", { name: "어학 성적 입력하기" }).click();
+  await expect(page).toHaveURL("/university/score/submit/language-test");
+});
+
+test("비회원 지원자 현황에서 로그인으로 이동한다", async ({ page }) => {
+  await page.goto("/university/application");
+  await expect(page.getByText("로그인하고 지금 바로 경쟁률을 확인하세요.")).toBeVisible();
+  await page.getByRole("link", { name: "로그인하러가기" }).click();
+  await expect(page).toHaveURL("/login");
+});
+
+test("약관과 잘못된 채팅방 주소를 안전하게 표시한다", async ({ page }) => {
+  await page.goto("/terms");
+  await expect(
+    page
+      .getByRole("paragraph")
+      .filter({ hasText: /^제1조 \(목적\)$/ })
+      .filter({ visible: true }),
+  ).toBeVisible();
+  await page.goto("/mentor/chat/not-a-number");
+  await expect(page.getByText("존재하지 않는 페이지입니다", { exact: true })).toBeVisible();
+  await expect(page.getByRole("form", { name: "채팅 메시지 작성" })).toHaveCount(0);
+});
+
+test("로그아웃 후에는 개인 채팅 기록에 다시 접근할 수 없다", async ({ page }) => {
+  await login(page);
+  await page.goto("/my");
+  await expect(page.getByText(/테스트 학생/).first()).toBeVisible();
+  await page.getByRole("button", { name: "로그아웃", exact: true }).click();
+  await expect(page).toHaveURL("/");
+  await page.goto("/mentor/chat/1");
+  await expect(page.getByText("채팅하려면 로그인이 필요해요.")).toBeVisible();
+  await expect(page.locator("[data-message-key]")).toHaveCount(0);
+});
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
index b75f81a30..334a8e660 100644
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -59,6 +59,7 @@ const nextConfig = {
     remotePatterns: imageRemotePatterns,
     formats: ["image/avif", "image/webp"],
     deviceSizes: [360, 640, 768, 1024, 1280],
+    qualities: [50, 55, 60, 75],
   },
   // 압축 활성화
   compress: true,
diff --git a/apps/web/package.json b/apps/web/package.json
index be7a557a5..153afbc4b 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -13,8 +13,15 @@
     "format:check": "biome format .",
     "typecheck": "tsc --noEmit",
     "typecheck:ci": "tsc --noEmit -p tsconfig.ci.json",
-    "ci:check": "pnpm run lint:check && pnpm run typecheck:ci",
-    "analyze": "ANALYZE=true next build --webpack"
+    "ci:check": "pnpm run lint:check && pnpm run typecheck:ci && pnpm run test:chat",
+    "test": "vitest run --config vitest.config.ts",
+    "test:chat": "vitest run --config vitest.config.ts src/lib/chat src/apis/chat src/app/mentor/chat src/utils/axiosInstance.chat.test.ts src/utils/axiosInstance.session.test.ts",
+    "analyze": "ANALYZE=true next build --webpack",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "storybook": "storybook dev -p 6006 --disable-telemetry",
+    "build:storybook": "storybook build --disable-telemetry",
+    "test:stories": "vitest run --config vitest.storybook.config.ts"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
@@ -51,15 +58,29 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^16.2.9",
+    "@playwright/test": "1.64.1",
+    "@storybook/addon-docs": "10.6.5",
+    "@storybook/addon-vitest": "10.6.5",
+    "@storybook/nextjs-vite": "10.6.5",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^20.11.19",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
+    "@types/ws": "8",
+    "@vitest/browser-playwright": "4.1.9",
     "autoprefixer": "^10.4.20",
     "babel-plugin-react-compiler": "1.0.0",
     "critters": "^0.0.23",
+    "jsdom": "^29.1.1",
     "postcss": "^8.4.45",
+    "storybook": "10.6.5",
     "tailwindcss": "^3.4.10",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vite": "8.0.3",
+    "vite-plugin-svgr": "4.5.0",
+    "vitest": "^4.1.9",
+    "ws": "8"
   }
 }
diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
new file mode 100644
index 000000000..079315e5c
--- /dev/null
+++ b/apps/web/playwright.config.ts
@@ -0,0 +1,54 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: false,
+  // One local fixture owns the chat rooms. Keep resets isolated across projects.
+  workers: 1,
+  forbidOnly: Boolean(process.env.CI),
+  retries: process.env.CI ? 1 : 0,
+  timeout: 45_000,
+  expect: { timeout: 10_000 },
+  reporter: [["list"], ["html", { open: "never" }]],
+  use: {
+    baseURL: "http://127.0.0.1:43181",
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+  },
+  projects: [
+    { name: "desktop", testIgnore: "**/responsive.spec.ts", use: { ...devices["Desktop Chrome"] } },
+    {
+      name: "mobile",
+      testIgnore: "**/responsive.spec.ts",
+      use: { ...devices["Pixel 7"], viewport: { width: 390, height: 844 } },
+    },
+    { name: "responsive", testMatch: "**/responsive.spec.ts", use: { ...devices["Desktop Chrome"] } },
+  ],
+  webServer: [
+    { command: "node e2e/fixtures/server.mjs", url: "http://127.0.0.1:43180/__health", reuseExistingServer: false },
+    {
+      command: "pnpm --filter @solid-connect/university-web exec next dev --hostname 127.0.0.1 --port 43182",
+      url: "http://127.0.0.1:43182/university/inha",
+      reuseExistingServer: false,
+      timeout: 120_000,
+      env: {
+        NEXT_PUBLIC_API_SERVER_URL: "http://127.0.0.1:43180",
+        NEXT_TELEMETRY_DISABLED: "1",
+        SENTRY_AUTH_TOKEN: "",
+      },
+    },
+    {
+      command: "pnpm exec next dev --hostname 127.0.0.1 --port 43181",
+      url: "http://127.0.0.1:43181/login",
+      reuseExistingServer: false,
+      timeout: 120_000,
+      env: {
+        NEXT_PUBLIC_API_SERVER_URL: "http://127.0.0.1:43180",
+        UNIVERSITY_WEB_DOMAIN: "http://127.0.0.1:43182",
+        NEXT_TELEMETRY_DISABLED: "1",
+        SENTRY_AUTH_TOKEN: "",
+      },
+    },
+  ],
+});
diff --git a/apps/web/src/apis/Auth/server/postReissueToken.ts b/apps/web/src/apis/Auth/server/postReissueToken.ts
index d7d350389..0c93b8bc9 100644
--- a/apps/web/src/apis/Auth/server/postReissueToken.ts
+++ b/apps/web/src/apis/Auth/server/postReissueToken.ts
@@ -1,4 +1,3 @@
-import useAuthStore from "@/lib/zustand/useAuthStore";
 import { publicAxiosInstance } from "@/utils/axiosInstance";
 import { isTokenExpired } from "@/utils/jwtUtils";
 
@@ -7,26 +6,17 @@ import { isTokenExpired } from "@/utils/jwtUtils";
  * axiosInstance의 interceptor에서 사용됨
  */
 const postReissueToken = async (): Promise<string> => {
-  try {
-    const response = await publicAxiosInstance.post<{ accessToken: string }>("/auth/reissue");
-    const newAccessToken = response.data.accessToken;
+  const response = await publicAxiosInstance.post<{ accessToken: string }>("/auth/reissue");
+  const newAccessToken = response.data.accessToken;
 
-    if (!newAccessToken) {
-      throw new Error("재발급된 토큰이 유효하지 않습니다.");
-    }
-    if (isTokenExpired(newAccessToken)) {
-      throw new Error("재발급된 토큰이 이미 만료되었습니다.");
-    }
-
-    // 재발급 성공 시, 새로운 토큰을 Zustand 스토어에 저장
-    useAuthStore.getState().setAccessToken(newAccessToken);
-
-    return newAccessToken;
-  } catch (error) {
-    // 재발급 실패 시 스토어 상태 초기화
-    useAuthStore.getState().clearAccessToken();
-    throw error;
+  if (!newAccessToken) {
+    throw new Error("재발급된 토큰이 유효하지 않습니다.");
   }
+  if (isTokenExpired(newAccessToken)) {
+    throw new Error("재발급된 토큰이 이미 만료되었습니다.");
+  }
+
+  return newAccessToken;
 };
 
 export default postReissueToken;
diff --git a/apps/web/src/apis/MyPage/postConfirmSchoolEmail.ts b/apps/web/src/apis/MyPage/postConfirmSchoolEmail.ts
index f1138b2cd..235b30168 100644
--- a/apps/web/src/apis/MyPage/postConfirmSchoolEmail.ts
+++ b/apps/web/src/apis/MyPage/postConfirmSchoolEmail.ts
@@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { postReissueToken } from "@/apis/Auth";
 import { SKIP_GLOBAL_ERROR_TOAST_META } from "@/lib/react-query/errorToastMeta";
+import { refreshAccessToken } from "@/utils/axiosInstance";
 import { QueryKeys } from "../queryKeys";
 import { myPageApi, type SchoolEmailConfirmPostRequest } from "./api";
 
@@ -14,7 +14,7 @@ const usePostConfirmSchoolEmail = () => {
     meta: SKIP_GLOBAL_ERROR_TOAST_META,
     onSuccess: async () => {
       try {
-        await postReissueToken();
+        await refreshAccessToken();
       } catch {
         // 학교 인증은 이미 완료되었으므로 토큰 갱신 실패가 성공 흐름을 막지 않게 합니다.
       }
diff --git a/apps/web/src/apis/chat/api.test.ts b/apps/web/src/apis/chat/api.test.ts
new file mode 100644
index 000000000..7ba2f96aa
--- /dev/null
+++ b/apps/web/src/apis/chat/api.test.ts
@@ -0,0 +1,70 @@
+import { AxiosHeaders } from "axios";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { axiosInstance } from "@/utils/axiosInstance";
+import { chatApi } from "./api";
+
+vi.mock("@/utils/axiosInstance", () => ({
+  axiosInstance: { get: vi.fn(), put: vi.fn() },
+}));
+
+const resolveHistory = (data: unknown) =>
+  vi.mocked(axiosInstance.get).mockResolvedValueOnce({
+    data,
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    config: { headers: new AxiosHeaders() },
+  });
+
+describe("chatApi.getChatHistories", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("accepts an empty page that still points to the next page", async () => {
+    resolveHistory({ content: [], nextPageNumber: 2 });
+    await expect(chatApi.getChatHistories({ roomId: 1 })).resolves.toEqual({ content: [], nextPageNumber: 2 });
+  });
+
+  it("keeps page one as the default and passes the cancellation signal to Axios", async () => {
+    resolveHistory({ content: [], nextPageNumber: -1 });
+    const controller = new AbortController();
+    await chatApi.getChatHistories({ roomId: 1, signal: controller.signal });
+
+    expect(axiosInstance.get).toHaveBeenCalledWith("/chats/rooms/1", {
+      params: { page: 1, size: 20 },
+      signal: controller.signal,
+    });
+  });
+
+  it.each([
+    0,
+    1,
+    -2,
+    1.5,
+    Number.POSITIVE_INFINITY,
+    "2",
+    null,
+    undefined,
+  ])("rejects a cursor that cannot advance from page one: %j", async (nextPageNumber) => {
+    resolveHistory({ content: [], nextPageNumber });
+    await expect(chatApi.getChatHistories({ roomId: 1 })).rejects.toThrow();
+  });
+
+  it("fails the page if even one malformed message is present", async () => {
+    const valid = { id: 1, content: "정상 메시지", senderId: 1, createdAt: "2026-10-27T01:00:00Z" };
+    resolveHistory({ content: [valid, { ...valid, id: 2, createdAt: "invalid" }], nextPageNumber: -1 });
+
+    await expect(chatApi.getChatHistories({ roomId: 1 })).rejects.toThrow("올바르지 않은 메시지");
+  });
+
+  it.each([
+    null,
+    {},
+    { content: null, nextPageNumber: -1 },
+    { content: {}, nextPageNumber: -1 },
+  ])("rejects a malformed history envelope: %j", async (data) => {
+    resolveHistory(data);
+    await expect(chatApi.getChatHistories({ roomId: 1 })).rejects.toThrow("채팅 내역 응답");
+  });
+});
diff --git a/apps/web/src/apis/chat/api.ts b/apps/web/src/apis/chat/api.ts
index 28f58de60..5fc21bfbb 100644
--- a/apps/web/src/apis/chat/api.ts
+++ b/apps/web/src/apis/chat/api.ts
@@ -2,21 +2,13 @@ import type { AxiosResponse } from "axios";
 import type { ChatMessage, ChatPartner, ChatRoom } from "@/types/chat";
 import { axiosInstance } from "@/utils/axiosInstance";
 import {
-  normalizeChatMessage,
   normalizeChatPartner,
   normalizeChatRoom,
-  type RawChatMessage,
+  parseChatMessage,
   type RawChatPartner,
   type RawChatRoom,
 } from "./normalize";
 
-// QueryKeys for chat domain
-export const ChatQueryKeys = {
-  chatRooms: "chatRooms",
-  chatHistories: "chatHistories",
-  partnerInfo: "partnerInfo",
-} as const;
-
 // Re-export types from @/types/chat
 export type { ChatMessage, ChatRoom, ChatPartner };
 
@@ -33,11 +25,12 @@ interface GetChatHistoriesParams {
   roomId: number;
   size?: number;
   page?: number;
+  signal?: AbortSignal;
 }
 
 interface RawChatHistoriesResponse {
   nextPageNumber: number;
-  content: RawChatMessage[];
+  content: unknown[];
 }
 
 interface RawChatRoomListResponse {
@@ -45,33 +38,51 @@ interface RawChatRoomListResponse {
 }
 
 export const chatApi = {
-  getChatHistories: async ({ roomId, size = 20, page = 1 }: GetChatHistoriesParams): Promise<ChatHistoriesResponse> => {
+  getChatHistories: async ({
+    roomId,
+    size = 20,
+    page = 1,
+    signal,
+  }: GetChatHistoriesParams): Promise<ChatHistoriesResponse> => {
     const res = await axiosInstance.get<RawChatHistoriesResponse>(`/chats/rooms/${roomId}`, {
       params: {
         size,
         page,
       },
+      signal,
     });
-    return {
-      nextPageNumber: res.data.nextPageNumber,
-      content: (res.data.content ?? []).map(normalizeChatMessage),
-    };
+    const nextPageNumber = res.data?.nextPageNumber;
+    if (
+      !Array.isArray(res.data?.content) ||
+      (nextPageNumber !== -1 && (!Number.isSafeInteger(nextPageNumber) || nextPageNumber <= page))
+    ) {
+      throw new Error("채팅 내역 응답이 올바르지 않습니다.");
+    }
+
+    const content: ChatMessage[] = [];
+    for (const rawMessage of res.data.content) {
+      const message = parseChatMessage(rawMessage);
+      if (!message) throw new Error("채팅 내역에 올바르지 않은 메시지가 있습니다.");
+      content.push(message);
+    }
+
+    return { nextPageNumber, content };
   },
 
-  getChatRooms: async (): Promise<ChatRoomListResponse> => {
-    const res = await axiosInstance.get<RawChatRoomListResponse>("/chats/rooms");
+  getChatRooms: async (signal?: AbortSignal): Promise<ChatRoomListResponse> => {
+    const res = await axiosInstance.get<RawChatRoomListResponse>("/chats/rooms", { signal });
     return {
       chatRooms: (res.data.chatRooms ?? []).map(normalizeChatRoom),
     };
   },
 
-  putReadChatRoom: async (roomId: number): Promise<void> => {
-    const response: AxiosResponse<void> = await axiosInstance.put(`/chats/rooms/${roomId}/read`);
+  putReadChatRoom: async (roomId: number, signal?: AbortSignal): Promise<void> => {
+    const response: AxiosResponse<void> = await axiosInstance.put(`/chats/rooms/${roomId}/read`, undefined, { signal });
     return response.data;
   },
 
-  getChatPartner: async (roomId: number): Promise<ChatPartner> => {
-    const res = await axiosInstance.get<RawChatPartner>(`/chats/rooms/${roomId}/partner`);
+  getChatPartner: async (roomId: number, signal?: AbortSignal): Promise<ChatPartner> => {
+    const res = await axiosInstance.get<RawChatPartner>(`/chats/rooms/${roomId}/partner`, { signal });
     return normalizeChatPartner(res.data);
   },
 };
diff --git a/apps/web/src/apis/chat/auth.test.ts b/apps/web/src/apis/chat/auth.test.ts
new file mode 100644
index 000000000..89967c1f1
--- /dev/null
+++ b/apps/web/src/apis/chat/auth.test.ts
@@ -0,0 +1,38 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getChatUserId } from "./auth";
+
+const token = (sub: unknown, exp: unknown = Math.floor(Date.now() / 1000) + 60) =>
+  `header.${btoa(JSON.stringify({ sub, exp }))}.signature`;
+
+describe("getChatUserId", () => {
+  beforeEach(() => {
+    vi.stubGlobal("window", {});
+  });
+
+  it("uses the same user identity for numeric and string JWT subjects", () => {
+    expect(getChatUserId(token(42))).toBe(42);
+    expect(getChatUserId(token("42"))).toBe(42);
+  });
+
+  it.each([
+    undefined,
+    null,
+    "",
+    0,
+    -1,
+    1.5,
+    "invalid",
+    true,
+    [1],
+    Number.MAX_SAFE_INTEGER + 1,
+  ])("does not enable personal chat data for an invalid subject: %j", (sub) => {
+    expect(getChatUserId(token(sub))).toBeNull();
+  });
+
+  it("rejects missing and expired tokens including the exact expiry boundary", () => {
+    expect(getChatUserId(null)).toBeNull();
+    expect(getChatUserId("invalid")).toBeNull();
+    expect(getChatUserId(token(42, Math.floor(Date.now() / 1000)))).toBeNull();
+    expect(getChatUserId(token(42, "9999999999"))).toBeNull();
+  });
+});
diff --git a/apps/web/src/apis/chat/auth.ts b/apps/web/src/apis/chat/auth.ts
new file mode 100644
index 000000000..1fff512ea
--- /dev/null
+++ b/apps/web/src/apis/chat/auth.ts
@@ -0,0 +1,29 @@
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import { tokenParse } from "@/utils/jwtUtils";
+
+export const getChatUserId = (accessToken: string | null): number | null => {
+  const payload = tokenParse(accessToken);
+  const userId = Number(payload?.sub);
+
+  if (
+    !payload ||
+    (typeof payload.sub !== "number" && typeof payload.sub !== "string") ||
+    !Number.isSafeInteger(userId) ||
+    userId <= 0 ||
+    typeof payload.exp !== "number" ||
+    !Number.isFinite(payload.exp) ||
+    payload.exp <= Math.floor(Date.now() / 1000)
+  ) {
+    return null;
+  }
+
+  return userId;
+};
+
+export const useChatUserId = (): number | null => {
+  const accessToken = useAuthStore((state) => state.accessToken);
+  const isInitialized = useAuthStore((state) => state.isInitialized);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
+  return isInitialized && isAuthenticated ? getChatUserId(accessToken) : null;
+};
diff --git a/apps/web/src/apis/chat/getChatMessages.ts b/apps/web/src/apis/chat/getChatMessages.ts
deleted file mode 100644
index 2d14dc061..000000000
--- a/apps/web/src/apis/chat/getChatMessages.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
-import type { AxiosError } from "axios";
-import { type ChatHistoriesResponse, type ChatMessage, ChatQueryKeys, chatApi } from "./api";
-
-/**
- * @description 채팅 히스토리를 무한 스크롤로 가져오는 훅
- */
-const useGetChatHistories = (roomId: number, size: number = 20) => {
-  return useInfiniteQuery<
-    ChatHistoriesResponse,
-    AxiosError,
-    {
-      pages: ChatHistoriesResponse[];
-      pageParams: number[];
-      messages: ChatMessage[];
-    },
-    [string, number],
-    number
-  >({
-    queryKey: [ChatQueryKeys.chatHistories, roomId],
-    queryFn: ({ pageParam = 1 }: { pageParam?: number }) => chatApi.getChatHistories({ roomId, size, page: pageParam }),
-    initialPageParam: 1,
-    getNextPageParam: (lastPage: ChatHistoriesResponse) => {
-      // nextPageNumber가 -1이면 더 이상 페이지가 없음
-      return lastPage.nextPageNumber === -1 ? undefined : lastPage.nextPageNumber;
-    },
-    staleTime: 1000 * 60 * 5, // 5분간 캐시
-    refetchOnMount: "always",
-    enabled: !!roomId, // roomId가 있을 때만 쿼리 실행
-    select: (data) => ({
-      pages: data.pages,
-      pageParams: data.pageParams,
-      messages: data.pages.flatMap((page) => page.content),
-    }),
-  });
-};
-
-export default useGetChatHistories;
diff --git a/apps/web/src/apis/chat/getChatPartner.ts b/apps/web/src/apis/chat/getChatPartner.ts
index 56be7d482..1ac3161c0 100644
--- a/apps/web/src/apis/chat/getChatPartner.ts
+++ b/apps/web/src/apis/chat/getChatPartner.ts
@@ -1,16 +1,19 @@
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { type ChatPartner, ChatQueryKeys, chatApi } from "./api";
+import { SKIP_GLOBAL_ERROR_TOAST_META } from "@/lib/react-query/errorToastMeta";
+import { type ChatPartner, chatApi } from "./api";
+import { chatKeys } from "./queryKeys";
 
 /**
  * @description 채팅 상대방 정보를 가져오는 훅
  */
-const useGetPartnerInfo = (roomId: number) => {
+const useGetPartnerInfo = (roomId: number, userId: number) => {
   return useQuery<ChatPartner, AxiosError>({
-    queryKey: [ChatQueryKeys.partnerInfo, roomId],
-    queryFn: () => chatApi.getChatPartner(roomId),
+    queryKey: chatKeys.partner(userId, roomId),
+    queryFn: ({ signal }) => chatApi.getChatPartner(roomId, signal),
     staleTime: 1000 * 60 * 5,
-    enabled: !!roomId,
+    enabled: Number.isSafeInteger(userId) && userId > 0 && Number.isSafeInteger(roomId) && roomId > 0,
+    meta: SKIP_GLOBAL_ERROR_TOAST_META,
   });
 };
 
diff --git a/apps/web/src/apis/chat/getChatRooms.ts b/apps/web/src/apis/chat/getChatRooms.ts
index b96a43d25..0f39785ef 100644
--- a/apps/web/src/apis/chat/getChatRooms.ts
+++ b/apps/web/src/apis/chat/getChatRooms.ts
@@ -1,15 +1,26 @@
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { ChatQueryKeys, type ChatRoom, type ChatRoomListResponse, chatApi } from "./api";
+import { SKIP_GLOBAL_ERROR_TOAST_META } from "@/lib/react-query/errorToastMeta";
+import { type ChatRoom, type ChatRoomListResponse, chatApi } from "./api";
+import { useChatUserId } from "./auth";
+import { chatKeys } from "./queryKeys";
 
 /**
  * @description 채팅방 목록을 가져오는 훅
  */
-const useGetChatRooms = () => {
+const useGetChatRooms = (contextUserId?: number) => {
+  const authenticatedUserId = useChatUserId();
+  const userId = contextUserId ?? authenticatedUserId;
+
   return useQuery<ChatRoomListResponse, AxiosError, ChatRoom[]>({
-    queryKey: [ChatQueryKeys.chatRooms],
-    queryFn: chatApi.getChatRooms,
-    staleTime: 1000 * 60 * 5, // 5분간 캐시
+    queryKey: chatKeys.rooms(userId),
+    queryFn: ({ signal }) => chatApi.getChatRooms(signal),
+    enabled: userId !== null,
+    staleTime: 0,
+    refetchOnWindowFocus: true,
+    refetchInterval: 30_000,
+    refetchIntervalInBackground: false,
+    meta: SKIP_GLOBAL_ERROR_TOAST_META,
     select: (data) => data.chatRooms,
   });
 };
diff --git a/apps/web/src/apis/chat/index.ts b/apps/web/src/apis/chat/index.ts
index e1a190a4a..7b6fdcb40 100644
--- a/apps/web/src/apis/chat/index.ts
+++ b/apps/web/src/apis/chat/index.ts
@@ -1,6 +1,8 @@
 export type { ChatHistoriesResponse, ChatMessage, ChatPartner, ChatRoom, ChatRoomListResponse } from "./api";
-export { ChatQueryKeys, chatApi } from "./api";
-export { default as useGetChatHistories } from "./getChatMessages";
+export { chatApi } from "./api";
+export { getChatUserId, useChatUserId } from "./auth";
 export { default as useGetPartnerInfo } from "./getChatPartner";
 export { default as useGetChatRooms } from "./getChatRooms";
+export { parseChatMessage } from "./normalize";
 export { default as usePutChatRead } from "./putReadChatRoom";
+export { chatKeys } from "./queryKeys";
diff --git a/apps/web/src/apis/chat/messages.test.ts b/apps/web/src/apis/chat/messages.test.ts
new file mode 100644
index 000000000..4d73af712
--- /dev/null
+++ b/apps/web/src/apis/chat/messages.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { getMessageKey, mergeMessages } from "@/lib/chat/messages";
+import type { ChatMessage } from "@/types/chat";
+import { parseChatMessage } from "./normalize";
+
+const message = (id: number, overrides: Partial<ChatMessage> = {}): ChatMessage => ({
+  id,
+  content: `메시지 ${id}`,
+  senderId: 1,
+  createdAt: "2026-10-27T01:00:00Z",
+  attachments: [],
+  ...overrides,
+});
+
+describe("mergeMessages", () => {
+  it("reconciles history overlap and a socket echo by server ID", () => {
+    const existing = [message(2), message(1)];
+    const incoming = [message(2, { content: "서버가 확정한 내용" }), message(3)];
+
+    expect(mergeMessages(existing, incoming)).toEqual([message(1), incoming[0], incoming[1]]);
+    expect(existing.map((item) => item.id)).toEqual([2, 1]);
+    expect(incoming.map((item) => item.id)).toEqual([2, 3]);
+  });
+
+  it("orders by timestamp before using ID for simultaneous messages", () => {
+    const earlier = message(99, { createdAt: "2026-10-27T00:59:00Z" });
+    expect(mergeMessages([message(3)], [message(2), earlier]).map((item) => item.id)).toEqual([99, 2, 3]);
+  });
+
+  it("preserves distinct messages whose fallback numeric IDs collide", () => {
+    const first = parseChatMessage({ ...message(0), id: undefined, content: "Aa" });
+    const second = parseChatMessage({ ...message(0), id: undefined, content: "BB" });
+
+    expect(first).not.toBeNull();
+    expect(second).not.toBeNull();
+    expect(first?.id).toBe(second?.id);
+    expect(getMessageKey(first!)).not.toBe(getMessageKey(second!));
+    expect(mergeMessages([first!], [second!])).toHaveLength(2);
+  });
+
+  it("deduplicates repeated messages with no server ID using their full fingerprint", () => {
+    const first = message(-12);
+    const same = { ...first, id: -30 };
+    expect(mergeMessages([first], [same])).toEqual([same]);
+  });
+});
diff --git a/apps/web/src/apis/chat/normalize.test.ts b/apps/web/src/apis/chat/normalize.test.ts
new file mode 100644
index 000000000..43ec29943
--- /dev/null
+++ b/apps/web/src/apis/chat/normalize.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { parseChatMessage } from "./normalize";
+
+const message = {
+  id: "12",
+  content: "안녕하세요",
+  senderId: "3",
+  createdAt: "2026-10-27T01:00:00Z",
+};
+
+describe("parseChatMessage", () => {
+  it("accepts the legacy siteUserId field and an omitted attachment list", () => {
+    expect(parseChatMessage({ ...message, senderId: undefined, siteUserId: "7" })).toEqual({
+      id: 12,
+      content: "안녕하세요",
+      senderId: 7,
+      createdAt: message.createdAt,
+      attachments: [],
+    });
+  });
+
+  it("normalizes valid image attachments without a thumbnail", () => {
+    const parsed = parseChatMessage({
+      ...message,
+      attachments: [{ id: "9", isImage: true, url: "/image.png", createdAt: message.createdAt }],
+    });
+
+    expect(parsed?.attachments[0]).toEqual({
+      id: 9,
+      isImage: true,
+      url: "/image.png",
+      thumbnailUrl: null,
+      createdAt: message.createdAt,
+    });
+  });
+
+  it.each([
+    null,
+    [],
+    { ...message, content: 2 },
+    { ...message, senderId: undefined },
+    { ...message, senderId: "invalid" },
+    { ...message, senderId: 0 },
+    { ...message, createdAt: "invalid" },
+    { ...message, createdAt: 123 },
+    { ...message, attachments: {} },
+    { ...message, attachments: [null] },
+    { ...message, attachments: [{ isImage: true, url: "/image.png", createdAt: "invalid" }] },
+    { ...message, attachments: [{ isImage: "true", url: "/image.png", createdAt: message.createdAt }] },
+    { ...message, attachments: [{ isImage: true, url: 12, createdAt: message.createdAt }] },
+  ])("rejects a malformed frame without throwing: %j", (value) => {
+    expect(parseChatMessage(value)).toBeNull();
+  });
+
+  it("gives the same ID to repeated messages that omit a server ID", () => {
+    const withoutId = { ...message, id: undefined };
+    const first = parseChatMessage(withoutId);
+    const second = parseChatMessage(withoutId);
+
+    expect(first?.id).toBeLessThan(0);
+    expect(first?.id).toBe(second?.id);
+  });
+});
diff --git a/apps/web/src/apis/chat/normalize.ts b/apps/web/src/apis/chat/normalize.ts
index 19534fa31..c98ed63ad 100644
--- a/apps/web/src/apis/chat/normalize.ts
+++ b/apps/web/src/apis/chat/normalize.ts
@@ -91,6 +91,61 @@ export const normalizeChatMessage = (message: RawChatMessage): ChatMessage => {
   };
 };
 
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const isOptionalNumericId = (value: unknown): value is NumericLike => {
+  if (value === undefined || value === null) return true;
+  if (typeof value !== "number" && typeof value !== "string") return false;
+  if (typeof value === "string" && value.trim() === "") return false;
+
+  return Number.isSafeInteger(Number(value));
+};
+
+const isTimestamp = (value: unknown): value is string =>
+  typeof value === "string" && value.trim() !== "" && Number.isFinite(Date.parse(value));
+
+const isRawAttachment = (value: unknown): value is RawChatAttachment =>
+  isRecord(value) &&
+  isOptionalNumericId(value.id) &&
+  typeof value.isImage === "boolean" &&
+  typeof value.url === "string" &&
+  value.url.trim() !== "" &&
+  (value.thumbnailUrl === undefined || value.thumbnailUrl === null || typeof value.thumbnailUrl === "string") &&
+  isTimestamp(value.createdAt);
+
+export const parseChatMessage = (value: unknown): ChatMessage | null => {
+  if (
+    !isRecord(value) ||
+    !isOptionalNumericId(value.id) ||
+    typeof value.content !== "string" ||
+    !isTimestamp(value.createdAt)
+  ) {
+    return null;
+  }
+
+  const rawSenderId = value.senderId ?? value.siteUserId;
+  if (!isOptionalNumericId(rawSenderId)) return null;
+
+  const senderId = Number(rawSenderId);
+  if (!Number.isSafeInteger(senderId) || senderId <= 0) return null;
+
+  if (
+    value.attachments !== undefined &&
+    (!Array.isArray(value.attachments) || !value.attachments.every(isRawAttachment))
+  ) {
+    return null;
+  }
+
+  return normalizeChatMessage({
+    id: value.id,
+    content: value.content,
+    senderId,
+    createdAt: value.createdAt,
+    attachments: value.attachments as RawChatAttachment[] | undefined,
+  });
+};
+
 export const normalizeChatPartner = (partner: RawChatPartner): ChatPartner => ({
   partnerId: toNumber(partner.partnerId ?? partner.siteUserId),
   nickname: partner.nickname,
diff --git a/apps/web/src/apis/chat/putReadChatRoom.ts b/apps/web/src/apis/chat/putReadChatRoom.ts
index 0602a25cb..cf0b9ae2c 100644
--- a/apps/web/src/apis/chat/putReadChatRoom.ts
+++ b/apps/web/src/apis/chat/putReadChatRoom.ts
@@ -1,20 +1,27 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { ChatQueryKeys, chatApi } from "./api";
+import { SKIP_GLOBAL_ERROR_TOAST_META } from "@/lib/react-query/errorToastMeta";
+import { chatApi } from "./api";
+import { useChatUserId } from "./auth";
+import { chatKeys } from "./queryKeys";
 
 /**
  * @description 채팅방 읽음 처리 훅
  */
-const usePutChatRead = () => {
+const usePutChatRead = (contextUserId?: number) => {
   const queryClient = useQueryClient();
+  const authenticatedUserId = useChatUserId();
+  const userId = contextUserId ?? authenticatedUserId;
 
-  return useMutation<void, AxiosError, number>({
-    mutationFn: chatApi.putReadChatRoom,
-    onSuccess: () => {
-      // 채팅방 목록 쿼리를 무효화하여 새로 고침
-      queryClient.invalidateQueries({ queryKey: [ChatQueryKeys.chatRooms] });
+  return useMutation<void, AxiosError, number, { userId: number | null }>({
+    mutationFn: (roomId) => chatApi.putReadChatRoom(roomId),
+    onMutate: () => ({ userId }),
+    onSuccess: (_data, _roomId, context) => {
+      if (context?.userId) {
+        return queryClient.invalidateQueries({ queryKey: chatKeys.rooms(context.userId) });
+      }
     },
-    onError: (error) => {},
+    meta: SKIP_GLOBAL_ERROR_TOAST_META,
   });
 };
 
diff --git a/apps/web/src/apis/chat/queries.dom.test.tsx b/apps/web/src/apis/chat/queries.dom.test.tsx
new file mode 100644
index 000000000..150f9dc8c
--- /dev/null
+++ b/apps/web/src/apis/chat/queries.dom.test.tsx
@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react/pure";
+import type { ReactNode } from "react";
+import { expect, it, vi } from "vitest";
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import { chatApi } from "./api";
+import useGetPartnerInfo from "./getChatPartner";
+import useGetChatRooms from "./getChatRooms";
+import { chatKeys } from "./queryKeys";
+
+vi.mock("./api", () => ({ chatApi: { getChatPartner: vi.fn(), getChatRooms: vi.fn() } }));
+
+it("retains authorized partner and room query identities across token expiry and rotation", async () => {
+  const token = (exp: number) => `header.${btoa(JSON.stringify({ sub: 7, role: "MENTEE", exp }))}.signature`;
+  useAuthStore.getState().setAccessToken(token(Math.floor(Date.now() / 1000) + 3600));
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const partner = { partnerId: 8, nickname: "상대방", profileUrl: null, university: null };
+  const rooms = { chatRooms: [] };
+  client.setQueryData(chatKeys.partner(7, 42), partner);
+  client.setQueryData(chatKeys.rooms(7), rooms);
+  vi.mocked(chatApi.getChatRooms).mockResolvedValue(rooms);
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  );
+  const { result, rerender, unmount } = renderHook(
+    () => ({ partner: useGetPartnerInfo(42, 7), rooms: useGetChatRooms(7) }),
+    { wrapper },
+  );
+  await waitFor(() => expect(result.current.rooms.isFetching).toBe(false));
+  act(() =>
+    useAuthStore.setState({ accessToken: token(Math.floor(Date.now() / 1000) - 1), refreshStatus: "retryable" }),
+  );
+  rerender();
+  expect(result.current.partner.isSuccess).toBe(true);
+  expect(result.current.partner.data).toEqual(partner);
+  expect(result.current.rooms.isSuccess).toBe(true);
+  expect(
+    client
+      .getQueryCache()
+      .getAll()
+      .every((query) => query.queryKey[1] === 7),
+  ).toBe(true);
+  expect(chatApi.getChatPartner).not.toHaveBeenCalled();
+  act(() =>
+    useAuthStore
+      .getState()
+      .setRefreshedAccessToken(token(Math.floor(Date.now() / 1000) + 3600), useAuthStore.getState().sessionVersion),
+  );
+  rerender();
+  expect(result.current.partner.data).toEqual(partner);
+  expect(result.current.rooms.data).toEqual([]);
+  unmount();
+  client.clear();
+  useAuthStore.getState().clearAccessToken();
+});
diff --git a/apps/web/src/apis/chat/queryKeys.ts b/apps/web/src/apis/chat/queryKeys.ts
new file mode 100644
index 000000000..d79824256
--- /dev/null
+++ b/apps/web/src/apis/chat/queryKeys.ts
@@ -0,0 +1,6 @@
+export const chatKeys = {
+  all: ["chat"],
+  rooms: (userId: number | null) => ["chat", userId, "rooms"] as const,
+  partner: (userId: number | null, roomId: number) => ["chat", userId, "partner", roomId] as const,
+  outbox: (userId: number, roomId: number) => ["chat", userId, "outbox", roomId] as const,
+} as const;
diff --git a/apps/web/src/apis/image-upload/api.ts b/apps/web/src/apis/image-upload/api.ts
index fb95fe646..75e8926f7 100644
--- a/apps/web/src/apis/image-upload/api.ts
+++ b/apps/web/src/apis/image-upload/api.ts
@@ -59,7 +59,7 @@ export const imageUploadApi = {
   /**
    * 채팅 이미지 업로드 (로그인 후)
    */
-  postUploadChatImages: async (files: File[]): Promise<string[]> => {
+  postUploadChatImages: async (files: File[], signal?: AbortSignal): Promise<string[]> => {
     const formData = new FormData();
     files.forEach((file) => {
       formData.append("files", file);
@@ -67,6 +67,7 @@ export const imageUploadApi = {
 
     const res = await axiosInstance.post<UploadChatImageResponse[]>(`/file/chat`, formData, {
       headers: { "Content-Type": "multipart/form-data" },
+      signal,
     });
     return res.data.map((image) => image.fileUrl);
   },
diff --git a/apps/web/src/apis/mentor/getMentorDetail.ts b/apps/web/src/apis/mentor/getMentorDetail.ts
index 75cbc7780..ed1ade6a0 100644
--- a/apps/web/src/apis/mentor/getMentorDetail.ts
+++ b/apps/web/src/apis/mentor/getMentorDetail.ts
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
+import { SKIP_GLOBAL_ERROR_TOAST_META } from "@/lib/react-query/errorToastMeta";
 import { type MentorCardDetail, MentorQueryKeys, mentorApi } from "./api";
 
 /**
@@ -10,6 +11,7 @@ const useGetMentorDetail = (mentorId: number | null) => {
     queryKey: [MentorQueryKeys.mentorDetail, mentorId!],
     queryFn: () => mentorApi.getMentorDetail(mentorId!),
     enabled: mentorId !== null,
+    meta: SKIP_GLOBAL_ERROR_TOAST_META,
     staleTime: 1000 * 60 * 5, // 5분간 캐시
   });
 };
diff --git a/apps/web/src/apis/mentor/getMyMentorPage.ts b/apps/web/src/apis/mentor/getMyMentorPage.ts
index 7f0a74483..7293d73b5 100644
--- a/apps/web/src/apis/mentor/getMyMentorPage.ts
+++ b/apps/web/src/apis/mentor/getMyMentorPage.ts
@@ -1,14 +1,22 @@
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
+import { SKIP_GLOBAL_ERROR_TOAST_META } from "@/lib/react-query/errorToastMeta";
 import { type MentorCardPreview, MentorQueryKeys, mentorApi } from "./api";
 
+type UseGetMentorMyProfileParams = {
+  enabled?: boolean;
+  skipGlobalErrorToast?: boolean;
+};
+
 /**
  * @description 멘토 마이 프로필 조회 훅
  */
-const useGetMentorMyProfile = () => {
+const useGetMentorMyProfile = ({ enabled = true, skipGlobalErrorToast = false }: UseGetMentorMyProfileParams = {}) => {
   return useQuery<MentorCardPreview, AxiosError>({
     queryKey: [MentorQueryKeys.myMentorProfile],
     queryFn: mentorApi.getMentorMyProfile,
+    enabled,
+    meta: skipGlobalErrorToast ? SKIP_GLOBAL_ERROR_TOAST_META : undefined,
     staleTime: 1000 * 60 * 5, // 5분간 캐시
   });
 };
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/HomeDesktopView/HomeDesktopEntryPanel.tsx b/apps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsx
new file mode 100644
index 000000000..e0e32dd72
--- /dev/null
+++ b/apps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsx
@@ -0,0 +1,174 @@
+"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/HomeUniversitySearchProvider";
+
+const actionLinks = [
+  {
+    href: "/university/search",
+    label: "학교 검색하기",
+    icon: IconMagnifyingGlass,
+    isUniversityZone: true,
+  },
+  {
+    href: "/university/score",
+    label: "성적 입력하기",
+    icon: IconPaper,
+    isUniversityZone: false,
+  },
+  {
+    href: "/university/application/apply",
+    label: "학교 지원하기",
+    icon: IconMuseum,
+    isUniversityZone: false,
+  },
+  {
+    href: "/university/application",
+    label: "지원자 현황 확인",
+    icon: IconIdCard,
+    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>
+        </div>
+
+        <div className="divide-y divide-k-100">
+          {actionLinks.map(({ href, label, icon: Icon, isUniversityZone }) => {
+            const content = (
+              <div key={href} className="flex items-center gap-3 py-4 text-k-800">
+                <span className="shrink-0 text-primary [&>svg]:h-6 [&>svg]:w-6">
+                  <Icon />
+                </span>
+                <span className="typo-medium-2">{label}</span>
+              </div>
+            );
+
+            return isUniversityZone ? (
+              <UniversityZoneLink
+                key={href}
+                href={href}
+                className="block rounded hover:bg-k-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+              >
+                {content}
+              </UniversityZoneLink>
+            ) : (
+              <Link
+                key={href}
+                href={href}
+                className="block rounded hover:bg-k-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+              >
+                {content}
+              </Link>
+            );
+          })}
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section aria-label="파견학교 검색" 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/HomeDesktopView.stories.tsx b/apps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopView.stories.tsx
new file mode 100644
index 000000000..ed33c27ba
--- /dev/null
+++ b/apps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopView.stories.tsx
@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import { HomeUniversityName, type ListUniversity } from "@/types/university";
+import { HomeUniversitySearchProvider } from "../HomeUniversitySearchSection/_hooks/HomeUniversitySearchProvider";
+import { getHomeDesktopData } from "./_utils/getHomeDesktopData";
+import HomeDesktopView from "./index";
+
+const universities: ListUniversity[] = Array.from({ length: 6 }, (_, index) => ({
+  id: index + 1,
+  term: "2027-1",
+  homeUniversityName: HomeUniversityName.INHA,
+  koreanName: `교환학생 파견대학교 ${index + 1}`,
+  country: "독일",
+  region: "유럽권",
+  logoImageUrl: "/svgs/placeholders/university-logo-placeholder.svg",
+  backgroundImageUrl: "/svgs/placeholders/university-background-placeholder.svg",
+  studentCapacity: 3,
+  languageRequirements: [{ languageTestType: "TOEFL_IBT", minScore: "80" }],
+}));
+const meta = {
+  title: "Screens/HomeDesktop",
+  component: HomeDesktopView,
+  parameters: { layout: "fullscreen" },
+  args: { recommendedUniversities: universities, desktopData: getHomeDesktopData(universities), newsList: [] },
+  decorators: [
+    (Story) => (
+      <HomeUniversitySearchProvider>
+        <Story />
+      </HomeUniversitySearchProvider>
+    ),
+  ],
+  beforeEach: () => {
+    const previous = useAuthStore.getState();
+    useAuthStore.getState().clearAccessToken();
+    return () => useAuthStore.setState(previous);
+  },
+} satisfies Meta<typeof HomeDesktopView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Guest: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const form = canvas.getByRole("region", { name: "파견학교 검색" });
+    await userEvent.click(within(form).getByRole("button", { name: "경희대" }));
+    await expect(canvas.getByRole("link", { name: "학교 검색하기" })).toHaveAttribute("href", "/university/kyunghee");
+  },
+};
+export const Authenticated: Story = {
+  beforeEach: () => {
+    useAuthStore
+      .getState()
+      .setAccessToken(`header.${btoa(JSON.stringify({ sub: 101, role: "MENTEE", exp: 7258118400 }))}.story`);
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("heading", { name: "빠른 실행" })).toBeVisible();
+    await expect(canvas.getByRole("link", { name: "성적 입력하기" })).toHaveAttribute("href", "/university/score");
+    await expect(canvas.queryByRole("region", { name: "파견학교 검색" })).not.toBeInTheDocument();
+  },
+};
+export const Empty: Story = {
+  args: { recommendedUniversities: [], desktopData: getHomeDesktopData([]) },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("표시할 파견학교가 없어요.")).toBeVisible();
+    await expect(canvas.getByRole("link", { name: "학교 검색하기" })).toBeVisible();
+  },
+};
+const longNames = universities.map((university) => ({
+  ...university,
+  koreanName: "매우 긴 이름의 국제 교환학생 파견 프로그램을 운영하는 테스트 대학교",
+}));
+export const LongSchoolNames: Story = {
+  args: { recommendedUniversities: longNames, desktopData: getHomeDesktopData(longNames) },
+};
+export const NarrowContent: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 680 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const card = within(canvasElement)
+      .getAllByRole("link")
+      .find((link) => link.getAttribute("href") === "/university/inha/1")!;
+    await expect(card.getBoundingClientRect().width).toBeGreaterThanOrEqual(220);
+  },
+};
+export const ImageFailure: Story = {
+  args: {
+    recommendedUniversities: universities.map((university) => ({
+      ...university,
+      backgroundImageUrl: "/missing-story-image.png",
+    })),
+  },
+  play: async ({ canvasElement }) => {
+    const image = within(canvasElement).getByRole("img", {
+      name: "교환학생 파견대학교 1 배경 이미지",
+    }) as HTMLImageElement;
+    await waitFor(() => expect(image.naturalWidth).toBeGreaterThan(0));
+    await expect(image.getAttribute("src")).toContain("university-background-placeholder.svg");
+  },
+};
diff --git a/apps/web/src/app/(home)/_ui/HomeDesktopView/_utils/getHomeDesktopData.ts b/apps/web/src/app/(home)/_ui/HomeDesktopView/_utils/getHomeDesktopData.ts
new file mode 100644
index 000000000..9decbea7d
--- /dev/null
+++ b/apps/web/src/app/(home)/_ui/HomeDesktopView/_utils/getHomeDesktopData.ts
@@ -0,0 +1,41 @@
+import { HOME_UNIVERSITY_LIST, isMatchedHomeUniversityName } from "@/constants/university";
+import type { HomeUniversitySlug, ListUniversity } from "@/types/university";
+
+type DesktopUniversityPreview = Pick<
+  ListUniversity,
+  "id" | "koreanName" | "homeUniversityName" | "region" | "country" | "logoImageUrl" | "studentCapacity"
+>;
+
+export type HomeDesktopData = {
+  totalUniversityCount: number;
+  countryCount: number;
+  universityCountsByHome: Record<HomeUniversitySlug, number>;
+  previewUniversities: DesktopUniversityPreview[];
+};
+
+const PREVIEW_UNIVERSITY_COUNT = 6;
+
+export const getHomeDesktopData = (allUniversities: ListUniversity[]): HomeDesktopData => {
+  const universityCountsByHome = { inha: 0, kyunghee: 0, chungang: 0 };
+
+  for (const { slug, name } of HOME_UNIVERSITY_LIST) {
+    universityCountsByHome[slug] = allUniversities.filter((university) =>
+      isMatchedHomeUniversityName(university.homeUniversityName, name),
+    ).length;
+  }
+
+  return {
+    totalUniversityCount: allUniversities.length,
+    countryCount: new Set(allUniversities.map((university) => university.country)).size,
+    universityCountsByHome,
+    previewUniversities: allUniversities.slice(0, PREVIEW_UNIVERSITY_COUNT).map((university) => ({
+      id: university.id,
+      koreanName: university.koreanName,
+      homeUniversityName: university.homeUniversityName,
+      region: university.region,
+      country: university.country,
+      logoImageUrl: university.logoImageUrl,
+      studentCapacity: university.studentCapacity,
+    })),
+  };
+};
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..f863a38e6
--- /dev/null
+++ b/apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx
@@ -0,0 +1,223 @@
+import Link from "next/link";
+
+import Image from "@/components/ui/FallbackImage";
+import UniversityZoneLink from "@/components/ui/UniversityZoneLink";
+import { getHomeUniversitySlugByName, HOME_UNIVERSITY_LIST } from "@/constants/university";
+import { IconLoveLetter, IconRightArrow } from "@/public/svgs/home";
+import { IconDirectionRight } from "@/public/svgs/mentor";
+import type { News } from "@/types/news";
+import type { ListUniversity } from "@/types/university";
+import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
+import shortenLanguageTestName from "@/utils/universityUtils";
+import type { HomeDesktopData } from "./_utils/getHomeDesktopData";
+import HomeDesktopEntryPanel from "./HomeDesktopEntryPanel";
+
+type HomeDesktopViewProps = {
+  recommendedUniversities: ListUniversity[];
+  desktopData: HomeDesktopData;
+  newsList: News[];
+};
+
+const POPULAR_UNIVERSITY_COUNT = 6;
+
+const getUniversityHref = (university: Pick<ListUniversity, "id" | "homeUniversityName">) => {
+  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, desktopData, newsList }: HomeDesktopViewProps) => {
+  const { totalUniversityCount, countryCount, previewUniversities, universityCountsByHome } = desktopData;
+  const popularUniversities = recommendedUniversities.slice(0, POPULAR_UNIVERSITY_COUNT);
+
+  return (
+    <div className="mx-auto min-h-screen max-w-screen-2xl bg-white px-6 py-8 lg:px-10">
+      <header className="mb-8 flex items-end justify-between gap-6">
+        <div>
+          <h1 className="text-k-900 typo-bold-1">교환학생 준비</h1>
+        </div>
+
+        <UniversityZoneLink
+          href="/university"
+          className="flex shrink-0 items-center gap-2 py-2 text-primary typo-sb-9 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4"
+        >
+          전체 파견학교
+          <IconDirectionRight className="h-4 w-4" />
+        </UniversityZoneLink>
+      </header>
+
+      <div className="grid items-start gap-8 xl:grid-cols-[300px_minmax(0,1fr)]">
+        <aside className="grid gap-6 md:grid-cols-2 xl:sticky xl:top-8 xl:block xl:space-y-6">
+          <HomeDesktopEntryPanel />
+
+          <section className="border-t border-k-100 pt-6">
+            <h2 className="text-k-900 typo-bold-4">학교 현황</h2>
+            <dl className="mt-4 grid grid-cols-2 gap-4">
+              <div>
+                <dt className="text-k-600 typo-medium-5">전체 학교</dt>
+                <dd className="mt-1 text-k-900 tabular-nums typo-sb-5">{totalUniversityCount}개</dd>
+              </div>
+              <div>
+                <dt className="text-k-600 typo-medium-5">국가</dt>
+                <dd className="mt-1 text-k-900 tabular-nums typo-sb-5">{countryCount}개</dd>
+              </div>
+            </dl>
+            <div className="mt-4 divide-y divide-k-50">
+              {HOME_UNIVERSITY_LIST.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">{universityCountsByHome[homeUniversity.slug]}개</span>
+                </UniversityZoneLink>
+              ))}
+            </div>
+          </section>
+        </aside>
+
+        <main className="min-w-0 space-y-8">
+          <section>
+            <SectionHeader title="실시간 인기있는 파견학교" />
+            {popularUniversities.length === 0 && (
+              <p className="py-6 text-k-600 typo-regular-2">표시할 파견학교가 없어요.</p>
+            )}
+            <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,220px),1fr))] gap-4">
+              {popularUniversities.map((university, index) => (
+                <UniversityZoneLink
+                  key={university.id}
+                  href={getUniversityHref(university)}
+                  className="group overflow-hidden rounded-lg border border-k-100 bg-white transition-colors hover:border-k-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+                >
+                  <div className="relative h-40 bg-k-100">
+                    <Image
+                      alt={`${university.koreanName} 배경 이미지`}
+                      src={normalizeImageUrlToUploadCdn(university.backgroundImageUrl)}
+                      fill
+                      sizes="(max-width: 1279px) 50vw, 30vw"
+                      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="line-clamp-2 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="전체 학교 리스트" />
+            {previewUniversities.length === 0 && (
+              <p className="py-6 text-k-600 typo-regular-2">등록된 파견학교가 없어요.</p>
+            )}
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+              {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-colors hover:border-k-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+                >
+                  <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="line-clamp-2 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">
+              {newsList.length === 0 && <p className="py-6 text-k-600 typo-regular-2">등록된 소식이 없어요.</p>}
+              {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-colors hover:border-k-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+                >
+                  <div className="relative h-36 w-full overflow-hidden bg-k-100">
+                    <Image
+                      loading="lazy"
+                      className="object-cover"
+                      src={news.imageUrl}
+                      cdnHostType="default"
+                      alt={news.title}
+                      fill
+                      sizes="(max-width: 1535px) 50vw, 33vw"
+                    />
+                  </div>
+                  <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/HomeResponsiveContent/index.tsx b/apps/web/src/app/(home)/_ui/HomeResponsiveContent/index.tsx
new file mode 100644
index 000000000..a80c816bd
--- /dev/null
+++ b/apps/web/src/app/(home)/_ui/HomeResponsiveContent/index.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import type { News } from "@/types/news";
+import type { ListUniversity } from "@/types/university";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+import FindLastYearScoreBar from "../FindLastYearScoreBar";
+import HomeDesktopView from "../HomeDesktopView";
+import type { HomeDesktopData } from "../HomeDesktopView/_utils/getHomeDesktopData";
+import HomeEntrySection from "../HomeEntrySection";
+import { HomeUniversitySearchProvider } from "../HomeUniversitySearchSection/_hooks/HomeUniversitySearchProvider";
+import NewsSection from "../NewsSection";
+import PopularUniversitySection from "../PopularUniversitySection";
+import UniversityList from "../UniversityList";
+import type { HomeUniversityPreviewList } from "../UniversityList/types";
+
+type HomeResponsiveContentProps = {
+  recommendedUniversities: ListUniversity[];
+  homeUniversityPreviews: HomeUniversityPreviewList;
+  desktopData: HomeDesktopData;
+  newsList: News[];
+};
+
+const HomeResponsiveView = ({
+  recommendedUniversities,
+  homeUniversityPreviews,
+  desktopData,
+  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}
+        desktopData={desktopData}
+        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 homeUniversityPreviews={homeUniversityPreviews} />
+      </div>
+
+      <NewsSection newsList={newsList} />
+    </div>
+  );
+};
+
+const HomeResponsiveContent = (props: HomeResponsiveContentProps) => (
+  <HomeUniversitySearchProvider>
+    <HomeResponsiveView {...props} />
+  </HomeUniversitySearchProvider>
+);
+
+export default HomeResponsiveContent;
diff --git a/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/_hooks/HomeUniversitySearchProvider.tsx b/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/_hooks/HomeUniversitySearchProvider.tsx
new file mode 100644
index 000000000..508dbf898
--- /dev/null
+++ b/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/_hooks/HomeUniversitySearchProvider.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { createContext, type ReactNode, useContext } from "react";
+import useSearchState from "./useHomeUniversitySearch";
+
+const SearchContext = createContext<ReturnType<typeof useSearchState> | null>(null);
+
+export const HomeUniversitySearchProvider = ({ children }: { children: ReactNode }) => {
+  const search = useSearchState();
+  return <SearchContext.Provider value={search}>{children}</SearchContext.Provider>;
+};
+
+export const useHomeUniversitySearch = () => {
+  const search = useContext(SearchContext);
+  if (!search) throw new Error("Home search must be rendered inside HomeUniversitySearchProvider");
+  return search;
+};
diff --git a/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsx b/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsx
index 28fe2091c..edb86676b 100644
--- a/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsx
+++ b/apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsx
@@ -5,7 +5,7 @@ import clsx from "clsx";
 import CustomDropdown from "@/components/search/CustomDropdown";
 import UniversityZoneLink from "@/components/ui/UniversityZoneLink";
 import { IconHatColor, IconHatGray, IconLocationColor, IconLocationGray } from "@/public/svgs/search";
-import useHomeUniversitySearch from "./_hooks/useHomeUniversitySearch";
+import { useHomeUniversitySearch } from "./_hooks/HomeUniversitySearchProvider";
 
 const HomeUniversitySearchSection = () => {
   const {
@@ -22,10 +22,10 @@ const HomeUniversitySearchSection = () => {
   } = useHomeUniversitySearch();
 
   return (
-    <section className="px-5 py-5">
+    <section aria-label="파견학교 검색" 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..986e35c6e 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,22 @@ 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">
-                <Image
-                  loading="lazy"
-                  className="h-24 w-44 shrink-0 rounded-xl object-cover"
-                  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 gap-4 md:flex-col">
+                <div className="relative h-24 w-44 shrink-0 overflow-hidden rounded-xl bg-k-100 md:w-full">
+                  <Image
+                    loading="lazy"
+                    className="object-cover"
+                    src={news.imageUrl}
+                    cdnHostType="default"
+                    alt={news.title}
+                    fill
+                    sizes="(max-width: 767px) 176px, 33vw"
+                  />
+                </div>
+                <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 067d5eb90..71781372d 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={
@@ -63,7 +63,7 @@ const PopularUniversityCard = ({
             }}
           />
         </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..da7d3b15d 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: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 f32779c45..b950c141e 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -4,11 +4,8 @@ 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 HomeEntrySection from "./_ui/HomeEntrySection";
-import NewsSection from "./_ui/NewsSection";
-import PopularUniversitySection from "./_ui/PopularUniversitySection";
-import UniversityList from "./_ui/UniversityList";
+import { getHomeDesktopData } from "./_ui/HomeDesktopView/_utils/getHomeDesktopData";
+import HomeResponsiveContent from "./_ui/HomeResponsiveContent";
 import { getHomeUniversityPreviews } from "./_ui/UniversityList/_utils/getHomeUniversityPreviews";
 
 const pageUrl = createUrl("/");
@@ -112,25 +109,17 @@ const HomePage = async () => {
     allUniversities,
   ).filter(hasUniversityDetailRoute);
   const homeUniversityPreviews = getHomeUniversityPreviews(allUniversities);
+  const desktopData = getHomeDesktopData(allUniversities);
 
   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 homeUniversityPreviews={homeUniversityPreviews} />
-        </div>
-
-        <NewsSection newsList={newsList} />
-      </div>
+      <HomeResponsiveContent
+        recommendedUniversities={resolvedRecommendedUniversities}
+        homeUniversityPreviews={homeUniversityPreviews}
+        desktopData={desktopData}
+        newsList={newsList}
+      />
     </>
   );
 };
diff --git a/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx b/apps/web/src/app/community/[boardCode]/CommunityPageContent.tsx
index 0243763cc..d69dce20e 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,10 +9,12 @@ 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";
+import { DesktopPostCards, MobilePostCards } from "./PostCards";
 import PostWriteButton from "./PostWriteButton";
 
 interface CommunityPageContentProps {
@@ -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
@@ -92,10 +134,109 @@ const CommunityPageContent = ({ boardCode }: CommunityPageContentProps) => {
         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>
   );
 };
 
+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 /> : <DesktopPostCards posts={visiblePosts} boardCode={boardCode} />}
+        </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..d01641a08 100644
--- a/apps/web/src/app/community/[boardCode]/PostCards.tsx
+++ b/apps/web/src/app/community/[boardCode]/PostCards.tsx
@@ -15,23 +15,41 @@ type PostCardsProps = {
   boardCode: string;
 };
 
-const PostCards = ({ posts, boardCode }: PostCardsProps) => {
+const PostCardsBase = ({ posts, boardCode, isDesktop }: PostCardsProps & { isDesktop: boolean }) => {
   const parentRef = useRef<HTMLDivElement>(null);
+  const PostCard = isDesktop ? DesktopPostCard : MobilePostCard;
 
-  // 가상화 설정
   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",
       }}
     >
@@ -68,7 +86,11 @@ const PostCards = ({ posts, boardCode }: 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",
@@ -100,18 +122,41 @@ const getPostThumbnailSrc = (postThumbnailUrl: string | null) => {
   return thumbnailSrc;
 };
 
-export const PostCard = ({ post, priorityImage = false }: { post: ListPost; priorityImage?: boolean }) => {
+type PostCardProps = {
+  post: ListPost;
+  priorityImage?: boolean;
+};
+
+const PostCardBase = ({ post, priorityImage = false, isDesktop }: PostCardProps & { isDesktop: boolean }) => {
   const thumbnailSrc = getPostThumbnailSrc(post.postThumbnailUrl);
 
   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 +172,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}
@@ -144,3 +189,7 @@ export const PostCard = ({ post, priorityImage = false }: { post: ListPost; prio
     </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]/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..5168e3883 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsx
@@ -12,7 +12,13 @@ type CommentInputProps = {
   refresh: () => void;
 };
 
-const CommentInput = ({ postId, curSelectedComment, setCurSelectedComment, refresh }: CommentInputProps) => {
+const CommentInputBase = ({
+  postId,
+  curSelectedComment,
+  setCurSelectedComment,
+  refresh,
+  isDesktop,
+}: CommentInputProps & { isDesktop: boolean }) => {
   const [content, setContent] = useState<string>("");
 
   const createCommentMutation = useCreateComment();
@@ -38,7 +44,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">
+    <div
+      className={
+        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"
+      }
+    >
       <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">
@@ -73,4 +85,8 @@ const CommentInput = ({ postId, curSelectedComment, setCurSelectedComment, refre
   );
 };
 
-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 e1024dffc..f84e041eb 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
@@ -10,7 +10,7 @@ import useReportedPostsStore from "@/lib/zustand/useReportedPostsStore";
 import { IconMoreVertFilled, IconSubComment } from "@/public/svgs";
 import type { Comment as CommentType, CommunityUser } from "@/types/community";
 import { convertISODateToDateTime } from "@/utils/datetimeUtils";
-import CommentInput from "./CommentInput";
+import { DesktopCommentInput, MobileCommentInput } from "./CommentInput";
 
 type CommentSectionProps = {
   comments: CommentType[];
@@ -18,10 +18,12 @@ type CommentSectionProps = {
   refresh: () => void;
 };
 
-const CommentSection = ({ comments, postId, refresh }: 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();
 
@@ -40,9 +42,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,6 +57,30 @@ const CommentSection = ({ comments, postId, refresh }: CommentSectionProps) => {
           setActiveDropdown={setActiveDropdown}
         />
       ))}
+    </>
+  );
+
+  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">
+          <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}
+        />
+      </aside>
+    );
+  }
+
+  return (
+    <div className="min-h-[50vh] pb-[49px]">
+      {commentList}
       <CommentInput
         postId={postId}
         curSelectedComment={curSelectedComment}
@@ -62,7 +91,11 @@ const CommentSection = ({ comments, postId, refresh }: CommentSectionProps) => {
   );
 };
 
-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;
@@ -72,13 +105,14 @@ type CommentProps = {
   setActiveDropdown: (commentId: number | null) => void;
 };
 
-const Comment = ({
+const CommentBase = ({
   comment,
   setCurSelectedComment,
   deleteComment,
   activeDropdown,
   setActiveDropdown,
-}: CommentProps) => {
+  isDesktop,
+}: CommentProps & { isDesktop: boolean }) => {
   const toggleDropdown = (commentId: number) => {
     setActiveDropdown(activeDropdown === commentId ? null : commentId);
   };
@@ -89,6 +123,7 @@ const Comment = ({
     <div
       className={clsx(
         "flex border-b border-gray-c-100 px-5 py-[18px]",
+        isDesktop && "transition-colors hover:bg-k-50",
         comment.parentId !== null ? "bg-line-1" : "bg-magic-comment-reply-bg",
       )}
       key={comment.id}
@@ -147,6 +182,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 8fb58cab6..b2aa12cf4 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/Content.tsx
@@ -21,11 +21,12 @@ type ContentProps = {
   postId: number;
 };
 
-const Content = ({ post, postId }: 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();
@@ -79,18 +80,26 @@ const Content = ({ post, postId }: ContentProps) => {
     }
   };
 
-  return (
+  const postBody = (
     <>
-      <div className="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="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={isDesktop ? "mt-5 font-serif text-black typo-bold-3" : "mt-4 font-serif text-black typo-sb-4"}>
+          {post.title || ""}
+        </div>
+        <div
+          className={
+            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"
+          }
+        >
           <LinkifyText>{post.content || ""}</LinkifyText>
         </div>
 
-        <div className="mt-3">
+        <div className="mt-5">
           <PostImage images={postImages} onImageClick={handleImageClick} />
         </div>
         {selectedImageIndex !== null && postImages[selectedImageIndex] && (
@@ -112,31 +121,61 @@ 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">
-          <ProfileWithBadge profileImageUrl={post.postFindSiteUserResponse.profileImageUrl} width={40} height={40} />
-          <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>
+  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">
+        <ProfileWithBadge profileImageUrl={post.postFindSiteUserResponse.profileImageUrl} width={40} height={40} />
+        <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>
       </div>
+    </div>
+  );
+
+  if (isDesktop) {
+    return (
+      <article className="rounded-lg border border-k-100 bg-white">
+        {postBody}
+        {author}
+      </article>
+    );
+  }
+
+  return (
+    <>
+      {postBody}
+      {author}
     </>
   );
 };
 
-export default Content;
+export const DesktopContent = (props: ContentProps) => <ContentBase {...props} isDesktop />;
+
+export const MobileContent = (props: ContentProps) => <ContentBase {...props} isDesktop={false} />;
 
-const PostImage = ({ images, onImageClick }: { images: PostImageType[]; onImageClick: (index: number) => void }) => {
+export default MobileContent;
+
+const PostImage = ({
+  images,
+  onImageClick,
+  isDesktop,
+}: {
+  images: PostImageType[];
+  onImageClick: (index: number) => void;
+  isDesktop: boolean;
+}) => {
   if (images.length === 1) {
     return (
-      <div className="mb-3 pr-5">
-        <div className="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"
@@ -155,10 +194,11 @@ const PostImage = ({ images, onImageClick }: { images: PostImageType[]; onImageC
           <Image
             key={image.id}
             src={normalizeImageUrlToUploadCdn(image.url)}
-            width={197}
-            height={197}
+            width={isDesktop ? 180 : 197}
+            height={isDesktop ? 180 : 197}
             alt="image"
             onClick={() => onImageClick(index)}
+            className={isDesktop ? "rounded-lg object-cover" : undefined}
           />
         ))}
       </div>
@@ -166,6 +206,14 @@ const PostImage = ({ images, onImageClick }: { images: PostImageType[]; onImageC
   );
 };
 
+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 7cc7b84bf..dfe5e502d 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/PostPageContent.tsx
@@ -6,8 +6,9 @@ import { useGetPostDetail } from "@/apis/community";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import useReportedPostsStore from "@/lib/zustand/useReportedPostsStore";
-import CommentSection from "./CommentSection";
-import Content from "./Content";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+import { DesktopCommentSection, MobileCommentSection } from "./CommentSection";
+import { DesktopContent, MobileContent } from "./Content";
 import KebabMenu from "./KebabMenu";
 
 interface PostPageContentProps {
@@ -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,44 @@ 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)]">
+          <DesktopContent post={post} postId={postId} />
+          <DesktopCommentSection comments={post.postFindCommentResponses} postId={postId} refresh={refetch} />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div>
       <TopDetailNavigation
@@ -73,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 9ae3de679..7202b3796 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx
@@ -1,12 +1,23 @@
 "use client";
 
+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";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import { IconArrowBackFilled, IconImage } from "@/public/svgs";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
 type PostModifyFormProps = {
   boardCode: string;
@@ -17,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,
@@ -30,6 +73,7 @@ const PostModifyForm = ({
   const [postCategory, setPostCategory] = useState<string>(
     defaultPostCategory || (defaultIsQuestion ? "질문" : "자유"),
   );
+  const isDesktop = useIsDesktopViewport();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const titleRef = useRef<HTMLDivElement>(null);
   const {
@@ -55,6 +99,10 @@ const PostModifyForm = ({
   };
 
   useEffect(() => {
+    if (isDesktop === null) {
+      return () => {};
+    }
+
     const textarea = textareaRef.current;
     const titleDiv = titleRef.current;
 
@@ -75,7 +123,7 @@ const PostModifyForm = ({
       return () => textarea.removeEventListener("input", adjustHeight);
     }
     return () => {};
-  }, []);
+  }, [isDesktop]);
 
   const submitPost = async () => {
     const trimmedTitle = title.trim();
@@ -116,122 +164,241 @@ 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" />;
+  }
 
-  return (
-    <>
-      <CustomTopDetailNavigation routeBack={routeBack} submitPost={submitPost} />
-      <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}
+  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="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();
+          }
+        }}
+      />
+    </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="이미지 추가"
         >
-          <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();
-              }
-            }}
-          />
-        </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
-              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={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"
             >
-              <IconImage />
-            </button>
-            <input
-              className="hidden"
-              ref={imageUploadRef}
-              type="file"
-              accept="image/*"
-              multiple
-              onChange={handleImageChange}
-            />
-          </div>
+              <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>
-          <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)}
-          />
+          <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>
-        {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 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)]">
+        <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>
+        </aside>
       </div>
-    </>
+    </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) => (
-  <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">
+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 />
     </button>
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 43221481e..fb7f99b1b 100644
--- a/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
+++ b/apps/web/src/app/community/[boardCode]/create/PostForm.tsx
@@ -1,7 +1,17 @@
 "use client";
 
+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";
@@ -11,11 +21,41 @@ import { showIconToast } from "@/lib/toast/showIconToast";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { IconImage } from "@/public/svgs";
 import { buildLoginPathWithRedirect, LOGIN_REQUIRED_MESSAGE } from "@/utils/authRedirect";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
 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);
@@ -26,6 +66,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,
@@ -57,6 +98,10 @@ const PostForm = ({ boardCode }: PostFormProps) => {
   }, [accessToken, createPath, isAuthenticated, isInitialized, refreshStatus, router]);
 
   useEffect(() => {
+    if (isDesktop === null) {
+      return () => {};
+    }
+
     const textarea = textareaRef.current;
     const title = titleRef.current;
 
@@ -77,9 +122,9 @@ const PostForm = ({ boardCode }: PostFormProps) => {
       return () => textarea.removeEventListener("input", adjustHeight);
     }
     return () => {};
-  }, []);
+  }, [isDesktop]);
 
-  if (!isInitialized || refreshStatus === "refreshing" || !isAuthenticated || !accessToken) {
+  if (!isInitialized || refreshStatus === "refreshing" || !isAuthenticated || !accessToken || isDesktop === null) {
     return <CloudSpinnerPage />;
   }
 
@@ -121,120 +166,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 (
-    <>
-      <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>
-        }
+  return <MobilePostFormView {...editorProps} submitPost={submitPost} />;
+};
+
+type PostEditorBaseProps = PostEditorProps & {
+  isDesktop: boolean;
+};
+
+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="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
-        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}
+    </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="이미지 추가"
         >
-          <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={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"
             >
-              <IconImage />
-            </button>
-            <input
-              className="hidden"
-              ref={imageUploadRef}
-              type="file"
-              accept="image/*"
-              multiple
-              onChange={handleImageChange}
-            />
-          </div>
+              <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 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>
-          <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)}
-          />
+          <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>
-        {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>
+        <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)]">
+        <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>
-        ) : 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>
+        </aside>
       </div>
-    </>
+    </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;
diff --git a/apps/web/src/app/login/LoginContent.tsx b/apps/web/src/app/login/LoginContent.tsx
index e56a8d3e9..08dbd19e9 100644
--- a/apps/web/src/app/login/LoginContent.tsx
+++ b/apps/web/src/app/login/LoginContent.tsx
@@ -14,10 +14,10 @@ import {
   getSafeCommunityRedirectPath,
 } from "@/utils/authRedirect";
 import { kakaoLogin } from "@/utils/authUtils";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import useInputHandler from "./_hooks/useInputHandler";
 import AppleLoginButton from "./_ui/AppleLoginButton";
 
-// Zod 스키마 정의
 const loginSchema = z.object({
   email: z.string().min(1, "이메일을 입력해주세요.").email("올바른 이메일 형식을 입력해주세요."),
   password: z.string().min(1, "비밀번호를 입력해주세요.").min(6, "비밀번호는 최소 6자 이상이어야 합니다."),
@@ -32,6 +32,7 @@ const LoginContent = () => {
 
   const { mutate: postEmailAuth, isPending } = usePostEmailAuth({ redirectPath });
   const { showPasswordField, handleEmailChange } = useInputHandler();
+  const isDesktop = useIsDesktopViewport();
 
   const {
     register,
@@ -58,98 +59,143 @@ const LoginContent = () => {
     router.push("/");
   };
 
-  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="뒤로가기"
+  if (isDesktop === null) return null;
+
+  const renderLoginForm = (fieldWrapperClassName: string) => (
+    <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,
+            })}
+          />
+          {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"
+          }`}
         >
-          <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 />
-          지금 솔리드 커넥션에서 시작하세요.
+          <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")}
+          />
+          {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>
+  );
 
-      <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,
-              })}
-            />
-            {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"
-            }`}
+  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">
+        <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"
           >
-            <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")}
-            />
-            {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>
+            <IconKakaoLogo />
+            <span className="text-black">카카오로 시작하기</span>
+          </button>
         </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>
-          <AppleLoginButton redirectPath={redirectPath} />
+        <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>
+        <AppleLoginButton redirectPath={redirectPath} className={fieldWrapperClassName} />
       </div>
     </div>
   );
+
+  const desktopViewProps = {
+    loginForm: renderLoginForm(""),
+    socialButtons: renderSocialButtons(""),
+  };
+  const mobileViewProps = {
+    loginForm: renderLoginForm("mx-5"),
+    socialButtons: renderSocialButtons("mx-5"),
+    handleBack,
+  };
+
+  return isDesktop ? <DesktopLoginView {...desktopViewProps} /> : <MobileLoginView {...mobileViewProps} />;
+};
+
+type DesktopLoginViewProps = {
+  loginForm: React.ReactNode;
+  socialButtons: React.ReactNode;
 };
 
+type MobileLoginViewProps = DesktopLoginViewProps & {
+  handleBack: () => void;
+};
+
+const DesktopLoginView = ({ loginForm, socialButtons }: DesktopLoginViewProps) => (
+  <div className="flex min-h-screen items-center justify-center bg-white px-8 py-12">
+    <section className="w-full max-w-md">
+      <Link href="/" aria-label="홈으로 이동">
+        <IconSolidConnectionFullBlackLogo />
+      </Link>
+      <h1 className="mt-10 font-serif text-k-900 typo-bold-1">로그인</h1>
+      <div className="mt-8">
+        {loginForm}
+        {socialButtons}
+      </div>
+    </section>
+  </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/login/_ui/AppleLoginButton.tsx b/apps/web/src/app/login/_ui/AppleLoginButton.tsx
index 65ff6ce8c..0fab59407 100644
--- a/apps/web/src/app/login/_ui/AppleLoginButton.tsx
+++ b/apps/web/src/app/login/_ui/AppleLoginButton.tsx
@@ -12,7 +12,12 @@ const isAppleSdkReady = () =>
 
 type AppleSdkStatus = "loading" | "ready" | "error";
 
-const AppleLoginButton = ({ redirectPath }: { redirectPath?: string }) => {
+type AppleLoginButtonProps = {
+  redirectPath?: string;
+  className?: string;
+};
+
+const AppleLoginButton = ({ redirectPath, className = "mx-5" }: AppleLoginButtonProps) => {
   const [sdkStatus, setSdkStatus] = useState<AppleSdkStatus>("loading");
   const [retryKey, setRetryKey] = useState<string | null>(null);
   const activeRetryKey = useRef<string | null>(null);
@@ -65,7 +70,7 @@ const AppleLoginButton = ({ redirectPath }: { redirectPath?: string }) => {
   };
 
   return (
-    <div className="mx-5">
+    <div className={className}>
       <AppleScriptLoader
         key={retryKey ?? "initial"}
         retryKey={retryKey}
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/mentor/[id]/_ui/MentorDetialContent/index.tsx b/apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx
index 10065e32f..8a5ea9c23 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 {
@@ -15,11 +17,21 @@ interface MentorDetailContentProps {
 }
 
 const MentorDetialContent = ({ mentorId }: MentorDetailContentProps) => {
-  const { data: mentorDetail } = useGetMentorDetail(mentorId);
-  const { data: articleList = [] } = useGetArticleList(mentorId);
+  const isValidMentorId = Number.isFinite(mentorId) && mentorId > 0;
+  const { data: mentorDetail, isPending, isError, refetch } = useGetMentorDetail(isValidMentorId ? mentorId : null);
+  const { data: articleList = [] } = useGetArticleList(mentorId, {
+    enabled: isValidMentorId && !!mentorDetail,
+  });
   const { mutate: postApplyMentoring } = usePostApplyMentoring();
+  const isDesktop = useIsDesktopViewport();
 
-  if (!mentorDetail) return null; // type guard
+  if (isDesktop === null || (isValidMentorId && isPending)) {
+    return <MentorDetailSkeleton />;
+  }
+
+  if (!isValidMentorId || isError || !mentorDetail) {
+    return <MentorDetailUnavailableState onRetry={isValidMentorId ? () => refetch() : undefined} />;
+  }
 
   const {
     id,
@@ -34,12 +46,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,94 +58,230 @@ 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="mb-2 text-k-500 typo-regular-1">{universityName}</p>
-
-          {/* 연락 가능 시간 */}
-          {/* <p className="text-sm font-semibold text-k-800">방해 금지 시간</p> */}
-          {/* <p className="text-sm font-normal text-k-500">0:00 ~ 8:00</p> */}
+          <p className="text-k-500 typo-regular-1">{universityName}</p>
         </div>
       </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">
-        <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"
-          }`}
+    </>
+  );
+
+  const viewProps: MentorDetailViewProps = {
+    mentorId,
+    articleList,
+    channels,
+    profileSummary,
+    introduction,
+    passTip,
+    isApplied,
+    handleApplyMentoring,
+  };
+
+  return isDesktop ? <DesktopMentorDetailView {...viewProps} /> : <MobileMentorDetailView {...viewProps} />;
+};
+
+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;
+};
+
+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} />
+
+        <button
+          type="button"
+          onClick={handleApplyMentoring}
+          disabled={isApplied}
+          className={getApplyButtonClassName(isApplied, "mt-6")}
         >
-          {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>
-      </div>
+          멘토 신청하기
+        </button>
+      </aside>
 
-      {/* 합격 레시피 */}
-      <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>
-      )}
+      <main className="grid gap-5">
+        <DesktopInfoPanel title="멘토 한마디">
+          <p className="whitespace-pre-wrap text-k-700 typo-regular-2">{introduction}</p>
+        </DesktopInfoPanel>
 
-      {/* 멘토의 아티클 */}
-      <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={() => postApplyMentoring({ mentorId: id })}
-            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,
-              },
-            )}
-          >
-            {"멘토 신청하기"}
-          </button>
-        </div>
+        <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(
+    "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>
+);
+
+const MentorDetailSkeleton = () => (
+  <div className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+    <div className="mb-8">
+      <div className="h-5 w-20 animate-pulse rounded-full bg-k-100" />
+      <div className="mt-3 h-9 w-44 animate-pulse rounded-lg bg-k-100" />
+      <div className="mt-3 h-5 w-80 max-w-full animate-pulse rounded-full bg-k-100" />
+    </div>
+    <div className="grid items-start gap-8 xl:grid-cols-[minmax(320px,420px)_minmax(0,1fr)]">
+      <div className="h-72 animate-pulse rounded-lg border border-k-100 bg-white" />
+      <div className="grid gap-5">
+        <div className="h-36 animate-pulse rounded-lg border border-k-100 bg-white" />
+        <div className="h-36 animate-pulse rounded-lg border border-k-100 bg-white" />
+        <div className="h-52 animate-pulse rounded-lg border border-k-100 bg-white" />
+      </div>
+    </div>
+  </div>
+);
+
+const MentorDetailUnavailableState = ({ onRetry }: { onRetry?: () => void }) => (
+  <div className="flex min-h-[60vh] flex-col items-center justify-center px-5 text-center">
+    <p className="text-k-900 typo-sb-5">멘토 정보를 찾지 못했어요.</p>
+    <p className="mt-2 text-k-500 typo-regular-2">멘토 목록에서 다시 확인해 주세요.</p>
+    <div className="mt-5 flex flex-wrap justify-center gap-2">
+      {onRetry && (
+        <button
+          type="button"
+          onClick={onRetry}
+          className="rounded-lg border border-k-100 px-4 py-2 text-k-700 typo-sb-9"
+        >
+          다시 시도
+        </button>
+      )}
+      <Link href="/mentor" className="rounded-lg bg-primary px-4 py-2 text-k-0 typo-sb-9">
+        멘토 목록으로 돌아가기
+      </Link>
+    </div>
+  </div>
+);
+
 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..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,22 +1,39 @@
 "use client";
 
-import MenteePageTabs from "../MenteePageTabs";
-import MentorFindSection from "../MentorFindSection";
+import { MenteeMentoringDesktopPanel, MenteeMentoringMobileSection } from "../MenteePageTabs";
+import { MentorFindDesktopPanel, MentorFindMobileSection } from "../MentorFindSection";
 
 /**
  * 멘티 페이지 컴포넌트
  * - 나의 멘토 탭 (진행 중, 대기 중)
  * - 멘토 찾기 섹션
  */
-const MenteePage = () => {
+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)]">
+        <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 093c7a376..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 = () => {
+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,27 +31,25 @@ const MenteePageTabs = () => {
 
   // 현재 탭에 따라 보여줄 데이터의 길이
   const currentDataLength = selectedTab === MenteeTab.MY_MENTOR ? mentoList.length : menteeWaitingMentoringList.length;
+  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,39 +61,52 @@ 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>
     </>
   );
 };
-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 2d3ff3543..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 = () => {
+const MentorFindSectionBase = ({ isDesktop }: { isDesktop: boolean }) => {
   const { listRef, selectedTab, handleSelectTab } = useSelectedTab();
 
   const {
@@ -26,11 +26,15 @@ const MentorFindSection = () => {
   usePrefetchMentorFindTab();
 
   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 +48,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,9 +64,13 @@ const MentorFindSection = () => {
         )}
       </div>
 
-      <FloatingUpBtn />
-    </>
+      {!isDesktop && <FloatingUpBtn />}
+    </section>
   );
 };
 
-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 ca479694e..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,7 +13,7 @@ import { MentorChatCardsSkeleton } from "../../../MentorPageSkeleton";
 import ApplicantListSection from "./_ui/ApplicantListSection";
 import MyMentorSection from "./_ui/MyMentorSection";
 
-const MentorPage = () => {
+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];
@@ -23,16 +23,14 @@ const MentorPage = () => {
   return (
     <>
       <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 +41,8 @@ const MentorPage = () => {
           )}
         </div>
 
-        {/* 멘티 보기 탭일때 */}
         {isMyMenteeTab ? (
           <>
-            {/* 나의 멘티  */}
             {isMyMenteeListPending ? (
               <MentorChatCardsSkeleton count={3} />
             ) : myMenteeList.length === 0 ? (
@@ -66,13 +62,14 @@ 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>
@@ -80,4 +77,31 @@ const MentorPage = () => {
   );
 };
 
-export default MentorPage;
+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">
+          <MentorMenteeListContent isDesktop />
+        </section>
+        <section className="rounded-lg border border-k-100 bg-white p-6">
+          <MyMentorSection />
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export const MentorMobilePage = () => {
+  return <MentorMenteeListContent isDesktop={false} />;
+};
+
+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 7e46583a2..633dfedfa 100644
--- a/apps/web/src/app/mentor/_ui/MentorClient/index.tsx
+++ b/apps/web/src/app/mentor/_ui/MentorClient/index.tsx
@@ -9,13 +9,15 @@ import { showIconToast } from "@/lib/toast/showIconToast";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { UserRole } from "@/types/mentor";
 import { LOGIN_REQUIRED_MESSAGE } from "@/utils/authRedirect";
+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();
   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;
@@ -31,7 +33,7 @@ const MentorClient = () => {
     }
   }, [isAuthResolving, isUnauthorized, isError, role, router]);
 
-  if (isAuthResolving) {
+  if (isAuthResolving || isDesktop === null) {
     return <MentorPageSkeleton />;
   }
 
@@ -54,11 +56,13 @@ const MentorClient = () => {
     );
   }
 
-  if (role === UserRole.ADMIN) {
-    return clientRole === UserRole.MENTEE ? <MenteePage /> : <MentorPage />;
+  const shouldRenderMentorPage = role === UserRole.ADMIN ? clientRole !== UserRole.MENTEE : role === UserRole.MENTOR;
+
+  if (shouldRenderMentorPage) {
+    return isDesktop ? <MentorDesktopPage /> : <MentorMobilePage />;
   }
 
-  return role === UserRole.MENTOR ? <MentorPage /> : <MenteePage />;
+  return isDesktop ? <MenteeDesktopPage /> : <MenteeMobilePage />;
 };
 
 export default MentorClient;
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_hooks/useChatListHandler.ts b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_hooks/useChatListHandler.ts
deleted file mode 100644
index c6b97a6a1..000000000
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_hooks/useChatListHandler.ts
+++ /dev/null
@@ -1,500 +0,0 @@
-import type { Client } from "@stomp/stompjs";
-import { useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useRef } from "react";
-import { ChatQueryKeys, useGetChatHistories } from "@/apis/chat";
-import useConnectWebSocket from "@/lib/web-socket/useConnectWebSocket";
-import { type ChatMessage, ConnectionStatus } from "@/types/chat";
-import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
-// --- 프로젝트 내부 의존성 ---
-import useInfinityScroll from "@/utils/useInfinityScroll";
-
-const BOTTOM_PROXIMITY_THRESHOLD = 80;
-const OUTBOUND_TEXT_SCROLL_CONFIRM_TIMEOUT_MS = 5000;
-const INITIAL_SCROLL_SETTLE_DELAYS_MS = [100, 350, 800];
-
-interface PendingOutboundTextScroll {
-  id: string;
-  senderId: number;
-  content: string;
-  timeoutId: ReturnType<typeof setTimeout>;
-}
-
-const getMessageDedupeKey = (message: ChatMessage): string => {
-  if (message.id > 0) {
-    return `id:${message.id}`;
-  }
-
-  const attachmentKey = message.attachments
-    .map((attachment) => `${attachment.isImage ? "image" : "file"}:${attachment.url}:${attachment.createdAt}`)
-    .join(",");
-
-  return `fallback:${message.senderId}:${message.createdAt}:${message.content}:${attachmentKey}`;
-};
-
-const getImageUrlKeys = (url: string | null | undefined) => {
-  if (!url) return [];
-
-  const normalizedUrl = normalizeImageUrlToUploadCdn(url);
-  return Array.from(new Set([url, normalizedUrl].filter((key) => key.length > 0)));
-};
-
-const normalizePendingText = (content: string) => content.trim();
-
-const useChatListHandler = (chatId: number) => {
-  // --- 1. State 및 Ref 선언 ---
-  const clientRef = useRef<Client | null>(null);
-  const messagesEndRef = useRef<HTMLDivElement>(null); // 새 메시지 수신 시 자동 스크롤을 위한 ref
-  const scrollContainerRef = useRef<HTMLDivElement>(null); // 실제 스크롤 컨테이너 ref
-  const hasInitialAutoScrolledRef = useRef(false);
-  const prevMessageCountRef = useRef(0);
-  const prevChatIdRef = useRef(chatId);
-  const shouldForceScrollToBottomRef = useRef(false);
-  const pendingOutboundTextScrollsRef = useRef<PendingOutboundTextScroll[]>([]);
-  const imagePreviewByUrlRef = useRef<Map<string, string>>(new Map());
-  const objectUrlsRef = useRef<string[]>([]);
-  const queryClient = useQueryClient();
-
-  const scrollToBottom = useCallback(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-
-    container.scrollTop = container.scrollHeight;
-  }, []);
-
-  const removePendingOutboundTextScrolls = useCallback((ids: Set<string>) => {
-    pendingOutboundTextScrollsRef.current = pendingOutboundTextScrollsRef.current.filter((item) => {
-      if (!ids.has(item.id)) return true;
-
-      clearTimeout(item.timeoutId);
-      return false;
-    });
-  }, []);
-
-  const clearPendingOutboundTextScrolls = useCallback(() => {
-    pendingOutboundTextScrollsRef.current.forEach((item) => clearTimeout(item.timeoutId));
-    pendingOutboundTextScrollsRef.current = [];
-  }, []);
-
-  // --- 2. 하위 Hooks 호출 ---
-
-  // API를 통해 채팅 기록을 페이지 단위로 가져옵니다.
-  const {
-    data: chatHistoryPages,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    isLoading,
-  } = useGetChatHistories(chatId);
-
-  // WebSocket 연결을 관리하고 현재 연결 상태를 받아옵니다.
-  const { connectionStatus, submittedMessages, setSubmittedMessages } = useConnectWebSocket({
-    roomId: chatId,
-    clientRef,
-  });
-
-  const invalidateChatPreviewQueries = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: [ChatQueryKeys.chatHistories, chatId], refetchType: "none" });
-    queryClient.invalidateQueries({ queryKey: [ChatQueryKeys.chatRooms], refetchType: "none" });
-  }, [chatId, queryClient]);
-
-  // 화면 상단에 도달했을 때 이전 채팅 기록을 불러오는 무한 스크롤 Hook입니다.
-  const { lastElementRef: topDetectorRef } = useInfinityScroll({
-    fetchNextPage,
-    hasNextPage,
-    isDirectionTop: true,
-  });
-
-  // --- 3. Effects ---
-
-  // API로부터 받아온 채팅 기록(페이지 배열)을 단일 메시지 배열로 가공하고 정렬합니다.
-  useEffect(() => {
-    if (chatHistoryPages?.pages) {
-      const allMessages = chatHistoryPages.pages.flatMap((page) => page.content || []);
-      const sortedMessages = allMessages.sort(
-        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
-      );
-      // Deduplicate by id, keeping the last occurrence (chronological order)
-      const dedupedMessages: ChatMessage[] = [];
-      const seenIds = new Set<string>();
-      for (let i = sortedMessages.length - 1; i >= 0; i--) {
-        const msg = sortedMessages[i];
-        const dedupeKey = getMessageDedupeKey(msg);
-        if (!seenIds.has(dedupeKey)) {
-          seenIds.add(dedupeKey);
-          dedupedMessages.unshift(msg);
-        }
-      }
-      setSubmittedMessages(dedupedMessages);
-    }
-  }, [chatHistoryPages, setSubmittedMessages]);
-
-  useEffect(() => {
-    if (imagePreviewByUrlRef.current.size === 0) return;
-
-    const matchedPreviewUrls = new Set<string>();
-    let hasChanged = false;
-
-    const messagesWithPreviews = submittedMessages.map((message) => {
-      let hasAttachmentChanged = false;
-      const attachments = message.attachments.map((attachment) => {
-        if (!attachment.isImage || attachment.previewUrl || attachment.isOptimistic) {
-          return attachment;
-        }
-
-        const previewUrl = [...getImageUrlKeys(attachment.url), ...getImageUrlKeys(attachment.thumbnailUrl)]
-          .map((key) => imagePreviewByUrlRef.current.get(key))
-          .find((value): value is string => Boolean(value));
-
-        if (!previewUrl) {
-          return attachment;
-        }
-
-        hasAttachmentChanged = true;
-        matchedPreviewUrls.add(previewUrl);
-        return {
-          ...attachment,
-          previewUrl,
-        };
-      });
-
-      if (!hasAttachmentChanged) {
-        return message;
-      }
-
-      hasChanged = true;
-      return {
-        ...message,
-        attachments,
-      };
-    });
-
-    if (matchedPreviewUrls.size === 0) return;
-
-    const reconciledMessages = messagesWithPreviews.filter((message) => {
-      const shouldRemoveOptimisticMessage =
-        message.attachments.length > 0 &&
-        message.attachments.every(
-          (attachment) =>
-            attachment.isOptimistic && attachment.previewUrl && matchedPreviewUrls.has(attachment.previewUrl),
-        );
-
-      if (shouldRemoveOptimisticMessage) {
-        hasChanged = true;
-        return false;
-      }
-
-      return true;
-    });
-
-    if (!hasChanged) return;
-
-    imagePreviewByUrlRef.current.forEach((previewUrl, key) => {
-      if (matchedPreviewUrls.has(previewUrl)) {
-        imagePreviewByUrlRef.current.delete(key);
-      }
-    });
-
-    setSubmittedMessages(reconciledMessages);
-  }, [submittedMessages, setSubmittedMessages]);
-
-  // 채팅방 전환 시 자동 스크롤 상태를 초기화합니다.
-  useEffect(() => {
-    if (prevChatIdRef.current === chatId) return;
-
-    objectUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
-    objectUrlsRef.current = [];
-    imagePreviewByUrlRef.current.clear();
-    clearPendingOutboundTextScrolls();
-    prevChatIdRef.current = chatId;
-    hasInitialAutoScrolledRef.current = false;
-    prevMessageCountRef.current = 0;
-    shouldForceScrollToBottomRef.current = false;
-  }, [chatId, clearPendingOutboundTextScrolls]);
-
-  // 초기 메시지가 렌더링되면 최초 1회만 하단으로 이동합니다.
-  useEffect(() => {
-    if (isLoading || submittedMessages.length === 0 || hasInitialAutoScrolledRef.current) {
-      return;
-    }
-
-    const rafIds: number[] = [];
-    const timeoutIds: ReturnType<typeof setTimeout>[] = [];
-
-    const scheduleScrollToBottom = () => {
-      const rafId = requestAnimationFrame(() => {
-        scrollToBottom();
-      });
-      rafIds.push(rafId);
-    };
-
-    scheduleScrollToBottom();
-    const doubleRafId = requestAnimationFrame(() => {
-      scrollToBottom();
-      scheduleScrollToBottom();
-    });
-    rafIds.push(doubleRafId);
-
-    INITIAL_SCROLL_SETTLE_DELAYS_MS.forEach((delayMs) => {
-      const timeoutId = setTimeout(scrollToBottom, delayMs);
-      timeoutIds.push(timeoutId);
-    });
-
-    hasInitialAutoScrolledRef.current = true;
-    prevMessageCountRef.current = submittedMessages.length;
-
-    return () => {
-      rafIds.forEach((rafId) => cancelAnimationFrame(rafId));
-      timeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
-    };
-  }, [isLoading, scrollToBottom, submittedMessages.length]);
-
-  // 신규 메시지 도착 시 하단 근처라면 유지하고, 내가 보낸 메시지는 현재 위치와 무관하게 하단으로 이동합니다.
-  useEffect(() => {
-    if (isLoading || isFetchingNextPage) return;
-
-    const currentMessageCount = submittedMessages.length;
-    const prevMessageCount = prevMessageCountRef.current;
-    const container = scrollContainerRef.current;
-
-    if (!container) {
-      prevMessageCountRef.current = currentMessageCount;
-      return;
-    }
-
-    if (currentMessageCount <= prevMessageCount) {
-      prevMessageCountRef.current = currentMessageCount;
-      return;
-    }
-
-    if (!hasInitialAutoScrolledRef.current) {
-      prevMessageCountRef.current = currentMessageCount;
-      return;
-    }
-
-    const newMessages = submittedMessages.slice(prevMessageCount);
-    const matchedPendingOutboundTextIds = new Set<string>();
-    const hasConfirmedOutboundText = newMessages.some((message) => {
-      const pendingOutboundText = pendingOutboundTextScrollsRef.current.find(
-        (item) => item.senderId === message.senderId && item.content === normalizePendingText(message.content),
-      );
-
-      if (!pendingOutboundText) return false;
-
-      matchedPendingOutboundTextIds.add(pendingOutboundText.id);
-      return true;
-    });
-
-    if (matchedPendingOutboundTextIds.size > 0) {
-      removePendingOutboundTextScrolls(matchedPendingOutboundTextIds);
-    }
-
-    const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-    const shouldForceScrollToBottom = shouldForceScrollToBottomRef.current || hasConfirmedOutboundText;
-
-    if (shouldForceScrollToBottom || distanceFromBottom <= BOTTOM_PROXIMITY_THRESHOLD) {
-      const rafId = requestAnimationFrame(() => {
-        scrollToBottom();
-      });
-
-      shouldForceScrollToBottomRef.current = false;
-      prevMessageCountRef.current = currentMessageCount;
-
-      return () => cancelAnimationFrame(rafId);
-    }
-
-    prevMessageCountRef.current = currentMessageCount;
-  }, [isLoading, isFetchingNextPage, removePendingOutboundTextScrolls, scrollToBottom, submittedMessages]);
-
-  // --- 4. Handler 함수 ---
-
-  /** 텍스트 메시지를 WebSocket을 통해 서버로 전송합니다. */
-  const sendTextMessage = useCallback(
-    (content: string, senderId: number) => {
-      const normalizedContent = normalizePendingText(content);
-      if (normalizedContent === "") return; // 빈 메시지 전송 방지
-
-      if (clientRef.current?.active && connectionStatus === ConnectionStatus.Connected) {
-        // WebSocket으로 메시지 전송
-        clientRef.current.publish({
-          destination: `/publish/chat/${chatId}`,
-          body: JSON.stringify({ content, senderId }),
-        });
-
-        const pendingTextScrollId = `${Date.now()}-${Math.random()}`;
-        const timeoutId = setTimeout(() => {
-          pendingOutboundTextScrollsRef.current = pendingOutboundTextScrollsRef.current.filter(
-            (item) => item.id !== pendingTextScrollId,
-          );
-        }, OUTBOUND_TEXT_SCROLL_CONFIRM_TIMEOUT_MS);
-
-        pendingOutboundTextScrollsRef.current.push({
-          id: pendingTextScrollId,
-          senderId,
-          content: normalizedContent,
-          timeoutId,
-        });
-
-        requestAnimationFrame(scrollToBottom);
-        invalidateChatPreviewQueries();
-      } else {
-        // 여기에 메시지 전송 실패에 대한 UI 피드백 로직을 추가할 수 있습니다. (e.g., alert, toast)
-      }
-    },
-    [chatId, connectionStatus, invalidateChatPreviewQueries, scrollToBottom],
-  ); // chatId와 connectionStatus가 변경될 경우에만 함수를 재생성
-
-  const sendImageMessage = useCallback(
-    (imageUrls: string[], previewUrls: string[] = []) => {
-      if (imageUrls.length === 0) return false;
-
-      if (clientRef.current?.active && connectionStatus === ConnectionStatus.Connected) {
-        imageUrls.forEach((imageUrl, index) => {
-          const previewUrl = previewUrls[index];
-          if (!previewUrl) return;
-
-          getImageUrlKeys(imageUrl).forEach((key) => {
-            imagePreviewByUrlRef.current.set(key, previewUrl);
-          });
-        });
-
-        clientRef.current.publish({
-          destination: `/publish/chat/${chatId}/image`,
-          body: JSON.stringify({ imageUrls }),
-        });
-        invalidateChatPreviewQueries();
-
-        return true;
-      }
-
-      return false;
-    },
-    [chatId, connectionStatus, invalidateChatPreviewQueries],
-  );
-
-  /** 이미지 파일만 미리보기 메시지로 추가 */
-  const addImageMessagePreview = useCallback(
-    (files: File[], senderId: number) => {
-      const newMessages: ChatMessage[] = [];
-      const previewUrls: string[] = [];
-      files.forEach((file) => {
-        if (file.type.startsWith("image/")) {
-          const tempId = Date.now() + Math.random();
-          const imageUrl = URL.createObjectURL(file);
-          objectUrlsRef.current.push(imageUrl);
-          previewUrls.push(imageUrl);
-          newMessages.push({
-            id: tempId,
-            content: `이미지: ${file.name}`,
-            senderId,
-            createdAt: new Date().toISOString(),
-            attachments: [
-              {
-                id: tempId,
-                isImage: true,
-                url: imageUrl,
-                thumbnailUrl: imageUrl,
-                previewUrl: imageUrl,
-                isOptimistic: true,
-                createdAt: new Date().toISOString(),
-              },
-            ],
-          });
-        }
-      });
-      if (newMessages.length > 0) {
-        shouldForceScrollToBottomRef.current = true;
-        setSubmittedMessages((prev) => [...prev, ...newMessages]);
-      }
-      return previewUrls;
-    },
-    [setSubmittedMessages],
-  );
-
-  const removeImageMessagePreviews = useCallback(
-    (previewUrls: string[]) => {
-      if (previewUrls.length === 0) return;
-
-      const previewUrlSet = new Set(previewUrls);
-      previewUrls.forEach((previewUrl) => {
-        URL.revokeObjectURL(previewUrl);
-      });
-      objectUrlsRef.current = objectUrlsRef.current.filter((objectUrl) => !previewUrlSet.has(objectUrl));
-
-      setSubmittedMessages((prev) =>
-        prev.filter(
-          (message) =>
-            message.attachments.length === 0 ||
-            !message.attachments.every(
-              (attachment) =>
-                attachment.isOptimistic && attachment.previewUrl && previewUrlSet.has(attachment.previewUrl),
-            ),
-        ),
-      );
-    },
-    [setSubmittedMessages],
-  );
-
-  /** 이미지가 아닌 파일을 미리보기 메시지로 추가 */
-  const addFileMessagePreview = useCallback(
-    (files: File[], senderId: number) => {
-      const newMessages: ChatMessage[] = [];
-      files.forEach((file) => {
-        if (!file.type.startsWith("image/")) {
-          const tempId = Date.now() + Math.random();
-          newMessages.push({
-            id: tempId,
-            content: `파일: ${file.name}`,
-            senderId,
-            createdAt: new Date().toISOString(),
-            attachments: [
-              {
-                id: tempId,
-                isImage: false,
-                url: URL.createObjectURL(file),
-                thumbnailUrl: null,
-                createdAt: new Date().toISOString(),
-              },
-            ],
-          });
-        }
-      });
-      if (newMessages.length > 0) {
-        shouldForceScrollToBottomRef.current = true;
-        setSubmittedMessages((prev) => [...prev, ...newMessages]);
-      }
-    },
-    [setSubmittedMessages],
-  );
-
-  // Cleanup created object URLs on unmount
-  useEffect(() => {
-    return () => {
-      objectUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
-      objectUrlsRef.current = [];
-      clearPendingOutboundTextScrolls();
-    };
-  }, [clearPendingOutboundTextScrolls]);
-
-  // --- 5. 최종 반환 객체 ---
-  return {
-    // Data & State
-    messages: submittedMessages,
-    connectionStatus,
-    isLoading, // 초기 데이터 로딩 상태
-    isFetchingNextPage, // 이전 기록 로딩 상태
-
-    // Refs
-    scrollContainerRef, // 실제 스크롤 컨테이너 ref
-    messagesEndRef, // 자동 스크롤을 위한 ref
-    topDetectorRef, // 무한 스크롤 감지를 위한 ref
-
-    // Handlers
-    sendTextMessage,
-    sendImageMessage,
-    addImageMessagePreview,
-    removeImageMessagePreviews,
-    addFileMessagePreview,
-  };
-};
-
-export default useChatListHandler;
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_hooks/usePutChatReadHandler.ts b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_hooks/usePutChatReadHandler.ts
deleted file mode 100644
index f40124ccd..000000000
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_hooks/usePutChatReadHandler.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useEffect } from "react";
-
-import { usePutChatRead } from "@/apis/chat";
-
-const usePutChatReadHandler = (chatId: number) => {
-  const { mutate: putChatRead } = usePutChatRead();
-
-  useEffect(() => {
-    if (chatId) {
-      putChatRead(chatId);
-    }
-  }, [chatId, putChatRead]);
-};
-export default usePutChatReadHandler;
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/ChatInputBar.stories.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/ChatInputBar.stories.tsx
new file mode 100644
index 000000000..1a2459b57
--- /dev/null
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/ChatInputBar.stories.tsx
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
+import ChatInputBar from "./index";
+
+const meta = {
+  title: "Chat/Composer",
+  component: ChatInputBar,
+  args: { onSendText: fn(async () => true), onSendImages: fn(async () => true) },
+} satisfies Meta<typeof ChatInputBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Ready: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("button", { name: "메시지 보내기" })).toBeDisabled();
+    await userEvent.type(canvas.getByRole("textbox", { name: "메시지" }), "교환학생 준비가 궁금해요");
+    await userEvent.click(canvas.getByRole("button", { name: "메시지 보내기" }));
+    await expect(args.onSendText).toHaveBeenCalledWith("교환학생 준비가 궁금해요");
+    await expect(canvas.getByRole("textbox")).toHaveValue("");
+  },
+};
+export const Offline: Story = {
+  args: { canSend: false },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole("textbox"), "연결되면 보낼 초안");
+    await expect(canvas.getByRole("textbox")).toHaveValue("연결되면 보낼 초안");
+    await expect(canvas.getByRole("button", { name: "메시지 보내기" })).toBeDisabled();
+    await expect(args.onSendText).not.toHaveBeenCalled();
+  },
+};
+export const AccessDenied: Story = { args: { disabled: true, canSend: false } };
+export const SendFailure: Story = {
+  args: { onSendText: fn(async () => false) },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole("textbox"), "다시 보낼 메시지");
+    await userEvent.click(canvas.getByRole("button", { name: "메시지 보내기" }));
+    await expect(canvas.getByRole("alert")).toBeVisible();
+    await expect(canvas.getByRole("textbox")).toHaveValue("다시 보낼 메시지");
+  },
+};
+export const ImageSelection: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole("textbox"), "이미지와 별도로 남길 초안");
+    const file = new File(["image"], "campus.png", { type: "image/png" });
+    await userEvent.upload(canvas.getByLabelText("채팅 이미지 선택"), file);
+    await expect(canvas.getByRole("list", { name: "선택한 이미지" })).toBeVisible();
+    await userEvent.click(canvas.getByRole("button", { name: "이미지 1장 보내기" }));
+    await expect(args.onSendImages).toHaveBeenCalledWith([file]);
+    await expect(canvas.getByRole("textbox")).toHaveValue("이미지와 별도로 남길 초안");
+    await expect(canvas.queryByRole("list", { name: "선택한 이미지" })).not.toBeInTheDocument();
+  },
+};
+
+export const ImageUploadFailure: Story = {
+  args: { onSendImages: fn(async () => false) },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole("textbox"), "업로드 실패에도 남길 초안");
+    const file = new File(['<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"/>'], "campus.svg", {
+      type: "image/svg+xml",
+    });
+    await userEvent.upload(canvas.getByLabelText("채팅 이미지 선택"), file);
+    await userEvent.click(canvas.getByRole("button", { name: "이미지 1장 보내기" }));
+    await expect(args.onSendImages).toHaveBeenCalledWith([file]);
+    await expect(canvas.getByRole("alert")).toBeVisible();
+    await expect(canvas.getByRole("list", { name: "선택한 이미지" })).toBeVisible();
+    await expect(canvas.getByRole("textbox")).toHaveValue("업로드 실패에도 남길 초안");
+  },
+};
+
+export const Uploading: Story = {
+  args: { onSendText: fn(() => new Promise<boolean>(() => {})) },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole("textbox"), "전송 중에는 중복 입력을 막아요");
+    await userEvent.click(canvas.getByRole("button", { name: "메시지 보내기" }));
+    await expect(canvas.getByRole("form")).toHaveAttribute("aria-busy", "true");
+    await expect(canvas.getByRole("textbox")).toBeDisabled();
+    await expect(canvas.getByRole("button", { name: "메시지 보내기" })).toBeDisabled();
+  },
+};
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/_hooks/useFileHandler.ts b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/_hooks/useFileHandler.ts
deleted file mode 100644
index 2ec4a7788..000000000
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/_hooks/useFileHandler.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useRef, useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-// Zod 스키마 정의
-const fileSchema = z.object({
-  files: z.array(z.instanceof(File)).min(1, "파일을 선택해주세요"),
-});
-
-// 타입 정의
-type FileForm = z.infer<typeof fileSchema>;
-
-type UseFileHandlerProps = {
-  onSendFiles: (data: { files: File[] }) => void;
-  setIsAttachmentOptionsOpen: (isOpen: boolean) => void;
-};
-
-const useFileHandler = ({ onSendFiles, setIsAttachmentOptionsOpen }: UseFileHandlerProps) => {
-  // 파일용 폼
-  const fileForm = useForm<FileForm>({
-    resolver: zodResolver(fileSchema),
-  });
-
-  // state
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-
-  // ref
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  // 파일이 있는지 여부
-  const hasFiles = selectedFiles.length > 0;
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (files) {
-      const fileArray = Array.from(files);
-      setSelectedFiles(fileArray);
-      // 파일 선택 시 첨부파일 옵션 닫기
-      setIsAttachmentOptionsOpen(false);
-    }
-  };
-
-  const handleFileClick = () => {
-    // 파일 선택 트리거
-    fileInputRef.current?.click();
-  };
-
-  const onSubmitFiles = (data: FileForm) => {
-    onSendFiles(data);
-    setSelectedFiles([]);
-    if (fileInputRef.current) fileInputRef.current.value = "";
-  };
-
-  return {
-    fileInputRef,
-    selectedFiles,
-    setSelectedFiles,
-    fileForm,
-    onSubmitFiles,
-    hasFiles,
-    handleFileChange,
-    handleFileClick,
-  };
-};
-
-export default useFileHandler;
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/_hooks/useImageHandler.ts b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/_hooks/useImageHandler.ts
deleted file mode 100644
index 16fb17388..000000000
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/_hooks/useImageHandler.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useRef, useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-// Zod 스키마 정의
-const imageSchema = z.object({
-  images: z.array(z.instanceof(File)).min(1, "이미지를 선택해주세요"),
-});
-
-// 타입 정의
-type ImageForm = z.infer<typeof imageSchema>;
-
-type UseImageHandlerProps = {
-  onSendImages: (data: { images: File[] }) => void;
-  setIsAttachmentOptionsOpen: (isOpen: boolean) => void;
-};
-
-const useImageHandler = ({ onSendImages, setIsAttachmentOptionsOpen }: UseImageHandlerProps) => {
-  // 이미지용 폼
-  const imageForm = useForm<ImageForm>({
-    resolver: zodResolver(imageSchema),
-  });
-
-  // state
-  const [selectedImages, setSelectedImages] = useState<File[]>([]);
-
-  // ref
-  const imageInputRef = useRef<HTMLInputElement>(null);
-
-  // 이미지가 있는지 여부
-  const hasImages = selectedImages.length > 0;
-
-  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (files) {
-      const fileArray = Array.from(files);
-      setSelectedImages(fileArray);
-      // 이미지 선택 시 첨부파일 옵션 닫기
-      setIsAttachmentOptionsOpen(false);
-    }
-  };
-
-  const handleAlbumClick = () => {
-    // 이미지 파일 선택 트리거
-    imageInputRef.current?.click();
-  };
-
-  const onSubmitImages = (data: ImageForm) => {
-    onSendImages(data);
-    setSelectedImages([]);
-    if (imageInputRef.current) imageInputRef.current.value = "";
-  };
-
-  return {
-    imageInputRef,
-    selectedImages,
-    setSelectedImages,
-    imageForm,
-    onSubmitImages,
-    hasImages,
-    handleImageChange,
-    handleAlbumClick,
-  };
-};
-
-export default useImageHandler;
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/_hooks/useMessageHandler.ts b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/_hooks/useMessageHandler.ts
deleted file mode 100644
index e3a9502f6..000000000
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/_hooks/useMessageHandler.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-// Zod 스키마 정의
-const messageSchema = z.object({
-  message: z.string().min(1, "메시지를 입력해주세요").trim(),
-});
-
-// 타입 정의
-type MessageForm = z.infer<typeof messageSchema>;
-
-type UseMessageHandlerProps = {
-  onSendMessage: (data: { message: string }) => void;
-};
-
-const useMessageHandler = ({ onSendMessage }: UseMessageHandlerProps) => {
-  // 텍스트 메시지용 폼
-  const messageForm = useForm<MessageForm>({
-    resolver: zodResolver(messageSchema),
-    defaultValues: { message: "" },
-  });
-
-  const watchedMessage = messageForm.watch("message", "");
-  const isMessageEmpty = !watchedMessage?.trim();
-
-  const onSubmitMessage = (data: MessageForm) => {
-    onSendMessage({
-      message: data.message,
-    });
-    messageForm.reset();
-  };
-
-  return {
-    messageForm,
-    onSubmitMessage,
-    isMessageEmpty,
-  };
-};
-
-export default useMessageHandler;
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/index.dom.test.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/index.dom.test.tsx
new file mode 100644
index 000000000..4200a782b
--- /dev/null
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/index.dom.test.tsx
@@ -0,0 +1,190 @@
+// @vitest-environment jsdom
+import { act, createEvent, fireEvent, render, screen } from "@testing-library/react/pure";
+import { beforeEach, expect, it, vi } from "vitest";
+import ChatInputBar from ".";
+
+vi.mock("@/public/svgs/mentor", () => ({
+  IconAlbum: () => <span />,
+  IconDirectMessage: () => <span />,
+}));
+
+const createObjectURL = vi.fn<(file: Blob) => string>();
+const revokeObjectURL = vi.fn<(url: string) => void>();
+
+beforeEach(() => {
+  createObjectURL.mockReset().mockImplementation(() => `blob:preview-${createObjectURL.mock.calls.length}`);
+  revokeObjectURL.mockReset();
+  vi.stubGlobal("URL", Object.assign(class extends URL {}, { createObjectURL, revokeObjectURL }));
+});
+
+const getMessage = () => screen.getByRole("textbox", { name: "메시지" }) as HTMLTextAreaElement;
+const getForm = () => screen.getByRole("form", { name: "채팅 메시지 작성" });
+const chooseImages = (files: File[]) =>
+  fireEvent.change(screen.getByLabelText("채팅 이미지 선택"), { target: { files } });
+
+it("does not publish whitespace through Enter or form submission", () => {
+  const onSendText = vi.fn().mockResolvedValue(true);
+  render(<ChatInputBar onSendText={onSendText} onSendImages={vi.fn().mockResolvedValue(true)} />);
+  fireEvent.change(getMessage(), { target: { value: "  \n " } });
+  fireEvent.keyDown(getMessage(), { key: "Enter" });
+  fireEvent.submit(getForm());
+  expect(onSendText).not.toHaveBeenCalled();
+  expect(getMessage().value).toBe("  \n ");
+});
+
+it("keeps IME confirmation and Shift+Enter separate from sending", async () => {
+  const onSendText = vi.fn().mockResolvedValue(true);
+  render(<ChatInputBar onSendText={onSendText} onSendImages={vi.fn().mockResolvedValue(true)} />);
+  fireEvent.change(getMessage(), { target: { value: "  안녕하세요\n반갑습니다  " } });
+  fireEvent.compositionStart(getMessage());
+  fireEvent.keyDown(getMessage(), { key: "Enter", isComposing: true });
+  fireEvent.compositionEnd(getMessage());
+  fireEvent.keyDown(getMessage(), { key: "Enter", keyCode: 229 });
+  const lineBreak = createEvent.keyDown(getMessage(), { key: "Enter", shiftKey: true });
+  fireEvent(getMessage(), lineBreak);
+  expect(lineBreak.defaultPrevented).toBe(false);
+  expect(onSendText).not.toHaveBeenCalled();
+
+  await act(async () => {
+    fireEvent.keyDown(getMessage(), { key: "Enter" });
+  });
+  expect(onSendText).toHaveBeenCalledExactlyOnceWith("안녕하세요\n반갑습니다");
+  expect(getMessage().value).toBe("");
+});
+
+it("locks immediately while sending and preserves text after a refused send", async () => {
+  let finishSend: (accepted: boolean) => void = () => {};
+  const onSendText = vi.fn().mockImplementation(
+    () =>
+      new Promise<boolean>((resolve) => {
+        finishSend = resolve;
+      }),
+  );
+  render(<ChatInputBar onSendText={onSendText} onSendImages={vi.fn().mockResolvedValue(true)} />);
+  fireEvent.change(getMessage(), { target: { value: "원래 메시지" } });
+
+  act(() => {
+    fireEvent.submit(getForm());
+    fireEvent.submit(getForm());
+    fireEvent.change(getMessage(), { target: { value: "요청 중 변경" } });
+  });
+  expect(onSendText).toHaveBeenCalledTimes(1);
+  expect(getMessage().disabled).toBe(true);
+  expect(getMessage().value).toBe("원래 메시지");
+
+  await act(async () => {
+    finishSend(false);
+  });
+  expect(getMessage().value).toBe("원래 메시지");
+  expect(getMessage().disabled).toBe(false);
+  expect(screen.getByRole("alert").textContent).toContain("입력 내용은 유지했어요");
+});
+
+it("keeps a thrown send draft and clears only after a later accepted send", async () => {
+  const onSendText = vi.fn().mockRejectedValueOnce(new Error("failed")).mockResolvedValueOnce(true);
+  render(<ChatInputBar onSendText={onSendText} onSendImages={vi.fn().mockResolvedValue(true)} />);
+  fireEvent.change(getMessage(), { target: { value: "다시 보낼 내용" } });
+
+  await act(async () => {
+    fireEvent.submit(getForm());
+  });
+  expect(screen.getByRole("alert").textContent).toContain("입력 내용을 유지");
+  expect(getMessage().value).toBe("다시 보낼 내용");
+
+  await act(async () => {
+    fireEvent.submit(getForm());
+  });
+  expect(getMessage().value).toBe("");
+  expect(screen.queryByRole("alert")).toBeNull();
+});
+
+it("retains images and their stable previews on failure and releases them after success", async () => {
+  const onSendImages = vi.fn().mockResolvedValueOnce(false).mockResolvedValueOnce(true);
+  const onSendText = vi.fn().mockResolvedValue(true);
+  const props = { onSendText, onSendImages };
+  const { rerender, unmount } = render(<ChatInputBar {...props} />);
+  fireEvent.change(getMessage(), { target: { value: "이미지 다음에 보낼 글" } });
+  const first = new File(["first"], "first.png", { type: "image/png" });
+  const second = new File(["second"], "second.jpg", { type: "image/jpeg" });
+  chooseImages([first, second]);
+  expect(createObjectURL).toHaveBeenCalledTimes(2);
+  const firstPreview = screen.getByRole("img", { name: "first.png" }).getAttribute("src");
+
+  rerender(<ChatInputBar {...props} disabled />);
+  rerender(<ChatInputBar {...props} />);
+  expect(createObjectURL).toHaveBeenCalledTimes(2);
+  expect(screen.getByRole("img", { name: "first.png" }).getAttribute("src")).toBe(firstPreview);
+
+  fireEvent.click(screen.getByRole("button", { name: "second.jpg 제거" }));
+  expect(revokeObjectURL).toHaveBeenCalledExactlyOnceWith("blob:preview-2");
+  await act(async () => {
+    fireEvent.click(screen.getByRole("button", { name: "이미지 1장 보내기" }));
+  });
+  expect(onSendImages).toHaveBeenLastCalledWith([first]);
+  expect(screen.getByRole("img", { name: "first.png" })).toBeTruthy();
+  expect(revokeObjectURL).toHaveBeenCalledTimes(1);
+
+  await act(async () => {
+    fireEvent.click(screen.getByRole("button", { name: "이미지 1장 보내기" }));
+  });
+  expect(screen.queryByRole("list", { name: "선택한 이미지" })).toBeNull();
+  expect(getMessage().value).toBe("이미지 다음에 보낼 글");
+  expect(onSendText).not.toHaveBeenCalled();
+  expect(revokeObjectURL).toHaveBeenCalledTimes(2);
+
+  chooseImages([first]);
+  unmount();
+  expect(revokeObjectURL).toHaveBeenCalledTimes(3);
+});
+
+it("prevents duplicate image submissions and keeps selection immutable while uploading", async () => {
+  let finishSend: (accepted: boolean) => void = () => {};
+  const onSendImages = vi.fn().mockImplementation(
+    () =>
+      new Promise<boolean>((resolve) => {
+        finishSend = resolve;
+      }),
+  );
+  render(<ChatInputBar onSendText={vi.fn().mockResolvedValue(true)} onSendImages={onSendImages} />);
+  const first = new File(["image"], "image.png", { type: "image/png" });
+  chooseImages([first]);
+  fireEvent.submit(getForm());
+  fireEvent.submit(getForm());
+  fireEvent.click(screen.getByRole("button", { name: "image.png 제거" }));
+  chooseImages([new File(["other"], "other.png", { type: "image/png" })]);
+  expect(onSendImages).toHaveBeenCalledExactlyOnceWith([first]);
+  expect(screen.queryByRole("img", { name: "other.png" })).toBeNull();
+  expect((screen.getByRole("button", { name: "image.png 제거" }) as HTMLButtonElement).disabled).toBe(true);
+
+  await act(async () => {
+    finishSend(false);
+  });
+  expect(screen.getByRole("img", { name: "image.png" })).toBeTruthy();
+});
+
+it("rejects non-image selection and never exposes a file-send action", () => {
+  const onSendImages = vi.fn().mockResolvedValue(true);
+  render(<ChatInputBar onSendText={vi.fn().mockResolvedValue(true)} onSendImages={onSendImages} />);
+  chooseImages([new File(["pdf"], "document.pdf", { type: "application/pdf" })]);
+  expect(screen.getByRole("alert").textContent).toBe("이미지만 보낼 수 있어요.");
+  expect(screen.queryByRole("list", { name: "선택한 이미지" })).toBeNull();
+  expect(onSendImages).not.toHaveBeenCalled();
+});
+
+it("keeps composing while disconnected and sends the same draft after reconnect", async () => {
+  const props = { onSendText: vi.fn().mockResolvedValue(true), onSendImages: vi.fn().mockResolvedValue(true) };
+  const { rerender } = render(<ChatInputBar {...props} canSend={false} />);
+  fireEvent.change(getMessage(), { target: { value: "연결 복구 중 작성한 메시지" } });
+  expect(getMessage().disabled).toBe(false);
+  expect((screen.getByRole("button", { name: "메시지 보내기" }) as HTMLButtonElement).disabled).toBe(true);
+  fireEvent.submit(getForm());
+  expect(props.onSendText).not.toHaveBeenCalled();
+
+  rerender(<ChatInputBar {...props} canSend />);
+  expect(getMessage().value).toBe("연결 복구 중 작성한 메시지");
+  await act(async () => {
+    fireEvent.submit(getForm());
+  });
+  expect(props.onSendText).toHaveBeenCalledExactlyOnceWith("연결 복구 중 작성한 메시지");
+  expect(getMessage().value).toBe("");
+});
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/index.tsx
index 53346ffd5..2f2c2e7a3 100644
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/index.tsx
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatInputBar/index.tsx
@@ -1,231 +1,212 @@
-import clsx from "clsx";
-import { useState } from "react";
-import Image from "@/components/ui/FallbackImage";
-import { IconAlbum, IconDirectMessage, IconFile, IconPlusK200, IconXWhite } from "@/public/svgs/mentor";
-import { downloadLocalFile } from "@/utils/fileUtils";
-import useFileHandler from "./_hooks/useFileHandler";
-import useImageHandler from "./_hooks/useImageHandler";
-import useMessageHandler from "./_hooks/useMessageHandler";
+"use client";
+
+import { type ChangeEvent, type FormEvent, type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
+import { IconAlbum, IconDirectMessage } from "@/public/svgs/mentor";
 
 interface ChatInputBarProps {
-  onSendMessage: (data: { message: string }) => void;
-  onSendImages: (data: { images: File[] }) => void;
-  onSendFiles: (data: { files: File[] }) => void;
+  disabled?: boolean;
+  canSend?: boolean;
+  onSendText: (content: string) => Promise<boolean>;
+  onSendImages: (files: File[]) => Promise<boolean>;
+}
+
+interface SelectedImage {
+  id: number;
+  file: File;
 }
 
-const ChatInputBar = ({ onSendMessage, onSendImages, onSendFiles }: ChatInputBarProps) => {
-  const [isAttachmentOptionsOpen, setIsAttachmentOptionsOpen] = useState(false);
-
-  const { messageForm, onSubmitMessage, isMessageEmpty } = useMessageHandler({ onSendMessage });
-  const {
-    imageInputRef,
-    selectedImages,
-    setSelectedImages,
-    imageForm,
-    onSubmitImages,
-    hasImages,
-    handleImageChange,
-    handleAlbumClick,
-  } = useImageHandler({ onSendImages, setIsAttachmentOptionsOpen });
-
-  const {
-    fileInputRef,
-    selectedFiles,
-    setSelectedFiles,
-    fileForm,
-    onSubmitFiles,
-    hasFiles,
-    handleFileChange,
-    handleFileClick,
-  } = useFileHandler({ onSendFiles, setIsAttachmentOptionsOpen });
-
-  const hasAttachments = hasImages || hasFiles;
-
-  // 통합 전송 함수 - DirectMessage 버튼 클릭 시 호출
-  const handleSend = () => {
-    if (hasImages) {
-      imageForm.setValue("images", selectedImages);
-      imageForm.handleSubmit(onSubmitImages)();
-    } else if (hasFiles) {
-      fileForm.setValue("files", selectedFiles);
-      fileForm.handleSubmit(onSubmitFiles)();
-    } else if (!isMessageEmpty) {
-      messageForm.handleSubmit(onSubmitMessage)();
+const ImagePreview = ({ file }: { file: File }) => {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  useEffect(
+    function createImagePreview() {
+      const objectUrl = URL.createObjectURL(file);
+      setPreviewUrl(objectUrl);
+
+      return function releaseImagePreview() {
+        URL.revokeObjectURL(objectUrl);
+      };
+    },
+    [file],
+  );
+
+  return previewUrl ? (
+    <img src={previewUrl} alt={file.name} className="h-16 w-16 rounded-lg object-cover" />
+  ) : (
+    <div className="h-16 w-16 rounded-lg bg-k-50" />
+  );
+};
+
+const ChatInputBar = ({ disabled = false, canSend = true, onSendText, onSendImages }: ChatInputBarProps) => {
+  const [message, setMessage] = useState("");
+  const [selectedImages, setSelectedImages] = useState<SelectedImage[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
+  const isSubmittingRef = useRef(false);
+  const isComposingRef = useRef(false);
+  const nextImageIdRef = useRef(0);
+  const hintId = useId();
+  const hasImages = selectedImages.length > 0;
+  const isLocked = disabled || isSubmitting;
+
+  const send = async () => {
+    if (disabled || !canSend || isSubmittingRef.current || isComposingRef.current) return;
+
+    const content = message.trim();
+    if (!hasImages && !content) return;
+
+    isSubmittingRef.current = true;
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const isAccepted = hasImages
+        ? await onSendImages(selectedImages.map((image) => image.file))
+        : await onSendText(content);
+
+      if (isAccepted) {
+        if (hasImages) {
+          setSelectedImages([]);
+        } else {
+          setMessage("");
+        }
+      } else {
+        setError("연결을 확인한 뒤 다시 보내주세요. 입력 내용은 유지했어요.");
+      }
+    } catch {
+      setError("전송하지 못했어요. 입력 내용을 유지했으니 다시 시도해주세요.");
+    } finally {
+      isSubmittingRef.current = false;
+      setIsSubmitting(false);
     }
   };
 
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    void send();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== "Enter" || event.shiftKey) return;
+    if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229 || isComposingRef.current) return;
+
+    event.preventDefault();
+    void send();
+  };
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = "";
+    if (disabled || isSubmittingRef.current || files.length === 0) return;
+
+    const images = files.filter((file) => file.type.startsWith("image/"));
+    setError(images.length === files.length ? null : "이미지만 보낼 수 있어요.");
+    setSelectedImages((previous) => [...previous, ...images.map((file) => ({ id: nextImageIdRef.current++, file }))]);
+  };
+
   return (
-    <div
-      className={`flex-shrink-0 transition-all duration-300 ${isAttachmentOptionsOpen ? "bg-primary-100 pb-28" : "pb-0"}`}
+    <form
+      aria-label="채팅 메시지 작성"
+      aria-busy={isSubmitting}
+      onSubmit={handleSubmit}
+      className="shrink-0 border-t border-k-50 bg-k-0 pb-[env(safe-area-inset-bottom)] shadow-top"
     >
-      {/* 숨겨진 파일 입력 요소들 */}
       <input
         ref={imageInputRef}
         type="file"
         accept="image/*"
         multiple
+        disabled={isLocked}
+        aria-label="채팅 이미지 선택"
         className="hidden"
         onChange={handleImageChange}
       />
-      <input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileChange} />
-
-      <div className="relative w-full bg-k-0 shadow-top">
-        {/* 선택된 파일들 미리보기 */}
-        {(selectedImages.length > 0 || selectedFiles.length > 0) && (
-          <div className="flex flex-wrap gap-2 border-b border-gray-200 p-4">
-            {selectedImages.map((file, index) => (
-              <div key={`image-${index}`} className="relative">
-                <button
-                  type="button"
-                  onClick={() => downloadLocalFile(file)}
-                  className="h-16 w-16 overflow-hidden rounded-lg border transition-opacity hover:opacity-80"
-                >
-                  <Image
-                    src={URL.createObjectURL(file)}
-                    alt={`Preview ${index}`}
-                    width={64}
-                    height={64}
-                    className="h-full w-full object-cover"
-                    unoptimized
-                  />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setSelectedImages((prev) => prev.filter((_, i) => i !== index))}
-                  className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-white typo-regular-4 hover:bg-red-600"
-                >
-                  ✕
-                </button>
-              </div>
-            ))}
-            {selectedFiles.map((file, index) => (
-              <div key={`file-${index}`} className="relative">
-                <button
-                  type="button"
-                  onClick={() => downloadLocalFile(file)}
-                  className="flex h-16 w-16 items-center justify-center rounded-lg bg-blue-200 transition-colors"
-                >
-                  <span className="text-blue-600 typo-regular-4">📁 {file.name.slice(0, 8)}...</span>
-                </button>
+
+      {hasImages && (
+        <div className="border-b border-k-50 px-4 py-3">
+          <p className="mb-2 text-k-600 typo-regular-4">
+            이미지 {selectedImages.length}장만 전송해요. 작성한 메시지는 유지돼요.
+          </p>
+          <ul aria-label="선택한 이미지" className="flex gap-3 overflow-x-auto py-1">
+            {selectedImages.map(({ id, file }) => (
+              <li key={id} className="relative shrink-0">
+                <ImagePreview file={file} />
                 <button
                   type="button"
-                  onClick={() => setSelectedFiles((prev) => prev.filter((_, i) => i !== index))}
-                  className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-600 text-white typo-regular-4"
+                  aria-label={`${file.name} 제거`}
+                  disabled={isLocked}
+                  onClick={() => {
+                    if (disabled || isSubmittingRef.current) return;
+                    setSelectedImages((images) => images.filter((image) => image.id !== id));
+                  }}
+                  className="absolute -right-1 -top-1 flex h-6 w-6 items-center justify-center rounded-full bg-k-900 text-white disabled:opacity-50"
                 >
-                  ✕
+                  <span aria-hidden="true">×</span>
                 </button>
-              </div>
+              </li>
             ))}
-          </div>
-        )}
-
-        {/* 메시지 폼 */}
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleSend();
+          </ul>
+        </div>
+      )}
+
+      <div className="flex items-end gap-2 px-4 pt-3">
+        <button
+          type="button"
+          aria-label="이미지 선택"
+          disabled={isLocked}
+          onClick={() => imageInputRef.current?.click()}
+          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-k-50 disabled:opacity-50"
+        >
+          <span aria-hidden="true">
+            <IconAlbum />
+          </span>
+        </button>
+        <textarea
+          aria-label="메시지"
+          aria-describedby={hintId}
+          rows={1}
+          value={message}
+          disabled={isLocked || hasImages}
+          onChange={(event) => {
+            if (disabled || isSubmittingRef.current) return;
+            setMessage(event.target.value);
+            setError(null);
+          }}
+          onCompositionStart={() => {
+            isComposingRef.current = true;
+          }}
+          onCompositionEnd={() => {
+            isComposingRef.current = false;
           }}
-          className={clsx(
-            "flex items-center gap-2 p-4",
-            isMessageEmpty && !isAttachmentOptionsOpen ? "bg-white" : "bg-primary-100",
-          )}
+          onKeyDown={handleKeyDown}
+          placeholder={hasImages ? "선택한 이미지만 전송해요" : "메시지를 입력하세요..."}
+          className="max-h-36 min-h-10 min-w-0 flex-1 resize-y rounded-2xl bg-k-50 px-3 py-2 text-k-800 typo-regular-2 disabled:opacity-60"
+        />
+        <button
+          type="submit"
+          aria-label={hasImages ? `이미지 ${selectedImages.length}장 보내기` : "메시지 보내기"}
+          disabled={isLocked || !canSend || (!hasImages && !message.trim())}
+          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-white disabled:bg-k-100"
         >
-          {/* + 버튼을 좌측에 배치 */}
-          <button
-            type="button"
-            onClick={() => setIsAttachmentOptionsOpen((prev) => !prev)}
-            disabled={hasAttachments}
-            className={clsx(
-              "h-7 w-7 rounded-full p-1 transition-colors",
-              hasAttachments ? "cursor-not-allowed bg-k-100" : isAttachmentOptionsOpen ? "bg-primary-200" : "bg-k-50",
-            )}
-          >
-            <span className="h-4 w-4">
-              {isAttachmentOptionsOpen ? (
-                // X 아이콘 (임시로 텍스트 사용)
-                <div className="flex h-full w-full items-center justify-center text-k-600 typo-bold-6">
-                  <IconXWhite />
-                </div>
-              ) : (
-                <IconPlusK200 />
-              )}
-            </span>
-          </button>
-
-          {/* Input 영역 */}
-          <div
-            className={clsx(
-              "transition-al flex h-10 flex-1 justify-between rounded-3xl",
-              hasAttachments
-                ? "bg-k-50"
-                : isMessageEmpty && !isAttachmentOptionsOpen
-                  ? "border-transparent bg-k-50"
-                  : "bg-white",
-            )}
-          >
-            <input
-              type="text"
-              disabled={hasAttachments}
-              className={clsx(
-                "flex-1 rounded-2xl py-2 pl-3 pr-2 text-k-800 outline-none transition-colors typo-regular-2 placeholder:text-k-500",
-                hasAttachments
-                  ? "cursor-not-allowed bg-k-50 text-k-400"
-                  : isMessageEmpty && !isAttachmentOptionsOpen
-                    ? "bg-k-50"
-                    : "bg-white",
-              )}
-              {...messageForm.register("message")}
-              placeholder={
-                hasAttachments
-                  ? `${hasImages ? "이미지" : "파일"}를 보내시려면 전송 버튼을 클릭하세요.`
-                  : "메시지를 입력하세요..."
-              }
-            />
-            <button
-              type="submit"
-              disabled={isMessageEmpty && !hasAttachments}
-              className={clsx(
-                "flex h-10 w-10 items-center justify-center rounded-full transition-colors",
-                isMessageEmpty && !hasAttachments ? "bg-k-100" : "bg-primary",
-              )}
-            >
-              <IconDirectMessage />
-            </button>
-          </div>
-        </form>
+          <span aria-hidden="true">
+            <IconDirectMessage />
+          </span>
+        </button>
       </div>
-
-      {/* 첨부파일 옵션 - 카카오톡 스타일 */}
-      {isAttachmentOptionsOpen && !hasAttachments && (
-        <div className="flex w-full">
-          <div className="ml-12 flex gap-3 p-4">
-            {/* 앨범 버튼 */}
-            <button
-              data-option="album"
-              onClick={handleAlbumClick}
-              className="flex h-10 w-10 flex-col items-center justify-center rounded-lg transition-colors"
-            >
-              <div className="typo-regular-2">
-                <IconAlbum />
-              </div>
-              <span className="text-k-700 typo-medium-5">앨범</span>
-            </button>
-
-            {/* 파일 버튼 */}
-            <button
-              data-option="file"
-              onClick={handleFileClick}
-              className="flex h-10 w-10 flex-col items-center justify-center rounded-lg transition-colors"
-            >
-              <div className="typo-regular-2">
-                <IconFile />
-              </div>
-              <span className="text-k-700 typo-medium-5">파일</span>
-            </button>
-          </div>
-        </div>
+      <p id={hintId} className="px-4 py-2 text-k-500 typo-regular-4">
+        {isSubmitting
+          ? "전송 중이에요."
+          : !canSend
+            ? "연결되면 메시지를 보낼 수 있어요. 작성한 내용은 유지돼요."
+            : "이미지만 보낼 수 있어요. Shift+Enter로 줄을 바꿀 수 있어요."}
+      </p>
+      {error && (
+        <p role="alert" className="px-4 pb-2 text-red-500 typo-regular-4">
+          {error}
+        </p>
       )}
-    </div>
+    </form>
   );
 };
 
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/ChatMessageBox.stories.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/ChatMessageBox.stories.tsx
new file mode 100644
index 000000000..6cdf02361
--- /dev/null
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/ChatMessageBox.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import ChatMessageBox from "./index";
+
+const message = {
+  id: 1,
+  senderId: 202,
+  content: "지원 서류는 미리 준비해두면 좋아요.\n궁금한 점을 알려주세요!",
+  createdAt: "2026-10-01T12:00:00Z",
+  attachments: [],
+};
+const meta = {
+  title: "Chat/Message",
+  component: ChatMessageBox,
+  args: { message, currentUserId: 101, partnerNickname: "교환학생 멘토", isPartnerMentor: true },
+} satisfies Meta<typeof ChatMessageBox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Received: Story = {};
+export const Sent: Story = { args: { message: { ...message, senderId: 101 } } };
+export const LongText: Story = {
+  args: { message: { ...message, content: `https://example.test/${"longpath".repeat(40)}` } },
+};
+export const Image: Story = {
+  args: {
+    message: {
+      ...message,
+      content: "",
+      attachments: [
+        {
+          id: 1,
+          isImage: true,
+          url: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150'%3E%3Crect width='200' height='150' fill='%23e2e8f0'/%3E%3C/svg%3E",
+          thumbnailUrl: null,
+          createdAt: message.createdAt,
+        },
+      ],
+    },
+  },
+};
+export const File: Story = {
+  args: {
+    message: {
+      ...message,
+      content: "준비 서류를 확인해주세요.",
+      attachments: [
+        { id: 2, isImage: false, url: "/preparation-guide.pdf", thumbnailUrl: null, createdAt: message.createdAt },
+      ],
+    },
+  },
+};
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.dom.test.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.dom.test.tsx
new file mode 100644
index 000000000..0eda618b5
--- /dev/null
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.dom.test.tsx
@@ -0,0 +1,94 @@
+// @vitest-environment jsdom
+import { act, fireEvent, render, screen } from "@testing-library/react/pure";
+import { expect, it, vi } from "vitest";
+import type { ChatMessage } from "@/types/chat";
+import { downloadFile } from "@/utils/fileUtils";
+import ChatMessageBox from ".";
+
+vi.mock("@/components/ui/ProfileWithBadge", () => ({ default: () => <span /> }));
+vi.mock("@/utils/fileUtils", () => ({
+  downloadFile: vi.fn().mockResolvedValue(undefined),
+  getFileExtension: () => "PDF",
+  getFileNamePrefix: () => "document",
+}));
+
+const imageMessage: ChatMessage = {
+  id: 1,
+  content: "",
+  senderId: 2,
+  createdAt: "2026-10-27T00:00:00.000Z",
+  attachments: [
+    {
+      id: 5,
+      isImage: true,
+      url: "https://example.com/image.png",
+      thumbnailUrl: null,
+      createdAt: "2026-10-27T00:00:00.000Z",
+    },
+  ],
+};
+
+const getImage = () => screen.getByRole("img", { name: "첨부 이미지" });
+const advanceRetry = () =>
+  act(() => {
+    vi.advanceTimersByTime(1000);
+  });
+
+it("stops after three failed image attempts and retries only when requested", () => {
+  vi.useFakeTimers();
+  render(<ChatMessageBox message={imageMessage} currentUserId={1} />);
+  const firstSrc = getImage().getAttribute("src");
+  fireEvent.error(getImage());
+  advanceRetry();
+  expect(getImage().getAttribute("src")).not.toBe(firstSrc);
+  fireEvent.error(getImage());
+  advanceRetry();
+  fireEvent.error(getImage());
+
+  expect(screen.queryByRole("img", { name: "첨부 이미지" })).toBeNull();
+  expect(screen.getByRole("status").textContent).toContain("불러오지 못했어요");
+  expect(vi.getTimerCount()).toBe(0);
+  act(() => {
+    vi.advanceTimersByTime(30000);
+  });
+  expect(screen.queryByRole("img", { name: "첨부 이미지" })).toBeNull();
+
+  fireEvent.click(screen.getByRole("button", { name: "다시 불러오기" }));
+  expect(getImage().getAttribute("src")).not.toBe(firstSrc);
+  fireEvent.load(getImage());
+  expect(screen.queryByRole("status")).toBeNull();
+});
+
+it("cancels image retry timers when the message unmounts", () => {
+  vi.useFakeTimers();
+  const { unmount } = render(<ChatMessageBox message={imageMessage} currentUserId={1} />);
+  fireEvent.error(getImage());
+  expect(vi.getTimerCount()).toBe(1);
+  unmount();
+  expect(vi.getTimerCount()).toBe(0);
+});
+
+it("resets image loading and cancels the old retry when its source changes", () => {
+  vi.useFakeTimers();
+  const { rerender } = render(<ChatMessageBox message={imageMessage} currentUserId={1} />);
+  fireEvent.error(getImage());
+  const replacement = {
+    ...imageMessage,
+    attachments: [{ ...imageMessage.attachments[0], url: "https://example.com/replacement.png" }],
+  };
+  rerender(<ChatMessageBox message={replacement} currentUserId={1} />);
+  expect(getImage().getAttribute("src")).toBe("https://example.com/replacement.png");
+  expect(vi.getTimerCount()).toBe(0);
+  fireEvent.load(getImage());
+  expect(screen.queryByRole("status")).toBeNull();
+});
+
+it("keeps received file downloads available through a native button", () => {
+  const fileMessage = {
+    ...imageMessage,
+    attachments: [{ ...imageMessage.attachments[0], isImage: false, url: "https://example.com/document.pdf" }],
+  };
+  render(<ChatMessageBox message={fileMessage} currentUserId={1} />);
+  fireEvent.click(screen.getByRole("button", { name: /첨부파일/ }));
+  expect(downloadFile).toHaveBeenCalledExactlyOnceWith("https://example.com/document.pdf", "document");
+});
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.tsx
index d90961fc3..1eec7c82f 100644
--- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.tsx
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import Image from "@/components/ui/FallbackImage";
 import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
 import type { ChatAttachment, ChatMessage } from "@/types/chat";
 import { normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
@@ -9,132 +8,107 @@ import { formatTime } from "@/utils/datetimeUtils";
 import { downloadFile, getFileExtension, getFileNamePrefix } from "@/utils/fileUtils";
 import { getMessageType, shouldShowContent } from "./_utils/messageUtils";
 
-const CHAT_IMAGE_HEALTH_CHECK_LIMIT = 10;
-const CHAT_IMAGE_HEALTH_CHECK_INTERVAL_MS = 1000;
-const CHAT_IMAGE_HEALTH_CHECK_SLOW_INTERVAL_MS = 5000;
+const IMAGE_MAX_ATTEMPTS = 3;
+const IMAGE_RETRY_DELAY_MS = 1000;
+
+type ImageStatus = "loading" | "loaded" | "waiting" | "failed";
 
 interface ChatMessageBoxProps {
   message: ChatMessage;
-  currentUserId?: number; // 현재 사용자 ID
-  partnerNickname?: string; // 상대방 닉네임
+  currentUserId?: number;
+  partnerNickname?: string;
   partnerProfileUrl?: string | null;
   isPartnerMentor?: boolean;
 }
 
-const appendHealthCheckCacheBuster = (src: string, attempt: number) => {
-  if (src.startsWith("blob:") || src.startsWith("data:")) return src;
+const getImageRetryUrl = (src: string, attempt: number, retryRound: number) => {
+  if (src.startsWith("blob:") || src.startsWith("data:") || (attempt === 0 && retryRound === 0)) return src;
 
   try {
-    const url = new URL(src, window.location.origin);
-    url.searchParams.set("__chat_image_health_check", `${Date.now()}-${attempt}`);
+    const url = new URL(src);
+    url.searchParams.set("__chat_image_retry", `${retryRound}-${attempt}`);
     return url.toString();
   } catch {
     return src;
   }
 };
 
-const isLocalPreviewUrl = (src: string) => src.startsWith("blob:") || src.startsWith("data:");
-
-const ChatImageLoading = () => (
-  <div className="flex h-[150px] w-[200px] max-w-[200px] items-center justify-center rounded-lg bg-k-50">
-    <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-  </div>
-);
-
-const useChatImageHealthCheck = (src: string, enabled: boolean) => {
-  const [isReady, setIsReady] = useState(!enabled);
-  const [readySrc, setReadySrc] = useState(src);
-
-  useEffect(() => {
-    if (!enabled || !src) {
-      setIsReady(true);
-      setReadySrc(src);
-      return;
-    }
-
-    let isCancelled = false;
-    let attempt = 0;
-    let timeoutId: ReturnType<typeof setTimeout> | null = null;
-    let probeImage: HTMLImageElement | null = null;
-
-    setIsReady(false);
-    setReadySrc("");
-
-    const checkImage = () => {
-      attempt += 1;
-      probeImage = document.createElement("img");
-
-      probeImage.onload = () => {
-        if (isCancelled) return;
-        setIsReady(true);
-        setReadySrc(src);
-      };
-
-      probeImage.onerror = () => {
-        if (isCancelled) return;
-
-        const retryDelayMs =
-          attempt >= CHAT_IMAGE_HEALTH_CHECK_LIMIT
-            ? CHAT_IMAGE_HEALTH_CHECK_SLOW_INTERVAL_MS
-            : CHAT_IMAGE_HEALTH_CHECK_INTERVAL_MS;
-        timeoutId = setTimeout(checkImage, retryDelayMs);
-      };
+const RetryableImage = ({ src }: { src: string }) => {
+  const [attempt, setAttempt] = useState(0);
+  const [retryRound, setRetryRound] = useState(0);
+  const [status, setStatus] = useState<ImageStatus>("loading");
 
-      probeImage.src = appendHealthCheckCacheBuster(src, attempt);
-    };
+  useEffect(
+    function retryFailedImage() {
+      if (status !== "waiting") return;
 
-    checkImage();
+      const timeoutId = setTimeout(() => {
+        setAttempt((previous) => previous + 1);
+        setStatus("loading");
+      }, IMAGE_RETRY_DELAY_MS);
 
-    return () => {
-      isCancelled = true;
-      if (timeoutId) clearTimeout(timeoutId);
-      if (probeImage) {
-        probeImage.onload = null;
-        probeImage.onerror = null;
-      }
-    };
-  }, [enabled, src]);
-
-  return { isReady, readySrc };
-};
-
-const ChatImage = ({ attachment }: { attachment: ChatAttachment }) => {
-  const imageSrc = attachment.previewUrl ?? attachment.thumbnailUrl ?? attachment.url;
-  const normalizedImageSrc = normalizeImageUrlToUploadCdn(imageSrc);
-  const shouldHealthCheck = !attachment.previewUrl && !isLocalPreviewUrl(normalizedImageSrc);
-  const { isReady, readySrc } = useChatImageHealthCheck(normalizedImageSrc, shouldHealthCheck);
-  const displaySrc = readySrc || normalizedImageSrc;
-  const [isImageLoaded, setIsImageLoaded] = useState(!shouldHealthCheck || isLocalPreviewUrl(displaySrc));
-
-  useEffect(() => {
-    setIsImageLoaded(!shouldHealthCheck || isLocalPreviewUrl(displaySrc));
-  }, [displaySrc, shouldHealthCheck]);
+      return function cancelImageRetry() {
+        clearTimeout(timeoutId);
+      };
+    },
+    [status],
+  );
 
   return (
-    <div className="relative h-[150px] w-[200px] max-w-[200px] overflow-hidden rounded-lg">
-      {(!isReady || !isImageLoaded) && (
-        <div className="absolute inset-0 z-10">
-          <ChatImageLoading />
+    <div className="relative h-[150px] w-[200px] max-w-full overflow-hidden rounded-lg bg-k-50">
+      {status === "failed" ? (
+        <div
+          role="status"
+          className="flex h-full flex-col items-center justify-center gap-2 px-3 text-center text-k-700"
+        >
+          <p className="typo-regular-4">이미지를 불러오지 못했어요.</p>
+          <button
+            type="button"
+            onClick={() => {
+              setAttempt(0);
+              setRetryRound((previous) => previous + 1);
+              setStatus("loading");
+            }}
+            className="rounded border border-k-200 px-3 py-1 typo-regular-4"
+          >
+            다시 불러오기
+          </button>
         </div>
-      )}
-      {isReady && (
-        <Image
-          src={displaySrc}
-          alt="첨부 이미지"
-          width={200}
-          height={150}
-          className={`h-full w-full max-w-[200px] rounded-lg object-cover ${isImageLoaded ? "opacity-100" : "opacity-0"}`}
-          unoptimized
-          onLoad={() => setIsImageLoaded(true)}
-        />
+      ) : (
+        <>
+          {status !== "loaded" && (
+            <div
+              role="status"
+              aria-label="이미지 불러오는 중"
+              className="absolute inset-0 flex items-center justify-center"
+            >
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            </div>
+          )}
+          <img
+            key={`${retryRound}-${attempt}`}
+            src={getImageRetryUrl(src, attempt, retryRound)}
+            alt="첨부 이미지"
+            width={200}
+            height={150}
+            onLoad={() => setStatus("loaded")}
+            onError={() => setStatus(attempt + 1 < IMAGE_MAX_ATTEMPTS ? "waiting" : "failed")}
+            className={`h-full w-full rounded-lg object-cover ${status === "loaded" ? "opacity-100" : "opacity-0"}`}
+          />
+        </>
       )}
     </div>
   );
 };
 
+const ChatImage = ({ attachment }: { attachment: ChatAttachment }) => {
+  const src = normalizeImageUrlToUploadCdn(attachment.previewUrl ?? attachment.thumbnailUrl ?? attachment.url);
+  return <RetryableImage key={src} src={src} />;
+};
+
 const ChatMessageBox = ({
   message,
-  currentUserId = 1,
+  currentUserId = 0,
   partnerNickname = "상대방",
   partnerProfileUrl = null,
   isPartnerMentor = false,
@@ -149,31 +123,24 @@ const ChatMessageBox = ({
 
     return (
       <div className="mt-2 space-y-2">
-        {message.attachments.map((attachment) => (
-          <div key={attachment.id}>
+        {message.attachments.map((attachment, index) => (
+          <div key={`${attachment.id > 0 ? attachment.id : attachment.url}-${index}`}>
             {attachment.isImage ? (
               // 이미지 렌더링
               <ChatImage attachment={attachment} />
             ) : (
               // 파일 렌더링
-              <div
+              <button
+                type="button"
                 className="flex max-w-[250px] cursor-pointer items-center space-x-3 rounded-lg bg-gray-100 p-3 transition-colors hover:bg-gray-200"
-                role="button"
-                tabIndex={0}
                 onClick={() => downloadFile(attachment.url, getFileNamePrefix(attachment.url))}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    downloadFile(attachment.url, getFileNamePrefix(attachment.url));
-                  }
-                }}
               >
                 <div className="min-w-0 flex-1 overflow-hidden">
                   <div className="text-k-900 typo-medium-2">첨부파일</div>
                   <div className="text-k-400 typo-regular-4">클릭시 다운로드 됩니다</div>
                   <div className="text-secondary typo-regular-4">{getFileExtension(attachment.url)} 파일</div>
                 </div>
-              </div>
+              </button>
             )}
           </div>
         ))}
diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.dom.test.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.dom.test.tsx
new file mode 100644
index 000000000..306404b98
--- /dev/null
+++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.dom.test.tsx
@@ -0,0 +1,139 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen } from "@testing-library/react/pure";
+import type { ReactNode } from "react";
+import { beforeEach, expect, it, vi } from "vitest";
+import type { ChatSnapshot } from "@/lib/chat/types";
+import { useChatSession } from "@/lib/chat/useChatSession";
+import type { ChatMessage } from "@/types/chat";
+import ChatContent from ".";
+
+const mocks = vi.hoisted(() => ({
+  partner: {
+    isSuccess: true,
+    isError: false,
+    error: null as { response: { status: number } } | null,
+    data: { nickname: "상대방", profileUrl: null },
+    refetch: vi.fn(),
+  },
+  snapshot: {} as ChatSnapshot,
+  sendText: vi.fn<() => Promise<boolean>>(),
+  sendImages: vi.fn<() => Promise<boolean>>(),
+}));
+
+vi.mock("@/apis/chat", () => ({ useGetPartnerInfo: () => mocks.partner }));
+vi.mock("@/app/mentor/chat/_ui/ChatAccess", () => ({
+  default: ({ children }: { children: (userId: number) => ReactNode }) => children(7),
+}));
+vi.mock("@/lib/zustand/useAuthStore", () => ({
+  default: (selector: (state: { clientRole: string; serverRole: string }) => unknown) =>
+    selector({ clientRole: "MENTEE", serverRole: "MENTEE" }),
+}));
+vi.mock("@/lib/chat/useChatSession", () => ({
+  useChatSession: vi.fn(() => ({
+    snapshot: mocks.snapshot,
+    sendText: mocks.sendText,
+    sendImages: mocks.sendImages,
+    session: {
+      setReading: vi.fn(),
+      reconnect: vi.fn(),
+      syncLatest: vi.fn(),
+      loadOlder: vi.fn(),
+      retryRead: vi.fn(),
+      dismissOutgoing: vi.fn(),
+    },
+  })),
+}));
+vi.mock("@/lib/chat/useChatScroll", () => ({
+  useChatScroll: () => ({
+    containerRef: { current: null },
+    contentRef: { current: null },
+    onScroll: vi.fn(),
+    captureAnchor: vi.fn(),
+    scrollToBottom: vi.fn(),
+    hasNewMessages: false,
+  }),
+}));
+vi.mock("../ChatNavBar", () => ({ default: () => <nav aria-label="채팅 탐색" /> }));
+vi.mock("./_ui/ChatMessageBox", () => ({
+  default: ({ message }: { message: ChatMessage }) => <p>{message.content}</p>,
+}));
+vi.mock("@/public/svgs/mentor", () => ({ IconAlbum: () => <span />, IconDirectMessage: () => <span /> }));
+
+beforeEach(() => {
+  Object.assign(mocks.partner, { isSuccess: true, isError: false, error: null });
+  mocks.partner.refetch.mockClear();
+  mocks.sendText.mockReset().mockResolvedValue(true);
+  mocks.sendImages.mockReset().mockResolvedValue(true);
+  vi.mocked(useChatSession).mockClear();
+  mocks.snapshot = {
+    connection: "connected",
+    historyStatus: "ready",
+    historyError: null,
+    syncError: null,
+    olderError: null,
+    isSyncing: false,
+    isLoadingOlder: false,
+    hasMore: true,
+    accessDenied: false,
+    readError: false,
+    messages: [
+      { id: 1, senderId: 8, content: "이전에 불러온 비공개 대화", createdAt: "2026-10-27T01:00:00Z", attachments: [] },
+    ],
+    outgoing: [
+      {
+        clientId: "pending-1",
+        senderId: 7,
+        content: "전송 확인을 기다리는 원문",
+        createdAt: "2026-10-27T01:01:00Z",
+        imageUrls: [],
+        remainingImageUrls: [],
+        status: "unconfirmed",
+      },
+    ],
+  };
+});
+
+it.each([
+  403, 404,
+])("hides existing history and outgoing messages when partner access later fails with %i", (status) => {
+  const { rerender } = render(<ChatContent chatId={42} />);
+  expect(screen.getByText("이전에 불러온 비공개 대화")).toBeTruthy();
+  expect(screen.getByText("전송 확인을 기다리는 원문")).toBeTruthy();
+  const composer = screen.getByRole("textbox", { name: "메시지" }) as HTMLTextAreaElement;
+  fireEvent.change(composer, { target: { value: "접근 거부 후 보내지 않을 초안" } });
+  expect(composer.disabled).toBe(false);
+
+  Object.assign(mocks.partner, { isSuccess: false, isError: true, error: { response: { status } } });
+  mocks.snapshot.connection = "disconnected";
+  rerender(<ChatContent chatId={42} />);
+
+  expect(screen.getByRole("alert").textContent).toContain("이 채팅방에 접근할 수 없습니다.");
+  expect(screen.queryByText("이전에 불러온 비공개 대화")).toBeNull();
+  expect(screen.queryByText("전송 확인을 기다리는 원문")).toBeNull();
+  expect(screen.queryByRole("button", { name: "이전 메시지 더 보기" })).toBeNull();
+  expect(screen.queryByRole("button", { name: "다시 연결" })).toBeNull();
+  expect(composer.disabled).toBe(true);
+  expect((screen.getByLabelText("채팅 이미지 선택") as HTMLInputElement).disabled).toBe(true);
+  expect(useChatSession).toHaveBeenLastCalledWith(42, 7, false);
+
+  fireEvent.submit(screen.getByRole("form", { name: "채팅 메시지 작성" }));
+  expect(mocks.sendText).not.toHaveBeenCalled();
+  expect(mocks.sendImages).not.toHaveBeenCalled();
+});
+
+it("keeps the previous conversation after a transient partner failure while pausing sends", () => {
+  const { rerender } = render(<ChatContent chatId={42} />);
+  Object.assign(mocks.partner, { isSuccess: false, isError: true, error: { response: { status: 503 } } });
+  mocks.snapshot.connection = "disconnected";
+  rerender(<ChatContent chatId={42} />);
+
+  expect(screen.getByRole("alert").textContent).toContain("상대 정보를 불러오지 못했어요.");
+  expect(screen.queryByText("이 채팅방에 접근할 수 없습니다.")).toBeNull();
+  expect(screen.getByText("이전에 불러온 비공개 대화")).toBeTruthy();
+  expect(screen.getByText("전송 확인을 기다리는 원문")).toBeTruthy();
+  expect((screen.getByRole("textbox", { name: "메시지" }) as HTMLTextAreaElement).disabled).toBe(true);
+  expect(useChatSession).toHaveBeenLastCalledWith(42, 7, false);
+
+  fireEvent.click(screen.getByRole("button", { name: "다시 시도" }));
+  expect(mocks.partner.refetch).toHaveBeenCalledOnce();
+});
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..53e933a6a 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
@@ -1,211 +1,233 @@
 "use client";
 
-import clsx from "clsx";
-import Link from "next/link";
 import { useGetPartnerInfo } from "@/apis/chat";
-import { useUploadChatImages } from "@/apis/image-upload";
-import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
-import { showIconToast } from "@/lib/toast/showIconToast";
+import ChatAccess from "@/app/mentor/chat/_ui/ChatAccess";
+import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
+import { getMessageKey } from "@/lib/chat/messages";
+import type { ChatConnection, OutgoingMessage } from "@/lib/chat/types";
+import { useChatScroll } from "@/lib/chat/useChatScroll";
+import { useChatSession } from "@/lib/chat/useChatSession";
 import useAuthStore from "@/lib/zustand/useAuthStore";
-import { ConnectionStatus } from "@/types/chat";
+import type { ChatMessage } from "@/types/chat";
 import { UserRole } from "@/types/mentor";
-import { tokenParse } from "@/utils/jwtUtils";
-import useChatListHandler from "./_hooks/useChatListHandler";
-import usePutChatReadHandler from "./_hooks/usePutChatReadHandler";
+import ChatNavBar from "../ChatNavBar";
 import { formatDateSeparator, isSameDay } from "./_lib/dateUtils";
 import ChatInputBar from "./_ui/ChatInputBar";
 import ChatMessageBox from "./_ui/ChatMessageBox";
 
-interface ChatContentProps {
-  chatId: number;
-}
-
-const ChatContent = ({ chatId }: ChatContentProps) => {
-  const { accessToken } = useAuthStore();
-  const parsedData = tokenParse(accessToken);
-  const userId = Number(parsedData?.sub ?? 0) || 0;
-
-  const isMentor = parsedData?.role === UserRole.MENTOR || parsedData?.role === UserRole.ADMIN;
-  const isPartnerMentor = !isMentor;
-
-  // 채팅 읽음 상태 업데이트 훅 진입시 자동으로
-  usePutChatReadHandler(chatId);
-
-  // 채팅 리스트 관리 훅
-  const {
-    // Data & State
-    messages,
-    connectionStatus,
-    isLoading, // 초기 데이터 로딩 상태
-    isFetchingNextPage, // 이전 기록 로딩 상태
-
-    // Refs
-    scrollContainerRef, // 실제 스크롤 컨테이너 ref
-    messagesEndRef, // 자동 스크롤을 위한 ref
-    topDetectorRef, // 무한 스크롤 감지를 위한 ref
-
-    // Handlers
-    sendTextMessage,
-    sendImageMessage,
-    addImageMessagePreview,
-    removeImageMessagePreviews,
-  } = useChatListHandler(chatId);
-
-  const uploadChatImagesMutation = useUploadChatImages();
-
-  const { data: partnerInfo } = useGetPartnerInfo(chatId);
+const CONNECTION_LABEL: Record<ChatConnection, string> = {
+  connecting: "채팅에 연결하고 있어요.",
+  connected: "실시간으로 연결되어 있어요.",
+  reconnecting: "연결을 복구하고 있어요. 입력한 내용은 유지됩니다.",
+  offline: "인터넷 연결을 확인해주세요. 입력한 내용은 유지됩니다.",
+  error: "채팅에 연결하지 못했어요. 다시 연결해주세요.",
+  disconnected: "채팅 연결이 종료되었어요.",
+};
 
-  const { partnerId, nickname, profileUrl, university } = partnerInfo ?? {};
+const toPreviewMessage = (outgoing: OutgoingMessage): ChatMessage => ({
+  id: -1,
+  content: outgoing.content,
+  senderId: outgoing.senderId,
+  createdAt: outgoing.createdAt,
+  attachments: outgoing.remainingImageUrls.map((url, index) => ({
+    id: index,
+    isImage: true,
+    url,
+    thumbnailUrl: null,
+    createdAt: outgoing.createdAt,
+  })),
+});
+
+const RoomContent = ({ chatId, userId }: { chatId: number; userId: number }) => {
+  const role = useAuthStore((state) => state.clientRole ?? state.serverRole);
+  const partner = useGetPartnerInfo(chatId, userId);
+  const partnerStatus = (partner.error as { response?: { status?: number } } | null)?.response?.status;
+  const partnerAccessDenied = partnerStatus === 403 || partnerStatus === 404;
+  const { session, snapshot, sendText, sendImages } = useChatSession(chatId, userId, !partner.isError);
+  const scroll = useChatScroll({
+    messages: snapshot.messages,
+    outgoingCount: snapshot.outgoing.length,
+    isLoadingOlder: snapshot.isLoadingOlder,
+    setReading: session.setReading,
+  });
+  const accessDenied = snapshot.accessDenied || partnerAccessDenied;
+  const canSend =
+    snapshot.connection === "connected" && snapshot.historyStatus === "ready" && partner.isSuccess && !accessDenied;
 
   return (
-    <div className="relative flex h-[calc(100vh-112px)] flex-col">
-      <div className="flex-1 overflow-hidden">
-        <div className="flex h-full flex-col px-5 pb-2">
-          {/* 하단 여백 추가 */}
-          {/* Floating 멘토 정보 영역 */}
-          <div className="z-10 mt-5 h-16 w-full flex-shrink-0">
-            <div
-              className={clsx(
-                "flex w-full items-center justify-between 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}`}
+    <div className="relative flex h-[calc(100dvh-112px)] min-h-0 flex-col md:h-[calc(100dvh-64px)]">
+      <div className="flex shrink-0 items-center justify-between gap-2 border-b border-k-50 px-5 py-3">
+        <p role="status" className="text-k-600 typo-regular-4">
+          {CONNECTION_LABEL[snapshot.connection]}
+        </p>
+        {snapshot.connection !== "connected" && !accessDenied && (
+          <button
+            type="button"
+            className="shrink-0 rounded-lg border border-k-100 px-3 py-2 text-primary typo-sb-11"
+            onClick={session.reconnect}
+          >
+            다시 연결
+          </button>
+        )}
+      </div>
+
+      {partner.isError && (
+        <div
+          role="alert"
+          className="flex items-center justify-between gap-3 bg-k-50 px-5 py-3 text-k-700 typo-regular-3"
+        >
+          <p>{partnerAccessDenied ? "이 채팅방에 접근할 수 없습니다." : "상대 정보를 불러오지 못했어요."}</p>
+          <button type="button" onClick={() => void partner.refetch()} className="shrink-0 text-primary">
+            다시 시도
+          </button>
+        </div>
+      )}
+      {snapshot.syncError && (
+        <div role="alert" className="px-5 py-2 text-k-600 typo-regular-4">
+          {snapshot.syncError}{" "}
+          <button type="button" onClick={() => void session.syncLatest()} className="text-primary">
+            기록 다시 확인
+          </button>
+        </div>
+      )}
+      {snapshot.readError && (
+        <p role="status" className="px-5 py-2 text-k-600 typo-regular-4">
+          읽음 상태를 반영하지 못했어요.{" "}
+          <button type="button" onClick={session.retryRead} className="text-primary">
+            다시 시도
+          </button>
+        </p>
+      )}
+
+      <div
+        ref={scroll.containerRef}
+        role="region"
+        onScroll={scroll.onScroll}
+        className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4"
+        style={{ overflowAnchor: "none" }}
+        aria-label="채팅 메시지"
+      >
+        <div ref={scroll.contentRef} className="space-y-4">
+          {snapshot.hasMore && !accessDenied && (
+            <div className="text-center">
+              <button
+                type="button"
+                disabled={snapshot.isLoadingOlder}
+                onClick={() => {
+                  scroll.captureAnchor();
+                  void session.loadOlder();
+                }}
+                className="rounded-full border border-k-100 px-4 py-2 text-k-600 typo-regular-4 disabled:opacity-50"
               >
-                {isMentor ? "멘티 페이지" : "멘토 페이지"}
-              </Link>
+                {snapshot.isLoadingOlder ? "이전 메시지를 불러오는 중…" : "이전 메시지 더 보기"}
+              </button>
+              {snapshot.olderError && (
+                <p role="alert" className="mt-2 text-accent-custom-red typo-regular-4">
+                  {snapshot.olderError}
+                </p>
+              )}
             </div>
-            <div className="rounded bg-white px-4 py-2 text-center">
-              <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>
+          )}
+          {snapshot.historyStatus === "loading" && (
+            <p role="status" className="py-10 text-center text-k-500">
+              채팅 기록을 불러오고 있어요.
+            </p>
+          )}
+          {snapshot.historyStatus === "error" && (
+            <div role="alert" className="space-y-3 py-10 text-center text-k-600">
+              <p>{snapshot.historyError}</p>
+              {!accessDenied && (
+                <button type="button" onClick={() => void session.syncLatest()} className="text-primary">
+                  다시 시도
+                </button>
+              )}
             </div>
-          </div>
-          {/* 채팅 메시지 영역 - 항상 스크롤 가능, 스크롤바 숨김 */}
-          <div
-            ref={scrollContainerRef}
-            className="scrollbar-hide mt-4 flex-1 overflow-y-auto 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="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>
+          )}
+          {snapshot.historyStatus === "ready" && snapshot.messages.length === 0 && snapshot.outgoing.length === 0 && (
+            <p className="py-10 text-center text-k-500 typo-regular-3">아직 대화가 없어요. 첫 메시지를 보내보세요.</p>
+          )}
+          {!accessDenied &&
+            snapshot.messages.map((message, index) => (
+              <div key={getMessageKey(message)} data-message-key={getMessageKey(message)}>
+                {(index === 0 || !isSameDay(snapshot.messages[index - 1].createdAt, message.createdAt)) && (
+                  <div className="mb-4 flex justify-center">
+                    <span className="rounded-full bg-k-50 px-3 py-1 text-k-600 typo-regular-2">
+                      {formatDateSeparator(message.createdAt)}
+                    </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>
+                )}
+                <ChatMessageBox
+                  message={message}
+                  currentUserId={userId}
+                  partnerNickname={partner.data?.nickname}
+                  partnerProfileUrl={partner.data?.profileUrl}
+                  isPartnerMentor={role === UserRole.MENTEE}
+                />
+              </div>
+            ))}
+          {!accessDenied &&
+            snapshot.outgoing.map((outgoing) => (
+              <div key={outgoing.clientId} className="space-y-1">
+                <ChatMessageBox message={toPreviewMessage(outgoing)} currentUserId={userId} />
+                <div className="text-right text-k-500 typo-regular-4">
+                  {outgoing.status === "pending" ? (
+                    <span role="status">전송 확인 중…</span>
+                  ) : (
+                    <div className="ml-auto max-w-xs space-y-2 rounded-lg border border-k-100 p-3 text-left">
+                      <p>
+                        전송 여부를 확인하지 못했어요. 기록에서 메시지를 확인해주세요. 자동으로 다시 보내지 않습니다.
+                      </p>
+                      <div className="flex gap-4">
+                        <button type="button" onClick={() => void session.syncLatest()} className="text-primary">
+                          기록 확인
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            if (window.confirm("이 대기 항목을 지울까요? 이미 전달된 메시지는 삭제되지 않습니다."))
+                              session.dismissOutgoing(outgoing.clientId);
+                          }}
+                          className="text-k-600"
+                        >
+                          대기 항목 지우기
+                        </button>
                       </div>
-                    )}
-                    {/* 일반 채팅 메시지 */}
-                    <ChatMessageBox
-                      message={message}
-                      currentUserId={userId}
-                      partnerNickname={nickname}
-                      partnerProfileUrl={profileUrl}
-                      isPartnerMentor={isPartnerMentor}
-                    />
-                  </div>
-                );
-              })}
-
-              {/* 스크롤 타겟 - 메시지 목록 끝 */}
-              <div ref={messagesEndRef} />
-            </div>
-          </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
         </div>
       </div>
 
-      {/* 메시지 입력 영역 - 항상 하단 고정 */}
+      {scroll.hasNewMessages && (
+        <button
+          type="button"
+          onClick={scroll.scrollToBottom}
+          className="absolute bottom-36 left-1/2 -translate-x-1/2 rounded-full bg-primary px-4 py-2 text-white shadow-sdwB typo-regular-4"
+        >
+          새 메시지 보기
+        </button>
+      )}
       <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);
-        }}
+        disabled={accessDenied || !partner.isSuccess || snapshot.historyStatus !== "ready"}
+        canSend={canSend}
+        onSendText={sendText}
+        onSendImages={sendImages}
       />
     </div>
   );
 };
 
+const ChatContent = ({ chatId }: { chatId: number }) => (
+  <ChatAccess fallbackHeader={<TopDetailNavigation showOnDesktop title="멘토 채팅" backHref="/mentor/chat" />}>
+    {(userId) => (
+      <>
+        <ChatNavBar chatId={chatId} userId={userId} />
+        <RoomContent key={`${userId}:${chatId}`} chatId={chatId} userId={userId} />
+      </>
+    )}
+  </ChatAccess>
+);
+
 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 9d172d731..54aaa93eb 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
@@ -1,178 +1,64 @@
 "use client";
 
-import clsx from "clsx";
-import Link from "next/link";
-import { useState } from "react";
 import { useGetPartnerInfo } from "@/apis/chat";
-import { useGetMyInfo } from "@/apis/MyPage";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
-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 ReportPanel from "../../../../../../components/ui/ReportPanel";
 
 interface ChatNavBarProps {
   chatId: number;
+  userId: number;
 }
 
-const ChatNavBar = ({ chatId }: ChatNavBarProps) => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(false);
-  const [isAnimating, setIsAnimating] = useState<boolean>(false);
-  const accessToken = useAuthStore((state) => state.accessToken);
-  const result = tokenParse(accessToken);
-  const isMentor = result?.role === UserRole.MENTOR || result?.role === UserRole.ADMIN;
-  const isPartnerMentor = !isMentor;
-
-  // 파트너 정보 가져오기
-  const { data: partnerInfo } = useGetPartnerInfo(chatId);
-  const { data: myInfo } = useGetMyInfo();
-
-  const handleSettingsClick = () => {
-    if (!isExpanded) {
-      // 열기
-      setIsAnimating(true);
-      setIsExpanded(true);
-    } else {
-      // 닫기
-      setIsExpanded(false);
-      setTimeout(() => {
-        setIsAnimating(false);
-      }, 300); // 애니메이션 시간과 동일
-    }
-  };
-
-  const handleClose = () => {
-    setIsExpanded(false);
-    setTimeout(() => {
-      setIsAnimating(false);
-    }, 300);
-  };
+const ChatNavBar = ({ chatId, userId }: ChatNavBarProps) => {
+  const { data: partnerInfo, isPending, isError, isFetching, refetch } = useGetPartnerInfo(chatId, userId);
 
   return (
-    <div className="relative">
-      <nav>
-        <TopDetailNavigation
-          title={"멘토 채팅"}
-          icon={
-            <button className="h-4 w-4" onClick={handleSettingsClick}>
-              <IconSetting />
-            </button>
-          }
-        />
-      </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>
-
-          <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>
-          </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>
+    <nav aria-label="채팅 탐색">
+      <TopDetailNavigation
+        showOnDesktop
+        title={partnerInfo?.nickname ? `${partnerInfo.nickname}님과 채팅` : "멘토 채팅"}
+        backHref="/mentor/chat"
+        icon={
+          <details key={chatId} className="relative">
+            <summary className="cursor-pointer rounded px-2 py-1 text-k-700 typo-medium-3">참여자</summary>
+            <div className="absolute right-0 top-10 z-40 w-64 max-w-[80vw] rounded-lg border border-k-100 bg-white p-4 shadow-sdwB">
+              <h2 className="mb-3 text-k-900 typo-sb-7">채팅 참여자</h2>
+              {isPending ? (
+                <p role="status" className="text-k-500 typo-regular-4">
+                  참여자 정보를 불러오는 중이에요.
+                </p>
+              ) : isError ? (
+                <div className="space-y-2">
+                  <p role="alert" className="text-k-700 typo-regular-4">
+                    참여자 정보를 불러오지 못했어요.
+                  </p>
+                  <button
+                    type="button"
+                    disabled={isFetching}
+                    onClick={() => void refetch()}
+                    className="rounded border border-k-200 px-3 py-1 typo-regular-4 disabled:opacity-50"
+                  >
+                    다시 시도
+                  </button>
+                </div>
+              ) : (
+                <ul className="space-y-3 text-k-800 typo-medium-3">
+                  <li>나</li>
+                  <li className="flex items-center gap-2">
+                    <ProfileWithBadge profileImageUrl={partnerInfo?.profileUrl} width={32} height={32} />
+                    <div className="min-w-0">
+                      <p className="break-words">{partnerInfo?.nickname ?? "상대방"}</p>
+                      {partnerInfo?.university && <p className="text-k-500 typo-regular-4">{partnerInfo.university}</p>}
+                    </div>
+                  </li>
+                </ul>
+              )}
             </div>
-
-            {/* 상대방 */}
-            <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 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>
-      )}
-    </div>
+          </details>
+        }
+      />
+    </nav>
   );
 };
+
 export default ChatNavBar;
diff --git a/apps/web/src/app/mentor/chat/[chatId]/page.tsx b/apps/web/src/app/mentor/chat/[chatId]/page.tsx
index 4e5dc3e6e..eb8354b1b 100644
--- a/apps/web/src/app/mentor/chat/[chatId]/page.tsx
+++ b/apps/web/src/app/mentor/chat/[chatId]/page.tsx
@@ -3,7 +3,6 @@ import { notFound } from "next/navigation";
 
 import { NO_INDEX_ROBOTS } from "@/utils/seo";
 import ChatContent from "./_ui/ChatContent";
-import ChatNavBar from "./_ui/ChatNavBar";
 
 export const metadata: Metadata = {
   title: "멘토와 채팅 | 솔리드커넥션",
@@ -19,11 +18,10 @@ const ChatDetailPage = async ({ params }: ChatDetailPageProps) => {
   const { chatId: chatIdParam } = await params;
   const chatId = Number(chatIdParam);
 
-  if (Number.isNaN(chatId)) notFound();
+  if (!/^\d+$/.test(chatIdParam) || !Number.isSafeInteger(chatId) || chatId <= 0) notFound();
   return (
-    <div className="flex w-full flex-col">
-      <ChatNavBar chatId={chatId} />
-      <ChatContent chatId={chatId} />
+    <div className="flex w-full flex-col md:mx-auto md:max-w-5xl md:border-x md:border-k-100">
+      <ChatContent key={chatId} chatId={chatId} />
     </div>
   );
 };
diff --git a/apps/web/src/app/mentor/chat/_ui/ChatAccess.dom.test.tsx b/apps/web/src/app/mentor/chat/_ui/ChatAccess.dom.test.tsx
new file mode 100644
index 000000000..baa273a3f
--- /dev/null
+++ b/apps/web/src/app/mentor/chat/_ui/ChatAccess.dom.test.tsx
@@ -0,0 +1,174 @@
+// @vitest-environment jsdom
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react/pure";
+import { type ReactNode, useEffect, useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import { getValidAccessToken } from "@/utils/axiosInstance";
+import ChatAccess from "./ChatAccess";
+
+vi.mock("@/utils/axiosInstance", () => ({ getValidAccessToken: vi.fn() }));
+
+vi.mock("@/apis/chat", async () => await import("@/apis/chat/auth"));
+vi.mock("next/link", () => ({
+  default: ({ children, href }: { children: ReactNode; href: string }) => <a href={href}>{children}</a>,
+}));
+
+const onMount = vi.fn();
+const onUnmount = vi.fn();
+
+function token(userId = 7, expiration = Math.floor(Date.now() / 1000) + 3600) {
+  return `header.${btoa(JSON.stringify({ sub: userId, role: "MENTOR", exp: expiration }))}.signature`;
+}
+
+function Draft({ userId }: { userId: number }) {
+  const [value, setValue] = useState("");
+  useEffect(() => {
+    onMount();
+    return () => {
+      onUnmount();
+    };
+  }, []);
+  return <input aria-label={`메시지 ${userId}`} value={value} onChange={(event) => setValue(event.target.value)} />;
+}
+
+function renderDraft() {
+  return render(<ChatAccess>{(userId) => <Draft userId={userId} />}</ChatAccess>);
+}
+
+beforeEach(() => {
+  vi.mocked(getValidAccessToken).mockReset().mockResolvedValue(null);
+  onMount.mockClear();
+  onUnmount.mockClear();
+  useAuthStore.getState().setAccessToken(token());
+});
+
+afterEach(() => {
+  useAuthStore.getState().clearAccessToken();
+});
+
+describe("ChatAccess identity continuity", () => {
+  it("refreshes an expired identity on first entry before showing the login gate", async () => {
+    useAuthStore.getState().setAccessToken(token(7, Math.floor(Date.now() / 1000) - 1));
+    let finish!: (token: string) => void;
+    vi.mocked(getValidAccessToken).mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        }),
+    );
+    renderDraft();
+    await waitFor(() => expect(getValidAccessToken).toHaveBeenCalledOnce());
+    expect(screen.queryByRole("link", { name: "로그인하기" })).toBeNull();
+    expect(screen.getByRole("status")).toBeTruthy();
+    await act(async () => {
+      const refreshed = token();
+      useAuthStore.getState().setRefreshedAccessToken(refreshed, useAuthStore.getState().sessionVersion);
+      finish(refreshed);
+    });
+    expect(screen.getByRole("textbox", { name: "메시지 7" })).toBeTruthy();
+  });
+
+  it("offers explicit retry after a transient refresh failure on first entry", async () => {
+    useAuthStore.getState().setAccessToken(token(7, Math.floor(Date.now() / 1000) - 1));
+    vi.mocked(getValidAccessToken).mockImplementationOnce(async () => {
+      useAuthStore.getState().setRefreshStatus("retryable");
+      throw new Error("temporary failure");
+    });
+    renderDraft();
+    const retry = await screen.findByRole("button", { name: "다시 확인" });
+    expect(getValidAccessToken).toHaveBeenCalledOnce();
+    expect(screen.queryByRole("link", { name: "로그인하기" })).toBeNull();
+    vi.mocked(getValidAccessToken).mockImplementationOnce(async () => {
+      const refreshed = token();
+      useAuthStore.getState().setRefreshedAccessToken(refreshed, useAuthStore.getState().sessionVersion);
+      return refreshed;
+    });
+    fireEvent.click(retry);
+    await screen.findByRole("textbox", { name: "메시지 7" });
+    expect(getValidAccessToken).toHaveBeenCalledTimes(2);
+  });
+
+  it("does not reuse a remembered identity from another authenticated session", () => {
+    renderDraft();
+    act(() => useAuthStore.getState().setAccessToken(token(8, Math.floor(Date.now() / 1000) - 1)));
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(screen.getByRole("status")).toBeTruthy();
+    expect(getValidAccessToken).toHaveBeenCalledOnce();
+  });
+
+  it("preserves the draft after token expiry before refresh starts", () => {
+    renderDraft();
+    const input = screen.getByRole("textbox", { name: "메시지 7" }) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "만료 직전 작성한 원문" } });
+    act(() =>
+      useAuthStore.setState({
+        accessToken: token(7, Math.floor(Date.now() / 1000) - 1),
+        refreshStatus: "success",
+      }),
+    );
+    expect(screen.getByRole("textbox", { name: "메시지 7" })).toBe(input);
+    expect(input.value).toBe("만료 직전 작성한 원문");
+    expect(onUnmount).not.toHaveBeenCalled();
+  });
+
+  it("preserves the mounted composer and its draft while an expired token is refreshed", () => {
+    renderDraft();
+    const input = screen.getByRole("textbox", { name: "메시지 7" }) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "아직 보내지 않은 원문" } });
+    act(() => {
+      useAuthStore.setState({
+        accessToken: token(7, Math.floor(Date.now() / 1000) - 1),
+        refreshStatus: "refreshing",
+        isLoading: true,
+      });
+    });
+
+    expect(screen.getByRole("textbox", { name: "메시지 7" })).toBe(input);
+    expect(input.value).toBe("아직 보내지 않은 원문");
+    expect(onMount).toHaveBeenCalledOnce();
+    expect(onUnmount).not.toHaveBeenCalled();
+
+    act(() => useAuthStore.getState().setAccessToken(token()));
+    expect(screen.getByRole("textbox", { name: "메시지 7" })).toBe(input);
+    expect(input.value).toBe("아직 보내지 않은 원문");
+    expect(onMount).toHaveBeenCalledOnce();
+  });
+
+  it("unmounts the composer immediately when refresh fails and clears authentication", () => {
+    renderDraft();
+    act(() => {
+      useAuthStore.setState({
+        accessToken: token(7, Math.floor(Date.now() / 1000) - 1),
+        refreshStatus: "refreshing",
+        isLoading: true,
+      });
+    });
+    expect(screen.getByRole("textbox")).toBeTruthy();
+
+    act(() => {
+      useAuthStore.getState().clearAccessToken();
+      useAuthStore.getState().setRefreshStatus("failed");
+    });
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(onUnmount).toHaveBeenCalledOnce();
+    expect(screen.getByRole("link", { name: "로그인하기" }).getAttribute("href")).toBe("/login");
+  });
+
+  it("does not reuse the previous identity after logout during token refresh", () => {
+    renderDraft();
+    act(() => {
+      useAuthStore.setState({
+        accessToken: token(7, Math.floor(Date.now() / 1000) - 1),
+        refreshStatus: "refreshing",
+        isLoading: true,
+      });
+    });
+    act(() => useAuthStore.getState().clearAccessToken());
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(onUnmount).toHaveBeenCalledOnce();
+
+    act(() => useAuthStore.setState({ refreshStatus: "refreshing", isLoading: true }));
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(screen.getByRole("status").textContent).toBe("로그인 정보를 확인하고 있어요.");
+  });
+});
diff --git a/apps/web/src/app/mentor/chat/_ui/ChatAccess.tsx b/apps/web/src/app/mentor/chat/_ui/ChatAccess.tsx
new file mode 100644
index 000000000..77f4c2144
--- /dev/null
+++ b/apps/web/src/app/mentor/chat/_ui/ChatAccess.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import Link from "next/link";
+import { type ReactNode, useEffect, useRef } from "react";
+import { useChatUserId } from "@/apis/chat";
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import { getValidAccessToken } from "@/utils/axiosInstance";
+
+const ChatAccess = ({
+  children,
+  fallbackHeader,
+}: {
+  children: (userId: number) => ReactNode;
+  fallbackHeader?: ReactNode;
+}) => {
+  const userId = useChatUserId();
+  const initialized = useAuthStore((state) => state.isInitialized);
+  const loading = useAuthStore((state) => state.isLoading);
+  const authenticated = useAuthStore((state) => state.isAuthenticated);
+  const refreshStatus = useAuthStore((state) => state.refreshStatus);
+  const sessionVersion = useAuthStore((state) => state.sessionVersion);
+  const lastValidatedIdentity = useRef<{ userId: number; sessionVersion: number } | null>(null);
+
+  useEffect(
+    function rememberValidatedIdentity() {
+      if (userId) lastValidatedIdentity.current = { userId, sessionVersion };
+      else if (!authenticated) lastValidatedIdentity.current = null;
+    },
+    [authenticated, sessionVersion, userId],
+  );
+
+  // Token rotation must not destroy a room's draft. A failed refresh or logout still closes it immediately.
+  const rememberedIdentity = lastValidatedIdentity.current;
+  const activeUserId =
+    userId ??
+    (authenticated && refreshStatus !== "failed" && rememberedIdentity?.sessionVersion === sessionVersion
+      ? rememberedIdentity.userId
+      : null);
+
+  useEffect(
+    function refreshIdentityOnChatEntry() {
+      if (!initialized || !authenticated || activeUserId || useAuthStore.getState().sessionVersion !== sessionVersion)
+        return;
+      void getValidAccessToken().catch(() => {});
+    },
+    [initialized, authenticated, activeUserId, sessionVersion],
+  );
+
+  if (activeUserId) return children(activeUserId);
+  if (initialized && authenticated && !loading && refreshStatus === "retryable") {
+    return (
+      <>
+        {fallbackHeader}
+        <div className="flex flex-col items-center gap-4 px-5 py-16">
+          <p role="alert" className="text-k-700">
+            로그인 정보를 확인하지 못했어요. 다시 시도해주세요.
+          </p>
+          <button
+            type="button"
+            className="rounded-lg bg-primary px-6 py-3 text-white"
+            onClick={() => void getValidAccessToken().catch(() => {})}
+          >
+            다시 확인
+          </button>
+        </div>
+      </>
+    );
+  }
+  if (!initialized || loading || authenticated) {
+    return (
+      <>
+        {fallbackHeader}
+        <p role="status" className="px-5 py-16 text-center text-k-500">
+          로그인 정보를 확인하고 있어요.
+        </p>
+      </>
+    );
+  }
+  if (!activeUserId) {
+    return (
+      <>
+        {fallbackHeader}
+        <div className="flex flex-col items-center gap-4 px-5 py-16">
+          <p className="text-k-700">채팅하려면 로그인이 필요해요.</p>
+          <Link href="/login" className="rounded-lg bg-primary px-6 py-3 text-white">
+            로그인하기
+          </Link>
+        </div>
+      </>
+    );
+  }
+  return null;
+};
+
+export default ChatAccess;
diff --git a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.dom.test.tsx b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.dom.test.tsx
new file mode 100644
index 000000000..ee4a5f4a2
--- /dev/null
+++ b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.dom.test.tsx
@@ -0,0 +1,125 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen, within } from "@testing-library/react/pure";
+import type { ComponentProps, ReactNode } from "react";
+import { beforeEach, expect, it, vi } from "vitest";
+import { type ChatRoom, useGetChatRooms } from "@/apis/chat";
+import type { UserRole } from "@/types/mentor";
+import ChatPageClient from ".";
+
+const mocks = vi.hoisted(() => ({
+  userId: 1 as number | null,
+  role: "MENTEE" as UserRole,
+  query: {
+    data: undefined as ChatRoom[] | undefined,
+    isPending: true,
+    isError: false,
+    isFetching: false,
+    refetch: vi.fn(),
+  },
+}));
+
+vi.mock("@/apis/chat", () => ({ useGetChatRooms: vi.fn(() => mocks.query) }));
+vi.mock("@/lib/zustand/useAuthStore", () => ({
+  default: (selector: (state: { clientRole: UserRole; serverRole: UserRole }) => unknown) =>
+    selector({ clientRole: mocks.role, serverRole: mocks.role }),
+}));
+vi.mock("../ChatAccess", () => ({
+  default: ({ children }: { children: (userId: number) => ReactNode }) =>
+    mocks.userId === null ? <p>로그인이 필요해요.</p> : children(mocks.userId),
+}));
+vi.mock("next/link", () => ({
+  default: ({ href, children, ...props }: ComponentProps<"a"> & { href: string }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+vi.mock("@/components/ui/ProfileWithBadge", () => ({ default: () => <span /> }));
+vi.mock("@/public/svgs/mentor", () => ({ IconSearchBlue: () => <span />, IconSolidConnentionLogo: () => <span /> }));
+
+beforeEach(() => {
+  mocks.userId = 1;
+  mocks.role = "MENTEE" as UserRole;
+  Object.assign(mocks.query, { data: undefined, isPending: true, isError: false, isFetching: false });
+  mocks.query.refetch.mockReset();
+  vi.mocked(useGetChatRooms).mockClear();
+});
+
+const room = (id: number, lastReceivedTime: string): ChatRoom => ({
+  id,
+  lastReceivedTime,
+  lastChatMessage: `메시지 ${id}`,
+  unReadCount: id === 2 ? 12 : 0,
+  partner: { partnerId: id + 100, nickname: `상대방 ${id}`, profileUrl: null, university: null },
+});
+
+it("separates loading, initial failure and successful role-specific empty states", () => {
+  const { rerender } = render(<ChatPageClient />);
+  expect(screen.getByRole("status").textContent).toContain("불러오고 있어요");
+  expect(screen.queryByText(/현재 매칭된 멘토가 없어요/)).toBeNull();
+
+  Object.assign(mocks.query, { isPending: false, isError: true });
+  rerender(<ChatPageClient />);
+  expect(screen.getByRole("alert").textContent).toContain("불러오지 못했어요");
+  fireEvent.click(screen.getByRole("button", { name: "다시 시도" }));
+  expect(mocks.query.refetch).toHaveBeenCalledTimes(1);
+
+  Object.assign(mocks.query, { data: [], isError: false });
+  rerender(<ChatPageClient />);
+  expect(screen.getByText(/현재 매칭된 멘토가 없어요/)).toBeTruthy();
+  expect(screen.getByRole("link", { name: "멘토 찾으러 가볼까요?" }).getAttribute("href")).toBe("/mentor");
+
+  mocks.role = "MENTOR" as UserRole;
+  rerender(<ChatPageClient />);
+  expect(screen.getByText("현재 진행 중인 채팅이 없어요.")).toBeTruthy();
+  expect(screen.queryByRole("link", { name: "멘토 찾으러 가볼까요?" })).toBeNull();
+});
+
+it("sorts a clone by recent valid dates and retains room links and unread counts", () => {
+  const rooms = [room(1, "2026-10-25T00:00:00Z"), room(3, "invalid-date"), room(2, "2026-10-27T00:00:00Z")];
+  Object.freeze(rooms);
+  Object.assign(mocks.query, { data: rooms, isPending: false });
+  render(<ChatPageClient />);
+  const list = screen.getByRole("list", { name: "채팅방" });
+  const links = within(list).getAllByRole("link");
+  expect(links.map((link) => link.getAttribute("href"))).toEqual([
+    "/mentor/chat/2",
+    "/mentor/chat/1",
+    "/mentor/chat/3",
+  ]);
+  expect(rooms.map((item) => item.id)).toEqual([1, 3, 2]);
+  expect(list.querySelectorAll("time")).toHaveLength(2);
+  expect(screen.getByText("안 읽은 메시지 12개")).toBeTruthy();
+  expect(screen.getByText("9+")).toBeTruthy();
+});
+
+it("keeps the previous list during refresh and reports a failed refresh with retry", () => {
+  Object.assign(mocks.query, { data: [room(1, "2026-10-27T00:00:00Z")], isPending: false, isFetching: true });
+  const { rerender } = render(<ChatPageClient />);
+  expect(screen.getByRole("status").textContent).toContain("업데이트");
+  expect(screen.getByRole("list", { name: "채팅방" })).toBeTruthy();
+
+  Object.assign(mocks.query, { isError: true, isFetching: false });
+  rerender(<ChatPageClient />);
+  expect(screen.getByRole("alert").textContent).toContain("이전 목록을 표시하고 있어요");
+  expect(
+    within(screen.getByRole("list", { name: "채팅방" }))
+      .getByRole("link")
+      .getAttribute("href"),
+  ).toBe("/mentor/chat/1");
+  fireEvent.click(screen.getByRole("button", { name: "다시 시도" }));
+  expect(mocks.query.refetch).toHaveBeenCalledTimes(1);
+});
+
+it("does not mount the private room query before ChatAccess authorizes a user", () => {
+  mocks.userId = null;
+  const { rerender } = render(<ChatPageClient />);
+  expect(screen.getByText("로그인이 필요해요.")).toBeTruthy();
+  expect(useGetChatRooms).not.toHaveBeenCalled();
+
+  mocks.userId = 2;
+  Object.assign(mocks.query, { data: [room(2, "2026-10-27T00:00:00Z")], isPending: false });
+  rerender(<ChatPageClient />);
+  expect(screen.getByRole("list", { name: "채팅방" })).toBeTruthy();
+  expect(useGetChatRooms).toHaveBeenCalledExactlyOnceWith(2);
+});
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..192c7815c 100644
--- a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
+++ b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
@@ -1,117 +1,188 @@
 "use client";
 
 import Link from "next/link";
-import { useGetChatRooms } from "@/apis/chat";
-import { useGetMyInfo } from "@/apis/MyPage";
+import { type ChatRoom, useGetChatRooms } from "@/apis/chat";
 import ProfileWithBadge from "@/components/ui/ProfileWithBadge";
+import useAuthStore from "@/lib/zustand/useAuthStore";
 import { IconSearchBlue, IconSolidConnentionLogo } from "@/public/svgs/mentor";
 import { UserRole } from "@/types/mentor";
 import { convertISODateToKoreanTime } from "@/utils/datetimeUtils";
+import ChatAccess from "../ChatAccess";
 
-const ChatPageClient = () => {
-  const { data: chatRooms = [] } = useGetChatRooms();
-  const { data: myInfo } = useGetMyInfo();
+const getReceivedTimestamp = (value: string) => {
+  if (typeof value !== "string" || !value.trim()) return null;
+  const timestamp = new Date(value).getTime();
+  return Number.isFinite(timestamp) ? timestamp : null;
+};
 
-  const isMentee = myInfo?.role === UserRole.MENTEE;
-  const isPartnerMentor = isMentee;
+const compareRecentRooms = (first: ChatRoom, second: ChatRoom) => {
+  const firstTime = getReceivedTimestamp(first.lastReceivedTime);
+  const secondTime = getReceivedTimestamp(second.lastReceivedTime);
+  if (firstTime === null) return secondTime === null ? 0 : 1;
+  if (secondTime === null) return -1;
+  return secondTime - firstTime;
+};
 
-  // 연결된 멘토가 없을 때의 처리 (멘티만)
-  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">
+const EmptyChatRooms = ({ isMentee }: { isMentee: boolean }) => (
+  <div className="flex min-h-[40vh] flex-col items-center justify-center gap-4 px-5 text-center">
+    <div aria-hidden="true" className="h-[45px] w-15">
+      <IconSolidConnentionLogo />
+    </div>
+    <p className="text-k-500 typo-medium-2">
+      {isMentee ? (
+        <>
           현재 매칭된 멘토가 없어요.
           <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"
+        </>
+      ) : (
+        "현재 진행 중인 채팅이 없어요."
+      )}
+    </p>
+    {isMentee && (
+      <Link href="/mentor" className="rounded-3xl bg-primary px-6 py-3 text-white typo-sb-9">
+        멘토 찾으러 가볼까요?
+      </Link>
+    )}
+  </div>
+);
+
+const ChatRoomList = ({ userId }: { userId: number }) => {
+  const { data: chatRooms, isPending, isError, isFetching, refetch } = useGetChatRooms(userId);
+  const role = useAuthStore((state) => state.clientRole ?? state.serverRole);
+  const isMentee = role === UserRole.MENTEE;
+
+  if (!chatRooms) {
+    return isError ? (
+      <div role="alert" className="flex min-h-[40vh] flex-col items-center justify-center gap-3 px-5 text-center">
+        <p className="text-k-700 typo-medium-2">채팅 목록을 불러오지 못했어요.</p>
+        <button
+          type="button"
+          disabled={isFetching}
+          onClick={() => void refetch()}
+          className="rounded-lg bg-primary px-5 py-2 text-white disabled:opacity-50"
         >
-          멘토 찾으러 가볼까요?
-        </Link>
+          다시 시도
+        </button>
       </div>
+    ) : (
+      <p role="status" className="px-5 py-16 text-center text-k-500">
+        {isPending ? "채팅 목록을 불러오고 있어요." : "채팅 목록을 확인하고 있어요."}
+      </p>
     );
   }
 
-  // 멘토/어드민이고 채팅방이 없을 때
-  if (chatRooms.length === 0) {
-    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">현재 진행 중인 채팅이 없어요.</p>
-      </div>
-    );
-  }
+  const sortedRooms = [...chatRooms].sort(compareRecentRooms);
 
   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>
-      )}
-
-      {/* 채팅 리스트 섹션 */}
-      <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 className="flex h-full min-w-0 w-full flex-col">
+      {isError && (
+        <div role="alert" className="flex flex-wrap items-center justify-between gap-2 bg-k-50 px-5 py-3">
+          <p className="text-k-700 typo-regular-4">새 채팅 목록을 불러오지 못했어요. 이전 목록을 표시하고 있어요.</p>
+          <button
+            type="button"
+            disabled={isFetching}
+            onClick={() => void refetch()}
+            className="rounded border border-k-200 px-3 py-1 text-k-700 typo-regular-4 disabled:opacity-50"
+          >
+            다시 시도
+          </button>
         </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"
-              >
+      )}
+      {isFetching && (
+        <p role="status" className="px-5 py-2 text-k-500 typo-regular-4">
+          채팅 목록을 업데이트하고 있어요.
+        </p>
+      )}
+      {sortedRooms.length === 0 ? (
+        <EmptyChatRooms isMentee={isMentee} />
+      ) : (
+        <>
+          {isMentee && (
+            <Link
+              href="/mentor"
+              className="flex min-h-[66px] w-full items-center justify-between gap-3 bg-secondary-100 px-5 py-3"
+            >
+              <div className="min-w-0">
                 <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>
+                  <span aria-hidden="true" className="h-5 w-5 shrink-0">
+                    <IconSearchBlue />
+                  </span>
+                  <span className="text-secondary typo-sb-9">멘토를 찾으러 가볼까요?</span>
                 </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>
-      </div>
+                <p className="text-k-600 typo-medium-3">나의 멘토 찾으러가기</p>
+              </div>
+              <span aria-hidden="true" className="shrink-0 text-blue-600">
+                ›
+              </span>
+            </Link>
+          )}
+          <section aria-label="채팅 목록" className="min-w-0 px-5 py-4">
+            <div className="mb-4 flex items-center gap-2.5">
+              <h2 className="text-gray-900 typo-sb-5">{isMentee ? "나의 멘토" : "나의 멘티"}</h2>
+              <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-white typo-regular-4">
+                <span aria-hidden="true">{sortedRooms.length}</span>
+                <span className="sr-only">채팅방 {sortedRooms.length}개</span>
+              </span>
+            </div>
+            <ul aria-label="채팅방" className="w-full space-y-3">
+              {sortedRooms.map((chat) => {
+                const { nickname, profileUrl } = chat.partner;
+                const receivedTime =
+                  getReceivedTimestamp(chat.lastReceivedTime) === null
+                    ? null
+                    : convertISODateToKoreanTime(chat.lastReceivedTime);
+
+                return (
+                  <li key={chat.id} className="min-w-0">
+                    <Link
+                      href={`/mentor/chat/${chat.id}`}
+                      className="flex min-w-0 items-center justify-between gap-3 border-b border-k-50 py-2"
+                    >
+                      <div className="flex min-w-0 flex-1 items-center gap-2">
+                        <div className="shrink-0">
+                          <ProfileWithBadge profileImageUrl={profileUrl} isMentor={isMentee} width={48} height={48} />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <h3 className="truncate text-k-900 typo-sb-9">{nickname}</h3>
+                          <p className="truncate text-k-600 typo-regular-2">
+                            {chat.lastChatMessage || "새로운 멘토링이 시작되었어요!"}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex shrink-0 flex-col items-end gap-1">
+                        {receivedTime && (
+                          <time
+                            dateTime={chat.lastReceivedTime}
+                            className="whitespace-nowrap text-k-500 typo-regular-4"
+                          >
+                            {receivedTime}
+                          </time>
+                        )}
+                        {chat.unReadCount > 0 && (
+                          <span className="rounded-full bg-secondary px-2 py-1 text-white typo-regular-4">
+                            <span aria-hidden="true">{chat.unReadCount > 9 ? "9+" : chat.unReadCount}</span>
+                            <span className="sr-only">안 읽은 메시지 {chat.unReadCount}개</span>
+                          </span>
+                        )}
+                      </div>
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </section>
+        </>
+      )}
     </div>
   );
 };
 
+const ChatPageClient = () => (
+  <div className="md:mx-auto md:max-w-5xl md:px-6 md:py-8">
+    <h1 className="mb-6 hidden text-k-900 typo-bold-1 md:block">채팅</h1>
+    <ChatAccess>{(userId) => <ChatRoomList key={userId} userId={userId} />}</ChatAccess>
+  </div>
+);
+
 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/layout.tsx b/apps/web/src/app/mentor/layout.tsx
index 7e730a49f..389a90dfa 100644
--- a/apps/web/src/app/mentor/layout.tsx
+++ b/apps/web/src/app/mentor/layout.tsx
@@ -6,6 +6,7 @@ interface MentorLayoutProps {
 
 const CHAT_NAVIGATION_TITLES = {
   "/mentor/chat": "멘토 채팅",
+  "/mentor/chat/": "",
   "/mentor": "멘토",
   "/mentor/modify": "멘토 페이지",
   "/mentor/waiting": "멘토 대기",
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..a9012d667 100644
--- a/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx
+++ b/apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx
@@ -1,11 +1,15 @@
 "use client";
 
+import Link from "next/link";
 import { FormProvider } from "react-hook-form";
+import { useGetMyInfo } from "@/apis/MyPage";
 import { useGetMentorMyProfile } from "@/apis/mentor";
 import { useGetArticleList } from "@/apis/news";
 import StudyDate from "@/components/mentor/StudyDate";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
 import MentoProfile from "@/components/ui/ProfileWithBadge";
+import { UserRole } from "@/types/mentor";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import useModifyHookForm from "./_hooks/useModifyHookForm";
 import usePutMyMentorProfileHandler from "./_hooks/usePutMyMentorProfileHandler";
 import AddArticleCard from "./_ui/AddArticleCard";
@@ -13,26 +17,170 @@ import ArticlePanel from "./_ui/ArticlePanel";
 import ChannelBox from "./_ui/ChannelBox";
 
 const ModifyContent = () => {
-  const { data: myMentorProfile = null } = useGetMentorMyProfile();
-  const { data: articleList = [] } = useGetArticleList(myMentorProfile?.id || 0);
+  const { data: myInfo, isPending: isMyInfoPending, isError: isMyInfoError } = useGetMyInfo();
+  const canEditMentorProfile = myInfo?.role === UserRole.MENTOR || myInfo?.role === UserRole.ADMIN;
+  const {
+    data: myMentorProfile = null,
+    isPending,
+    isError,
+    refetch,
+  } = useGetMentorMyProfile({
+    enabled: canEditMentorProfile,
+    skipGlobalErrorToast: true,
+  });
+  const { data: articleList = [] } = useGetArticleList(myMentorProfile?.id || 0, {
+    enabled: canEditMentorProfile && !!myMentorProfile?.id,
+  });
+  const isDesktop = useIsDesktopViewport();
 
   const method = useModifyHookForm(myMentorProfile);
+  const { onSubmit } = usePutMyMentorProfileHandler();
+
+  if (isMyInfoPending || (canEditMentorProfile && isPending) || isDesktop === null) return <CloudSpinnerPage />;
+
+  if (isMyInfoError || !canEditMentorProfile || isError || !myMentorProfile) {
+    return <MentorModifyUnavailableState onRetry={() => refetch()} />;
+  }
+
+  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 { profileImageUrl, hasBadge, nickname, country, universityName, term, channels } = myMentorProfile;
 
-  const { onSubmit } = usePutMyMentorProfileHandler();
-  // 채널 타입들을 감시
-  if (!myMentorProfile) return <CloudSpinnerPage />;
+  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>
+  );
+};
+
+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">
@@ -50,7 +198,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")}
@@ -80,7 +227,6 @@ const ModifyContent = () => {
               </p>
             )}{" "}
             <h2 className="mt-10 text-primary-1 typo-sb-5">멘토 아티클</h2>
-            {/* 새 아티클 추가 버튼 */}
             <div className="mb-6">
               <AddArticleCard />
             </div>
@@ -104,4 +250,21 @@ const ModifyContent = () => {
   );
 };
 
+const MentorModifyUnavailableState = ({ onRetry }: { onRetry: () => void }) => (
+  <div className="flex min-h-[60vh] flex-col items-center justify-center px-5 text-center">
+    <p className="text-k-900 typo-sb-5">멘토 프로필을 수정할 수 없어요.</p>
+    <p className="mt-2 max-w-md text-k-500 typo-regular-2">
+      멘토 권한이 있거나 멘토 전환이 완료된 계정에서만 프로필을 수정할 수 있습니다.
+    </p>
+    <div className="mt-5 flex flex-wrap justify-center gap-2">
+      <button type="button" onClick={onRetry} className="rounded-lg border border-k-100 px-4 py-2 text-k-700 typo-sb-9">
+        다시 시도
+      </button>
+      <Link href="/my/apply-mentor" className="rounded-lg bg-primary px-4 py-2 text-k-0 typo-sb-9">
+        멘토 전환 신청하기
+      </Link>
+    </div>
+  </div>
+);
+
 export default ModifyContent;
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..4c7862833 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,69 +14,147 @@ 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;
 
-  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>
+  if (isDesktop === null) return null;
+
+  const viewProps = {
+    approveList,
+    pendingList,
+    totalLength,
+  };
+
+  return isDesktop ? <DesktopWaitingView {...viewProps} /> : <MobileWaitingView {...viewProps} />;
+};
+
+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>
+      </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>
+);
+
+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">
+    <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;
diff --git a/apps/web/src/app/my/_ui/MyProfileContent/index.tsx b/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
index 47b032d6b..cbc265c87 100644
--- a/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
+++ b/apps/web/src/app/my/_ui/MyProfileContent/index.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { type ReactNode, useEffect } from "react";
 import { useDeleteUserAccount, usePostLogout } from "@/apis/Auth";
 import { useGetMyInfo } from "@/apis/MyPage";
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
@@ -23,9 +23,24 @@ import {
 import { UserRole } from "@/types/mentor";
 import { LOGIN_REQUIRED_MESSAGE } from "@/utils/authRedirect";
 import { openKakaoOpenChat } from "@/utils/openKakaoOpenChat";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 
 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 router = useRouter();
   const isInitialized = useAuthStore((state) => state.isInitialized);
@@ -35,6 +50,7 @@ const MyProfileContent = () => {
   const { mutate: deleteUserAccount } = useDeleteUserAccount();
   const { mutate: postLogout } = usePostLogout();
   const clientRole = useAuthStore((state) => state.clientRole);
+  const isDesktop = useIsDesktopViewport();
 
   useEffect(() => {
     if (!isInitialized || isAuthenticated) return;
@@ -66,6 +82,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;
@@ -81,36 +104,68 @@ 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(),
+  };
+
+  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 = ({
+  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 ? "수학학교" : "관심지역"} |{" "}
@@ -144,7 +199,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">
@@ -152,13 +206,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 />
@@ -173,53 +220,254 @@ 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="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <header className="mb-8">
+        <h1 className="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>
+
+              <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>
 
-        <LinkedTextWithIcon onClick={postLogout} text="로그아웃" />
+            <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: ReactNode;
+  title: string;
+}) => {
+  const content = (
+    <div className="flex min-h-16 items-center gap-3 rounded-lg border border-k-100 bg-white px-4 py-3 text-k-700 transition-colors hover:bg-k-50">
+      <div className="flex h-6 w-6 shrink-0 items-center justify-center 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>;
+  }
+
+  if (!onClick) {
+    return content;
+  }
+
+  return (
+    <button type="button" onClick={onClick} className="text-left">
+      {content}
+    </button>
+  );
+};
+
+const DesktopPanel = ({ title, children }: { title: string; children: 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 divide-y divide-k-100">{children}</div>
+  </section>
+);
+
+const DesktopMenuItem = ({
+  href,
+  onClick,
+  icon,
+  title,
+  subText,
+}: {
+  href?: string;
+  onClick?: () => void;
+  icon?: ReactNode;
+  title: string;
+  subText?: string;
+}) => {
+  const content = (
+    <div className="flex min-w-0 items-center justify-between gap-3 py-4 text-k-700 transition-colors hover:text-primary">
+      <div className="flex min-w-0 items-center gap-3">
+        {icon && (
+          <span className="flex h-5 w-5 shrink-0 items-center justify-center [&>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>;
+  }
+
+  if (!onClick) {
+    return content;
+  }
+
+  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;
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..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,9 +6,37 @@ import BlockBtn from "@/components/button/BlockBtn";
 
 import { IconCheck } from "@/public/svgs/mentor";
 
-const CompletionScreen = () => {
+const CompletionScreenBase = ({ isDesktop }: { 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">
@@ -43,4 +71,8 @@ const CompletionScreen = () => {
   );
 };
 
-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 a95800dfb..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
@@ -14,11 +14,15 @@ type InterestCountriesScreenProps = {
   onNext: () => void;
 };
 
+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 }: InterestCountriesScreenProps) => {
+const InterestCountriesScreenBase = ({ onNext, isDesktop }: InterestCountriesScreenBaseProps) => {
   const {
     watch,
     setValue,
@@ -51,9 +55,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 +68,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 +88,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 +116,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 +133,14 @@ const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
         </div>
       </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={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>
@@ -140,4 +150,12 @@ const InterestCountriesScreen = ({ onNext }: InterestCountriesScreenProps) => {
   );
 };
 
-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 003e9f034..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
@@ -11,7 +11,11 @@ type StudyStatusScreenProps = {
   onNext: () => void;
 };
 
-const StudyStatusScreen = ({ onNext }: StudyStatusScreenProps) => {
+type StudyStatusScreenBaseProps = StudyStatusScreenProps & {
+  isDesktop: boolean;
+};
+
+const StudyStatusScreenBase = ({ onNext, isDesktop }: StudyStatusScreenBaseProps) => {
   const {
     watch,
     setValue,
@@ -29,9 +33,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 +49,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 +83,14 @@ const StudyStatusScreen = ({ onNext }: StudyStatusScreenProps) => {
         </div>
       </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={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>
@@ -90,7 +100,15 @@ const StudyStatusScreen = ({ onNext }: 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 95af3ef37..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
@@ -17,7 +17,11 @@ type UniversityScreenProps = {
   onNext: () => void;
 };
 
-const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
+type UniversityScreenBaseProps = UniversityScreenProps & {
+  isDesktop: boolean;
+};
+
+const UniversityScreenBase = ({ isSubmitting, onNext, isDesktop }: UniversityScreenBaseProps) => {
   const {
     watch,
     setValue,
@@ -99,9 +103,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 +114,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 +124,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 +206,14 @@ const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
         </div>
       </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={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}
@@ -217,4 +227,10 @@ const UniversityScreen = ({ isSubmitting, onNext }: UniversityScreenProps) => {
   );
 };
 
-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 ae45b5628..c1b80a033 100644
--- a/apps/web/src/app/my/apply-mentor/page.tsx
+++ b/apps/web/src/app/my/apply-mentor/page.tsx
@@ -9,10 +9,11 @@ import { usePostMentorApplication } from "@/apis/mentor";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import { Progress } from "@/components/ui/Progress";
 import { showIconToast } from "@/lib/toast/showIconToast";
-import CompletionScreen from "./_components/CompletionScreen";
-import InterestCountriesScreen from "./_components/InterestCountriesScreen";
-import StudyStatusScreen from "./_components/StudyStatusScreen";
-import UniversityScreen from "./_components/UniversityScreen";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+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>;
@@ -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,67 @@ const ApplyMentorPage = () => {
   });
 
   if (step === 4) {
-    return <CompletionScreen />;
+    return isDesktop ? <DesktopCompletionScreen /> : <MobileCompletionScreen />;
+  }
+
+  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">
+                  <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} />
+              </div>
+
+              {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">
+              <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">
@@ -83,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>
   );
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 14094f856..2df02b5e3 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,74 @@
 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 = () => {
+    handleDeleteAll(() => setIsEditMode(false));
+  };
+
+  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 +80,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..e7ee32ec3 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.partner.partnerId,
+  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 002f191fc..15dbae834 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 { resolveModifyProfileReadOnlyFields } from "./_lib/profileFields";
 import ImageInputFiled from "./_ui/ImageInputFiled";
@@ -13,6 +14,7 @@ import ReadOnlyField from "./_ui/ReadOnlyField";
 
 const ModifyContent = () => {
   const { methods, myInfo, onSubmit } = useModifyUserHookform();
+  const isDesktop = useIsDesktopViewport(false);
 
   const {
     handleSubmit,
@@ -24,49 +26,133 @@ const ModifyContent = () => {
   }
 
   const { homeUniversityName, attendedUniversity } = resolveModifyProfileReadOnlyFields(myInfo);
+  const roleText = myInfo.role === UserRole.ADMIN ? "어드민" : myInfo.role === UserRole.MENTOR ? "멘토" : "멘티";
+  const formProps = {
+    homeUniversityName,
+    attendedUniversity,
+    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={homeUniversityName} placeholder="등록된 출신학교가 없습니다" />
-
-            {/* 수학 학교 - 읽기 전용 */}
-            <ReadOnlyField label="수학 학교" value={attendedUniversity} placeholder="등록된 수학 학교가 없습니다" />
-
-            {/* 사용자 유형 - 읽기 전용 */}
-            <ReadOnlyField
-              label="사용자 유형"
-              value={myInfo.role === UserRole.ADMIN ? "어드민" : myInfo.role === UserRole.MENTOR ? "멘토" : "멘티"}
-              placeholder="멘티"
-            />
-          </div>
+      {isDesktop ? <ModifyDesktopView {...formProps} /> : <ModifyMobileView {...formProps} />}
+    </FormProvider>
+  );
+};
+
+type ModifyViewProps = {
+  homeUniversityName: string;
+  attendedUniversity: string;
+  isValid: boolean;
+  isDirty: boolean;
+  profileImageUrl: string | null;
+  roleText: string;
+  onSubmit: () => void;
+};
+
+const ModifyMobileView = ({
+  homeUniversityName,
+  attendedUniversity,
+  isValid,
+  isDirty,
+  profileImageUrl,
+  roleText,
+  onSubmit,
+}: ModifyViewProps) => {
+  return (
+    <div className="px-5 py-6">
+      <ProfileEditForm
+        homeUniversityName={homeUniversityName}
+        attendedUniversity={attendedUniversity}
+        isValid={isValid}
+        isDirty={isDirty}
+        profileImageUrl={profileImageUrl}
+        roleText={roleText}
+        onSubmit={onSubmit}
+      />
+    </div>
+  );
+};
+
+const ModifyDesktopView = ({
+  homeUniversityName,
+  attendedUniversity,
+  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
+            homeUniversityName={homeUniversityName}
+            attendedUniversity={attendedUniversity}
+            isValid={isValid}
+            isDirty={isDirty}
+            profileImageUrl={profileImageUrl}
+            roleText={roleText}
+            onSubmit={onSubmit}
+          />
+        </section>
 
-          {/* 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>
+        <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 = ({
+  homeUniversityName,
+  attendedUniversity,
+  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={homeUniversityName} placeholder="등록된 출신학교가 없습니다" />
+        <ReadOnlyField label="수학 학교" value={attendedUniversity} 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 aba847ee7..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">
-          <div className="mx-auto w-full max-w-app px-5">
-            {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 7edcea215..6ec72a6c7 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
@@ -1,13 +1,14 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { type ChangeEvent, type ReactNode, useEffect, useMemo, useState } from "react";
 import { useGetMyInfo, usePostConfirmSchoolEmail, usePostSchoolEmail } from "@/apis/MyPage";
 import BlockBtn from "@/components/button/BlockBtn";
 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";
 import { getSchoolEmailReturnPath } from "../../_lib/returnTo";
 
 const VERIFICATION_LIMIT_SECONDS = 300;
@@ -27,6 +28,7 @@ const formatTime = (seconds: number) => {
 const SchoolEmailVerificationContent = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const isDesktop = useIsDesktopViewport(false);
   const { data: myInfo } = useGetMyInfo();
   const postSchoolEmailMutation = usePostSchoolEmail();
   const postConfirmSchoolEmailMutation = usePostConfirmSchoolEmail();
@@ -105,7 +107,7 @@ const SchoolEmailVerificationContent = () => {
     );
   };
 
-  const handleCodeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleCodeChange = (event: ChangeEvent<HTMLInputElement>) => {
     setCode(event.target.value.replace(/\D/g, "").slice(0, CODE_LENGTH));
     setCodeErrorMessage("");
   };
@@ -120,119 +122,267 @@ const SchoolEmailVerificationContent = () => {
   };
 
   if (step === "done") {
-    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>
+    const buttonLabel = returnPath === "/" ? "홈으로" : "이전 화면으로 돌아가기";
+    const doneViewProps = {
+      buttonLabel,
+      onReturnClick: () => router.replace(returnPath),
+    };
 
-        <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(returnPath)}>
-              {returnPath === "/" ? "홈으로" : "이전 화면으로 돌아가기"}
-            </BlockBtn>
-          </div>
-        </div>
-      </div>
+    return isDesktop ? (
+      <DesktopSchoolEmailDoneView {...doneViewProps} />
+    ) : (
+      <MobileSchoolEmailDoneView {...doneViewProps} />
     );
   }
 
-  return (
-    <div className="min-h-[calc(100dvh-3.5rem)] px-5 pt-10">
-      <Progress value={progressValue} showPercentage={false} className="mt-4" />
+  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 isDesktop ? (
+    <DesktopSchoolEmailFormView {...formViewProps} />
+  ) : (
+    <MobileSchoolEmailFormView {...formViewProps} />
+  );
+};
+
+type SchoolEmailDoneViewProps = {
+  buttonLabel: string;
+  onReturnClick: () => void;
+};
+
+const DesktopSchoolEmailDoneView = ({ buttonLabel, onReturnClick }: 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={onReturnClick}>{buttonLabel}</BlockBtn>
+      </div>
+    </section>
+  </div>
+);
 
-      <div className="mt-10">
-        <h1 className="text-k-900 typo-bold-1">
-          {step === "email" ? "학교 이메일을 통해" : "이메일로 발송한"}
-          <br />
-          {step === "email" ? "학교 인증을 진행해주세요" : "인증번호를 입력해주세요"}
-        </h1>
+const MobileSchoolEmailDoneView = ({ buttonLabel, onReturnClick }: 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="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={onReturnClick}>{buttonLabel}</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: ChangeEvent<HTMLInputElement>) => void;
+  sendVerificationEmail: () => void;
+  confirmVerificationCode: () => void;
+  renderErrorMessage: (message: string) => ReactNode;
+};
+
+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>
 
-      <div className="mt-10 flex flex-col gap-5">
-        <div>
-          <Label htmlFor="schoolEmail" className="text-k-900">
-            학교 이메일
-          </Label>
+    {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>
 
-      <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>
-          )}
+        <SchoolEmailFields {...props} idPrefix="desktop" />
+
+        <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 04c7346ab..964251985 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,119 +80,171 @@ const EmailSignUpForm = () => {
     );
   };
 
-  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>
+  if (isDesktop === null) return null;
 
-        <div className="mt-10 flex flex-col gap-5">
+  const formFields = (
+    <div className="mt-10 flex flex-col gap-5">
+      <div>
+        <Label htmlFor="email" className="text-k-900">
+          이메일
+        </Label>
+        <Input
+          id="email"
+          name="email"
+          variant="gray"
+          placeholder="ID@example.com"
+          type="email"
+          autoComplete="email"
+          spellCheck={false}
+          value={email}
+          onChange={handleEmailChange}
+        />
+      </div>
+      {showPassword && (
+        <>
           <div>
-            <Label htmlFor="email" className="text-k-900">
-              이메일
+            <Label htmlFor="password" className="text-k-900">
+              비밀번호
             </Label>
-            <Input
-              id="email"
-              name="email"
-              variant="gray"
-              placeholder="ID@example.com"
-              type="email"
-              autoComplete="email"
-              spellCheck={false}
-              value={email}
-              onChange={handleEmailChange}
-            />
+            <div className="relative">
+              <Input
+                id="password"
+                name="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>
-          {showPassword && (
-            <>
-              <div>
-                <Label htmlFor="password" className="text-k-900">
-                  비밀번호
-                </Label>
-                <div className="relative">
-                  <Input
-                    id="password"
-                    name="password"
-                    variant="gray"
-                    placeholder="비밀번호를 입력해주세요"
-                    type={passwordsVisible ? "text" : "password"}
-                    autoComplete="new-password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                  <button
-                    type="button"
-                    aria-label={passwordsVisible ? "비밀번호 숨기기" : "비밀번호 보기"}
-                    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
-                    id="passwordConfirm"
-                    name="passwordConfirm"
-                    variant="gray"
-                    placeholder="비밀번호를 다시 입력해주세요"
-                    type={passwordsVisible ? "text" : "password"}
-                    autoComplete="new-password"
-                    value={passwordConfirm}
-                    onChange={(e) => setPasswordConfirm(e.target.value)}
-                  />
-                  <button
-                    type="button"
-                    aria-label={passwordsVisible ? "비밀번호 확인 숨기기" : "비밀번호 확인 보기"}
-                    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>
+            <Label htmlFor="passwordConfirm" className="text-k-900">
+              비밀번호 확인
+            </Label>
+            <div className="relative">
+              <Input
+                id="passwordConfirm"
+                name="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>
+            )}
+          </div>
+        </>
+      )}
+    </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={emailSignUp} disabled={!email || !password || !passwordConfirm || !passwordMatch}>
-            다음
-          </BlockBtn>
-        </div>
-      </div>
-    </>
+  const submitButton = (
+    <BlockBtn onClick={emailSignUp} disabled={!email || !password || !passwordConfirm || !passwordMatch}>
+      다음
+    </BlockBtn>
   );
+
+  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>
+          ))}
+        </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>
+
+      {formFields}
+    </div>
+
+    <div className="fixed bottom-14 left-0 right-0 w-full max-w-app bg-white md:bottom-0 md:left-[88px] md:right-auto md:w-[calc(100%-88px)] md:max-w-none">
+      <div className="mb-[37px] px-5">{submitButton}</div>
+    </div>
+  </>
+);
+
 export default EmailSignUpForm;
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/terms/page.tsx b/apps/web/src/app/terms/page.tsx
index f8b99ed24..b721733f1 100644
--- a/apps/web/src/app/terms/page.tsx
+++ b/apps/web/src/app/terms/page.tsx
@@ -141,26 +141,67 @@ 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, index) => (
+            <a
+              key={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}
+            </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, 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>
+          ))}
+        </ol>
+      </section>
+    ))}
+  </div>
+);
+
+const getTermsSectionId = (index: number) => `terms-section-${index + 1}`;
+
 export default TermsPage;
diff --git a/apps/web/src/app/university/application/ScoreSheet.tsx b/apps/web/src/app/university/application/ScoreSheet.tsx
index 6a78879f6..726c20273 100644
--- a/apps/web/src/app/university/application/ScoreSheet.tsx
+++ b/apps/web/src/app/university/application/ScoreSheet.tsx
@@ -134,6 +134,56 @@ export const MobileScoreSheet = ({ scoreSheet, defaultOpen = false, detailHref }
   );
 };
 
+export const DesktopScoreSheet = ({ scoreSheet, defaultOpen = false, detailHref }: ScoreSheetProps) => {
+  const [tableOpened, setTableOpened] = useState(defaultOpen);
+  const resolvedDetailHref = detailHref ?? getApplicationDetailHref(scoreSheet.koreanName);
+  const capacity = getScoreSheetCapacity(scoreSheet);
+
+  return (
+    <article className="overflow-hidden rounded-lg border border-k-100 bg-white shadow-[0_8px_24px_rgba(15,23,42,0.04)]">
+      <div className="flex min-h-[76px] items-center gap-4 border-b border-k-50 px-5 py-4">
+        <ScoreSheetLogo scoreSheet={scoreSheet} className="size-11" size={44} />
+        <div className="min-w-0 flex-1">
+          <Link href={resolvedDetailHref} className="block truncate text-k-900 typo-bold-5">
+            {scoreSheet.koreanName}
+          </Link>
+          <p className="mt-1 truncate text-k-500 typo-medium-3">
+            {scoreSheet.country} · {scoreSheet.region}
+          </p>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <span className="rounded-full bg-secondary-100 px-3 py-1 text-primary typo-sb-12">
+            {scoreSheet.applicants.length}명
+          </span>
+          <span className="rounded-full bg-k-50 px-3 py-1 text-k-600 typo-medium-12">모집 {capacity}</span>
+          <button
+            type="button"
+            onClick={() => setTableOpened((prev) => !prev)}
+            className="flex size-8 items-center justify-center rounded-full text-k-600 transition-colors hover:bg-k-50"
+            aria-label={`${scoreSheet.koreanName} 지원자 목록 ${tableOpened ? "접기" : "펼치기"}`}
+          >
+            <IconExpandMoreFilled className={`transition-transform duration-300 ${tableOpened ? "rotate-180" : ""}`} />
+          </button>
+        </div>
+      </div>
+
+      {tableOpened ? (
+        <div className="bg-white">
+          <div className="grid min-h-10 grid-cols-[1fr_70px_110px_70px] items-center border-b border-k-50 px-5 text-k-400 typo-medium-12">
+            <span>닉네임</span>
+            <span className="text-center">학점</span>
+            <span className="text-center">어학</span>
+            <span className="text-right">점수</span>
+          </div>
+          {scoreSheet.applicants.map((applicant, index) => (
+            <DesktopApplicantRow key={`${applicant.nicknameForApply}-${index}`} applicant={applicant} />
+          ))}
+        </div>
+      ) : null}
+    </article>
+  );
+};
+
 const ApplicantInlineRow = ({ applicant }: { applicant: Applicant }) => (
   <div className="grid min-h-[46px] grid-cols-[1fr_54px_1fr_54px] items-center px-9 text-k-700 typo-regular-3">
     <span className="truncate text-k-900">{applicant.nicknameForApply}</span>
@@ -143,4 +193,13 @@ const ApplicantInlineRow = ({ applicant }: { applicant: Applicant }) => (
   </div>
 );
 
+const DesktopApplicantRow = ({ applicant }: { applicant: Applicant }) => (
+  <div className="grid min-h-12 grid-cols-[1fr_70px_110px_70px] items-center border-b border-k-50 px-5 text-k-700 last:border-b-0 typo-medium-3">
+    <span className="truncate text-k-900">{applicant.nicknameForApply}</span>
+    <span className="text-center">{formatApplicantGpa(applicant.gpa)}</span>
+    <span className="truncate text-center">{formatApplicantLanguageTestName(applicant.testType)}</span>
+    <span className="truncate text-right">{formatApplicantLanguageScore(applicant)}</span>
+  </div>
+);
+
 export default MobileScoreSheet;
diff --git a/apps/web/src/app/university/application/[universityName]/ApplicationUniversityDetailContent.tsx b/apps/web/src/app/university/application/[universityName]/ApplicationUniversityDetailContent.tsx
index 6f908a89e..4339a464c 100644
--- a/apps/web/src/app/university/application/[universityName]/ApplicationUniversityDetailContent.tsx
+++ b/apps/web/src/app/university/application/[universityName]/ApplicationUniversityDetailContent.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import { type ReactNode, useMemo, useState } from "react";
 import { useGetApplicationsList } from "@/apis/applications";
 import Image from "@/components/ui/FallbackImage";
+import { SKIP_GLOBAL_ERROR_TOAST_META } from "@/lib/react-query/errorToastMeta";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import { IconShare } from "@/public/svgs";
 import type { Applicant, ScoreSheet as ScoreSheetType } from "@/types/application";
@@ -20,7 +21,7 @@ type ApplicationUniversityDetailContentProps = {
 
 const ApplicationUniversityDetailContent = ({ universityName }: ApplicationUniversityDetailContentProps) => {
   const [sortMode, setSortMode] = useState<ApplicantSort>("preference");
-  const { data, isLoading } = useGetApplicationsList();
+  const { data, isLoading } = useGetApplicationsList(undefined, { meta: SKIP_GLOBAL_ERROR_TOAST_META });
   const scoreSheet = useMemo(
     () => findScoreSheetWithApplicants(data?.choices ?? [], universityName),
     [data?.choices, universityName],
diff --git a/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
index 02a2b536f..ee0b3f824 100644
--- a/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
+++ b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
@@ -6,14 +6,39 @@ type ApplicationBottomActionBarProps = {
   disabled?: boolean;
 };
 
-const ApplicationBottomActionBar = ({ label, onClick, disabled = false }: ApplicationBottomActionBarProps) => {
+const ApplicationBottomActionBarBase = ({
+  label,
+  onClick,
+  isDesktop,
+  disabled = false,
+}: ApplicationBottomActionBarProps & { isDesktop: boolean }) => {
+  if (isDesktop) {
+    return (
+      <div className="mt-8">
+        <BlockBtn onClick={onClick} disabled={disabled}>
+          {label}
+        </BlockBtn>
+      </div>
+    );
+  }
+
   return (
-    <div className="fixed bottom-[78px] left-1/2 w-full max-w-app -translate-x-1/2 px-5">
-      <BlockBtn onClick={onClick} disabled={disabled}>
-        {label}
-      </BlockBtn>
+    <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 md:bg-white md:px-0">
+      <div className="md:mb-[37px] md:px-5">
+        <BlockBtn onClick={onClick} disabled={disabled}>
+          {label}
+        </BlockBtn>
+      </div>
     </div>
   );
 };
 
-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/_pages/ApprovedApplicationStatusPage.tsx b/apps/web/src/app/university/application/_pages/ApprovedApplicationStatusPage.tsx
index 8c7975914..5bfcb8e5e 100644
--- a/apps/web/src/app/university/application/_pages/ApprovedApplicationStatusPage.tsx
+++ b/apps/web/src/app/university/application/_pages/ApprovedApplicationStatusPage.tsx
@@ -13,7 +13,8 @@ import useAuthStore from "@/lib/zustand/useAuthStore";
 import { IconExpandMoreFilled } from "@/public/svgs/community";
 import type { Applicant, ScoreSheet as ScoreSheetType } from "@/types/application";
 import type { RegionKo } from "@/types/university";
-import { getApplicationDetailHref, MobileScoreSheet, ScoreSheetLogo } from "../ScoreSheet";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+import { DesktopScoreSheet, getApplicationDetailHref, MobileScoreSheet, ScoreSheetLogo } from "../ScoreSheet";
 
 type ApplicationAccessErrorCode = "APPLICATION_NOT_FOUND" | "APPLICATION_NOT_APPROVED";
 
@@ -58,6 +59,7 @@ type ScorePageViewProps = {
 
 const ApprovedApplicationStatusPage = () => {
   const router = useRouter();
+  const isDesktop = useIsDesktopViewport();
   const homeUniversityId = useAuthStore((state) => state.homeUniversityId);
   const maxChoiceCount = getHomeUniversityById(homeUniversityId)?.maxChoiceCount ?? DEFAULT_MAX_CHOICE_COUNT;
 
@@ -139,6 +141,8 @@ const ApprovedApplicationStatusPage = () => {
     );
   }
 
+  if (isDesktop === null) return <CloudSpinnerPage />;
+
   const viewProps = {
     appliedUniversities,
     displayedScoreSheets,
@@ -154,7 +158,7 @@ const ApprovedApplicationStatusPage = () => {
     onChangeUniversities: () => router.push("/university/application/apply"),
   };
 
-  return <ApplicationScoreView {...viewProps} />;
+  return isDesktop ? <ApplicationScoreDesktopView {...viewProps} /> : <ApplicationScoreView {...viewProps} />;
 };
 
 const ApplicationScoreView = ({
@@ -193,6 +197,184 @@ const ApplicationScoreView = ({
   );
 };
 
+const ApplicationScoreDesktopView = ({
+  appliedUniversities,
+  displayedScoreSheets,
+  totalUniversityCount,
+  applicantUniversityCount,
+  participantCount,
+  scope,
+  regionFilter,
+  sortMode,
+  onScopeChange,
+  onRegionChange,
+  onSortModeChange,
+  onChangeUniversities,
+}: ScorePageViewProps) => {
+  return (
+    <main className="min-h-screen bg-k-50 px-8 py-8 lg:px-10">
+      <div className="mx-auto max-w-7xl">
+        <header className="flex flex-col gap-4 border-b border-k-100 pb-7 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <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>
+          </div>
+          <div className="grid grid-cols-3 gap-3">
+            <DesktopMetricCard label="전체 대학" value={`${totalUniversityCount}개`} />
+            <DesktopMetricCard label="지원자 있는 대학" value={`${applicantUniversityCount}개`} />
+            <DesktopMetricCard label="참여자" value={`${participantCount}명`} highlight />
+          </div>
+        </header>
+
+        <div className="mt-8 grid items-start gap-8 xl:grid-cols-[minmax(0,1fr)_360px]">
+          <section className="min-w-0 rounded-lg border border-k-100 bg-white p-6">
+            <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
+              <div>
+                <h2 className="text-k-900 typo-bold-4">
+                  {scope === "withApplicants" ? "지원자 있는 대학" : "모든 대학"}
+                </h2>
+                <p className="mt-1 text-k-500 typo-medium-3">조건에 맞는 대학 {displayedScoreSheets.length}개</p>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <ScopePill isActive={scope === "withApplicants"} onClick={() => onScopeChange("withApplicants")}>
+                  지원자 있음
+                </ScopePill>
+                <ScopePill isActive={scope === "all"} onClick={() => onScopeChange("all")}>
+                  전체 보기
+                </ScopePill>
+                <ScopePill
+                  isActive={sortMode === "gpa"}
+                  onClick={() => onSortModeChange(sortMode === "gpa" ? "applicants" : "gpa")}
+                >
+                  학점 높은 순
+                </ScopePill>
+              </div>
+            </div>
+
+            <ScoreSheetList scoreSheets={displayedScoreSheets} variant="desktop" />
+          </section>
+
+          <aside className="sticky top-8 space-y-5">
+            <DesktopAppliedUniversityPanel
+              appliedUniversities={appliedUniversities}
+              onChangeUniversities={onChangeUniversities}
+            />
+            <DesktopFilterPanel regionFilter={regionFilter} onRegionChange={onRegionChange} />
+          </aside>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+const DesktopAppliedUniversityPanel = ({
+  appliedUniversities,
+  onChangeUniversities,
+}: {
+  appliedUniversities: AppliedUniversity[];
+  onChangeUniversities: () => void;
+}) => (
+  <section className="rounded-lg border border-k-100 bg-white p-5">
+    <div className="flex items-center justify-between gap-3">
+      <div>
+        <h2 className="text-k-900 typo-bold-5">지원한 대학</h2>
+        <p className="mt-1 text-k-500 typo-medium-3">{appliedUniversities.length}개 대학 선택됨</p>
+      </div>
+      <button
+        type="button"
+        onClick={onChangeUniversities}
+        className="rounded-full bg-primary px-4 py-2 text-k-0 typo-sb-12"
+      >
+        변경
+      </button>
+    </div>
+    <div className="mt-4 space-y-2">
+      {appliedUniversities.length > 0 ? (
+        appliedUniversities.map(({ preference, scoreSheet }) => (
+          <AppliedUniversityRow
+            key={`${preference}-${getScoreSheetKey(scoreSheet)}`}
+            preference={preference}
+            scoreSheet={scoreSheet}
+          />
+        ))
+      ) : (
+        <div className="rounded-lg bg-k-50 px-4 py-5 text-k-500 typo-medium-3">지원한 대학 정보가 없어요.</div>
+      )}
+    </div>
+  </section>
+);
+
+const DesktopFilterPanel = ({
+  regionFilter,
+  onRegionChange,
+}: {
+  regionFilter: RegionKo | "";
+  onRegionChange: (region: RegionKo | "") => void;
+}) => (
+  <section className="rounded-lg border border-k-100 bg-white p-5">
+    <h2 className="text-k-900 typo-bold-5">지역 필터</h2>
+    <p className="mt-1 text-k-500 typo-medium-3">권역별로 지원 현황을 좁혀보세요.</p>
+    <div className="mt-4 flex flex-wrap gap-2">
+      <FilterChip isActive={regionFilter === ""} onClick={() => onRegionChange("")}>
+        전체
+      </FilterChip>
+      {REGIONS_KO.map((region) => (
+        <FilterChip
+          key={region}
+          isActive={regionFilter === region}
+          onClick={() => onRegionChange(regionFilter === region ? "" : region)}
+        >
+          {region}
+        </FilterChip>
+      ))}
+    </div>
+  </section>
+);
+
+const ScopePill = ({
+  children,
+  isActive,
+  onClick,
+}: {
+  children: ReactNode;
+  isActive: boolean;
+  onClick: () => void;
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className={clsx(
+      "rounded-full border px-4 py-2 transition-colors typo-sb-12",
+      isActive ? "border-primary bg-primary text-k-0" : "border-k-100 bg-white text-k-500 hover:border-secondary-300",
+    )}
+  >
+    {children}
+  </button>
+);
+
+const DesktopMetricCard = ({
+  label,
+  value,
+  highlight = false,
+}: {
+  label: string;
+  value: string;
+  highlight?: boolean;
+}) => (
+  <div
+    className={clsx(
+      "min-w-32 rounded-lg border px-4 py-3",
+      highlight ? "border-secondary-300 bg-secondary-100" : "border-k-100 bg-white",
+    )}
+  >
+    <p className="text-k-500 typo-medium-12">{label}</p>
+    <p className={clsx("mt-1 typo-bold-4", highlight ? "text-primary" : "text-k-900")}>{value}</p>
+  </div>
+);
+
 const AppliedUniversitySection = ({
   appliedUniversities,
   onChangeUniversities,
@@ -215,7 +397,7 @@ const AppliedUniversitySection = ({
       {appliedUniversities.length > 0 ? (
         appliedUniversities.map(({ preference, scoreSheet }) => (
           <AppliedUniversityRow
-            key={`${preference}-${scoreSheet.koreanName}`}
+            key={`${preference}-${getScoreSheetKey(scoreSheet)}`}
             preference={preference}
             scoreSheet={scoreSheet}
           />
@@ -355,11 +537,27 @@ const FilterChip = ({
   </button>
 );
 
-const ScoreSheetList = ({ scoreSheets }: { scoreSheets: ScoreSheetType[] }) => {
+const ScoreSheetList = ({
+  scoreSheets,
+  variant = "mobile",
+}: {
+  scoreSheets: ScoreSheetType[];
+  variant?: "mobile" | "desktop";
+}) => {
   if (scoreSheets.length === 0) {
     return <ApplicationScoreEmptyState />;
   }
 
+  if (variant === "desktop") {
+    return (
+      <div className="mt-6 grid gap-4 2xl:grid-cols-2">
+        {scoreSheets.map((scoreSheet, index) => (
+          <DesktopScoreSheet key={getScoreSheetKey(scoreSheet)} scoreSheet={scoreSheet} defaultOpen={index === 0} />
+        ))}
+      </div>
+    );
+  }
+
   return (
     <div className="mt-3 flex flex-col gap-2 pb-6">
       {scoreSheets.map((scoreSheet, index) => (
diff --git a/apps/web/src/app/university/application/apply/ApplyPageContent.tsx b/apps/web/src/app/university/application/apply/ApplyPageContent.tsx
index 5b23ce440..fd3fb32f0 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 { useEffect, useMemo, useRef, useState } from "react";
 import { usePostSubmitApplication } from "@/apis/applications";
@@ -12,17 +13,20 @@ 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 ConfirmStep from "./ConfirmStep";
-import DoneStep from "./DoneStep";
-import EmptyGPA from "./EmptyGPA";
-import GpaStep from "./GpaStep";
-import LanguageStep from "./LanguageStep";
-import UniversityStep from "./UniversityStep";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+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;
 
 const ApplyPageContent = () => {
   const router = useRouter();
+  const isDesktop = useIsDesktopViewport();
   const homeUniversityId = useAuthStore((state) => state.homeUniversityId);
   const isAuthInitialized = useAuthStore((state) => state.isInitialized);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
@@ -60,12 +64,11 @@ const ApplyPageContent = () => {
     router.replace(getSchoolEmailVerificationPath("applicationApply"));
   }, [homeUniversityId, isAuthInitialized, isAuthenticated, router]);
 
-  // 다음 스텝으로 넘어가기
   const goNextStep = () => setStep((prev) => prev + 1);
-  // 이전 스텝으로 돌아가기
   const goPrevStep = () => {
     if (step === 1) {
       router.back();
+      return;
     }
     setStep((prev) => prev - 1);
   };
@@ -113,14 +116,171 @@ const ApplyPageContent = () => {
 
   const gpaScoreList = gpaScoreData?.gpaScoreStatusResponseList ?? [];
   const homeUniversityName = gpaScoreData?.homeUniversityName;
-  const isDataExist = gpaScoreList.length === 0 || languageTestScoreList.length === 0;
+
+  if (isDesktop === null) return null;
+
+  const isScoreDataEmpty = !homeUniversityName || 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 selectedUniversityList = curUniversityList
+    .map((id) => universityList.find((university) => university.id === id))
+    .filter(Boolean) as ListUniversity[];
+
+  const renderDesktopStep = () => {
+    if (isScoreDataEmpty) {
+      return <DesktopEmptyGPA />;
+    }
+
+    return (
+      <>
+        {step === 1 && (
+          <DesktopLanguageStep
+            languageTestScoreList={languageTestScoreList}
+            curLanguageTestScore={curLanguageTestScore}
+            setCurLanguageTestScore={setCurLanguageTestScore}
+            onNext={goNextStep}
+          />
+        )}
+        {step === 2 && homeUniversityName && (
+          <DesktopGpaStep
+            gpaScoreList={gpaScoreList}
+            homeUniversityName={homeUniversityName}
+            curGpaScore={curGpaScore}
+            setCurGpaScore={setCurGpaScore}
+            onNext={goNextStep}
+          />
+        )}
+        {step === 3 && (
+          <DesktopUniversityStep
+            universityList={universityList}
+            curUniversityList={curUniversityList}
+            setCurUniversityList={setCurUniversityList}
+            maxChoiceCount={maxChoiceCount}
+            onNext={goNextStep}
+          />
+        )}
+        {step === 4 && (
+          <DesktopConfirmStep
+            universityList={selectedUniversityList}
+            onNext={handleSubmit}
+            isSubmitting={isSubmitApplicationPending}
+          />
+        )}
+        {step === 99 && <DesktopDoneStep />}
+      </>
+    );
+  };
+
+  const renderMobileStep = () => {
+    if (isScoreDataEmpty) {
+      return <MobileEmptyGPA />;
+    }
+
+    return (
+      <>
+        {step === 1 && (
+          <MobileLanguageStep
+            languageTestScoreList={languageTestScoreList}
+            curLanguageTestScore={curLanguageTestScore}
+            setCurLanguageTestScore={setCurLanguageTestScore}
+            onNext={goNextStep}
+          />
+        )}
+        {step === 2 && homeUniversityName && (
+          <MobileGpaStep
+            gpaScoreList={gpaScoreList}
+            homeUniversityName={homeUniversityName}
+            curGpaScore={curGpaScore}
+            setCurGpaScore={setCurGpaScore}
+            onNext={goNextStep}
+          />
+        )}
+        {step === 3 && (
+          <MobileUniversityStep
+            universityList={universityList}
+            curUniversityList={curUniversityList}
+            setCurUniversityList={setCurUniversityList}
+            maxChoiceCount={maxChoiceCount}
+            onNext={goNextStep}
+          />
+        )}
+        {step === 4 && (
+          <MobileConfirmStep
+            universityList={selectedUniversityList}
+            onNext={handleSubmit}
+            isSubmitting={isSubmitApplicationPending}
+          />
+        )}
+        {step === 99 && <MobileDoneStep />}
+      </>
+    );
+  };
 
   if (isAuthInitialized && isAuthenticated && homeUniversityId === null) {
     return null;
   }
 
+  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">{renderDesktopStep()}</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 (
     <>
       <TopDetailNavigation title="지원하기" handleBack={goPrevStep} />
@@ -129,50 +289,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 && homeUniversityName && (
-            <GpaStep
-              gpaScoreList={gpaScoreList}
-              homeUniversityName={homeUniversityName}
-              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}
-              isSubmitting={isSubmitApplicationPending}
-            />
-          )}
-          {step === 99 && <DoneStep />}
-        </>
-      )}
+      {renderMobileStep()}
     </>
   );
 };
diff --git a/apps/web/src/app/university/application/apply/ConfirmStep.tsx b/apps/web/src/app/university/application/apply/ConfirmStep.tsx
index 94386890d..5865ae5c4 100644
--- a/apps/web/src/app/university/application/apply/ConfirmStep.tsx
+++ b/apps/web/src/app/university/application/apply/ConfirmStep.tsx
@@ -2,7 +2,10 @@ 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[];
@@ -12,13 +15,19 @@ type ConfirmStepProps = {
 
 type ConfirmUniversityCardProps = {
   universityList: ListUniversity[];
+  isDesktop: boolean;
 };
 
-const ConfirmUniversityCard = ({ universityList }: ConfirmUniversityCardProps) => {
+const ConfirmUniversityCard = ({ universityList, isDesktop }: 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",
+        isDesktop ? "shadow-none" : "shadow-[0_0_5px_rgba(0,0,0,0.25)]",
+      )}
+    >
       {universityList.map((university, index) => (
         <div
           key={university.id}
@@ -39,9 +48,16 @@ const ConfirmUniversityCard = ({ universityList }: ConfirmUniversityCardProps) =
   );
 };
 
-const ConfirmStep = ({ universityList, onNext, isSubmitting = false }: ConfirmStepProps) => {
+const ConfirmStepBase = ({
+  universityList,
+  onNext,
+  isDesktop,
+  isSubmitting = false,
+}: ConfirmStepProps & { isDesktop: boolean }) => {
+  const ActionBar = isDesktop ? DesktopApplicationBottomActionBar : MobileApplicationBottomActionBar;
+
   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>
@@ -55,10 +71,14 @@ const ConfirmStep = ({ universityList, onNext, isSubmitting = false }: ConfirmSt
         </p>
       </div>
 
-      <ConfirmUniversityCard universityList={universityList} />
-      <ApplicationBottomActionBar label="제출하기" onClick={onNext} disabled={isSubmitting} />
+      <ConfirmUniversityCard universityList={universityList} isDesktop={isDesktop} />
+      <ActionBar label="제출하기" onClick={onNext} disabled={isSubmitting} />
     </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 1b297fde8..700193862 100644
--- a/apps/web/src/app/university/application/apply/DoneStep.tsx
+++ b/apps/web/src/app/university/application/apply/DoneStep.tsx
@@ -1,13 +1,17 @@
+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 DoneStepBase = ({ isDesktop }: { isDesktop: boolean }) => {
   const router = useRouter();
+
   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 +22,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");
@@ -38,4 +42,8 @@ const DoneStep = () => {
   );
 };
 
-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 cbd0aa40b..fa4ab6ac9 100644
--- a/apps/web/src/app/university/application/apply/EmptyGPA.tsx
+++ b/apps/web/src/app/university/application/apply/EmptyGPA.tsx
@@ -1,12 +1,15 @@
+import clsx from "clsx";
 import Link from "next/link";
 
 import { IconSolidConnectionSmallLogo } from "@/public/svgs/my";
 import ApplicationSectionTitle from "../_components/ApplicationSectionTitle";
 
-const EmptyGPA = () => {
+const EmptyGPABase = ({ isDesktop }: { isDesktop: boolean }) => {
   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>
@@ -25,4 +28,9 @@ const EmptyGPA = () => {
     </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 2e5c917f1..9b1d3c5a3 100644
--- a/apps/web/src/app/university/application/apply/GpaStep.tsx
+++ b/apps/web/src/app/university/application/apply/GpaStep.tsx
@@ -1,12 +1,16 @@
 "use client";
 
+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 = {
@@ -17,8 +21,17 @@ type GpaStepProps = {
   onNext: () => void;
 };
 
-const GpaStep = ({ gpaScoreList, homeUniversityName, curGpaScore, setCurGpaScore, onNext }: GpaStepProps) => {
+const GpaStepBase = ({
+  gpaScoreList,
+  homeUniversityName,
+  curGpaScore,
+  setCurGpaScore,
+  onNext,
+  isDesktop,
+}: GpaStepProps & { isDesktop: boolean }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const ScoreCard = isDesktop ? DesktopScoreCard : MobileScoreCard;
+  const ActionBar = isDesktop ? DesktopApplicationBottomActionBar : MobileApplicationBottomActionBar;
 
   const handleNext = () => {
     if (curGpaScore === null) {
@@ -30,10 +43,12 @@ const GpaStep = ({ gpaScoreList, homeUniversityName, curGpaScore, setCurGpaScore
 
   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}
@@ -55,14 +70,14 @@ const GpaStep = ({ gpaScoreList, homeUniversityName, curGpaScore, setCurGpaScore
                 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}
               />
             </button>
           ))}
         </div>
       </div>
-      <ApplicationBottomActionBar label="다음" onClick={handleNext} />
+      <ActionBar label="다음" onClick={handleNext} />
       <TextModal
         isOpen={isModalOpen}
         handleClose={() => setIsModalOpen(false)}
@@ -73,4 +88,8 @@ const GpaStep = ({ gpaScoreList, homeUniversityName, curGpaScore, setCurGpaScore
   );
 };
 
-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 ecc8e7b8e..ff3f1c45e 100644
--- a/apps/web/src/app/university/application/apply/LanguageStep.tsx
+++ b/apps/web/src/app/university/application/apply/LanguageStep.tsx
@@ -1,12 +1,16 @@
 "use client";
 
+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 = {
@@ -16,13 +20,16 @@ type LanguageStepProps = {
   onNext: () => void;
 };
 
-const LanguageStep = ({
+const LanguageStepBase = ({
   languageTestScoreList,
   curLanguageTestScore,
   setCurLanguageTestScore,
   onNext,
-}: LanguageStepProps) => {
+  isDesktop,
+}: LanguageStepProps & { isDesktop: boolean }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const ScoreCard = isDesktop ? DesktopScoreCard : MobileScoreCard;
+  const ActionBar = isDesktop ? DesktopApplicationBottomActionBar : MobileApplicationBottomActionBar;
 
   const handleNext = () => {
     if (curLanguageTestScore === null) {
@@ -34,10 +41,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 +72,14 @@ const LanguageStep = ({
                 )}
                 status={score.verifyStatus}
                 // date={new Date(score.issueDate).toISOString()}
-                date="2025-01-01"
+                date={score.issueDate}
                 isFocused={score.id === curLanguageTestScore}
               />
             </button>
           ))}
         </div>
       </div>
-      <ApplicationBottomActionBar label="다음" onClick={handleNext} />
+      <ActionBar label="다음" onClick={handleNext} />
       <TextModal
         isOpen={isModalOpen}
         handleClose={() => setIsModalOpen(false)}
@@ -81,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 d234563e8..4b8fea3a6 100644
--- a/apps/web/src/app/university/application/apply/UniversityStep.tsx
+++ b/apps/web/src/app/university/application/apply/UniversityStep.tsx
@@ -1,12 +1,16 @@
 "use client";
 
+import clsx from "clsx";
 import { useMemo, useState } from "react";
 
 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[];
@@ -62,15 +66,17 @@ const UniversityChoiceSelect = ({
   );
 };
 
-const UniversityStep = ({
+const UniversityStepBase = ({
   universityList,
   curUniversityList,
   setCurUniversityList,
   maxChoiceCount,
   onNext,
-}: UniversityStepProps) => {
+  isDesktop,
+}: UniversityStepProps & { isDesktop: boolean }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const choiceIndexes = useMemo(() => Array.from({ length: maxChoiceCount }, (_, index) => index), [maxChoiceCount]);
+  const ActionBar = isDesktop ? DesktopApplicationBottomActionBar : MobileApplicationBottomActionBar;
 
   const handleSelect = (index: number, value: number) => {
     const newList = curUniversityList.slice(0, maxChoiceCount);
@@ -96,9 +102,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 +118,7 @@ const UniversityStep = ({
           ))}
         </div>
       </div>
-      <ApplicationBottomActionBar label="다음" onClick={handleNext} />
+      <ActionBar label="다음" onClick={handleNext} />
       <TextModal
         isOpen={isModalOpen}
         handleClose={() => setIsModalOpen(false)}
@@ -123,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.stories.tsx b/apps/web/src/app/university/score/ScoreCard.stories.tsx
new file mode 100644
index 000000000..220b20b60
--- /dev/null
+++ b/apps/web/src/app/university/score/ScoreCard.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { ScoreSubmitStatus } from "@/types/score";
+import ScoreCard from "./ScoreCard";
+
+const meta = {
+  title: "Scores/ScoreCard",
+  component: ScoreCard,
+  args: { name: "TOEFL iBT", score: "100", date: "2026-10-01T00:00:00Z", status: ScoreSubmitStatus.APPROVED },
+} satisfies Meta<typeof ScoreCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Approved: Story = { args: { isFocused: true } };
+export const Pending: Story = { args: { status: ScoreSubmitStatus.PENDING } };
+export const Rejected: Story = { args: { status: ScoreSubmitStatus.REJECTED } };
+export const Gpa: Story = { args: { name: "인하대학교", score: "4.00/4.5" } };
diff --git a/apps/web/src/app/university/score/ScoreCard.tsx b/apps/web/src/app/university/score/ScoreCard.tsx
index 3d4029d4f..37306e351 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;
 };
 
@@ -47,36 +48,48 @@ const getStatus = (status: ScoreSubmitStatus) => {
   }
 };
 
-const ScoreCard = ({ name, score, status, date, isFocused = false }: ScoreCardProps) => {
+const ScoreCardBase = ({
+  name,
+  score,
+  status,
+  date,
+  dateLabel = "제출일",
+  isFocused = false,
+  isDesktop,
+}: ScoreCardProps & { isDesktop: boolean }) => {
   const isVerified = status === "APPROVED";
 
   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)}
+            {dateLabel} : {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>
@@ -85,4 +98,8 @@ const ScoreCard = ({ name, score, status, date, isFocused = false }: ScoreCardPr
   );
 };
 
-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 0b98c3aee..1a5d278fa 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 { useEffect, useState } from "react";
 import { useGetMyGpaScore, useGetMyLanguageTestScore } from "@/apis/Scores";
@@ -9,11 +10,30 @@ import Tab from "@/components/ui/Tab";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { IconSolidConnectionSmallLogo } from "@/public/svgs/my";
-import { formatLanguageTestScore, languageTestMapping, ScoreSubmitStatus } from "@/types/score";
-import ScoreCard from "./ScoreCard";
+import {
+  formatLanguageTestScore,
+  type GpaScore,
+  type LanguageTestScore,
+  languageTestMapping,
+  ScoreSubmitStatus,
+} from "@/types/score";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+import { DesktopScoreCard, MobileScoreCard } 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[];
+  homeUniversityName: string;
+  languageTestScoreList: LanguageTestScore[];
+  isEmptyCurrentTab: boolean;
+  onScoreClick: (status: ScoreSubmitStatus, rejectedReason?: string | null) => void;
+  onSubmitClick: () => void;
+};
+
+const getSubmitLabel = (curTab: ScoreTab) => (curTab === "공인어학" ? "어학 성적 입력하기" : "학점 입력하기");
 
 const ScoreScreen = () => {
   const router = useRouter();
@@ -21,11 +41,13 @@ const ScoreScreen = () => {
   const isAuthInitialized = useAuthStore((state) => state.isInitialized);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const [curTab, setCurTab] = useState<ScoreTab>("공인어학");
+  const isDesktop = useIsDesktopViewport();
   const shouldFetchGpaScore = isAuthInitialized && isAuthenticated && homeUniversityId !== null;
   // TODO: 서버의 모학교 미인증 에러 코드가 확정되면 GPA 조회 실패 시 학교 인증으로 보내는 fallback을 추가한다.
   const { data: gpaScoreData } = useGetMyGpaScore({ enabled: shouldFetchGpaScore });
   const { data: languageTestScoreList = [] } = useGetMyLanguageTestScore();
   const gpaScoreList = gpaScoreData?.gpaScoreStatusResponseList ?? [];
+  const homeUniversityName = gpaScoreData?.homeUniversityName ?? "";
   const isEmptyCurrentTab = curTab === "공인어학" ? languageTestScoreList.length === 0 : gpaScoreList.length === 0;
 
   useEffect(() => {
@@ -46,6 +68,10 @@ const ScoreScreen = () => {
     }
   };
 
+  const handleSubmitClick = () => {
+    router.push(curTab === "공인어학" ? "/university/score/submit/language-test" : "/university/score/submit/gpa");
+  };
+
   if (!isAuthInitialized) {
     return null;
   }
@@ -54,78 +80,232 @@ const ScoreScreen = () => {
     return null;
   }
 
+  if (isDesktop === null) return null;
+
+  const viewProps = {
+    curTab,
+    setCurTab,
+    gpaScoreList,
+    homeUniversityName,
+    languageTestScoreList,
+    isEmptyCurrentTab,
+    onScoreClick: handleScoreClick,
+    onSubmitClick: handleSubmitClick,
+  };
+
+  return isDesktop ? <ScoreDesktopView {...viewProps} /> : <ScoreMobileView {...viewProps} />;
+};
+
+const ScoreMobileView = ({
+  curTab,
+  setCurTab,
+  gpaScoreList,
+  homeUniversityName,
+  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>
+          <MobileScoreEmptyState />
         ) : (
-          <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 === "학점" &&
-              gpaScoreData &&
-              gpaScoreList.map((score) => (
-                <button
-                  key={score.id}
-                  type="button"
-                  className="text-left"
-                  onClick={() => handleScoreClick(score.verifyStatus, score.rejectedReason)}
-                >
-                  <ScoreCard
-                    name={gpaScoreData.homeUniversityName}
-                    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>
+          <MobileScoreList
+            curTab={curTab}
+            gpaScoreList={gpaScoreList}
+            homeUniversityName={homeUniversityName}
+            languageTestScoreList={languageTestScoreList}
+            onScoreClick={onScoreClick}
+          />
         )}
       </div>
-      <div className="fixed bottom-14 w-full max-w-app bg-white">
+      <div className="fixed bottom-14 left-0 right-0 w-full max-w-app bg-white md:bottom-0 md:left-[88px] md:right-auto 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,
+  homeUniversityName,
+  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 ? (
+              <DesktopScoreEmptyState />
+            ) : (
+              <DesktopScoreList
+                curTab={curTab}
+                gpaScoreList={gpaScoreList}
+                homeUniversityName={homeUniversityName}
+                languageTestScoreList={languageTestScoreList}
+                onScoreClick={onScoreClick}
+              />
+            )}
+          </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 ScoreEmptyStateBase = ({ isDesktop }: { isDesktop: boolean }) => {
+  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 MobileScoreEmptyState = () => <ScoreEmptyStateBase isDesktop={false} />;
+
+const DesktopScoreEmptyState = () => <ScoreEmptyStateBase isDesktop />;
+
+const ScoreListBase = ({
+  curTab,
+  gpaScoreList,
+  homeUniversityName,
+  languageTestScoreList,
+  onScoreClick,
+  isDesktop,
+}: Pick<ScoreViewProps, "curTab" | "gpaScoreList" | "homeUniversityName" | "languageTestScoreList" | "onScoreClick"> & {
+  isDesktop: boolean;
+}) => {
+  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")}>
+      {curTab === "공인어학" &&
+        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"}
+              />
+            </button>
+          );
+        })}
+
+      {curTab === "학점" &&
+        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={homeUniversityName}
+                score={`${score.gpaResponse.gpa.toFixed(2)}/${score.gpaResponse.gpaCriteria}`}
+                status={score.verifyStatus}
+                date={submittedDate}
+                dateLabel="제출일"
+                isFocused={score.verifyStatus === "APPROVED"}
+              />
+            </button>
+          );
+        })}
+    </div>
+  );
+};
+
+const MobileScoreList = (
+  props: Pick<
+    ScoreViewProps,
+    "curTab" | "gpaScoreList" | "homeUniversityName" | "languageTestScoreList" | "onScoreClick"
+  >,
+) => <ScoreListBase {...props} isDesktop={false} />;
+
+const DesktopScoreList = (
+  props: Pick<
+    ScoreViewProps,
+    "curTab" | "gpaScoreList" | "homeUniversityName" | "languageTestScoreList" | "onScoreClick"
+  >,
+) => <ScoreListBase {...props} isDesktop />;
+
 export default ScoreScreen;
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;
diff --git a/apps/web/src/app/university/score/page.tsx b/apps/web/src/app/university/score/page.tsx
index 39aaac633..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">
+      <div className="w-full 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 a641d5496..0301c7e11 100644
--- a/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
+++ b/apps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsx
@@ -8,11 +8,12 @@ import { Suspense, useEffect, useRef, useState } from "react";
 import { Controller, type SubmitHandler, useForm } from "react-hook-form";
 import { usePostGpaScore } from "@/apis/Scores";
 import { getSchoolEmailVerificationPath } from "@/app/my/school-email/_lib/returnTo";
-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 useAuthStore from "@/lib/zustand/useAuthStore";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import { type GpaFormData, gpaSchema } from "./_lib/schema";
 
 const GpaSubmitForm = () => {
@@ -23,9 +24,9 @@ const GpaSubmitForm = () => {
   const [showResult, setShowResult] = useState(false);
   const [submittedData, setSubmittedData] = useState<GpaFormData | null>(null);
   const isSubmitLockedRef = useRef(false);
+  const isDesktop = useIsDesktopViewport();
   const { mutateAsync: postGpaScore, isPending: isPostGpaScorePending } = usePostGpaScore();
 
-  // 2. react-hook-form 설정
   const {
     register,
     handleSubmit,
@@ -52,7 +53,6 @@ const GpaSubmitForm = () => {
     return null;
   }
 
-  // 3. 폼 제출 핸들러
   const onSubmit: SubmitHandler<GpaFormData> = async (data) => {
     if (isSubmitLockedRef.current) return;
 
@@ -77,7 +77,10 @@ const GpaSubmitForm = () => {
     }
   };
 
+  if (isDesktop === null) return null;
+
   if (showResult && submittedData) {
+    const Result = isDesktop ? DesktopSubmitResult : MobileSubmitResult;
     const infoRows: InfoRowProps[] = [
       {
         label: "학점 기준",
@@ -96,7 +99,7 @@ const GpaSubmitForm = () => {
     ];
 
     return (
-      <SubmitResult
+      <Result
         title="학점 입력 완료"
         description="성적 승인은 최대 3일까지 걸릴 수 있습니다."
         buttonText="홈으로"
@@ -107,91 +110,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",
+        isSubmitDisabled ? "cursor-not-allowed bg-k-100" : "bg-primary",
+      )}
+      disabled={isSubmitDisabled}
+    >
+      다음
+    </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">
+              <DesktopSubmitLinkTab />
+              <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 />
+      <MobileSubmitLinkTab />
       <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">
-          <button
-            className={clsx(
-              "mb-10 w-full rounded-lg py-4 text-white typo-sb-9",
-              isSubmitDisabled ? "cursor-not-allowed bg-k-100" : "bg-primary",
-            )}
-            disabled={isSubmitDisabled}
-          >
-            다음
-          </button>
+        <div className="mt-10 w-full max-w-app md:max-w-none">
+          <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 219ec3058..4d9f3c6d6 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,11 +7,12 @@ import { useRouter } from "next/navigation";
 import { Suspense, useRef, 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";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
 import { type LanguageTestFormData, languageTestSchema } from "./_lib/schema";
 
 const LanguageTestSubmitForm = () => {
@@ -20,8 +21,8 @@ const LanguageTestSubmitForm = () => {
   const isSubmitLockedRef = useRef(false);
   const { mutateAsync: postLanguageTestScore, isPending: isPostLanguageTestScorePending } = usePostLanguageTestScore();
   const [submittedData, setSubmittedData] = useState<LanguageTestFormData | null>(null);
+  const isDesktop = useIsDesktopViewport();
 
-  // 3. react-hook-form 설정
   const {
     register,
     handleSubmit,
@@ -31,13 +32,12 @@ const LanguageTestSubmitForm = () => {
     formState: { errors, isSubmitting, isValid },
   } = useForm<LanguageTestFormData>({
     resolver: zodResolver(languageTestSchema),
-    mode: "onChange", // 입력값이 변경될 때마다 유효성 검사
+    mode: "onChange",
   });
 
   const selectedFile = watch("file");
   const isSubmitDisabled = !isValid || isSubmitting || isPostLanguageTestScorePending;
 
-  // 4. 폼 제출 핸들러
   const onSubmit: SubmitHandler<LanguageTestFormData> = async (data) => {
     if (isSubmitLockedRef.current) return;
 
@@ -52,7 +52,6 @@ const LanguageTestSubmitForm = () => {
         file: data.file[0],
       });
 
-      // 성공 시에만 실행
       reset();
       setShowResult(true);
       setSubmittedData(data);
@@ -63,8 +62,11 @@ const LanguageTestSubmitForm = () => {
     }
   };
 
+  if (isDesktop === null) return null;
+
   if (showResult && submittedData) {
     const submittedTestInfo = languageTestScoreInfo[submittedData.testType];
+    const Result = isDesktop ? DesktopSubmitResult : MobileSubmitResult;
 
     const infoRows: InfoRowProps[] = [
       {
@@ -80,7 +82,7 @@ const LanguageTestSubmitForm = () => {
     ];
 
     return (
-      <SubmitResult
+      <Result
         title="어학 성적 제출 완료"
         description="성적 승인은 최대 3일까지 걸릴 수 있습니다."
         buttonText="학점입력하기"
@@ -91,90 +93,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",
+        isSubmitDisabled ? "cursor-not-allowed bg-k-100" : "bg-primary",
+      )}
+      disabled={isSubmitDisabled}
+    >
+      다음
+    </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">
+              <DesktopSubmitLinkTab isActiveGpa={false} />
+              <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} />
+      <MobileSubmitLinkTab 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">
-          <button
-            className={clsx(
-              "mb-10 w-full rounded-lg py-4 text-white typo-sb-9",
-              isSubmitDisabled ? "cursor-not-allowed bg-k-100" : "bg-primary",
-            )}
-            disabled={isSubmitDisabled}
-          >
-            다음
-          </button>
+        <div className="mt-10 w-full max-w-app px-5 md:max-w-none">
+          <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/button/BlockBtn.stories.tsx b/apps/web/src/components/button/BlockBtn.stories.tsx
new file mode 100644
index 000000000..581fc0fc2
--- /dev/null
+++ b/apps/web/src/components/button/BlockBtn.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
+import BlockBtn from "./BlockBtn";
+
+const meta = {
+  title: "Common/BlockBtn",
+  component: BlockBtn,
+  args: { children: "다음으로", onClick: fn() },
+} satisfies Meta<typeof BlockBtn>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Primary: Story = {
+  play: async ({ canvasElement, args }) => {
+    await userEvent.click(within(canvasElement).getByRole("button", { name: "다음으로" }));
+    await expect(args.onClick).toHaveBeenCalledTimes(1);
+  },
+};
+export const Secondary: Story = { args: { variant: "secondary", children: "저장하기" } };
+export const Disabled: Story = {
+  args: { disabled: true },
+  play: async ({ canvasElement, args }) => {
+    const button = within(canvasElement).getByRole("button");
+    await expect(button).toBeDisabled();
+    await userEvent.click(button);
+    await expect(args.onClick).not.toHaveBeenCalled();
+  },
+};
diff --git a/apps/web/src/components/layout/GlobalLayout/index.tsx b/apps/web/src/components/layout/GlobalLayout/index.tsx
index 37b1d36b3..03ee15906 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 AdminViewSwitcherFab from "./ui/AdminViewSwitcherFab/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 />
-      <AdminViewSwitcherFab />
-      <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 />
+        <AdminViewSwitcherFab />
+        <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..dc3fb818a 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,10 @@ const BottomNavigation = () => {
   }
 
   return (
-    <nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white shadow-magic-bottom-nav">
+    <nav
+      aria-label="하단 메뉴"
+      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/ReissueProvider/index.tsx b/apps/web/src/components/layout/ReissueProvider/index.tsx
index a6c18b823..59439a54a 100644
--- a/apps/web/src/components/layout/ReissueProvider/index.tsx
+++ b/apps/web/src/components/layout/ReissueProvider/index.tsx
@@ -2,63 +2,24 @@
 
 import type React from "react";
 import { useEffect } from "react";
-
-import { postReissueToken } from "@/apis/Auth";
 import useAuthStore from "@/lib/zustand/useAuthStore";
+import { getValidAccessToken } from "@/utils/axiosInstance";
 import { isTokenExpired } from "@/utils/jwtUtils";
 
 interface ReissueProviderProps {
   children: React.ReactNode;
 }
 
-const ReissueProvider: React.FC<ReissueProviderProps> = ({ children }) => {
-  useEffect(() => {
-    let isMounted = true;
-
-    const initializeAuth = async () => {
-      const { accessToken, setInitialized, setLoading, setRefreshStatus, shouldAttemptRefresh } =
-        useAuthStore.getState();
-
-      if (accessToken && !isTokenExpired(accessToken)) {
-        setInitialized(true);
-        return;
-      }
-
-      if (!shouldAttemptRefresh) {
-        setInitialized(true);
-        return;
-      }
-
-      try {
-        setRefreshStatus("refreshing");
-        setLoading(true);
-
-        // HttpOnly refresh token 쿠키가 있으면 access token을 복구합니다.
-        await postReissueToken();
-        if (isMounted) {
-          useAuthStore.getState().setRefreshStatus("success");
-        }
-      } catch {
-        if (isMounted) {
-          useAuthStore.getState().clearAccessToken();
-          useAuthStore.getState().setRefreshStatus("failed");
-        }
-      } finally {
-        if (isMounted) {
-          useAuthStore.getState().setLoading(false);
-          useAuthStore.getState().setInitialized(true);
-        }
-      }
-    };
-
-    initializeAuth();
-
-    // 컴포넌트 언마운트 시 플래그 설정
-    return () => {
-      isMounted = false;
-    };
+const ReissueProvider = ({ children }: ReissueProviderProps) => {
+  useEffect(function initializeAuthentication() {
+    const auth = useAuthStore.getState();
+    if ((auth.accessToken && !isTokenExpired(auth.accessToken)) || !auth.shouldAttemptRefresh) {
+      auth.setInitialized(true);
+      return;
+    }
+    // The coordinator owns status and session checks for every refresh caller.
+    void getValidAccessToken().catch(() => {});
   }, []);
-
   return <>{children}</>;
 };
 
diff --git a/apps/web/src/components/layout/TopDetailNavigation.tsx b/apps/web/src/components/layout/TopDetailNavigation.tsx
index eb67ed945..54ce582b4 100644
--- a/apps/web/src/components/layout/TopDetailNavigation.tsx
+++ b/apps/web/src/components/layout/TopDetailNavigation.tsx
@@ -9,9 +9,16 @@ export interface TopDetailNavigationProps {
   handleBack?: () => void;
   backHref?: string;
   icon?: React.ReactNode;
+  showOnDesktop?: boolean;
 }
 
-const TopDetailNavigation = ({ title, handleBack, backHref, icon }: TopDetailNavigationProps) => {
+const TopDetailNavigation = ({
+  title,
+  handleBack,
+  backHref,
+  icon,
+  showOnDesktop = false,
+}: TopDetailNavigationProps) => {
   const router = useRouter();
 
   const routeBack = () => {
@@ -23,7 +30,9 @@ 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 ${showOnDesktop ? "md:static md:h-16 md:max-w-none md:border-b md:border-k-100" : "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/login/signup/SignupPolicyScreen.tsx b/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
index 1a61e4b2d..8124d44b0 100644
--- a/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupPolicyScreen.tsx
@@ -10,14 +10,14 @@ interface SignupPolicyScreenProps {
   toNextStage: () => void;
 }
 
-const SignupPolicyScreen = ({ toNextStage }: SignupPolicyScreenProps) => {
+const SignupPolicyScreenBase = ({ toNextStage, isDesktop }: SignupPolicyScreenProps & { isDesktop: boolean }) => {
   const [isChecked, setIsChecked] = useState(false);
 
   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-[#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">
               <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 +35,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 +59,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>
@@ -66,4 +68,12 @@ const SignupPolicyScreen = ({ toNextStage }: SignupPolicyScreenProps) => {
   );
 };
 
-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 0aded58f3..aed1bf778 100644
--- a/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
@@ -13,7 +13,12 @@ type SignupPrepareScreenProps = {
   toNextStage: () => void;
 };
 
-const SignupPrepareScreen = ({ preparation, setPreparation, toNextStage }: SignupPrepareScreenProps) => {
+const SignupPrepareScreenBase = ({
+  preparation,
+  setPreparation,
+  toNextStage,
+  isDesktop,
+}: SignupPrepareScreenProps & { isDesktop: boolean }) => {
   const submit = () => {
     if (!preparation) {
       showIconToast("logo", "준비 단계를 선택해주세요.");
@@ -24,8 +29,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 +40,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 +71,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>
@@ -113,4 +118,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 78ad94496..944c2b4eb 100644
--- a/apps/web/src/components/login/signup/SignupProfileScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupProfileScreen.tsx
@@ -15,14 +15,15 @@ type SignupProfileScreenProps = {
   setProfileImageFile: Dispatch<SetStateAction<File | null>>;
 };
 
-const SignupProfileScreen = ({
+const SignupProfileScreenBase = ({
   toNextStage,
   nickname,
   setNickname,
   defaultProfileImageUrl,
   profileImageFile,
   setProfileImageFile,
-}: SignupProfileScreenProps) => {
+  isDesktop,
+}: SignupProfileScreenProps & { isDesktop: boolean }) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploadedProfileImageFileView, setUploadedProfileImageFileView] = useState<string | null>(null);
 
@@ -64,8 +65,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 +105,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>
@@ -113,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 f11345e71..198df2d96 100644
--- a/apps/web/src/components/login/signup/SignupRegionScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupRegionScreen.tsx
@@ -14,13 +14,14 @@ type SignupRegionScreenProps = {
   toNextStage: () => void;
 };
 
-const SignupRegionScreen = ({
+const SignupRegionScreenBase = ({
   curRegion,
   setCurRegion,
   curCountries,
   setCurCountries,
   toNextStage,
-}: SignupRegionScreenProps) => {
+  isDesktop,
+}: SignupRegionScreenProps & { isDesktop: boolean }) => {
   const submit = () => {
     if (!curRegion) {
       showIconToast("logo", "권역을 선택해주세요.");
@@ -31,8 +32,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 +43,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} isDesktop={isDesktop} />
+          <CountryButtons
+            curCountries={curCountries}
+            setCurCountries={setCurCountries}
+            region={curRegion}
+            isDesktop={isDesktop}
+          />
         </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>
@@ -56,15 +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>>;
+  isDesktop: boolean;
 };
 
-const RegionButtons = ({ curRegion, setCurRegion }: RegionButtonsProps) => (
-  <div className="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}
@@ -99,9 +114,10 @@ type CountryButtonsProps = {
   curCountries: string[];
   setCurCountries: Dispatch<SetStateAction<string[]>>;
   region: string | null;
+  isDesktop: boolean;
 };
 
-const CountryButtons = ({ curCountries, setCurCountries, region }: CountryButtonsProps) => {
+const CountryButtons = ({ curCountries, setCurCountries, region, isDesktop }: CountryButtonsProps) => {
   const toggleCountry = (country: string) => {
     if (curCountries.includes(country)) {
       setCurCountries(curCountries.filter((c) => c !== country));
@@ -113,7 +129,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={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 91a572662..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";
@@ -15,10 +15,11 @@ import {
   getCommunityRedirectOrFallback,
   getSafeCommunityRedirectPath,
 } from "@/utils/authRedirect";
-import SignupPolicyScreen from "./SignupPolicyScreen";
-import SignupPrepareScreen from "./SignupPrepareScreen";
-import SignupProfileScreen from "./SignupProfileScreen";
-import SignupRegionScreen from "./SignupRegionScreen";
+import useIsDesktopViewport from "@/utils/useIsDesktopViewport";
+import { DesktopSignupPolicyScreen, MobileSignupPolicyScreen } from "./SignupPolicyScreen";
+import { DesktopSignupPrepareScreen, MobileSignupPrepareScreen } from "./SignupPrepareScreen";
+import { DesktopSignupProfileScreen, MobileSignupProfileScreen } from "./SignupProfileScreen";
+import { DesktopSignupRegionScreen, MobileSignupRegionScreen } from "./SignupRegionScreen";
 
 type SignupSurveyProps = {
   baseNickname: string;
@@ -33,6 +34,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,7 +59,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
     setCurProgress(((curStage - 1) / 3) * 100);
   }, [curStage]);
 
-  if (!signUpToken) {
+  if (!signUpToken || isDesktop === null) {
     return null;
   }
 
@@ -108,11 +110,11 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
     }
   };
 
-  const renderCurrentSurvey = () => {
+  const renderDesktopSurvey = () => {
     switch (curStage) {
       case 1:
         return (
-          <SignupPolicyScreen
+          <DesktopSignupPolicyScreen
             toNextStage={() => {
               setCurStage(2);
             }}
@@ -120,7 +122,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
         );
       case 2:
         return (
-          <SignupPrepareScreen
+          <DesktopSignupPrepareScreen
             preparation={curPreparation}
             setPreparation={setCurPreparation}
             toNextStage={() => {
@@ -130,7 +132,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
         );
       case 3:
         return (
-          <SignupRegionScreen
+          <DesktopSignupRegionScreen
             curRegion={region}
             setCurRegion={setRegion}
             curCountries={countries}
@@ -142,7 +144,7 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
         );
       case 4:
         return (
-          <SignupProfileScreen
+          <DesktopSignupProfileScreen
             toNextStage={submitRegisterRequest}
             nickname={nickname}
             setNickname={setNickname}
@@ -156,14 +158,110 @@ const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSu
     }
   };
 
-  return (
-    <div>
-      <div className="mt-8 px-5">
-        <Progress value={curProgress} />
-      </div>
-      {renderCurrentSurvey()}
-    </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}
+            defaultProfileImageUrl={baseProfileImageUrl}
+            profileImageFile={profileImageFile}
+            setProfileImageFile={setProfileImageFile}
+          />
+        );
+      default:
+        return <div>회원 가입이 완료되었습니다</div>;
+    }
+  };
+
+  if (isDesktop) {
+    return (
+      <SignupDesktopSurveyView curProgress={curProgress} curStage={curStage}>
+        {renderDesktopSurvey()}
+      </SignupDesktopSurveyView>
+    );
+  }
+
+  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;
diff --git a/apps/web/src/components/score/SubmitLinkTab.tsx b/apps/web/src/components/score/SubmitLinkTab.tsx
index 66c4f3452..7ab929222 100644
--- a/apps/web/src/components/score/SubmitLinkTab.tsx
+++ b/apps/web/src/components/score/SubmitLinkTab.tsx
@@ -11,7 +11,7 @@ type SubmitLinkTabProps = {
   };
 };
 
-const SubmitLinkTab = ({ color, isActiveGpa = true }: SubmitLinkTabProps) => {
+const SubmitLinkTabBase = ({ color, isActiveGpa = true, isDesktop }: SubmitLinkTabProps & { isDesktop: boolean }) => {
   const defaultColor = {
     activeBtnFont: "text-black",
     deactiveBtnFont: "text-gray-200",
@@ -20,6 +20,32 @@ const SubmitLinkTab = ({ color, isActiveGpa = true }: SubmitLinkTabProps) => {
     activeBtnFont: color?.activeBtnFont ? `text-[${color.activeBtnFont}]` : defaultColor.activeBtnFont,
     deactiveBtnFont: color?.deactiveBtnFont ? `text-[${color.deactiveBtnFont}]` : defaultColor.deactiveBtnFont,
   };
+
+  if (isDesktop) {
+    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
@@ -45,4 +71,9 @@ const SubmitLinkTab = ({ color, isActiveGpa = true }: SubmitLinkTabProps) => {
     </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 a8e97b8f5..53b990b3d 100644
--- a/apps/web/src/components/score/SubmitResult.tsx
+++ b/apps/web/src/components/score/SubmitResult.tsx
@@ -23,55 +23,87 @@ interface SubmitResultProps {
 }
 
 // --- 메인 컴포넌트 ---
-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 SubmitResultBase = ({
+  title,
+  description,
+  infoRows,
+  buttonText,
+  onClick,
+  handleClose,
+  isDesktop,
+}: SubmitResultProps & { isDesktop: boolean }) => {
+  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 (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)]">
+          <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>;
 };
 
+export const DesktopSubmitResult = (props: SubmitResultProps) => <SubmitResultBase {...props} isDesktop />;
+
+export const MobileSubmitResult = (props: SubmitResultProps) => <SubmitResultBase {...props} isDesktop={false} />;
+
 // --- 컴포넌트 사용 예시 ---
 const _ExamplePage = () => {
   const infoRows = [
@@ -89,7 +121,7 @@ const _ExamplePage = () => {
   ];
 
   return (
-    <SubmitResult
+    <MobileSubmitResult
       title={"어학 성적 입력 완료"}
       description={"지원은 총 3번만 가능하며, 제출 완료 후 성적을 변경 하실 수 없습니다."}
       infoRows={infoRows}
@@ -98,4 +130,4 @@ const _ExamplePage = () => {
   );
 };
 
-export default SubmitResult;
+export default MobileSubmitResult;
diff --git a/apps/web/src/components/ui/EmptySdwBCards.stories.tsx b/apps/web/src/components/ui/EmptySdwBCards.stories.tsx
new file mode 100644
index 000000000..181e1cc17
--- /dev/null
+++ b/apps/web/src/components/ui/EmptySdwBCards.stories.tsx
@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import EmptySdwBCards from "./EmptySdwBCards";
+
+const meta = { title: "Common/EmptyCards", component: EmptySdwBCards } satisfies Meta<typeof EmptySdwBCards>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const SearchEmpty: Story = { args: { message: "검색 결과가 없어요. 다른 검색어를 입력해주세요." } };
diff --git a/apps/web/src/components/ui/Inputa.stories.tsx b/apps/web/src/components/ui/Inputa.stories.tsx
new file mode 100644
index 000000000..c30271d2e
--- /dev/null
+++ b/apps/web/src/components/ui/Inputa.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { Input } from "./Inputa";
+
+const meta = {
+  title: "Common/Input",
+  component: Input,
+  args: { "aria-label": "닉네임", placeholder: "닉네임을 입력하세요" },
+} satisfies Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const input = within(canvasElement).getByRole("textbox", { name: "닉네임" });
+    await userEvent.type(input, "예비 교환학생");
+    await expect(input).toHaveValue("예비 교환학생");
+  },
+};
+export const Gray: Story = { args: { variant: "gray" } };
+export const Disabled: Story = { args: { disabled: true, value: "수정할 수 없는 닉네임" } };
diff --git a/apps/web/src/components/ui/ProfileWithBadge.stories.tsx b/apps/web/src/components/ui/ProfileWithBadge.stories.tsx
new file mode 100644
index 000000000..64142aeab
--- /dev/null
+++ b/apps/web/src/components/ui/ProfileWithBadge.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, waitFor, within } from "storybook/test";
+import ProfileWithBadge from "./ProfileWithBadge";
+
+const meta = { title: "Common/Profile", component: ProfileWithBadge, args: { profileImageUrl: null } } satisfies Meta<
+  typeof ProfileWithBadge
+>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Mentee: Story = {
+  play: async ({ canvasElement }) => {
+    const image = within(canvasElement).getByRole("img", { name: "프로필 이미지" }) as HTMLImageElement;
+    await waitFor(() => expect(image.naturalWidth).toBeGreaterThan(0));
+  },
+};
+export const Mentor: Story = { args: { isMentor: true } };
+export const ChatSize: Story = { args: { isMentor: true, width: 32, height: 32 } };
diff --git a/apps/web/src/components/ui/Tab/Tab.stories.tsx b/apps/web/src/components/ui/Tab/Tab.stories.tsx
new file mode 100644
index 000000000..4a0c71a49
--- /dev/null
+++ b/apps/web/src/components/ui/Tab/Tab.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+import { expect, fn, userEvent, within } from "storybook/test";
+import Tab from "./index";
+
+const meta = {
+  title: "Common/Tab",
+  component: Tab,
+  args: { choices: ["공인어학", "학점"], choice: "공인어학", setChoice: fn() },
+} satisfies Meta<typeof Tab>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Interactive: Story = {
+  render: function InteractiveTab(args) {
+    const [choice, setChoice] = useState(args.choice);
+    return (
+      <>
+        <Tab {...args} choice={choice} setChoice={setChoice} />
+        <p role="status">선택한 탭: {choice}</p>
+      </>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "학점" }));
+    await expect(canvas.getByRole("status")).toHaveTextContent("선택한 탭: 학점");
+  },
+};
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/ui/UniverSityCard/index.tsx b/apps/web/src/components/ui/UniverSityCard/index.tsx
index aae63b2ac..9ad710e5c 100644
--- a/apps/web/src/components/ui/UniverSityCard/index.tsx
+++ b/apps/web/src/components/ui/UniverSityCard/index.tsx
@@ -34,8 +34,8 @@ const UniversityCard = ({ university, showCapacity = true, linkPrefix = "/univer
       aria-labelledby={`university-name-${university.id}`}
     >
       <div className="relative h-[91px] w-full overflow-hidden rounded-lg border border-solid border-k-100 hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10">
-        <div className="flex justify-between px-5 py-3.5">
-          <div className="flex gap-[23.5px]">
+        <div className="flex justify-between gap-2 px-5 py-3.5">
+          <div className="flex min-w-0 flex-1 gap-[23.5px]">
             <div className="flex flex-shrink-0 items-center">
               <Image
                 className="h-14 w-14 rounded-full object-cover"
@@ -47,7 +47,7 @@ const UniversityCard = ({ university, showCapacity = true, linkPrefix = "/univer
               />
             </div>
 
-            <div className="flex flex-col">
+            <div className="flex min-w-0 flex-1 flex-col">
               <span
                 id={`university-name-${university.id}`}
                 className="truncate text-k-700 typo-bold-4"
@@ -62,10 +62,13 @@ const UniversityCard = ({ university, showCapacity = true, linkPrefix = "/univer
                 {showCapacity && <span className="text-primary typo-sb-11">{capacityLabel}</span>}
               </div>
               <div className="flex gap-4">
-                {university.languageRequirements.slice(0, 3).map((requirement) => {
+                {university.languageRequirements.slice(0, 3).map((requirement, index) => {
                   const testName = shortenLanguageTestName(requirement.languageTestType);
                   return (
-                    <span key={requirement.languageTestType} className="whitespace-nowrap text-primary typo-sb-11">
+                    <span
+                      key={`${requirement.languageTestType}-${requirement.minScore}-${index}`}
+                      className="whitespace-nowrap text-primary typo-sb-11"
+                    >
                       {testName ?? requirement.languageTestType} {requirement.minScore}
                     </span>
                   );
@@ -73,7 +76,7 @@ const UniversityCard = ({ university, showCapacity = true, linkPrefix = "/univer
               </div>
             </div>
           </div>
-          <div className="flex items-center">
+          <div className="flex shrink-0 items-center">
             <CheveronRightFilled color="black" opacity="0.54" />
           </div>
         </div>
diff --git a/apps/web/src/components/university/UniversityCards/index.tsx b/apps/web/src/components/university/UniversityCards/index.tsx
index 879a99fce..d16f13825 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>
       ))}
diff --git a/apps/web/src/lib/chat/ChatSession.test.ts b/apps/web/src/lib/chat/ChatSession.test.ts
new file mode 100644
index 000000000..a4c21bda7
--- /dev/null
+++ b/apps/web/src/lib/chat/ChatSession.test.ts
@@ -0,0 +1,490 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { ChatHistoriesResponse } from "@/apis/chat";
+import type { ChatMessage } from "@/types/chat";
+import { ChatSession } from "./ChatSession";
+import type { ChatTransportEvents, OutgoingMessage } from "./types";
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason: unknown) => void;
+  const promise = new Promise<T>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+  return { promise, resolve, reject };
+}
+
+const message = (id: number, content = `메시지 ${id}`, senderId = 7): ChatMessage => ({
+  id,
+  content,
+  senderId,
+  createdAt: new Date(Date.UTC(2026, 9, 27, 0, 0, Math.abs(id))).toISOString(),
+  attachments: [],
+});
+
+const history = (content: ChatMessage[], nextPageNumber = -1): ChatHistoriesResponse => ({ content, nextPageNumber });
+
+async function settle() {
+  for (let turn = 0; turn < 20; turn += 1) await Promise.resolve();
+}
+
+const sessions: ChatSession[] = [];
+
+function createSession(initialOutgoing: OutgoingMessage[] = []) {
+  const events: ChatTransportEvents[] = [];
+  const transports: {
+    start: ReturnType<typeof vi.fn>;
+    stop: ReturnType<typeof vi.fn>;
+    reconnect: ReturnType<typeof vi.fn>;
+    publish: ReturnType<typeof vi.fn>;
+  }[] = [];
+  const loadHistory = vi
+    .fn<(page: number, signal: AbortSignal) => Promise<ChatHistoriesResponse>>()
+    .mockResolvedValue(history([]));
+  const markRead = vi.fn<(signal: AbortSignal) => Promise<void>>().mockResolvedValue(undefined);
+  const saveOutgoing = vi.fn<(outgoing: OutgoingMessage[]) => void>();
+  const onMessagesChanged = vi.fn();
+  const onRead = vi.fn();
+  const session = new ChatSession({
+    userId: 7,
+    loadHistory,
+    markRead,
+    saveOutgoing,
+    onMessagesChanged,
+    onRead,
+    initialOutgoing,
+    createTransport: (callbacks) => {
+      const transport = { start: vi.fn(), stop: vi.fn(), reconnect: vi.fn(), publish: vi.fn() };
+      events.push(callbacks);
+      transports.push(transport);
+      return transport;
+    },
+  });
+  sessions.push(session);
+  return { session, events, transports, loadHistory, markRead, saveOutgoing, onMessagesChanged, onRead };
+}
+
+afterEach(() => {
+  for (const session of sessions.splice(0)) session.stop();
+});
+
+describe("ChatSession history and connection lifecycle", () => {
+  it("keeps a live message received before the initial HTTP snapshot resolves", async () => {
+    const pending = deferred<ChatHistoriesResponse>();
+    const { session, events, loadHistory } = createSession();
+    loadHistory.mockReturnValueOnce(pending.promise);
+    session.start();
+    events[0].onMessage(message(2));
+    pending.resolve(history([message(1)]));
+    await settle();
+
+    expect(session.getSnapshot().messages.map((item) => item.id)).toEqual([1, 2]);
+    expect(session.getSnapshot().historyStatus).toBe("ready");
+  });
+
+  it("recovers the older-history cursor after an initial HTTP failure with live messages present", async () => {
+    const pending = deferred<ChatHistoriesResponse>();
+    const { session, events, loadHistory } = createSession();
+    loadHistory.mockReturnValueOnce(pending.promise);
+    session.start();
+    events[0].onMessage(message(3));
+    pending.reject(new Error("temporary network failure"));
+    await settle();
+    expect(session.getSnapshot().syncError).not.toBeNull();
+    loadHistory.mockResolvedValueOnce(history([message(3), message(2)], 2));
+
+    await session.syncLatest();
+    expect(session.getSnapshot().hasMore).toBe(true);
+    loadHistory.mockResolvedValueOnce(history([message(1)], -1));
+    await session.loadOlder();
+    expect(loadHistory.mock.calls.at(-1)?.[0]).toBe(2);
+    expect(session.getSnapshot().messages.map((item) => item.id)).toEqual([1, 2, 3]);
+  });
+
+  it("follows reconnect pages until an already observed server message closes the gap", async () => {
+    const { session, events, loadHistory } = createSession();
+    loadHistory.mockResolvedValueOnce(history([message(10), message(9)], 2));
+    session.start();
+    await settle();
+    loadHistory.mockClear();
+    loadHistory.mockImplementation(async (page) => {
+      const pages = new Map([
+        [1, history([message(16), message(15)], 2)],
+        [2, history([message(14), message(13)], 3)],
+        [3, history([message(12), message(11)], 4)],
+        [4, history([message(10), message(9)], 5)],
+      ]);
+      const result = pages.get(page);
+      if (!result) throw new Error(`Unexpected page ${page}`);
+      return result;
+    });
+
+    events[0].onConnected();
+    await settle();
+
+    expect(loadHistory.mock.calls.map(([page]) => page)).toEqual([1, 2, 3, 4]);
+    expect(session.getSnapshot().messages.map((item) => item.id)).toEqual([9, 10, 11, 12, 13, 14, 15, 16]);
+  });
+
+  it("recovers every reconnect page after the room was initially empty", async () => {
+    const { session, loadHistory } = createSession();
+    session.start();
+    await settle();
+    expect(session.getSnapshot().messages).toEqual([]);
+    expect(session.getSnapshot().hasMore).toBe(false);
+    loadHistory.mockClear();
+    const allMessages = Array.from({ length: 45 }, (_, index) => message(45 - index));
+    loadHistory.mockImplementation(async (page) => {
+      const offset = (page - 1) * 20;
+      return history(allMessages.slice(offset, offset + 20), page < 3 ? page + 1 : -1);
+    });
+
+    await session.syncLatest();
+
+    expect(loadHistory.mock.calls.map(([page]) => page)).toEqual([1, 2, 3]);
+    expect(session.getSnapshot().messages.map((item) => item.id)).toEqual(
+      Array.from({ length: 45 }, (_, index) => index + 1),
+    );
+    expect(session.getSnapshot().hasMore).toBe(false);
+  });
+
+  it("continues older history after catch-up pages even if an earlier older request finishes late", async () => {
+    const { session, loadHistory } = createSession();
+    loadHistory.mockResolvedValueOnce(history([message(10), message(9)], 2));
+    session.start();
+    await settle();
+    const pendingOlder = deferred<ChatHistoriesResponse>();
+    loadHistory.mockReturnValueOnce(pendingOlder.promise);
+    const loadingOlder = session.loadOlder();
+    loadHistory.mockImplementation(async (page) => {
+      const pages = new Map([
+        [1, history([message(16), message(15)], 2)],
+        [2, history([message(14), message(13)], 3)],
+        [3, history([message(12), message(11)], 4)],
+        [4, history([message(10), message(9)], 5)],
+        [5, history([message(8), message(7)], 6)],
+        [6, history([message(6), message(5)], 7)],
+      ]);
+      const result = pages.get(page);
+      if (!result) throw new Error(`Unexpected page ${page}`);
+      return result;
+    });
+
+    await session.syncLatest();
+    pendingOlder.resolve(history([message(8), message(7)], 3));
+    await loadingOlder;
+    loadHistory.mockClear();
+    await session.loadOlder();
+
+    expect(loadHistory.mock.calls.map(([page]) => page)).toEqual([5, 6]);
+    expect(session.getSnapshot().hasMore).toBe(true);
+    expect(session.getSnapshot().messages.map((item) => item.id)).toEqual([5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
+  });
+
+  it("keeps older history exhausted after reconnect when all old messages were already loaded", async () => {
+    const { session, loadHistory } = createSession();
+    loadHistory
+      .mockResolvedValueOnce(history([message(4), message(3)], 2))
+      .mockResolvedValueOnce(history([message(2), message(1)], -1));
+    session.start();
+    await settle();
+    await session.loadOlder();
+    expect(session.getSnapshot().hasMore).toBe(false);
+    loadHistory.mockImplementation(async (page) => {
+      if (page === 1) return history([message(8), message(7)], 2);
+      if (page === 2) return history([message(6), message(5)], 3);
+      return history([message(4), message(3)], 4);
+    });
+
+    await session.syncLatest();
+    expect(session.getSnapshot().hasMore).toBe(false);
+    expect(session.getSnapshot().messages.map((item) => item.id)).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
+    loadHistory.mockClear();
+    await session.loadOlder();
+    expect(loadHistory).not.toHaveBeenCalled();
+  });
+
+  it("closes the pre-subscription gap even when a newer live frame is already in the snapshot", async () => {
+    const initialRequest = deferred<ChatHistoriesResponse>();
+    const { session, events, loadHistory } = createSession();
+    loadHistory.mockReturnValueOnce(initialRequest.promise);
+    loadHistory.mockImplementation(async (page) => {
+      if (page === 1) return history([message(6), message(5)], 2);
+      if (page === 2) return history([message(4), message(3)], 3);
+      return history([message(2), message(1)], -1);
+    });
+    session.start();
+    events[0].onConnected();
+    events[0].onMessage(message(6));
+    initialRequest.resolve(history([message(2), message(1)], 2));
+    await settle();
+
+    expect(session.getSnapshot().messages.map((item) => item.id)).toEqual([1, 2, 3, 4, 5, 6]);
+    expect(loadHistory.mock.calls.map(([page]) => page)).toEqual([1, 1, 2, 3]);
+  });
+
+  it("ignores an aborted initial request and the old socket after start-stop-start", async () => {
+    const oldRequest = deferred<ChatHistoriesResponse>();
+    const { session, events, loadHistory, transports } = createSession();
+    loadHistory.mockReturnValueOnce(oldRequest.promise).mockResolvedValueOnce(history([message(2)]));
+    session.start();
+    const oldSignal = loadHistory.mock.calls[0][1];
+    session.stop();
+    session.start();
+    await settle();
+
+    oldRequest.resolve(history([message(1)]));
+    events[0].onMessage(message(3));
+    events[0].onConnection("error");
+    events[1].onConnection("connected");
+    await settle();
+
+    expect(oldSignal.aborted).toBe(true);
+    expect(transports[0].stop).toHaveBeenCalledOnce();
+    expect(transports[1].start).toHaveBeenCalledOnce();
+    expect(session.getSnapshot().messages.map((item) => item.id)).toEqual([2]);
+    expect(session.getSnapshot().connection).toBe("connected");
+  });
+});
+
+describe("ChatSession outgoing messages", () => {
+  it("keeps an unconfirmed restored send when a later identical send is echoed after history", async () => {
+    const original = createSession();
+    original.session.start();
+    await settle();
+    original.events[0].onConnection("connected");
+    original.session.publish({ content: "같은 내용", senderId: 7 });
+    const saved = original.session.getSnapshot().outgoing;
+    original.session.stop();
+
+    const { session, events, loadHistory } = createSession(saved);
+    session.start();
+    await settle();
+    events[0].onConnection("connected");
+    session.publish({ content: "같은 내용", senderId: 7 });
+    loadHistory.mockResolvedValue(history([message(1, "같은 내용")]));
+    await session.syncLatest();
+    events[0].onMessage(message(1, "같은 내용"));
+    expect(session.getSnapshot().outgoing).toEqual([{ ...saved[0], status: "unconfirmed" }]);
+    events[0].onMessage(message(1, "같은 내용"));
+    expect(session.getSnapshot().outgoing).toHaveLength(1);
+  });
+
+  it("confirms the first socket echo even when history already contains the delivery", async () => {
+    const { session, events, loadHistory } = createSession();
+    session.start();
+    await settle();
+    events[0].onConnection("connected");
+    session.publish({ content: "먼저 기록에 도착", senderId: 7 });
+    loadHistory.mockResolvedValue(history([message(1, "먼저 기록에 도착")]));
+    await session.syncLatest();
+    expect(session.getSnapshot().outgoing).toHaveLength(1);
+    session.publish({ content: "먼저 기록에 도착", senderId: 7 });
+
+    events[0].onMessage(message(1, "먼저 기록에 도착"));
+    expect(session.getSnapshot().outgoing).toHaveLength(1);
+    events[0].onMessage(message(1, "먼저 기록에 도착"));
+    expect(session.getSnapshot().outgoing).toHaveLength(1);
+    events[0].onMessage(message(2, "먼저 기록에 도착"));
+    expect(session.getSnapshot().outgoing).toEqual([]);
+  });
+
+  it("does not confirm a new send with an echo already present before publish", async () => {
+    const { session, events, loadHistory } = createSession();
+    loadHistory.mockResolvedValue(history([message(1, "같은 내용")]));
+    session.start();
+    await settle();
+    events[0].onConnection("connected");
+    session.publish({ content: "같은 내용", senderId: 7 });
+    events[0].onMessage(message(1, "같은 내용"));
+    expect(session.getSnapshot().outgoing).toHaveLength(1);
+    events[0].onMessage(message(2, "같은 내용"));
+    expect(session.getSnapshot().outgoing).toEqual([]);
+  });
+
+  it("consumes one identical outgoing message per new self echo and ignores duplicate frames", async () => {
+    const { session, events } = createSession();
+    session.start();
+    await settle();
+    events[0].onConnection("connected");
+    expect(session.publish({ content: "같은 내용", senderId: 7 })).toBe(true);
+    expect(session.publish({ content: "같은 내용", senderId: 7 })).toBe(true);
+    const secondClientId = session.getSnapshot().outgoing[1].clientId;
+
+    events[0].onMessage(message(1, "같은 내용"));
+    expect(session.getSnapshot().outgoing.map((item) => item.clientId)).toEqual([secondClientId]);
+    events[0].onMessage(message(1, "같은 내용"));
+    expect(session.getSnapshot().outgoing.map((item) => item.clientId)).toEqual([secondClientId]);
+    events[0].onMessage(message(2, "같은 내용", 9));
+    expect(session.getSnapshot().outgoing).toHaveLength(1);
+    events[0].onMessage(message(3, "같은 내용"));
+    expect(session.getSnapshot().outgoing).toEqual([]);
+  });
+
+  it("keeps sends unconfirmed when an echo has no server ID and never automatically republishes", async () => {
+    vi.useFakeTimers();
+    const { session, events, transports } = createSession();
+    session.start();
+    await settle();
+    events[0].onConnection("connected");
+    session.publish({ content: "확인 필요", senderId: 7 });
+    events[0].onMessage(message(-1, "확인 필요"));
+    expect(session.getSnapshot().outgoing).toHaveLength(1);
+
+    await vi.advanceTimersByTimeAsync(15000);
+    expect(session.getSnapshot().outgoing[0].status).toBe("unconfirmed");
+    expect(transports[0].publish).toHaveBeenCalledOnce();
+  });
+
+  it("returns false on publish failure and removes only that attempted outgoing item", async () => {
+    const { session, events, transports } = createSession();
+    session.start();
+    await settle();
+    events[0].onConnection("connected");
+    session.publish({ content: "먼저 전송", senderId: 7 });
+    const previous = session.getSnapshot().outgoing;
+    transports[0].publish.mockImplementationOnce(() => {
+      throw new Error("socket closed");
+    });
+
+    expect(session.publish({ content: "입력 유지", senderId: 7 })).toBe(false);
+    expect(session.getSnapshot().outgoing).toEqual(previous);
+  });
+
+  it("restores a saved outgoing item as unconfirmed and blocks late uploads after stop", async () => {
+    const { session, events, saveOutgoing, transports } = createSession();
+    session.start();
+    await settle();
+    events[0].onConnection("connected");
+    session.publish({ content: "보관할 원문", senderId: 7 });
+    const upload = deferred<string[]>();
+    const uploadFn = vi.fn().mockReturnValue(upload.promise);
+    const sending = session.sendImages([new File(["image"], "photo.png", { type: "image/png" })], uploadFn);
+    session.stop();
+    upload.resolve(["https://cdn.example.com/photo.png"]);
+
+    await expect(sending).resolves.toBe(false);
+    expect(transports[0].publish).toHaveBeenCalledOnce();
+    expect(uploadFn.mock.calls[0][1].aborted).toBe(true);
+    const saved = saveOutgoing.mock.calls.at(-1)?.[0] ?? [];
+    const restored = createSession(saved).session.getSnapshot().outgoing;
+    expect(restored).toHaveLength(1);
+    expect(restored[0]).toMatchObject({ content: "보관할 원문", status: "unconfirmed" });
+  });
+});
+
+describe("ChatSession read batching", () => {
+  it("coalesces messages, pauses while hidden and follows messages received during a read", async () => {
+    vi.useFakeTimers();
+    const pendingRead = deferred<void>();
+    const { session, events, markRead, onRead } = createSession();
+    markRead.mockReturnValueOnce(pendingRead.promise);
+    session.start();
+    await settle();
+    events[0].onMessage(message(1));
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(markRead).not.toHaveBeenCalled();
+
+    session.setReading(true);
+    events[0].onMessage(message(2));
+    events[0].onMessage(message(3));
+    await vi.advanceTimersByTimeAsync(300);
+    expect(markRead).toHaveBeenCalledOnce();
+    events[0].onMessage(message(4));
+    pendingRead.resolve();
+    await settle();
+    await vi.advanceTimersByTimeAsync(300);
+    expect(markRead).toHaveBeenCalledTimes(2);
+    expect(onRead).toHaveBeenCalledTimes(2);
+
+    session.setReading(false);
+    events[0].onMessage(message(5));
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(markRead).toHaveBeenCalledTimes(2);
+    session.setReading(true);
+    await vi.advanceTimersByTimeAsync(300);
+    expect(markRead).toHaveBeenCalledTimes(3);
+  });
+
+  it("does not notify or mutate the snapshot when a stopped read finishes late", async () => {
+    vi.useFakeTimers();
+    const pendingRead = deferred<void>();
+    const { session, markRead, onRead } = createSession();
+    markRead.mockReturnValueOnce(pendingRead.promise);
+    session.start();
+    await settle();
+    session.setReading(true);
+    await vi.advanceTimersByTimeAsync(300);
+    const signal = markRead.mock.calls[0][0];
+    session.stop();
+    const stoppedSnapshot = session.getSnapshot();
+    pendingRead.resolve();
+    await settle();
+
+    expect(signal.aborted).toBe(true);
+    expect(onRead).not.toHaveBeenCalled();
+    expect(session.getSnapshot()).toBe(stoppedSnapshot);
+  });
+});
+
+describe("ChatSession access revocation", () => {
+  it.each([403, 404])("stops and erases the timeline when older history is rejected with %s", async (status) => {
+    const { session, events, loadHistory, transports } = createSession();
+    loadHistory.mockResolvedValueOnce(history([message(1)], 2));
+    session.start();
+    await settle();
+    events[0].onConnection("connected");
+    const signal = loadHistory.mock.calls[0][1];
+    loadHistory.mockRejectedValueOnce({ response: { status } });
+
+    await session.loadOlder();
+    events[0].onMessage(message(2));
+    expect(session.getSnapshot()).toMatchObject({
+      accessDenied: true,
+      messages: [],
+      connection: "error",
+      historyStatus: "error",
+      hasMore: false,
+    });
+    expect(signal.aborted).toBe(true);
+    expect(transports[0].stop).toHaveBeenCalledOnce();
+    expect(session.publish({ content: "차단할 전송", senderId: 7 })).toBe(false);
+  });
+
+  it.each([403, 404])("stops and erases the timeline when a read is rejected with %s", async (status) => {
+    vi.useFakeTimers();
+    const { session, events, loadHistory, markRead, transports, onRead } = createSession();
+    loadHistory.mockResolvedValueOnce(history([message(1)]));
+    markRead.mockRejectedValueOnce({ response: { status } });
+    session.start();
+    await settle();
+    events[0].onConnection("connected");
+    session.setReading(true);
+
+    await vi.advanceTimersByTimeAsync(300);
+    events[0].onMessage(message(2));
+    expect(session.getSnapshot()).toMatchObject({ accessDenied: true, messages: [], connection: "error" });
+    expect(markRead.mock.calls[0][0].aborted).toBe(true);
+    expect(transports[0].stop).toHaveBeenCalledOnce();
+    expect(onRead).not.toHaveBeenCalled();
+    expect(session.publish({ content: "차단할 전송", senderId: 7 })).toBe(false);
+  });
+});
+
+describe("ChatSession reading state after a temporary pause", () => {
+  it("resumes read updates without requiring another scroll event", async () => {
+    vi.useFakeTimers();
+    const { session, markRead } = createSession();
+    session.setReading(true);
+    session.start();
+    await settle();
+    await vi.advanceTimersByTimeAsync(300);
+    expect(markRead).toHaveBeenCalledOnce();
+    session.stop();
+    session.start();
+    await settle();
+    await vi.advanceTimersByTimeAsync(300);
+    expect(markRead).toHaveBeenCalledTimes(2);
+    vi.useRealTimers();
+  });
+});
diff --git a/apps/web/src/lib/chat/ChatSession.ts b/apps/web/src/lib/chat/ChatSession.ts
new file mode 100644
index 000000000..9c0c6c46a
--- /dev/null
+++ b/apps/web/src/lib/chat/ChatSession.ts
@@ -0,0 +1,415 @@
+import type { ChatHistoriesResponse } from "@/apis/chat";
+import type { ChatMessage } from "@/types/chat";
+import { getMessageKey, mergeMessages } from "./messages";
+import type { ChatPayload, ChatSnapshot, ChatTransport, ChatTransportEvents, OutgoingMessage } from "./types";
+
+interface ChatSessionOptions {
+  userId: number;
+  loadHistory(page: number, signal: AbortSignal): Promise<ChatHistoriesResponse>;
+  markRead(signal: AbortSignal): Promise<void>;
+  createTransport(events: ChatTransportEvents): ChatTransport;
+  initialOutgoing?: OutgoingMessage[];
+  saveOutgoing(messages: OutgoingMessage[]): void;
+  onMessagesChanged(): void;
+  onRead(): void;
+  confirmationTimeoutMs?: number;
+}
+
+const getErrorMessage = (error: unknown) => {
+  const status = (error as { response?: { status?: number } })?.response?.status;
+  if (status === 403 || status === 404) return "이 채팅방에 접근할 수 없습니다.";
+  return "메시지를 불러오지 못했어요. 다시 시도해주세요.";
+};
+
+const imageKey = (url: string) => {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return url;
+  }
+};
+
+// One owner for a room's timeline. HTTP pages and socket events only merge into this snapshot.
+export class ChatSession {
+  private snapshot: ChatSnapshot;
+  private readonly listeners = new Set<() => void>();
+  private transport: ChatTransport | null = null;
+  private controller: AbortController | null = null;
+  private generation = 0;
+  private nextOlderPage: number | null = null;
+  private reading = false;
+  private readVersion = 0;
+  private lastReadVersion = -1;
+  private readInFlight = false;
+  private readTimer: ReturnType<typeof setTimeout> | null = null;
+  private readonly confirmationTimers = new Map<string, ReturnType<typeof setTimeout>>();
+  private syncPromise: Promise<void> | null = null;
+  private resyncRequested = false;
+  private readonly synchronizedKeys = new Set<string>();
+  private readonly receivedSocketKeys = new Set<string>();
+  private readonly confirmationBaselines = new Map<string, Set<string>>();
+  private hasSynchronizedHistory = false;
+
+  constructor(private readonly options: ChatSessionOptions) {
+    this.snapshot = {
+      messages: [],
+      outgoing: (options.initialOutgoing ?? []).map((item) => ({ ...item, status: "unconfirmed" })),
+      connection: "connecting",
+      historyStatus: "loading",
+      historyError: null,
+      syncError: null,
+      olderError: null,
+      isSyncing: false,
+      isLoadingOlder: false,
+      hasMore: false,
+      accessDenied: false,
+      readError: false,
+    };
+  }
+
+  getSnapshot = () => this.snapshot;
+
+  subscribe = (listener: () => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  private update(patch: Partial<ChatSnapshot>) {
+    this.snapshot = { ...this.snapshot, ...patch };
+    for (const listener of this.listeners) listener();
+  }
+
+  private updateOutgoing(outgoing: OutgoingMessage[]) {
+    const activeIds = new Set(outgoing.map((item) => item.clientId));
+    for (const id of this.confirmationBaselines.keys()) {
+      if (!activeIds.has(id)) this.confirmationBaselines.delete(id);
+    }
+    this.options.saveOutgoing(outgoing);
+    this.update({ outgoing });
+  }
+
+  private isCurrent(generation: number) {
+    return this.controller !== null && !this.controller.signal.aborted && this.generation === generation;
+  }
+
+  private denyAccess() {
+    this.stop();
+    this.update({
+      accessDenied: true,
+      connection: "error",
+      messages: [],
+      hasMore: false,
+      historyStatus: "error",
+      historyError: "이 채팅방에 접근할 수 없습니다.",
+      syncError: null,
+    });
+  }
+
+  private isAccessError(error: unknown) {
+    const status = (error as { response?: { status?: number } })?.response?.status;
+    return status === 403 || status === 404;
+  }
+
+  start() {
+    if (this.controller) return;
+    const generation = ++this.generation;
+    this.controller = new AbortController();
+    this.update({ connection: "connecting", accessDenied: false });
+    this.transport = this.options.createTransport({
+      onConnection: (connection) => {
+        if (this.isCurrent(generation)) this.update({ connection });
+      },
+      onConnected: () => {
+        if (this.isCurrent(generation)) void this.syncLatest();
+      },
+      onMessage: (message) => {
+        if (this.isCurrent(generation)) this.receive(message);
+      },
+    });
+    this.transport.start();
+    void this.syncLatest();
+  }
+
+  stop() {
+    this.generation += 1;
+    this.controller?.abort();
+    this.controller = null;
+    this.transport?.stop();
+    this.transport = null;
+    this.syncPromise = null;
+    this.resyncRequested = false;
+    this.readInFlight = false;
+    if (this.readTimer) clearTimeout(this.readTimer);
+    this.readTimer = null;
+    for (const timer of this.confirmationTimers.values()) clearTimeout(timer);
+    this.confirmationTimers.clear();
+    this.updateOutgoing(this.snapshot.outgoing.map((item) => ({ ...item, status: "unconfirmed" })));
+    this.update({ connection: "disconnected", isSyncing: false, isLoadingOlder: false });
+  }
+
+  reconnect = () => {
+    if (this.snapshot.accessDenied) return;
+    this.transport?.reconnect();
+  };
+
+  syncLatest = (): Promise<void> => {
+    if (!this.controller || this.snapshot.accessDenied) return Promise.resolve();
+    if (this.syncPromise) {
+      // The subscription may become ready after the initial HTTP snapshot was taken.
+      this.resyncRequested = true;
+      return this.syncPromise;
+    }
+    const generation = this.generation;
+    const signal = this.controller.signal;
+    // Live messages can arrive across a gap. Only a completed HTTP sync is an overlap boundary.
+    const previouslySeen = new Set(this.synchronizedKeys);
+    const initialLoad = !this.hasSynchronizedHistory;
+    this.update({ isSyncing: true, historyError: null, syncError: null });
+
+    const request = async () => {
+      try {
+        let page = 1;
+        const visited = new Set<number>();
+        const fetchedKeys = new Set<string>();
+        let followingPage = -1;
+        while (true) {
+          if (visited.has(page)) throw new Error("반복되는 채팅 페이지입니다.");
+          visited.add(page);
+          const result = await this.options.loadHistory(page, signal);
+          if (!this.isCurrent(generation)) return;
+          followingPage = result.nextPageNumber;
+          const reachedKnownMessage = result.content.some((message) => previouslySeen.has(getMessageKey(message)));
+          for (const message of result.content) fetchedKeys.add(getMessageKey(message));
+          this.update({ messages: mergeMessages(this.snapshot.messages, result.content), historyStatus: "ready" });
+          if (initialLoad && page === 1)
+            this.nextOlderPage = result.nextPageNumber === -1 ? null : result.nextPageNumber;
+          if (result.nextPageNumber === -1) {
+            this.nextOlderPage = null;
+            break;
+          }
+          if ((initialLoad && previouslySeen.size === 0) || reachedKnownMessage) break;
+          if (!Number.isSafeInteger(result.nextPageNumber) || result.nextPageNumber <= page) {
+            throw new Error("잘못된 채팅 페이지입니다.");
+          }
+          page = result.nextPageNumber;
+        }
+        if (!initialLoad && this.nextOlderPage !== null && followingPage !== -1) {
+          this.nextOlderPage = Math.max(this.nextOlderPage, followingPage);
+        }
+        for (const key of fetchedKeys) this.synchronizedKeys.add(key);
+        this.hasSynchronizedHistory = true;
+        this.update({ hasMore: this.nextOlderPage !== null });
+        this.readVersion += 1;
+        this.queueRead();
+        this.options.onMessagesChanged();
+      } catch (error) {
+        if (!this.isCurrent(generation)) return;
+        if (this.isAccessError(error)) {
+          this.denyAccess();
+          return;
+        }
+        const hasMessages = this.snapshot.messages.length > 0;
+        this.update({
+          historyStatus: hasMessages ? "ready" : "error",
+          historyError: hasMessages ? null : getErrorMessage(error),
+          syncError: hasMessages ? getErrorMessage(error) : null,
+        });
+      } finally {
+        if (this.isCurrent(generation)) {
+          this.syncPromise = null;
+          this.update({ isSyncing: false });
+          if (this.resyncRequested) {
+            this.resyncRequested = false;
+            void this.syncLatest();
+          }
+        }
+      }
+    };
+    this.syncPromise = request();
+    return this.syncPromise;
+  };
+
+  loadOlder = async () => {
+    if (!this.controller || this.nextOlderPage === null || this.snapshot.isLoadingOlder || this.snapshot.accessDenied)
+      return;
+    const generation = this.generation;
+    let page = this.nextOlderPage;
+    this.update({ isLoadingOlder: true, olderError: null });
+    try {
+      while (true) {
+        const result = await this.options.loadHistory(page, this.controller.signal);
+        if (!this.isCurrent(generation)) return;
+        if (result.nextPageNumber !== -1 && result.nextPageNumber <= page) throw new Error("잘못된 채팅 페이지입니다.");
+        const knownKeys = new Set(this.snapshot.messages.map(getMessageKey));
+        const hasNewMessages = result.content.some((message) => !knownKeys.has(getMessageKey(message)));
+        this.nextOlderPage =
+          result.nextPageNumber === -1 || this.nextOlderPage === null
+            ? null
+            : Math.max(this.nextOlderPage, result.nextPageNumber);
+        this.update({
+          messages: mergeMessages(this.snapshot.messages, result.content),
+          hasMore: this.nextOlderPage !== null,
+        });
+        if (hasNewMessages || this.nextOlderPage === null) break;
+        // Offset pages can overlap after new arrivals. One click continues until older messages are found.
+        page = this.nextOlderPage;
+      }
+    } catch (error) {
+      if (!this.isCurrent(generation)) return;
+      if (this.isAccessError(error)) this.denyAccess();
+      else this.update({ olderError: getErrorMessage(error) });
+    } finally {
+      if (this.isCurrent(generation)) this.update({ isLoadingOlder: false });
+    }
+  };
+
+  private receive(message: ChatMessage) {
+    const key = getMessageKey(message);
+    const isDuplicate = this.snapshot.messages.some((existing) => getMessageKey(existing) === key);
+    const firstSocketDelivery = !this.receivedSocketKeys.has(key);
+    this.receivedSocketKeys.add(key);
+    this.update({ messages: mergeMessages(this.snapshot.messages, [message]) });
+    // History can arrive before the first echo. Only socket replays have already consumed a confirmation.
+    if (firstSocketDelivery && message.id > 0 && message.senderId === this.options.userId)
+      this.confirmOutgoing(message);
+    if (!isDuplicate) {
+      this.readVersion += 1;
+      this.queueRead();
+      this.options.onMessagesChanged();
+    }
+  }
+
+  private confirmOutgoing(message: ChatMessage) {
+    const imageUrls = message.attachments.filter((item) => item.isImage).map((item) => imageKey(item.url));
+    const index = this.snapshot.outgoing.findIndex((item) => {
+      // Restored outbox items have no proof tying a new echo to their original send.
+      const baseline = this.confirmationBaselines.get(item.clientId);
+      if (!baseline || baseline.has(getMessageKey(message))) return false;
+      if (item.imageUrls.length > 0) return item.remainingImageUrls.some((url) => imageUrls.includes(imageKey(url)));
+      return imageUrls.length === 0 && item.content.trim() === message.content.trim();
+    });
+    if (index === -1) return;
+    const outgoing = [...this.snapshot.outgoing];
+    const item = outgoing[index];
+    const remainingImageUrls = item.remainingImageUrls.filter((url) => !imageUrls.includes(imageKey(url)));
+    if (remainingImageUrls.length > 0) {
+      outgoing[index] = { ...item, remainingImageUrls };
+    } else {
+      const timer = this.confirmationTimers.get(item.clientId);
+      if (timer) clearTimeout(timer);
+      this.confirmationTimers.delete(item.clientId);
+      outgoing.splice(index, 1);
+    }
+    this.updateOutgoing(outgoing);
+  }
+
+  publish = (payload: ChatPayload): boolean => {
+    if (!this.controller || this.snapshot.accessDenied || this.snapshot.connection !== "connected") return false;
+    if ("content" in payload && !payload.content.trim()) return false;
+    if ("imageUrls" in payload && payload.imageUrls.length === 0) return false;
+    const clientId = crypto.randomUUID();
+    const outgoing: OutgoingMessage = {
+      clientId,
+      content: "content" in payload ? payload.content : "",
+      imageUrls: "imageUrls" in payload ? [...payload.imageUrls] : [],
+      remainingImageUrls: "imageUrls" in payload ? [...payload.imageUrls] : [],
+      senderId: this.options.userId,
+      createdAt: new Date().toISOString(),
+      status: "pending",
+    };
+    this.confirmationBaselines.set(clientId, new Set(this.snapshot.messages.map(getMessageKey)));
+    this.updateOutgoing([...this.snapshot.outgoing, outgoing]);
+    try {
+      if (!this.transport) throw new Error("연결이 없습니다.");
+      this.transport.publish(payload);
+      if (this.snapshot.outgoing.some((item) => item.clientId === clientId)) {
+        this.confirmationTimers.set(
+          clientId,
+          setTimeout(() => {
+            this.confirmationTimers.delete(clientId);
+            this.updateOutgoing(
+              this.snapshot.outgoing.map((item) =>
+                item.clientId === clientId ? { ...item, status: "unconfirmed" } : item,
+              ),
+            );
+          }, this.options.confirmationTimeoutMs ?? 15000),
+        );
+      }
+      return true;
+    } catch {
+      this.updateOutgoing(this.snapshot.outgoing.filter((item) => item.clientId !== clientId));
+      return false;
+    }
+  };
+
+  sendImages = async (
+    files: File[],
+    upload: (files: File[], signal: AbortSignal) => Promise<string[]>,
+  ): Promise<boolean> => {
+    if (!this.controller || this.snapshot.connection !== "connected" || this.snapshot.accessDenied) return false;
+    const generation = this.generation;
+    const urls = await upload(files, this.controller.signal);
+    // An upload belongs to the room and login session in which it started.
+    if (!this.isCurrent(generation)) return false;
+    if (urls.length !== files.length || urls.some((url) => !url))
+      throw new Error("이미지 업로드 결과를 확인할 수 없습니다.");
+    return this.publish({ imageUrls: urls });
+  };
+
+  dismissOutgoing = (clientId: string) => {
+    const timer = this.confirmationTimers.get(clientId);
+    if (timer) clearTimeout(timer);
+    this.confirmationTimers.delete(clientId);
+    this.updateOutgoing(this.snapshot.outgoing.filter((item) => item.clientId !== clientId));
+  };
+
+  setReading = (reading: boolean) => {
+    this.reading = reading;
+    if (reading) this.queueRead();
+  };
+
+  retryRead = () => {
+    this.update({ readError: false });
+    this.queueRead();
+  };
+
+  private queueRead() {
+    if (
+      !this.controller ||
+      !this.reading ||
+      this.snapshot.historyStatus !== "ready" ||
+      this.snapshot.accessDenied ||
+      this.readInFlight ||
+      this.readTimer ||
+      this.lastReadVersion === this.readVersion
+    )
+      return;
+    const generation = this.generation;
+    this.readTimer = setTimeout(() => {
+      this.readTimer = null;
+      void this.flushRead(generation);
+    }, 300);
+  }
+
+  private async flushRead(generation: number) {
+    if (!this.isCurrent(generation) || !this.reading || !this.controller) return;
+    const version = this.readVersion;
+    this.readInFlight = true;
+    try {
+      await this.options.markRead(this.controller.signal);
+      if (!this.isCurrent(generation)) return;
+      this.lastReadVersion = version;
+      this.update({ readError: false });
+      this.options.onRead();
+    } catch (error) {
+      if (!this.isCurrent(generation)) return;
+      if (this.isAccessError(error)) this.denyAccess();
+      else this.update({ readError: true });
+    } finally {
+      if (this.isCurrent(generation)) {
+        this.readInFlight = false;
+        if (!this.snapshot.readError) this.queueRead();
+      }
+    }
+  }
+}
diff --git a/apps/web/src/lib/chat/messages.ts b/apps/web/src/lib/chat/messages.ts
new file mode 100644
index 000000000..08203f8e9
--- /dev/null
+++ b/apps/web/src/lib/chat/messages.ts
@@ -0,0 +1,35 @@
+import type { ChatMessage } from "@/types/chat";
+
+export const getMessageKey = (message: ChatMessage): string => {
+  if (message.id > 0) return `id:${message.id}`;
+
+  return `message:${JSON.stringify([
+    message.senderId,
+    message.createdAt,
+    message.content,
+    message.attachments.map((attachment) => [
+      attachment.id,
+      attachment.isImage,
+      attachment.url,
+      attachment.thumbnailUrl,
+      attachment.createdAt,
+    ]),
+  ])}`;
+};
+
+export const mergeMessages = (existing: readonly ChatMessage[], incoming: readonly ChatMessage[]): ChatMessage[] => {
+  const messagesByKey = new Map<string, ChatMessage>();
+
+  for (const message of existing) messagesByKey.set(getMessageKey(message), message);
+  for (const message of incoming) messagesByKey.set(getMessageKey(message), message);
+
+  return [...messagesByKey.values()].sort((first, second) => {
+    const timeDifference = Date.parse(first.createdAt) - Date.parse(second.createdAt);
+    if (timeDifference !== 0) return timeDifference;
+
+    const idDifference = first.id - second.id;
+    if (idDifference !== 0) return idDifference;
+
+    return getMessageKey(first).localeCompare(getMessageKey(second));
+  });
+};
diff --git a/apps/web/src/lib/chat/stompTransport.test.ts b/apps/web/src/lib/chat/stompTransport.test.ts
new file mode 100644
index 000000000..fb608530b
--- /dev/null
+++ b/apps/web/src/lib/chat/stompTransport.test.ts
@@ -0,0 +1,183 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createStompTransport } from "./stompTransport";
+import type { ChatTransport } from "./types";
+
+interface MockClient {
+  options: { webSocketFactory(): unknown };
+  connected: boolean;
+  beforeConnect?: () => Promise<void>;
+  onConnect?: () => void;
+  onWebSocketClose?: () => void;
+  onStompError?: () => void;
+  subscriptions: Map<string, (frame: { body: string }) => void>;
+  activate: ReturnType<typeof vi.fn>;
+  deactivate: ReturnType<typeof vi.fn>;
+  publish: ReturnType<typeof vi.fn>;
+}
+
+const { clients, socketFactory } = vi.hoisted(() => ({
+  clients: [] as MockClient[],
+  socketFactory: vi.fn(function createSocket(url: string) {
+    return { url };
+  }),
+}));
+
+vi.mock("sockjs-client", () => ({ default: socketFactory }));
+vi.mock("@stomp/stompjs", () => ({
+  Client: class {
+    connected = false;
+    subscriptions = new Map<string, (frame: { body: string }) => void>();
+    activate = vi.fn();
+    deactivate = vi.fn(async () => {
+      this.connected = false;
+    });
+    publish = vi.fn();
+    constructor(public options: { webSocketFactory(): unknown }) {
+      clients.push(this);
+    }
+    subscribe(destination: string, callback: (frame: { body: string }) => void) {
+      this.subscriptions.set(destination, callback);
+      return { unsubscribe: vi.fn() };
+    }
+  },
+}));
+
+const transports: ChatTransport[] = [];
+
+function createTransport(getAccessToken = vi.fn<() => Promise<string | null>>().mockResolvedValue("first token")) {
+  const onConnection = vi.fn();
+  const onConnected = vi.fn();
+  const onMessage = vi.fn();
+  const transport = createStompTransport({ roomId: 42, getAccessToken, onConnection, onConnected, onMessage });
+  transports.push(transport);
+  return { transport, getAccessToken, onConnection, onConnected, onMessage };
+}
+
+beforeEach(() => {
+  clients.splice(0);
+  socketFactory.mockClear();
+  vi.stubEnv("NEXT_PUBLIC_API_SERVER_URL", "https://api.example.com/");
+  vi.spyOn(window.navigator, "onLine", "get").mockReturnValue(true);
+});
+
+afterEach(() => {
+  for (const transport of transports.splice(0)) transport.stop();
+  vi.unstubAllEnvs();
+});
+
+describe("STOMP transport lifecycle", () => {
+  it("obtains a fresh token before every connect and encodes it in the SockJS URL", async () => {
+    const { transport, getAccessToken, onConnection, onConnected } = createTransport();
+    getAccessToken.mockResolvedValueOnce("first token").mockResolvedValueOnce("new/token?");
+    transport.start();
+    transport.start();
+    expect(clients).toHaveLength(1);
+    const client = clients[0];
+    await client.beforeConnect?.();
+    client.options.webSocketFactory();
+    client.connected = true;
+    client.onConnect?.();
+    await client.beforeConnect?.();
+    client.options.webSocketFactory();
+
+    expect(getAccessToken).toHaveBeenCalledTimes(2);
+    expect(socketFactory.mock.calls.map(([url]) => url)).toEqual([
+      "https://api.example.com/connect?token=first%20token",
+      "https://api.example.com/connect?token=new%2Ftoken%3F",
+    ]);
+    expect(onConnected).toHaveBeenCalledOnce();
+    expect(onConnection.mock.calls.map(([state]) => state)).toEqual(["connecting", "connected", "reconnecting"]);
+  });
+
+  it("rejects a stopped socket factory when token acquisition resolves late", async () => {
+    let resolveToken!: (token: string) => void;
+    const getAccessToken = vi.fn(
+      () =>
+        new Promise<string>((resolve) => {
+          resolveToken = resolve;
+        }),
+    );
+    const { transport, onConnection, onConnected, onMessage } = createTransport(getAccessToken);
+    transport.start();
+    const client = clients[0];
+    const connecting = client.beforeConnect?.();
+    transport.stop();
+    resolveToken("late token");
+    await connecting;
+    client.onConnect?.();
+
+    expect(() => client.options.webSocketFactory()).toThrow("채팅 연결이 종료되었습니다.");
+    expect(client.deactivate).toHaveBeenCalledOnce();
+    expect(socketFactory).not.toHaveBeenCalled();
+    expect(onConnected).not.toHaveBeenCalled();
+    expect(onMessage).not.toHaveBeenCalled();
+    expect(onConnection.mock.calls.map(([state]) => state)).toEqual(["connecting"]);
+  });
+
+  it("disposes offline connections and removes online listeners when stopped", () => {
+    const online = vi.spyOn(window.navigator, "onLine", "get").mockReturnValue(true);
+    const addListener = vi.spyOn(window, "addEventListener");
+    const removeListener = vi.spyOn(window, "removeEventListener");
+    const { transport, onConnection } = createTransport();
+    transport.start();
+    online.mockReturnValue(false);
+    window.dispatchEvent(new Event("offline"));
+    expect(clients[0].deactivate).toHaveBeenCalledOnce();
+    expect(onConnection).toHaveBeenLastCalledWith("offline");
+
+    online.mockReturnValue(true);
+    window.dispatchEvent(new Event("online"));
+    expect(clients).toHaveLength(2);
+    transport.stop();
+    window.dispatchEvent(new Event("online"));
+    expect(clients).toHaveLength(2);
+    for (const type of ["offline", "online"]) {
+      const added = addListener.mock.calls.find(([eventType]) => eventType === type);
+      expect(removeListener).toHaveBeenCalledWith(type, added?.[1]);
+    }
+  });
+
+  it("ignores malformed frames and callbacks belonging to a replaced connection", async () => {
+    const { transport, onMessage } = createTransport();
+    transport.start();
+    const original = clients[0];
+    await original.beforeConnect?.();
+    original.onConnect?.();
+    const callback = original.subscriptions.get("/topic/chat/42");
+    callback?.({ body: "{" });
+    callback?.({ body: "null" });
+    callback?.({ body: JSON.stringify({ id: 1, content: "안녕", senderId: 7, createdAt: "2026-10-27T00:00:00Z" }) });
+    expect(onMessage).toHaveBeenCalledOnce();
+
+    transport.reconnect();
+    callback?.({
+      body: JSON.stringify({ id: 2, content: "늦은 메시지", senderId: 7, createdAt: "2026-10-27T00:00:01Z" }),
+    });
+    original.onConnect?.();
+    expect(onMessage).toHaveBeenCalledOnce();
+  });
+
+  it("publishes only while connected and never replays a message on reconnect", async () => {
+    const { transport } = createTransport();
+    expect(() => transport.publish({ content: "보관", senderId: 7 })).toThrow();
+    transport.start();
+    const client = clients[0];
+    await client.beforeConnect?.();
+    client.connected = true;
+    client.onConnect?.();
+    transport.publish({ content: "텍스트", senderId: 7 });
+    transport.publish({ imageUrls: ["https://cdn.example.com/image.png"] });
+    expect(client.publish.mock.calls.map(([payload]) => payload)).toEqual([
+      { destination: "/publish/chat/42", body: JSON.stringify({ content: "텍스트", senderId: 7 }) },
+      {
+        destination: "/publish/chat/42/image",
+        body: JSON.stringify({ imageUrls: ["https://cdn.example.com/image.png"] }),
+      },
+    ]);
+    transport.reconnect();
+    expect(clients[1].publish).not.toHaveBeenCalled();
+    transport.stop();
+    expect(() => transport.publish({ content: "보관", senderId: 7 })).toThrow();
+  });
+});
diff --git a/apps/web/src/lib/chat/stompTransport.ts b/apps/web/src/lib/chat/stompTransport.ts
new file mode 100644
index 000000000..df8ac1e1a
--- /dev/null
+++ b/apps/web/src/lib/chat/stompTransport.ts
@@ -0,0 +1,128 @@
+import { Client } from "@stomp/stompjs";
+import SockJS from "sockjs-client";
+import { parseChatMessage } from "@/apis/chat/normalize";
+import type { ChatPayload, ChatTransport, ChatTransportEvents } from "./types";
+
+interface StompTransportOptions extends ChatTransportEvents {
+  roomId: number;
+  getAccessToken(): Promise<string | null>;
+}
+
+// Every reconnect obtains a new token. No message is replayed by the transport.
+export const createStompTransport = (options: StompTransportOptions): ChatTransport => {
+  let current: Client | null = null;
+  let running = false;
+  let generation = 0;
+  let hasConnected = false;
+
+  const disposeClient = () => {
+    generation += 1;
+    const previous = current;
+    current = null;
+    if (previous) void previous.deactivate();
+  };
+
+  const connect = () => {
+    disposeClient();
+    if (!running) return;
+    if (!navigator.onLine) {
+      options.onConnection("offline");
+      return;
+    }
+
+    const connectionGeneration = generation;
+    let token = "";
+    const isCurrent = () => running && connectionGeneration === generation;
+    const client = new Client({
+      webSocketFactory: () => {
+        if (!isCurrent() || !token) throw new Error("채팅 연결이 종료되었습니다.");
+        const apiUrl = process.env.NEXT_PUBLIC_API_SERVER_URL;
+        if (!apiUrl) throw new Error("채팅 서버 주소를 확인할 수 없습니다.");
+        return new SockJS(`${apiUrl.replace(/\/$/, "")}/connect?token=${encodeURIComponent(token)}`);
+      },
+      connectionTimeout: 10000,
+      reconnectDelay: 3000,
+      heartbeatIncoming: 20000,
+      heartbeatOutgoing: 20000,
+    });
+
+    client.beforeConnect = async () => {
+      if (!isCurrent()) return;
+      options.onConnection(hasConnected ? "reconnecting" : "connecting");
+      try {
+        const latestToken = await options.getAccessToken();
+        if (!isCurrent()) return;
+        if (!latestToken) throw new Error("로그인이 필요합니다.");
+        token = latestToken;
+      } catch {
+        if (!isCurrent()) return;
+        options.onConnection("error");
+        disposeClient();
+      }
+    };
+
+    client.onConnect = () => {
+      if (!isCurrent()) return;
+      hasConnected = true;
+      client.subscribe(`/topic/chat/${options.roomId}`, (frame) => {
+        if (!isCurrent()) return;
+        try {
+          const message = parseChatMessage(JSON.parse(frame.body));
+          if (message) options.onMessage(message);
+        } catch {
+          // A malformed frame must not tear down a working subscription.
+        }
+      });
+      options.onConnection("connected");
+      options.onConnected();
+    };
+    client.onWebSocketClose = () => {
+      if (isCurrent()) options.onConnection(navigator.onLine ? "reconnecting" : "offline");
+    };
+    client.onWebSocketError = () => {
+      if (isCurrent()) options.onConnection(navigator.onLine ? "reconnecting" : "offline");
+    };
+    client.onStompError = () => {
+      if (!isCurrent()) return;
+      options.onConnection("error");
+      // Broker errors require an explicit retry instead of an endless reconnect loop.
+      disposeClient();
+    };
+    current = client;
+    client.activate();
+  };
+
+  const onOffline = () => {
+    disposeClient();
+    if (running) options.onConnection("offline");
+  };
+  const onOnline = () => connect();
+
+  return {
+    start() {
+      if (running) return;
+      running = true;
+      window.addEventListener("offline", onOffline);
+      window.addEventListener("online", onOnline);
+      connect();
+    },
+    stop() {
+      running = false;
+      window.removeEventListener("offline", onOffline);
+      window.removeEventListener("online", onOnline);
+      disposeClient();
+    },
+    reconnect() {
+      if (running) connect();
+    },
+    publish(payload: ChatPayload) {
+      if (!running || !current?.connected || !navigator.onLine) {
+        throw new Error("채팅 연결을 확인해주세요. 입력한 내용은 보관됩니다.");
+      }
+      current.publish({
+        destination: `/publish/chat/${options.roomId}${"imageUrls" in payload ? "/image" : ""}`,
+        body: JSON.stringify(payload),
+      });
+    },
+  };
+};
diff --git a/apps/web/src/lib/chat/types.ts b/apps/web/src/lib/chat/types.ts
new file mode 100644
index 000000000..c99d9603b
--- /dev/null
+++ b/apps/web/src/lib/chat/types.ts
@@ -0,0 +1,43 @@
+import type { ChatMessage } from "@/types/chat";
+
+export type ChatConnection = "connecting" | "connected" | "reconnecting" | "offline" | "error" | "disconnected";
+
+export type OutgoingMessage = {
+  clientId: string;
+  content: string;
+  imageUrls: string[];
+  remainingImageUrls: string[];
+  senderId: number;
+  createdAt: string;
+  status: "pending" | "unconfirmed";
+};
+
+export type ChatSnapshot = {
+  messages: ChatMessage[];
+  outgoing: OutgoingMessage[];
+  connection: ChatConnection;
+  historyStatus: "loading" | "ready" | "error";
+  historyError: string | null;
+  syncError: string | null;
+  olderError: string | null;
+  isSyncing: boolean;
+  isLoadingOlder: boolean;
+  hasMore: boolean;
+  accessDenied: boolean;
+  readError: boolean;
+};
+
+export type ChatPayload = { content: string; senderId: number } | { imageUrls: string[] };
+
+export interface ChatTransport {
+  start(): void;
+  stop(): void;
+  reconnect(): void;
+  publish(payload: ChatPayload): void;
+}
+
+export interface ChatTransportEvents {
+  onConnection(state: ChatConnection): void;
+  onConnected(): void;
+  onMessage(message: ChatMessage): void;
+}
diff --git a/apps/web/src/lib/chat/useChatScroll.test.tsx b/apps/web/src/lib/chat/useChatScroll.test.tsx
new file mode 100644
index 000000000..047522395
--- /dev/null
+++ b/apps/web/src/lib/chat/useChatScroll.test.tsx
@@ -0,0 +1,160 @@
+// @vitest-environment jsdom
+import { act, fireEvent, render, screen } from "@testing-library/react/pure";
+import { beforeEach, expect, it, vi } from "vitest";
+import type { ChatMessage } from "@/types/chat";
+import { getMessageKey } from "./messages";
+import { useChatScroll } from "./useChatScroll";
+
+interface Geometry {
+  scrollTop: number;
+  extraHeight: number;
+}
+
+const resizeCallbacks: Array<() => void> = [];
+
+beforeEach(() => {
+  resizeCallbacks.length = 0;
+  vi.spyOn(document, "visibilityState", "get").mockReturnValue("visible");
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      constructor(callback: () => void) {
+        resizeCallbacks.push(callback);
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  );
+});
+
+const messages = (from: number, to: number): ChatMessage[] =>
+  Array.from({ length: to - from + 1 }, (_, index) => ({
+    id: from + index,
+    senderId: 2,
+    content: `메시지 ${from + index}`,
+    createdAt: new Date(Date.UTC(2026, 9, 27, 0, 0, from + index)).toISOString(),
+    attachments: [],
+  }));
+
+const Harness = ({
+  items,
+  geometry,
+  setReading,
+  isLoadingOlder = false,
+}: {
+  items: ChatMessage[];
+  geometry: Geometry;
+  setReading: (reading: boolean) => void;
+  isLoadingOlder?: boolean;
+}) => {
+  const scroll = useChatScroll({ messages: items, outgoingCount: 0, isLoadingOlder, setReading });
+
+  return (
+    <>
+      <button type="button" onClick={scroll.captureAnchor}>
+        이전 기록 준비
+      </button>
+      <div
+        data-testid="scroll-container"
+        onScroll={scroll.onScroll}
+        ref={(element) => {
+          scroll.containerRef.current = element;
+          if (!element) return;
+          Object.defineProperties(element, {
+            scrollHeight: { configurable: true, get: () => items.length * 100 + geometry.extraHeight },
+            clientHeight: { configurable: true, get: () => 300 },
+            scrollTop: {
+              configurable: true,
+              get: () => geometry.scrollTop,
+              set: (value: number) => {
+                geometry.scrollTop = Math.max(0, Math.min(value, items.length * 100 + geometry.extraHeight - 300));
+              },
+            },
+          });
+          element.getBoundingClientRect = () => new DOMRect(0, 0, 300, 300);
+        }}
+      >
+        <div ref={scroll.contentRef}>
+          {items.map((message, index) => (
+            <div
+              key={getMessageKey(message)}
+              data-message-key={getMessageKey(message)}
+              ref={(element) => {
+                if (element)
+                  element.getBoundingClientRect = () => new DOMRect(0, index * 100 - geometry.scrollTop, 300, 100);
+              }}
+            >
+              {message.content}
+            </div>
+          ))}
+        </div>
+      </div>
+      {scroll.hasNewMessages && (
+        <button type="button" onClick={scroll.scrollToBottom}>
+          새 메시지 보기
+        </button>
+      )}
+    </>
+  );
+};
+
+it("opens at the newest message and follows delayed content growth only while at the bottom", () => {
+  const geometry = { scrollTop: 0, extraHeight: 0 };
+  const setReading = vi.fn();
+  const { unmount } = render(<Harness items={messages(1, 10)} geometry={geometry} setReading={setReading} />);
+  expect(geometry.scrollTop).toBe(700);
+  expect(setReading).toHaveBeenLastCalledWith(true);
+
+  geometry.extraHeight = 150;
+  act(() => {
+    resizeCallbacks[0]();
+  });
+  expect(geometry.scrollTop).toBe(850);
+  unmount();
+  expect(setReading).toHaveBeenLastCalledWith(false);
+});
+
+it("preserves the history reader's position on new incoming messages and offers a jump to latest", () => {
+  const geometry = { scrollTop: 0, extraHeight: 0 };
+  const setReading = vi.fn();
+  const { rerender } = render(<Harness items={messages(1, 10)} geometry={geometry} setReading={setReading} />);
+  geometry.scrollTop = 200;
+  fireEvent.scroll(screen.getByTestId("scroll-container"));
+  expect(setReading).toHaveBeenLastCalledWith(false);
+
+  rerender(<Harness items={messages(1, 11)} geometry={geometry} setReading={setReading} />);
+  expect(geometry.scrollTop).toBe(200);
+  expect(screen.getByRole("button", { name: "새 메시지 보기" })).toBeTruthy();
+  geometry.extraHeight = 100;
+  act(() => {
+    resizeCallbacks[0]();
+  });
+  expect(geometry.scrollTop).toBe(200);
+
+  fireEvent.click(screen.getByRole("button", { name: "새 메시지 보기" }));
+  expect(geometry.scrollTop).toBe(900);
+  expect(screen.queryByRole("button", { name: "새 메시지 보기" })).toBeNull();
+  expect(setReading).toHaveBeenLastCalledWith(true);
+});
+
+it("keeps the same visible message offset when older history is prepended and releases its anchor afterwards", () => {
+  const geometry = { scrollTop: 0, extraHeight: 0 };
+  const setReading = vi.fn();
+  const { rerender } = render(<Harness items={messages(11, 20)} geometry={geometry} setReading={setReading} />);
+  geometry.scrollTop = 250;
+  fireEvent.scroll(screen.getByTestId("scroll-container"));
+  const offsetBefore = screen.getByText("메시지 13").getBoundingClientRect().top;
+  fireEvent.click(screen.getByRole("button", { name: "이전 기록 준비" }));
+  rerender(<Harness items={messages(11, 20)} geometry={geometry} setReading={setReading} isLoadingOlder />);
+  expect(geometry.scrollTop).toBe(250);
+
+  rerender(<Harness items={messages(1, 20)} geometry={geometry} setReading={setReading} />);
+  expect(geometry.scrollTop).toBe(1250);
+  expect(screen.getByText("메시지 13").getBoundingClientRect().top).toBe(offsetBefore);
+  expect(screen.queryByRole("button", { name: "새 메시지 보기" })).toBeNull();
+
+  rerender(<Harness items={messages(1, 21)} geometry={geometry} setReading={setReading} />);
+  expect(geometry.scrollTop).toBe(1250);
+  expect(screen.getByRole("button", { name: "새 메시지 보기" })).toBeTruthy();
+});
diff --git a/apps/web/src/lib/chat/useChatScroll.ts b/apps/web/src/lib/chat/useChatScroll.ts
new file mode 100644
index 000000000..66458c3f1
--- /dev/null
+++ b/apps/web/src/lib/chat/useChatScroll.ts
@@ -0,0 +1,110 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { ChatMessage } from "@/types/chat";
+import { getMessageKey } from "./messages";
+
+interface ScrollOptions {
+  messages: ChatMessage[];
+  outgoingCount: number;
+  isLoadingOlder: boolean;
+  setReading(reading: boolean): void;
+}
+
+const BOTTOM_THRESHOLD_PX = 80;
+
+export const useChatScroll = ({ messages, outgoingCount, isLoadingOlder, setReading }: ScrollOptions) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const atBottomRef = useRef(true);
+  const initializedRef = useRef(false);
+  const previousLastKeyRef = useRef<string | null>(null);
+  const previousOutgoingCountRef = useRef(outgoingCount);
+  const anchorRef = useRef<{ key: string; offset: number } | null>(null);
+  const [hasNewMessages, setHasNewMessages] = useState(false);
+
+  const updateReading = useCallback(() => {
+    setReading(document.visibilityState === "visible" && atBottomRef.current);
+  }, [setReading]);
+
+  const scrollToBottom = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.scrollTop = container.scrollHeight;
+    atBottomRef.current = true;
+    setHasNewMessages(false);
+    updateReading();
+  }, [updateReading]);
+
+  const onScroll = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    atBottomRef.current = container.scrollHeight - container.scrollTop - container.clientHeight < BOTTOM_THRESHOLD_PX;
+    if (atBottomRef.current) setHasNewMessages(false);
+    updateReading();
+  }, [updateReading]);
+
+  const captureAnchor = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const top = container.getBoundingClientRect().top;
+    const visible = Array.from(container.querySelectorAll<HTMLElement>("[data-message-key]")).find(
+      (element) => element.getBoundingClientRect().bottom > top,
+    );
+    if (visible?.dataset.messageKey) {
+      anchorRef.current = { key: visible.dataset.messageKey, offset: visible.getBoundingClientRect().top - top };
+    }
+  }, []);
+
+  useLayoutEffect(
+    function maintainMessagePosition() {
+      const container = containerRef.current;
+      if (!container) return;
+      const lastKey = messages.length > 0 ? getMessageKey(messages[messages.length - 1]) : null;
+      const newLastMessage = lastKey !== previousLastKeyRef.current;
+      const hasNewOutgoing = outgoingCount > previousOutgoingCountRef.current;
+
+      if (anchorRef.current) {
+        const anchor = anchorRef.current;
+        const element = Array.from(container.querySelectorAll<HTMLElement>("[data-message-key]")).find(
+          (item) => item.dataset.messageKey === anchor.key,
+        );
+        if (element)
+          container.scrollTop +=
+            element.getBoundingClientRect().top - container.getBoundingClientRect().top - anchor.offset;
+        if (!isLoadingOlder) anchorRef.current = null;
+      } else if ((!initializedRef.current && messages.length > 0) || hasNewOutgoing || atBottomRef.current) {
+        scrollToBottom();
+      } else if (newLastMessage) {
+        setHasNewMessages(true);
+      }
+
+      if (messages.length > 0) initializedRef.current = true;
+      previousLastKeyRef.current = lastKey;
+      previousOutgoingCountRef.current = outgoingCount;
+    },
+    [isLoadingOlder, messages, outgoingCount, scrollToBottom],
+  );
+
+  useEffect(
+    function observeMessageSize() {
+      const content = contentRef.current;
+      if (!content) return;
+      // Image layout changes should keep the bottom pinned only while the reader is already there.
+      const observer = new ResizeObserver(() => {
+        if (atBottomRef.current && !anchorRef.current) scrollToBottom();
+      });
+      observer.observe(content);
+      document.addEventListener("visibilitychange", updateReading);
+      updateReading();
+      return function disconnectMessageSizeObserver() {
+        observer.disconnect();
+        document.removeEventListener("visibilitychange", updateReading);
+        setReading(false);
+      };
+    },
+    [scrollToBottom, setReading, updateReading],
+  );
+
+  return { containerRef, contentRef, onScroll, captureAnchor, scrollToBottom, hasNewMessages };
+};
diff --git a/apps/web/src/lib/chat/useChatSession.test.tsx b/apps/web/src/lib/chat/useChatSession.test.tsx
new file mode 100644
index 000000000..44fefcca1
--- /dev/null
+++ b/apps/web/src/lib/chat/useChatSession.test.tsx
@@ -0,0 +1,162 @@
+// @vitest-environment jsdom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react/pure";
+import type { ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ChatHistoriesResponse } from "@/apis/chat";
+import { chatKeys } from "@/apis/chat/queryKeys";
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import type { ChatTransportEvents } from "./types";
+import { useChatSession } from "./useChatSession";
+
+const { loadHistory, markRead, uploadImages, events, transports } = vi.hoisted(() => ({
+  loadHistory: vi.fn<() => Promise<ChatHistoriesResponse>>(),
+  markRead: vi.fn<() => Promise<void>>(),
+  uploadImages: vi.fn<() => Promise<string[]>>(),
+  events: [] as ChatTransportEvents[],
+  transports: [] as {
+    start: ReturnType<typeof vi.fn>;
+    stop: ReturnType<typeof vi.fn>;
+    publish: ReturnType<typeof vi.fn>;
+  }[],
+}));
+
+vi.mock("@/apis/chat", async () => ({
+  chatApi: { getChatHistories: loadHistory, putReadChatRoom: markRead },
+  ...(await import("@/apis/chat/queryKeys")),
+  ...(await import("@/apis/chat/auth")),
+}));
+vi.mock("@/apis/image-upload/api", () => ({ imageUploadApi: { postUploadChatImages: uploadImages } }));
+vi.mock("@/utils/axiosInstance", () => ({ getValidAccessToken: vi.fn(async () => "token") }));
+vi.mock("./stompTransport", () => ({
+  createStompTransport: (callbacks: ChatTransportEvents) => {
+    const transport = { start: vi.fn(), stop: vi.fn(), publish: vi.fn(), reconnect: vi.fn() };
+    events.push(callbacks);
+    transports.push(transport);
+    return transport;
+  },
+}));
+
+function setup(strict = false) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  }
+  function render(roomId: number, userId = 7, enabled = true) {
+    return renderHook((props) => useChatSession(props.roomId, props.userId, props.enabled), {
+      initialProps: { roomId, userId, enabled },
+      wrapper: Wrapper,
+      reactStrictMode: strict,
+    });
+  }
+  return { queryClient, render };
+}
+
+beforeEach(() => {
+  const tokenPayload = btoa(JSON.stringify({ sub: 7, role: "MENTOR", exp: Math.floor(Date.now() / 1000) + 3600 }));
+  useAuthStore.getState().setAccessToken(`header.${tokenPayload}.signature`);
+  events.splice(0);
+  transports.splice(0);
+  loadHistory.mockReset().mockResolvedValue({ content: [], nextPageNumber: -1 });
+  markRead.mockReset().mockResolvedValue(undefined);
+  uploadImages.mockReset().mockResolvedValue([]);
+});
+
+afterEach(() => {
+  useAuthStore.getState().clearAccessToken();
+});
+
+describe("useChatSession boundaries", () => {
+  it("waits for authentication gating and stops when the gate closes", async () => {
+    const { render } = setup();
+    const hook = render(42, 7, false);
+    expect(loadHistory).not.toHaveBeenCalled();
+    expect(transports).toHaveLength(0);
+
+    hook.rerender({ roomId: 42, userId: 7, enabled: true });
+    await waitFor(() => expect(hook.result.current.snapshot.historyStatus).toBe("ready"));
+    expect(loadHistory).toHaveBeenCalledOnce();
+    expect(transports[0].start).toHaveBeenCalledOnce();
+    hook.rerender({ roomId: 42, userId: 7, enabled: false });
+    expect(transports[0].stop).toHaveBeenCalledOnce();
+    expect(hook.result.current.snapshot.connection).toBe("disconnected");
+  });
+
+  it("survives React StrictMode's effect replay and ignores the disposed connection", async () => {
+    const { render } = setup(true);
+    const hook = render(42);
+    await waitFor(() => expect(hook.result.current.snapshot.historyStatus).toBe("ready"));
+    expect(transports).toHaveLength(2);
+    expect(transports[0].stop).toHaveBeenCalledOnce();
+    expect(transports[1].start).toHaveBeenCalledOnce();
+
+    act(() => {
+      events[0].onConnection("error");
+      events[0].onMessage({
+        id: 1,
+        content: "늦은 이벤트",
+        senderId: 8,
+        createdAt: "2026-10-27T00:00:00Z",
+        attachments: [],
+      });
+      events[1].onConnection("connected");
+      events[1].onMessage({
+        id: 2,
+        content: "현재 이벤트",
+        senderId: 8,
+        createdAt: "2026-10-27T00:00:01Z",
+        attachments: [],
+      });
+    });
+    expect(hook.result.current.snapshot.messages.map((message) => message.id)).toEqual([2]);
+    expect(hook.result.current.snapshot.connection).toBe("connected");
+  });
+
+  it("restores unconfirmed original content on room revisit and isolates it by room and user", async () => {
+    const { queryClient, render } = setup();
+    const first = render(42);
+    await waitFor(() => expect(first.result.current.snapshot.historyStatus).toBe("ready"));
+    act(() => events[0].onConnection("connected"));
+    await act(async () => {
+      await expect(first.result.current.sendText("전송 원문")).resolves.toBe(true);
+    });
+    expect(first.result.current.snapshot.outgoing).toHaveLength(1);
+    first.unmount();
+
+    const revisited = render(42);
+    expect(revisited.result.current.snapshot.outgoing).toHaveLength(1);
+    expect(revisited.result.current.snapshot.outgoing[0]).toMatchObject({
+      content: "전송 원문",
+      status: "unconfirmed",
+    });
+    expect(queryClient.getQueryData(chatKeys.outbox(7, 42))).toEqual(revisited.result.current.snapshot.outgoing);
+    const anotherRoom = render(43);
+    const anotherUser = render(42, 8);
+    expect(anotherRoom.result.current.snapshot.outgoing).toEqual([]);
+    expect(anotherUser.result.current.snapshot.outgoing).toEqual([]);
+    revisited.unmount();
+    anotherRoom.unmount();
+    anotherUser.unmount();
+    queryClient.clear();
+  });
+
+  it("does not recreate private outbox data when cleanup runs after logout clears the cache", async () => {
+    const { queryClient, render } = setup();
+    const hook = render(42);
+    await waitFor(() => expect(hook.result.current.snapshot.historyStatus).toBe("ready"));
+    act(() => events[0].onConnection("connected"));
+    await act(async () => {
+      await hook.result.current.sendText("로그아웃 시 제거할 원문");
+    });
+    expect(queryClient.getQueryData(chatKeys.outbox(7, 42))).toHaveLength(1);
+
+    act(() => {
+      useAuthStore.getState().clearAccessToken();
+      queryClient.removeQueries({ queryKey: chatKeys.all });
+    });
+    hook.rerender({ roomId: 42, userId: 7, enabled: false });
+    hook.unmount();
+    expect(queryClient.getQueryData(chatKeys.outbox(7, 42))).toBeUndefined();
+    queryClient.clear();
+  });
+});
diff --git a/apps/web/src/lib/chat/useChatSession.ts b/apps/web/src/lib/chat/useChatSession.ts
new file mode 100644
index 000000000..78bcdd3fb
--- /dev/null
+++ b/apps/web/src/lib/chat/useChatSession.ts
@@ -0,0 +1,67 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { chatApi, chatKeys } from "@/apis/chat";
+import { imageUploadApi } from "@/apis/image-upload/api";
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import { getValidAccessToken } from "@/utils/axiosInstance";
+import { tokenParse } from "@/utils/jwtUtils";
+import { ChatSession } from "./ChatSession";
+import { createStompTransport } from "./stompTransport";
+import type { OutgoingMessage } from "./types";
+
+export const useChatSession = (roomId: number, userId: number, enabled: boolean) => {
+  const queryClient = useQueryClient();
+  const session = useMemo(
+    () =>
+      new ChatSession({
+        userId,
+        loadHistory: (page, signal) => chatApi.getChatHistories({ roomId, page, signal }),
+        markRead: (signal) => chatApi.putReadChatRoom(roomId, signal),
+        createTransport: (events) => createStompTransport({ roomId, getAccessToken: getValidAccessToken, ...events }),
+        initialOutgoing: queryClient.getQueryData<OutgoingMessage[]>(chatKeys.outbox(userId, roomId)),
+        saveOutgoing: (outgoing) => {
+          const auth = useAuthStore.getState();
+          if (auth.isAuthenticated && Number(tokenParse(auth.accessToken)?.sub) === userId) {
+            queryClient.setQueryData(chatKeys.outbox(userId, roomId), outgoing);
+          }
+        },
+        onMessagesChanged: () => {
+          void queryClient.invalidateQueries({ queryKey: chatKeys.rooms(userId) });
+        },
+        onRead: () => {
+          void queryClient.invalidateQueries({ queryKey: chatKeys.rooms(userId) });
+        },
+      }),
+    [queryClient, roomId, userId],
+  );
+  const snapshot = useSyncExternalStore(session.subscribe, session.getSnapshot, session.getSnapshot);
+
+  useEffect(
+    function manageRoomSession() {
+      // Unconfirmed sends survive route changes in memory and are cleared with the login cache.
+      queryClient.setQueryDefaults(chatKeys.outbox(userId, roomId), { gcTime: Infinity });
+      if (!enabled) return;
+      session.start();
+      const synchronizeVisibleRoom = () => {
+        if (document.visibilityState === "visible") void session.syncLatest();
+      };
+      window.addEventListener("focus", synchronizeVisibleRoom);
+      document.addEventListener("visibilitychange", synchronizeVisibleRoom);
+      return function stopRoomSession() {
+        window.removeEventListener("focus", synchronizeVisibleRoom);
+        document.removeEventListener("visibilitychange", synchronizeVisibleRoom);
+        session.stop();
+      };
+    },
+    [enabled, queryClient, roomId, session, userId],
+  );
+
+  return {
+    session,
+    snapshot,
+    sendText: async (content: string) => session.publish({ content: content.trim(), senderId: userId }),
+    sendImages: (files: File[]) => session.sendImages(files, imageUploadApi.postUploadChatImages),
+  };
+};
diff --git a/apps/web/src/lib/web-socket/useConnectWebSocket.ts b/apps/web/src/lib/web-socket/useConnectWebSocket.ts
deleted file mode 100644
index 0949dba09..000000000
--- a/apps/web/src/lib/web-socket/useConnectWebSocket.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { Client } from "@stomp/stompjs";
-import { type InfiniteData, useQueryClient } from "@tanstack/react-query";
-import type { MutableRefObject } from "react";
-import { useEffect, useState } from "react";
-import SockJS from "sockjs-client";
-import { type ChatHistoriesResponse, ChatQueryKeys } from "@/apis/chat/api";
-import { normalizeChatMessage, type RawChatMessage } from "@/apis/chat/normalize";
-
-import { type ChatMessage, ConnectionStatus } from "@/types/chat";
-import { isTokenExpired } from "@/utils/jwtUtils";
-import useAuthStore from "../zustand/useAuthStore";
-
-interface UseConnectWebSocketProps {
-  roomId: number | null;
-  clientRef: MutableRefObject<Client | null>;
-}
-
-interface UseConnectWebSocketReturn {
-  connectionStatus: ConnectionStatus;
-  submittedMessages: ChatMessage[];
-  setSubmittedMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
-}
-
-const NEXT_PUBLIC_API_SERVER_URL = process.env.NEXT_PUBLIC_API_SERVER_URL;
-
-const getMessageCacheKey = (message: ChatMessage) => {
-  if (message.id !== 0) return `id:${message.id}`;
-
-  const attachmentKey = message.attachments
-    .map((attachment) => `${attachment.isImage ? "image" : "file"}:${attachment.url}:${attachment.createdAt}`)
-    .join(",");
-
-  return `fallback:${message.senderId}:${message.createdAt}:${message.content}:${attachmentKey}`;
-};
-
-const appendMessageToChatHistories = (
-  oldData: InfiniteData<ChatHistoriesResponse, number> | undefined,
-  message: ChatMessage,
-) => {
-  if (!oldData || oldData.pages.length === 0) return oldData;
-
-  const messageKey = getMessageCacheKey(message);
-  const hasMessage = oldData.pages.some((page) =>
-    page.content.some((cachedMessage) => getMessageCacheKey(cachedMessage) === messageKey),
-  );
-
-  if (hasMessage) return oldData;
-
-  return {
-    ...oldData,
-    pages: oldData.pages.map((page, index) =>
-      index === 0
-        ? {
-            ...page,
-            content: [...page.content, message],
-          }
-        : page,
-    ),
-  };
-};
-
-const useConnectWebSocket = ({ roomId, clientRef }: UseConnectWebSocketProps): UseConnectWebSocketReturn => {
-  // Hook 내부에서 연결 상태를 직접 관리
-  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(ConnectionStatus.Disconnected);
-  const [submittedMessages, setSubmittedMessages] = useState<ChatMessage[]>([]);
-  const queryClient = useQueryClient();
-  const accessToken = useAuthStore((state) => state.accessToken);
-  const isInitialized = useAuthStore((state) => state.isInitialized);
-  const hasValidAccessToken = Boolean(accessToken && !isTokenExpired(accessToken));
-
-  useEffect(() => {
-    if (!roomId) {
-      setConnectionStatus(ConnectionStatus.Disconnected);
-      return;
-    }
-
-    if (!isInitialized || !hasValidAccessToken) {
-      setConnectionStatus(ConnectionStatus.Pending);
-      return;
-    }
-
-    const connect = async () => {
-      setConnectionStatus(ConnectionStatus.Pending); // 연결 시도 중 상태로 설정
-      const token = accessToken;
-
-      try {
-        const client = new Client({
-          webSocketFactory: () => new SockJS(`${NEXT_PUBLIC_API_SERVER_URL}/connect?token=${token}`),
-          // ...existing code...
-          heartbeatIncoming: 50000,
-          heartbeatOutgoing: 50000,
-          reconnectDelay: 50000,
-        });
-
-        client.onConnect = () => {
-          setConnectionStatus(ConnectionStatus.Connected);
-          client.subscribe(`/topic/chat/${roomId}`, (message) => {
-            try {
-              const receivedMessage = normalizeChatMessage(JSON.parse(message.body) as RawChatMessage);
-
-              if (!receivedMessage.createdAt || Number.isNaN(new Date(receivedMessage.createdAt).getTime())) {
-                receivedMessage.createdAt = new Date().toISOString();
-              }
-
-              queryClient.setQueryData<InfiniteData<ChatHistoriesResponse, number>>(
-                [ChatQueryKeys.chatHistories, roomId],
-                (oldData) => appendMessageToChatHistories(oldData, receivedMessage),
-              );
-              queryClient.invalidateQueries({ queryKey: [ChatQueryKeys.chatRooms], refetchType: "none" });
-              setSubmittedMessages((prev) => [...prev, receivedMessage]);
-            } catch (error) {}
-          });
-        };
-
-        client.onStompError = (frame) => {
-          setConnectionStatus(ConnectionStatus.Error);
-        };
-
-        client.onDisconnect = () => {
-          setConnectionStatus(ConnectionStatus.Disconnected);
-        };
-
-        client.activate();
-        clientRef.current = client;
-      } catch (error) {
-        setConnectionStatus(ConnectionStatus.Error);
-      }
-    };
-
-    connect();
-
-    // Clean-up 함수
-    return () => {
-      if (clientRef.current?.active) {
-        clientRef.current.deactivate();
-      }
-      clientRef.current = null;
-    };
-  }, [roomId, clientRef, accessToken, hasValidAccessToken, isInitialized, queryClient]);
-
-  // 관리하는 connectionStatus를 반환
-  return { connectionStatus, submittedMessages, setSubmittedMessages };
-};
-
-export default useConnectWebSocket;
diff --git a/apps/web/src/lib/zustand/useAuthStore.ts b/apps/web/src/lib/zustand/useAuthStore.ts
index b07a63375..46d4fd2d3 100644
--- a/apps/web/src/lib/zustand/useAuthStore.ts
+++ b/apps/web/src/lib/zustand/useAuthStore.ts
@@ -17,7 +17,7 @@ const parseHomeUniversityId = (homeUniversity: string | undefined): number | nul
   return Number.isInteger(homeUniversityId) && homeUniversityId > 0 ? homeUniversityId : null;
 };
 
-type RefreshStatus = "idle" | "refreshing" | "success" | "failed";
+type RefreshStatus = "idle" | "refreshing" | "success" | "retryable" | "failed";
 type ClientRole = UserRole.MENTOR | UserRole.MENTEE;
 
 const parseAuthToken = (token: string | null) => {
@@ -48,7 +48,23 @@ const resolveClientRole = (serverRole: UserRole | null, currentClientRole: Clien
   return null;
 };
 
+const authenticatedTokenState = (token: string, clientRole: ClientRole | null) => {
+  const { serverRole, homeUniversityId } = parseAuthToken(token);
+  return {
+    accessToken: token,
+    serverRole,
+    clientRole: resolveClientRole(serverRole, clientRole),
+    homeUniversityId,
+    isAuthenticated: true,
+    isLoading: false,
+    isInitialized: true,
+    refreshStatus: "success" as const,
+    shouldAttemptRefresh: true,
+  };
+};
+
 interface AuthState {
+  sessionVersion: number;
   accessToken: string | null;
   serverRole: UserRole | null;
   clientRole: ClientRole | null;
@@ -59,6 +75,7 @@ interface AuthState {
   refreshStatus: RefreshStatus;
   shouldAttemptRefresh: boolean;
   setAccessToken: (token: string) => void;
+  setRefreshedAccessToken: (token: string, expectedSessionVersion: number) => void;
   clearAccessToken: () => void;
   setClientRole: (role: ClientRole) => void;
   setLoading: (loading: boolean) => void;
@@ -69,6 +86,7 @@ interface AuthState {
 const useAuthStore = create<AuthState>()(
   persist(
     (set) => ({
+      sessionVersion: 0,
       accessToken: null,
       serverRole: null,
       clientRole: null,
@@ -80,25 +98,21 @@ const useAuthStore = create<AuthState>()(
       shouldAttemptRefresh: false,
 
       setAccessToken: (token) => {
-        set((state) => {
-          const { serverRole, homeUniversityId } = parseAuthToken(token);
-
-          return {
-            accessToken: token,
-            serverRole,
-            clientRole: resolveClientRole(serverRole, state.clientRole),
-            homeUniversityId,
-            isAuthenticated: true,
-            isLoading: false,
-            isInitialized: true,
-            refreshStatus: "success",
-            shouldAttemptRefresh: true,
-          };
-        });
+        set((state) => ({
+          ...authenticatedTokenState(token, state.clientRole),
+          sessionVersion: state.sessionVersion + 1,
+        }));
+      },
+
+      setRefreshedAccessToken: (token, expectedSessionVersion) => {
+        set((state) =>
+          state.sessionVersion === expectedSessionVersion ? authenticatedTokenState(token, state.clientRole) : {},
+        );
       },
 
       clearAccessToken: () => {
-        set({
+        set((state) => ({
+          sessionVersion: state.sessionVersion + 1,
           accessToken: null,
           serverRole: null,
           clientRole: null,
@@ -108,7 +122,7 @@ const useAuthStore = create<AuthState>()(
           isInitialized: true,
           refreshStatus: "idle",
           shouldAttemptRefresh: false,
-        });
+        }));
       },
 
       setClientRole: (role) => {
diff --git a/apps/web/src/test/setup.ts b/apps/web/src/test/setup.ts
new file mode 100644
index 000000000..f141e23f6
--- /dev/null
+++ b/apps/web/src/test/setup.ts
@@ -0,0 +1,11 @@
+import { cleanup } from "@testing-library/react/pure";
+import { afterEach, vi } from "vitest";
+
+if (typeof document !== "undefined") {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+}
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
diff --git a/apps/web/src/utils/axiosInstance.chat.test.ts b/apps/web/src/utils/axiosInstance.chat.test.ts
new file mode 100644
index 000000000..b6edcbf93
--- /dev/null
+++ b/apps/web/src/utils/axiosInstance.chat.test.ts
@@ -0,0 +1,207 @@
+// @vitest-environment jsdom
+import { AxiosError, type InternalAxiosRequestConfig } from "axios";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import queryClient from "@/lib/react-query/queryClient";
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import { axiosInstance, getValidAccessToken } from "./axiosInstance";
+
+const { reissueToken } = vi.hoisted(() => ({ reissueToken: vi.fn<() => Promise<string>>() }));
+vi.mock("@/apis/Auth/server", () => ({ postReissueToken: reissueToken }));
+vi.mock("@/lib/react-query/queryClient", () => ({ default: { removeQueries: vi.fn() } }));
+
+function token(expiration: number) {
+  return `header.${btoa(JSON.stringify({ sub: 7, role: "MENTOR", exp: expiration }))}.signature`;
+}
+
+beforeEach(() => {
+  reissueToken.mockReset();
+  useAuthStore.getState().setAccessToken(token(Math.floor(Date.now() / 1000) + 3600));
+});
+
+afterEach(() => {
+  useAuthStore.getState().clearAccessToken();
+});
+
+describe("chat socket and HTTP token rotation", () => {
+  it("refreshes at the exact expiration second instead of returning expired credentials", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-11-04T00:00:00Z"));
+    useAuthStore.getState().setAccessToken(token(Math.floor(Date.now() / 1000)));
+    const refreshed = token(Math.floor(Date.now() / 1000) + 3600);
+    reissueToken.mockResolvedValue(refreshed);
+    await expect(getValidAccessToken()).resolves.toBe(refreshed);
+    expect(reissueToken).toHaveBeenCalledOnce();
+  });
+
+  it.each([
+    "socket-first",
+    "http-first",
+  ])("shares one refresh and preserves the authenticated identity (%s)", async (order) => {
+    let resolveRefresh!: (value: string) => void;
+    const pendingRefresh = new Promise<string>((resolve) => {
+      resolveRefresh = resolve;
+    });
+    reissueToken.mockImplementation(async () => {
+      const refreshed = await pendingRefresh;
+      return refreshed;
+    });
+    const expiredToken = token(Math.floor(Date.now() / 1000) - 10);
+    useAuthStore.setState({ accessToken: expiredToken, refreshStatus: "success", isAuthenticated: true });
+    const adapter = vi.fn(async (config: InternalAxiosRequestConfig) => ({
+      data: { chatRooms: [] },
+      status: 200,
+      statusText: "OK",
+      headers: {},
+      config,
+    }));
+
+    const socketToken = order === "socket-first" ? getValidAccessToken() : undefined;
+    const firstRequest = axiosInstance.get("/chats/rooms", { adapter });
+    const secondRequest = axiosInstance.get("/chats/rooms/42/partner", { adapter });
+    await Promise.resolve();
+    const waitingSocketToken = socketToken ?? getValidAccessToken();
+    for (let turn = 0; turn < 5; turn += 1) await Promise.resolve();
+
+    expect(reissueToken).toHaveBeenCalledOnce();
+    expect(adapter).not.toHaveBeenCalled();
+    expect(useAuthStore.getState()).toMatchObject({
+      accessToken: expiredToken,
+      isAuthenticated: true,
+      refreshStatus: "refreshing",
+    });
+
+    const refreshedToken = token(Math.floor(Date.now() / 1000) + 7200);
+    resolveRefresh(refreshedToken);
+    await expect(waitingSocketToken).resolves.toBe(refreshedToken);
+    await Promise.all([firstRequest, secondRequest]);
+    expect(adapter).toHaveBeenCalledTimes(2);
+    for (const [config] of adapter.mock.calls) {
+      expect(config.headers.Authorization).toBe(`Bearer ${refreshedToken}`);
+    }
+    expect(useAuthStore.getState()).toMatchObject({
+      isAuthenticated: true,
+      refreshStatus: "success",
+      isLoading: false,
+    });
+  });
+});
+
+it("waits for a 401-triggered refresh before returning a nominally valid socket credential", async () => {
+  let complete!: () => void;
+  const refreshed = token(Math.floor(Date.now() / 1000) + 7200);
+  reissueToken.mockImplementation(async () => {
+    await new Promise<void>((resolve) => {
+      complete = resolve;
+    });
+    return refreshed;
+  });
+  const adapter = vi.fn(async (config: InternalAxiosRequestConfig) => {
+    if (!config.headers.Authorization?.toString().includes(refreshed)) {
+      throw new AxiosError("expired on server", "ERR_BAD_REQUEST", config, undefined, {
+        config,
+        status: 401,
+        statusText: "Unauthorized",
+        headers: {},
+        data: {},
+      });
+    }
+    return { config, status: 200, statusText: "OK", headers: {}, data: {} };
+  });
+  const request = axiosInstance.get("/chats/rooms", { adapter });
+  await vi.waitFor(() => expect(reissueToken).toHaveBeenCalledOnce());
+  let socketResolved = false;
+  const socket = getValidAccessToken().then((value) => {
+    socketResolved = true;
+    return value;
+  });
+  await Promise.resolve();
+  await Promise.resolve();
+  const resolvedBeforeRefresh = socketResolved;
+  complete();
+  const socketCredential = await socket;
+  await request;
+  expect(resolvedBeforeRefresh).toBe(false);
+  expect(socketCredential).toBe(refreshed);
+});
+
+it.each([
+  undefined,
+  503,
+])("keeps identity and cache after a transient refresh failure (%s) and retries", async (status) => {
+  const expiredToken = token(Math.floor(Date.now() / 1000) - 10);
+  useAuthStore.setState({ accessToken: expiredToken, isAuthenticated: true });
+  const failure = new AxiosError(
+    "temporarily unavailable",
+    "ERR_NETWORK",
+    undefined,
+    undefined,
+    status
+      ? { config: {} as InternalAxiosRequestConfig, status, statusText: "Unavailable", headers: {}, data: {} }
+      : undefined,
+  );
+  reissueToken.mockRejectedValueOnce(failure);
+  vi.mocked(queryClient.removeQueries).mockClear();
+  await expect(getValidAccessToken()).rejects.toBe(failure);
+  expect(useAuthStore.getState()).toMatchObject({
+    accessToken: expiredToken,
+    isAuthenticated: true,
+    refreshStatus: "retryable",
+    isLoading: false,
+  });
+  expect(queryClient.removeQueries).not.toHaveBeenCalled();
+  const renewed = token(Math.floor(Date.now() / 1000) + 7200);
+  reissueToken.mockImplementationOnce(async () => {
+    return renewed;
+  });
+  await expect(getValidAccessToken()).resolves.toBe(renewed);
+});
+
+it("retries refresh rather than reusing a server-rejected token after a 503", async () => {
+  const oldToken = useAuthStore.getState().accessToken;
+  const failure = new AxiosError("Unavailable", "ERR_BAD_RESPONSE", undefined, undefined, {
+    config: {} as InternalAxiosRequestConfig,
+    status: 503,
+    statusText: "Unavailable",
+    headers: {},
+    data: {},
+  });
+  reissueToken.mockRejectedValueOnce(failure);
+  const adapter = async (config: InternalAxiosRequestConfig) => {
+    throw new AxiosError("Unauthorized", "ERR_BAD_REQUEST", config, undefined, {
+      config,
+      status: 401,
+      statusText: "Unauthorized",
+      headers: {},
+      data: {},
+    });
+  };
+  await expect(axiosInstance.get("/chats/rooms", { adapter })).rejects.toBe(failure);
+  expect(useAuthStore.getState()).toMatchObject({
+    accessToken: oldToken,
+    isAuthenticated: true,
+    refreshStatus: "retryable",
+  });
+  const renewed = token(Math.floor(Date.now() / 1000) + 7200);
+  reissueToken.mockImplementationOnce(async () => {
+    return renewed;
+  });
+  await expect(getValidAccessToken()).resolves.toBe(renewed);
+  expect(reissueToken).toHaveBeenCalledTimes(2);
+});
+
+it.each([401, 403])("clears identity and chat cache on refresh denial (%s)", async (status) => {
+  useAuthStore.setState({ accessToken: token(Math.floor(Date.now() / 1000) - 10) });
+  reissueToken.mockRejectedValueOnce(
+    new AxiosError("Denied", "ERR_BAD_REQUEST", undefined, undefined, {
+      config: {} as InternalAxiosRequestConfig,
+      status,
+      statusText: "Denied",
+      headers: {},
+      data: {},
+    }),
+  );
+  vi.mocked(queryClient.removeQueries).mockClear();
+  await expect(getValidAccessToken()).resolves.toBeNull();
+  expect(useAuthStore.getState()).toMatchObject({ accessToken: null, isAuthenticated: false, refreshStatus: "failed" });
+  expect(queryClient.removeQueries).toHaveBeenCalledWith({ queryKey: ["chat"] });
+});
diff --git a/apps/web/src/utils/axiosInstance.session.test.ts b/apps/web/src/utils/axiosInstance.session.test.ts
new file mode 100644
index 000000000..6b4dc74de
--- /dev/null
+++ b/apps/web/src/utils/axiosInstance.session.test.ts
@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+import { AxiosError, type InternalAxiosRequestConfig } from "axios";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import queryClient from "@/lib/react-query/queryClient";
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import { AuthenticationChangedError, axiosInstance, getValidAccessToken, publicAxiosInstance } from "./axiosInstance";
+
+vi.mock("@/lib/react-query/queryClient", () => ({ default: { removeQueries: vi.fn() } }));
+const originalAdapter = publicAxiosInstance.defaults.adapter;
+function token(user: number, expired = false) {
+  return `header.${btoa(JSON.stringify({ sub: user, role: "MENTOR", exp: Math.floor(Date.now() / 1000) + (expired ? -10 : 3600) }))}.signature`;
+}
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason: unknown) => void;
+  const promise = new Promise<T>((accept, deny) => {
+    resolve = accept;
+    reject = deny;
+  });
+  return { promise, resolve, reject };
+}
+beforeEach(() => {
+  useAuthStore.getState().setAccessToken(token(7, true));
+  vi.mocked(queryClient.removeQueries).mockClear();
+});
+afterEach(() => {
+  publicAxiosInstance.defaults.adapter = originalAdapter;
+  useAuthStore.getState().clearAccessToken();
+});
+
+it.each(["logout", "other-account"])("does not commit a late refresh token after %s", async (change) => {
+  const response = deferred<string>();
+  publicAxiosInstance.defaults.adapter = async (config) => ({
+    config,
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    data: { accessToken: await response.promise },
+  });
+  const pending = getValidAccessToken();
+  // Attach the rejection handler before resolving the network response.
+  const rejected = expect(pending).rejects.toBeInstanceOf(AuthenticationChangedError);
+  await vi.waitFor(() => expect(useAuthStore.getState().refreshStatus).toBe("refreshing"));
+  if (change === "logout") useAuthStore.getState().clearAccessToken();
+  else useAuthStore.getState().setAccessToken(token(8));
+  const expected = useAuthStore.getState();
+  response.resolve(token(7));
+  await rejected;
+  expect(useAuthStore.getState()).toBe(expected);
+  expect(queryClient.removeQueries).not.toHaveBeenCalled();
+});
+
+it.each([401, 403, 503])("does not clear a newer account after old refresh error %s", async (status) => {
+  const response = deferred<void>();
+  publicAxiosInstance.defaults.adapter = async (config) => {
+    await response.promise;
+    throw new AxiosError("Refresh failed", "ERR_BAD_RESPONSE", config, undefined, {
+      config,
+      status,
+      statusText: "Failed",
+      headers: {},
+      data: {},
+    });
+  };
+  const pending = getValidAccessToken();
+  const rejected = expect(pending).rejects.toBeInstanceOf(AuthenticationChangedError);
+  await vi.waitFor(() => expect(useAuthStore.getState().refreshStatus).toBe("refreshing"));
+  useAuthStore.getState().setAccessToken(token(8));
+  const expected = useAuthStore.getState();
+  response.resolve();
+  await rejected;
+  expect(useAuthStore.getState()).toBe(expected);
+  expect(queryClient.removeQueries).not.toHaveBeenCalled();
+});
+
+it("never sends an older user's waiting HTTP request with a new user's token", async () => {
+  const response = deferred<string>();
+  publicAxiosInstance.defaults.adapter = async (config) => ({
+    config,
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    data: { accessToken: await response.promise },
+  });
+  const adapter = vi.fn(async (config: InternalAxiosRequestConfig) => ({
+    config,
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    data: {},
+  }));
+  const request = axiosInstance.get("/chats/rooms", { adapter });
+  const rejected = expect(request).rejects.toBeInstanceOf(AuthenticationChangedError);
+  await vi.waitFor(() => expect(useAuthStore.getState().refreshStatus).toBe("refreshing"));
+  useAuthStore.getState().setAccessToken(token(8));
+  response.resolve(token(7));
+  await rejected;
+  expect(adapter).not.toHaveBeenCalled();
+});
diff --git a/apps/web/src/utils/axiosInstance.ts b/apps/web/src/utils/axiosInstance.ts
index 1c1629e74..8e60b9637 100644
--- a/apps/web/src/utils/axiosInstance.ts
+++ b/apps/web/src/utils/axiosInstance.ts
@@ -1,4 +1,4 @@
-import axios, { type AxiosError, type AxiosInstance } from "axios";
+import axios, { type AxiosError, type AxiosInstance, type InternalAxiosRequestConfig } from "axios";
 import { postReissueToken } from "@/apis/Auth/server";
 import { QueryKeys } from "@/apis/queryKeys";
 import queryClient from "@/lib/react-query/queryClient";
@@ -7,7 +7,15 @@ import useAuthStore from "@/lib/zustand/useAuthStore";
 import { isTokenExpired } from "@/utils/jwtUtils";
 
 // --- 글로벌 변수 ---
-let reissuePromise: Promise<void> | null = null;
+let refreshRequest: { sessionVersion: number; promise: Promise<string | null> } | null = null;
+type AuthRequestConfig = InternalAxiosRequestConfig & { _retry?: boolean; _sessionVersion?: number };
+
+export class AuthenticationChangedError extends Error {
+  constructor() {
+    super("Authentication changed while the request was pending");
+    this.name = "AuthenticationChangedError";
+  }
+}
 
 // --- 커스텀 에러 클래스 ---
 export class AuthenticationRequiredError extends Error {
@@ -23,6 +31,7 @@ let isRedirecting = false;
 const clearAuthState = () => {
   useAuthStore.getState().clearAccessToken();
   queryClient.removeQueries({ queryKey: [QueryKeys.MyPage.profile] });
+  queryClient.removeQueries({ queryKey: ["chat"] });
 };
 
 // --- 유틸리티 함수 ---
@@ -43,32 +52,53 @@ const redirectToLogin = (message: string) => {
 
 export const convertToBearer = (token: string) => `Bearer ${token}`;
 
-const tryReissueAccessToken = async (): Promise<string | null> => {
-  if (reissuePromise) {
-    await reissuePromise;
-    return useAuthStore.getState().accessToken;
-  }
-
-  const { setLoading, setInitialized, setRefreshStatus } = useAuthStore.getState();
-
-  reissuePromise = (async () => {
-    setRefreshStatus("refreshing");
-    setLoading(true);
+// The raw API only returns credentials. This owner alone may commit or clear the active session.
+export const refreshAccessToken = (): Promise<string | null> => {
+  const auth = useAuthStore.getState();
+  if (refreshRequest?.sessionVersion === auth.sessionVersion) return refreshRequest.promise;
+  const request = { sessionVersion: auth.sessionVersion, promise: Promise.resolve<string | null>(null) };
+  let ownedVersion = auth.sessionVersion;
+  const isCurrentSession = () => useAuthStore.getState().sessionVersion === ownedVersion;
+  request.promise = (async () => {
+    auth.setRefreshStatus("refreshing");
+    auth.setLoading(true);
     try {
-      await postReissueToken();
-      setRefreshStatus("success");
-    } catch {
-      clearAuthState();
-      setRefreshStatus("failed");
+      const token = await postReissueToken();
+      if (!isCurrentSession()) throw new AuthenticationChangedError();
+      useAuthStore.getState().setRefreshedAccessToken(token, ownedVersion);
+      return token;
+    } catch (error) {
+      if (!isCurrentSession()) throw new AuthenticationChangedError();
+      const status = (error as AxiosError).response?.status;
+      if (status === 401 || status === 403) {
+        clearAuthState();
+        ownedVersion = useAuthStore.getState().sessionVersion;
+        useAuthStore.getState().setRefreshStatus("failed");
+        return null;
+      }
+      useAuthStore.getState().setRefreshStatus("retryable");
+      throw error;
     } finally {
-      setLoading(false);
-      setInitialized(true);
-      reissuePromise = null;
+      if (isCurrentSession()) {
+        useAuthStore.getState().setLoading(false);
+        useAuthStore.getState().setInitialized(true);
+      }
+      if (refreshRequest === request) refreshRequest = null;
     }
   })();
+  refreshRequest = request;
+  return request.promise;
+};
 
-  await reissuePromise;
-  return useAuthStore.getState().accessToken;
+// HTTP requests, authentication initialization and socket reconnects share one refresh request.
+export const getValidAccessToken = async (): Promise<string | null> => {
+  const auth = useAuthStore.getState();
+  if (refreshRequest?.sessionVersion === auth.sessionVersion) return refreshRequest.promise;
+  const { accessToken: token, refreshStatus } = auth;
+  if (refreshStatus === "failed") return null;
+  // A token rejected by the server remains unusable even if its exp has not passed.
+  if (token && !isTokenExpired(token) && refreshStatus !== "retryable") return token;
+  return refreshAccessToken();
 };
 
 // --- Axios 인스턴스 ---
@@ -89,46 +119,20 @@ export const axiosInstance: AxiosInstance = axios.create({
 // 1. 요청 인터셉터 (Request Interceptor)
 axiosInstance.interceptors.request.use(
   async (config) => {
-    const { accessToken, clearAccessToken, refreshStatus } = useAuthStore.getState();
-
-    // 만료된 access token은 즉시 제거하고 refresh 재발급 경로를 타게 한다.
-    if (accessToken && isTokenExpired(accessToken)) {
-      clearAccessToken();
-    }
-
-    const validAccessToken = useAuthStore.getState().accessToken;
-
-    // 토큰이 있으면 헤더에 추가하고 진행
-    if (validAccessToken) {
-      config.headers.Authorization = convertToBearer(validAccessToken);
+    const sessionVersion = useAuthStore.getState().sessionVersion;
+    const token = await getValidAccessToken();
+    const currentAuth = useAuthStore.getState();
+    if (
+      sessionVersion !== currentAuth.sessionVersion &&
+      (token !== null || currentAuth.refreshStatus !== "failed" || currentAuth.isAuthenticated)
+    )
+      throw new AuthenticationChangedError();
+    (config as AuthRequestConfig)._sessionVersion = sessionVersion;
+    if (token) {
+      config.headers.Authorization = convertToBearer(token);
       return config;
     }
-
-    if (refreshStatus !== "failed") {
-      try {
-        await tryReissueAccessToken();
-
-        // reissue 완료 후 업데이트된 토큰으로 헤더 설정
-        const updatedAccessToken = useAuthStore.getState().accessToken;
-        if (updatedAccessToken) {
-          config.headers.Authorization = convertToBearer(updatedAccessToken);
-        }
-      } catch {
-        // 에러 발생 시에도 상태 정리는 promise 내부의 finally에서 처리됨
-      }
-
-      // reissue 후 토큰이 있으면 헤더에 추가
-      const finalAccessToken = useAuthStore.getState().accessToken;
-      if (finalAccessToken) {
-        config.headers.Authorization = convertToBearer(finalAccessToken);
-        return config;
-      }
-    }
-
-    const { isInitialized: currentInitialized, accessToken: currentAccessToken } = useAuthStore.getState();
-
-    // 초기화는 되었지만 토큰이 없는 경우 로그인 필요
-    if (currentInitialized && !currentAccessToken) {
+    if (useAuthStore.getState().isInitialized) {
       redirectToLogin("로그인이 필요합니다. 다시 로그인해주세요.");
       return Promise.reject(new AuthenticationRequiredError());
     }
@@ -147,21 +151,25 @@ axiosInstance.interceptors.response.use(
     const status = error.response?.status;
 
     if (status === 401) {
-      const originalRequest = error.config as (typeof error.config & { _retry?: boolean }) | undefined;
+      const originalRequest = error.config as AuthRequestConfig | undefined;
+      if (originalRequest?._sessionVersion !== useAuthStore.getState().sessionVersion) {
+        return Promise.reject(new AuthenticationChangedError());
+      }
 
       if (originalRequest && !originalRequest._retry && useAuthStore.getState().refreshStatus !== "failed") {
         originalRequest._retry = true;
 
         try {
-          const reissuedAccessToken = await tryReissueAccessToken();
+          const reissuedAccessToken = await refreshAccessToken();
 
           if (reissuedAccessToken) {
             originalRequest.headers = originalRequest.headers ?? {};
             originalRequest.headers.Authorization = convertToBearer(reissuedAccessToken);
             return axiosInstance(originalRequest);
           }
-        } catch {
-          // 재발급 실패 시 아래 로그인 리다이렉트로 처리
+        } catch (refreshError) {
+          // Temporary failures keep the local session and let the caller retry.
+          return Promise.reject(refreshError);
         }
       }
 
diff --git a/apps/web/src/utils/jwtUtils.ts b/apps/web/src/utils/jwtUtils.ts
index 9c0a35eec..d2f4a2bfe 100644
--- a/apps/web/src/utils/jwtUtils.ts
+++ b/apps/web/src/utils/jwtUtils.ts
@@ -30,7 +30,7 @@ export const isTokenExpired = (token: string | null): boolean => {
   }
 
   const currentTime = Math.floor(Date.now() / 1000);
-  return payload.exp < currentTime;
+  return payload.exp <= currentTime;
 };
 
 export const tokenParse = (token: string | null): JwtPayload | null => {
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;
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
new file mode 100644
index 000000000..ea2e4b383
--- /dev/null
+++ b/apps/web/vitest.config.ts
@@ -0,0 +1,21 @@
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@/public": fileURLToPath(new URL("./public", import.meta.url)),
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  oxc: {
+    jsx: { runtime: "automatic" },
+  },
+  test: {
+    environment: "node",
+    include: ["src/**/*.{test,spec}.{ts,tsx}"],
+    setupFiles: ["./src/test/setup.ts"],
+    restoreMocks: true,
+    unstubGlobals: true,
+  },
+});
diff --git a/apps/web/vitest.storybook.config.ts b/apps/web/vitest.storybook.config.ts
new file mode 100644
index 000000000..d83680d0f
--- /dev/null
+++ b/apps/web/vitest.storybook.config.ts
@@ -0,0 +1,19 @@
+import { fileURLToPath } from "node:url";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+import { playwright } from "@vitest/browser-playwright";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  plugins: [storybookTest({ configDir: fileURLToPath(new URL("./.storybook", import.meta.url)) })],
+  test: {
+    name: "storybook",
+    browser: {
+      enabled: true,
+      headless: true,
+      viewport: { width: 1440, height: 1000 },
+      provider: playwright(),
+      instances: [{ browser: "chromium" }],
+      screenshotDirectory: "./test-results/storybook",
+    },
+  },
+});
diff --git a/docs/chat-system.md b/docs/chat-system.md
new file mode 100644
index 000000000..a442dc163
--- /dev/null
+++ b/docs/chat-system.md
@@ -0,0 +1,91 @@
+# 채팅 시스템
+
+채팅은 기존 서버의 REST API와 STOMP 연결을 사용합니다. REST API는 대화 기록을 조회하고 읽음 상태를 변경합니다. STOMP는 연결이 열린 동안 새 메시지를 주고받는 통신 규칙입니다. 서버의 요청 경로와 데이터 형식은 유지합니다.
+
+## 메시지를 관리하는 곳
+
+`apps/web/src/lib/chat/ChatSession.ts`가 열린 채팅방의 대화 기록을 관리합니다. 기록 조회 응답과 실시간 수신은 모두 이곳에서 합칩니다. 화면이 별도의 메시지 배열을 만들어 서버 응답으로 덮어쓰지 않습니다.
+
+메시지에 서버가 부여한 양수 ID가 있으면 같은 ID를 한 번만 표시합니다. ID가 없으면 작성자와 작성 시각과 본문 및 첨부 정보를 비교합니다. ID 없는 메시지의 해시값만 비교하면 다른 메시지를 하나로 합칠 수 있으므로 전체 정보를 비교합니다.
+
+`stompTransport.ts`는 연결과 구독 및 발행을 담당합니다. 화면의 스크롤과 입력값은 알지 못합니다. 연결을 다시 열 때마다 공통 인증 함수에서 최신 토큰을 가져옵니다. HTTP 요청과 인증 초기화도 같은 토큰 갱신 요청을 공유합니다.
+
+`useChatSession.ts`는 방이 열릴 때 세션을 시작하고 닫힐 때 정리합니다. `useChatScroll.ts`는 화면 위치만 관리합니다. 입력창은 작성 중인 문장과 선택한 이미지를 관리합니다.
+
+## 연결이 끊겼다가 돌아올 때
+
+연결이 끊기면 작성 중인 문장과 선택한 이미지를 유지합니다. 전송 버튼은 연결이 돌아올 때까지 잠그지만 문장은 계속 작성할 수 있습니다.
+
+다시 연결하면 최신 기록부터 조회합니다. 마지막으로 조회를 마친 기록과 겹칠 때까지 다음 페이지도 확인합니다. 연결이 끊긴 동안 한 페이지보다 많은 메시지가 쌓여도 최신 한 페이지만 읽고 끝내지 않습니다. 실시간 수신만으로는 중간 기록이 이어졌다고 판단하지 않습니다.
+
+사용자가 이전 대화를 여는 페이지 번호는 이 복구 조회와 별도로 관리합니다. 기록을 합칠 때 중복 메시지를 제거합니다. 이전 기록을 추가하는 동안 화면에서 보던 메시지의 위치를 유지합니다.
+
+## 전송 확인과 실패
+
+소켓의 발행 함수가 반환되어도 서버 저장 완료를 뜻하지는 않습니다. 발행한 메시지는 먼저 전송 대기 항목에 보관합니다. 서버 ID가 있는 새 자기 메시지를 수신하면 같은 본문 또는 이미지 URL에 해당하는 대기 항목을 순서대로 정리합니다. 중복 수신은 다음 대기 항목을 정리하는 근거로 사용하지 않습니다.
+
+15초 안에 해당 수신을 확인하지 못하면 전송 여부를 확인해야 하는 상태로 표시합니다. 원문과 이미지 URL은 유지합니다. 같은 로그인 상태에서 다른 방에 갔다 돌아와도 확인하지 못한 항목을 다시 볼 수 있습니다. 이 보관은 메모리에서 이루어집니다. 페이지를 새로고침하거나 로그아웃하면 없어집니다.
+
+메시지를 자동으로 다시 보내지는 않습니다. 현재 서버 요청에는 클라이언트가 만든 메시지 ID가 없어서 재전송한 요청과 새 요청을 서버가 구별한다는 보장이 없습니다. 확인되지 않은 항목에서는 기록을 다시 확인하거나 대기 표시만 지울 수 있습니다. 대기 표시를 지워도 서버의 메시지는 삭제되지 않습니다.
+
+동일 계정의 다른 기기에서 같은 문장을 보내면 수신과 대기 항목의 정확한 대응은 보장할 수 없습니다. 서버가 클라이언트 메시지 ID를 받아 그대로 반환하도록 확장하면 이 제한을 해소할 수 있습니다. 현재 화면은 별도의 서버 저장 완료 표시를 제공하지 않습니다.
+
+발행하기 전에 연결이 끊겼거나 이미지 업로드가 실패하면 입력창을 비우지 않습니다. 요청 진행 중에는 입력과 선택을 잠가 이전 요청의 완료가 새 입력을 지우지 않도록 합니다. 한글을 조합하는 중에는 Enter로 전송하지 않습니다.
+
+## 이미지와 파일
+
+선택한 이미지는 업로드 전에 미리 볼 수 있습니다. 미리보기용 임시 URL은 파일을 제거하거나 화면을 닫을 때 해제합니다. 이미지를 업로드한 뒤에도 원래 방과 사용자 세션이 유효한지 확인하고 발행합니다. 이전 방의 늦은 업로드 결과가 다른 방에서 발행되지 않습니다.
+
+수신 이미지를 불러오지 못하면 최대 세 번 시도한 뒤 오류와 수동 재시도를 표시합니다. 일반 파일의 수신 표시와 다운로드는 유지합니다. 일반 파일을 보내는 서버 계약은 이 저장소에서 확인되지 않아 보내기 기능은 제공하지 않습니다. 잘못된 게시글 신고를 보내던 채팅 신고 버튼과 작동하지 않던 알림 설정도 제공하지 않습니다.
+
+## 읽음과 사용자 격리
+
+화면이 표시 중이고 대화의 하단을 보고 있을 때 읽음 요청을 보냅니다. 연속 수신은 요청 하나로 모읍니다. 읽음 요청 중 새 메시지가 들어오면 완료 후 다시 반영합니다. 실패하면 재시도 안내를 표시합니다.
+
+방 목록과 상대 정보 및 미확인 전송 항목의 조회 키에는 로그인한 사용자 ID가 포함됩니다. 로그아웃이나 인증 실패 때 채팅 캐시를 제거합니다. 정리 중인 이전 화면이 제거된 캐시에 원문을 다시 쓰지 못하도록 현재 사용자도 확인합니다.
+
+방이 바뀌거나 화면이 닫히면 진행 중인 요청을 취소합니다. 취소를 지원하지 않는 작업도 시작한 세대를 비교해 늦은 결과를 무시합니다. 기록 조회와 읽음 요청에서 403 또는 404를 받으면 연결을 종료하고 대화를 숨기며 전송을 막습니다. 상대 정보 조회에서 같은 응답을 받은 경우에도 대화를 숨깁니다.
+
+## 검증
+
+Node.js 22와 pnpm 9에서 다음 명령을 실행합니다. `ci:check`에는 채팅 테스트가 포함됩니다.
+
+```sh
+pnpm --filter @solid-connect/web run test:chat
+pnpm --filter @solid-connect/web run typecheck
+pnpm --filter @solid-connect/web run ci:check
+```
+
+테스트는 실제 서버 없이 제어 가능한 연결과 응답을 사용합니다. 초기 조회와 수신의 순서 역전과 여러 페이지의 재연결 복구 및 중복 수신을 확인합니다. 전송 실패와 늦은 업로드 및 방 전환과 읽음 요청을 확인합니다. 로그인 갱신 중 입력 유지와 로그아웃 뒤 데이터 제거도 확인합니다.
+
+브라우저 검증은 실제 운영 메시지를 만들지 않는 로컬 서버에서 수행합니다. 실제 서비스의 두 계정 간 전달과 서버 저장 및 운영 환경의 읽음 집계는 별도 연동 검증이 필요합니다.
+
+### 2026년 10월 27일 로컬 확인 결과
+
+Node.js 22.20.0에서 웹 앱의 린트와 타입 검사 및 회귀 테스트 101개가 통과했습니다. 로컬 가짜 API를 사용하는 프로덕션 빌드도 통과했습니다. 브라우저는 로컬 가짜 서버와 실제 SockJS 클라이언트를 연결해 확인했습니다.
+
+| 확인한 흐름 | 관찰한 결과 |
+| --- | --- |
+| 목록에서 방에 들어가 텍스트 전송 | 수신한 메시지가 한 번 표시되고 입력창이 비워짐 |
+| 연결 중단 후 메시지 45개 누적 | 기존 기록과 합친 65개의 ID가 중복과 빈 구간 없이 이어짐 |
+| 연결 중단 중 문장 작성 | 초안은 유지되고 전송 버튼은 잠김. 연결 복구 뒤 같은 초안이 남음 |
+| 이미지 업로드 실패 후 재시도 | 선택 파일과 작성 중인 문장이 남음. 재시도 뒤 이미지가 한 번 표시됨 |
+| 이전 기록 추가 | 표시된 메시지가 21개에서 40개로 늘어도 기준 메시지의 화면 위치는 167px로 유지됨 |
+| 미확인 전송 후 방 이동과 복귀 | 다른 방에 원문이 나타나지 않음. 원래 방에 돌아오면 대기 항목이 남고 자동 재발행은 없음 |
+| 목록 요청 실패 후 재시도 | 빈 목록 대신 오류를 표시함. 재시도 뒤 두 채팅방이 다시 표시됨 |
+| 너비 390px 화면 | 문서 너비도 390px로 유지됨. 입력창이 하단 탐색 영역 위에 표시됨 |
+
+![로컬 가짜 서버로 확인한 모바일 채팅 화면](screenshots/chat-system/mobile.png)
+
+
+## 2026년 11월 4일 리뷰 반영
+
+기록 조회가 전송 확인 소켓 응답보다 먼저 도착해도 첫 응답으로 대기 항목을 제거합니다. 이미 처리한 소켓 응답은 다시 확인에 쓰지 않습니다. 전송 전에 이미 있던 메시지도 새 전송을 확인하는 데 쓰지 않습니다. 방을 다시 열어 복원한 미확인 항목은 원래 전송과 응답을 연결할 근거가 없으므로 자동으로 지우지 않습니다. 새로 보낸 동일 내용의 응답은 새 항목만 확인합니다.
+
+다른 화면에서 토큰이 만료된 뒤 채팅에 처음 들어와도 로그인 안내를 띄우기 전에 갱신을 시도합니다. 일시적인 갱신 장애가 생기면 다시 확인 버튼으로 복구할 수 있습니다.
+
+토큰의 만료와 인증 거부를 구분합니다. 상대 정보와 방 목록의 조회도 채팅 화면이 확인한 사용자 ID를 사용하므로 토큰 만료만으로 기존 조회 결과나 입력창이 사라지지 않습니다. 일시적인 네트워크 오류나 서버 장애에서는 로컬 초안과 선택 이미지 및 미확인 전송을 유지합니다. 실제 요청은 갱신이 성공해야 나가며 거절된 토큰을 재사용하지 않습니다. 401과 403으로 갱신이 거부되면 인증과 채팅 캐시를 지웁니다.
+
+로그인과 로그아웃마다 세션 번호를 바꿉니다. 늦게 끝난 이전 세션의 갱신은 새 계정의 토큰이나 오류 상태를 변경할 수 없습니다. 학교 이메일 인증 후 갱신도 같은 처리 경로를 사용합니다.
+
+같은 채팅 세션을 잠깐 중지했다가 재개해도 화면이 관리하는 읽기 위치를 유지합니다. 이 변경을 포함한 단위 테스트 123개와 E2E 44개 및 스토리 28개를 로컬에서 실행했습니다. E2E는 데스크톱과 모바일 Chromium에서 각각 같은 흐름을 검사합니다.
diff --git a/docs/screenshots/chat-system/mobile.png b/docs/screenshots/chat-system/mobile.png
new file mode 100644
index 000000000..5cad709aa
Binary files /dev/null and b/docs/screenshots/chat-system/mobile.png differ
diff --git a/docs/web-browser-testing.md b/docs/web-browser-testing.md
new file mode 100644
index 000000000..dab114fee
--- /dev/null
+++ b/docs/web-browser-testing.md
@@ -0,0 +1,109 @@
+# 웹 브라우저 테스트
+
+웹 앱은 세 단계로 검증합니다. Vitest는 상태와 API 처리 로직을 빠르게 확인합니다. Playwright는 실제 Chromium 브라우저에서 화면 이동과 메시지 전송을 확인합니다. Storybook은 컴포넌트를 독립적으로 보여주는 개발 도구입니다. 상태별 화면을 스토리로 남기고 버튼 클릭 같은 상호작용도 브라우저에서 검사합니다.
+
+## 실행
+
+저장소 루트에서 Node.js 22와 pnpm 9를 사용합니다.
+
+```sh
+pnpm install --frozen-lockfile
+pnpm --filter @solid-connect/web exec playwright install chromium
+pnpm --filter @solid-connect/web run ci:check
+pnpm --filter @solid-connect/web run test:e2e
+pnpm --filter @solid-connect/web run test:stories
+pnpm --filter @solid-connect/web run build:storybook
+```
+
+Linux에서 브라우저 실행에 필요한 운영체제 라이브러리까지 설치하려면 `playwright install --with-deps chromium`을 사용합니다.
+
+E2E는 사용자의 화면 진입부터 결과 확인까지 연결해서 검사하는 테스트입니다. `test:e2e`는 테스트 API 서버를 43180 포트에 띄우고 웹 앱을 43181 포트에 띄우고 대학 카탈로그를 43182 포트에 띄웁니다. 세 포트는 비어 있어야 합니다. 기존 개발 서버를 재사용하지 않으므로 사용자가 열어둔 앱의 데이터나 환경 설정을 바꾸지 않습니다. 테스트가 끝나면 서버도 종료합니다.
+
+```sh
+# 한 화면 크기만 검사
+pnpm --filter @solid-connect/web run test:e2e --project=desktop
+pnpm --filter @solid-connect/web run test:e2e --project=mobile
+pnpm --filter @solid-connect/web run test:e2e --project=responsive
+
+# 테스트를 선택해서 실행하고 실패 지점을 확인
+pnpm --filter @solid-connect/web run test:e2e:ui
+pnpm --filter @solid-connect/web exec playwright show-report
+
+# 컴포넌트 상태와 문서 보기
+pnpm --filter @solid-connect/web run storybook
+```
+
+Storybook 주소는 `http://localhost:6006`입니다. 빌드 결과는 `apps/web/storybook-static`에 생성됩니다.
+
+## E2E 범위
+
+총 50개 시나리오를 실행합니다. 공통 시나리오는 데스크톱 Chromium과 390 × 844 모바일 Chromium에서 실행합니다. 모바일은 화면 크기와 터치 환경을 재현하며 실제 휴대전화나 Safari 및 앱 내 WebView 검증을 대신하지 않습니다.
+
+| 화면 | 확인하는 흐름 |
+| --- | --- |
+| 홈 | 파견 학교 검색 링크와 준비 중인 기능 안내 |
+| 로그인 | 잘못된 비밀번호 안내 후 입력 수정과 로그인 성공 |
+| 마이페이지 | 로그인한 사용자의 프로필 확인과 로그아웃 후 채팅 접근 제한 |
+| 멘토 | 비회원 진입 시 로그인 화면 안내 |
+| 커뮤니티 | 게시글 목록 표시와 글쓰기 진입 및 로그인 후 작성 화면 복귀 |
+| 성적 | 등록 내역이 없는 상태와 공인어학 및 학점 탭 전환과 입력 화면 진입 |
+| 지원자 현황 | 비회원 제한 화면과 로그인 이동 |
+| 약관 및 잘못된 경로 | 약관 표시와 유효하지 않은 채팅방의 오류 화면 |
+| 채팅 전송 | REST 기록과 실시간 메시지 통합 및 한 번 전송과 새로고침 후 유지 |
+| 채팅 기록 | 이전 기록 추가 시 읽던 위치 유지와 조회 실패 후 재시도 |
+| 채팅 연결 | 연결 중단 중 초안 유지와 재연결 후 45개 메시지의 누락 없는 복구 |
+| 채팅 이미지 | 업로드 실패 후 선택 이미지와 텍스트 유지 및 재시도 |
+| 채팅 접근 | 목록 조회 실패 복구와 방 이동 시 기록 분리 및 권한 상실 시 기록 숨김과 전송 차단 |
+| 채팅 인증 | 토큰 갱신의 일시 장애에서 초안과 선택 이미지 보존 및 재연결과 만료 후 첫 진입의 갱신 재시도 및 과거 기록을 읽는 중 만료 후 수신과 전송 |
+| 채팅 확인 | 기록 조회보다 늦은 소켓 응답과 중복 응답을 한 번만 처리 |
+| 반응형 | 홈과 로그인 및 마이페이지와 대학 목록 및 채팅의 화면 크기 전환과 상태 보존 |
+| 채팅 모바일 | 작성 영역이 화면과 하단 탐색 메뉴 안쪽에 배치되는지 확인 |
+
+반응형 전용 시나리오는 390px부터 1536px까지 일곱 너비를 검사합니다. 767px와 768px 경계에서 메뉴가 전환되는지와 학교 검색 조건 및 로그인 입력과 채팅 초안이 유지되는지를 확인합니다. 긴 학교명과 카드 너비 및 가로 넘침도 검사합니다. 대학 카탈로그는 `apps/university-web`이 별도로 배포하는 화면입니다. 테스트에서도 별도 서버로 실행해 웹 앱의 경로 연결과 목록 검색 및 빈 결과 복구를 함께 확인합니다. 관리 앱은 이 E2E 범위에 포함하지 않습니다. 성적 제출과 지원 완료 및 커뮤니티 작성 저장도 별도 시나리오가 필요합니다.
+
+## 테스트 서버
+
+`apps/web/e2e/fixtures/server.mjs`는 테스트가 사용할 응답과 상태를 가진 로컬 서버입니다. REST는 기록 조회와 업로드를 처리하는 HTTP API입니다. SockJS와 STOMP는 실제 채팅 연결에서 사용하는 통신 방식입니다. 테스트 서버가 이 방식을 받아주므로 앱의 실제 연결 코드를 그대로 거칩니다.
+
+매 테스트가 새 브라우저 환경과 초기화한 서버 상태로 시작합니다. 하나의 서버를 공유하므로 `workers: 1`로 순차 실행합니다. 병렬 실행하려면 먼저 작업자별 서버나 데이터 공간을 분리해야 합니다. 브라우저의 외부 요청을 차단하며 API 주소는 Next.js 기동 전에 로컬 주소로 고정합니다. 구현하지 않은 API가 호출되면 테스트 종료 시 실패합니다.
+
+`/__control`은 연결 중단과 업로드 실패 및 기록 조회 실패 같은 상황을 만드는 테스트 전용 경로입니다. 운영 앱에는 등록하지 않습니다. 테스트 로그인과 토큰도 이 서버에서만 사용합니다.
+
+이 검증은 프론트엔드가 약속된 API 응답에 맞게 동작한다는 의미입니다. 운영 서버에서 두 사용자가 주고받는 메시지의 저장과 실제 전달 및 읽음 반영은 별도의 통합 검증이 필요합니다.
+
+## Storybook 범위
+
+| 컴포넌트 | 스토리 |
+| --- | --- |
+| 공통 버튼 | 기본 버튼과 보조 버튼 및 비활성 상태 |
+| 공통 입력 | 기본 입력과 회색 입력 및 비활성 상태 |
+| 빈 카드 | 기본 안내와 검색 결과 없음 |
+| 프로필 | 멘티와 멘토 및 채팅용 작은 크기 |
+| 탭 | 상태를 바꾸는 탭 선택 |
+| 성적 카드 | 승인 완료와 심사 중 및 승인 거절과 학점 |
+| 채팅 입력 | 전송 성공과 연결 끊김 및 접근 제한과 전송 실패 및 이미지 선택과 업로드 실패 및 전송 중 |
+| 채팅 메시지 | 수신과 발신 및 긴 텍스트와 이미지 및 파일 |
+| 데스크톱 홈 | 비회원과 회원 및 빈 목록과 긴 학교명 및 좁은 본문과 이미지 실패 |
+
+`test:stories`는 34개 스토리를 Chromium에서 렌더링합니다. 버튼 클릭과 입력 및 탭 전환과 메시지 전송과 실패 후 초안 유지도 검사합니다. `fn()`으로 만든 함수가 실제 호출됐는지 확인하므로 렌더링만 성공하는 테스트와 구분합니다. 이미지나 파일 스토리는 상태를 보여주는 예시이며 실제 파일 다운로드 성공을 보장하지 않습니다.
+
+새 스토리는 컴포넌트 옆의 `*.stories.tsx`에 작성합니다. Next.js 경로 기능과 Tailwind 스타일을 공통 설정으로 사용합니다. Storybook 전용 Next.js 설정을 사용하므로 배포용 도메인이나 Sentry 인증 정보가 없어도 실행할 수 있습니다. 앱에서 SVG를 React 컴포넌트로 불러오므로 Storybook도 같은 방식으로 처리합니다.
+
+## CI
+
+GitHub Actions는 웹 앱이나 공유 패키지 또는 루트 설정이 바뀌면 다음 작업을 실행합니다.
+
+| 작업 | 실행 내용 |
+| --- | --- |
+| Web - Quality Check | 기존 `ci:check`로 정적 검사와 타입 검사 및 채팅 회귀 테스트 |
+| Web - Build | 기존 Next.js 프로덕션 빌드 |
+| Web - E2E (desktop) | 로컬 테스트 서버와 개발 서버를 통한 데스크톱 흐름 |
+| Web - E2E (mobile) | 별도의 실행 환경에서 모바일 흐름 |
+| Web - E2E (responsive) | 일곱 화면 너비의 배치와 상태 보존 |
+| Web - Storybook | 스토리 정적 빌드와 Chromium 렌더링 및 상호작용 검사 |
+
+E2E와 Storybook은 빠른 품질 검사 뒤에 별도 작업으로 실행합니다. 대학 카탈로그만 바뀌어도 E2E는 실행됩니다. E2E 개발 서버 검증과 Next.js 프로덕션 빌드 검증은 서로 다른 단계입니다. 브라우저 테스트는 Husky 커밋 훅에 추가하지 않습니다.
+
+E2E 보고서는 성공 시에도 7일 동안 보관합니다. 실패하면 스크린샷과 비디오 및 trace도 포함합니다. trace는 요청과 화면 변화를 시간 순서로 살펴볼 수 있는 기록입니다. Storybook 빌드와 실패 화면도 7일 동안 보관합니다. 생성된 결과물은 Git에 포함하지 않습니다.
+
+설정 방식은 [Playwright 서버 실행 문서](https://playwright.dev/docs/test-webserver)와 [Storybook Next.js 안내](https://storybook.js.org/docs/get-started/frameworks/nextjs-vite) 및 [Vitest 연동 안내](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon)를 따릅니다.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 23457f113..186696fb6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,13 +127,13 @@ importers:
         version: 5.9.3
       vinext:
         specifier: ^0.0.51
-        version: 0.0.51(@vitejs/plugin-react@6.0.2(babel-plugin-react-compiler@1.0.0)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))(@vitejs/plugin-rsc@0.5.26(react-dom@19.2.6(react@19.2.6))(react-server-dom-webpack@19.2.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)))(react@19.2.6)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))(next@16.2.9(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react-server-dom-webpack@19.2.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)))(react@19.2.6)(typescript@5.9.3)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+        version: 0.0.51(@vitejs/plugin-react@6.0.2(babel-plugin-react-compiler@1.0.0)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))(@vitejs/plugin-rsc@0.5.26(react-dom@19.2.6(react@19.2.6))(react-server-dom-webpack@19.2.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)))(react@19.2.6)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))(next@16.2.9(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react-server-dom-webpack@19.2.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)))(react@19.2.6)(typescript@5.9.3)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
       vite:
         specifier: ^8.1.0
         version: 8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
       vitest:
         specifier: ^4.1.9
-        version: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.7)(jsdom@29.1.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+        version: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.7)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
       web-vitals:
         specifier: ^5.1.0
         version: 5.1.0
@@ -145,7 +145,7 @@ importers:
         version: 5.2.2(react-hook-form@7.71.1(react@19.2.6))
       '@next/third-parties':
         specifier: ^16.2.9
-        version: 16.2.9(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
+        version: 16.2.9(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-checkbox':
         specifier: ^1.1.4
         version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -163,7 +163,7 @@ importers:
         version: 2.20.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@sentry/nextjs':
         specifier: ^10.61.0
-        version: 10.61.0(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)(webpack@5.104.1(postcss@8.5.15))
+        version: 10.61.0(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)(webpack@5.104.1(postcss@8.5.15))
       '@stomp/stompjs':
         specifier: ^7.1.1
         version: 7.2.1
@@ -178,7 +178,7 @@ importers:
         version: 3.13.18(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@vercel/speed-insights':
         specifier: ^1.3.1
-        version: 1.3.1(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
+        version: 1.3.1(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
       axios:
         specifier: ^1.18.1
         version: 1.18.1
@@ -199,7 +199,7 @@ importers:
         version: 0.479.0(react@19.2.6)
       next:
         specifier: ^16.2.9
-        version: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       next-render-analyzer:
         specifier: ^0.1.2
         version: 0.1.2
@@ -272,7 +272,7 @@ importers:
         version: 5.2.2(react-hook-form@7.71.1(react@19.2.6))
       '@next/third-parties':
         specifier: ^16.2.9
-        version: 16.2.9(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
+        version: 16.2.9(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-checkbox':
         specifier: ^1.1.4
         version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -290,7 +290,7 @@ importers:
         version: 2.20.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@sentry/nextjs':
         specifier: ^10.61.0
-        version: 10.61.0(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)(webpack@5.104.1(postcss@8.5.15))
+        version: 10.61.0(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)(postcss@8.5.15))
       '@solid-connect/ui':
         specifier: workspace:^
         version: link:../../packages/ui
@@ -308,7 +308,7 @@ importers:
         version: 3.13.18(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@vercel/speed-insights':
         specifier: ^1.3.1
-        version: 1.3.1(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
+        version: 1.3.1(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
       axios:
         specifier: ^1.18.1
         version: 1.18.1
@@ -329,7 +329,7 @@ importers:
         version: 0.479.0(react@19.2.6)
       next:
         specifier: ^16.2.9
-        version: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       next-render-analyzer:
         specifier: ^0.1.2
         version: 0.1.2
@@ -364,9 +364,27 @@ importers:
       '@next/bundle-analyzer':
         specifier: ^16.2.9
         version: 16.2.9
+      '@playwright/test':
+        specifier: 1.64.1
+        version: 1.64.1
+      '@storybook/addon-docs':
+        specifier: 10.6.5
+        version: 10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))
+      '@storybook/addon-vitest':
+        specifier: 10.6.5
+        version: 10.6.5(@vitest/browser-playwright@4.1.9(playwright@1.64.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9))(@vitest/browser@4.1.9(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))))(react@19.2.6)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))
+      '@storybook/nextjs-vite':
+        specifier: 10.6.5
+        version: 10.6.5(@babel/core@7.29.6)(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(rollup@4.62.2)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
       '@svgr/webpack':
         specifier: ^8.1.0
         version: 8.1.0(typescript@5.9.3)
+      '@testing-library/dom':
+        specifier: ^10.4.0
+        version: 10.4.1
+      '@testing-library/react':
+        specifier: ^16.2.0
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@types/node':
         specifier: ^20.11.19
         version: 20.19.30
@@ -376,6 +394,12 @@ importers:
       '@types/react-dom':
         specifier: 19.2.3
         version: 19.2.3(@types/react@19.2.15)
+      '@types/ws':
+        specifier: '8'
+        version: 8.18.2
+      '@vitest/browser-playwright':
+        specifier: 4.1.9
+        version: 4.1.9(playwright@1.64.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9)
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.23(postcss@8.5.15)
@@ -385,15 +409,33 @@ importers:
       critters:
         specifier: ^0.0.23
         version: 0.0.23
+      jsdom:
+        specifier: ^29.1.1
+        version: 29.1.1
       postcss:
         specifier: 8.5.15
         version: 8.5.15
+      storybook:
+        specifier: 10.6.5
+        version: 10.6.5(@types/react@19.2.15)(react@19.2.6)
       tailwindcss:
         specifier: ^3.4.10
         version: 3.4.19(tsx@4.21.0)(yaml@2.8.3)
       typescript:
         specifier: ^5.3.3
         version: 5.9.3
+      vite:
+        specifier: 8.0.3
+        version: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+      vite-plugin-svgr:
+        specifier: 4.5.0
+        version: 4.5.0(rollup@4.62.2)(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      vitest:
+        specifier: ^4.1.9
+        version: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      ws:
+        specifier: 8.21.0
+        version: 8.21.0
 
   packages/api-schema:
     dependencies:
@@ -461,6 +503,9 @@ importers:
 
 packages:
 
+  '@adobe/css-tools@4.5.0':
+    resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==}
+
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -1189,6 +1234,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@blazediff/core@1.9.1':
+    resolution: {integrity: sha512-ehg3jIkYKulZh+8om/O25vkvSsXXwC+skXmyA87FFx6A/45eqOkZsBltMw/TVteb0mloiGT8oGRTcjRAz66zaA==}
+
   '@bramus/specificity@2.4.2':
     resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
     hasBin: true
@@ -1317,15 +1365,27 @@ packages:
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
+  '@emnapi/core@1.11.0':
+    resolution: {integrity: sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==}
+
   '@emnapi/core@1.11.1':
     resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
 
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
+
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
+  '@emnapi/runtime@1.11.0':
+    resolution: {integrity: sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==}
+
   '@emnapi/runtime@1.11.1':
     resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
 
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
+
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
@@ -1664,6 +1724,15 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0':
+    resolution: {integrity: sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==}
+    peerDependencies:
+      typescript: '>= 4.3.x'
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -1680,9 +1749,18 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
+  '@jridgewell/sourcemap-codec@1.6.0':
+    resolution: {integrity: sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==}
+
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+
   '@napi-rs/wasm-runtime@1.1.4':
     resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
     peerDependencies:
@@ -1803,16 +1881,241 @@ packages:
     resolution: {integrity: sha512-/UhIkaZgPutTFmQ7RnIJGgDXZmtEJ7Dvi86xNTFWcnRxVRNk/aotsqDJYeEvDP+FSMB2SdW+pQzNMcWP0rwuNA==}
     engines: {node: '>=14'}
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-project/types@0.122.0':
+    resolution: {integrity: sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==}
+
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
+
   '@oxc-project/types@0.132.0':
     resolution: {integrity: sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==}
 
   '@oxc-project/types@0.137.0':
     resolution: {integrity: sha512-WT+Gb24i8hmvo85AIv2oEYouEXkRlKAlT9WaCa3TfLgNCN+GhrJOGZuIlMouAh38Qe4QOx26eUOVsq70qXrywA==}
 
+  '@oxc-resolver/binding-android-arm-eabi@11.21.2':
+    resolution: {integrity: sha512-xQoCRv+gKax9KTdwdaQNnAFOai8neay7g3jExDIORzhbrejwGSJaZNTdOJHR5ziLg2joMxOCMOFMo4zuxza2uQ==}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-resolver/binding-android-arm64@11.21.2':
+    resolution: {integrity: sha512-HF5oiE2L05yInPYCFD/4uxSrEZW4SuIfn99Y6L1xnJnzl066JR+MJs2rIdstw8A2MPlAKH+13dpFPNycjqzvGg==}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-resolver/binding-darwin-arm64@11.21.2':
+    resolution: {integrity: sha512-UX4u49CVCAD8QZNELaW8eMGgMAGwFWYEPbvNsh+3r/gs4NX3KfpiACMVwRQT0EuH3uat9hM5Zl+Ppm9pJD8tgg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-darwin-x64@11.21.2':
+    resolution: {integrity: sha512-J9xPx7YBkrRmJ+xl561ztnMWEc1aOyjEIxBiGX1dVb3u7bGSnfObfcZk+Pd+uM0HZAPNsQ1xvD8j52A/uOSqNQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-freebsd-x64@11.21.2':
+    resolution: {integrity: sha512-fRlt7OvSaQkWj6+EDTVxawVxOlqJB2QSnBfkeCyK4RTvsGctbw3BiH2Tb7DzMs7bikc4BRBpvWP5zF9K8b54Zg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2':
+    resolution: {integrity: sha512-gK+vPUcPQITkGwBKpZGrcDHSlU6eDGl7AQacxS2CEKAZIBHWkOVFeJwLZ4tYnA1acJqRM5lt7yYwPCVqGHIJ7A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2':
+    resolution: {integrity: sha512-L/Rgas7SrOKy/z7IH+HxSFRqVO4PuLDKLEGKvnhoCBBq3UJ0YzGBou3qMzaAGgkJwsIvX2pBF+7ojzfUhLiZxQ==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.2':
+    resolution: {integrity: sha512-CUEYvlX1Fk7E9kUMzuswru1J9HLxMwnpDeQGjQuI4ZH+iNCoa2X9T+pvyzrbsgl7WnIeTFTlNlHsRfVdf5g9/g==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.2':
+    resolution: {integrity: sha512-ViN1ZibQyxwC67GpoP33oo+S9UyUnkog13vzQb9+v9bCNvrVzJuk0MRdacjtv/9xfRMVF/eqHFyl8YOeykI10Q==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2':
+    resolution: {integrity: sha512-CU1sCqWnhGqYD5I1HedHk5pujrn7ssDkNB/AEQd/pd3D/EojVSgJUlpbafwIbyhia3PgIfkvdFpRPWSALzVumA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2':
+    resolution: {integrity: sha512-jWVyZtIHca4Gb96x7dag+y69vlei7ffjrsveLkmf2ZhqEAz6ZSBnY1GWvgZUaZlwZP62A3xD092BW97Q5VGc+g==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.2':
+    resolution: {integrity: sha512-LF29obFqNgBUgDX7rmUK7M4D0JQG5LxhYzn3xXmECcHU9aQAdWG7NiY052qybtesEdwHQXKNTWYQ7mTsybNvWg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.2':
+    resolution: {integrity: sha512-+NYcm+cCHBbtdQQ3A4phQTSuVRYnNHz7wrl9XRAPEovcdoqi0mb1K5ZOl+jN54ZD+q1zz3V0vltbFJmzecJKmw==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.2':
+    resolution: {integrity: sha512-UQqZDdG2r2HhAOsZEgufkIWHPQ886IUyuJQkoZByvzhW8j51R4UNzGBJFkTiTnLhQnggwJRdJgFWK4uY6ZVIMw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-x64-musl@11.21.2':
+    resolution: {integrity: sha512-3Q9PMRjalWkT6NZ4jfujuqTCFwoWErg3y3BnOgb544B8IMw4PktiwWOigMfOHNRLMghZeJ7hpfpZf4CP7rV7Og==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-resolver/binding-openharmony-arm64@11.21.2':
+    resolution: {integrity: sha512-Eljeq3ndtyKhM+Es8LITi4Zl2htzuRZcrPMF3kMCsrILztvU6AjZ3FuEhHHKobPUB9rMpzLpJP5bDqXI7r+iog==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-resolver/binding-wasm32-wasi@11.21.2':
+    resolution: {integrity: sha512-HGDbNsIywqc4LxU38+CTJNnB/6BF7rheWOJ259b4eE0aEnelYblC8x+1tEd63bp31fYne63RQz9Jb4yVnC7Yig==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.2':
+    resolution: {integrity: sha512-iWx25CBEgH49iE9q5coEGI/jb1jl5kkCY9z6U5Og67xCkQ/WFMDc2J5U78+AE91SUxM2NqSLhJC8/PLfWnImww==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.2':
+    resolution: {integrity: sha512-VPoCAhKvCQTlG7vxqaBXcmuvbh77BfnGXj8g0pbvVXpm1F/R8rDVwqIWcEbMzrI1JvJlm8v7T9uMVQb6UctMRg==}
+    cpu: [x64]
+    os: [win32]
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@playwright/test@1.64.1':
+    resolution: {integrity: sha512-IaYGml/nSOiZWROfPtuIL7neuu9qDOZ3TNvNljUIrhDMxiGTgPjzj/g9p9RxpS2tSepPDRY+UwAaEeiKtUvIAg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -2193,6 +2496,12 @@ packages:
     resolution: {integrity: sha512-C7c51Nn4yTxXFKvgh2txJFNweaVcfUPQxwEUFw4aWsCmfiBDJsTSwviIF8EcwjQ6k8bPyMWCl1vw4BdxE569Cg==}
     engines: {node: '>= 10'}
 
+  '@rolldown/binding-android-arm64@1.0.0-rc.12':
+    resolution: {integrity: sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@rolldown/binding-android-arm64@1.0.2':
     resolution: {integrity: sha512-ZS4D1JPGn/MYQN/SYDWftIE/nVsM8j/AFOYEzAoOE2O3NktQOZru+/vYXGbR/qtdLdIfGCP0lcoJiYVzsEz+iQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2205,6 +2514,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.12':
+    resolution: {integrity: sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rolldown/binding-darwin-arm64@1.0.2':
     resolution: {integrity: sha512-vdFA9+C/rekyGce7WqHs/xoT0ioZEWaOFyZLIV1mEeNFaFDUQrPIo8Vs2GvJ6eetb3rzDUtUBgzto3ExpXJB3w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2217,6 +2532,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-x64@1.0.0-rc.12':
+    resolution: {integrity: sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@rolldown/binding-darwin-x64@1.0.2':
     resolution: {integrity: sha512-BewSOwTHazv77DTYiAZXSqqKZ4KP/KonFisDMVU7PImxoWfB2aepnPhd2E4SWz3zDzYgDNbs6jBmTdgNnF02GA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2229,6 +2550,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.12':
+    resolution: {integrity: sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rolldown/binding-freebsd-x64@1.0.2':
     resolution: {integrity: sha512-m41o7M0YWtUdqk61Tb+jnKb2rN++iRdIASlExkUoKfIAH30DOHCB8fVLzSUpbWHHU8esmEioY62PxzexE8MBuA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2241,6 +2568,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12':
+    resolution: {integrity: sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.2':
     resolution: {integrity: sha512-jcojB9H7W/jS29pMKWAK1N+fU99vXodHDTatS3b3y/XSOCiHo0kkA74pL3jJmkoQtYpOCxDvaKs1fo2Ij/1X5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2253,6 +2586,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12':
+    resolution: {integrity: sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@rolldown/binding-linux-arm64-gnu@1.0.2':
     resolution: {integrity: sha512-1jn6qDU5iiOgFgygDzKUuKP0maTi0/f1+sBLgvij/76C77Nm3ts6ufz9Bjg5q5dduxiUIxtq86JIoBvo1xQ4Ig==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2265,6 +2604,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.12':
+    resolution: {integrity: sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@rolldown/binding-linux-arm64-musl@1.0.2':
     resolution: {integrity: sha512-QVLO/czFMdoMFSqlX3bcswcJNm/23r+qoa/jgtmFc/qEp6/jXmIkDjF/XIo8dPfGaiwy1xfQn8o77L79GeXFgw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2277,6 +2622,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12':
+    resolution: {integrity: sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+
   '@rolldown/binding-linux-ppc64-gnu@1.0.2':
     resolution: {integrity: sha512-hgO5Abm0w5UL6FEa2iFnZqo2KlK7TQ5QhV5x09hujBf7t5KzHQ1VmfPuTpqRy/rNlSxua3eWH374xxiVrP+lcA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2289,6 +2640,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12':
+    resolution: {integrity: sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
   '@rolldown/binding-linux-s390x-gnu@1.0.2':
     resolution: {integrity: sha512-fy8rXxuYEu602abC8MUNaPjYLIFzReOaEIEMKMUa0rFEUxNpVXhs15KSSQ4qlqSaM7B6rcj9rDZgADh/IGDzLQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2301,6 +2658,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.12':
+    resolution: {integrity: sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
   '@rolldown/binding-linux-x64-gnu@1.0.2':
     resolution: {integrity: sha512-0+bOkiQ779+r1WpoHOWHqncvyySci0vKph+myNDYb+im6meJAzHQXay6oEgnkHuUGouM1LKTZwqKpBow6Kj7CQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2313,6 +2676,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.12':
+    resolution: {integrity: sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
   '@rolldown/binding-linux-x64-musl@1.0.2':
     resolution: {integrity: sha512-mjSkrzZK5Qsl0a9d1JgILOiuZOSDTVdKENcSXBoqbzSrspLR/4/IRVDo5wd2GgZjNss/viBFJdeq+j7qH2nypw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2325,6 +2694,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.12':
+    resolution: {integrity: sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@rolldown/binding-openharmony-arm64@1.0.2':
     resolution: {integrity: sha512-1v5vHasdfQAZoEHakBV72LIFAC9JjnymsiKxp+GEr/ma3+NJCPSaYK+qavInOovJkgwFrs7GccX2d6IgDA3Z5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2337,6 +2712,11 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.12':
+    resolution: {integrity: sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
   '@rolldown/binding-wasm32-wasi@1.0.2':
     resolution: {integrity: sha512-mb1VobWn6NheziTk5/WEaR6AKVbrwT5sOi6C7zk3gy/pD1qtJfU1j4PgTo2NJnOtbL9Dl3Aeei8w9jJ7qC2jZQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2347,6 +2727,12 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12':
+    resolution: {integrity: sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@rolldown/binding-win32-arm64-msvc@1.0.2':
     resolution: {integrity: sha512-SqKonF56vA/L2yHwHYcEp2P34URpOZ7d1fS635cTkpDnUtEGdUbhI6NzsPdqeSWvAAeGDrxjWjNmibDIdFf9/A==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2359,6 +2745,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.12':
+    resolution: {integrity: sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@rolldown/binding-win32-x64-msvc@1.0.2':
     resolution: {integrity: sha512-v7qRI7gXLRINcOGXt+7YmAZ6iFuyZVMIoXAxhd8oP+DR9dLfL9GfNIx7PLMxmhZdvq8waUJBQiWN9EKNy+TRBQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2371,6 +2763,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rolldown/pluginutils@1.0.0-rc.12':
+    resolution: {integrity: sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==}
+
   '@rolldown/pluginutils@1.0.0-rc.18':
     resolution: {integrity: sha512-CUY5Mnhe64xQBGZEEXQ5WyZwsc1JU3vAZLIxtrsBt3LO6UOb+C8GunVKqe9sT8NeWb4lqSaoJtp2xo6GxT1MNw==}
 
@@ -2689,29 +3084,129 @@ packages:
   '@stomp/stompjs@7.2.1':
     resolution: {integrity: sha512-DLd/WeicnHS5SsWWSk3x6/pcivqchNaEvg9UEGVqAcfYEBVmS9D6980ckXjTtfpXLjdLDsd96M7IuX4w7nzq5g==}
 
-  '@svgr/babel-plugin-add-jsx-attribute@8.0.0':
-    resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
-    engines: {node: '>=14'}
+  '@storybook/addon-docs@10.6.5':
+    resolution: {integrity: sha512-Kt0pGLA+nwdu2g80p8jbdoiiKXxwQbhrY6uzMzq/0G1lytxpJUzrOQAM+GDcEbqyvpKr0u5d1q05/LPem/uooQ==}
     peerDependencies:
-      '@babel/core': 7.29.6
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.5
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@svgr/babel-plugin-remove-jsx-attribute@8.0.0':
-    resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==}
-    engines: {node: '>=14'}
+  '@storybook/addon-vitest@10.6.5':
+    resolution: {integrity: sha512-0N0E7TQgmdrPNCPqNiVdTWOEQ1Nes+YsUphYX/abzlp6ReOyYBoQJw6mZ0b7BN5ACgdXQsr9Tth161t72k+51Q==}
     peerDependencies:
-      '@babel/core': 7.29.6
+      '@vitest/browser': ^4.0.0 || ^5.0.0
+      '@vitest/browser-playwright': ^4.0.0 || ^5.0.0
+      storybook: ^10.6.5
+      vitest: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      vitest:
+        optional: true
 
-  '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0':
-    resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==}
-    engines: {node: '>=14'}
+  '@storybook/builder-vite@10.6.5':
+    resolution: {integrity: sha512-udrGjg3yt38pz4FxplypXxw1creIGS7N6QS8xfvTFM8MQNtPyojT/gZdd4fhX0dFrQx5MMuJEYJA5gUBiPsLtg==}
     peerDependencies:
-      '@babel/core': 7.29.6
+      storybook: ^10.6.5
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0':
-    resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@babel/core': 7.29.6
+  '@storybook/global@5.0.0':
+    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
+
+  '@storybook/icons@2.2.0':
+    resolution: {integrity: sha512-FpUB/xizIrV1ILhCIYFo+TtQNN9YEoLjfcnAW0JtOXL+BcM2aisSysI0B54JMWDnljriXySBHgN6ps4s9lb75A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@storybook/nextjs-vite@10.6.5':
+    resolution: {integrity: sha512-33xNYeCMU/i2ZM0XmOkjw3bldbMyUn2uhKjXq/qwXTYIk7L7o72a3MH+16jMTN1jjlATYEeOqgwmldV/6If9eg==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      next: ^14.1.0 || ^15.0.0 || ^16.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.5
+      typescript: '*'
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+      typescript:
+        optional: true
+
+  '@storybook/react-dom-shim@10.6.5':
+    resolution: {integrity: sha512-Qbbkp+5Otg32w8Ddav6rH6MGPiYVfEzrgn0HqbqlqS8kY+DRXo+NYXJwZTVSDSwrYPrfH+Ok2tV4uE8Zo0c3cg==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.5
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@storybook/react-vite@10.6.5':
+    resolution: {integrity: sha512-RsRF1drYtCku7+PMdRnuFt3EdG8Rn8I5G8ne0cBjn24xSn5Pbo9W+y9IoyD2llAeaeCpzEEdASY12wpKd3aCQA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.5
+      typescript: '>= 4.9.x'
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@storybook/react@10.6.5':
+    resolution: {integrity: sha512-vvRjRe/O8NRiQbGyA7Ne6h2jbD6GjwNZFkMdHl+0kZH8Z/S9ZWWmKmjCySvH/OmgighdCOQ98tcfND7m65WQBg==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.5
+      typescript: '>= 4.9.x'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+      typescript:
+        optional: true
+
+  '@svgr/babel-plugin-add-jsx-attribute@8.0.0':
+    resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': 7.29.6
+
+  '@svgr/babel-plugin-remove-jsx-attribute@8.0.0':
+    resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': 7.29.6
+
+  '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0':
+    resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': 7.29.6
+
+  '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0':
+    resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': 7.29.6
 
   '@svgr/babel-plugin-svg-dynamic-title@8.0.0':
     resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==}
@@ -2890,6 +3385,10 @@ packages:
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
 
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
   '@testing-library/react@16.3.2':
     resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
     engines: {node: '>=18'}
@@ -2905,6 +3404,12 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@testing-library/user-event@14.6.8':
+    resolution: {integrity: sha512-vgSSqnANMnkcYR/vUNDbwS7aM3OErRLNUG8vCVVlj4oc6cKffUrccX7UAS5AmJQQNZTSibi9z5GvvRZ0aYgUCQ==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@turbo/darwin-64@2.10.0':
     resolution: {integrity: sha512-EwvHThXzpY0KGd1/NAmuewI5D+aVa3Rl/OlxE36yfjUKb/+ySrfJrSlEFt8aD1OXwnnaHnQnPKHFndor0Zxlsg==}
     cpu: [x64]
@@ -2944,12 +3449,27 @@ packages:
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
+  '@types/doctrine@0.0.9':
+    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
+
   '@types/eslint-scope@3.7.7':
     resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
 
@@ -2968,6 +3488,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/mdx@2.0.14':
+    resolution: {integrity: sha512-T48PeuJtvLosNTPVhfnIp3i/n3a4g4Bad7YCq5k64D4u7NwDrAotikQ+5+sjtUvBmxCMlbo3dVL+C2dP0rWHzg==}
+
   '@types/node@20.19.30':
     resolution: {integrity: sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==}
 
@@ -2988,9 +3511,15 @@ packages:
   '@types/react@19.2.15':
     resolution: {integrity: sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==}
 
+  '@types/resolve@1.20.6':
+    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
+
   '@types/sockjs-client@1.5.4':
     resolution: {integrity: sha512-zk+uFZeWyvJ5ZFkLIwoGA/DfJ+pYzcZ8eH4H/EILCm2OBZyHH6Hkdna1/UWL/CFruh5wj6ES7g75SvUB0VsH5w==}
 
+  '@types/ws@8.18.2':
+    resolution: {integrity: sha512-67MQl+fpWKVTT1NYdnmo3U4sc/xPo/zQBncVnI74qmQa0z/b+1g6iYqNmGCPbxO+zz2aklb08a0oHfegiVd0/w==}
+
   '@unpic/core@1.0.3':
     resolution: {integrity: sha512-aum9YNVUGso7MjGLD0Rp/08kywCGLqZ03/q6VQBFFakDBOXWEc8D4kPGcZ8v5wEnGRex3lE+++bOuucBp3KJ/w==}
 
@@ -3055,6 +3584,20 @@ packages:
       react-server-dom-webpack:
         optional: true
 
+  '@vitest/browser-playwright@4.1.9':
+    resolution: {integrity: sha512-Bq1rOGf9waevzG3EOkO/dene6bvKTUsZMVg8S1i+WH3JcMjuXEjiahP9rAqZRELUqjBySOJsvvSWqK/B3wjKQw==}
+    peerDependencies:
+      playwright: '*'
+      vitest: 4.1.9
+
+  '@vitest/browser@4.1.9':
+    resolution: {integrity: sha512-j1BKtWmPcqpMhmx/L9EPLgAJpCb0zKfwoWLmqBbxaogCXHjOwHFSEoHCBfnGtx93xKQwilZ26m+UOsHqHMkRNg==}
+    peerDependencies:
+      vitest: 4.1.9
+
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
   '@vitest/expect@4.1.9':
     resolution: {integrity: sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==}
 
@@ -3069,6 +3612,9 @@ packages:
       vite:
         optional: true
 
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+
   '@vitest/pretty-format@4.1.9':
     resolution: {integrity: sha512-s0iufns3iIFitdgm+YR7g1whCAaGtXz459VS9/PqyKDEEFgYIhsHOQmXgIgDuYCt7DeQmiZT0Qe2OA2p4ZPu5A==}
 
@@ -3078,9 +3624,15 @@ packages:
   '@vitest/snapshot@4.1.9':
     resolution: {integrity: sha512-Jc7RKGNBo8Z28WYIm0Niej4xdSPByRf6mU58VpHQkd6Zh05rlnA+twjbK5HyeIGHxrzsc3mJgS43uM0CZKzaIA==}
 
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+
   '@vitest/spy@4.1.9':
     resolution: {integrity: sha512-fHpsS6mIi+PiEW+vcRVOMkX1oSaPKne3VOclSFICPcGOmfKgXPU5iAah+wcNcj2xPrCCmfq99IDGf+EojhhvhA==}
 
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
   '@vitest/utils@4.1.9':
     resolution: {integrity: sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==}
 
@@ -3129,6 +3681,9 @@ packages:
   '@webassemblyjs/wast-printer@1.14.1':
     resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
 
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
+
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
 
@@ -3231,6 +3786,10 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-types@0.16.3:
+    resolution: {integrity: sha512-FvWoWYfSCM6kRxCSH+MGLHIKKGRL6A6AW7Zek2O32REPQRdg131428uRTKMBYAeRd3XXAaHDS60Wpri7CdKDrA==}
+    engines: {node: '>=4'}
+
   astring@1.9.0:
     resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
     hasBin: true
@@ -3305,6 +3864,10 @@ packages:
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
+  bundle-name@4.1.1:
+    resolution: {integrity: sha512-DdH81/zPLVS11EUgWq3tEu/xn+EzljlMYooDNdzWEnFha3R3NBMpMV1UqYIpjYHV/SgpFKMIX1Oh7o06SjM/oA==}
+    engines: {node: '>=18'}
+
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -3327,6 +3890,10 @@ packages:
   caniuse-lite@1.0.30001799:
     resolution: {integrity: sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==}
 
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
@@ -3335,6 +3902,10 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -3492,6 +4063,9 @@ packages:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -3557,10 +4131,26 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.1:
+    resolution: {integrity: sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw==}
+    engines: {node: '>=18'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -3582,9 +4172,16 @@ packages:
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
@@ -3635,6 +4232,10 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  empathic@2.1.0:
+    resolution: {integrity: sha512-AnfC1ATldl49/cvZdLPDjBfrRNwbDO05aibiOtzQu3qtlbJtomNLhF30HEtn/7iBz50dlMECqATo3fG0LrdEgw==}
+    engines: {node: '>=14'}
+
   enhanced-resolve@5.18.4:
     resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
     engines: {node: '>=10.13.0'}
@@ -3718,6 +4319,11 @@ packages:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
 
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   esquery@1.7.0:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
@@ -3962,6 +4568,10 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
   image-size@2.0.2:
     resolution: {integrity: sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w==}
     engines: {node: '>=16.x'}
@@ -3975,6 +4585,10 @@ packages:
     resolution: {integrity: sha512-vR2B6HKIhaBjcZr2bLpFiJ1VbzOlRQ7aby4/gw5WPIzToLjqpfWw3VJ4sk1uDchoOODEirvO2jyrSPtUSL5CrQ==}
     engines: {node: '>=18'}
 
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -4000,6 +4614,11 @@ packages:
     resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
 
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -4012,6 +4631,11 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -4034,6 +4658,10 @@ packages:
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -4087,6 +4715,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
   kdbush@4.0.2:
     resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
 
@@ -4260,10 +4891,16 @@ packages:
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
@@ -4294,6 +4931,9 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  magic-string@1.4.5:
+    resolution: {integrity: sha512-oLLC2+YvQUfAa+vxoufE/yc1icb87M9iXIRqAoR/2EhE/8cb3SF/+Gi0c2By1B+5Vz2e2vQtUvHiu1+63Znh+w==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -4334,6 +4974,10 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
   minimatch@10.2.5:
     resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
     engines: {node: 18 || 20 || >=22}
@@ -4342,10 +4986,16 @@ packages:
     resolution: {integrity: sha512-MOwgjc8tfrpn5QQEvjijjmDVtMw2oL88ugTevzxQnzRLm6l3fVEF2gzU0kYeYYKD8C66+IdGX6peJ4MyUlUnPg==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   minipass@7.1.3:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  module-alias@2.3.5:
+    resolution: {integrity: sha512-hbei6S1tXkg/P+ZJTyUqqL66LOeg/40WGcZYPFzIeBltTCRm+O4IZ/KRtR9hGanXaJxuvPj9q9ldl/cmbV6Osw==}
+
   module-details-from-path@1.0.4:
     resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
 
@@ -4364,6 +5014,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  needle@2.9.1:
+    resolution: {integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
@@ -4471,10 +5126,21 @@ packages:
   ohash@2.0.11:
     resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
 
+  open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
+
   opener@1.5.2:
     resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
     hasBin: true
 
+  oxc-parser@0.127.0:
+    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-resolver@11.21.2:
+    resolution: {integrity: sha512-w5tLwYN3Zo24w5EeWJjJWZOwhYqTtC8PS2B1tIt7BZUuqTIcU07sQValbDw+rq7+AuAGzOHklgK+ifsy4lpXfw==}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -4529,6 +5195,10 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -4548,6 +5218,20 @@ packages:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
+  playwright-core@1.64.1:
+    resolution: {integrity: sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  playwright@1.64.1:
+    resolution: {integrity: sha512-HCrVhHr5QQuwYoswEUGTb7gGp522yflbv/ST8nF4sFWGuLjQCt17Q/EubpGGSNKYn1tsTCPZxqHhHCfVURu7UA==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  pngjs@7.0.0:
+    resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
+    engines: {node: '>=14.19.0'}
+
   postcss-import@15.1.0:
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -4602,6 +5286,9 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  probe-image-size@7.5.0:
+    resolution: {integrity: sha512-ietdx4XPgmnzHRZOq1/KtcnsBkL4bRsBe+Szj5Tuq1/KPqDG42OspG1IhJb7vz6Z9pSzhp0J6UPnw6hujJTWoQ==}
+
   progress@2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
@@ -4623,6 +5310,15 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  react-docgen-typescript@2.4.0:
+    resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
+    peerDependencies:
+      typescript: '>= 4.3.x'
+
+  react-docgen@8.0.4:
+    resolution: {integrity: sha512-gIYjtVTU4NCWZnb/LXVSWfClZXnjzX3+xxi69Tkfu4YsmYuqiOk8giLkKt/WwxWqh+U66CTh8Kqbha1uPv8/qQ==}
+    engines: {node: ^20.9.0 || >=22}
+
   react-dom@19.2.6:
     resolution: {integrity: sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==}
     peerDependencies:
@@ -4693,6 +5389,14 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  recast@0.23.21:
+    resolution: {integrity: sha512-mFAyJq9vUbSTARLZUvAEf1z3YxlvAwswbmxMx2mPA/MSm4KmpwvwvhsH/NIrZhyOuwD60Lzyw2qh83uCbgTPYw==}
+    engines: {node: '>= 4'}
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
   regenerate-unicode-properties@10.2.2:
     resolution: {integrity: sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==}
     engines: {node: '>=4'}
@@ -4742,6 +5446,11 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  rolldown@1.0.0-rc.12:
+    resolution: {integrity: sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
   rolldown@1.0.2:
     resolution: {integrity: sha512-oZx5zVDtVB44AW3eaifgDml1gWRDZGvjcfdxonE4swNPG98PrrXjaO/KrnUjzlMnztCCRVlUueA1kCXhARGk6g==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4760,12 +5469,19 @@ packages:
   rou3@0.8.1:
     resolution: {integrity: sha512-ePa+XGk00/3HuCqrEnK3LxJW7I0SdNg6EFzKUJG73hMAdDcOUC/i/aSz7LSDwLrGr33kal/rqOGydzwl6U7zBA==}
 
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
   satori@0.16.0:
     resolution: {integrity: sha512-ZvHN3ygzZ8FuxjSNB+mKBiF/NIoqHzlBGbD0MJiT+MvSsFOvotnWOhdTjxKzhHRT2wPC1QbhLzx2q/Y83VhfYQ==}
     engines: {node: '>=16'}
@@ -4820,6 +5536,10 @@ packages:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
 
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
@@ -4859,6 +5579,21 @@ packages:
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
+  storybook@10.6.5:
+    resolution: {integrity: sha512-qurC38Nx4PDF9YIq6GO95dpUx8a3B9AZwlcHBo4cOI9At09ifjQRsqcwcdOf2YX0cpVhFKmHkI20SWCrxqYQrg==}
+    hasBin: true
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      prettier: ^2 || ^3
+      vite-plus: ^0.1.15 || ^0.2.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      prettier:
+        optional: true
+      vite-plus:
+        optional: true
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -4882,6 +5617,18 @@ packages:
     resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
     engines: {node: '>=12'}
 
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  strip-indent@4.1.1:
+    resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
+    engines: {node: '>=12'}
+
   strip-literal@3.1.0:
     resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
 
@@ -5014,6 +5761,9 @@ packages:
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -5029,10 +5779,18 @@ packages:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
   tinyrainbow@3.1.0:
     resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
 
+  tinyspy@4.0.6:
+    resolution: {integrity: sha512-u8KszXvGfU68hVcZpRHKG28T0krMuv2G5nDhiHaMLen/gIuFEgIJhaJuO69qjnXg5paSrbPMFfx3brNuN8eVSg==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.0.21:
     resolution: {integrity: sha512-oVOMdHvgjqyzUZH1rOESgJP1uNe2bVrfK0jUHHmiM2rpEiRbf3j4BrsIc6JigJRbHGanQwuZv/R+LTcHsw+bLA==}
 
@@ -5059,6 +5817,10 @@ packages:
     resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
     engines: {node: '>=20'}
 
+  ts-dedent@2.3.0:
+    resolution: {integrity: sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg==}
+    engines: {node: '>=6.10'}
+
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
@@ -5072,6 +5834,10 @@ packages:
       typescript:
         optional: true
 
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -5128,6 +5894,10 @@ packages:
   unpic@4.2.2:
     resolution: {integrity: sha512-z6T2ScMgRV2y2H8MwwhY5xHZWXhUx/YxtOCGJwfURSl7ypVy4HpLIMWoIZKnnxQa/RKzM0kg8hUh0paIrpLfvw==}
 
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
   unstorage@2.0.0-alpha.7:
     resolution: {integrity: sha512-ELPztchk2zgFJnakyodVY3vJWGW9jy//keJ32IOJVGUMyaPydwcA1FtVvWqT0TNRch9H+cMNEGllfVFfScImog==}
     peerDependencies:
@@ -5265,11 +6035,74 @@ packages:
   vite-plugin-dynamic-import@1.6.0:
     resolution: {integrity: sha512-TM0sz70wfzTIo9YCxVFwS8OA9lNREsh+0vMHGSkWDTZ7bgd1Yjs5RV8EgB634l/91IsXJReg0xtmuQqP0mf+rg==}
 
+  vite-plugin-storybook-nextjs@10.6.5:
+    resolution: {integrity: sha512-XFHY6nscLgxtLvmuc68gaN3/6chIPGVY85CwXJnPCVfV64JgWTQhfu0NS+/EhlxpVW/ghCiVG3BEtB89pBvXtQ==}
+    peerDependencies:
+      next: ^14.1.0 || ^15.0.0 || ^16.0.0
+      storybook: ^10.6.5
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  vite-plugin-svgr@4.5.0:
+    resolution: {integrity: sha512-W+uoSpmVkSmNOGPSsDCWVW/DDAyv+9fap9AZXBvWiQqrboJ08j2vh0tFxTD/LjwqwAd3yYSVJgm54S/1GhbdnA==}
+    peerDependencies:
+      vite: '>=2.6.0'
+
+  vite-tsconfig-paths@5.1.4:
+    resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vite-tsconfig-paths@6.1.1:
     resolution: {integrity: sha512-2cihq7zliibCCZ8P9cKJrQBkfgdvcFkOOc3Y02o3GWUDLgqjWsZudaoiuOwO/gzTzy17cS5F7ZPo4bsnS4DGkg==}
     peerDependencies:
       vite: '*'
 
+  vite@8.0.3:
+    resolution: {integrity: sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.1.0
+      esbuild: 0.28.1
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: 2.8.3
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   vite@8.1.0:
     resolution: {integrity: sha512-BuJcQK/56NQTWDGn4ABea3q4SSBdNPWwNZKTkkUpcMPnLoquSYH8llRtSUIgoL1KSCpHt5eghLShn50mH36y7Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -5396,6 +6229,9 @@ packages:
     resolution: {integrity: sha512-HPuy+uuoTCaaoEoI1LQ3JN9+vrPBvEesnnX1jADHy728cHSMlq4wUc4afYqahq2B1mhQVZxCXOkNTnXltr+2vQ==}
     engines: {node: '>=10.13.0'}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   webpack@5.104.1:
     resolution: {integrity: sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==}
     engines: {node: '>=10.13.0'}
@@ -5459,6 +6295,34 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.21.0:
+    resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  ws@8.22.1:
+    resolution: {integrity: sha512-oyL6OPYme/CmiFvNuGzeoxCJ4nOrZE2O1FwM9MWM1AsGri6nLXB2pg+lNA8aLeXMSav0J6eIVS1j6vUPzUtK9g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
+
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -5516,6 +6380,8 @@ packages:
 
 snapshots:
 
+  '@adobe/css-tools@4.5.0': {}
+
   '@alloc/quick-lru@5.2.0': {}
 
   '@apm-js-collab/code-transformer-bundler-plugins@0.5.0':
@@ -5564,7 +6430,7 @@ snapshots:
 
   '@babel/code-frame@7.28.6':
     dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/helper-validator-identifier': 7.29.7
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
@@ -6297,7 +7163,7 @@ snapshots:
 
   '@babel/template@7.28.6':
     dependencies:
-      '@babel/code-frame': 7.28.6
+      '@babel/code-frame': 7.29.7
       '@babel/parser': 7.28.6
       '@babel/types': 7.28.6
 
@@ -6411,6 +7277,8 @@ snapshots:
   '@biomejs/cli-win32-x64@2.3.12':
     optional: true
 
+  '@blazediff/core@1.9.1': {}
+
   '@bramus/specificity@2.4.2':
     dependencies:
       css-tree: 3.2.1
@@ -6564,22 +7432,44 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/core@1.11.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.2
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/core@1.11.1':
     dependencies:
       '@emnapi/wasi-threads': 1.2.2
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/core@1.9.2':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/runtime@1.11.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/runtime@1.11.1':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/runtime@1.9.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
@@ -6805,6 +7695,14 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))':
+    dependencies:
+      glob: 13.0.6
+      react-docgen-typescript: 2.4.0(typescript@5.9.3)
+      vite: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -6824,11 +7722,19 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
+  '@jridgewell/sourcemap-codec@1.6.0': {}
+
   '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@mdx-js/react@3.1.1(@types/react@19.2.15)(react@19.2.6)':
+    dependencies:
+      '@types/mdx': 2.0.14
+      '@types/react': 19.2.15
+      react: 19.2.6
+
   '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -6836,6 +7742,13 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)':
+    dependencies:
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
   '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
     dependencies:
       '@emnapi/core': 1.11.1
@@ -6843,6 +7756,13 @@ snapshots:
       '@tybys/wasm-util': 0.10.3
     optional: true
 
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
   '@next/bundle-analyzer@16.2.9':
     dependencies:
       webpack-bundle-analyzer: 4.10.1
@@ -6876,9 +7796,9 @@ snapshots:
   '@next/swc-win32-x64-msvc@16.2.9':
     optional: true
 
-  '@next/third-parties@16.2.9(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)':
+  '@next/third-parties@16.2.9(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)':
     dependencies:
-      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react: 19.2.6
       third-party-capital: 1.0.20
 
@@ -6929,13 +7849,146 @@ snapshots:
 
   '@opentelemetry/semantic-conventions@1.41.1': {}
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-project/types@0.122.0': {}
+
+  '@oxc-project/types@0.127.0': {}
+
   '@oxc-project/types@0.132.0': {}
 
   '@oxc-project/types@0.137.0': {}
 
+  '@oxc-resolver/binding-android-arm-eabi@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-android-arm64@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-arm64@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-x64@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-freebsd-x64@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-musl@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-openharmony-arm64@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-wasm32-wasi@11.21.2':
+    dependencies:
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
+    optional: true
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.2':
+    optional: true
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.2':
+    optional: true
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@playwright/test@1.64.1':
+    dependencies:
+      playwright: 1.64.1
+
   '@polka/url@1.0.0-next.29': {}
 
   '@radix-ui/number@1.1.1': {}
@@ -7273,78 +8326,122 @@ snapshots:
 
   '@resvg/resvg-wasm@2.4.0': {}
 
+  '@rolldown/binding-android-arm64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-android-arm64@1.0.2':
     optional: true
 
   '@rolldown/binding-android-arm64@1.1.3':
     optional: true
 
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-darwin-arm64@1.0.2':
     optional: true
 
   '@rolldown/binding-darwin-arm64@1.1.3':
     optional: true
 
+  '@rolldown/binding-darwin-x64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-darwin-x64@1.0.2':
     optional: true
 
   '@rolldown/binding-darwin-x64@1.1.3':
     optional: true
 
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-freebsd-x64@1.0.2':
     optional: true
 
   '@rolldown/binding-freebsd-x64@1.1.3':
     optional: true
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.2':
     optional: true
 
   '@rolldown/binding-linux-arm-gnueabihf@1.1.3':
     optional: true
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-arm64-gnu@1.0.2':
     optional: true
 
   '@rolldown/binding-linux-arm64-gnu@1.1.3':
     optional: true
 
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-arm64-musl@1.0.2':
     optional: true
 
   '@rolldown/binding-linux-arm64-musl@1.1.3':
     optional: true
 
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-ppc64-gnu@1.0.2':
     optional: true
 
   '@rolldown/binding-linux-ppc64-gnu@1.1.3':
     optional: true
 
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-s390x-gnu@1.0.2':
     optional: true
 
   '@rolldown/binding-linux-s390x-gnu@1.1.3':
     optional: true
 
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-x64-gnu@1.0.2':
     optional: true
 
   '@rolldown/binding-linux-x64-gnu@1.1.3':
     optional: true
 
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-linux-x64-musl@1.0.2':
     optional: true
 
   '@rolldown/binding-linux-x64-musl@1.1.3':
     optional: true
 
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-openharmony-arm64@1.0.2':
     optional: true
 
   '@rolldown/binding-openharmony-arm64@1.1.3':
     optional: true
 
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.12(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
+
   '@rolldown/binding-wasm32-wasi@1.0.2':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -7359,18 +8456,26 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
     optional: true
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-win32-arm64-msvc@1.0.2':
     optional: true
 
   '@rolldown/binding-win32-arm64-msvc@1.1.3':
     optional: true
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.12':
+    optional: true
+
   '@rolldown/binding-win32-x64-msvc@1.0.2':
     optional: true
 
   '@rolldown/binding-win32-x64-msvc@1.1.3':
     optional: true
 
+  '@rolldown/pluginutils@1.0.0-rc.12': {}
+
   '@rolldown/pluginutils@1.0.0-rc.18': {}
 
   '@rolldown/pluginutils@1.0.1': {}
@@ -7549,7 +8654,32 @@ snapshots:
     dependencies:
       '@sentry/core': 10.61.0
 
-  '@sentry/nextjs@10.61.0(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)(webpack@5.104.1(postcss@8.5.15))':
+  '@sentry/nextjs@10.61.0(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)(postcss@8.5.15))':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@rollup/plugin-commonjs': 28.0.1(rollup@4.62.2)
+      '@sentry/browser-utils': 10.61.0
+      '@sentry/bundler-plugin-core': 5.3.0
+      '@sentry/conventions': 0.12.0
+      '@sentry/core': 10.61.0
+      '@sentry/node': 10.61.0(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))
+      '@sentry/opentelemetry': 10.61.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))
+      '@sentry/react': 10.61.0(react@19.2.6)
+      '@sentry/vercel-edge': 10.61.0
+      '@sentry/webpack-plugin': 5.3.0(webpack@5.104.1(esbuild@0.28.1)(postcss@8.5.15))
+      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      rollup: 4.62.2
+      stacktrace-parser: 0.1.11
+    transitivePeerDependencies:
+      - '@opentelemetry/core'
+      - '@opentelemetry/exporter-trace-otlp-http'
+      - '@opentelemetry/sdk-trace-base'
+      - encoding
+      - react
+      - supports-color
+      - webpack
+
+  '@sentry/nextjs@10.61.0(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)(webpack@5.104.1(postcss@8.5.15))':
     dependencies:
       '@opentelemetry/api': 1.9.1
       '@rollup/plugin-commonjs': 28.0.1(rollup@4.62.2)
@@ -7562,7 +8692,7 @@ snapshots:
       '@sentry/react': 10.61.0(react@19.2.6)
       '@sentry/vercel-edge': 10.61.0
       '@sentry/webpack-plugin': 5.3.0(webpack@5.104.1(postcss@8.5.15))
-      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       rollup: 4.62.2
       stacktrace-parser: 0.1.11
     transitivePeerDependencies:
@@ -7642,6 +8772,14 @@ snapshots:
       '@opentelemetry/api': 1.9.1
       '@sentry/core': 10.61.0
 
+  '@sentry/webpack-plugin@5.3.0(webpack@5.104.1(esbuild@0.28.1)(postcss@8.5.15))':
+    dependencies:
+      '@sentry/bundler-plugin-core': 5.3.0
+      webpack: 5.104.1(esbuild@0.28.1)(postcss@8.5.15)
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@sentry/webpack-plugin@5.3.0(webpack@5.104.1(postcss@8.5.15))':
     dependencies:
       '@sentry/bundler-plugin-core': 5.3.0
@@ -7667,6 +8805,115 @@ snapshots:
 
   '@stomp/stompjs@7.2.1': {}
 
+  '@storybook/addon-docs@10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))':
+    dependencies:
+      '@mdx-js/react': 3.1.1(@types/react@19.2.15)(react@19.2.6)
+      '@storybook/icons': 2.2.0(react@19.2.6)
+      '@storybook/react-dom-shim': 10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      storybook: 10.6.5(@types/react@19.2.15)(react@19.2.6)
+      ts-dedent: 2.3.0
+      unplugin: 2.3.11
+    optionalDependencies:
+      '@types/react': 19.2.15
+    transitivePeerDependencies:
+      - '@types/react-dom'
+
+  '@storybook/addon-vitest@10.6.5(@vitest/browser-playwright@4.1.9(playwright@1.64.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9))(@vitest/browser@4.1.9(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))))(react@19.2.6)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))':
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.2.0(react@19.2.6)
+      storybook: 10.6.5(@types/react@19.2.15)(react@19.2.6)
+    optionalDependencies:
+      '@vitest/browser': 4.1.9(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))
+      '@vitest/browser-playwright': 4.1.9(playwright@1.64.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9)
+      vitest: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+    transitivePeerDependencies:
+      - react
+
+  '@storybook/builder-vite@10.6.5(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))':
+    dependencies:
+      storybook: 10.6.5(@types/react@19.2.15)(react@19.2.6)
+      ts-dedent: 2.3.0
+      vite: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+
+  '@storybook/global@5.0.0': {}
+
+  '@storybook/icons@2.2.0(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+
+  '@storybook/nextjs-vite@10.6.5(@babel/core@7.29.6)(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(rollup@4.62.2)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))':
+    dependencies:
+      '@storybook/builder-vite': 10.6.5(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      '@storybook/react': 10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(typescript@5.9.3)
+      '@storybook/react-vite': 10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(rollup@4.62.2)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      storybook: 10.6.5(@types/react@19.2.15)(react@19.2.6)
+      styled-jsx: 5.1.6(@babel/core@7.29.6)(react@19.2.6)
+      vite: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+      vite-plugin-storybook-nextjs: 10.6.5(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(rollup@4.62.2)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+    optionalDependencies:
+      '@types/react': 19.2.15
+      '@types/react-dom': 19.2.3(@types/react@19.2.15)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+      - rollup
+      - supports-color
+
+  '@storybook/react-dom-shim@10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))':
+    dependencies:
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      storybook: 10.6.5(@types/react@19.2.15)(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.15
+      '@types/react-dom': 19.2.3(@types/react@19.2.15)
+
+  '@storybook/react-vite@10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(rollup@4.62.2)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))':
+    dependencies:
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      '@rollup/pluginutils': 5.3.0(rollup@4.62.2)
+      '@storybook/builder-vite': 10.6.5(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      '@storybook/react': 10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(typescript@5.9.3)
+      empathic: 2.1.0
+      magic-string: 1.4.5
+      react: 19.2.6
+      react-docgen: 8.0.4
+      react-dom: 19.2.6(react@19.2.6)
+      resolve: 1.22.11
+      storybook: 10.6.5(@types/react@19.2.15)(react@19.2.6)
+      tsconfig-paths: 4.2.0
+      vite: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - rollup
+      - supports-color
+
+  '@storybook/react@10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(typescript@5.9.3)':
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/react-dom-shim': 10.6.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))
+      react: 19.2.6
+      react-docgen: 8.0.4
+      react-docgen-typescript: 2.4.0(typescript@5.9.3)
+      react-dom: 19.2.6(react@19.2.6)
+      storybook: 10.6.5(@types/react@19.2.15)(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.15
+      '@types/react-dom': 19.2.3(@types/react@19.2.15)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.29.6)':
     dependencies:
       '@babel/core': 7.29.6
@@ -7857,7 +9104,7 @@ snapshots:
 
   '@testing-library/dom@10.4.1':
     dependencies:
-      '@babel/code-frame': 7.28.6
+      '@babel/code-frame': 7.29.7
       '@babel/runtime': 7.28.6
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
@@ -7866,6 +9113,15 @@ snapshots:
       picocolors: 1.1.1
       pretty-format: 27.5.1
 
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.5.0
+      aria-query: 5.3.0
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
   '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.28.6
@@ -7876,6 +9132,20 @@ snapshots:
       '@types/react': 19.2.10
       '@types/react-dom': 19.2.3(@types/react@19.2.10)
 
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@testing-library/dom': 10.4.1
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.15
+      '@types/react-dom': 19.2.3(@types/react@19.2.15)
+
+  '@testing-library/user-event@14.6.8(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
   '@turbo/darwin-64@2.10.0':
     optional: true
 
@@ -7906,6 +9176,27 @@ snapshots:
 
   '@types/aria-query@5.0.4': {}
 
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
   '@types/chai@5.2.3':
     dependencies:
       '@types/deep-eql': 4.0.2
@@ -7913,6 +9204,8 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
+  '@types/doctrine@0.0.9': {}
+
   '@types/eslint-scope@3.7.7':
     dependencies:
       '@types/eslint': 9.6.1
@@ -7931,6 +9224,8 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/mdx@2.0.14': {}
+
   '@types/node@20.19.30':
     dependencies:
       undici-types: 6.21.0
@@ -7959,28 +9254,34 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
+  '@types/resolve@1.20.6': {}
+
   '@types/sockjs-client@1.5.4': {}
 
+  '@types/ws@8.18.2':
+    dependencies:
+      '@types/node': 20.19.43
+
   '@unpic/core@1.0.3':
     dependencies:
       unpic: 4.2.2
 
-  '@unpic/react@1.0.2(next@16.2.9(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@unpic/react@1.0.2(next@16.2.9(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@unpic/core': 1.0.3
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
-      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
 
   '@vercel/og@0.8.6':
     dependencies:
       '@resvg/resvg-wasm': 2.4.0
       satori: 0.16.0
 
-  '@vercel/speed-insights@1.3.1(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)':
+  '@vercel/speed-insights@1.3.1(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)':
     optionalDependencies:
-      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react: 19.2.6
 
   '@vitejs/plugin-react@6.0.2(babel-plugin-react-compiler@1.0.0)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))':
@@ -8006,6 +9307,76 @@ snapshots:
     optionalDependencies:
       react-server-dom-webpack: 19.2.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1))
 
+  '@vitest/browser-playwright@4.1.9(playwright@1.64.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9)':
+    dependencies:
+      '@vitest/browser': 4.1.9(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))
+      '@vitest/mocker': 4.1.9(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      playwright: 1.64.1
+      tinyrainbow: 3.1.0
+      vitest: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/browser-playwright@4.1.9(playwright@1.64.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9)':
+    dependencies:
+      '@vitest/browser': 4.1.9(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.7)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))
+      '@vitest/mocker': 4.1.9(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      playwright: 1.64.1
+      tinyrainbow: 3.1.0
+      vitest: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.7)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+    optional: true
+
+  '@vitest/browser@4.1.9(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))':
+    dependencies:
+      '@blazediff/core': 1.9.1
+      '@vitest/mocker': 4.1.9(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/utils': 4.1.9
+      magic-string: 0.30.21
+      pngjs: 7.0.0
+      sirv: 3.0.2
+      tinyrainbow: 3.1.0
+      vitest: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      ws: 8.21.0
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/browser@4.1.9(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.7)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))':
+    dependencies:
+      '@blazediff/core': 1.9.1
+      '@vitest/mocker': 4.1.9(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/utils': 4.1.9
+      magic-string: 0.30.21
+      pngjs: 7.0.0
+      sirv: 3.0.2
+      tinyrainbow: 3.1.0
+      vitest: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.7)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      ws: 8.21.0
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+    optional: true
+
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
   '@vitest/expect@4.1.9':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -8015,6 +9386,14 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
+  '@vitest/mocker@4.1.9(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))':
+    dependencies:
+      '@vitest/spy': 4.1.9
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+
   '@vitest/mocker@4.1.9(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))':
     dependencies:
       '@vitest/spy': 4.1.9
@@ -8023,6 +9402,10 @@ snapshots:
     optionalDependencies:
       vite: 8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
 
+  '@vitest/pretty-format@3.2.4':
+    dependencies:
+      tinyrainbow: 2.0.0
+
   '@vitest/pretty-format@4.1.9':
     dependencies:
       tinyrainbow: 3.1.0
@@ -8039,8 +9422,18 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
 
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.6
+
   '@vitest/spy@4.1.9': {}
 
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
   '@vitest/utils@4.1.9':
     dependencies:
       '@vitest/pretty-format': 4.1.9
@@ -8123,6 +9516,8 @@ snapshots:
       '@webassemblyjs/ast': 1.14.1
       '@xtuc/long': 4.2.2
 
+  '@webcontainer/env@1.1.1': {}
+
   '@xtuc/ieee754@1.2.0': {}
 
   '@xtuc/long@4.2.2': {}
@@ -8204,6 +9599,10 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  ast-types@0.16.3:
+    dependencies:
+      tslib: 2.8.1
+
   astring@1.9.0: {}
 
   asynckit@0.4.0: {}
@@ -8287,6 +9686,10 @@ snapshots:
 
   buffer-from@1.1.2: {}
 
+  bundle-name@4.1.1:
+    dependencies:
+      run-applescript: 7.1.0
+
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -8302,6 +9705,14 @@ snapshots:
 
   caniuse-lite@1.0.30001799: {}
 
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
   chai@6.2.2: {}
 
   chalk@4.1.2:
@@ -8309,6 +9720,8 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  check-error@2.1.3: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -8469,6 +9882,8 @@ snapshots:
 
   css-what@6.2.2: {}
 
+  css.escape@1.5.1: {}
+
   cssesc@3.0.0: {}
 
   csso@5.0.5:
@@ -8500,8 +9915,19 @@ snapshots:
 
   decimal.js@10.6.0: {}
 
+  deep-eql@5.0.2: {}
+
   deepmerge@4.3.1: {}
 
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.1:
+    dependencies:
+      bundle-name: 4.1.1
+      default-browser-id: 5.0.1
+
+  define-lazy-prop@3.0.0: {}
+
   delayed-stream@1.0.0: {}
 
   dequal@2.0.3: {}
@@ -8514,8 +9940,14 @@ snapshots:
 
   dlv@1.1.3: {}
 
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
+
   dom-accessibility-api@0.5.16: {}
 
+  dom-accessibility-api@0.6.3: {}
+
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -8565,6 +9997,8 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  empathic@2.1.0: {}
+
   enhanced-resolve@5.18.4:
     dependencies:
       graceful-fs: 4.2.11
@@ -8641,7 +10075,6 @@ snapshots:
       '@esbuild/win32-arm64': 0.28.1
       '@esbuild/win32-ia32': 0.28.1
       '@esbuild/win32-x64': 0.28.1
-    optional: true
 
   escalade@3.2.0: {}
 
@@ -8654,6 +10087,8 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 4.3.0
 
+  esprima@4.0.1: {}
+
   esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
@@ -8876,6 +10311,10 @@ snapshots:
 
   husky@9.1.7: {}
 
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
   image-size@2.0.2: {}
 
   import-fresh@3.3.1:
@@ -8890,6 +10329,8 @@ snapshots:
       cjs-module-lexer: 2.2.0
       module-details-from-path: 1.0.4
 
+  indent-string@4.0.0: {}
+
   inherits@2.0.4: {}
 
   ini@6.0.0: {}
@@ -8910,6 +10351,8 @@ snapshots:
     dependencies:
       hasown: 2.0.2
 
+  is-docker@3.0.0: {}
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -8918,6 +10361,10 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
   is-number@7.0.0: {}
 
   is-obj@2.0.0: {}
@@ -8932,6 +10379,10 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.8
 
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
   isexe@2.0.0: {}
 
   jackspeak@3.4.3:
@@ -8992,6 +10443,8 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonc-parser@3.3.1: {}
+
   kdbush@4.0.2: {}
 
   lightningcss-android-arm64@1.30.2:
@@ -9116,10 +10569,14 @@ snapshots:
 
   lodash.debounce@4.0.8: {}
 
+  lodash.merge@4.6.2: {}
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
 
+  loupe@3.2.1: {}
+
   lower-case@2.0.2:
     dependencies:
       tslib: 2.8.1
@@ -9146,6 +10603,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magic-string@1.4.5:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
+
   math-intrinsics@1.1.0: {}
 
   mdn-data@2.0.28: {}
@@ -9173,6 +10634,8 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  min-indent@1.0.1: {}
+
   minimatch@10.2.5:
     dependencies:
       brace-expansion: 5.0.6
@@ -9181,8 +10644,12 @@ snapshots:
     dependencies:
       brace-expansion: 5.0.6
 
+  minimist@1.2.8: {}
+
   minipass@7.1.3: {}
 
+  module-alias@2.3.5: {}
+
   module-details-from-path@1.0.4: {}
 
   mrmime@2.0.1: {}
@@ -9197,6 +10664,14 @@ snapshots:
 
   nanoid@3.3.12: {}
 
+  needle@2.9.1:
+    dependencies:
+      debug: 3.2.7
+      iconv-lite: 0.4.24
+      sax: 1.6.0
+    transitivePeerDependencies:
+      - supports-color
+
   neo-async@2.6.2: {}
 
   next-render-analyzer@0.1.2:
@@ -9207,7 +10682,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       '@next/env': 16.2.9
       '@swc/helpers': 0.5.15
@@ -9227,6 +10702,7 @@ snapshots:
       '@next/swc-win32-arm64-msvc': 16.2.9
       '@next/swc-win32-x64-msvc': 16.2.9
       '@opentelemetry/api': 1.9.1
+      '@playwright/test': 1.64.1
       babel-plugin-react-compiler: 1.0.0
       sharp: 0.34.5
     transitivePeerDependencies:
@@ -9318,8 +10794,62 @@ snapshots:
 
   ohash@2.0.11: {}
 
+  open@10.2.0:
+    dependencies:
+      default-browser: 5.5.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      wsl-utils: 0.1.0
+
   opener@1.5.2: {}
 
+  oxc-parser@0.127.0:
+    dependencies:
+      '@oxc-project/types': 0.127.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.127.0
+      '@oxc-parser/binding-android-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-x64': 0.127.0
+      '@oxc-parser/binding-freebsd-x64': 0.127.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-musl': 0.127.0
+      '@oxc-parser/binding-openharmony-arm64': 0.127.0
+      '@oxc-parser/binding-wasm32-wasi': 0.127.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
+
+  oxc-resolver@11.21.2:
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.21.2
+      '@oxc-resolver/binding-android-arm64': 11.21.2
+      '@oxc-resolver/binding-darwin-arm64': 11.21.2
+      '@oxc-resolver/binding-darwin-x64': 11.21.2
+      '@oxc-resolver/binding-freebsd-x64': 11.21.2
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.21.2
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.21.2
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-arm64-musl': 11.21.2
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.21.2
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-x64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-x64-musl': 11.21.2
+      '@oxc-resolver/binding-openharmony-arm64': 11.21.2
+      '@oxc-resolver/binding-wasm32-wasi': 11.21.2
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.21.2
+      '@oxc-resolver/binding-win32-x64-msvc': 11.21.2
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -9343,7 +10873,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.28.6
+      '@babel/code-frame': 7.29.7
       error-ex: 1.3.4
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -9372,6 +10902,8 @@ snapshots:
 
   pathe@2.0.3: {}
 
+  pathval@2.0.1: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.2: {}
@@ -9382,6 +10914,14 @@ snapshots:
 
   pirates@4.0.7: {}
 
+  playwright-core@1.64.1: {}
+
+  playwright@1.64.1:
+    dependencies:
+      playwright-core: 1.64.1
+
+  pngjs@7.0.0: {}
+
   postcss-import@15.1.0(postcss@8.5.15):
     dependencies:
       postcss: 8.5.15
@@ -9429,6 +10969,13 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
+  probe-image-size@7.5.0:
+    dependencies:
+      lodash.merge: 4.6.2
+      needle: 2.9.1
+    transitivePeerDependencies:
+      - supports-color
+
   progress@2.0.3: {}
 
   proxy-from-env@1.1.0: {}
@@ -9441,6 +10988,25 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  react-docgen-typescript@2.4.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  react-docgen@8.0.4:
+    dependencies:
+      '@babel/core': 7.29.6
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.28.0
+      '@types/doctrine': 0.0.9
+      '@types/resolve': 1.20.6
+      doctrine: 3.0.0
+      resolve: 1.22.11
+      strip-indent: 4.1.1
+    transitivePeerDependencies:
+      - supports-color
+
   react-dom@19.2.6(react@19.2.6):
     dependencies:
       react: 19.2.6
@@ -9505,6 +11071,19 @@ snapshots:
     dependencies:
       picomatch: 2.3.2
 
+  recast@0.23.21:
+    dependencies:
+      ast-types: 0.16.3
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
   regenerate-unicode-properties@10.2.2:
     dependencies:
       regenerate: 1.4.2
@@ -9552,6 +11131,30 @@ snapshots:
 
   reusify@1.1.0: {}
 
+  rolldown@1.0.0-rc.12(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0):
+    dependencies:
+      '@oxc-project/types': 0.122.0
+      '@rolldown/pluginutils': 1.0.0-rc.12
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-rc.12
+      '@rolldown/binding-darwin-arm64': 1.0.0-rc.12
+      '@rolldown/binding-darwin-x64': 1.0.0-rc.12
+      '@rolldown/binding-freebsd-x64': 1.0.0-rc.12
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.12
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.12
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.12
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.12
+      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.12
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.12
+      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.12
+      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.12
+      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.12(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.12
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.12
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+
   rolldown@1.0.2:
     dependencies:
       '@oxc-project/types': 0.132.0
@@ -9627,12 +11230,16 @@ snapshots:
 
   rou3@0.8.1: {}
 
+  run-applescript@7.1.0: {}
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
 
   safe-buffer@5.2.1: {}
 
+  safer-buffer@2.1.2: {}
+
   satori@0.16.0:
     dependencies:
       '@shuding/opentype.js': 1.4.0-beta.0
@@ -9716,6 +11323,12 @@ snapshots:
       mrmime: 2.0.1
       totalist: 3.0.1
 
+  sirv@3.0.2:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
@@ -9755,6 +11368,32 @@ snapshots:
 
   std-env@4.1.0: {}
 
+  storybook@10.6.5(@types/react@19.2.15)(react@19.2.6):
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.2.0(react@19.2.6)
+      '@testing-library/dom': 10.4.1
+      '@testing-library/jest-dom': 6.9.1
+      '@testing-library/user-event': 14.6.8(@testing-library/dom@10.4.1)
+      '@vitest/expect': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
+      esbuild: 0.28.1
+      jsonc-parser: 3.3.1
+      open: 10.2.0
+      oxc-parser: 0.127.0
+      oxc-resolver: 11.21.2
+      recast: 0.23.21
+      semver: 7.8.4
+      use-sync-external-store: 1.6.0(react@19.2.6)
+      ws: 8.22.1
+    optionalDependencies:
+      '@types/react': 19.2.15
+    transitivePeerDependencies:
+      - bufferutil
+      - react
+      - utf-8-validate
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -9783,6 +11422,14 @@ snapshots:
     dependencies:
       ansi-regex: 6.2.2
 
+  strip-bom@3.0.0: {}
+
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  strip-indent@4.1.1: {}
+
   strip-literal@3.1.0:
     dependencies:
       js-tokens: 9.0.1
@@ -9872,6 +11519,17 @@ snapshots:
 
   tapable@2.3.3: {}
 
+  terser-webpack-plugin@5.6.1(esbuild@0.28.1)(postcss@8.5.15)(webpack@5.104.1(esbuild@0.28.1)(postcss@8.5.15)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.48.0
+      webpack: 5.104.1(esbuild@0.28.1)(postcss@8.5.15)
+    optionalDependencies:
+      esbuild: 0.28.1
+      postcss: 8.5.15
+
   terser-webpack-plugin@5.6.1(esbuild@0.28.1)(webpack@5.104.1(esbuild@0.28.1)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
@@ -9911,6 +11569,8 @@ snapshots:
 
   tiny-inflate@1.0.3: {}
 
+  tiny-invariant@1.3.3: {}
+
   tinybench@2.9.0: {}
 
   tinyexec@1.0.2: {}
@@ -9925,8 +11585,12 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyrainbow@2.0.0: {}
+
   tinyrainbow@3.1.0: {}
 
+  tinyspy@4.0.6: {}
+
   tldts-core@7.0.21: {}
 
   tldts@7.0.21:
@@ -9949,12 +11613,20 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  ts-dedent@2.3.0: {}
+
   ts-interface-checker@0.1.13: {}
 
   tsconfck@3.1.6(typescript@5.9.3):
     optionalDependencies:
       typescript: 5.9.3
 
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@2.8.1: {}
 
   tsx@4.21.0:
@@ -10006,6 +11678,13 @@ snapshots:
 
   unpic@4.2.2: {}
 
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.17.0
+      picomatch: 4.0.4
+      webpack-virtual-modules: 0.6.2
+
   unstorage@2.0.0-alpha.7(chokidar@3.6.0)(db0@0.3.4)(lru-cache@11.5.1)(ofetch@2.0.0-alpha.3):
     optionalDependencies:
       chokidar: 3.6.0
@@ -10042,13 +11721,12 @@ snapshots:
   use-sync-external-store@1.6.0(react@19.2.6):
     dependencies:
       react: 19.2.6
-    optional: true
 
   util-deprecate@1.0.2: {}
 
-  vinext@0.0.51(@vitejs/plugin-react@6.0.2(babel-plugin-react-compiler@1.0.0)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))(@vitejs/plugin-rsc@0.5.26(react-dom@19.2.6(react@19.2.6))(react-server-dom-webpack@19.2.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)))(react@19.2.6)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))(next@16.2.9(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react-server-dom-webpack@19.2.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)))(react@19.2.6)(typescript@5.9.3)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)):
+  vinext@0.0.51(@vitejs/plugin-react@6.0.2(babel-plugin-react-compiler@1.0.0)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))(@vitejs/plugin-rsc@0.5.26(react-dom@19.2.6(react@19.2.6))(react-server-dom-webpack@19.2.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)))(react@19.2.6)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)))(next@16.2.9(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react-server-dom-webpack@19.2.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(webpack@5.104.1(esbuild@0.28.1)))(react@19.2.6)(typescript@5.9.3)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)):
     dependencies:
-      '@unpic/react': 1.0.2(next@16.2.9(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@unpic/react': 1.0.2(next@16.2.9(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@vercel/og': 0.8.6
       '@vitejs/plugin-react': 6.0.2(babel-plugin-react-compiler@1.0.0)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
       image-size: 2.0.2
@@ -10081,6 +11759,47 @@ snapshots:
       fast-glob: 3.3.3
       magic-string: 0.30.21
 
+  vite-plugin-storybook-nextjs@10.6.5(next@16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(rollup@4.62.2)(storybook@10.6.5(@types/react@19.2.15)(react@19.2.6))(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)):
+    dependencies:
+      '@next/env': 16.2.9
+      '@rollup/pluginutils': 5.3.0(rollup@4.62.2)
+      magic-string: 0.30.21
+      module-alias: 2.3.5
+      next: 16.2.9(@babel/core@7.29.6)(@opentelemetry/api@1.9.1)(@playwright/test@1.64.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      pathe: 2.0.3
+      probe-image-size: 7.5.0
+      semver: 7.8.4
+      storybook: 10.6.5(@types/react@19.2.15)(react@19.2.6)
+      ts-dedent: 2.3.0
+      vite: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+      vite-tsconfig-paths: 5.1.4(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - typescript
+
+  vite-plugin-svgr@4.5.0(rollup@4.62.2)(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)):
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.62.2)
+      '@svgr/core': 8.1.0(typescript@5.9.3)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))
+      vite: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - typescript
+
+  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)):
+    dependencies:
+      debug: 4.4.3
+      globrex: 0.1.2
+      tsconfck: 3.1.6(typescript@5.9.3)
+    optionalDependencies:
+      vite: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   vite-tsconfig-paths@6.1.1(typescript@5.9.3)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)):
     dependencies:
       debug: 4.4.3
@@ -10091,6 +11810,25 @@ snapshots:
       - supports-color
       - typescript
 
+  vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.15
+      rolldown: 1.0.0-rc.12(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 20.19.30
+      esbuild: 0.28.1
+      fsevents: 2.3.3
+      jiti: 1.21.7
+      terser: 5.48.0
+      tsx: 4.21.0
+      yaml: 2.8.3
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+
   vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3):
     dependencies:
       lightningcss: 1.32.0
@@ -10111,7 +11849,37 @@ snapshots:
     optionalDependencies:
       vite: 8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
 
-  vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.7)(jsdom@29.1.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)):
+  vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@20.19.30)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)):
+    dependencies:
+      '@vitest/expect': 4.1.9
+      '@vitest/mocker': 4.1.9(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/pretty-format': 4.1.9
+      '@vitest/runner': 4.1.9
+      '@vitest/snapshot': 4.1.9
+      '@vitest/spy': 4.1.9
+      '@vitest/utils': 4.1.9
+      es-module-lexer: 2.1.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.3
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 4.1.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.17
+      tinyrainbow: 3.1.0
+      vite: 8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.1
+      '@types/node': 20.19.30
+      '@vitest/browser-playwright': 4.1.9(playwright@1.64.1)(vite@8.0.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)(@types/node@20.19.30)(esbuild@0.28.1)(jiti@1.21.7)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9)
+      jsdom: 29.1.1
+    transitivePeerDependencies:
+      - msw
+
+  vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.7)(@vitest/browser-playwright@4.1.9)(jsdom@29.1.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3)):
     dependencies:
       '@vitest/expect': 4.1.9
       '@vitest/mocker': 4.1.9(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))
@@ -10136,6 +11904,7 @@ snapshots:
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
       '@types/node': 22.19.7
+      '@vitest/browser-playwright': 4.1.9(playwright@1.64.1)(vite@8.1.0(@types/node@22.19.7)(esbuild@0.28.1)(jiti@2.6.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.9)
       jsdom: 29.1.1
     transitivePeerDependencies:
       - msw
@@ -10179,6 +11948,8 @@ snapshots:
 
   webpack-sources@3.5.0: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   webpack@5.104.1(esbuild@0.28.1):
     dependencies:
       '@types/eslint-scope': 3.7.7
@@ -10220,6 +11991,47 @@ snapshots:
       - postcss
       - uglify-js
 
+  webpack@5.104.1(esbuild@0.28.1)(postcss@8.5.15):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.9
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.17.0
+      acorn-import-phases: 1.0.4(acorn@8.17.0)
+      browserslist: 4.28.2
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.24.0
+      es-module-lexer: 2.1.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.2
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.3
+      terser-webpack-plugin: 5.6.1(esbuild@0.28.1)(postcss@8.5.15)(webpack@5.104.1(esbuild@0.28.1)(postcss@8.5.15))
+      watchpack: 2.5.2
+      webpack-sources: 3.5.0
+    transitivePeerDependencies:
+      - '@minify-html/node'
+      - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
+      - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
+      - uglify-js
+
   webpack@5.104.1(postcss@8.5.15):
     dependencies:
       '@types/eslint-scope': 3.7.7
@@ -10313,6 +12125,14 @@ snapshots:
 
   ws@7.5.11: {}
 
+  ws@8.21.0: {}
+
+  ws@8.22.1: {}
+
+  wsl-utils@0.1.0:
+    dependencies:
+      is-wsl: 3.1.1
+
   xml-name-validator@5.0.0: {}
 
   xmlchars@2.2.0: {}