fix(game-ui): 국가 메시지 편집기 정렬과 목록을 바로잡는다

2026-08-21 17:15:16 +00:00
parent 5a6295f67a
commit d71f16e56b
4 changed files with 301 additions and 23 deletions
@@ -73,7 +73,7 @@ describe('nation HTML purification', () => {
        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">',
+            '</p><hr><img class="custom-image-align-right" src="https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp" alt="방침.png">',
        ].join('');

        const clean = purifyNationHtml(source);
@@ -83,6 +83,7 @@ describe('nation HTML purification', () => {
            'style="font-family:Pretendard, sans-serif;font-size:22px;color:#123456;background-color:#fedcba"'
        );
        expect(clean).toContain('<hr />');
+        expect(clean).toContain('class="custom-image-align-right"');
        expect(clean).toContain(
            'src="https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp"'
        );
@@ -624,6 +624,21 @@ test('finance editor preserves Ref formatting controls and uploads images throug
    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 page.getByRole('button', { name: '번호 목록' }).click();
+    await expect(editor.locator('ol')).toHaveCSS('list-style-type', 'decimal');
+    await expect(editor.locator('li')).toContainText('첫 번째 항목');
+    await screenshot(page, 'core-finance-numbered-list-desktop.png');
+    await page.getByRole('button', { name: '번호 목록' }).click();
+
+    const alignmentIcons = await page
+        .getByRole('toolbar', { name: '서식' })
+        .getByRole('button', { name: /^(왼쪽|가운데|오른쪽) 정렬$/ })
+        .locator('svg')
+        .evaluateAll((icons) => icons.map((icon) => icon.innerHTML));
+    expect(alignmentIcons).toHaveLength(3);
+    expect(new Set(alignmentIcons).size).toBe(3);
+
    await editor.fill('서식 검증');
    await editor.press('Control+A');
    await page.getByRole('combobox', { name: '글꼴', exact: true }).selectOption('Gungsuh, serif');
@@ -661,11 +676,27 @@ test('finance editor preserves Ref formatting controls and uploads images throug

    await expect.poll(() => state.uploadDataUrl).toMatch(/^data:image\/png;base64,/);
    await expect(editor.locator('hr')).toHaveCount(1);
-    await expect(editor.locator('img')).toHaveAttribute(
+    const uploadedImage = editor.locator('img');
+    await expect(uploadedImage).toHaveAttribute(
        'src',
        'https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp'
    );

+    await uploadedImage.click();
+    const imageToolbar = page.getByRole('toolbar', { name: '이미지 정렬' });
+    await expect(imageToolbar).toBeVisible();
+    await expect(imageToolbar.getByRole('button')).toHaveCount(5);
+    await screenshot(page, 'core-finance-image-toolbar-desktop.png');
+    await imageToolbar.getByRole('button', { name: '이미지 오른쪽 정렬' }).click();
+    await expect(uploadedImage).toHaveClass(/custom-image-align-right/);
+    await expect(uploadedImage).toHaveCSS('display', 'block');
+    await expect(uploadedImage).toHaveCSS('margin-right', '0px');
+
+    await page.getByRole('toolbar', { name: '서식' }).getByRole('button', { name: '가운데 정렬' }).click();
+    await expect(uploadedImage).toHaveClass(/custom-image-align-center/);
+    await uploadedImage.click();
+    await imageToolbar.getByRole('button', { name: '이미지 오른쪽 정렬' }).click();
+
    const imageButton = page.getByRole('button', { name: '이미지', exact: true });
    await imageButton.hover();
    await expect(imageButton).toHaveCSS('border-color', 'rgb(157, 200, 240)');
@@ -691,11 +722,54 @@ test('finance editor preserves Ref formatting controls and uploads images throug
    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('class="custom-image-align-right"');
    expect(state.noticeMutationInput).toContain(
        'https://sam-image.hided.net/uploads/core2026/0123456789abcdef0123456789abcdef.webp'
    );
 });

+test('recruitment editor keeps the Ref 870px content width in desktop and scales it to 500px on mobile', async ({
+    page,
+}) => {
+    await installFixture(page, { role: 'head', rate: 20 });
+    await page.setViewportSize({ width: 1000, height: 900 });
+    await gotoOffice(page, 'nation/finance');
+    await page.getByRole('button', { name: '임관 권유문 수정' }).click();
+
+    const form = page.locator('#scout-message-form');
+    const editorFrame = form.locator('.legacy-html-editor');
+    const desktop = await form.evaluate((element) => {
+        const frame = element.querySelector<HTMLElement>('.legacy-html-editor')!;
+        const formRect = element.getBoundingClientRect();
+        const frameRect = frame.getBoundingClientRect();
+        return {
+            formWidth: formRect.width,
+            frameWidth: frameRect.width,
+            leftInset: frameRect.left - formRect.left,
+            rightInset: formRect.right - frameRect.right,
+        };
+    });
+    expect(desktop.formWidth).toBe(1000);
+    expect(desktop.frameWidth).toBe(870);
+    expect(desktop.leftInset).toBe(130);
+    expect(desktop.rightInset).toBe(0);
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    const mobile = await editorFrame.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        return {
+            visualWidth: rect.width,
+            sourceWidth: element.clientWidth,
+            toolbarWidth: element.querySelector<HTMLElement>('[role="toolbar"]')!.getBoundingClientRect().width,
+        };
+    });
+    expect(mobile.sourceWidth).toBe(870);
+    expect(mobile.visualWidth).toBeCloseTo(500, 1);
+    expect(mobile.toolbarWidth).toBeCloseTo(500, 1);
+    expect(await page.locator('.page-finance').evaluate((element) => element.scrollWidth)).toBeLessThanOrEqual(500);
+    await screenshot(page, 'core-finance-scout-editor-mobile.png');
+});
+
 test('finance adopts the server-purified notice and scout message before rendering the saved preview', async ({
    page,
 }) => {
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watch } from 'vue';
 import { EditorContent, useEditor } from '@tiptap/vue-3';
+import { BubbleMenu } from '@tiptap/vue-3/menus';
 import StarterKit from '@tiptap/starter-kit';
 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; ariaLabel?: string }>(),
-    { maxLength: 16384, ariaLabel: 'HTML 편집기' }
-);
+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 = [
@@ -24,11 +25,41 @@ const fileInput = ref<HTMLInputElement | null>(null);
 const uploadBusy = ref(false);
 const uploadError = ref<string | null>(null);

+type Alignment = 'left' | 'center' | 'right';
+type ImageAlignment = Alignment | 'float-left' | 'float-right';
+
+const imageAlignmentControls: ReadonlyArray<{ value: ImageAlignment; label: string }> = [
+    { value: 'float-left', label: '왼쪽 붙이기' },
+    { value: 'left', label: '왼쪽 정렬' },
+    { value: 'center', label: '가운데 정렬' },
+    { value: 'right', label: '오른쪽 정렬' },
+    { value: 'float-right', label: '오른쪽 붙이기' },
+];
+
+const AlignedImage = Image.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            align: {
+                default: null,
+                parseHTML: (element) => {
+                    for (const control of imageAlignmentControls) {
+                        if (element.classList.contains(`custom-image-align-${control.value}`)) return control.value;
+                    }
+                    return null;
+                },
+                renderHTML: (attributes) =>
+                    attributes.align ? { class: `custom-image-align-${String(attributes.align)}` } : {},
+            },
+        };
+    },
+});
+
 const editor = useEditor({
    content: props.modelValue,
    extensions: [
        StarterKit.configure({ link: { openOnClick: false } }),
-        Image.configure({ inline: false, allowBase64: false }),
+        AlignedImage.configure({ inline: false, allowBase64: false }),
        TextAlign.configure({ types: ['heading', 'paragraph'], alignments: ['left', 'center', 'right'] }),
        TextStyleKit,
    ],
@@ -85,11 +116,30 @@ const setColor = (event: Event, kind: 'foreground' | 'background') => {

 const clearColors = () => editor.value?.chain().focus().unsetColor().unsetBackgroundColor().run();

+const setAlignment = (alignment: Alignment) => {
+    if (!editor.value) return;
+    if (editor.value.isActive('image')) {
+        editor.value.chain().focus().updateAttributes('image', { align: alignment }).run();
+        return;
+    }
+    editor.value.chain().focus().setTextAlign(alignment).run();
+};
+
+const isAlignmentActive = (alignment: Alignment) =>
+    editor.value?.isActive('image')
+        ? editor.value.isActive('image', { align: alignment })
+        : editor.value?.isActive({ textAlign: alignment });
+
+const setImageAlignment = (alignment: ImageAlignment) =>
+    editor.value?.chain().focus().updateAttributes('image', { align: alignment }).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('이미지를 읽을 수 없습니다.'));
+            typeof reader.result === 'string'
+                ? resolve(reader.result)
+                : reject(new Error('이미지를 읽을 수 없습니다.'));
        reader.onerror = () => reject(new Error('이미지를 읽는 중 오류가 발생했습니다.'));
        reader.readAsDataURL(file);
    });
