feat(frontend): 쓰기 화면 나가기 확인·읽기 화면 본문 안내·내 메일 답장 받는 사람

- 쓰기 화면을 연 뒤 바꾼 것이 있으면 떠나기 전에 묻는다 — 앱 안 이동은 확인 대화상자, 탭 닫기·새로고침은 브라우저 확인창.
  보낸 뒤·보내는 중·세션이 끝났을 때는 묻지 않고, 보내는 중에 떠나면 결과는 알림으로만 알린다(떠난 양식은 건드리지 않는다).
  대화상자는 공용 ModalDialog 로 모았다 — 세션 만료 대화상자도 같은 것을 쓴다
- 본문 길이 초과는 MAIL_007 문구로 본문 아래에 알린다 (서버가 같은 코드를 돌려줘도 같다, 발송 키는 그대로)
- 읽기 화면에 본문 안내(서식 없이 표시·표시할 수 없음·앞부분만 표시). 잘린 원문을 인용하면 생략 표시를 둔다.
  인용할 원문은 읽기 화면과 같은 규칙으로 고른다 — 공백뿐인 HTML·그림만 남는 HTML 은 글자 본문으로
- 붙여 넣은 글·원문 인용에서 8px 미만 글자 크기와 알파 0.3 미만 글자 색을 버린다 (서버와 같은 규칙, 같은 표본 표 105행)
- 내가 보낸 메일에 답장하면 받는 사람이 원래 받는 사람이다 (전에는 받는 사람 칸이 비었다)

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

frontend/src/test-utils/outgoing-style-samples.ts

@@ -13,6 +13,9 @@ export const STYLE_SAMPLES: readonly (readonly [property: string, value: string,
   ['color', 'rgb(23, 92, 211)', true],
   ['color', 'RGB(1,2,3)', true],
   ['color', 'rgba(0, 0, 0, 0.5)', true],
+  ['color', 'rgba(0, 0, 0, 0.3)', true],
+  ['color', 'rgba(0, 0, 0, 0.29)', false],
+  ['color', 'rgba(0, 0, 0, 0)', false],
   ['color', 'red', false],
   ['color', 'transparent', false],
   ['color', 'currentcolor', false],
@@ -26,11 +29,14 @@ export const STYLE_SAMPLES: readonly (readonly [property: string, value: string,
   ['background-color', '#FFF1A8', true],
   ['background-color', 'yellow', false],
   ['background-color', 'transparent', false],
-  // 글자 크기 — px 만, 1~99.99px
+  ['background-color', 'rgba(0, 0, 0, 0)', true],
+  // 글자 크기 — px 만, 8~99.99px (8px 미만은 보이지 않게 숨긴 글로 보고 지운다)
   ['font-size', '14px', true],
   ['font-size', '12.5px', true],
   ['font-size', '13.33px', true],
-  ['font-size', '1px', true],
+  ['font-size', '1px', false],
+  ['font-size', '8px', true],
+  ['font-size', '7.99px', false],
   ['font-size', '99.99px', true],
   ['font-size', '0', false],
   ['font-size', '0px', false],

frontend/src/test-utils/router.ts

@@ -1,6 +1,15 @@
 // 단위 테스트 전용 — 앱과 같은 이름의 라우트를 가진 메모리 라우터 (화면은 빈 컴포넌트)
-import { h, type FunctionalComponent } from 'vue'
-import { createMemoryHistory, createRouter, type Router } from 'vue-router'
+import { computed, h, type FunctionalComponent } from 'vue'
+import { createMemoryHistory, createRouter, matchedRouteKey, type Router } from 'vue-router'
+
+/**
+ * RouterView 없이 바로 띄운 화면에 "지금 그리는 경로"를 준다 — 화면의 onBeforeRouteLeave · onBeforeRouteUpdate 가 그 경로에 걸린다
+ * (RouterView 가 하위 화면에 주는 값과 같다). 띄우기 전에 router.push 로 그 경로에 가 있어야 한다.
+ * 사용: mount(Page, { global: { plugins: [pinia, router], provide: routeViewProvide(router) } })
+ */
+export function routeViewProvide(router: Router): Record<symbol, unknown> {
+  return { [matchedRouteKey as symbol]: computed(() => router.currentRoute.value.matched.at(-1)) }
+}
 
 const Empty: FunctionalComponent = () => h('div')