devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Gateway와 게임 공통 메뉴를 영속 JSON에서 읽고 다음 페이지 로드에 반영한다. 운영 PHP의 항목과 순서, desktop/mobile geometry 및 정보 동작을 보존하고 검증·복구 문서를 추가한다.
This commit is contained in:
Hide_D
2026-08-19 11:13:57 +00:00
parent b43d7601e7
commit a14282b34d
25 changed files with 744 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/gateway-frontend/e2e/lobby-admin-navigation.spec.ts
+4 -4
View File
@@ -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`) });
}
}
app/gateway-frontend/e2e/playwright.config.mjs
+5 -3
View File
@@ -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,
},
app/gateway-frontend/e2e/runtime-navigation.spec.ts
+72
View File
@@ -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('운영 공지');
});
app/gateway-frontend/src/layouts/AdminConsoleLayout.vue
+5 -5
View File
@@ -207,10 +207,10 @@ onMounted(async () => {
.admin-shell {
display: grid;
width: min(1480px, 100%);
min-height: calc(100vh - 56px);
min-height: calc(100vh - 76px);
margin: 0 auto;
grid-template-columns: 244px minmax(0, 1fr);
padding-top: 56px;
padding-top: 76px;
background: #09090b;
}
@@ -392,13 +392,13 @@ onMounted(async () => {
@media (max-width: 860px) {
.admin-shell {
display: block;
padding-top: 72px;
padding-top: 92px;
}
.admin-menu-button {
position: absolute;
z-index: 20;
top: 72px;
top: 92px;
right: 16px;
left: 16px;
display: flex;
@@ -416,7 +416,7 @@ onMounted(async () => {
.admin-sidebar {
position: absolute;
z-index: 19;
top: 124px;
top: 144px;
right: 16px;
left: 16px;
display: none;
app/gateway-frontend/src/layouts/DefaultLayout.vue
+58 -24
View File
@@ -1,15 +1,34 @@
<script setup lang="ts">
import { ref } from 'vue';
import type { RuntimeNavigationConfig } from '@sammo-ts/common/navigation/menuConfig';
import { onMounted, ref } from 'vue';
import defaultNavigationJson from '../../../../resources/navigation.json';
const menuOpen = ref(false);
const appBase = import.meta.env.BASE_URL;
const defaultNavigation = defaultNavigationJson as RuntimeNavigationConfig;
const navigation = ref(defaultNavigation.gateway);
const navigationUrl = (import.meta.env.VITE_GATEWAY_API_URL ?? '/api/trpc').replace(/\/trpc\/?$/u, '/navigation');
onMounted(() => {
void fetch(navigationUrl, { headers: { Accept: 'application/json' } })
.then(async (response) => {
if (!response.ok) throw new Error(`메뉴 설정 조회 실패: HTTP ${response.status}`);
return (await response.json()) as RuntimeNavigationConfig;
})
.then((config) => {
navigation.value = config.gateway;
})
.catch((error: unknown) => {
console.warn('운영 메뉴 설정을 불러오지 못해 기본 메뉴를 사용합니다.', error);
});
});
</script>
<template>
<div class="gateway-layout">
<header class="gateway-navbar">
<div class="navbar-inner">
<RouterLink class="navbar-brand" to="/">삼국지 모의전투 HiDCHe</RouterLink>
<RouterLink class="navbar-brand" :to="navigation.brand.to">{{ navigation.brand.label }}</RouterLink>
<button
class="navbar-toggler"
type="button"
@@ -21,12 +40,16 @@ const appBase = import.meta.env.BASE_URL;
<span></span><span></span><span></span>
</button>
<nav id="gateway-navigation" :class="{ open: menuOpen }">
<a href="/bbs/board" target="_blank" rel="noreferrer">삼모게시판</a>
<a href="/bbs/tip" target="_blank" rel="noreferrer">팁/강좌</a>
<a href="/bbs/news" target="_blank" rel="noreferrer">삼국 일보</a>
<a href="/bbs/history2" target="_blank" rel="noreferrer">개인 열전</a>
<a href="/bbs/history3" target="_blank" rel="noreferrer">국가 열전</a>
<a href="/bbs/patch" target="_blank" rel="noreferrer">패치 내역</a>
<a
v-for="item in navigation.items"
:key="item.id"
:href="item.href"
:target="item.newTab ? '_blank' : undefined"
:rel="item.newTab ? 'noopener noreferrer' : undefined"
:data-navigation-id="item.id"
>
{{ item.label }}
</a>
</nav>
</div>
</header>
@@ -66,14 +89,16 @@ const appBase = import.meta.env.BASE_URL;
top: 0;
right: 0;
left: 0;
min-height: 56px;
border-bottom: 1px solid #222;
box-sizing: border-box;
height: 76px;
border: 0;
padding: 16px 0;
background: #303030;
}
.navbar-inner {
display: flex;
min-height: 56px;
width: 100%;
align-items: center;
padding: 0 1px;
}
@@ -90,13 +115,16 @@ const appBase = import.meta.env.BASE_URL;
nav {
display: flex;
flex-grow: 1;
align-items: center;
gap: 16px;
gap: 0;
}
nav a {
color: rgb(255 255 255 / 55%);
font-size: 14px;
padding: 8px;
color: rgb(255 255 255 / 60%);
font-size: 16px;
line-height: 24px;
text-decoration: none;
}
@@ -108,12 +136,12 @@ nav a:focus {
.navbar-toggler {
display: none;
width: 56px;
height: 42px;
height: 40px;
margin-left: auto;
border: 1px solid rgb(255 255 255 / 15%);
border-radius: 6px;
border: 1px solid rgb(255 255 255 / 10%);
border-radius: 4px;
background: transparent;
padding: 8px 12px;
padding: 4px 12px;
}
.navbar-toggler span {
@@ -140,10 +168,9 @@ footer a {
color: #666;
}
@media (max-width: 759px) {
@media (max-width: 991.98px) {
.navbar-inner {
flex-wrap: wrap;
padding: 8px 1px;
padding: 0 1px;
}
.navbar-toggler {
@@ -151,12 +178,17 @@ footer a {
}
nav {
position: absolute;
top: 56px;
right: 1px;
left: 1px;
display: none;
width: 100%;
width: auto;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 8px 12px;
padding: 0;
background: #303030;
}
nav.open {
@@ -165,7 +197,9 @@ footer a {
nav a {
width: 100%;
padding: 7px 0;
padding: 8px 0;
font-size: 16px;
line-height: 24px;
}
}
</style>