@@ -164,7 +214,12 @@ onBeforeUnmount(() => editor.value?.destroy());
                <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 }">
+                    <option
+                        v-for="font in fontFamilies"
+                        :key="font.value"
+                        :value="font.value"
+                        :style="{ fontFamily: font.value }"
+                    >
                        {{ font.label }}
                    </option>
                </select>
@@ -173,7 +228,9 @@ onBeforeUnmount(() => editor.value?.destroy());
                <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>
+                    <option v-for="size in fontSizes" :key="size" :value="size" :style="{ fontSize: size }">
+                        {{ size }}
+                    </option>
                </select>
            </label>
            <label class="legacy-html-editor__color" title="글자색">
@@ -226,30 +283,36 @@ onBeforeUnmount(() => editor.value?.destroy());
            </button>
            <button
                type="button"
-                title="왼쪽 정렬"
+                title="왼쪽 정렬 (선택한 이미지에도 적용)"
                aria-label="왼쪽 정렬"
-                :class="{ active: editor?.isActive({ textAlign: 'left' }) }"
-                @click="editor?.chain().focus().setTextAlign('left').run()"
+                :class="{ active: isAlignmentActive('left') }"
+                @click="setAlignment('left')"
            >
-                ≡
+                <svg class="legacy-html-editor__align-icon" viewBox="0 0 16 14" aria-hidden="true">
+                    <path d="M1 1h14v2H1zM1 5h9v2H1zM1 9h14v2H1zM1 13h9v1H1z" />
+                </svg>
            </button>
            <button
                type="button"
