feat: 세력도시 암행부와 인사부 연동 추가

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

@@ -0,0 +1,420 @@
+import { expect, test, type Page, type Route } from '@playwright/test';
+
+import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
+
+type Role = 'head' | 'member';
+type AppointmentInput = { destGeneralId: number; destCityId: number; officerLevel: number };
+type FixtureState = {
+    role: Role;
+    appointed: boolean;
+    secretForbidden?: boolean;
+    appointmentInputs: AppointmentInput[];
+};
+
+const response = (data: unknown) => ({ result: { data } });
+const errorResponse = (path: string, message: string, code = 'BAD_REQUEST') => ({
+    error: { message, code: -32000, data: { code, httpStatus: code === 'FORBIDDEN' ? 403 : 400, path } },
+});
+const operations = (route: Route): string[] =>
+    decodeURIComponent(new URL(route.request().url()).pathname.split('/trpc/')[1] ?? '').split(',');
+const requestInput = (route: Route, index: number): Record<string, unknown> => {
+    const body: unknown = route.request().postData() ? route.request().postDataJSON() : {};
+    const record = body && typeof body === 'object' ? (body as Record<string, unknown>) : {};
+    const raw = record[String(index)] ?? record;
+    const payload = raw && typeof raw === 'object' ? (raw as Record<string, unknown>) : {};
+    const input = payload.input && typeof payload.input === 'object' ? (payload.input as Record<string, unknown>) : {};
+    const json = payload.json ?? input.json ?? payload;
+    return json && typeof json === 'object' ? (json as Record<string, unknown>) : {};
+};
+
+const cities = [
+    {
+        id: 1,
+        name: '허창',
+        level: 7,
+        region: 2,
+        population: 99_000,
+        populationMax: 100_000,
+        agriculture: 9_500,
+        agricultureMax: 10_000,
+        commerce: 8_000,
+        commerceMax: 10_000,
+        security: 8_000,
+        securityMax: 10_000,
+        trust: 80,
+        trade: 100,
+        defence: 4_500,
+        defenceMax: 5_000,
+        wall: 4_500,
+        wallMax: 5_000,
+        supplyState: 1,
+        frontState: 0,
+        incomes: { gold: 1000, rice: 900, wall: 800 },
+    },
+    {
+        id: 2,
+        name: '낙양',
+        level: 6,
+        region: 2,
+        population: 60_000,
+        populationMax: 100_000,
+        agriculture: 5_000,
+        agricultureMax: 10_000,
+        commerce: 5_000,
+        commerceMax: 10_000,
+        security: 5_000,
+        securityMax: 10_000,
+        trust: 70,
+        trade: 90,
+        defence: 2_500,
+        defenceMax: 5_000,
+        wall: 2_500,
+        wallMax: 5_000,
+        supplyState: 1,
+        frontState: 0,
+        incomes: { gold: 800, rice: 700, wall: 600 },
+    },
+] as const;
+
+const overviewFixture = (state: FixtureState) => ({
+    me: { id: state.role === 'head' ? 20 : 21, officerLevel: state.role === 'head' ? 5 : 1 },
+    nation: {
+        id: 1,
+        name: '위',
+        color: '#008000',
+        level: 3,
+        typeCode: 'che_법가',
+        capitalCityId: 1,
+        rate: 20,
+    },
+    chiefStatMin: 65,
+    cities: cities.map((city) => ({
+        ...city,
+        officers: {
+            4: state.appointed
+                ? { id: 21, name: '장료', npcState: 0, officerLevel: 4, cityId: 1, cityName: '허창' }
+                : null,
+            3: null,
+            2: null,
+        },
+    })),
+    generals: [
+        {
+            id: 1,
+            name: '조조',
+            npcState: 0,
+            officerLevel: 12,
+            cityId: 1,
+            officerCity: 0,
+            stats: { leadership: 90, strength: 80, intelligence: 90 },
+        },
+        {
+            id: 20,
+            name: '순욱',
+            npcState: 0,
+            officerLevel: 5,
+            cityId: 1,
+            officerCity: 0,
+            stats: { leadership: 75, strength: 70, intelligence: 90 },
+        },
+        {
+            id: 21,
+            name: '장료',
+            npcState: 0,
+            officerLevel: state.appointed ? 4 : 1,
+            cityId: 1,
+            officerCity: state.appointed ? 1 : 0,
+            stats: { leadership: 80, strength: 70, intelligence: 50 },
+        },
+        {
+            id: 22,
+            name: '조홍',
+            npcState: 2,
+            officerLevel: 1,
+            cityId: 2,
+            officerCity: 0,
+            stats: { leadership: 60, strength: 65, intelligence: 40 },
+        },
+    ],
+});
+
+const secretGeneral = (id: number, name: string, cityId: number, overrides: Record<string, unknown> = {}) => ({
+    id,
+    name,
+    npcState: 0,
+    injury: 0,
+    stats: { leadership: 70, strength: 70, intelligence: 70 },
+    leadershipBonus: 0,
+    experienceLevel: 9,
+    troopId: 0,
+    troopName: null,
+    gold: 1000,
+    rice: 2000,
+    cityId,
+    cityName: cityId === 1 ? '허창' : '낙양',
+    defenceTrain: 90,
+    defenceTrainText: '☆',
+    crewTypeId: 1,
+    crewTypeName: '보병',
+    crew: 300,
+    train: 90,
+    atmos: 90,
+    killTurn: 7,
+    turnTime: '2026-01-01T01:02:00.000Z',
+    reservedCommands: ['농지 개간', '훈련'],
+    ...overrides,
+});
+
+const secretFixture = () => ({
+    nation: { id: 1, name: '위', color: '#008000', level: 3 },
+    viewer: { generalId: 20, permission: 1 },
+    summary: {
+        gold: 4000,
+        rice: 8000,
+        crew: 1200,
+        generalCount: 4,
+        averageGold: 1000,
+        averageRice: 2000,
+        readiness: {
+            90: { crew: 1200, generals: 4 },
+            80: { crew: 1200, generals: 4 },
+            60: { crew: 1200, generals: 4 },
+        },
+    },
+    generals: [
+        secretGeneral(1, '조조', 1, { leadershipBonus: 6 }),
+        secretGeneral(20, '순욱', 1, { leadershipBonus: 3 }),
+        secretGeneral(21, '장료', 1, {
+            stats: { leadership: 80, strength: 70, intelligence: 50 },
+        }),
+        secretGeneral(22, '조홍', 2, { npcState: 2, reservedCommands: [] }),
+    ],
+});
+
+const personnelGeneral = (id: number, name: string, officerLevel: number, overrides: Record<string, unknown> = {}) => ({
+    id,
+    name,
+    npcState: 0,
+    officerLevel,
+    cityId: 1,
+    cityName: '허창',
+    troopId: 0,
+    troopName: null,
+    picture: null,
+    imageServer: 0,
+    officerCity: officerLevel >= 2 && officerLevel <= 4 ? 1 : 0,
+    officerCityName: officerLevel >= 2 && officerLevel <= 4 ? '허창' : null,
+    stats: { leadership: 70, strength: 70, intelligence: 70 },
+    experience: 100,
+    dedication: 200,
+    injury: 0,
+    gold: 1000,
+    rice: 1000,
+    crew: 100,
+    personality: null,
+    specialDomestic: null,
+    specialWar: null,
+    belong: 10,
+    permission: 'normal',
+    ...overrides,
+});
+
+const personnelFixture = (state: FixtureState) => {
+    const allGenerals = [
+        personnelGeneral(1, '조조', 12),
+        personnelGeneral(20, '순욱', 5, { stats: { leadership: 75, strength: 70, intelligence: 90 } }),
+        personnelGeneral(21, '장료', state.appointed ? 4 : 1, {
+            stats: { leadership: 80, strength: 70, intelligence: 50 },
+        }),
+        personnelGeneral(22, '조홍', 1, {
+            npcState: 2,
+            cityId: 2,
+            cityName: '낙양',
+            stats: { leadership: 60, strength: 65, intelligence: 40 },
+        }),
+    ];
+    const canManage = state.role === 'head';
+    return {
+        me: {
+            id: canManage ? 20 : 21,
+            officerLevel: canManage ? 5 : 1,
+            canManage,
+            canChangePermissions: false,
+            canKick: canManage,
+        },
+        nation: {
+            id: 1,
+            name: '위',
+            color: '#008000',
+            level: 3,
+            typeCode: 'che_법가',
+            capitalCityId: 1,
+            chiefSet: 0,
+        },
+        chiefStatMin: 65,
+        generals: canManage ? allGenerals : [],
+        chiefAssignments: { 12: allGenerals[0], 5: allGenerals[1] },
+        cityAssignments: cities.map((city) => ({
+            id: city.id,
+            name: city.name,
+            level: city.level,
+            region: city.region,
+            officerSet: city.id === 1 && state.appointed ? 1 << 4 : 0,
+            officers: {
+                4: city.id === 1 && state.appointed ? allGenerals[2] : null,
+                3: null,
+                2: null,
+            },
+        })),
+        awards: { tigers: [], eagles: [] },
+        permissionCandidates: { ambassadors: [], auditors: [] },
+    };
+};
+
+const install = async (page: Page, state: FixtureState): Promise<void> => {
+    await page.addInitScript((profile) => {
+        localStorage.setItem('sammo-game-token', 'ga_city_office');
+        localStorage.setItem('sammo-game-profile', profile);
+    }, gameProfile);
+    await page.route(gameTrpcRoute, async (route) => {
+        const result = operations(route).map((operation, index) => {
+            if (operation === 'auth.status') return response({ ok: true });
+            if (operation === 'lobby.info') return response({ myGeneral: { id: 20, name: '순욱' } });
+            if (operation === 'join.getConfig') return response({});
+            if (operation === 'nation.getCityOverview') return response(overviewFixture(state));
+            if (operation === 'nation.getSecretGeneralList') {
+                return state.secretForbidden
+                    ? errorResponse(
+                          operation,
+                          '권한이 부족합니다. 수뇌부가 아니거나 사관년도가 부족합니다.',
+                          'FORBIDDEN'
+                      )
+                    : response(secretFixture());
+            }
+            if (operation === 'nation.getPersonnelInfo') return response(personnelFixture(state));
+            if (operation === 'nation.appoint') {
+                const input = requestInput(route, index);
+                state.appointmentInputs.push({
+                    destGeneralId: Number(input.destGeneralId),
+                    destCityId: Number(input.destCityId),
+                    officerLevel: Number(input.officerLevel),
+                });
+                state.appointed = true;
+                return response({ ok: true });
+            }
+            return errorResponse(operation, `Unhandled fixture operation: ${operation}`);
+        });
+        await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(result) });
+    });
+};
+
+test('암행부 행을 도시별로 나누고 수뇌의 인사부 즉시 임명을 반영한다', async ({ page }, testInfo) => {
+    const state: FixtureState = { role: 'head', appointed: false, appointmentInputs: [] };
+    await install(page, state);
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await page.goto('nation/cities');
+
+    await expect(page.locator('.nation-cities-page')).toBeVisible();
+    await expect(page.locator('.city-user-table')).toHaveCount(0);
+    await expect(page.getByRole('button', { name: '인사부 연동' })).toHaveCount(0);
+
+    await page.getByRole('button', { name: '암행부 연동' }).click();
+    await expect(page.locator('.city-user-table')).toHaveCount(2);
+    await expect(page.locator('.city[data-city-id="1"] .city-user-table tr[data-general-id="21"]')).toContainText(
+        '장료'
+    );
+    await expect(page.locator('.city[data-city-id="2"] .city-user-table tr[data-general-id="22"]')).toContainText(
+        '조홍'
+    );
+    await expect(page.locator('.city[data-city-id="2"] .city-user-table tr[data-general-id="21"]')).toHaveCount(0);
+    await expect(page.locator('.city[data-city-id="1"] tr[data-general-id="21"] .command-attention')).toHaveText(
+        '농지 개간'
+    );
+
+    const integratedBox = await page.locator('.city[data-city-id="1"] .city-user-table').evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return { width: rect.width, borderCollapse: style.borderCollapse, fontSize: style.fontSize };
+    });
+    expect(integratedBox).toEqual({ width: 941, borderCollapse: 'collapse', fontSize: '14px' });
+
+    await page.getByRole('button', { name: '인사부 연동' }).click();
+    const ordinaryRow = page.locator('.city[data-city-id="1"] tr[data-general-id="21"]');
+    await expect(ordinaryRow.locator('.appointment-button')).toHaveCount(3);
+    await expect(ordinaryRow.locator('.mode-4')).toBeEnabled();
+    await expect(ordinaryRow.locator('.mode-3')).toBeDisabled();
+    await expect(ordinaryRow.locator('.mode-2')).toBeEnabled();
+    await expect(page.locator('tr[data-general-id="1"] .appointment-button')).toHaveCount(0);
+
+    const disabledStyle = await ordinaryRow.locator('.mode-3').evaluate((button) => {
+        const style = getComputedStyle(button);
+        return { borderTopWidth: style.borderTopWidth, backgroundColor: style.backgroundColor };
+    });
+    expect(disabledStyle).toEqual({ borderTopWidth: '0px', backgroundColor: 'rgba(0, 0, 0, 0)' });
+    const appointButton = page.getByRole('button', { name: '장료을(를) 허창 태수로 임명' });
+    await appointButton.hover();
+    expect(await appointButton.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
+    await appointButton.focus();
+    await expect(appointButton).toBeFocused();
+
+    await page.screenshot({ path: testInfo.outputPath('nation-city-integrated-desktop.png'), fullPage: true });
+    await appointButton.click();
+    await expect.poll(() => state.appointmentInputs).toEqual([{ destGeneralId: 21, destCityId: 1, officerLevel: 4 }]);
+    await expect(page.locator('.city[data-city-id="1"] .officer-4-value')).toHaveText('장료');
+    await expect(page.locator('.city[data-city-id="1"] .officer-4-value')).toHaveClass(/effective-officer/u);
+    await expect(page.locator('.city[data-city-id="1"] tr[data-general-id="21"] .mode-4')).toBeDisabled();
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    expect(await page.locator('.nation-cities-page').evaluate((element) => element.getBoundingClientRect().width)).toBe(
+        1000
+    );
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeGreaterThanOrEqual(1000);
+    await page.screenshot({ path: testInfo.outputPath('nation-city-integrated-mobile.png'), fullPage: true });
+});
+
+test('수뇌 대상은 재확인하고 일반 장수에게는 임명 버튼을 열지 않는다', async ({ page }) => {
+    const headState: FixtureState = { role: 'head', appointed: false, appointmentInputs: [] };
+    await install(page, headState);
+    await page.goto('nation/cities');
+    await page.getByRole('button', { name: '암행부 연동' }).click();
+    await page.getByRole('button', { name: '인사부 연동' }).click();
+
+    const chiefButton = page.getByRole('button', { name: '순욱을(를) 허창 태수로 임명' });
+    expect(await chiefButton.evaluate((button) => getComputedStyle(button).color)).toBe('rgb(255, 0, 0)');
+    page.once('dialog', async (dialog) => {
+        expect(dialog.message()).toBe('수뇌입니다. 임명할까요?');
+        await dialog.dismiss();
+    });
+    await chiefButton.click();
+    await expect.poll(() => headState.appointmentInputs.length).toBe(0);
+
+    await page.unroute(gameTrpcRoute);
+    const memberState: FixtureState = { role: 'member', appointed: false, appointmentInputs: [] };
+    await install(page, memberState);
+    await page.reload();
+    await page.getByRole('button', { name: '암행부 연동' }).click();
+    page.once('dialog', async (dialog) => {
+        expect(dialog.message()).toBe('수뇌가 아닙니다!');
+        await dialog.accept();
+    });
+    await page.getByRole('button', { name: '인사부 연동' }).click();
+    await expect(page.locator('.appointment-button')).toHaveCount(0);
+    expect(memberState.appointmentInputs).toEqual([]);
+});
+
+test('암행부 권한 거부는 도시 기밀 행과 인사부 연동을 열지 않는다', async ({ page }) => {
+    const state: FixtureState = {
+        role: 'member',
+        appointed: false,
+        secretForbidden: true,
+        appointmentInputs: [],
+    };
+    await install(page, state);
+    await page.goto('nation/cities');
+    await page.getByRole('button', { name: '암행부 연동' }).click();
+
+    await expect(page.locator('.integration-error')).toContainText('권한이 부족합니다.');
+    await expect(page.locator('.city-user-table')).toHaveCount(0);
+    await expect(page.getByRole('button', { name: '인사부 연동' })).toHaveCount(0);
+    expect(state.appointmentInputs).toEqual([]);
+});

