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

feat(game-ui): add action feedback layer

Browse Source
This commit is contained in:
Hide_D
2026-08-12 15:56:58 +00:00
parent 5e80a940d4
commit 5d4d5009ee
15 changed files with 671 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/board.spec.ts
+38 -9
View File
@@ -392,7 +392,7 @@ test('uses the ref 500px responsive form widths', async ({ page }) => {
await expect(page.getByRole('heading', { name: '기밀실' })).toBeVisible();
});
test('retains article and comment input after a failed mutation, then reloads after success', async ({ page }) => {
test('retains article and comment input after a failed mutation, then reloads after success', async ({ page }, testInfo) => {
const state: BoardFixture = {
permission: 2,
canMeeting: true,
@@ -407,25 +407,54 @@ test('retains article and comment input after a failed mutation, then reloads af
await page.locator('#board-title').fill('새 제목');
await page.locator('#board-content').fill('새 내용');
page.once('dialog', async (dialog) => {
expect(dialog.message()).toBe('실패했습니다. :접속 제한입니다.');
await dialog.accept();
});
await page.locator('#submitArticle').click();
const articleToast = page.getByTestId('game-toast').filter({ hasText: '게시물 등록에 실패했습니다: 접속 제한입니다.' });
await expect(articleToast).toHaveAttribute('data-feedback-kind', 'error');
await expect(articleToast).toHaveAttribute('role', 'alert');
await expect(page.locator('#board-title')).toHaveValue('새 제목');
await expect(page.locator('#board-content')).toHaveValue('새 내용');
const desktopToastGeometry = await articleToast.evaluate((element) => {
const rect = element.getBoundingClientRect();
return { left: rect.left, right: rect.right, top: rect.top, width: rect.width, viewportWidth: window.innerWidth };
});
expect(desktopToastGeometry.left).toBeGreaterThanOrEqual(0);
expect(desktopToastGeometry.right).toBeLessThanOrEqual(desktopToastGeometry.viewportWidth);
expect(desktopToastGeometry.top).toBeGreaterThanOrEqual(0);
expect(desktopToastGeometry.width).toBeGreaterThan(250);
await page.screenshot({ path: testInfo.outputPath('game-toast-desktop.png'), fullPage: true });
await articleToast.getByRole('button', { name: '알림 닫기' }).click();
await expect(articleToast).toHaveCount(0);
await page.locator('#submitArticle').click();
await expect(page.getByText('새 제목', { exact: true })).toBeVisible();
await expect(page.locator('#board-title')).toHaveValue('');
const commentInput = page.locator('.comment-input').first();
await commentInput.fill('새 댓글');
page.once('dialog', async (dialog) => {
expect(dialog.message()).toBe('실패했습니다: 접속 제한입니다.');
await dialog.accept();
});
await page.setViewportSize({ width: 390, height: 844 });
const documentWidthBeforeToast = await page.evaluate(() => document.documentElement.scrollWidth);
await commentInput.press('Enter');
const commentToast = page.getByTestId('game-toast').filter({ hasText: '댓글 등록에 실패했습니다: 접속 제한입니다.' });
await expect(commentToast).toBeVisible();
await expect
.poll(async () => commentToast.evaluate((element) => window.innerHeight - element.getBoundingClientRect().bottom))
.toBeGreaterThanOrEqual(0);
const mobileToastGeometry = await commentToast.evaluate((element) => {
const rect = element.getBoundingClientRect();
return {
left: rect.left,
right: window.innerWidth - rect.right,
bottom: window.innerHeight - rect.bottom,
viewportWidth: window.innerWidth,
documentWidth: document.documentElement.scrollWidth,
};
});
expect(mobileToastGeometry.left).toBeGreaterThanOrEqual(0);
expect(mobileToastGeometry.right).toBeGreaterThanOrEqual(0);
expect(mobileToastGeometry.bottom).toBeGreaterThanOrEqual(0);
expect(mobileToastGeometry.documentWidth).toBe(documentWidthBeforeToast);
await page.screenshot({ path: testInfo.outputPath('game-toast-mobile.png') });
await expect(commentInput).toHaveValue('새 댓글');
await commentInput.press('Enter');
app/game-frontend/e2e/inGameMenus.spec.ts
+4 -10
View File
@@ -838,9 +838,7 @@ test('내 정보 즉시행동은 timeout 재시도 ID를 유지하고 성공 후
await instantRetreatButton.click();
await expect.poll(() => state.instantRetreatInputs?.length).toBe(1);
await expect
.poll(() => dialogs.some((message) => message.includes('요청 처리 결과를 확인하지 못했습니다.')))
.toBe(true);
await expect(page.getByTestId('game-toast')).toContainText('요청 처리 결과를 확인하지 못했습니다.');
await expect.poll(() => state.generalMeQueries).toBe(2);
await expect.poll(() => state.ensurePrestartQueries).toBe(2);
@@ -948,13 +946,9 @@ test('가오픈 장수 삭제는 레거시 표시와 확인을 보존하고 time
const timeoutReload = page.waitForEvent('framenavigated', (frame) => frame === page.mainFrame());
await deleteButton.click();
await expect.poll(() => state.dieOnPrestartInputs?.length).toBe(1);
await expect
.poll(() =>
dialogs.some((message) =>
message.includes('alert:실패했습니다: 요청은 접수됐지만 처리 결과를 아직 확인하지 못했습니다.')
)
)
.toBe(true);
const failureDialog = page.getByRole('alertdialog', { name: '장수 삭제 실패' });
await expect(failureDialog).toContainText('요청은 접수됐지만 처리 결과를 아직 확인하지 못했습니다.');
await failureDialog.getByRole('button', { name: '확인' }).click();
await timeoutReload;
await page.waitForLoadState('networkidle');
await expect(deleteButton).toBeVisible();
app/game-frontend/e2e/npcPossession.spec.ts
+32 -2
View File
@@ -106,6 +106,13 @@ const installFixture = async (page: Page, state: FixtureState): Promise<void> =>
body: '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="#777"/></svg>',
});
});
await page.route('https://sam-image.hided.net/icons/**', async (route) => {
await route.fulfill({
status: 200,
contentType: 'image/svg+xml',
body: '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="#777"/></svg>',
});
});
await page.route('**/gateway/api/user-icons/default.jpg', async (route) => {
await route.fulfill({
status: 200,
@@ -265,7 +272,10 @@ test('renders Ref-shaped token cards, preserves keep cooldown and retries posses
await tooltip.focus();
await expect(tooltip).toBeFocused();
await expect(tooltipPopup).toHaveText('안전을 중시합니다.');
await expect(page.locator('.npc-card-image').first()).toHaveAttribute('src', '/gateway/api/user-icons/default.jpg');
await expect(page.locator('.npc-card-image').first()).toHaveAttribute(
'src',
'https://sam-image.hided.net/icons/default.jpg'
);
await page.locator('#btn-load-general-list').click();
await expect(page.locator('#tb-general-list')).toBeVisible();
@@ -347,11 +357,31 @@ test('renders Ref-shaped token cards, preserves keep cooldown and retries posses
await expect(page.locator('.npc-token-expired')).toBeVisible();
await expect(possessButton).toBeEnabled();
await expect(refreshButton).toBeDisabled();
await page.setViewportSize({ width: 390, height: 844 });
const documentWidthBeforeDialog = await page.evaluate(() => document.documentElement.scrollWidth);
await page.locator('#btn-retry-possession').click();
const successDialog = page.getByRole('alertdialog', { name: '완료' });
await expect(successDialog).toContainText('빙의에 성공했습니다.');
await expect(successDialog.getByRole('button', { name: '확인' })).toBeFocused();
const dialogGeometry = await successDialog.evaluate((element) => {
const rect = element.getBoundingClientRect();
return {
left: rect.left,
right: window.innerWidth - rect.right,
bottom: window.innerHeight - rect.bottom,
width: rect.width,
documentWidth: document.documentElement.scrollWidth,
};
});
expect(dialogGeometry.left).toBeGreaterThanOrEqual(0);
expect(dialogGeometry.right).toBeGreaterThanOrEqual(0);
expect(dialogGeometry.bottom).toBeGreaterThanOrEqual(0);
expect(dialogGeometry.documentWidth).toBe(documentWidthBeforeDialog);
await page.screenshot({ path: testInfo.outputPath('game-notice-dialog.png') });
await successDialog.getByRole('button', { name: '확인' }).click();
await expect(page).toHaveURL(new RegExp(`${basePath}/$`));
expect(state.possessInputs).toHaveLength(2);
expect(state.possessInputs[1]?.clientRequestId).toBe(firstRequestId);
expect(dialogs).toContain('빙의에 성공했습니다.');
expect(await page.evaluate(() => window.sessionStorage.getItem('sammo-npc-possess-pending-action'))).toBeNull();
await page.screenshot({
app/game-frontend/e2e/npcPossessionLive.spec.ts
+3 -1
View File
@@ -216,13 +216,15 @@ test.describe('NPC possession through live PostgreSQL, Redis, API, daemon, and C
await startDaemon();
await possessButton.click();
const successDialog = page.getByRole('alertdialog', { name: '완료' });
await expect(successDialog).toContainText('빙의에 성공했습니다.');
await successDialog.getByRole('button', { name: '확인' }).click();
await expect(page).toHaveURL(/\/hwe\/$/);
expect(requestIds).toHaveLength(2);
expect(requestIds[1]).toBe(requestIds[0]);
expect(await db.general.count({ where: { userId } })).toBe(1);
await expect(db.npcSelectionToken.findUnique({ where: { ownerUserId: userId } })).resolves.toBeNull();
expect(await page.evaluate(() => window.sessionStorage.getItem('sammo-npc-possess-pending-action'))).toBeNull();
expect(dialogs).toContain('빙의에 성공했습니다.');
const event = await db.inputEvent.findUniqueOrThrow({
where: { requestId: eventRequestId },
});
app/game-frontend/e2e/selectGeneralLive.spec.ts
+11 -5
View File
@@ -406,8 +406,8 @@ test.describe('scenario 903 live selection pool', () => {
await expect(page.locator('.selected-card')).toHaveCount(1);
await page.locator('.custom-form select').selectOption('che_안전');
await page.locator('#build-general').click();
await expect.poll(() => dialogs).toContain(
'실패했습니다: 장수 선택 요청은 접수됐지만 처리 결과를 아직 확인하지 못했습니다. 같은 요청으로 다시 시도해 주세요.'
await expect(page.getByTestId('game-toast')).toContainText(
'장수 생성에 실패했습니다: 장수 선택 요청은 접수됐지만 처리 결과를 아직 확인하지 못했습니다. 같은 요청으로 다시 시도해 주세요.'
);
await waitForPool(page);
const retryCard = page
@@ -417,9 +417,11 @@ test.describe('scenario 903 live selection pool', () => {
await retryCard.locator('.select-button').click();
await page.locator('.custom-form select').selectOption('che_안전');
await page.locator('#build-general').click();
const createDialog = page.getByRole('alertdialog', { name: '완료' });
await expect(createDialog).toContainText('선택한 장수로 생성했습니다.');
await createDialog.getByRole('button', { name: '확인' }).click();
await expect(page).toHaveURL(/\/hwe\/$/);
expect(dialogs.filter((message) => message === '이 장수로 생성할까요?')).toHaveLength(2);
await expect.poll(() => dialogs).toContain('선택한 장수로 생성했습니다.');
expect(createClientRequestIds).toHaveLength(2);
expect(createClientRequestIds[1]).toBe(createClientRequestIds[0]);
@@ -452,7 +454,9 @@ test.describe('scenario 903 live selection pool', () => {
dialogs.length = 0;
await page.goto('select-general');
await expect.poll(() => dialogs).toContain('실패했습니다: 아직 다시 고를 수 없습니다');
await expect(page.getByTestId('game-toast')).toContainText(
'장수 선택 정보를 불러오지 못했습니다: 아직 다시 고를 수 없습니다'
);
await expect(page.locator('.error-text')).toHaveText('아직 다시 고를 수 없습니다');
const availableAt = '2026-07-29T00:00:00.000Z';
@@ -495,9 +499,11 @@ test.describe('scenario 903 live selection pool', () => {
expect(targetIndex).toBeGreaterThanOrEqual(0);
const targetName = names[targetIndex]!.trim();
await cards.nth(targetIndex).locator('.select-button').click();
const reselectDialog = page.getByRole('alertdialog', { name: '완료' });
await expect(reselectDialog).toContainText('선택한 장수로 변경했습니다.');
await reselectDialog.getByRole('button', { name: '확인' }).click();
await expect(page).toHaveURL(/\/hwe\/$/);
await expect.poll(() => dialogs).toContain(`이 장수를 선택할까요? : ${targetName}`);
await expect.poll(() => dialogs).toContain('선택한 장수로 변경했습니다.');
await expect
.poll(async () => (await db.general.findUniqueOrThrow({ where: { id: created.id } })).name)
app/game-frontend/src/App.vue
+2
View File
@@ -1,9 +1,11 @@
<script setup lang="ts">
import { RouterView } from 'vue-router';
import GameFeedbackLayer from './components/ui/GameFeedbackLayer.vue';
</script>
<template>
<RouterView />
<GameFeedbackLayer />
</template>
<style>
app/game-frontend/src/components/ui/GameFeedbackLayer.vue
+354
View File
@@ -0,0 +1,354 @@
<script setup lang="ts">
import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
import { useGameFeedback, type GameFeedbackKind } from '../../composables/useGameFeedback';
const { toasts, dialog, dismissToast, acknowledgeDialog } = useGameFeedback();
const dialogPanel = ref<HTMLElement | null>(null);
const acknowledgeButton = ref<HTMLButtonElement | null>(null);
let returnFocus: HTMLElement | null = null;
let previousBodyOverflow = '';
const titleFor = (kind: GameFeedbackKind): string => {
if (kind === 'success') return '완료';
if (kind === 'error') return '처리 실패';
return '안내';
};
const iconFor = (kind: GameFeedbackKind): string => {
if (kind === 'success') return '✓';
if (kind === 'error') return '!';
return 'i';
};
const restorePage = (): void => {
document.body.style.overflow = previousBodyOverflow;
const target = returnFocus;
returnFocus = null;
if (target?.isConnected) target.focus();
};
watch(
dialog,
async (next, previous) => {
if (next && !previous) {
returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
previousBodyOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
}
if (next) {
await nextTick();
acknowledgeButton.value?.focus();
return;
}
if (previous) restorePage();
},
{ flush: 'post' }
);
const handleDialogKeydown = (event: KeyboardEvent): void => {
if (event.key === 'Escape') {
event.preventDefault();
acknowledgeDialog();
return;
}
if (event.key !== 'Tab' || !dialogPanel.value) return;
const focusable = [...dialogPanel.value.querySelectorAll<HTMLElement>('button:not(:disabled), [tabindex="0"]')];
if (focusable.length === 0) return;
const first = focusable[0];
const last = focusable.at(-1);
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last?.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first?.focus();
}
};
onBeforeUnmount(() => {
if (dialog.value) restorePage();
});
</script>
<template>
<Teleport to="body">
<div class="game-toast-viewport" aria-label="게임 알림">
<TransitionGroup name="game-toast" tag="div" class="game-toast-stack">
<article
v-for="toast in toasts"
:key="toast.id"
class="game-toast"
:class="`game-toast--${toast.kind}`"
:role="toast.kind === 'error' ? 'alert' : 'status'"
:aria-live="toast.kind === 'error' ? 'assertive' : 'polite'"
data-testid="game-toast"
:data-feedback-kind="toast.kind"
>
<span class="game-feedback-icon" aria-hidden="true">{{ iconFor(toast.kind) }}</span>
<span class="game-feedback-copy">
<strong>{{ titleFor(toast.kind) }}</strong>
<span>{{ toast.message }}</span>
</span>
<button
type="button"
class="game-feedback-close"
aria-label="알림 닫기"
@click="dismissToast(toast.id)"
>
×
</button>
</article>
</TransitionGroup>
</div>
<Transition name="game-dialog">
<div v-if="dialog" class="game-dialog-backdrop" data-testid="game-notice-dialog">
<section
ref="dialogPanel"
class="game-dialog-panel"
:class="`game-dialog-panel--${dialog.kind}`"
role="alertdialog"
aria-modal="true"
aria-labelledby="game-dialog-title"
aria-describedby="game-dialog-message"
@keydown="handleDialogKeydown"
>
<header>
<span class="game-feedback-icon" aria-hidden="true">{{ iconFor(dialog.kind) }}</span>
<h2 id="game-dialog-title">{{ dialog.title }}</h2>
</header>
<p id="game-dialog-message">{{ dialog.message }}</p>
<footer>
<button ref="acknowledgeButton" type="button" @click="acknowledgeDialog">
{{ dialog.acknowledgeLabel }}
</button>
</footer>
</section>
</div>
</Transition>
</Teleport>
</template>
<style scoped>
.game-toast-viewport {
position: fixed;
z-index: 2000;
top: max(0.75rem, env(safe-area-inset-top));
right: max(0.75rem, env(safe-area-inset-right));
width: min(24rem, calc(100vw - 1.5rem));
pointer-events: none;
}
.game-toast-stack {
display: grid;
gap: 0.5rem;
}
.game-toast {
display: grid;
grid-template-columns: 1.65rem minmax(0, 1fr) 1.8rem;
gap: 0.65rem;
align-items: start;
padding: 0.75rem;
color: #fff;
background: rgb(12 12 12 / 96%);
border: 1px solid #78653d;
border-left: 4px solid #a68b52;
box-shadow: 0 12px 30px rgb(0 0 0 / 55%);
pointer-events: auto;
}
.game-toast--success,
.game-dialog-panel--success {
border-left-color: #53b86b;
}
.game-toast--error,
.game-dialog-panel--error {
border-left-color: #d85c5c;
}
.game-toast--info,
.game-dialog-panel--info {
border-left-color: #5b91cf;
}
.game-feedback-icon {
display: grid;
place-items: center;
width: 1.65rem;
height: 1.65rem;
color: #080808;
background: #a68b52;
border-radius: 999px;
font-weight: 800;
}
.game-toast--success .game-feedback-icon,
.game-dialog-panel--success .game-feedback-icon {
background: #53b86b;
}
.game-toast--error .game-feedback-icon,
.game-dialog-panel--error .game-feedback-icon {
background: #d85c5c;
}
.game-toast--info .game-feedback-icon,
.game-dialog-panel--info .game-feedback-icon {
background: #5b91cf;
}
.game-feedback-copy {
display: grid;
gap: 0.1rem;
min-width: 0;
line-height: 1.4;
overflow-wrap: anywhere;
}
.game-feedback-copy strong {
color: #e5c982;
font-size: 0.78rem;
}
.game-feedback-close {
width: 1.8rem;
height: 1.8rem;
padding: 0;
color: #ddd;
background: transparent;
border: 0;
cursor: pointer;
font-size: 1.25rem;
line-height: 1;
}
.game-feedback-close:hover,
.game-feedback-close:focus-visible {
color: #fff;
background: #403723;
outline: 2px solid #c8aa68;
outline-offset: 1px;
}
.game-dialog-backdrop {
position: fixed;
z-index: 2100;
inset: 0;
display: grid;
place-items: center;
padding: 1rem;
background: rgb(0 0 0 / 78%);
}
.game-dialog-panel {
width: min(28rem, calc(100vw - 2rem));
padding: 1rem;
color: #fff;
background: #111;
border: 1px solid #78653d;
border-left: 4px solid #a68b52;
box-shadow: 0 18px 48px rgb(0 0 0 / 70%);
}
.game-dialog-panel header {
display: flex;
gap: 0.7rem;
align-items: center;
}
.game-dialog-panel h2,
.game-dialog-panel p {
margin: 0;
}
.game-dialog-panel h2 {
color: #e5c982;
font-size: 1rem;
}
.game-dialog-panel p {
padding: 1rem 0;
line-height: 1.55;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.game-dialog-panel footer {
display: flex;
justify-content: flex-end;
}
.game-dialog-panel footer button {
min-width: 5rem;
padding: 0.45rem 0.9rem;
color: #fff;
background: #444;
border: 1px solid #78653d;
cursor: pointer;
}
.game-dialog-panel footer button:hover,
.game-dialog-panel footer button:focus-visible {
background: #5a4a2d;
outline: 2px solid #c8aa68;
outline-offset: 2px;
}
.game-toast-enter-active,
.game-toast-leave-active,
.game-toast-move,
.game-dialog-enter-active,
.game-dialog-leave-active {
transition:
transform 160ms ease,
opacity 160ms ease;
}
.game-toast-enter-from,
.game-toast-leave-to {
opacity: 0;
transform: translateX(0.75rem);
}
.game-dialog-enter-from,
.game-dialog-leave-to {
opacity: 0;
}
@media (max-width: 640px) {
.game-toast-viewport {
top: auto;
right: max(0.5rem, env(safe-area-inset-right));
bottom: max(0.5rem, env(safe-area-inset-bottom));
left: max(0.5rem, env(safe-area-inset-left));
width: auto;
}
.game-dialog-backdrop {
place-items: end center;
padding: 0.75rem;
padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.game-dialog-panel {
width: min(28rem, calc(100vw - 1.5rem));
}
.game-toast-enter-from,
.game-toast-leave-to {
transform: translateY(0.75rem);
}
}
@media (prefers-reduced-motion: reduce) {
.game-toast-enter-active,
.game-toast-leave-active,
.game-toast-move,
.game-dialog-enter-active,
.game-dialog-leave-active {
transition: none;
}
}
</style>
app/game-frontend/src/composables/useGameFeedback.ts
+122
View File
@@ -0,0 +1,122 @@
import { readonly, ref } from 'vue';
export type GameFeedbackKind = 'success' | 'error' | 'info';
export type GameToast = {
id: number;
kind: GameFeedbackKind;
message: string;
};
export type GameNoticeDialog = {
id: number;
kind: GameFeedbackKind;
title: string;
message: string;
acknowledgeLabel: string;
};
export type GameNoticeDialogOptions = {
kind?: GameFeedbackKind;
title?: string;
message: string;
acknowledgeLabel?: string;
};
type QueuedDialog = {
dialog: GameNoticeDialog;
resolve: () => void;
};
const titleFor = (kind: GameFeedbackKind): string => {
if (kind === 'success') return '완료';
if (kind === 'error') return '처리 실패';
return '안내';
};
export const createGameFeedbackStore = () => {
const visibleToasts = ref<GameToast[]>([]);
const activeDialog = ref<GameNoticeDialog | null>(null);
const dismissTimers = new Map<number, ReturnType<typeof setTimeout>>();
const dialogQueue: QueuedDialog[] = [];
let activeDialogResolve: (() => void) | null = null;
let nextId = 1;
const dismissToast = (id: number): void => {
const timer = dismissTimers.get(id);
if (timer) clearTimeout(timer);
dismissTimers.delete(id);
visibleToasts.value = visibleToasts.value.filter((toast) => toast.id !== id);
};
const showToast = (message: string, kind: GameFeedbackKind = 'info', durationMs = 5_000): number => {
const normalizedMessage = message.trim();
if (!normalizedMessage) return -1;
const duplicate = visibleToasts.value.find(
(toast) => toast.message === normalizedMessage && toast.kind === kind
);
if (duplicate) dismissToast(duplicate.id);
const id = nextId++;
visibleToasts.value = [...visibleToasts.value.slice(-3), { id, kind, message: normalizedMessage }];
if (durationMs > 0) {
dismissTimers.set(id, setTimeout(() => dismissToast(id), durationMs));
}
return id;
};
const activateNextDialog = (): void => {
const next = dialogQueue.shift();
if (!next) {
activeDialog.value = null;
activeDialogResolve = null;
return;
}
activeDialogResolve = next.resolve;
activeDialog.value = next.dialog;
};
const showDialog = (options: GameNoticeDialogOptions): Promise<void> => {
const message = options.message.trim();
if (!message) return Promise.resolve();
const kind = options.kind ?? 'info';
return new Promise((resolve) => {
dialogQueue.push({
dialog: {
id: nextId++,
kind,
title: options.title?.trim() || titleFor(kind),
message,
acknowledgeLabel: options.acknowledgeLabel?.trim() || '확인',
},
resolve,
});
if (!activeDialog.value) activateNextDialog();
});
};
const acknowledgeDialog = (): void => {
const resolve = activeDialogResolve;
activeDialog.value = null;
activeDialogResolve = null;
resolve?.();
activateNextDialog();
};
return {
toasts: readonly(visibleToasts),
dialog: readonly(activeDialog),
showToast,
success: (message: string, durationMs?: number) => showToast(message, 'success', durationMs),
error: (message: string, durationMs?: number) => showToast(message, 'error', durationMs),
info: (message: string, durationMs?: number) => showToast(message, 'info', durationMs),
showDialog,
acknowledgeDialog,
dismissToast,
};
};
const gameFeedbackStore = createGameFeedbackStore();
export const useGameFeedback = () => gameFeedbackStore;
app/game-frontend/src/views/BoardView.vue
+4 -2
View File
@@ -2,6 +2,7 @@
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useGameFeedback } from '../composables/useGameFeedback';
import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
import { trpc } from '../utils/trpc';
@@ -9,6 +10,7 @@ type BoardArticle = Awaited<ReturnType<typeof trpc.board.getArticles.query>>[num
const route = useRoute();
const router = useRouter();
const { error: showErrorToast } = useGameFeedback();
const isSecretBoard = computed(() => route.name === 'board-secret');
const title = computed(() => (isSecretBoard.value ? '기밀실' : '회의실'));
const closeBoard = () => router.push('/');
@@ -92,7 +94,7 @@ const submitArticle = async () => {
resizeTextArea(articleTextArea.value);
await refreshArticles();
} catch (error) {
window.alert(`실패했습니다. :${errorText(error, '게시물 등록에 실패했습니다.')}`);
showErrorToast(`게시물 등록에 실패했습니다: ${errorText(error, '게시물 등록에 실패했습니다.')}`);
}
};
@@ -106,7 +108,7 @@ const submitComment = async (postId: number) => {
commentDrafts[postId] = '';
await refreshArticles();
} catch (error) {
window.alert(`실패했습니다: ${errorText(error, '댓글 등록에 실패했습니다.')}`);
showErrorToast(`댓글 등록에 실패했습니다: ${errorText(error, '댓글 등록에 실패했습니다.')}`);
}
};
app/game-frontend/src/views/JoinView.vue
+19 -7
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';
import { useGameFeedback } from '../composables/useGameFeedback';
import PanelCard from '../components/ui/PanelCard.vue';
import SkeletonLines from '../components/ui/SkeletonLines.vue';
import MapViewer from '../components/main/MapViewer.vue';
@@ -42,6 +43,7 @@ type PendingPossessAction = {
const router = useRouter();
const route = useRoute();
const session = useSessionStore();
const { error: showErrorToast, showDialog } = useGameFeedback();
const loading = ref(true);
const error = ref<string | null>(null);
@@ -459,14 +461,20 @@ const loadNpcCandidates = async (refresh = false) => {
} catch (err) {
npcError.value = err instanceof Error ? err.message : 'npc_list_failed';
if (refresh) {
window.alert(npcError.value);
if (isTrpcBusinessError(err)) {
await showDialog({
kind: 'error',
title: '빙의 대상 갱신 실패',
message: `${npcError.value}\n확인 후 페이지를 새로고침합니다.`,
});
window.location.reload();
} else {
showErrorToast(`빙의 대상 갱신에 실패했습니다: ${npcError.value}`);
}
} else if (isTrpcBusinessError(err)) {
window.alert(npcError.value);
await showDialog({ kind: 'error', title: '빙의 대상 확인 실패', message: npcError.value });
} else {
window.alert(`알 수 없는 에러: ${npcError.value}`);
showErrorToast(`빙의 대상 확인에 실패했습니다: ${npcError.value}`);
}
} finally {
npcLoading.value = false;
@@ -513,7 +521,7 @@ const submitPossession = async (pending: PendingPossessAction) => {
clientRequestId: pending.clientRequestId,
});
clearPendingPossess(pending);
window.alert('빙의에 성공했습니다.');
await showDialog({ kind: 'success', message: '빙의에 성공했습니다.' });
await session.refreshGeneralStatus();
if (session.hasGeneral) {
await router.push({ name: 'home' });
@@ -524,10 +532,14 @@ const submitPossession = async (pending: PendingPossessAction) => {
}
error.value = err instanceof Error ? err.message : 'possess_failed';
if (isTrpcBusinessError(err) && !isIndeterminateTimeout(err)) {
window.alert(error.value);
await showDialog({
kind: 'error',
title: '빙의 실패',
message: `${error.value}\n확인 후 페이지를 새로고침합니다.`,
});
window.location.reload();
} else if (!isIndeterminateTimeout(err)) {
window.alert(`알 수 없는 에러: ${error.value}`);
showErrorToast(`빙의에 실패했습니다: ${error.value}`);
}
} finally {
submitting.value = false;
@@ -566,7 +578,7 @@ const loadNpcGeneralList = async () => {
npcGeneralListVisibleCount.value = 50;
} catch (err) {
npcGeneralListError.value = err instanceof Error ? err.message : 'npc_general_list_failed';
window.alert(`실패했습니다: ${npcGeneralListError.value}`);
showErrorToast(`NPC 장수 목록을 불러오지 못했습니다: ${npcGeneralListError.value}`);
} finally {
npcGeneralListLoading.value = false;
}
app/game-frontend/src/views/MyPageView.vue
+10 -4
View File
@@ -7,10 +7,12 @@ import { isDefenceTrainPenaltyWaivedByScenarioEffect } from '@sammo-ts/logic';
import { useSessionStore } from '../stores/session';
import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
import { useGameFeedback } from '../composables/useGameFeedback';
const SCREEN_MODE_KEY = 'sam.screenMode';
const CUSTOM_CSS_KEY = 'sam_customCSS';
const PENDING_DIE_ON_PRESTART_KEY = 'sam.pending.dieOnPrestart';
const { error: showErrorToast, showDialog } = useGameFeedback();
type ScreenMode = 'auto' | '500px' | '1000px';
type LogType = 'generalHistory' | 'battleDetail' | 'battleResult' | 'generalAction';
type ItemSlotKey = 'horse' | 'weapon' | 'book' | 'item';
@@ -249,7 +251,7 @@ const changeGeneralIcon = async () => {
});
await loadPage();
} catch (cause) {
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`전용 아이콘 변경에 실패했습니다: ${errorText(cause)}`);
}
};
@@ -259,7 +261,7 @@ const saveSettings = async () => {
await trpc.general.setMySetting.mutate({ ...form });
await loadPage();
} catch (cause) {
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`설정 저장에 실패했습니다: ${errorText(cause)}`);
}
};
@@ -269,7 +271,7 @@ const confirmMutation = async (message: string, mutation: () => Promise<unknown>
await mutation();
await loadPage();
} catch (cause) {
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`요청 처리에 실패했습니다: ${errorText(cause)}`);
if (reloadAfterFailure) {
const code = asRecord(asRecord(cause).data).code;
await loadPage(code !== 'TIMEOUT');
@@ -291,7 +293,11 @@ const dieOnPrestart = async () => {
if (code !== 'TIMEOUT') {
window.sessionStorage.removeItem(PENDING_DIE_ON_PRESTART_KEY);
}
alert(`실패했습니다: ${errorText(cause)}`);
await showDialog({
kind: 'error',
title: '장수 삭제 실패',
message: `요청 처리에 실패했습니다: ${errorText(cause)}\n확인 후 페이지를 새로고침합니다.`,
});
window.location.reload();
}
};
app/game-frontend/src/views/MySettingsView.vue
+5 -3
View File
@@ -2,10 +2,12 @@
import { computed, onMounted, reactive, ref, watch } from 'vue';
import PanelCard from '../components/ui/PanelCard.vue';
import SkeletonLines from '../components/ui/SkeletonLines.vue';
import { useGameFeedback } from '../composables/useGameFeedback';
import { trpc } from '../utils/trpc';
const CUSTOM_CSS_KEY = 'sammo-custom-css';
const SCREEN_MODE_KEY = 'sammo-screen-mode';
const { success: showSuccessToast, error: showErrorToast } = useGameFeedback();
type MyGeneralResponse = Awaited<ReturnType<typeof trpc.general.me.query>>;
@@ -170,7 +172,7 @@ const loadSettings = async () => {
const saveSettings = async () => {
if (!canSave.value) {
alert('설정 저장 가능 횟수가 없습니다.');
showErrorToast('설정 저장 가능 횟수가 없습니다.');
return;
}
@@ -182,9 +184,9 @@ const saveSettings = async () => {
use_auto_nation_turn: resolveNumber(form.use_auto_nation_turn, 1),
});
await loadSettings();
alert('설정을 저장했습니다.');
showSuccessToast('설정을 저장했습니다.');
} catch (err) {
alert(`실패했습니다: ${resolveErrorMessage(err)}`);
showErrorToast(`설정 저장에 실패했습니다: ${resolveErrorMessage(err)}`);
}
};
app/game-frontend/src/views/NationPersonnelView.vue
+3 -1
View File
@@ -2,6 +2,7 @@
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useGameFeedback } from '../composables/useGameFeedback';
import { resolveGeneralIconBackgroundImage } from '../utils/generalIcon';
import { trpc } from '../utils/trpc';
import { cityLevelMap, formatOfficerLevelText, getNationChiefLevel, regionMap } from '../utils/nationFormat';
@@ -27,6 +28,7 @@ const kickTargetId = ref(0);
const ambassadorSelection = ref<number[]>([]);
const auditorSelection = ref<number[]>([]);
const router = useRouter();
const { error: showErrorToast } = useGameFeedback();
const resolveErrorMessage = (value: unknown): string =>
value instanceof Error ? value.message : typeof value === 'string' ? value : 'unknown_error';
@@ -157,7 +159,7 @@ const appointCityOfficer = async (level: OfficerLevel) => {
const enforcePermissionLimit = (selection: number[]) => {
if (selection.length <= 2) return;
selection.splice(0, selection.length - 2);
window.alert('최대 2명까지 설정 가능합니다.');
showErrorToast('최대 2명까지 설정 가능합니다.');
};
const changePermissions = async (isAmbassador: boolean) => {
app/game-frontend/src/views/SelectGeneralView.vue
+8 -6
View File
@@ -2,6 +2,7 @@
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useGameFeedback } from '../composables/useGameFeedback';
import { useSessionStore } from '../stores/session';
import { formatSeoulDateTime } from '../utils/legacyDateTime';
import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
@@ -21,6 +22,7 @@ type PendingSelectionAction = {
const router = useRouter();
const session = useSessionStore();
const { error: showErrorToast, showDialog } = useGameFeedback();
const config = ref<JoinConfig | null>(null);
const reservation = ref<Reservation | null>(null);
@@ -181,7 +183,7 @@ const selectCandidate = async (candidate: Candidate): Promise<void> => {
clientRequestId: pending.clientRequestId,
});
clearPendingAction(pending);
alert('선택한 장수로 변경했습니다.');
await showDialog({ kind: 'success', message: '선택한 장수로 변경했습니다.' });
await session.refreshGeneralStatus();
await router.push('/');
} catch (cause) {
@@ -189,7 +191,7 @@ const selectCandidate = async (candidate: Candidate): Promise<void> => {
if (!isIndeterminateTimeout(cause)) {
clearPendingAction(pending);
}
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`장수 변경에 실패했습니다: ${errorText(cause)}`);
await loadPage();
} finally {
submitting.value = false;
@@ -199,7 +201,7 @@ const selectCandidate = async (candidate: Candidate): Promise<void> => {
const createGeneral = async (): Promise<void> => {
const candidate = selectedCandidate.value;
if (!candidate) {
alert('장수를 선택해주세요!');
showErrorToast('장수를 선택해주세요.');
return;
}
if (!confirm('이 장수로 생성할까요?')) {
@@ -215,7 +217,7 @@ const createGeneral = async (): Promise<void> => {
clientRequestId: pending.clientRequestId,
});
clearPendingAction(pending);
alert('선택한 장수로 생성했습니다.');
await showDialog({ kind: 'success', message: '선택한 장수로 생성했습니다.' });
await session.refreshGeneralStatus();
await router.push('/');
} catch (cause) {
@@ -223,7 +225,7 @@ const createGeneral = async (): Promise<void> => {
if (!isIndeterminateTimeout(cause)) {
clearPendingAction(pending);
}
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`장수 생성에 실패했습니다: ${errorText(cause)}`);
await loadPage();
} finally {
submitting.value = false;
@@ -247,7 +249,7 @@ async function loadPage(): Promise<void> {
} catch (cause) {
console.error(cause);
error.value = errorText(cause);
alert(`실패했습니다: ${error.value}`);
showErrorToast(`장수 선택 정보를 불러오지 못했습니다: ${error.value}`);
} finally {
loading.value = false;
}
app/game-frontend/test/gameFeedback.test.ts
+56
View File
@@ -0,0 +1,56 @@
import assert from 'node:assert/strict';
import test from 'node:test';
import { createGameFeedbackStore } from '../src/composables/useGameFeedback.ts';
void test('keeps four recent toasts and replaces an exact duplicate', () => {
const feedback = createGameFeedbackStore();
feedback.info('첫 번째', 0);
feedback.success('두 번째', 0);
feedback.error('세 번째', 0);
feedback.info('네 번째', 0);
feedback.success('다섯 번째', 0);
assert.deepEqual(
feedback.toasts.value.map((toast) => toast.message),
['두 번째', '세 번째', '네 번째', '다섯 번째']
);
feedback.error('세 번째', 0);
assert.deepEqual(
feedback.toasts.value.map((toast) => `${toast.kind}:${toast.message}`),
['success:두 번째', 'info:네 번째', 'success:다섯 번째', 'error:세 번째']
);
});
void test('queues acknowledgement dialogs and resolves each request in order', async () => {
const feedback = createGameFeedbackStore();
let firstResolved = false;
let secondResolved = false;
const first = feedback
.showDialog({ kind: 'error', title: '첫 알림', message: '먼저 확인' })
.then(() => (firstResolved = true));
const second = feedback
.showDialog({ kind: 'success', message: '다음 확인', acknowledgeLabel: '계속' })
.then(() => (secondResolved = true));
assert.equal(feedback.dialog.value?.title, '첫 알림');
feedback.acknowledgeDialog();
await first;
assert.equal(firstResolved, true);
assert.equal(secondResolved, false);
assert.deepEqual(feedback.dialog.value, {
id: 2,
kind: 'success',
title: '완료',
message: '다음 확인',
acknowledgeLabel: '계속',
});
feedback.acknowledgeDialog();
await second;
assert.equal(secondResolved, true);
assert.equal(feedback.dialog.value, null);
});