')
+ expect(spaced && signatureFingerprintOf(spaced)).toBe(plain && signatureFingerprintOf(plain))
+
+ const edited = signatureNodeOf(schema, INSIDE.replace('1234', '5678'))
+ expect(edited && signatureFingerprintOf(edited)).not.toBe(fresh && signatureFingerprintOf(fresh))
+ })
+
+ it('그림도 견준다 — 글이 같아도 그림이 다르면 다른 서명', () => {
+ const withLogo = signatureNodeOf(schema, OUTSIDE)
+ const withoutLogo = signatureNodeOf(schema, OUTSIDE.replace(/]*>/, ''))
+ expect(withLogo && signatureFingerprintOf(withLogo)).not.toBe(withoutLogo && signatureFingerprintOf(withoutLogo))
+ })
+})
+
+describe('서명 자리 지키기 — 하나뿐 · 앞에는 늘 빈 줄 (2026-11-10 리뷰 M3)', () => {
+ const editors: Editor[] = []
+
+ beforeAll(installProseMirrorDom)
+
+ afterEach(() => {
+ for (const editor of editors.splice(0)) editor.destroy()
+ })
+
+ /** 쓰기 화면의 편집기와 같게 — 플러그인(서명 자리 지키기)은 화면에 붙일 때 켜진다 */
+ function mountedEditor(content: string): Editor {
+ const editor = new Editor({ element: null, extensions: createMailEditorExtensions(), content })
+ editors.push(editor)
+ editor.mount(document.createElement('div'))
+ return editor
+ }
+
+ /** 서명 앞 빈 줄 안에 커서 — 맨 위 단계 index 번째 문단의 처음 */
+ function cursorInto(editor: Editor, index: number) {
+ let pos = 0
+ for (let at = 0; at < index; at += 1) pos += editor.state.doc.child(at).nodeSize
+ editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, pos + 1)))
+ }
+
+ /** 저장하고 다시 연 모양 — 보내는 모양(빈 줄을 지킨 문서 → toMailHtml)에서 서버 정화처럼 data-* 를 지우고 다시 읽는다 */
+ function reopened(editor: Editor): ProseMirrorNode {
+ const html = toMailHtml(getHTMLFromFragment(withSignatureBoundary(editor.state.doc).content, schema))
+ return doc(sanitizeLikeServer(html))
+ }
+
+ const WRITTEN = newMailHtmlWithSignature(INSIDE).replace('', '
안녕하세요.
')
+ const SIGNED = '[서명:김아라 · 인프라팀내선 1234]'
+
+ it('서명 자리가 하나 더 들어오면(서명 안에서 복사해 붙여 넣기 등) 처음부터 있던 것만 두고 나머지는 문단으로 푼다', () => {
+ const editor = mountedEditor(newMailHtmlWithSignature(INSIDE).replace('', '
')
+ })
+})
diff --git a/frontend/src/components/mail/editor/mail-signature-block.ts b/frontend/src/components/mail/editor/mail-signature-block.ts
new file mode 100644
index 0000000..1892b0d
--- /dev/null
+++ b/frontend/src/components/mail/editor/mail-signature-block.ts
@@ -0,0 +1,269 @@
+// 쓰기 본문의 서명 자리 — 16단계 [서명 ▾] (디자인 원본 Signature16 6 · 계약 2절 "앱이 만드는 모양")
+// 서명 자리는 빈 줄 하나 뒤의 서명 덩어리다. 편집기 안에서는 블록 노드 하나(mailSignature — 안은 서명의 문단들)이고,
+// 보낼 때는 속성 없는
로 나간다 — 앱과 같은 경계라 임시 저장본을 다시 열어도(웹 · 앱 모두) 그 자리를 다시 찾는다.
+// - 읽기: 쓰기 화면이 처음 넣는 서명은 표시를 단 div(data-mail-signature — mail-signature.ts 의 signatureBlockHtml),
+// 저장본 · 보내기 취소로 되돌린 메일은 "맨 위 단계에서 빈 문단 바로 뒤의 속성 없는 div 이고 글이나 그림이 있다"(서버 정화가 data-* 를 지운다).
+// 맨 위 단계 = 문서 바로 아래 · 또는 문서에 하나뿐인 감싸는 div(보낸 본문의 글꼴 div) 바로 아래. 원문 인용 안의 div 는 서명 자리가 아니다.
+// - 서명 자리는 하나다 — 붙여 넣기 · 끌어 놓기로 하나 더 생기면 처음부터 있던 것만 두고 나머지는 문단으로 푼다(appendTransaction).
+// - 서명 자리 바로 앞에는 늘 빈 줄 — 그 빈 줄에 글을 쓰거나 Backspace 로 지우면 빈 줄을 다시 넣는다(appendTransaction — 한글 조합 중에는 미룬다),
+// 보내고 저장하는 모양도 한 번 더 지킨다(withSignatureBoundary — MailEditor 의 contentOf). 빈 줄이 빠지면 다시 열 때 경계를 찾지 못한다(2026-11-10 리뷰 M3).
+// - 바꾸기(replaceSignatureTransaction): 그 자리만 새 서명으로 — 쓴 글 · 인용 · 첨부는 그대로이고 실행 취소로 되돌린다.
+// 넣지 않음은 서명 자리와 그 앞의 빈 줄을 뺀다. 서명 자리가 없으면 처음 넣는 자리(새 메일은 본문 끝, 답장 · 전달은 원문 인용 위)에 빈 줄 하나 뒤로 넣는다.
+// - 어느 서명이 들었는지(signatureFingerprintOf)는 글(공백을 하나로 줄여)과 그림 주소로 견준다 — 고쳤으면 어느 서명과도 같지 않다.
+import { Node, createDocument } from '@tiptap/core'
+import { Fragment, type Node as ProseMirrorNode, type Schema } from '@tiptap/pm/model'
+import { Plugin, PluginKey, type EditorState, type Transaction } from '@tiptap/pm/state'
+
+import { blockLines, normalizeIncomingHtml } from '@/components/mail/editor/mail-serialize'
+import { SIGNATURE_IMAGE_NODE } from '@/components/mail/editor/signature-image'
+import { MAIL_SIGNATURE_MARK_ATTRIBUTE } from '@/shared/constants/mail-signature'
+import { signatureBlockHtml } from '@/shared/utils/mail-signature'
+import { normalizeSignatureImageSrc } from '@/shared/utils/outgoing-html-rules'
+
+export const MAIL_SIGNATURE_NODE = 'mailSignature'
+
+/** 빈 줄로 보는 공백 — JS 의 \s 는 nbsp(U+00A0)도 포함한다 */
+const BLANK = /^\s*$/
+
+/** 글도 그림도 없는 문단인가 (DOM) — ·
· 공백뿐 */
+function isEmptyParagraphElement(element: Element | null): boolean {
+ return (
+ element !== null &&
+ element.tagName === 'P' &&
+ BLANK.test(element.textContent ?? '') &&
+ element.querySelector('img') === null
+ )
+}
+
+/** 맨 위 단계인가 — 문서(body) 바로 아래, 또는 body 에 하나뿐인 감싸는 div(보낸 본문의 글꼴 div) 바로 아래 */
+function isTopLevelElement(element: HTMLElement): boolean {
+ const parent = element.parentElement
+ if (!parent) return false
+ if (parent.tagName === 'BODY') return true
+ const grand = parent.parentElement
+ return (
+ parent.tagName === 'DIV' &&
+ !parent.hasAttribute(MAIL_SIGNATURE_MARK_ATTRIBUTE) &&
+ grand?.tagName === 'BODY' &&
+ grand.children.length === 1
+ )
+}
+
+/**
+ * 저장본의 서명 경계인가 — 맨 위 단계에서 빈 문단 바로 뒤의 속성 없는 div 이고 글이나 그림이 있다 (계약 2절 "앱이 만드는 모양").
+ * 인용 경계 표시(대용량 첨부)가 남은 빈 div 는 서명이 아니다
+ */
+export function isSignatureBoundaryElement(element: HTMLElement): boolean {
+ if (element.tagName !== 'DIV' || element.attributes.length > 0) return false
+ if (!isTopLevelElement(element)) return false
+ if (!isEmptyParagraphElement(element.previousElementSibling)) return false
+ return !BLANK.test(element.textContent ?? '') || element.querySelector('img') !== null
+}
+
+/** 글도 그림도 없는 문단인가 (편집기 문서) */
+export function isEmptyParagraphNode(node: ProseMirrorNode): boolean {
+ if (node.type.name !== 'paragraph') return false
+ let empty = BLANK.test(node.textContent)
+ if (empty) {
+ node.descendants((child) => {
+ if (child.type.name === SIGNATURE_IMAGE_NODE) empty = false
+ return empty
+ })
+ }
+ return empty
+}
+
+/** 문서 맨 위 단계의 서명 자리 — 없으면 null */
+export function findSignatureBlock(doc: ProseMirrorNode): { node: ProseMirrorNode; pos: number; index: number } | null {
+ let pos = 0
+ for (let index = 0; index < doc.childCount; index += 1) {
+ const child = doc.child(index)
+ if (child.type.name === MAIL_SIGNATURE_NODE) return { node: child, pos, index }
+ pos += child.nodeSize
+ }
+ return null
+}
+
+/** 서명 비교 값 — 글(공백을 하나로)과 그림 주소. 같은 서명을 넣은 자리 · 저장본에서 되찾은 자리가 같은 값이 된다 */
+export function signatureFingerprintOf(node: ProseMirrorNode): string {
+ const text = blockLines(node).join('\n').replace(/\s+/g, ' ').trim()
+ const images: string[] = []
+ node.descendants((child) => {
+ if (child.type.name === SIGNATURE_IMAGE_NODE) images.push(normalizeSignatureImageSrc(child.attrs.src) ?? '')
+ return true
+ })
+ return `${text}\n${images.join(' ')}`
+}
+
+/** 서명 HTML → 서명 자리 노드 (편집기 스키마로 읽는다 — 스키마에 없는 것은 빠진다). 읽을 것이 없으면 null */
+export function signatureNodeOf(schema: Schema, html: string): ProseMirrorNode | null {
+ const doc = createDocument(signatureBlockHtml(normalizeIncomingHtml(html)), schema)
+ const first = doc.firstChild
+ return first?.type.name === MAIL_SIGNATURE_NODE ? first : null
+}
+
+/** 맨 위 단계의 첫 원문 인용 자리 — 없으면 null */
+function mailQuoteIndex(doc: ProseMirrorNode): number | null {
+ for (let index = 0; index < doc.childCount; index += 1) {
+ const child = doc.child(index)
+ if (child.type.name === 'blockquote' && child.attrs.mailQuote) return index
+ }
+ return null
+}
+
+/** 맨 위 단계 index 번째 블록이 시작하는 자리 */
+function positionOfIndex(doc: ProseMirrorNode, index: number): number {
+ let pos = 0
+ for (let at = 0; at < index && at < doc.childCount; at += 1) pos += doc.child(at).nodeSize
+ return pos
+}
+
+/**
+ * 서명 자리가 없을 때 넣을 자리와 넣을 것 — 처음 넣는 자리와 같다: 새 메일은 본문 끝, 답장 · 전달은 원문 인용 위.
+ * 쓴 글의 마지막 블록 뒤에 빈 줄 하나 · 서명 (그 자리에 이미 빈 줄이 있으면 그것을 쓴다). 쓴 글이 없으면 쓸 줄 · 빈 줄 · 서명
+ */
+function insertionOf(doc: ProseMirrorNode): { index: number; blankLines: number } {
+ const limit = mailQuoteIndex(doc) ?? doc.childCount
+ let last = -1
+ for (let index = 0; index < limit; index += 1) {
+ if (!isEmptyParagraphNode(doc.child(index))) last = index
+ }
+ if (last < 0) {
+ // 쓴 글이 없다 — 쓸 줄과 빈 줄 하나를 둔다 (있는 빈 줄을 먼저 쓴다)
+ const present = Math.min(limit, 2)
+ return { index: present, blankLines: 2 - present }
+ }
+ const after = last + 1
+ const reuse = after < limit && isEmptyParagraphNode(doc.child(after))
+ return reuse ? { index: after + 1, blankLines: 0 } : { index: after, blankLines: 1 }
+}
+
+/**
+ * 서명 자리를 바꾸는 거래 — signature 가 null 이면 서명 자리와 그 앞의 빈 줄을 뺀다(없으면 바꿀 것이 없다 — null).
+ * 서명 자리가 없으면 처음 넣는 자리에 넣는다
+ */
+export function replaceSignatureTransaction(state: EditorState, signature: ProseMirrorNode | null): Transaction | null {
+ const { doc, schema } = state
+ const found = findSignatureBlock(doc)
+ const tr = state.tr
+ if (found && signature) {
+ tr.replaceWith(found.pos, found.pos + found.node.nodeSize, signature)
+ return tr
+ }
+ if (found) {
+ const before = found.index > 0 ? doc.child(found.index - 1) : null
+ const start = before && isEmptyParagraphNode(before) ? found.pos - before.nodeSize : found.pos
+ tr.delete(start, found.pos + found.node.nodeSize)
+ return tr
+ }
+ const paragraph = schema.nodes.paragraph
+ if (!signature || !paragraph) return null
+ const { index, blankLines } = insertionOf(doc)
+ const blanks = Array.from({ length: blankLines }, () => paragraph.create())
+ tr.insert(positionOfIndex(doc, index), Fragment.fromArray([...blanks, signature]))
+ return tr
+}
+
+/** 서명 자리 바로 앞이 빈 줄이 아니면 그 서명 자리 — 그 앞에 빈 줄을 넣어야 경계가 선다. 서명 자리가 없거나 이미 빈 줄이면 null */
+function blockMissingBlankLine(doc: ProseMirrorNode): { pos: number; index: number } | null {
+ const found = findSignatureBlock(doc)
+ if (!found) return null
+ const before = found.index > 0 ? doc.child(found.index - 1) : null
+ return before && isEmptyParagraphNode(before) ? null : found
+}
+
+/**
+ * 보내고 저장할 문서 — 서명 자리 바로 앞에 빈 줄이 없으면 하나 넣은 문서 (있으면 그대로).
+ * 편집기는 늘 빈 줄을 지키지만(아래 appendTransaction) 한글 조합 중에는 미루므로, 보내는 · 저장하는 모양에서 한 번 더 지킨다 —
+ * 빈 줄이 빠지면 다시 열 때 서명 자리를 찾지 못한다(계약 2절 "앱이 만드는 모양"의 경계). 쓴 글은 지우지 않는다
+ */
+export function withSignatureBoundary(doc: ProseMirrorNode): ProseMirrorNode {
+ const missing = blockMissingBlankLine(doc)
+ const paragraph = doc.type.schema.nodes.paragraph
+ if (!missing || !paragraph) return doc
+ const children: ProseMirrorNode[] = []
+ doc.forEach((child, _offset, index) => {
+ if (index === missing.index) children.push(paragraph.create())
+ children.push(child)
+ })
+ return doc.copy(Fragment.fromArray(children))
+}
+
+const signatureBlockKey = new PluginKey('mailSignatureBlock')
+
+/**
+ * 서명 자리는 하나 — 붙여 넣기(서명 안에서 복사한 글은 서명 자리째 붙는다) 등으로 둘 이상이 되면 처음부터 있던 것만 두고 나머지는 문단으로 푼다.
+ * 처음부터 있던 것을 모르면(없었거나 지워졌다) 첫 것을 둔다
+ */
+function unwrapExtraSignatures(
+ transactions: readonly Transaction[],
+ oldState: EditorState,
+ newState: EditorState,
+ tr: Transaction,
+) {
+ const blocks: { node: ProseMirrorNode; pos: number }[] = []
+ newState.doc.forEach((child, offset) => {
+ if (child.type.name === MAIL_SIGNATURE_NODE) blocks.push({ node: child, pos: offset })
+ })
+ if (blocks.length < 2) return
+ const previous = findSignatureBlock(oldState.doc)
+ let kept = 0
+ if (previous) {
+ let mapped: number | null = previous.pos
+ for (const transaction of transactions) {
+ const result = transaction.mapping.mapResult(mapped)
+ mapped = result.deleted ? null : result.pos
+ if (mapped === null) break
+ }
+ const index = blocks.findIndex((block) => block.pos === mapped)
+ if (index >= 0) kept = index
+ }
+ // 뒤에서부터 풀어 앞 블록의 자리가 바뀌지 않게
+ for (let index = blocks.length - 1; index >= 0; index -= 1) {
+ if (index === kept) continue
+ const block = blocks[index]
+ if (block) tr.replaceWith(block.pos, block.pos + block.node.nodeSize, block.node.content)
+ }
+}
+
+/**
+ * 서명 자리 지키기 — 문서가 바뀐 거래 뒤에 (1) 서명 자리를 하나로 (2) 서명 자리 바로 앞에 빈 줄을 둔다.
+ * (2)는 그 빈 줄에 글을 쓰거나(Backspace · Delete 로) 빈 줄을 지웠을 때 빈 줄을 다시 넣는 것이다 — 쓴 글은 그대로 두고 그 아래 · 서명 위에 새 빈 줄,
+ * 커서는 쓰던 자리 그대로, 실행 취소는 그 입력과 한 번에 되돌린다(덧붙인 거래는 입력과 같은 기록 묶음).
+ * 한글을 조합하는 중(거래의 composition 표시)에는 미룬다 — 조합 중인 글 옆의 화면을 바꾸지 않게. 다음 거래 · 보내고 저장하는 모양(withSignatureBoundary)이 채운다
+ */
+function guardSignatureBlock(transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) {
+ if (!transactions.some((transaction) => transaction.docChanged)) return null
+ const tr = newState.tr
+ unwrapExtraSignatures(transactions, oldState, newState, tr)
+ const composing = transactions.some((transaction) => Boolean(transaction.getMeta('composition')))
+ const paragraph = newState.schema.nodes.paragraph
+ const missing = composing ? null : blockMissingBlankLine(tr.doc)
+ if (missing && paragraph) tr.insert(missing.pos, paragraph.create())
+ return tr.docChanged ? tr : null
+}
+
+/** 서명 자리 노드 — 쓰기 본문 스키마(mail-extensions.ts)에 든다. 서명 칸(SignatureEditor) 스키마에는 없다 */
+export const MailSignatureBlock = Node.create({
+ name: MAIL_SIGNATURE_NODE,
+ group: 'block',
+ content: 'block+',
+
+ parseHTML() {
+ return [
+ // 쓰기 화면이 처음 넣는 서명 — 표시로 안다 (속성 없는 div 규칙보다 먼저)
+ { tag: `div[${MAIL_SIGNATURE_MARK_ATTRIBUTE}]`, priority: 60 },
+ // 저장본 · 앱이 만든 본문 — 빈 문단 뒤의 속성 없는 div
+ { tag: 'div', getAttrs: (element: HTMLElement) => (isSignatureBoundaryElement(element) ? null : false) },
+ ]
+ },
+
+ // 보낼 때 · 저장할 때 속성 없는 div — 앱과 같은 경계 (표시는 서버 정화가 어차피 지운다)
+ renderHTML() {
+ return ['div', 0]
+ },
+
+ addProseMirrorPlugins() {
+ return [new Plugin({ key: signatureBlockKey, appendTransaction: guardSignatureBlock })]
+ },
+})
diff --git a/frontend/src/components/mail/editor/signature/SignatureDefaultsField.vue b/frontend/src/components/mail/editor/signature/SignatureDefaultsField.vue
new file mode 100644
index 0000000..b70342d
--- /dev/null
+++ b/frontend/src/components/mail/editor/signature/SignatureDefaultsField.vue
@@ -0,0 +1,155 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/mail/editor/signature/SignatureDeleteDialog.vue b/frontend/src/components/mail/editor/signature/SignatureDeleteDialog.vue
new file mode 100644
index 0000000..7248363
--- /dev/null
+++ b/frontend/src/components/mail/editor/signature/SignatureDeleteDialog.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/mail/editor/signature/SignatureEditor.spec.ts b/frontend/src/components/mail/editor/signature/SignatureEditor.spec.ts
new file mode 100644
index 0000000..2193661
--- /dev/null
+++ b/frontend/src/components/mail/editor/signature/SignatureEditor.spec.ts
@@ -0,0 +1,99 @@
+import { afterEach, beforeAll, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+
+import { editorOf, installProseMirrorDom, pasteEvent } from '@/test-utils/prosemirror-dom'
+import SignatureEditor from './SignatureEditor.vue'
+
+// 공용 편집기 — 서명 칸 · 부재중 자동 응답 내용 칸(16단계)이 함께 쓴다 (prop 은 phase16 shared-editor.md)
+
+const IMAGE_ID = '3f1c0a2e-0f1b-4f2a-9a1e-6c9f0a1b2c3d'
+
+describe('SignatureEditor — 공용 편집기 (16단계)', () => {
+ const mounted: VueWrapper[] = []
+
+ beforeAll(installProseMirrorDom)
+
+ afterEach(() => {
+ for (const wrapper of mounted.splice(0)) wrapper.unmount()
+ document.body.innerHTML = ''
+ })
+
+ function mountEditor(props: Record = {}) {
+ const wrapper = mount(SignatureEditor, {
+ attachTo: document.body,
+ props: { labelledBy: 'field-label', ...props },
+ })
+ mounted.push(wrapper)
+ return wrapper
+ }
+
+ const toolNames = (wrapper: VueWrapper) =>
+ wrapper.findAll('[role="toolbar"] button').map((button) => button.attributes('aria-label'))
+
+ it('기본값은 서명 칸 그대로 — 편집 영역 #signature-body · 툴바 "서명 서식" · 그림 단추', () => {
+ const wrapper = mountEditor()
+ expect(wrapper.find('#signature-body').exists()).toBe(true)
+ expect(wrapper.get('[role="toolbar"]').attributes()).toMatchObject({
+ 'aria-label': '서명 서식',
+ 'aria-controls': 'signature-body',
+ })
+ expect(toolNames(wrapper)).toEqual(['굵게', '기울임', '밑줄', '글자 색: 기본', '링크', '그림 넣기'])
+ })
+
+ it('부재중 내용 칸처럼 — id · 툴바 이름을 바꾸고 그림을 끄면 그림 단추 · 그림 노드가 없고 파일을 받지 않는다', async () => {
+ const wrapper = mountEditor({
+ bodyId: 'vacation-body',
+ toolbarLabel: '자동 응답 서식',
+ allowImages: false,
+ initialHtml: `
