merge: 최신 main을 왕조 profile 경계 작업에 통합

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

@@ -11,6 +11,8 @@ type FixtureState = {
     failPersonnelLoad?: boolean;
     rate: number;
     appointedGeneralId?: number;
+    appointedCityId?: number;
+    appointedOfficerLevel?: number;
     noticeMutationInput?: string;
     scoutMutationInput?: string;
     uploadDataUrl?: string;
@@ -230,7 +232,9 @@ const installFixture = async (page: Page, state: FixtureState) => {
             }
             if (operation === 'nation.getStratFinan') return response(financeFixture(state));
             if (operation === 'nation.appoint') {
-                state.appointedGeneralId = 6;
+                state.appointedGeneralId = Number(jsonInput.destGeneralId ?? 0);
+                state.appointedCityId = Number(jsonInput.destCityId ?? 0);
+                state.appointedOfficerLevel = Number(jsonInput.officerLevel ?? 0);
                 return response({ ok: true });
             }
             if (operation === 'nation.kick' || operation === 'nation.changePermission') return response({ ok: true });
@@ -281,7 +285,7 @@ const screenshot = async (page: Page, name: string) => {
     await page.screenshot({ path: resolve(artifactRoot, name), fullPage: true });
 };
 
-test('personnel matches the 1000px legacy table geometry, textures, image, and interaction states', async ({
+test('personnel keeps the legacy frame while presenting modern appointment cards and interaction states', async ({
     page,
 }) => {
     await installFixture(page, { role: 'leader', rate: 20 });
@@ -309,6 +313,8 @@ test('personnel matches the 1000px legacy table geometry, textures, image, and i
             heading: box('.heading-table'),
             status: box('.chief-status'),
             icon: box('.general-icon'),
+            appointmentCard: box('.appointment-card'),
+            selectionTrigger: box('.selection-trigger'),
             documentWidth: document.documentElement.scrollWidth,
         };
     });
@@ -318,16 +324,17 @@ test('personnel matches the 1000px legacy table geometry, textures, image, and i
     expect(computed.status.width).toBe(1000);
     expect(computed.icon.width).toBeCloseTo(64.7, 0);
     expect(computed.icon.height).toBeCloseTo(64, 0);
+    expect(computed.appointmentCard.width).toBeGreaterThan(450);
+    expect(computed.appointmentCard.height).toBeGreaterThan(140);
+    expect(computed.selectionTrigger.height).toBeGreaterThanOrEqual(70);
     expect(computed.container.fontFamily).toContain('Pretendard');
     expect(computed.container.fontSize).toBe('14px');
     expect(computed.container.lineHeight).toBe('18.2px');
     expect(computed.status.backgroundImage).toContain('back_walnut.jpg');
     expect(computed.documentWidth).toBe(1000);
 
-    const appointButton = page.getByRole('button', { name: '임명' }).first();
+    const appointButton = page.getByRole('button', { name: '주부 임명', exact: true });
-    expect(await appointButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe(
+    expect(await appointButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe('rgb(55, 104, 70)');
-        'rgb(108, 117, 125)'
-    );
     await appointButton.hover();
     expect(await appointButton.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
     await appointButton.focus();
@@ -335,6 +342,44 @@ test('personnel matches the 1000px legacy table geometry, textures, image, and i
     await screenshot(page, 'core-personnel-desktop-leader.png');
 });
 
+test('personnel selects an informed general and reports the JosaUtil-composed result in a toast', async ({ page }) => {
+    const state: FixtureState = { role: 'head', rate: 20 };
+    await installFixture(page, state);
+    await page.setViewportSize({ width: 1000, height: 900 });
+    await gotoOffice(page, 'nation/personnel');
+
+    await page.getByRole('button', { name: '주부 장수 선택', exact: true }).click();
+    const picker = page.getByTestId('personnel-selection-dialog');
+    await expect(picker).toBeVisible();
+    await expect(picker.getByRole('heading', { name: '주부 임명 대상 선택' })).toBeVisible();
+    await picker.getByPlaceholder('장수명·도시·관직·특성 검색').fill('장료');
+    const candidate = picker.getByRole('button', { name: /장료/ });
+    await expect(candidate).toContainText('허창 · 일반 장수');
+    await expect(candidate).toContainText('통솔70');
+    await expect(candidate).toContainText('소속10년');
+    await expect(candidate).toContainText('병력100');
+    await candidate.hover();
+    expect(await candidate.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
+    await candidate.focus();
+    expect(await candidate.evaluate((button) => getComputedStyle(button).outlineStyle)).not.toBe('none');
+    await screenshot(page, 'core-personnel-desktop-general-picker.png');
+    await candidate.click();
+
+    await expect(page.getByRole('button', { name: '주부 장수 선택', exact: true })).toContainText('장료');
+    page.once('dialog', async (dialog) => {
+        expect(dialog.message()).toBe('장료를 주부직에 임명하시겠습니까?');
+        await dialog.accept();
+    });
+    await page.getByRole('button', { name: '주부 임명', exact: true }).click();
+
+    await expect(page.getByTestId('game-toast')).toContainText('장료를 임명했습니다.');
+    expect(state.appointedGeneralId).toBe(6);
+    expect(state.appointedCityId).toBe(0);
+    expect(state.appointedOfficerLevel).toBe(11);
+    await expect(page.locator('.feedback.status')).toHaveCount(0);
+    await screenshot(page, 'core-personnel-appointment-toast.png');
+});
+
 test('personnel preserves the legacy fixed 1000px document on a 500px viewport', async ({ page }) => {
     await installFixture(page, { role: 'head', rate: 20 });
     await page.setViewportSize({ width: 500, height: 900 });
@@ -346,6 +391,38 @@ test('personnel preserves the legacy fixed 1000px document on a 500px viewport',
     expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(1000);
     await expect(page.getByRole('combobox', { name: '외교권자' })).toHaveCount(0);
     await expect(page.getByRole('combobox', { name: '추방 대상 장수' })).toBeVisible();
+
+    await page.getByRole('button', { name: '태수 도시 선택', exact: true }).click();
+    const picker = page.getByTestId('personnel-selection-dialog');
+    await expect(picker).toBeVisible();
+    expect(await picker.evaluate((element) => getComputedStyle(element).transitionDuration)).toContain('0.15s');
+    await expect(picker).toHaveCSS('transform', 'none');
+    const pickerGeometry = await picker.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            left: rect.left,
+            right: rect.right,
+            bottom: rect.bottom,
+            width: rect.width,
+            maxHeight: style.maxHeight,
+            borderTopLeftRadius: style.borderTopLeftRadius,
+        };
+    });
+    expect(pickerGeometry.left).toBeGreaterThanOrEqual(0);
+    expect(pickerGeometry.right).toBeLessThanOrEqual(500);
+    expect(pickerGeometry.bottom).toBe(900);
+    expect(pickerGeometry.width).toBeGreaterThan(480);
+    expect(pickerGeometry.borderTopLeftRadius).toBe('16px');
+    await expect(picker.getByRole('button', { name: /낙양/ })).toContainText('중원 · 중도시');
+    await expect(picker.getByRole('button', { name: /허창/ })).toContainText('현재 태수하후돈');
+    await picker.getByRole('button', { name: /낙양/ }).focus();
+    expect(
+        await picker.getByRole('button', { name: /낙양/ }).evaluate((button) => getComputedStyle(button).outlineStyle)
+    ).not.toBe('none');
+    await screenshot(page, 'core-personnel-mobile-city-picker.png');
+    await picker.getByRole('button', { name: /낙양/ }).click();
+    await expect(page.getByRole('button', { name: '태수 도시 선택', exact: true })).toContainText('낙양');
     await screenshot(page, 'core-personnel-mobile-head.png');
 });
 

app/game-frontend/src/components/personnel/PersonnelSelectionDialog.vue

@@ -0,0 +1,528 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+
+type SelectionMetric = {
+    label: string;
+    value: string;
+};
+
+type SelectionItem = {
+    id: number;
+    name: string;
+    subtitle: string;
+    searchText: string;
+    accent?: 'current' | 'assigned' | 'available';
+    iconBackground?: string;
+    badges?: string[];
+    stats?: SelectionMetric[];
+    details?: SelectionMetric[];
+};
+
+const props = withDefaults(
+    defineProps<{
+        open: boolean;
+        title: string;
+        description: string;
+        items: SelectionItem[];
+        selectedId: number;
+        searchPlaceholder?: string;
+        vacancyLabel?: string | null;
+    }>(),
+    {
+        searchPlaceholder: '이름이나 조건으로 검색',
+        vacancyLabel: null,
+    }
+);
+
+const emit = defineEmits<{
+    cancel: [];
+    select: [id: number];
+}>();
+
+const query = ref('');
+const searchInput = ref<HTMLInputElement | null>(null);
+const dialogPanel = ref<HTMLElement | null>(null);
+let returnFocus: HTMLElement | null = null;
+let previousBodyOverflow = '';
+
+const normalizedQuery = computed(() => query.value.trim().toLocaleLowerCase('ko-KR'));
+const filteredItems = computed(() => {
+    const keyword = normalizedQuery.value;
+    if (!keyword) return props.items;
+    return props.items.filter((item) => item.searchText.toLocaleLowerCase('ko-KR').includes(keyword));
+});
+
+const close = (): void => emit('cancel');
+const select = (id: number): void => emit('select', id);
+
+const restorePage = (): void => {
+    document.body.style.overflow = previousBodyOverflow;
+    const target = returnFocus;
+    returnFocus = null;
+    if (target?.isConnected) target.focus();
+};
+
+watch(
+    () => props.open,
+    async (open, previous) => {
+        if (open && !previous) {
+            query.value = '';
+            returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            previousBodyOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            await nextTick();
+            searchInput.value?.focus();
+            return;
+        }
+        if (!open && previous) restorePage();
+    },
+    { flush: 'post' }
+);
+
+const handleKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        close();
+        return;
+    }
+    if (event.key !== 'Tab' || !dialogPanel.value) return;
+    const focusable = [
+        ...dialogPanel.value.querySelectorAll<HTMLElement>(
+            'input:not(:disabled), 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 (props.open) restorePage();
+});
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition name="personnel-picker">
+            <div v-if="open" class="personnel-picker-backdrop" @click.self="close">
+                <section
+                    ref="dialogPanel"
+                    class="personnel-picker"
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby="personnel-picker-title"
+                    aria-describedby="personnel-picker-description"
+                    data-testid="personnel-selection-dialog"
+                    @keydown="handleKeydown"
+                >
+                    <header class="personnel-picker-header">
+                        <div>
+                            <p class="personnel-picker-eyebrow">인사부 선택 도우미</p>
+                            <h2 id="personnel-picker-title">{{ title }}</h2>
+                            <p id="personnel-picker-description">{{ description }}</p>
+                        </div>
+                        <button type="button" class="personnel-picker-close" aria-label="선택 창 닫기" @click="close">
+                            ×
+                        </button>
+                    </header>
+
+                    <label class="personnel-picker-search">
+                        <span class="sr-only">{{ searchPlaceholder }}</span>
+                        <span aria-hidden="true">⌕</span>
+                        <input ref="searchInput" v-model="query" type="search" :placeholder="searchPlaceholder" />
+                    </label>
+
+                    <div class="personnel-picker-results" aria-label="선택 후보">
+                        <button
+                            v-if="vacancyLabel"
+                            type="button"
+                            class="personnel-picker-card vacancy-card"
+                            :class="{ selected: selectedId === 0 }"
+                            :aria-pressed="selectedId === 0"
+                            @click="select(0)"
+                        >
+                            <span class="vacancy-icon" aria-hidden="true">＋</span>
+                            <span>
+                                <strong>{{ vacancyLabel }}</strong>
+                                <small>현재 관직을 비우려면 선택하세요.</small>
+                            </span>
+                            <span v-if="selectedId === 0" class="selection-check">선택됨</span>
+                        </button>
+
+                        <button
+                            v-for="item in filteredItems"
+                            :key="item.id"
+                            type="button"
+                            class="personnel-picker-card"
+                            :class="[
+                                item.accent ? `personnel-picker-card--${item.accent}` : '',
+                                { selected: selectedId === item.id },
+                            ]"
+                            :aria-pressed="selectedId === item.id"
+                            @click="select(item.id)"
+                        >
+                            <span
+                                v-if="item.iconBackground"
+                                class="personnel-picker-portrait"
+                                :style="{ backgroundImage: item.iconBackground }"
+                                aria-hidden="true"
+                            />
+                            <span v-else class="personnel-picker-city-icon" aria-hidden="true">城</span>
+
+                            <span class="personnel-picker-card-body">
+                                <span class="personnel-picker-card-title">
+                                    <span>
+                                        <strong>{{ item.name }}</strong>
+                                        <small>{{ item.subtitle }}</small>
+                                    </span>
+                                    <span v-if="selectedId === item.id" class="selection-check">선택됨</span>
+                                </span>
+
+                                <span v-if="item.badges?.length" class="personnel-picker-badges">
+                                    <span v-for="badge in item.badges" :key="badge">{{ badge }}</span>
+                                </span>
+
+                                <span v-if="item.stats?.length" class="personnel-picker-stats">
+                                    <span v-for="stat in item.stats" :key="stat.label">
+                                        <small>{{ stat.label }}</small>
+                                        <strong>{{ stat.value }}</strong>
+                                    </span>
+                                </span>
+
+                                <span v-if="item.details?.length" class="personnel-picker-details">
+                                    <span v-for="detail in item.details" :key="detail.label">
+                                        <small>{{ detail.label }}</small>
+                                        <span>{{ detail.value }}</span>
+                                    </span>
+                                </span>
+                            </span>
+                        </button>
+
+                        <p v-if="filteredItems.length === 0" class="personnel-picker-empty">
+                            검색 조건에 맞는 후보가 없습니다.
+                        </p>
+                    </div>
+                </section>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.personnel-picker-backdrop {
+    position: fixed;
+    z-index: 2050;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    padding: 18px;
+    background: rgb(0 0 0 / 78%);
+    backdrop-filter: blur(3px);
+}
+.personnel-picker {
+    display: grid;
+    grid-template-rows: auto auto minmax(0, 1fr);
+    width: min(780px, calc(100vw - 36px));
+    max-height: min(760px, calc(100vh - 36px));
+    overflow: hidden;
+    color: #f6f2e8;
+    background: #121411;
+    border: 1px solid #78653d;
+    border-radius: 14px;
+    box-shadow: 0 24px 70px rgb(0 0 0 / 78%);
+    font: 14px/1.45 var(--sammo-font-sans);
+}
+.personnel-picker-header {
+    display: flex;
+    gap: 18px;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 20px 22px 16px;
+    background: linear-gradient(135deg, rgb(69 57 34 / 72%), rgb(25 28 22 / 96%));
+    border-bottom: 1px solid #53482f;
+}
+.personnel-picker-eyebrow {
+    margin: 0 0 3px;
+    color: #cbb171;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.13em;
+}
+.personnel-picker h2 {
+    margin: 0;
+    font-size: 22px;
+    line-height: 1.25;
+}
+.personnel-picker-header p:last-child {
+    margin: 7px 0 0;
+    color: #c9c8c2;
+}
+.personnel-picker-close {
+    flex: 0 0 auto;
+    width: 36px;
+    height: 36px;
+    border: 1px solid #6d634d;
+    border-radius: 999px;
+    padding: 0;
+    color: #ddd7ca;
+    background: rgb(0 0 0 / 28%);
+    font-size: 24px;
+    line-height: 1;
+    cursor: pointer;
+}
+.personnel-picker-search {
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr);
+    align-items: center;
+    margin: 14px 16px 10px;
+    padding: 0 12px;
+    color: #cbb171;
+    background: #080a08;
+    border: 1px solid #555949;
+    border-radius: 9px;
+}
+.personnel-picker-search input {
+    min-width: 0;
+    height: 42px;
+    border: 0;
+    outline: 0;
+    color: #fff;
+    background: transparent;
+    font: inherit;
+}
+.personnel-picker-search:focus-within {
+    border-color: #c7a85e;
+    box-shadow: 0 0 0 2px rgb(199 168 94 / 28%);
+}
+.personnel-picker-results {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    min-height: 160px;
+    padding: 6px 16px 18px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+.personnel-picker-card {
+    display: grid;
+    grid-template-columns: 58px minmax(0, 1fr);
+    gap: 12px;
+    align-items: start;
+    min-width: 0;
+    padding: 12px;
+    color: #f4f1e8;
+    background: #1a1d18;
+    border: 1px solid #474b3d;
+    border-left: 4px solid #6f7560;
+    border-radius: 10px;
+    text-align: left;
+    cursor: pointer;
+}
+.personnel-picker-card:hover {
+    background: #24291f;
+    border-color: #8d835f;
+    transform: translateY(-1px);
+}
+.personnel-picker-card:focus,
+.personnel-picker-card:focus-visible,
+.personnel-picker-close:focus,
+.personnel-picker-close:focus-visible {
+    outline: 2px solid #f3d27d;
+    outline-offset: 2px;
+}
+.personnel-picker-card.selected {
+    background: #252919;
+    border-color: #d2b45f;
+    box-shadow: inset 0 0 0 1px rgb(210 180 95 / 45%);
+}
+.personnel-picker-card--current {
+    border-left-color: #e36060;
+}
+.personnel-picker-card--assigned {
+    border-left-color: #d7a83f;
+}
+.personnel-picker-card--available {
+    border-left-color: #65a978;
+}
+.personnel-picker-portrait,
+.personnel-picker-city-icon,
+.vacancy-icon {
+    width: 58px;
+    height: 58px;
+    border: 1px solid #5c5f50;
+    border-radius: 10px;
+    background-color: #0b0c0a;
+}
+.personnel-picker-portrait {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.personnel-picker-city-icon,
+.vacancy-icon {
+    display: grid;
+    place-items: center;
+    color: #d8be79;
+    background: radial-gradient(circle at 50% 30%, #353626, #11130f 72%);
+    font: 700 24px/1 var(--sammo-font-sans);
+}
+.personnel-picker-card-body,
+.personnel-picker-card-title,
+.personnel-picker-card-title > span:first-child {
+    display: grid;
+    min-width: 0;
+}
+.personnel-picker-card-title {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px;
+}
+.personnel-picker-card-title strong,
+.vacancy-card strong {
+    font-size: 16px;
+}
+.personnel-picker-card-title small,
+.vacancy-card small {
+    color: #b8b8b2;
+}
+.selection-check {
+    align-self: start;
+    padding: 2px 6px;
+    color: #13150f;
+    background: #d5bb6f;
+    border-radius: 999px;
+    font-size: 10px;
+    font-weight: 800;
+}
+.personnel-picker-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 8px;
+}
+.personnel-picker-badges span {
+    padding: 2px 6px;
+    color: #ddd5c0;
+    background: #32352d;
+    border: 1px solid #555948;
+    border-radius: 999px;
+    font-size: 10px;
+}
+.personnel-picker-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5px;
+    margin-top: 9px;
+}
+.personnel-picker-stats > span {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 4px 6px;
+    background: #0e100d;
+    border-radius: 5px;
+}
+.personnel-picker-stats small,
+.personnel-picker-details small {
+    color: #aaa99f;
+    font-size: 10px;
+}
+.personnel-picker-stats strong {
+    color: #f1d47e;
+}
+.personnel-picker-details {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 3px 10px;
+    margin-top: 8px;
+}
+.personnel-picker-details > span {
+    display: flex;
+    gap: 5px;
+    min-width: 0;
+}
+.personnel-picker-details > span > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.vacancy-card {
+    grid-template-columns: 58px minmax(0, 1fr) auto;
+    align-items: center;
+}
+.vacancy-card > span:nth-child(2) {
+    display: grid;
+}
+.personnel-picker-empty {
+    grid-column: 1 / -1;
+    margin: 40px 0;
+    color: #bdbbb2;
+    text-align: center;
+}
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+.personnel-picker-enter-active,
+.personnel-picker-leave-active {
+    transition: opacity 150ms ease;
+}
+.personnel-picker-enter-active .personnel-picker,
+.personnel-picker-leave-active .personnel-picker {
+    transition:
+        transform 150ms ease,
+        opacity 150ms ease;
+}
+.personnel-picker-enter-from,
+.personnel-picker-leave-to,
+.personnel-picker-enter-from .personnel-picker,
+.personnel-picker-leave-to .personnel-picker {
+    opacity: 0;
+}
+.personnel-picker-enter-from .personnel-picker,
+.personnel-picker-leave-to .personnel-picker {
+    transform: translateY(10px) scale(0.985);
+}
+@media (max-width: 620px) {
+    .personnel-picker-backdrop {
+        align-items: end;
+        padding: 0;
+    }
+    .personnel-picker {
+        width: 100vw;
+        max-height: min(88vh, calc(100vh - env(safe-area-inset-top)));
+        border-right: 0;
+        border-bottom: 0;
+        border-left: 0;
+        border-radius: 16px 16px 0 0;
+    }
+    .personnel-picker-header {
+        padding: 16px;
+    }
+    .personnel-picker-results {
+        grid-template-columns: 1fr;
+        padding-bottom: max(18px, env(safe-area-inset-bottom));
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .personnel-picker-enter-active,
+    .personnel-picker-leave-active,
+    .personnel-picker-enter-active .personnel-picker,
+    .personnel-picker-leave-active .personnel-picker {
+        transition: none;
+    }
+}
+</style>

app/game-frontend/src/views/BestGeneralView.vue

@@ -87,8 +87,20 @@ watch(viewMode, () => {
         </div>
 
         <div class="view-selector" role="group" aria-label="장수 유형">
-            <input type="button" value="유저 보기" :aria-pressed="viewMode === 'user'" @click="viewMode = 'user'" />
+            <input
-            <input type="button" value="NPC 보기" :aria-pressed="viewMode === 'npc'" @click="viewMode = 'npc'" />
+                class="legacy-button"
+                type="button"
+                value="유저 보기"
+                :aria-pressed="viewMode === 'user'"
+                @click="viewMode = 'user'"
+            />
+            <input
+                class="legacy-button"
+                type="button"
+                value="NPC 보기"
+                :aria-pressed="viewMode === 'npc'"
+                @click="viewMode = 'npc'"
+            />
         </div>
 
         <div v-if="errorMessage" class="legacy-message error" role="alert">{{ errorMessage }}</div>

app/game-frontend/src/views/NationPersonnelView.vue

@@ -2,6 +2,9 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { JosaUtil } from '@sammo-ts/common';
+
+import PersonnelSelectionDialog from '../components/personnel/PersonnelSelectionDialog.vue';
 import { useGameFeedback } from '../composables/useGameFeedback';
 import { resolveGeneralIconBackgroundImage } from '../utils/generalIcon';
 import { trpc } from '../utils/trpc';
@@ -11,13 +14,28 @@ import { legacyNationTextColor } from '../utils/legacyNationColor';
 type PersonnelResponse = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
 type GeneralEntry = PersonnelResponse['generals'][number];
 type OfficerLevel = 2 | 3 | 4;
+type SelectionDialogItem = {
+    id: number;
+    name: string;
+    subtitle: string;
+    searchText: string;
+    accent: 'current' | 'assigned' | 'available';
+    iconBackground?: string;
+    badges: string[];
+    stats?: Array<{ label: string; value: string }>;
+    details: Array<{ label: string; value: string }>;
+};
+type SelectionContext =
+    | { kind: 'chief-general'; level: number }
+    | { kind: 'city'; level: OfficerLevel }
+    | { kind: 'city-general'; level: OfficerLevel };
 
 const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
 const cityOfficerLevels: OfficerLevel[] = [4, 3, 2];
 const loading = ref(false);
 const error = ref<string | null>(null);
-const status = ref<string | null>(null);
 const data = ref<PersonnelResponse | null>(null);
+const selectionContext = ref<SelectionContext | null>(null);
 const chiefAppointmentDraft = reactive<Record<number, number>>({});
 const cityDraft = reactive<Record<OfficerLevel, { cityId: number; generalId: number }>>({
     4: { cityId: 0, generalId: 0 },
@@ -28,7 +46,7 @@ const kickTargetId = ref(0);
 const ambassadorSelection = ref<number[]>([]);
 const auditorSelection = ref<number[]>([]);
 const router = useRouter();
-const { error: showErrorToast } = useGameFeedback();
+const { success: showSuccessToast, error: showErrorToast } = useGameFeedback();
 
 const resolveErrorMessage = (value: unknown): string =>
     value instanceof Error ? value.message : typeof value === 'string' ? value : 'unknown_error';
@@ -39,7 +57,6 @@ const loadPersonnel = async () => {
     error.value = null;
     try {
         data.value = await trpc.nation.getPersonnelInfo.query();
-        status.value = null;
     } catch (err) {
         error.value = resolveErrorMessage(err);
     } finally {
@@ -72,8 +89,14 @@ const officerLocked = (value: number, level: number): boolean => (value & (1 <<
 const chiefLocked = (level: number): boolean => officerLocked(data.value?.nation.chiefSet ?? 0, level);
 const cityOfficerLocked = (city: PersonnelResponse['cityAssignments'][number], level: number): boolean =>
     officerLocked(city.officerSet, level);
-const candidateLabel = (general: GeneralEntry): string =>
+const currentOfficeText = (general: GeneralEntry): string => {
-    `${general.name} 【${cityNameMap.value.get(general.cityId) ?? '-'}】`;
+    if (general.officerLevel <= 1) return '일반 장수';
+    const office = formatOfficerLevelText(general.officerLevel, nationLevel.value);
+    if (general.officerLevel >= 2 && general.officerLevel <= 4 && general.officerCityName) {
+        return `${general.officerCityName} ${office}`;
+    }
+    return office;
+};
 const chiefCandidates = (level: number): GeneralEntry[] => {
     const minimum = data.value?.chiefStatMin ?? 0;
     const candidates = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
@@ -90,6 +113,12 @@ const cityCandidates = (level: OfficerLevel): GeneralEntry[] => {
 };
 const openCities = (level: OfficerLevel) =>
     (data.value?.cityAssignments ?? []).filter((city) => !cityOfficerLocked(city, level));
+const selectedChief = (level: number): GeneralEntry | undefined =>
+    generalMap.value.get(chiefAppointmentDraft[level] ?? 0);
+const selectedCity = (level: OfficerLevel): PersonnelResponse['cityAssignments'][number] | undefined =>
+    data.value?.cityAssignments.find((city) => city.id === cityDraft[level].cityId);
+const selectedCityGeneral = (level: OfficerLevel): GeneralEntry | undefined =>
+    generalMap.value.get(cityDraft[level].generalId);
 const kickCandidates = computed(() =>
     (data.value?.generals ?? []).filter((general) => general.id !== data.value?.me.id)
 );
@@ -114,14 +143,12 @@ watch(data, initializeDrafts);
 
 const runMutation = async (action: () => Promise<unknown>, successMessage: string) => {
     error.value = null;
-    status.value = null;
     try {
         await action();
-        status.value = successMessage;
         await loadPersonnel();
-        status.value = successMessage;
+        showSuccessToast(successMessage);
     } catch (err) {
-        error.value = resolveErrorMessage(err);
+        showErrorToast(resolveErrorMessage(err));
     }
 };
 
@@ -129,11 +156,13 @@ const appointChief = async (level: number) => {
     const targetId = chiefAppointmentDraft[level] ?? 0;
     const target = generalMap.value.get(targetId);
     const office = formatOfficerLevelText(level, nationLevel.value);
-    const prompt = target ? `${target.name}을(를) ${office}직에 임명하시겠습니까?` : `${office}직을 비우시겠습니까?`;
+    const prompt = target
+        ? `${JosaUtil.put(target.name, '을')} ${office}직에 임명하시겠습니까?`
+        : `${office}직을 비우시겠습니까?`;
     if (!window.confirm(prompt)) return;
     await runMutation(
         () => trpc.nation.appoint.mutate({ destGeneralId: targetId, destCityId: 0, officerLevel: level }),
-        target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
+        target ? `${JosaUtil.put(target.name, '을')} 임명했습니다.` : '관직을 비웠습니다.'
     );
 };
 
@@ -142,7 +171,7 @@ const appointCityOfficer = async (level: OfficerLevel) => {
     const city = data.value?.cityAssignments.find((entry) => entry.id === draft.cityId);
     const target = generalMap.value.get(draft.generalId);
     const prompt = target
-        ? `${target.name}을(를) ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
+        ? `${JosaUtil.put(target.name, '을')} ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
         : `${city?.name ?? ''} ${officerLabels[level]}직을 비우시겠습니까?`;
     if (!window.confirm(prompt)) return;
     await runMutation(
@@ -152,10 +181,130 @@ const appointCityOfficer = async (level: OfficerLevel) => {
                 destCityId: draft.cityId,
                 officerLevel: level,
             }),
-        target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
+        target ? `${JosaUtil.put(target.name, '을')} 임명했습니다.` : '관직을 비웠습니다.'
     );
 };
 
+const generalSelectionItem = (general: GeneralEntry, targetLevel: number): SelectionDialogItem => {
+    const isCurrent = general.officerLevel === targetLevel;
+    const isAssigned = general.officerLevel > 1 && !isCurrent;
+    const office = currentOfficeText(general);
+    const city = general.cityName ?? cityNameMap.value.get(general.cityId) ?? '-';
+    const badges = [isCurrent ? '현재 임명 중' : isAssigned ? '다른 관직 재직' : '일반 장수'];
+    if (general.npcState > 0) badges.push('NPC');
+    if (general.personality?.name) badges.push(general.personality.name);
+    if (general.specialDomestic?.name) badges.push(general.specialDomestic.name);
+    if (general.specialWar?.name) badges.push(general.specialWar.name);
+    return {
+        id: general.id,
+        name: general.name,
+        subtitle: `${city} · ${office}`,
+        searchText: [
+            general.name,
+            city,
+            office,
+            general.personality?.name,
+            general.specialDomestic?.name,
+            general.specialWar?.name,
+            general.troopName,
+        ]
+            .filter(Boolean)
+            .join(' '),
+        accent: isCurrent ? 'current' : isAssigned ? 'assigned' : 'available',
+        iconBackground: imageBackground(general),
+        badges,
+        stats: [
+            { label: '통솔', value: general.stats.leadership.toLocaleString('ko-KR') },
+            { label: '무력', value: general.stats.strength.toLocaleString('ko-KR') },
+            { label: '지력', value: general.stats.intelligence.toLocaleString('ko-KR') },
+        ],
+        details: [
+            { label: '소속', value: `${general.belong.toLocaleString('ko-KR')}년` },
+            { label: '병력', value: general.crew.toLocaleString('ko-KR') },
+            { label: '부대', value: general.troopName ?? '없음' },
+            { label: '부상', value: general.injury > 0 ? `${general.injury}%` : '없음' },
+        ],
+    };
+};
+
+const citySelectionItem = (
+    city: PersonnelResponse['cityAssignments'][number],
+    level: OfficerLevel
+): SelectionDialogItem => {
+    const current = city.officers[level];
+    const region = regionMap[city.region] ?? '-';
+    const scale = cityLevelMap[city.level] ?? '-';
+    return {
+        id: city.id,
+        name: city.name,
+        subtitle: `${region} · ${scale}도시`,
+        searchText: `${city.name} ${region} ${scale} ${current?.name ?? '공석'}`,
+        accent: current ? 'assigned' : 'available',
+        badges: [current ? `${officerLabels[level]} 재직 중` : `${officerLabels[level]} 공석`],
+        details: [
+            { label: '지역', value: region },
+            { label: '규모', value: `${scale}도시` },
+            { label: `현재 ${officerLabels[level]}`, value: current?.name ?? '공석' },
+            { label: '소재지', value: current?.cityName ?? '-' },
+        ],
+    };
+};
+
+const selectionTitle = computed(() => {
+    const context = selectionContext.value;
+    if (!context) return '';
+    if (context.kind === 'chief-general') {
+        return `${formatOfficerLevelText(context.level, nationLevel.value)} 임명 대상 선택`;
+    }
+    if (context.kind === 'city') return `${officerLabels[context.level]} 임명 도시 선택`;
+    return `${officerLabels[context.level]} 임명 대상 선택`;
+});
+const selectionDescription = computed(() => {
+    const context = selectionContext.value;
+    if (!context) return '';
+    if (context.kind === 'city') {
+        return '지역과 도시 규모, 현재 재직자를 확인한 뒤 임명할 도시를 선택하세요.';
+    }
+    if (context.kind === 'chief-general') {
+        if (context.level === 11) return '군주를 제외한 장수 중에서 임명할 수 있습니다.';
+        const stat = context.level % 2 === 0 ? '무력' : '지력';
+        return `${stat} ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 주요 능력치를 함께 확인하세요.`;
+    }
+    if (context.level === 4) {
+        return `무력 ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 소재지를 함께 확인하세요.`;
+    }
+    if (context.level === 3) {
+        return `지력 ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 소재지를 함께 확인하세요.`;
+    }
+    return '현재 관직과 소재지, 주요 능력치를 확인한 뒤 임명할 장수를 선택하세요.';
+});
+const selectionItems = computed<SelectionDialogItem[]>(() => {
+    const context = selectionContext.value;
+    if (!context) return [];
+    if (context.kind === 'chief-general') {
+        return chiefCandidates(context.level).map((general) => generalSelectionItem(general, context.level));
+    }
+    if (context.kind === 'city') {
+        return openCities(context.level).map((city) => citySelectionItem(city, context.level));
+    }
+    return cityCandidates(context.level).map((general) => generalSelectionItem(general, context.level));
+});
+const selectionId = computed(() => {
+    const context = selectionContext.value;
+    if (!context) return 0;
+    if (context.kind === 'chief-general') return chiefAppointmentDraft[context.level] ?? 0;
+    if (context.kind === 'city') return cityDraft[context.level].cityId;
+    return cityDraft[context.level].generalId;
+});
+const applySelection = (id: number): void => {
+    const context = selectionContext.value;
+    if (!context) return;
+    if (context.kind === 'chief-general') chiefAppointmentDraft[context.level] = id;
+    else if (context.kind === 'city') cityDraft[context.level].cityId = id;
+    else cityDraft[context.level].generalId = id;
+    selectionContext.value = null;
+};
+
 const enforcePermissionLimit = (selection: number[]) => {
     if (selection.length <= 2) return;
     selection.splice(0, selection.length - 2);
@@ -173,10 +322,10 @@ const changePermissions = async (isAmbassador: boolean) => {
 
 const kickGeneral = async () => {
     const target = generalMap.value.get(kickTargetId.value);
-    if (!target || !window.confirm(`${target.name}을(를) 추방하시겠습니까?`)) return;
+    if (!target || !window.confirm(`${JosaUtil.put(target.name, '을')} 추방하시겠습니까?`)) return;
     await runMutation(
         () => trpc.nation.kick.mutate({ destGeneralId: target.id }),
-        `${target.name}을(를) 추방했습니다.`
+        `${JosaUtil.put(target.name, '을')} 추방했습니다.`
     );
 };
 
@@ -198,7 +347,6 @@ onMounted(() => void loadPersonnel());
         </table>
 
         <div v-if="error" class="feedback error" role="alert">{{ error }}</div>
-        <div v-if="status" class="feedback status" role="status">{{ status }}</div>
         <div v-if="loading" class="loading">불러오는 중...</div>
 
         <template v-if="data && !loading">
@@ -263,39 +411,83 @@ onMounted(() => void loadPersonnel());
                     <tr>
                         <td colspan="4" class="section-title blue">수 뇌 부 임 명</td>
                     </tr>
-                    <tr v-for="(pair, pairIndex) in chiefPairs" :key="pairIndex">
+                    <tr>
-                        <template v-for="level in pair" :key="level">
+                        <td colspan="4" class="appointment-workspace-cell">
-                            <td class="green-cell appoint-label">{{ formatOfficerLevelText(level, nationLevel) }}</td>
+                            <div class="appointment-card-grid">
-                            <td class="appoint-control">
+                                <article v-for="level in chiefLevels" :key="level" class="appointment-card">
-                                <template v-if="canManage && level !== 12 && !chiefLocked(level)">
+                                    <header class="appointment-card-header">
-                                    <select
+                                        <span>{{ formatOfficerLevelText(level, nationLevel) }}</span>
-                                        v-model.number="chiefAppointmentDraft[level]"
+                                        <small v-if="chiefLocked(level)" class="appointment-lock">변경 잠금</small>
-                                        :aria-label="`${formatOfficerLevelText(level, nationLevel)} 대상`"
+                                        <small v-else> 현재 {{ chiefAssignments[level]?.name ?? '공석' }} </small>
-                                    >
+                                    </header>
-                                        <option :value="0">____공석____</option>
+
-                                        <option
+                                    <template v-if="canManage && level !== 12 && !chiefLocked(level)">
-                                            v-for="candidate in chiefCandidates(level)"
+                                        <button
-                                            :key="candidate.id"
+                                            type="button"
-                                            :value="candidate.id"
+                                            class="selection-trigger"
+                                            :aria-label="`${formatOfficerLevelText(level, nationLevel)} 장수 선택`"
+                                            aria-haspopup="dialog"
+                                            @click="selectionContext = { kind: 'chief-general', level }"
                                         >
-                                            {{ candidateLabel(candidate) }}
+                                            <span
-                                        </option>
+                                                v-if="selectedChief(level)"
-                                    </select>
+                                                class="selection-trigger-portrait"
-                                    <button type="button" @click="appointChief(level)">임명</button>
+                                                :style="{ backgroundImage: imageBackground(selectedChief(level)) }"
-                                </template>
+                                                aria-hidden="true"
-                                <template v-else>
+                                            />
-                                    {{ chiefAssignments[level]?.name ?? '-' }}
+                                            <span v-else class="selection-trigger-empty" aria-hidden="true">＋</span>
-                                    <template v-if="chiefAssignments[level]">
+                                            <span class="selection-trigger-copy">
-                                        【{{ chiefAssignments[level]?.cityName ?? '-' }}】</template
+                                                <small>임명 대상</small>
-                                    >
+                                                <strong>{{ selectedChief(level)?.name ?? '공석으로 두기' }}</strong>
-                                </template>
+                                                <span v-if="selectedChief(level)">
-                            </td>
+                                                    {{ selectedChief(level)?.cityName ?? '-' }} ·
-                        </template>
+                                                    {{ currentOfficeText(selectedChief(level)!) }}
+                                                </span>
+                                                <span v-else>눌러서 장수를 선택하세요</span>
+                                            </span>
+                                            <span class="selection-trigger-chevron" aria-hidden="true">›</span>
+                                        </button>
+                                        <div v-if="selectedChief(level)" class="selected-general-stats">
+                                            <span
+                                                >통솔
+                                                <strong>{{ selectedChief(level)?.stats.leadership }}</strong></span
+                                            >
+                                            <span
+                                                >무력 <strong>{{ selectedChief(level)?.stats.strength }}</strong></span
+                                            >
+                                            <span
+                                                >지력
+                                                <strong>{{ selectedChief(level)?.stats.intelligence }}</strong></span
+                                            >
+                                            <span
+                                                >소속 <strong>{{ selectedChief(level)?.belong }}년</strong></span
+                                            >
+                                        </div>
+                                        <button type="button" class="appointment-submit" @click="appointChief(level)">
+                                            {{ formatOfficerLevelText(level, nationLevel) }} 임명
+                                        </button>
+                                    </template>
+                                    <div v-else class="appointment-readonly">
+                                        <span
+                                            v-if="chiefAssignments[level]"
+                                            class="selection-trigger-portrait"
+                                            :style="{ backgroundImage: imageBackground(chiefAssignments[level]) }"
+                                            aria-hidden="true"
+                                        />
+                                        <span v-else class="selection-trigger-empty" aria-hidden="true">－</span>
+                                        <span>
+                                            <strong>{{ chiefAssignments[level]?.name ?? '공석' }}</strong>
+                                            <small>{{ chiefAssignments[level]?.cityName ?? '임명된 장수 없음' }}</small>
+                                        </span>
+                                    </div>
+                                </article>
+                            </div>
+                        </td>
                     </tr>
                     <tr>
                         <td colspan="4" class="legend">
-                            ※ <span class="red">빨간색</span>은 현재 임명중인 장수, <span class="orange">노란색</span>은
+                            ※ 장수 선택 창에서 현재 임명 중인 장수, 다른 관직 재직자와 일반 장수를 구분하고 주요
-                            다른 관직에 임명된 장수, 하얀색은 일반 장수를 뜻합니다.
+                            능력치·소재지·부대 정보를 함께 확인할 수 있습니다.
                         </td>
                     </tr>
                 </tbody>
@@ -372,38 +564,97 @@ onMounted(() => void loadPersonnel());
                         <tr>
                             <td colspan="5" class="section-title orange-bg">도 시 관 직 임 명</td>
                         </tr>
-                        <tr v-for="level in cityOfficerLevels" :key="level">
+                        <tr>
-                            <td colspan="3" class="blue-cell city-appoint-label">{{ officerLabels[level] }} 임명</td>
+                            <td colspan="5" class="appointment-workspace-cell">
-                            <td colspan="2">
+                                <div class="city-appointment-grid">
-                                <select
+                                    <article
-                                    v-model.number="cityDraft[level].cityId"
+                                        v-for="level in cityOfficerLevels"
-                                    :aria-label="`${officerLabels[level]} 도시`"
+                                        :key="level"
-                                >
+                                        class="appointment-card city-appointment-card"
-                                    <option v-for="city in openCities(level)" :key="city.id" :value="city.id">
-                                        【{{ regionMap[city.region] ?? '-' }}】 {{ city.name }}
-                                    </option>
-                                </select>
-                                <select
-                                    v-model.number="cityDraft[level].generalId"
-                                    :aria-label="`${officerLabels[level]} 장수`"
-                                >
-                                    <option :value="0">____공석____</option>
-                                    <option
-                                        v-for="candidate in cityCandidates(level)"
-                                        :key="candidate.id"
-                                        :value="candidate.id"
                                     >
-                                        {{ candidateLabel(candidate) }}
+                                        <header class="appointment-card-header">
-                                    </option>
+                                            <span>{{ officerLabels[level] }}</span>
-                                </select>
+                                            <small>도시 관직</small>
-                                <button type="button" @click="appointCityOfficer(level)">임명</button>
+                                        </header>
+                                        <button
+                                            type="button"
+                                            class="selection-trigger compact"
+                                            :aria-label="`${officerLabels[level]} 도시 선택`"
+                                            aria-haspopup="dialog"
+                                            @click="selectionContext = { kind: 'city', level }"
+                                        >
+                                            <span class="selection-trigger-city" aria-hidden="true">城</span>
+                                            <span class="selection-trigger-copy">
+                                                <small>임명 도시</small>
+                                                <strong>{{ selectedCity(level)?.name ?? '도시 선택' }}</strong>
+                                                <span v-if="selectedCity(level)">
+                                                    {{ regionMap[selectedCity(level)?.region ?? 0] ?? '-' }} ·
+                                                    {{ cityLevelMap[selectedCity(level)?.level ?? 0] ?? '-' }}도시
+                                                </span>
+                                            </span>
+                                            <span class="selection-trigger-chevron" aria-hidden="true">›</span>
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="selection-trigger compact"
+                                            :aria-label="`${officerLabels[level]} 장수 선택`"
+                                            aria-haspopup="dialog"
+                                            @click="selectionContext = { kind: 'city-general', level }"
+                                        >
+                                            <span
+                                                v-if="selectedCityGeneral(level)"
+                                                class="selection-trigger-portrait"
+                                                :style="{
+                                                    backgroundImage: imageBackground(selectedCityGeneral(level)),
+                                                }"
+                                                aria-hidden="true"
+                                            />
+                                            <span v-else class="selection-trigger-empty" aria-hidden="true">＋</span>
+                                            <span class="selection-trigger-copy">
+                                                <small>임명 대상</small>
+                                                <strong>{{
+                                                    selectedCityGeneral(level)?.name ?? '공석으로 두기'
+                                                }}</strong>
+                                                <span v-if="selectedCityGeneral(level)">
+                                                    {{ selectedCityGeneral(level)?.cityName ?? '-' }} ·
+                                                    {{ currentOfficeText(selectedCityGeneral(level)!) }}
+                                                </span>
+                                            </span>
+                                            <span class="selection-trigger-chevron" aria-hidden="true">›</span>
+                                        </button>
+                                        <div v-if="selectedCityGeneral(level)" class="selected-general-stats compact">
+                                            <span
+                                                >통
+                                                <strong>{{
+                                                    selectedCityGeneral(level)?.stats.leadership
+                                                }}</strong></span
+                                            >
+                                            <span
+                                                >무
+                                                <strong>{{ selectedCityGeneral(level)?.stats.strength }}</strong></span
+                                            >
+                                            <span
+                                                >지
+                                                <strong>{{
+                                                    selectedCityGeneral(level)?.stats.intelligence
+                                                }}</strong></span
+                                            >
+                                        </div>
+                                        <button
+                                            type="button"
+                                            class="appointment-submit"
+                                            :disabled="!selectedCity(level)"
+                                            @click="appointCityOfficer(level)"
+                                        >
+                                            {{ officerLabels[level] }} 임명
+                                        </button>
+                                    </article>
+                                </div>
                             </td>
                         </tr>
                         <tr>
                             <td colspan="5" class="legend">
-                                ※ <span class="red">빨간색</span>은 현재 임명중인 장수,
+                                ※ 도시의 지역·규모·현재 재직자와 장수의 능력치·현재 관직을 확인한 뒤 임명할 수 있습니다.
-                                <span class="orange">노란색</span>은 다른 관직에 임명된 장수, 하얀색은 일반 장수를
-                                뜻합니다.
                             </td>
                         </tr>
                     </template>
@@ -514,6 +765,20 @@ onMounted(() => void loadPersonnel());
             </table>
         </template>
     </main>
+
+    <PersonnelSelectionDialog
+        :open="selectionContext !== null"
+        :title="selectionTitle"
+        :description="selectionDescription"
+        :items="selectionItems"
+        :selected-id="selectionId"
+        :search-placeholder="
+            selectionContext?.kind === 'city' ? '도시명·지역·재직자 검색' : '장수명·도시·관직·특성 검색'
+        "
+        :vacancy-label="selectionContext?.kind === 'city' ? null : '공석으로 두기'"
+        @cancel="selectionContext = null"
+        @select="applySelection"
+    />
 </template>
 
 <style scoped>
@@ -686,6 +951,179 @@ select[multiple] {
 .appointment-table .appoint-control {
     width: 398px;
 }
+.appointment-workspace-cell {
+    padding: 12px !important;
+    background: linear-gradient(rgb(7 9 7 / 72%), rgb(7 9 7 / 72%)), var(--sammo-texture-walnut);
+}
+.appointment-card-grid,
+.city-appointment-grid {
+    display: grid;
+    gap: 12px;
+}
+.appointment-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.city-appointment-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.appointment-card {
+    min-width: 0;
+    padding: 12px;
+    background: linear-gradient(145deg, rgb(36 40 31 / 96%), rgb(16 18 15 / 98%));
+    border: 1px solid #555845;
+    border-radius: 10px;
+    box-shadow: 0 7px 18px rgb(0 0 0 / 28%);
+}
+.appointment-card-header {
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 9px;
+    color: #e4cc8a;
+}
+.appointment-card-header > span {
+    font-size: 17px;
+    font-weight: 800;
+}
+.appointment-card-header small {
+    color: #aaa99f;
+}
+.appointment-card-header .appointment-lock {
+    color: #e6aa45;
+}
+.selection-trigger,
+.appointment-readonly {
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr) 18px;
+    gap: 9px;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    min-height: 70px;
+    border: 1px solid #5a5e4d;
+    border-radius: 8px;
+    padding: 8px;
+    color: #f7f4eb;
+    background: #10120f;
+    text-align: left;
+}
+.selection-trigger {
+    cursor: pointer;
+}
+.selection-trigger:hover {
+    filter: none;
+    background: #1d211a;
+    border-color: #9f9063;
+}
+.selection-trigger:focus-visible {
+    outline: 2px solid #f0cf75;
+    outline-offset: 2px;
+}
+.selection-trigger.compact {
+    grid-template-columns: 42px minmax(0, 1fr) 16px;
+    min-height: 62px;
+    margin-top: 7px;
+}
+.selection-trigger-portrait,
+.selection-trigger-empty,
+.selection-trigger-city {
+    width: 48px;
+    height: 48px;
+    border: 1px solid #5e6251;
+    border-radius: 8px;
+    background-color: #060706;
+}
+.selection-trigger-portrait {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.selection-trigger-empty,
+.selection-trigger-city {
+    display: grid;
+    place-items: center;
+    color: #d9bf78;
+    background: radial-gradient(circle at 50% 30%, #363828, #0d0f0c 75%);
+    font: 700 22px/1 var(--sammo-font-sans);
+}
+.compact .selection-trigger-portrait,
+.compact .selection-trigger-empty,
+.compact .selection-trigger-city {
+    width: 42px;
+    height: 42px;
+}
+.selection-trigger-copy,
+.appointment-readonly > span:last-child {
+    display: grid;
+    min-width: 0;
+}
+.selection-trigger-copy small,
+.appointment-readonly small {
+    color: #aaa99f;
+    font-size: 10px;
+}
+.selection-trigger-copy strong,
+.appointment-readonly strong {
+    overflow: hidden;
+    color: #fff;
+    font-size: 15px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.selection-trigger-copy > span:last-child {
+    overflow: hidden;
+    color: #c0c0b8;
+    font-size: 11px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.selection-trigger-chevron {
+    color: #cdb56e;
+    font-size: 26px;
+    text-align: center;
+}
+.appointment-readonly {
+    grid-template-columns: 48px minmax(0, 1fr);
+    color: #bbb;
+    background: #0d0e0c;
+}
+.selected-general-stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 5px;
+    margin-top: 7px;
+}
+.selected-general-stats.compact {
+    grid-template-columns: repeat(3, 1fr);
+}
+.selected-general-stats > span {
+    display: flex;
+    gap: 4px;
+    justify-content: center;
+    padding: 4px 3px;
+    color: #aaa99f;
+    background: rgb(0 0 0 / 32%);
+    border-radius: 5px;
+    font-size: 10px;
+}
+.selected-general-stats strong {
+    color: #ead27f;
+}
+.appointment-submit {
+    width: 100%;
+    margin-top: 8px;
+    border-color: #4f7959;
+    color: #fff;
+    background: #376846;
+    font-weight: 800;
+}
+.appointment-submit:hover {
+    filter: brightness(1.15);
+}
+.city-appointment-card {
+    padding: 10px;
+}
 .legend {
     line-height: 18px;
 }
@@ -741,9 +1179,6 @@ select[multiple] {
 .error {
     color: #ff8080;
 }
-.status {
-    color: #80ff80;
-}
 @media (max-width: 1000px) {
     .legacy-office {
         margin: 0;

tools/frontend-legacy-parity/visual-parity.spec.ts

@@ -720,7 +720,37 @@ test.describe('best general legacy parity', () => {
             expect(geometry.image).toMatchObject({ width: 64, height: 64, objectFit: 'fill' });
             expect(geometry.image.naturalWidth).toBeGreaterThan(0);
 
+            const userButton = page.getByRole('button', { name: '유저 보기' });
             const npcButton = page.getByRole('button', { name: 'NPC 보기' });
+            await expect(userButton).toHaveClass('legacy-button');
+            await expect(npcButton).toHaveClass('legacy-button');
+            await expect(userButton).toHaveCSS('background-color', 'rgb(55, 90, 127)');
+            await expect(npcButton).toHaveCSS('background-color', 'rgb(55, 90, 127)');
+            const selectorAppearance = await page.evaluate(() => {
+                const summarize = (element: Element) => {
+                    const style = getComputedStyle(element);
+                    return {
+                        backgroundColor: style.backgroundColor,
+                        borderRadius: style.borderRadius,
+                        fontWeight: style.fontWeight,
+                        lineHeight: style.lineHeight,
+                        padding: style.padding,
+                    };
+                };
+                const closeButton = document.querySelector('.legacy-ranking-title .legacy-button')!;
+                const selectorButtons = document.querySelectorAll('.view-selector .legacy-button');
+                const firstRect = selectorButtons[0]!.getBoundingClientRect();
+                const secondRect = selectorButtons[1]!.getBoundingClientRect();
+                return {
+                    closeButton: summarize(closeButton),
+                    userButton: summarize(selectorButtons[0]!),
+                    npcButton: summarize(selectorButtons[1]!),
+                    gap: secondRect.left - firstRect.right,
+                };
+            });
+            expect(selectorAppearance.userButton).toEqual(selectorAppearance.closeButton);
+            expect(selectorAppearance.npcButton).toEqual(selectorAppearance.closeButton);
+            expect(selectorAppearance.gap).toBe(4);
             const npcButtonBox = await npcButton.boundingBox();
             expect(npcButtonBox).not.toBeNull();
             await page.mouse.move(