feat(menu): PHP 기준 공통 메뉴를 런타임 설정으로 이관

Gateway와 게임 공통 메뉴를 영속 JSON에서 읽고 다음 페이지 로드에 반영한다. 운영 PHP의 항목과 순서, desktop/mobile geometry 및 정보 동작을 보존하고 검증·복구 문서를 추가한다.
This commit is contained in:
2026-08-19 11:13:57 +00:00
parent b43d7601e7
commit a14282b34d
25 changed files with 744 additions and 173 deletions
@@ -176,7 +176,7 @@ test('desktop administrator sidebar follows the navbar away and then sticks to t
backgroundColor: string;
}> = [];
for (const scrollY of [0, 20, 55, 56, 120]) {
for (const scrollY of [0, 20, 75, 76, 140]) {
await page.evaluate((top) => window.scrollTo(0, top), scrollY);
await expect.poll(() => page.evaluate(() => window.scrollY)).toBe(scrollY);
@@ -192,16 +192,16 @@ test('desktop administrator sidebar follows the navbar away and then sticks to t
backgroundColor: style.backgroundColor,
};
});
expect(geometry.top).toBeCloseTo(Math.max(0, 56 - scrollY), 0);
expect(geometry.top).toBeCloseTo(Math.max(0, 76 - scrollY), 0);
expect(geometry.position).toBe('sticky');
expect(geometry.backgroundColor).toBe('rgb(17, 17, 19)');
measurements.push({ scrollY, ...geometry });
if (scrollY >= 56) {
if (scrollY >= 76) {
expect(geometry.bottom).toBeCloseTo(geometry.viewportHeight, 0);
}
if (scrollY === 20 || scrollY === 56) {
if (scrollY === 20 || scrollY === 76) {
await page.screenshot({ path: testInfo.outputPath(`admin-sidebar-scroll-${scrollY}.png`) });
}
}
@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
import { defineConfig, devices } from '@playwright/test';
const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
const port = Number(process.env.PLAYWRIGHT_GATEWAY_FRONTEND_PORT ?? 15130);
export default defineConfig({
testDir: '.',
@@ -19,6 +20,7 @@ export default defineConfig({
'kakao-otp.spec.ts',
'kakao-account-recovery.spec.ts',
'public-map-tabs.spec.ts',
'runtime-navigation.spec.ts',
],
fullyParallel: false,
workers: 1,
@@ -29,7 +31,7 @@ export default defineConfig({
reporter: [['list']],
outputDir: resolve(repositoryRoot, 'test-results/server-operations'),
use: {
baseURL: 'http://127.0.0.1:15130/gateway/',
baseURL: `http://127.0.0.1:${port}/gateway/`,
...devices['Desktop Chrome'],
deviceScaleFactor: 1,
colorScheme: 'dark',
@@ -38,9 +40,9 @@ export default defineConfig({
},
webServer: {
command:
"export VITE_APP_BASE_PATH=/gateway VITE_GATEWAY_API_URL=/gateway/api/trpc VITE_GAME_WEB_URL_TEMPLATE='/{profile}/' VITE_GAME_API_URL_TEMPLATE='/{profile}/api/trpc'; pnpm --filter @sammo-ts/gateway-frontend build && pnpm --filter @sammo-ts/gateway-frontend preview --host 127.0.0.1 --port 15130",
`export VITE_APP_BASE_PATH=/gateway VITE_GATEWAY_API_URL=/gateway/api/trpc VITE_GAME_WEB_URL_TEMPLATE='/{profile}/' VITE_GAME_API_URL_TEMPLATE='/{profile}/api/trpc'; pnpm --filter @sammo-ts/gateway-frontend build && pnpm --filter @sammo-ts/gateway-frontend preview --host 127.0.0.1 --port ${port}`,
cwd: repositoryRoot,
url: 'http://127.0.0.1:15130/gateway/',
url: `http://127.0.0.1:${port}/gateway/`,
reuseExistingServer: false,
timeout: 120_000,
},
@@ -0,0 +1,72 @@
import { readFile } from 'node:fs/promises';
import { expect, test, type Page, type Route } from '@playwright/test';
const defaultNavigation = JSON.parse(
await readFile(new URL('../../../resources/navigation.json', import.meta.url), 'utf8')
) as {
gateway: { items: Array<{ id: string; label: string }> };
};
const response = (data: unknown) => ({ result: { data } });
const operationNames = (route: Route) =>
decodeURIComponent(new URL(route.request().url()).pathname.split('/trpc/')[1] ?? '').split(',');
const installGatewayFixture = async (page: Page, navigation: unknown = defaultNavigation) => {
await page.route('**/gateway/api/navigation', async (route) => {
await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(navigation) });
});
await page.route('**/gateway/api/trpc/**', async (route) => {
const operations = operationNames(route);
const results = operations.map((operation) => {
if (operation === 'navigation.get') return response(navigation);
if (operation === 'me' || operation === 'lobby.notice') return response(null);
if (operation === 'lobby.profiles') return response([]);
return response({ ok: true });
});
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify(operations.length === 1 ? results[0] : results),
});
});
};
test('Gateway 상단 메뉴가 PHP 항목과 desktop geometry를 따른다', async ({ page }) => {
await installGatewayFixture(page);
await page.setViewportSize({ width: 1365, height: 900 });
await page.goto('./');
const navigation = page.locator('#gateway-navigation');
await expect(navigation.locator('a')).toHaveText(defaultNavigation.gateway.items.map((item) => item.label));
await expect(page.locator('.gateway-navbar')).toHaveCSS('height', '76px');
await expect(page.locator('.gateway-navbar')).toHaveCSS('padding', '16px 0px');
await expect(navigation.locator('a').first()).toHaveCSS('font-size', '16px');
await expect(navigation.locator('a').first()).toHaveCSS('padding', '8px');
await navigation.locator('a').first().hover();
await expect(navigation.locator('a').first()).toHaveCSS('color', 'rgb(255, 255, 255)');
});
test('Gateway 모바일 접이식 메뉴가 PHP 40px 행과 전체 너비를 따른다', async ({ page }) => {
await installGatewayFixture(page);
await page.setViewportSize({ width: 390, height: 844 });
await page.goto('./');
await page.getByRole('button', { name: '메뉴 열기' }).click();
const links = page.locator('#gateway-navigation a');
await expect(links).toHaveCount(10);
const first = await links.first().boundingBox();
expect(first).toMatchObject({ x: 1, y: 56, width: 388, height: 40 });
await links.first().focus();
await expect(links.first()).toBeFocused();
await expect(links.first()).toHaveCSS('color', 'rgb(255, 255, 255)');
});
test('JSON 응답을 바꾸면 frontend 재빌드 없이 다음 로드에 반영된다', async ({ page }) => {
const changed = structuredClone(defaultNavigation);
changed.gateway.items[0]!.label = '운영 공지';
await installGatewayFixture(page, changed);
await page.goto('./');
await expect(page.locator('[data-navigation-id="notice"]')).toHaveText('운영 공지');
});