모바일 메뉴와 주요 화면 UX 개선 및 시각 검수

apps/web/e2e/uc-auth-onboarding.spec.ts

@@ -126,13 +126,13 @@ const LEGAL_DOCS = {
   source_note: "운영 전 초안 문서입니다.",
 };
 
-async function routeOnboardingData(page: Page) {
+async function routeOnboardingData(page: Page, legalDocs = LEGAL_DOCS) {
   await page.route("**/api/users/me", (route) => {
     if (route.request().method() !== "GET") return route.fallback();
     return route.fulfill(jsonRoute(FRESH_PROFILE));
   });
   await page.route("**/api/users/legal-docs", (route) =>
-    route.fulfill(jsonRoute(LEGAL_DOCS)),
+    route.fulfill(jsonRoute(legalDocs)),
   );
 }
 
@@ -143,6 +143,20 @@ async function setupFreshLearnerOnOnboarding(page: Page) {
   await routeOnboardingData(page);
 }
 
+const LONG_LEGAL_DOCS = {
+  ...LEGAL_DOCS,
+  terms: {
+    ...LEGAL_DOCS.terms,
+    title: "Vignette 서비스 이용약관 초안",
+    version: "terms-draft-2026-06-27",
+  },
+  privacy: {
+    ...LEGAL_DOCS.privacy,
+    title: "Vignette 개인정보 처리방침 초안",
+    version: "privacy-draft-2026-06-27",
+  },
+};
+
 /** 온보딩 폼의 텍스트 필수 입력을 전부 채운다(동의 체크는 호출부 책임). */
 async function fillOnboardingTextFields(page: Page, phone = "010-1234-5678") {
   await page.getByLabel("닉네임").fill("비넷 유스케이스");
@@ -289,6 +303,54 @@ test.describe("uc auth-onboarding", () => {
     await expect(page.locator(".ob-legal .ob-note")).toHaveText("운영 전 초안 문서입니다.");
   });
 
+  test("좁은 화면에서도 약관 제목·버전을 모두 읽고 문서를 펼친다", async ({ page }) => {
+    for (const viewport of [
+      { width: 320, height: 844 },
+      { width: 390, height: 844 },
+      { width: 1440, height: 900 },
+    ]) {
+      await page.setViewportSize(viewport);
+      await routeUnmockedApi(page);
+      await routeMe(page, () => makeMe({ onboarding_completed_at: null, nickname: "" }));
+      await routeOnboardingData(page, LONG_LEGAL_DOCS);
+
+      await page.goto("/onboarding");
+      const details = page.locator(".ob-legal details");
+      const summaries = details.locator("summary");
+      await expect(summaries).toHaveCount(2);
+
+      for (let index = 0; index < 2; index += 1) {
+        const summary = summaries.nth(index);
+        const title = summary.locator(".ob-legal__title");
+        const version = summary.locator(".ob-legal__version");
+        await expect(title).toHaveText(index === 0 ? LONG_LEGAL_DOCS.terms.title : LONG_LEGAL_DOCS.privacy.title);
+        await expect(version).toHaveText(index === 0 ? LONG_LEGAL_DOCS.terms.version : LONG_LEGAL_DOCS.privacy.version);
+
+        const geometry = await summary.evaluate((element) => {
+          const title = element.querySelector<HTMLElement>(".ob-legal__title");
+          const version = element.querySelector<HTMLElement>(".ob-legal__version");
+          if (!title || !version) throw new Error("약관 제목 또는 버전 요소가 없습니다.");
+          const summaryRect = element.getBoundingClientRect();
+          const titleRect = title.getBoundingClientRect();
+          const versionRect = version.getBoundingClientRect();
+          return {
+            summaryHeight: summaryRect.height,
+            titleScrollWidth: title.scrollWidth,
+            titleWidth: title.clientWidth,
+            versionTop: versionRect.top,
+            titleBottom: titleRect.bottom,
+          };
+        });
+        expect(geometry.summaryHeight).toBeGreaterThanOrEqual(44);
+        expect(geometry.titleScrollWidth).toBeLessThanOrEqual(geometry.titleWidth);
+        expect(geometry.versionTop).toBeGreaterThanOrEqual(geometry.titleBottom);
+
+        await summary.click();
+        await expect(details.nth(index)).toHaveAttribute("open", "");
+      }
+    }
+  });
+
   // usecase: 신규 사용자가 연락처를 전화번호가 아닌 값으로 넣고 저장하려 한다
   test("온보딩 연락처 형식이 틀리면 저장하지 않고 형식 오류를 안내한다", async ({ page }) => {
     await setupFreshLearnerOnOnboarding(page);