-                title="가운데 정렬"
+                title="가운데 정렬 (선택한 이미지에도 적용)"
                aria-label="가운데 정렬"
-                :class="{ active: editor?.isActive({ textAlign: 'center' }) }"
-                @click="editor?.chain().focus().setTextAlign('center').run()"
+                :class="{ active: isAlignmentActive('center') }"
+                @click="setAlignment('center')"
            >
-                ≡
+                <svg class="legacy-html-editor__align-icon" viewBox="0 0 16 14" aria-hidden="true">
+                    <path d="M1 1h14v2H1zM3.5 5h9v2h-9zM1 9h14v2H1zM3.5 13h9v1h-9z" />
+                </svg>
            </button>
            <button
                type="button"
-                title="오른쪽 정렬"
+                title="오른쪽 정렬 (선택한 이미지에도 적용)"
                aria-label="오른쪽 정렬"
-                :class="{ active: editor?.isActive({ textAlign: 'right' }) }"
-                @click="editor?.chain().focus().setTextAlign('right').run()"
+                :class="{ active: isAlignmentActive('right') }"
+                @click="setAlignment('right')"
            >
-                ≡
+                <svg class="legacy-html-editor__align-icon" viewBox="0 0 16 14" aria-hidden="true">
+                    <path d="M1 1h14v2H1zM6 5h9v2H6zM1 9h14v2H1zM6 13h9v1H6z" />
+                </svg>
            </button>
            <button
                type="button"
@@ -285,6 +348,21 @@ onBeforeUnmount(() => editor.value?.destroy());
                Tx
            </button>
        </div>
+        <BubbleMenu v-if="editor" v-show="editor.isActive('image')" :editor="editor">
+            <div class="legacy-html-editor__image-toolbar" role="toolbar" aria-label="이미지 정렬">
+                <span>이미지 정렬</span>
+                <button
+                    v-for="control in imageAlignmentControls"
+                    :key="control.value"
+                    type="button"
+                    :class="{ active: editor.isActive('image', { align: control.value }) }"
+                    :aria-label="`이미지 ${control.label}`"
+                    @click="setImageAlignment(control.value)"
+                >
+                    {{ control.label }}
+                </button>
+            </div>
+        </BubbleMenu>
        <EditorContent :editor="editor" />
        <p v-if="uploadError" class="legacy-html-editor__error" role="alert">{{ uploadError }}</p>
    </div>
