merge: add in-game action feedback

app/game-frontend/e2e/board.spec.ts

@@ -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) => {
+    await page.setViewportSize({ width: 390, height: 844 });
-        expect(dialog.message()).toBe('실패했습니다: 접속 제한입니다.');
+    const documentWidthBeforeToast = await page.evaluate(() => document.documentElement.scrollWidth);
-        await dialog.accept();
-    });
     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

@@ -838,9 +838,7 @@ test('내 정보 즉시행동은 timeout 재시도 ID를 유지하고 성공 후
 
     await instantRetreatButton.click();
     await expect.poll(() => state.instantRetreatInputs?.length).toBe(1);
-    await expect
+    await expect(page.getByTestId('game-toast')).toContainText('요청 처리 결과를 확인하지 못했습니다.');
-        .poll(() => dialogs.some((message) => message.includes('요청 처리 결과를 확인하지 못했습니다.')))
-        .toBe(true);
     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
+    const failureDialog = page.getByRole('alertdialog', { name: '장수 삭제 실패' });
-        .poll(() =>
+    await expect(failureDialog).toContainText('요청은 접수됐지만 처리 결과를 아직 확인하지 못했습니다.');
-            dialogs.some((message) =>
+    await failureDialog.getByRole('button', { name: '확인' }).click();
-                message.includes('alert:실패했습니다: 요청은 접수됐지만 처리 결과를 아직 확인하지 못했습니다.')
-            )
-        )
-        .toBe(true);
     await timeoutReload;
     await page.waitForLoadState('networkidle');
     await expect(deleteButton).toBeVisible();

app/game-frontend/e2e/npcPossession.spec.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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);
+});