app/game-frontend/e2e/playwright.config.mjs

@@ -21,6 +21,7 @@ export default defineConfig({
         'troop.spec.ts',
         'board.spec.ts',
         'inGameInfo.spec.ts',
+        'nationCityOfficeIntegration.spec.ts',
         'inGameMenus.spec.ts',
         'nationOffices.spec.ts',
         'diplomacy.spec.ts',

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

@@ -1,16 +1,28 @@
 <script setup lang="ts">
+import { formatServerDateTime } from '@sammo-ts/common';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useGameFeedback } from '../composables/useGameFeedback';
 import { getNpcColor } from '../utils/npcColor';
 import { legacyNationTextColor } from '../utils/legacyNationColor';
 import { cityLevelMap, regionMap } from '../utils/nationFormat';
 import { trpc } from '../utils/trpc';
 
 type Result = Awaited<ReturnType<typeof trpc.nation.getCityOverview.query>>;
+type SecretResult = Awaited<ReturnType<typeof trpc.nation.getSecretGeneralList.query>>;
+type PersonnelResult = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
 type City = Result['cities'][number];
+type SecretGeneral = SecretResult['generals'][number];
+type OfficerLevel = 2 | 3 | 4;
 type Sort = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 const data = ref<Result | null>(null);
+const secretData = ref<SecretResult | null>(null);
+const personnelData = ref<PersonnelResult | null>(null);
 const error = ref('');
+const integrationError = ref('');
+const secretLoading = ref(false);
+const personnelLoading = ref(false);
+const pendingAppointment = ref('');
 const sort = ref<Sort>(10);
 const extraSort = ref<
     | 'name'
@@ -25,10 +37,16 @@ const extraSort = ref<
     | null
 >(null);
 const router = useRouter();
+const { error: showErrorToast, info: showInfoToast, success: showSuccessToast } = useGameFeedback();
 const options = ['기본', '인구', '인구율', '민심', '농업', '상업', '치안', '수비', '성벽', '시세', '지역', '규모'];
+const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
 const generalsForCity = (cityId: number) => data.value?.generals.filter((general) => general.cityId === cityId) ?? [];
+const secretGeneralsForCity = (cityId: number) =>
+    secretData.value?.generals.filter((general) => general.cityId === cityId) ?? [];
 const displayGeneralName = (general: Result['generals'][number]) =>
     general.npcState > 0 && !/^[ⓜⓝ]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
+const displaySecretGeneralName = (general: SecretGeneral) =>
+    general.npcState > 0 && !/^[ⓜⓝ㉥]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
 const generalCount = (cityId: number) =>
     data.value?.generals.filter((general) => general.cityId === cityId).length ?? 0;
 const cities = computed(() => {
@@ -91,6 +109,138 @@ const developmentClass = (
 const isRegionBreak = (city: City, index: number) =>
     sort.value === 10 && extraSort.value === null && (index === 0 || cities.value[index - 1]?.region !== city.region);
 const officer = (city: City, level: 2 | 3 | 4) => city.officers[level]?.name ?? '-';
+const officerIsStationed = (city: City, level: OfficerLevel): boolean =>
+    secretData.value !== null && city.officers[level]?.cityId === city.id;
+const personnelGeneralMap = computed(
+    () => new Map((personnelData.value?.generals ?? []).map((general) => [general.id, general]))
+);
+const personnelCityMap = computed(
+    () => new Map((personnelData.value?.cityAssignments ?? []).map((city) => [city.id, city]))
+);
+const officerLocked = (cityId: number, level: OfficerLevel): boolean => {
+    const officerSet = personnelCityMap.value.get(cityId)?.officerSet ?? 0;
+    return (officerSet & (1 << level)) !== 0;
+};
+const canAppoint = (cityId: number, generalId: number, level: OfficerLevel): boolean => {
+    if (!personnelData.value?.me.canManage || officerLocked(cityId, level)) return false;
+    const general = personnelGeneralMap.value.get(generalId);
+    if (!general || general.officerLevel === 12) return false;
+    if (level === 4) return general.stats.strength >= personnelData.value.chiefStatMin;
+    if (level === 3) return general.stats.intelligence >= personnelData.value.chiefStatMin;
+    return true;
+};
+const canShowAppointmentButtons = (generalId: number): boolean => {
+    const general = personnelGeneralMap.value.get(generalId);
+    return personnelData.value?.me.canManage === true && general !== undefined && general.officerLevel !== 12;
+};
+const isChief = (generalId: number): boolean => (personnelGeneralMap.value.get(generalId)?.officerLevel ?? 0) >= 5;
+const appointmentKey = (cityId: number, generalId: number, level: OfficerLevel): string =>
+    `${cityId}:${generalId}:${level}`;
+const commandNeedsAttention = (city: City, command: string): boolean => {
+    const normalized = command.replaceAll(/\s/gu, '');
+    if (normalized.includes('정착장려')) {
+        return city.population - city.populationMax > -20_000 || city.population > city.populationMax * 0.92;
+    }
+    if (normalized.includes('농지개간')) return city.agriculture - city.agricultureMax > -1_000;
+    if (normalized.includes('상업투자')) return city.commerce - city.commerceMax > -1_000;
+    if (normalized.includes('치안강화')) return city.security - city.securityMax > -1_000;
+    if (normalized.includes('수비강화')) return city.defence - city.defenceMax > -700;
+    if (normalized.includes('성벽보수')) return city.wall - city.wallMax > -700;
+    return false;
+};
+
+const loadSecretIntegration = async (): Promise<void> => {
+    if (secretLoading.value) {
+        showInfoToast('암행부 정보를 불러오는 중입니다.');
+        return;
+    }
+    if (secretData.value) {
+        showInfoToast('암행부 정보가 이미 연동되어 있습니다.');
+        return;
+    }
+    secretLoading.value = true;
+    integrationError.value = '';
+    try {
+        secretData.value = await trpc.nation.getSecretGeneralList.query();
+    } catch (cause) {
+        integrationError.value = cause instanceof Error ? cause.message : '암행부 연동에 실패했습니다.';
+        showErrorToast(integrationError.value);
+    } finally {
+        secretLoading.value = false;
+    }
+};
+
+const loadPersonnelIntegration = async (): Promise<void> => {
+    if (personnelLoading.value) {
+        showInfoToast('인사부 정보를 불러오는 중입니다.');
+        return;
+    }
+    if (personnelData.value?.me.canManage) {
+        showInfoToast('인사부 정보가 이미 연동되어 있습니다.');
+        return;
+    }
+    personnelLoading.value = true;
+    integrationError.value = '';
+    try {
+        const personnel = await trpc.nation.getPersonnelInfo.query();
+        if (!personnel.me.canManage) {
+            window.alert('수뇌가 아닙니다!');
+            return;
+        }
+        personnelData.value = personnel;
+    } catch (cause) {
+        integrationError.value = cause instanceof Error ? cause.message : '인사부 연동에 실패했습니다.';
+        showErrorToast(integrationError.value);
+    } finally {
+        personnelLoading.value = false;
+    }
+};
+
+const refreshIntegratedData = async (): Promise<void> => {
+    const [overview, secret, personnel] = await Promise.all([
+        trpc.nation.getCityOverview.query(),
+        trpc.nation.getSecretGeneralList.query(),
+        trpc.nation.getPersonnelInfo.query(),
+    ]);
+    data.value = overview;
+    secretData.value = secret;
+    personnelData.value = personnel;
+};
+
+const appointCityOfficer = async (city: City, general: SecretGeneral, level: OfficerLevel): Promise<void> => {
+    if (!canAppoint(city.id, general.id, level)) return;
+    const key = appointmentKey(city.id, general.id, level);
+    if (pendingAppointment.value) {
+        showInfoToast('다른 임명을 처리하는 중입니다.');
+        return;
+    }
+    if (isChief(general.id) && !window.confirm('수뇌입니다. 임명할까요?')) return;
+
+    pendingAppointment.value = key;
+    integrationError.value = '';
+    try {
+        await trpc.nation.appoint.mutate({
+            destGeneralId: general.id,
+            destCityId: city.id,
+            officerLevel: level,
+        });
+        showSuccessToast(`${general.name}을(를) ${city.name} ${officerLabels[level]}로 임명했습니다.`);
+        try {
+            await refreshIntegratedData();
+        } catch (cause) {
+            integrationError.value =
+                cause instanceof Error
+                    ? `임명은 완료됐지만 화면을 갱신하지 못했습니다: ${cause.message}`
+                    : '임명은 완료됐지만 화면을 갱신하지 못했습니다.';
+            showErrorToast(integrationError.value);
+        }
+    } catch (cause) {
+        integrationError.value = cause instanceof Error ? cause.message : '임명에 실패했습니다.';
+        showErrorToast(integrationError.value);
+    } finally {
+        pendingAppointment.value = '';
+    }
+};
 onMounted(async () => {
     try {
         data.value = await trpc.nation.getCityOverview.query();
@@ -121,7 +271,18 @@ onMounted(async () => {
                                 </option>
                             </select>
                             <input type="submit" value="정렬하기" />
-                            <button type="button">암행부 연동</button>
+                            <button type="button" :aria-busy="secretLoading" @click="loadSecretIntegration">
+                                암행부 연동
+                            </button>
+                            <button
+                                v-if="secretData"
+                                id="load-duty-button"
+                                type="button"
+                                :aria-busy="personnelLoading"
+                                @click="loadPersonnelIntegration"
+                            >
+                                인사부 연동
+                            </button>
                         </form>
                     </td>
                 </tr>
@@ -141,12 +302,14 @@ onMounted(async () => {
                 </tr>
             </tbody>
         </table>
-        <p v-if="error" class="error">{{ error }}</p>
+        <p v-if="error" class="error" role="alert">{{ error }}</p>
+        <p v-if="integrationError" class="error integration-error" role="alert">{{ integrationError }}</p>
         <table
             v-for="(city, index) in cities"
             :key="city.id"
             class="legacy-table city legacy-bg2"
             :class="{ 'region-break': isRegionBreak(city, index) }"
+            :data-city-id="city.id"
         >
             <tbody>
                 <tr>
@@ -223,18 +386,24 @@ onMounted(async () => {
                     <th>시세</th>
                     <td>{{ city.trade ?? '-' }}%</td>
                     <th>태수</th>
-                    <td>{{ officer(city, 4) }}</td>
+                    <td class="officer-4-value" :class="{ 'effective-officer': officerIsStationed(city, 4) }">
+                        {{ officer(city, 4) }}
+                    </td>
                     <th>군사</th>
-                    <td>{{ officer(city, 3) }}</td>
+                    <td class="officer-3-value" :class="{ 'effective-officer': officerIsStationed(city, 3) }">
+                        {{ officer(city, 3) }}
+                    </td>
                     <th>종사</th>
-                    <td>{{ officer(city, 2) }}</td>
+                    <td class="officer-2-value" :class="{ 'effective-officer': officerIsStationed(city, 2) }">
+                        {{ officer(city, 2) }}
+                    </td>
                 </tr>
                 <tr>
                     <th>장수</th>
                     <td colspan="9" class="general-list">
                         <template v-if="generalsForCity(city.id).length">
-                            <template v-for="(general, index) in generalsForCity(city.id)" :key="general.id">
+                            <template v-for="(general, cityGeneralIndex) in generalsForCity(city.id)" :key="general.id">
-                                <span v-if="index">, </span
+                                <span v-if="cityGeneralIndex">, </span
                                 ><span :style="{ color: getNpcColor(general.npcState) }">{{
                                     displayGeneralName(general)
                                 }}</span>
@@ -243,6 +412,108 @@ onMounted(async () => {
                         <template v-else>-</template>
                     </td>
                 </tr>
+                <tr v-if="secretData" class="secret-integration-row">
+                    <td colspan="10">
+                        <table class="city-user-table legacy-bg0">
+                            <colgroup>
+                                <col class="secret-name-column" />
+                                <col class="secret-stat-column" />
+                                <col class="secret-troop-column" />
+                                <col class="secret-gold-column" />
+                                <col class="secret-rice-column" />
+                                <col class="secret-defence-column" />
+                                <col class="secret-crew-type-column" />
+                                <col class="secret-crew-column" />
+                                <col class="secret-train-column" />
+                                <col class="secret-atmos-column" />
+                                <col class="secret-command-column" />
+                                <col class="secret-kill-column" />
+                                <col class="secret-turn-column" />
+                            </colgroup>
+                            <thead>
+                                <tr>
+                                    <th>이 름</th>
+                                    <th>통무지</th>
+                                    <th>부 대</th>
+                                    <th>자 금</th>
+                                    <th>군 량</th>
+                                    <th>守</th>
+                                    <th>병 종</th>
+                                    <th>병 사</th>
+                                    <th>훈련</th>
+                                    <th>사기</th>
+                                    <th>명 령</th>
+                                    <th>삭턴</th>
+                                    <th>턴</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr
+                                    v-for="general in secretGeneralsForCity(city.id)"
+                                    :key="general.id"
+                                    :data-general-id="general.id"
+                                >
+                                    <td class="secret-name-cell">
+                                        <span :style="{ color: getNpcColor(general.npcState) }">{{
+                                            displaySecretGeneralName(general)
+                                        }}</span
+                                        ><br />Lv {{ general.experienceLevel }}
+                                        <template v-if="canShowAppointmentButtons(general.id)">
+                                            <br class="for-duty" />
+                                            <button
+                                                v-for="level in [4, 3, 2] as const"
+                                                :key="level"
+                                                type="button"
+                                                class="appointment-button for-duty"
+                                                :class="[`mode-${level}`, { 'chief-target': isChief(general.id) }]"
+                                                :disabled="
+                                                    !canAppoint(city.id, general.id, level) || pendingAppointment !== ''
+                                                "
+                                                :aria-label="`${general.name}을(를) ${city.name} ${officerLabels[level]}로 임명`"
+                                                @click="appointCityOfficer(city, general, level)"
+                                            >
+                                                {{ officerLabels[level].slice(0, 1) }}
+                                            </button>
+                                        </template>
+                                    </td>
+                                    <td :class="{ injured: general.injury > 0 }">
+                                        {{ general.stats.leadership
+                                        }}<span v-if="general.leadershipBonus" class="bonus"
+                                            >+{{ general.leadershipBonus }}</span
+                                        >∥{{ general.stats.strength }}∥{{ general.stats.intelligence }}
+                                    </td>
+                                    <td>{{ general.troopName ?? '-' }}</td>
+                                    <td>{{ general.gold }}</td>
+                                    <td>{{ general.rice }}</td>
+                                    <td>{{ general.defenceTrainText }}</td>
+                                    <td>{{ general.crewTypeName }}</td>
+                                    <td>{{ general.crew }}</td>
+                                    <td>{{ general.train }}</td>
+                                    <td>{{ general.atmos }}</td>
+                                    <td class="secret-commands">
+                                        <template v-if="general.npcState >= 2">NPC 장수</template>
+                                        <template v-else>
+                                            <div
+                                                v-for="(command, commandIndex) in general.reservedCommands"
+                                                :key="commandIndex"
+                                            >
+                                                {{ commandIndex + 1 }} :
+                                                <span
+                                                    :class="{
+                                                        'command-attention': commandNeedsAttention(city, command),
+                                                    }"
+                                                    >{{ command }}</span
+                                                >
+                                            </div>
+                                        </template>
+                                    </td>
+                                    <td>{{ general.killTurn }}</td>
+                                    <td>{{ formatServerDateTime(general.turnTime, { format: 'minuteSecond' }) }}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="legacy-table legacy-bg0 title footer">
@@ -304,6 +575,81 @@ onMounted(async () => {
 .general-list {
     text-align: left !important;
 }
+.effective-officer {
+    color: lightgreen;
+}
+.secret-integration-row > td {
+    padding: 0;
+}
+.city-user-table {
+    width: 940px;
+    margin: 0 auto;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+.city-user-table td,
+.city-user-table th {
+    width: auto;
+    border: 1px solid #808080;
+    padding: 0;
+    text-align: center;
+    word-break: break-all;
+}
+.city-user-table th {
+    background-image: var(--sammo-texture-green);
+}
+.secret-name-column,
+.secret-stat-column,
+.secret-troop-column {
+    width: 100px;
+}
+.secret-gold-column,
+.secret-rice-column,
+.secret-crew-type-column,
+.secret-crew-column,
+.secret-kill-column,
+.secret-turn-column {
+    width: 60px;
+}
+.secret-defence-column {
+    width: 30px;
+}
+.secret-train-column,
+.secret-atmos-column {
+    width: 50px;
+}
+.secret-command-column {
+    width: 150px;
+}
+.secret-name-cell {
+    line-height: normal;
+}
+.secret-commands {
+    text-align: left !important;
+    font-size: 12px;
+}
+.bonus {
+    color: cyan;
+}
+.injured {
+    color: red;
+}
+.command-attention {
+    color: yellow;
+}
+.nation-cities-page .appointment-button {
+    margin: 0;
+    padding: 1px 4px;
+}
+.nation-cities-page .appointment-button.chief-target:not(:disabled) {
+    color: red;
+}
+.nation-cities-page .appointment-button:disabled {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: default;
+}
 .capital {
     color: #0ff;
 }