merge: 최신 main을 인사부 모바일 UX 작업에 통합

This commit is contained in:
2026-08-20 16:24:31 +00:00
25 changed files with 466 additions and 26 deletions
@@ -416,6 +416,22 @@ const commandTable = {
},
],
},
{
key: 'che_첩보',
name: '첩보',
reqArg: true,
possible: true,
status: 'needsInput',
inputFields: [
{
key: 'destCityId',
label: '대상 도시',
kind: 'select',
required: true,
optionSource: 'cities',
},
],
},
],
},
],
@@ -921,6 +937,48 @@ test('renders and accepts every Ref strategy command at mobile width', async ({
await picker.screenshot({ path: test.info().outputPath('all-strategy-commands-mobile.png') });
});
test('shows and reserves the Ref spy command for a user on desktop and mobile', async ({ page }) => {
const requests = await install(page);
await page.setViewportSize({ width: 1200, height: 900 });
await page.goto('/');
const editor = page.locator('[data-command-scope="general"]');
await editor.getByRole('button', { name: '1턴 명령 입력', exact: true }).click();
let picker = page.getByTestId('command-picker');
await picker.getByRole('button', { name: '군사', exact: true }).click();
const spy = picker.getByRole('button', { name: '첩보', exact: true });
await expect(spy).toBeVisible();
await spy.hover();
await spy.focus();
await expect(spy).toBeFocused();
await spy.click();
const form = picker.getByTestId('command-argument-form');
await expect(form.getByTestId('command-argument-guidance')).toContainText(
'선택한 도시에 첩보를 실행합니다.'
);
await expect(form.getByTestId('command-argument-guidance')).toContainText(
'인접 도시에서는 더 많은 정보를 얻습니다.'
);
await form.locator('select').selectOption('2');
await picker.screenshot({ path: test.info().outputPath('spy-command-desktop-1200.png') });
await picker.getByRole('button', { name: '입력', exact: true }).click();
await expect(editor.locator('.action-column > div').first()).toHaveText('【허창】에 첩보 실행');
expect(JSON.stringify(requests)).toContain('"action":"che_첩보","args":{"destCityId":2}');
await page.setViewportSize({ width: 500, height: 900 });
await editor.getByRole('button', { name: '2턴 명령 입력', exact: true }).click();
picker = page.getByTestId('command-picker');
await picker.getByRole('button', { name: '군사', exact: true }).click();
await expect(picker.getByRole('button', { name: '첩보', exact: true })).toBeVisible();
const geometry = await picker.evaluate((element) => ({
width: element.getBoundingClientRect().width,
horizontalOverflow: element.scrollWidth - element.clientWidth,
}));
expect(geometry.width).toBeLessThanOrEqual(500);
expect(geometry.horizontalOverflow).toBeLessThanOrEqual(0);
await picker.screenshot({ path: test.info().outputPath('spy-command-mobile-500.png') });
});
test('defaults founding to a Ref-selectable nation trait and paints color option labels', async ({
page,
}) => {
+58 -2
View File
@@ -52,6 +52,8 @@ type NavigationFixture = {
currentYear?: number;
currentMonth?: number;
serverId?: string;
profile?: string;
gameIdx?: number;
scenarioTitle?: string;
nationColor?: string;
lastExecuted?: string | null;
@@ -529,6 +531,8 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
return response({
myGeneral: { id: 7, name: '메뉴검증장수' },
serverId: state.serverId ?? 'che_fixture_season',
profile: state.profile ?? 'che',
gameIdx: state.gameIdx ?? 101,
year: state.currentYear ?? 185,
month: state.currentMonth ?? 1,
turnTerm: 10,
@@ -1112,7 +1116,9 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
await expect(page.locator('.main-mobile-bottom')).toBeHidden();
await expect(page.locator('.layout-desktop')).toBeVisible();
await expect(page.locator('.layout-mobile')).toHaveCount(0);
await expect(page.getByRole('heading', { name: '메인 화면 검증 시나리오', exact: true })).toHaveCount(1);
await expect(page.getByRole('heading', { name: '메인 화면 검증 시나리오 체섭 101기', exact: true })).toHaveCount(
1
);
await expect(page.locator('.game-shell__subtitle')).toHaveCount(0);
await expect(page.locator('.legacy-game-info')).toContainText('현재: 185년 1월');
await expect(page.locator('.legacy-game-info')).toContainText('턴: 10분');
@@ -1264,6 +1270,56 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
await persistArtifact(page, `${basePath.slice(1)}-desktop-1200`);
});
test('shows the persisted official game index beside the scenario title without viewport overflow', async ({ page }) => {
const state: NavigationFixture = {
officerLevel: 5,
permission: 2,
nationLevel: 3,
stage: 0,
npcMode: 1,
profile: 'hwe',
gameIdx: 7,
scenarioTitle: '메인 화면 검증 시나리오',
generalMeCalls: 0,
operations: [],
};
await installFixture(page, state);
if (artifactRoot) await mkdir(resolve(artifactRoot), { recursive: true });
for (const viewport of [
{ width: 1200, height: 900 },
{ width: 500, height: 900 },
]) {
await page.setViewportSize(viewport);
if (page.url() === 'about:blank') await waitForMain(page);
const title = page.getByRole('heading', { name: '메인 화면 검증 시나리오 훼섭 7기', exact: true });
await expect(title).toBeVisible();
const geometry = await title.evaluate((element) => {
const rect = element.getBoundingClientRect();
const mainRect = element.closest<HTMLElement>('.main-page')?.getBoundingClientRect();
const style = getComputedStyle(element);
return {
left: rect.left,
right: rect.right,
mainLeft: mainRect?.left,
mainRight: mainRect?.right,
fontFamily: style.fontFamily,
fontSize: style.fontSize,
lineHeight: style.lineHeight,
documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
};
});
expect(geometry.left).toBeGreaterThanOrEqual(geometry.mainLeft ?? 0);
expect(geometry.right).toBeLessThanOrEqual(geometry.mainRight ?? viewport.width);
expect(geometry.documentOverflow).toBeLessThanOrEqual(0);
expect(geometry.fontSize).toBe('25.6px');
expect(geometry.lineHeight).toBe('38.4px');
expect(geometry.fontFamily).toContain('Pretendard');
await persistArtifact(page, `official-game-index-${viewport.width}`);
}
});
test('nation split buttons keep square inner corners and a single divider in every interaction state', async ({
page,
}, testInfo) => {
@@ -2239,7 +2295,7 @@ test('the 939/940 boundary switches to the Ref-style 500px single document', asy
await expect(page.locator('.main-mobile-bottom')).toBeVisible();
await page.setViewportSize({ width: 500, height: 900 });
await expect(page.getByRole('heading', { name: '모바일 검증 시나리오', exact: true })).toHaveCount(1);
await expect(page.getByRole('heading', { name: '모바일 검증 시나리오 체섭 101기', exact: true })).toHaveCount(1);
await expect(page.locator('.game-shell__subtitle')).toHaveCount(0);
await expect(page.locator('.legacy-game-info')).toContainText('현재: 185년 1월');
await expect(page.locator('.legacy-game-info')).toContainText('턴: 10분');
+23 -3
View File
@@ -6,6 +6,7 @@ import { trpc } from '../utils/trpc';
type InheritStatus = Awaited<ReturnType<typeof trpc.inherit.getStatus.query>>;
type InheritLog = Awaited<ReturnType<typeof trpc.inherit.getLogs.query>>[number];
type JoinConfig = Awaited<ReturnType<typeof trpc.join.getConfig.query>>;
type UniqueItemSlot = InheritStatus['availableUnique'][number]['slot'];
type BuffKey =
| 'warAvoidRatio'
@@ -67,6 +68,14 @@ const pointOrder = [
'betting',
] as const;
const uniqueItemSlotOrder: readonly UniqueItemSlot[] = ['horse', 'weapon', 'book', 'item'];
const uniqueItemSlotLabels: Record<UniqueItemSlot, string> = {
horse: '명마',
weapon: '무기',
book: '서적',
item: '도구',
};
const pointHelp: Record<string, string> = {
previous: '이전에 물려받은 포인트입니다.',
lived_month: '살아남은 기간입니다. (1개월 단위)',
@@ -196,6 +205,15 @@ const specialNameMap = computed(() => {
const selectedSpecialWarInfo = computed(
() => status.value?.availableSpecialWar.find((entry) => entry.key === nextSpecialKey.value)?.info ?? ''
);
const availableUniqueGroups = computed(() =>
uniqueItemSlotOrder
.map((slot) => ({
slot,
label: uniqueItemSlotLabels[slot],
items: status.value?.availableUnique.filter((item) => item.slot === slot) ?? [],
}))
.filter((group) => group.items.length > 0)
);
const buffCost = (key: BuffKey, target: number): number => {
const points = status.value?.inheritConst.inheritBuffPoints ?? [0, 0, 0, 0, 0, 0];
@@ -518,9 +536,11 @@ onMounted(() => {
<label for="specific-unique">유니크 경매</label>
<select id="specific-unique" v-model="uniqueForm.itemId">
<option disabled value="">유니크 선택</option>
<option v-for="item in status.availableUnique" :key="item.key" :value="item.key">
{{ item.name }}
</option>
<optgroup v-for="group in availableUniqueGroups" :key="group.slot" :label="group.label">
<option v-for="item in group.items" :key="item.key" :value="item.key">
{{ item.name }}
</option>
</optgroup>
</select>
</div>
<div class="control-row">
+22 -1
View File
@@ -95,6 +95,27 @@ const nationAccess = computed(() => ({
}));
const nationColor = computed(() => nation.value?.color ?? '#000000');
const voteActive = computed(() => Boolean(frontStatus.value?.latestVote));
const profileLabels: Record<string, string> = {
che: '체',
kwe: '퀘',
pwe: '풰',
twe: '퉤',
nya: '냐',
pya: '퍄',
hwe: '훼',
};
const gameProfileLabel = computed(() => {
const profile = lobbyInfo.value?.profile?.trim();
return profile ? (profileLabels[profile] ?? profile) : '';
});
const gameTitle = computed(() => {
const scenarioTitle = lobbyInfo.value?.scenarioTitle || '전장 현황';
const profileLabel = gameProfileLabel.value;
const gameIdx = lobbyInfo.value?.gameIdx;
return profileLabel && typeof gameIdx === 'number' && Number.isInteger(gameIdx) && gameIdx > 0
? `${scenarioTitle} ${profileLabel}${gameIdx}`
: scenarioTitle;
});
const recordTimeSuffixPattern = /\d{2}:\d{2}(?:<\/>)?\s*$/u;
const formatRecord = (entry: { text: string; createdAt?: string | Date }, appendTime = false): string => {
if (!appendTime || recordTimeSuffixPattern.test(entry.text)) return formatLog(entry.text);
@@ -199,7 +220,7 @@ watch(
<header class="game-shell__header">
<h1 class="game-shell__title">
{{ lobbyInfo?.scenarioTitle || '전장 현황' }}
{{ gameTitle }}
</h1>
<div class="game-shell__actions desktop-action-controls">
<button