devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hide_D
2026-08-21 17:15:16 +00:00
parent 5a6295f67a
commit d71f16e56b
4 changed files with 301 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/nationOffices.spec.ts
+75 -1
View File
@@ -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,
}) => {
app/game-frontend/src/components/ui/LegacyHtmlEditor.vue
+178 -20
View File
@@ -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>
app/game-frontend/src/views/NationStratFinanView.vue
+46 -1
View File
@@ -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;