feat(frontend): 설정 › 휴대폰 앱과 휴대폰 받기 화면 /app 을 더한다

확정 보드 SettingsMobileApp 대로 PC 에서는 QR 로 휴대폰에 넘기고, 셸 밖 /app(로그인 필요)에서 휴대폰으로 받는다.
내려받기 전에 세션을 확인하고, 올린 판이 없으면(404 RES_001) 알림 없이 안내와 문의 줄을 보인다.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/router/index.spec.ts

@@ -44,6 +44,30 @@ describe('router 가드', () => {
     expect(router.currentRoute.value.query.redirect).toBe('/settings/mail/large-files')
   })
 
+  // 휴대폰 받기 화면 /app (2026-11-08 — 디자인 README "휴대폰 앱 받기") — 앱 틀 밖의 보호 화면. QR 코드 · 앱의 [새 버전 받기]가 연다
+  it('휴대폰 받기 화면(/app)은 로그인해야 열린다 — 세션이 없으면 로그인으로, 돌아올 곳은 /app', async () => {
+    const requests = installMockApi(() => fail(401, 'AUTH_001'))
+
+    await router.push('/app')
+
+    expect(requests.map((request) => request.url)).toEqual(['/auth/me', '/auth/refresh'])
+    expect(router.currentRoute.value.name).toBe('login')
+    expect(router.currentRoute.value.query.redirect).toBe('/app')
+  })
+
+  it('로그인해 둔 브라우저는 /app 을 바로 연다(탭 제목 "휴대폰 앱 받기 · ARA SYSTEM") — 로그인 화면의 redirect=/app 은 /app 으로 돌려보낸다', async () => {
+    installMockApi(() => ok(USER))
+    useAuthStore().markAuthenticated(USER)
+
+    await router.push('/app')
+    expect(router.currentRoute.value.name).toBe('mobile-app')
+    expect(router.currentRoute.value.meta).toMatchObject({ requiresAuth: true, title: '휴대폰 앱 받기' })
+    expect(document.title).toBe('휴대폰 앱 받기 · ARA SYSTEM')
+
+    await router.push('/login?redirect=/app')
+    expect(router.currentRoute.value.fullPath).toBe('/app')
+  })
+
   // 제한된 세션 (13단계 — 계약 6절) — 로그인은 됐지만 새 비밀번호 · 2단계 켜기를 마칠 때까지 보호 화면 대신 로그인 틀의 그 단계
   it('제한된 세션이면 보호 화면 대신 로그인으로 — 돌아올 곳은 가려던 주소', async () => {
     installMockApi(() => ok({ ...USER, restriction: 'passwordChange', twoFactorDeadline: null }))

frontend/src/router/routes.ts

@@ -3,6 +3,12 @@ import type { RouteRecordRaw } from 'vue-router'
 import { CONTACTS_ROUTES } from '@/shared/constants/contacts'
 import { PUBLIC_SHARE_ROUTE } from '@/shared/constants/large-file'
 import { MAIL_PRINT_ROUTE } from '@/shared/constants/mail-print'
+import {
+  MOBILE_APP_PAGE_TEXT,
+  MOBILE_APP_PATH,
+  MOBILE_APP_ROUTE,
+  MOBILE_APP_SETTINGS_TEXT,
+} from '@/shared/constants/mobile-app'
 import { SETTINGS_ROUTES } from '@/shared/constants/settings-menu'
 import {
   MAIL_SCHEDULED_MESSAGE_ROUTE,
@@ -41,6 +47,15 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('@/pages/mail/MailPrintPage.vue'),
     meta: { requiresAuth: true, title: '메일 인쇄' },
   },
+  {
+    // 휴대폰 받기 화면 (2026-11-08 — 디자인 README "휴대폰 앱 받기 › 휴대폰 받기 화면 /app") — 앱 틀 없이 안드로이드 앱(APK) 받기.
+    // 설정 › 휴대폰 앱의 QR 코드와 앱의 [새 버전 받기]가 휴대폰 브라우저로 연다. 로그인해야 열린다 — 로그인하지 않았으면
+    // 가드가 로그인 화면으로 보냈다가(?redirect=/app) 로그인을 마치면 돌아온다. 경로는 앱도 쓰는 약속이다(MOBILE_APP_PATH)
+    path: MOBILE_APP_PATH,
+    name: MOBILE_APP_ROUTE,
+    component: () => import('@/pages/mobile-app/MobileAppPage.vue'),
+    meta: { requiresAuth: true, title: MOBILE_APP_PAGE_TEXT.title },
+  },
   {
     path: '/mail',
     component: () => import('@/pages/mail/MailLayout.vue'),
@@ -96,7 +111,7 @@ export const routes: RouteRecordRaw[] = [
     ],
   },
   {
-    // 설정 — 왼쪽 메뉴(계정 › 비밀번호 · 2단계 인증 · 앱 비밀번호 · 메일 프로그램 연결 · 로그인 기록 / 메일 › 서명 · 부재중 자동 응답 · 필터 · 보내기 · 읽기 ·
+    // 설정 — 왼쪽 메뉴(계정 › 비밀번호 · 2단계 인증 · 앱 비밀번호 · 메일 프로그램 연결 · 휴대폰 앱 · 로그인 기록 / 메일 › 서명 · 부재중 자동 응답 · 필터 · 보내기 · 읽기 ·
     // 차단한 주소 · 대용량 첨부 · 알림) + 하위 화면. /settings 는 첫 메뉴(계정 › 비밀번호)로 바꿔 끼운다 (앱 레일의 "설정")
     path: '/settings',
     component: () => import('@/pages/settings/SettingsLayout.vue'),
@@ -129,6 +144,13 @@ export const routes: RouteRecordRaw[] = [
         component: () => import('@/pages/settings/AccountMailClientsPage.vue'),
         meta: { title: '메일 프로그램 연결' },
       },
+      {
+        // 휴대폰 앱 (2026-11-08 — 디자인 README "휴대폰 앱 받기 › 설정 › 계정 › 휴대폰 앱") — 안드로이드 앱(APK) 받기 · QR · 설치 방법
+        path: 'account/mobile-app',
+        name: SETTINGS_ROUTES.mobileApp,
+        component: () => import('@/pages/settings/AccountMobileAppPage.vue'),
+        meta: { title: MOBILE_APP_SETTINGS_TEXT.title },
+      },
       {
         path: 'account/login-history',
         name: SETTINGS_ROUTES.loginHistory,