@@ -331,6 +409,44 @@ onBeforeUnmount(() => editor.value?.destroy());
 .legacy-html-editor__toolbar button.active {
    background: #555;
 }
+.legacy-html-editor__align-icon {
+    display: block;
+    width: 16px;
+    height: 14px;
+    fill: currentcolor;
+}
+.legacy-html-editor__image-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    border: 1px solid #9dc8f0;
+    padding: 3px;
+    background: #303030;
+    color: #fff;
+    box-shadow: 0 2px 6px rgb(0 0 0 / 45%);
+}
+.legacy-html-editor__image-toolbar span {
+    padding: 0 4px;
+    font-size: 12px;
+}
+.legacy-html-editor__image-toolbar button {
+    border: 1px solid transparent;
+    border-radius: 0;
+    padding: 3px 6px;
+    background: #303030;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+}
+.legacy-html-editor__image-toolbar button:hover,
+.legacy-html-editor__image-toolbar button:focus-visible {
+    border-color: #9dc8f0;
+    outline: 1px solid #9dc8f0;
+    background: #444;
+}
+.legacy-html-editor__image-toolbar button.active {
+    background: #555;
+}
 .legacy-html-editor__select,
 .legacy-html-editor__color {
    display: inline-flex;
@@ -402,4 +518,46 @@ button[aria-label='오른쪽 정렬'] {
 :deep(.legacy-html-editor__content p) {
    margin: 0 0 0.4em;
 }
+:deep(.legacy-html-editor__content ol),
+:deep(.legacy-html-editor__content ul) {
+    margin: 0 0 0.4em;
+    padding-left: 2em;
+    list-style-position: outside;
+}
+:deep(.legacy-html-editor__content ol) {
+    list-style-type: decimal;
+}
+:deep(.legacy-html-editor__content ul) {
+    list-style-type: disc;
+}
+:deep(.legacy-html-editor__content li > p) {
+    margin: 0;
+}
+:deep(.legacy-html-editor__content img.ProseMirror-selectednode) {
+    outline: 2px solid #9dc8f0;
+}
+:deep(.legacy-html-editor__content img) {
+    max-width: 100%;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-left) {
+    display: block;
+    margin-right: auto;
+    margin-left: 0;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-center) {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-right) {
+    display: block;
+    margin-right: 0;
+    margin-left: auto;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-float-left) {
+    float: left;
+}
+:deep(.legacy-html-editor__content img.custom-image-align-float-right) {
+    float: right;
+}
 </style>
@@ -285,7 +285,13 @@ 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" aria-label="임관 권유" />
+                <LegacyHtmlEditor
+                    v-else
+                    v-model="scoutMsgDraft"
+                    class="scout-editor"
+                    :max-length="1000"
+                    aria-label="임관 권유"
+                />
            </section>

            <div class="finance-title">예산&amp;정책</div>
@@ -551,6 +557,45 @@ textarea {
    margin-left: auto;
    overflow: hidden;
 }
+.message-preview :deep(ol),
+.message-preview :deep(ul) {
+    margin: 0 0 0.4em;
+    padding-left: 2em;
+    list-style-position: outside;
+}
+.message-preview :deep(ol) {
+    list-style-type: decimal;
+}
+.message-preview :deep(ul) {
+    list-style-type: disc;
+}
+.message-preview :deep(li > p) {
+    margin: 0;
+}
+.message-preview :deep(img) {
+    max-width: 100%;
+}
+.message-preview :deep(img.custom-image-align-left) {
+    display: block;
+    margin-right: auto;
+    margin-left: 0;
+}
+.message-preview :deep(img.custom-image-align-center) {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+}
+.message-preview :deep(img.custom-image-align-right) {
+    display: block;
+    margin-right: 0;
+    margin-left: auto;
+}
+.message-preview :deep(img.custom-image-align-float-left) {
+    float: left;
+}
+.message-preview :deep(img.custom-image-align-float-right) {
+    float: right;
+}
 .finance-grid {
    display: flex;
    flex-wrap: wrap;