merge: Gateway 로비 시나리오명 표시를 통합

app/gateway-frontend/e2e/lobby-game-auth.spec.ts

@@ -303,6 +303,43 @@ test('exchanges the gateway token before loading authenticated lobby general dat
     });
 });
 
+test('shows the Ref scenario title instead of the stored scenario code for an active profile', async ({
+    page,
+}, testInfo) => {
+    await installFixture(page, {
+        scenarioTitle: '【가상모드27-b】 아시아 명장전(비급)',
+    });
+    await page.setViewportSize({ width: 1365, height: 900 });
+
+    await page.goto('lobby');
+    const row = page.locator('tbody tr').filter({ hasText: 'hwe섭' });
+    const info = row.locator('.profile-info-cell');
+    const title = row.getByTestId('profile-scenario-title');
+    await expect(title).toHaveText('【가상모드27-b】 아시아 명장전(비급)');
+    await expect(info).not.toContainText('903');
+    await expect(title).toHaveCSS('color', 'oklch(0.75 0.183 55.934)');
+    await page.screenshot({ path: testInfo.outputPath('gateway-active-scenario-title-desktop.png'), fullPage: true });
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await title.scrollIntoViewIfNeeded();
+    const mobileGeometry = await info.evaluate((element) => {
+        const titleElement = element.querySelector('[data-testid="profile-scenario-title"]');
+        if (!titleElement) throw new Error('expected scenario title');
+        const infoRect = element.getBoundingClientRect();
+        const titleRect = titleElement.getBoundingClientRect();
+        return {
+            documentWidth: document.documentElement.scrollWidth,
+            viewportWidth: window.innerWidth,
+            info: infoRect.toJSON(),
+            title: titleRect.toJSON(),
+        };
+    });
+    expect(mobileGeometry.documentWidth).toBe(mobileGeometry.viewportWidth);
+    expect(mobileGeometry.title.left).toBeGreaterThanOrEqual(mobileGeometry.info.left);
+    expect(mobileGeometry.title.right).toBeLessThanOrEqual(mobileGeometry.info.right);
+    await page.screenshot({ path: testInfo.outputPath('gateway-active-scenario-title-mobile.png'), fullPage: true });
+});
+
 test('copies the complete preopen announcement and reveals autorun details without changing layout', async ({
     page,
 }, testInfo) => {

app/gateway-frontend/src/views/LobbyView.vue

@@ -108,6 +108,8 @@ const formatGraceEndsAt = (value: string | null | undefined): string => formatSe
 const serverSeasonStatus = (info: LobbyInfo) => resolveServerSeasonStatus(info);
 const formatAnnouncementDate = (value: string | null | undefined): string =>
     formatServerDateTime(value, { fallback: '-' });
+const profileScenarioTitle = (profileName: string): string =>
+    profileDetails.value[profileName]?.scenarioTitle.trim() || '-';
 const npcModeText = (mode: number): string => ['불가', '가능', '선택 생성'][mode] ?? '불가';
 const autorunDetailText = (info: LobbyInfo): string => {
     const autorun = info.autorunUser;
@@ -527,10 +529,10 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
                                                     -
                                                 </div>
                                                 <div data-testid="profile-scenario-announcement">
-                                                    <span class="text-orange-400">{{
-                                                        profileDetails[profile.profileName]?.scenarioTitle ||
-                                                        profile.scenario
-                                                    }}</span
+                                                    <span
+                                                        class="text-orange-400"
+                                                        data-testid="profile-scenario-title"
+                                                        >{{ profileScenarioTitle(profile.profileName) }}</span
                                                     >{{ ' ' }}
                                                     <span class="text-green-400">
                                                         {{ profileDetails[profile.profileName]?.turnTerm }}분 턴 서버
@@ -542,7 +544,8 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
                                                     서기 {{ profileDetails[profile.profileName]?.year }}년
                                                     {{ profileDetails[profile.profileName]?.month }}월 (<span
                                                         class="text-orange-400"
-                                                        >{{ profile.scenario }}</span
+                                                        data-testid="profile-scenario-title"
+                                                        >{{ profileScenarioTitle(profile.profileName) }}</span
                                                     >)
                                                 </div>
                                                 <div class="text-zinc-400">