merge: Ref 호환 Tiptap 편집 기능 통합

2026-08-19 16:57:25 +00:00
parent c5fb5e2638 7d39044e2f
commit 0c0f0e45a9
7 changed files with 535 additions and 37 deletions
@@ -69,6 +69,25 @@ describe('nation HTML purification', () => {
        expect(clean).toContain('https://player.vimeo.com/video/1234');
    });

+    it('preserves the Tiptap font, color, background, alignment, rule, and uploaded image contract', () => {
+        const source = [
+            '<p style="text-align:center">',
+            '<span style="font-family:Pretendard, sans-serif;font-size:22px;color:#123456;background-color:#fedcba">방침</span>',
+            '</p><hr><img src="https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp" alt="방침.png">',
+        ].join('');
+
+        const clean = purifyNationHtml(source);
+
+        expect(clean).toContain('style="text-align:center"');
+        expect(clean).toContain(
+            'style="font-family:Pretendard, sans-serif;font-size:22px;color:#123456;background-color:#fedcba"'
+        );
+        expect(clean).toContain('<hr />');
+        expect(clean).toContain(
+            'src="https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp"'
+        );
+    });
+
    it('is idempotent for already-purified stored values', () => {
        const first = purifyNationHtml('<p style="color:red"><b>방침</b></p>');
        expect(purifyNationHtml(first)).toBe(first);
@@ -13,6 +13,7 @@ type FixtureState = {
    appointedGeneralId?: number;
    noticeMutationInput?: string;
    scoutMutationInput?: string;
+    uploadDataUrl?: string;
 };

 type TrpcRequestPayload = {
@@ -249,6 +250,17 @@ const installFixture = async (page: Page, state: FixtureState) => {
                state.scoutMutationInput = typeof jsonInput.msg === 'string' ? jsonInput.msg : undefined;
                return response({ ok: true, msg: purifiedScoutResponse });
            }
+            if (operation === 'board.uploadImage') {
+                state.uploadDataUrl = typeof jsonInput.dataUrl === 'string' ? jsonInput.dataUrl : undefined;
+                return response({
+                    url: 'https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp',
+                    width: 1,
+                    height: 1,
+                    format: 'webp',
+                    animated: false,
+                    size: 68,
+                });
+            }
            if (['nation.setBill', 'nation.setSecretLimit', 'nation.setBlockScout'].includes(operation))
                return response({ ok: true });
            if (operation === 'nation.setBlockWar') return response({ availableCnt: 4 });
@@ -342,7 +354,8 @@ test('personnel hides every mutation control for an ordinary member and exposes
    await gotoOffice(page, 'nation/personnel');
    await expect(page.getByText('도 시 관 직 임 명')).toHaveCount(0);
    await expect(page.getByText('외 교 권 자 임 명')).toHaveCount(0);
-    await expect(page.getByText('추 방', { exact: true })).toHaveCount(0);
+    await expect(page.getByRole('combobox', { name: '추방 대상 장수' })).toHaveCount(0);
+    await expect(page.getByRole('button', { name: '추방', exact: true })).toHaveCount(0);
    await expect(page.getByText(/곽가\(10년\).*허창/)).toBeVisible();

    const failed = await page.context().newPage();
@@ -456,6 +469,93 @@ test('finance enforces edit permissions and preserves the old value across an AP
    await expect(readOnly.getByRole('checkbox', { name: '전쟁 금지' })).toBeDisabled();
 });

+test('finance editor preserves Ref formatting controls and uploads images through sam-image', async ({ page }) => {
+    const state: FixtureState = { role: 'head', rate: 20 };
+    await installFixture(page, state);
+    await page.setViewportSize({ width: 1000, height: 900 });
+    await gotoOffice(page, 'nation/finance');
+    await page.getByRole('button', { name: '국가방침 수정' }).click();
+
+    const editor = page.getByRole('textbox', { name: '국가 방침' });
+    const editorFrame = page.locator('#notice-form .legacy-html-editor');
+    await expect(editor).toBeVisible();
+    expect(await editorFrame.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe(
+        'rgba(0, 0, 0, 0)'
+    );
+    expect(await editor.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe('rgba(0, 0, 0, 0)');
+
+    await editor.fill('서식 검증');
+    await editor.press('Control+A');
+    await page.getByRole('combobox', { name: '글꼴', exact: true }).selectOption('Gungsuh, serif');
+    await page.getByRole('combobox', { name: '글꼴 크기' }).selectOption('22px');
+    await page.getByLabel('글자색').evaluate((element) => {
+        const input = element as HTMLInputElement;
+        input.value = '#123456';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    await page.getByLabel('배경색').evaluate((element) => {
+        const input = element as HTMLInputElement;
+        input.value = '#fedcba';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    await page.getByRole('button', { name: '가운데 정렬' }).click();
+    await expect(page.getByRole('button', { name: '가운데 정렬' })).toHaveClass(/active/);
+
+    const formattedText = editor.locator('span', { hasText: '서식 검증' });
+    await expect(formattedText).toHaveCSS('font-family', /Gungsuh/);
+    await expect(formattedText).toHaveCSS('font-size', '22px');
+    await expect(formattedText).toHaveCSS('color', 'rgb(18, 52, 86)');
+    await expect(formattedText).toHaveCSS('background-color', 'rgb(254, 220, 186)');
+    await expect(editor.locator('p')).toHaveCSS('text-align', 'center');
+
+    await editor.press('End');
+    await page.getByRole('button', { name: '구분선' }).click();
+    await page.getByLabel('업로드할 이미지').setInputFiles({
+        name: '방침.png',
+        mimeType: 'image/png',
+        buffer: Buffer.from(
+            'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+            'base64'
+        ),
+    });
+
+    await expect.poll(() => state.uploadDataUrl).toMatch(/^data:image\/png;base64,/);
+    await expect(editor.locator('hr')).toHaveCount(1);
+    await expect(editor.locator('img')).toHaveAttribute(
+        'src',
+        'https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp'
+    );
+
+    const imageButton = page.getByRole('button', { name: '이미지', exact: true });
+    await imageButton.hover();
+    await expect(imageButton).toHaveCSS('border-color', 'rgb(157, 200, 240)');
+    await page.getByRole('combobox', { name: '글꼴', exact: true }).focus();
+    await expect(page.getByRole('combobox', { name: '글꼴', exact: true })).toHaveCSS('outline-style', 'solid');
+    await screenshot(page, 'core-finance-editor-desktop.png');
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    const mobileGeometry = await editorFrame.evaluate((element) => ({
+        width: element.getBoundingClientRect().width,
+        scrollWidth: element.scrollWidth,
+        toolbarHeight: element.querySelector('[role="toolbar"]')?.getBoundingClientRect().height ?? 0,
+    }));
+    expect(mobileGeometry.width).toBe(500);
+    expect(mobileGeometry.scrollWidth).toBeLessThanOrEqual(500);
+    expect(mobileGeometry.toolbarHeight).toBeGreaterThan(24);
+    await screenshot(page, 'core-finance-editor-mobile.png');
+
+    await page.locator('#notice-form').getByRole('button', { name: '저장' }).click();
+    await expect.poll(() => state.noticeMutationInput).toContain('font-family: Gungsuh, serif');
+    expect(state.noticeMutationInput).toContain('font-size: 22px');
+    expect(state.noticeMutationInput).toContain('color: rgb(18, 52, 86)');
+    expect(state.noticeMutationInput).toContain('background-color: rgb(254, 220, 186)');
+    expect(state.noticeMutationInput).toContain('text-align: center');
+    expect(state.noticeMutationInput).toContain('<hr>');
+    expect(state.noticeMutationInput).toContain(
+        'https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp'
+    );
+});
+
 test('finance adopts the server-purified notice and scout message before rendering the saved preview', async ({
    page,
 }) => {
@@ -471,7 +571,9 @@ test('finance adopts the server-purified notice and scout message before renderi

    const noticePreview = page.locator('#notice-form .message-preview');
    await expect(noticePreview).toContainText('서버 정화 방침');
-    expect(state.noticeMutationInput).toBe(dirtyNotice);
+    expect(state.noticeMutationInput).not.toContain('<script>');
+    expect(state.noticeMutationInput).toContain('&lt;script&gt;');
+    expect(state.noticeMutationInput).toContain('&lt;img src=x onerror=');
    await expect(noticePreview.locator('[data-flip="horizontal"]')).toHaveCSS('color', 'rgb(0, 255, 255)');
    await expect(noticePreview.locator('script, svg, [onerror], [onload], [onclick]')).toHaveCount(0);
    await expect
@@ -488,7 +590,9 @@ test('finance adopts the server-purified notice and scout message before renderi

    const scoutPreview = page.locator('#scout-message-form .message-preview');
    await expect(scoutPreview).toContainText('서버 정화 임관문');
-    expect(state.scoutMutationInput).toBe(dirtyScout);
+    expect(state.scoutMutationInput).not.toContain('<svg');
+    expect(state.scoutMutationInput).toContain('&lt;svg onload=');
+    expect(state.scoutMutationInput).toContain('&lt;a href="javascript:alert(1)"');
    await expect(scoutPreview.locator('a', { hasText: '위험 링크' })).not.toHaveAttribute('href');
    await expect(scoutPreview.locator('script, svg, [onerror], [onload], [onclick]')).toHaveCount(0);
    await expect
@@ -32,6 +32,8 @@
        "@tiptap/extension-image": "^3.5.0",
        "@tiptap/extension-link": "^3.5.0",
        "@tiptap/extension-placeholder": "^3.5.0",
+        "@tiptap/extension-text-align": "^3.5.0",
+        "@tiptap/extension-text-style": "^3.5.0",
        "@tiptap/extension-underline": "^3.5.0",
        "@tiptap/starter-kit": "^3.5.0",
        "@tiptap/vue-3": "^3.5.0",
@@ -1,18 +1,44 @@
 <script setup lang="ts">
-import { onBeforeUnmount, watch } from 'vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
 import { EditorContent, useEditor } from '@tiptap/vue-3';
 import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import TextAlign from '@tiptap/extension-text-align';
+import { TextStyleKit } from '@tiptap/extension-text-style';
+import { trpc } from '../../utils/trpc';

-const props = withDefaults(defineProps<{ modelValue: string; maxLength?: number }>(), { maxLength: 16384 });
+const props = withDefaults(
+    defineProps<{ modelValue: string; maxLength?: number; ariaLabel?: string }>(),
+    { maxLength: 16384, ariaLabel: 'HTML 편집기' }
+);
 const emit = defineEmits<{ (event: 'update:modelValue', value: string): void }>();

+const fontFamilies = [
+    { label: 'Pretendard', value: 'Pretendard, sans-serif' },
+    { label: '맑은 고딕', value: 'Malgun Gothic, sans-serif' },
+    { label: '궁서', value: 'Gungsuh, serif' },
+    { label: '돋움', value: 'Dotum, sans-serif' },
+];
+const fontSizes = ['8px', '10px', '12px', '14px', '18px', '22px', '28px', '36px', '48px', '72px'];
+const fileInput = ref<HTMLInputElement | null>(null);
+const uploadBusy = ref(false);
+const uploadError = ref<string | null>(null);
+
 const editor = useEditor({
    content: props.modelValue,
-    extensions: [StarterKit, Underline, Link.configure({ openOnClick: false })],
+    extensions: [
+        StarterKit.configure({ link: { openOnClick: false } }),
+        Image.configure({ inline: false, allowBase64: false }),
+        TextAlign.configure({ types: ['heading', 'paragraph'], alignments: ['left', 'center', 'right'] }),
+        TextStyleKit,
+    ],
    editorProps: {
-        attributes: { class: 'legacy-html-editor__content', 'aria-label': 'HTML 편집기' },
+        attributes: {
+            class: 'legacy-html-editor__content',
+            role: 'textbox',
+            'aria-label': props.ariaLabel,
+            'aria-multiline': 'true',
+        },
    },
    onUpdate: ({ editor: instance }) => {
        const html = instance.getHTML();
@@ -37,79 +63,341 @@ const setLink = () => {
    else editor.value.chain().focus().extendMarkRange('link').setLink({ href: href.trim() }).run();
 };

+const setFontFamily = (event: Event) => {
+    const value = (event.target as HTMLSelectElement).value;
+    if (!editor.value) return;
+    if (value) editor.value.chain().focus().setFontFamily(value).run();
+    else editor.value.chain().focus().unsetFontFamily().run();
+};
+
+const setFontSize = (event: Event) => {
+    const value = (event.target as HTMLSelectElement).value;
+    if (!editor.value) return;
+    if (value) editor.value.chain().focus().setFontSize(value).run();
+    else editor.value.chain().focus().unsetFontSize().run();
+};
+
+const setColor = (event: Event, kind: 'foreground' | 'background') => {
+    const value = (event.target as HTMLInputElement).value;
+    if (kind === 'foreground') editor.value?.chain().focus().setColor(value).run();
+    else editor.value?.chain().focus().setBackgroundColor(value).run();
+};
+
+const clearColors = () => editor.value?.chain().focus().unsetColor().unsetBackgroundColor().run();
+
+const readFileAsDataUrl = (file: File) =>
+    new Promise<string>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () =>
+            typeof reader.result === 'string' ? resolve(reader.result) : reject(new Error('이미지를 읽을 수 없습니다.'));
+        reader.onerror = () => reject(new Error('이미지를 읽는 중 오류가 발생했습니다.'));
+        reader.readAsDataURL(file);
+    });
+
+const uploadImage = async (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (!file || uploadBusy.value) return;
+    uploadBusy.value = true;
+    uploadError.value = null;
+    try {
+        const dataUrl = await readFileAsDataUrl(file);
+        const result = await trpc.board.uploadImage.mutate({ dataUrl });
+        editor.value?.chain().focus().setImage({ src: result.url, alt: file.name }).run();
+    } catch (error) {
+        uploadError.value = error instanceof Error ? error.message : '이미지 업로드에 실패했습니다.';
+    } finally {
+        uploadBusy.value = false;
+        input.value = '';
+    }
+};
+
 onBeforeUnmount(() => editor.value?.destroy());
 </script>

 <template>
    <div class="legacy-html-editor">
        <div class="legacy-html-editor__toolbar" role="toolbar" aria-label="서식">
+            <button type="button" title="되돌리기" aria-label="되돌리기" @click="editor?.chain().focus().undo().run()">
+                ↶
+            </button>
+            <button type="button" title="재실행" aria-label="재실행" @click="editor?.chain().focus().redo().run()">
+                ↷
+            </button>
            <button
                type="button"
+                title="굵게"
+                aria-label="굵게"
                :class="{ active: editor?.isActive('bold') }"
                @click="editor?.chain().focus().toggleBold().run()"
            >
-                <b>굵게</b>
+                <b>B</b>
            </button>
            <button
                type="button"
+                title="기울임"
+                aria-label="기울임"
                :class="{ active: editor?.isActive('italic') }"
                @click="editor?.chain().focus().toggleItalic().run()"
            >
-                <i>기울임</i>
+                <i>I</i>
            </button>
            <button
                type="button"
+                title="밑줄"
+                aria-label="밑줄"
                :class="{ active: editor?.isActive('underline') }"
                @click="editor?.chain().focus().toggleUnderline().run()"
            >
-                <u>밑줄</u>
+                <u>U</u>
            </button>
            <button
                type="button"
+                title="취소선"
+                aria-label="취소선"
+                :class="{ active: editor?.isActive('strike') }"
+                @click="editor?.chain().focus().toggleStrike().run()"
+            >
+                <s>S</s>
+            </button>
+            <label class="legacy-html-editor__select">
+                <span class="legacy-html-editor__sr-only">글꼴</span>
+                <select aria-label="글꼴" @change="setFontFamily">
+                    <option value="">글꼴</option>
+                    <option v-for="font in fontFamilies" :key="font.value" :value="font.value" :style="{ fontFamily: font.value }">
+                        {{ font.label }}
+                    </option>
+                </select>
+            </label>
+            <label class="legacy-html-editor__select">
+                <span class="legacy-html-editor__sr-only">크기</span>
+                <select aria-label="글꼴 크기" @change="setFontSize">
+                    <option value="">크기</option>
+                    <option v-for="size in fontSizes" :key="size" :value="size" :style="{ fontSize: size }">{{ size }}</option>
+                </select>
+            </label>
+            <label class="legacy-html-editor__color" title="글자색">
+                <span class="legacy-html-editor__sr-only">글자색</span>
+                <input
+                    type="color"
+                    aria-label="글자색"
+                    :value="editor?.getAttributes('textStyle').color ?? '#ffffff'"
+                    @input="setColor($event, 'foreground')"
+                />
+            </label>
+            <label class="legacy-html-editor__color" title="배경색">
+                <span class="legacy-html-editor__sr-only">배경색</span>
+                <input
+                    type="color"
+                    aria-label="배경색"
+                    :value="editor?.getAttributes('textStyle').backgroundColor ?? '#000000'"
+                    @input="setColor($event, 'background')"
+                />
+            </label>
+            <button type="button" title="글자색과 배경색 지우기" aria-label="색상 지우기" @click="clearColors">
+                ◇
+            </button>
+            <button
+                type="button"
+                title="글머리 기호 목록"
+                aria-label="글머리 기호 목록"
                :class="{ active: editor?.isActive('bulletList') }"
                @click="editor?.chain().focus().toggleBulletList().run()"
            >
-                목록
+                •
            </button>
-            <button type="button" :class="{ active: editor?.isActive('link') }" @click="setLink">링크</button>
-            <button type="button" @click="editor?.chain().focus().unsetAllMarks().clearNodes().run()">
-                서식 지우기
+            <button
+                type="button"
+                title="번호 목록"
+                aria-label="번호 목록"
+                :class="{ active: editor?.isActive('orderedList') }"
+                @click="editor?.chain().focus().toggleOrderedList().run()"
+            >
+                1.
+            </button>
+            <button
+                type="button"
+                title="링크"
+                aria-label="링크"
+                :class="{ active: editor?.isActive('link') }"
+                @click="setLink"
+            >
+                ↗
+            </button>
+            <button
+                type="button"
+                title="왼쪽 정렬"
+                aria-label="왼쪽 정렬"
+                :class="{ active: editor?.isActive({ textAlign: 'left' }) }"
+                @click="editor?.chain().focus().setTextAlign('left').run()"
+            >
+                ≡
+            </button>
+            <button
+                type="button"
+                title="가운데 정렬"
+                aria-label="가운데 정렬"
+                :class="{ active: editor?.isActive({ textAlign: 'center' }) }"
+                @click="editor?.chain().focus().setTextAlign('center').run()"
+            >
+                ≡
+            </button>
+            <button
+                type="button"
+                title="오른쪽 정렬"
+                aria-label="오른쪽 정렬"
+                :class="{ active: editor?.isActive({ textAlign: 'right' }) }"
+                @click="editor?.chain().focus().setTextAlign('right').run()"
+            >
+                ≡
+            </button>
+            <button
+                type="button"
+                title="구분선"
+                aria-label="구분선"
+                @click="editor?.chain().focus().setHorizontalRule().run()"
+            >
+                ―
+            </button>
+            <button
+                type="button"
+                :disabled="uploadBusy"
+                title="이미지 업로드"
+                aria-label="이미지"
+                @click="fileInput?.click()"
+            >
+                {{ uploadBusy ? '…' : '▧' }}
+            </button>
+            <input
+                ref="fileInput"
+                class="legacy-html-editor__file"
+                type="file"
+                accept=".jpg,.jpeg,.png,.gif,.webp,.avif"
+                aria-label="업로드할 이미지"
+                @change="uploadImage"
+            />
+            <button
+                type="button"
+                title="서식 지우기"
+                aria-label="서식 지우기"
+                @click="editor?.chain().focus().unsetAllMarks().clearNodes().run()"
+            >
+                Tx
            </button>
        </div>
        <EditorContent :editor="editor" />
+        <p v-if="uploadError" class="legacy-html-editor__error" role="alert">{{ uploadError }}</p>
    </div>
 </template>

 <style scoped>
 .legacy-html-editor {
-    border: 1px solid #777;
-    background: #fff;
-    color: #111;
+    border: 0;
+    background: transparent;
+    color: inherit;
 }
 .legacy-html-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
-    gap: 2px;
-    border-bottom: 1px solid #aaa;
-    padding: 3px;
-    background: #ddd;
+    gap: 0;
+    border-bottom: 0;
+    padding: 0;
+    background: #303030;
 }
-.legacy-html-editor__toolbar button {
-    border: 1px solid #777;
-    border-radius: 2px;
-    padding: 2px 7px;
-    background: #f5f5f5;
-    color: #111;
+.legacy-html-editor__toolbar button,
+.legacy-html-editor__toolbar select {
+    box-sizing: border-box;
+    min-width: 37px;
+    height: 35px;
+    border: 1px solid transparent;
+    border-radius: 0;
+    padding: 5px 10px;
+    background: #303030;
+    color: #fff;
    cursor: pointer;
 }
+.legacy-html-editor__toolbar button:hover,
+.legacy-html-editor__toolbar select:hover,
+.legacy-html-editor__toolbar button:focus-visible,
+.legacy-html-editor__toolbar select:focus-visible {
+    border-color: #9dc8f0;
+    outline: 1px solid #9dc8f0;
+    background: #444;
+}
+.legacy-html-editor__toolbar button:disabled {
+    cursor: wait;
+    opacity: 0.65;
+}
 .legacy-html-editor__toolbar button.active {
-    background: #b9d4f0;
+    background: #555;
+}
+.legacy-html-editor__select,
+.legacy-html-editor__color {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    color: inherit;
+    font-size: 12px;
+}
+.legacy-html-editor__select select {
+    min-width: 0;
+    max-width: 118px;
+    padding: 5px 6px;
+}
+.legacy-html-editor__color input {
+    box-sizing: border-box;
+    width: 42px;
+    height: 35px;
+    border: 1px solid transparent;
+    padding: 4px;
+    background: #303030;
+    cursor: pointer;
+}
+.legacy-html-editor__file {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+}
+.legacy-html-editor__error {
+    margin: 0;
+    padding: 4px 6px;
+    color: #ff9b9b;
+    background: rgba(80, 0, 0, 0.45);
 }
 :deep(.legacy-html-editor__content) {
-    min-height: 110px;
-    padding: 6px;
+    min-height: 42px;
+    padding: 0;
    outline: none;
    overflow-wrap: anywhere;
+    background: transparent;
+    color: inherit;
+}
+.legacy-html-editor__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+button[aria-label='왼쪽 정렬'] {
+    text-align: left;
+}
+button[aria-label='가운데 정렬'] {
+    text-align: center;
+}
+button[aria-label='오른쪽 정렬'] {
+    text-align: right;
+}
+@media (max-width: 500px) {
+    :deep(.legacy-html-editor__content) {
+        min-height: 21px;
+    }
 }
 :deep(.legacy-html-editor__content p) {
    margin: 0 0 0.4em;
@@ -218,7 +218,7 @@ onMounted(() => void loadStratFinan());
            </div>

            <div class="notice-title">국가 방침 &amp; 임관 권유 메시지</div>
-            <section id="notice-form" class="message-form">
+            <section id="notice-form" class="message-form" :class="{ 'message-form--editing': editingNationMsg }">
                <header class="green-header">
                    <span>국가 방침</span>
                    <span>
@@ -249,9 +249,18 @@ onMounted(() => void loadStratFinan());
                    </span>
                </header>
                <div v-if="!editingNationMsg" class="message-preview" v-html="nationMsg || '내용 없음'" />
-                <LegacyHtmlEditor v-else v-model="nationMsgDraft" :max-length="16384" />
+                <LegacyHtmlEditor
+                    v-else
+                    v-model="nationMsgDraft"
+                    :max-length="16384"
+                    aria-label="국가 방침"
+                />
            </section>
-            <section id="scout-message-form" class="message-form">
+            <section
+                id="scout-message-form"
+                class="message-form"
+                :class="{ 'message-form--editing': editingScoutMsg }"
+            >
                <header class="green-header">
                    <span>임관 권유</span>
                    <span>
@@ -283,7 +292,12 @@ onMounted(() => void loadStratFinan());
                </header>
                <div class="scout-limit">870px x 200px를 넘어서는 내용은 표시되지 않습니다.</div>
                <div v-if="!editingScoutMsg" class="message-preview scout-preview" v-html="scoutMsg || '내용 없음'" />
-                <LegacyHtmlEditor v-else v-model="scoutMsgDraft" :max-length="1000" />
+                <LegacyHtmlEditor
+                    v-else
+                    v-model="scoutMsgDraft"
+                    :max-length="1000"
+                    aria-label="임관 권유"
+                />
            </section>

            <div class="finance-title">예산&amp;정책</div>
@@ -712,6 +726,11 @@ textarea {
        height: 61.5px;
        overflow: hidden;
    }
+    #notice-form.message-form--editing,
+    #scout-message-form.message-form--editing {
+        height: auto;
+        overflow: visible;
+    }
    .finance-grid {
        height: 218.63px;
        margin-bottom: 15.25px;
@@ -171,6 +171,12 @@ importers:
      '@tiptap/extension-placeholder':
        specifier: ^3.5.0
        version: 3.30.1(@tiptap/extensions@3.30.1(@tiptap/core@3.30.1(@tiptap/pm@3.30.1))(@tiptap/pm@3.30.1))
+      '@tiptap/extension-text-align':
+        specifier: ^3.5.0
+        version: 3.30.1(@tiptap/core@3.30.1(@tiptap/pm@3.30.1))
+      '@tiptap/extension-text-style':
+        specifier: ^3.5.0
+        version: 3.30.1(@tiptap/core@3.30.1(@tiptap/pm@3.30.1))
      '@tiptap/extension-underline':
        specifier: ^3.5.0
        version: 3.30.1(@tiptap/core@3.30.1(@tiptap/pm@3.30.1))
@@ -2078,6 +2084,16 @@ packages:
    peerDependencies:
      '@tiptap/core': 3.30.1

+  '@tiptap/extension-text-align@3.30.1':
+    resolution: {integrity: sha512-oYAYySpwcgcHSdZw8xgMqF+sCNUgM7v/2UQj0amsBOLbk5VMfiLdJp5Ku+z5aqCwBBUjb6sInh1Amzd3q57w4A==}
+    peerDependencies:
+      '@tiptap/core': 3.30.1
+
+  '@tiptap/extension-text-style@3.30.1':
+    resolution: {integrity: sha512-VLci8TnjAxBGbNlailFabGAv8ayPR8roGeNhS25UG90XJxiO2FZUHmOv+vqrciQ7Zfs5BXyrGQY+Yb3dAtHgIw==}
+    peerDependencies:
+      '@tiptap/core': 3.30.1
+
  '@tiptap/extension-text@3.30.1':
    resolution: {integrity: sha512-Zt3Ik95ZKJx5YNzC6TUXWTNBHUfRH/qVENmqfPjA7x7q4cqNdOEU+tX9DrlFjgxu/x0k48dlQS0Kaop24/vihA==}
    peerDependencies:
@@ -6030,6 +6046,14 @@ snapshots:
    dependencies:
      '@tiptap/core': 3.30.1(@tiptap/pm@3.30.1)

+  '@tiptap/extension-text-align@3.30.1(@tiptap/core@3.30.1(@tiptap/pm@3.30.1))':
+    dependencies:
+      '@tiptap/core': 3.30.1(@tiptap/pm@3.30.1)
+
+  '@tiptap/extension-text-style@3.30.1(@tiptap/core@3.30.1(@tiptap/pm@3.30.1))':
+    dependencies:
+      '@tiptap/core': 3.30.1(@tiptap/pm@3.30.1)
+
  '@tiptap/extension-text@3.30.1(@tiptap/core@3.30.1(@tiptap/pm@3.30.1))':
    dependencies:
      '@tiptap/core': 3.30.1(@tiptap/pm@3.30.1)
@@ -156,7 +156,49 @@ try {
            path: resolve(artifactRoot, `ref-finance-${viewport.name}.png`),
            fullPage: true,
        });
-        result[viewport.name] = { personnel, finance };
+        const editNoticeButton = page.getByRole('button', { name: /국가방침 수정/ });
+        let financeEditor = null;
+        if ((await editNoticeButton.count()) > 0) {
+            await editNoticeButton.click();
+            await page.locator('#noticeForm .tiptap-editor .ProseMirror').waitFor();
+            const toolbar = page.locator('#noticeForm [role="toolbar"]');
+            const imageButton = toolbar.getByRole('button').filter({ has: page.locator('.bi-image') });
+            if ((await imageButton.count()) > 0) await imageButton.hover();
+            const firstToolbarButton = toolbar.getByRole('button').first();
+            await firstToolbarButton.focus();
+            financeEditor = await page.evaluate(
+                ({ rectSource, styleSource }) => {
+                    const rect = new Function(`return (${rectSource})`)();
+                    const style = new Function(`return (${styleSource})`)();
+                    const form = document.querySelector('#noticeForm');
+                    const toolbarElement = form?.querySelector('[role="toolbar"]');
+                    const content = form?.querySelector('.tiptap-editor .ProseMirror');
+                    const buttons = toolbarElement ? [...toolbarElement.querySelectorAll('button')] : [];
+                    const image = buttons.find((button) => button.querySelector('.bi-image'));
+                    return {
+                        form: form ? { rect: rect(form), style: style(form) } : null,
+                        toolbar: toolbarElement
+                            ? {
+                                  rect: rect(toolbarElement),
+                                  style: style(toolbarElement),
+                                  scrollWidth: toolbarElement.scrollWidth,
+                                  buttonCount: buttons.length,
+                                  colorInputCount: toolbarElement.querySelectorAll('input[type="color"]').length,
+                              }
+                            : null,
+                        content: content ? { rect: rect(content), style: style(content) } : null,
+                        imageButton: image ? { rect: rect(image), style: style(image) } : null,
+                        focused: document.activeElement ? style(document.activeElement) : null,
+                    };
+                },
+                { rectSource: rect.toString(), styleSource: style.toString() }
+            );
+            await page.screenshot({
+                path: resolve(artifactRoot, `ref-finance-editor-${viewport.name}.png`),
+                fullPage: true,
+            });
+        }
+        result[viewport.name] = { personnel, finance, financeEditor };
        await context.close();
    }
    await writeFile(resolve(artifactRoot, 'computed-dom.json'), `${JSON.stringify(result, null, 2)}\n`);