merge: 최신 main을 프로필 큐 자동 복구에 통합

app/game-frontend/src/components/command/reservedCommandBrief.ts

@@ -1,4 +1,4 @@
-import { JosaUtil } from '@sammo-ts/common';
+import { JosaUtil } from '@sammo-ts/common/util/JosaUtil';
 
 import type { CommandOption, CommandTable } from './types';
 

app/game-frontend/src/components/main/GeneralBattleSummary.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 
 export type GeneralBattleSummaryData = {
     available?: boolean;

app/game-frontend/src/components/main/MainFrontStatus.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed } from 'vue';
 import { resolveTournamentStageName } from '../../utils/tournamentStatus';
 

app/game-frontend/src/stores/mainDashboard.ts

@@ -5,12 +5,8 @@ import {
     MESSAGE_MAILBOX_PUBLIC,
     type MessageType,
 } from '@sammo-ts/logic/messages/message.js';
-import {
-    applyReadModelDelta,
-    cloneReadModelJson,
-    type PublicRealtimeEvent,
-    type RealtimeReadModelInvalidation,
-} from '@sammo-ts/common';
+import { applyReadModelDelta, cloneReadModelJson } from '@sammo-ts/common/realtime/delta';
+import type { PublicRealtimeEvent, RealtimeReadModelInvalidation } from '@sammo-ts/common/realtime/types';
 import { trpc } from '../utils/trpc';
 import { useMapViewerStore } from './mapViewer';
 import { useSessionStore } from './session';

app/game-frontend/src/utils/dashboardReadModel.ts

@@ -5,7 +5,7 @@ import {
     type RealtimeReadModelChanges,
     type RealtimeReadModelInvalidation,
     type RealtimeViewerIdentity,
-} from '@sammo-ts/common';
+} from '@sammo-ts/common/realtime/types';
 
 export type DashboardReadModelIdentity = RealtimeViewerIdentity;
 export type DashboardRefreshPlan = RealtimeReadModelInvalidation;

app/game-frontend/src/utils/formatLog.ts

@@ -1,3 +1,3 @@
-import { formatLegacyLogHtml } from '@sammo-ts/common';
+import { formatLegacyLogHtml } from '@sammo-ts/common/logging/formatLegacyLogHtml';
 
 export const formatLog = (text?: string): string => formatLegacyLogHtml(text);

app/game-frontend/src/utils/gatewayTrpc.ts

@@ -1,4 +1,4 @@
-import { trpcJsonBodyHttpClientOptions } from '@sammo-ts/common';
+import { trpcJsonBodyHttpClientOptions } from '@sammo-ts/common/http/trpcTransport';
 import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
 import type { AppRouter } from '@sammo-ts/gateway-api';
 

app/game-frontend/src/utils/legacyDateTime.ts

@@ -1,4 +1,4 @@
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 
 export const formatSeoulDateTime = (value: string | Date): string => formatServerDateTime(value);
 

app/game-frontend/src/utils/trpc.ts

@@ -1,4 +1,5 @@
-import { REALTIME_ACCESS_GRANT_HEADER, trpcJsonBodyHttpClientOptions } from '@sammo-ts/common';
+import { trpcJsonBodyHttpClientOptions } from '@sammo-ts/common/http/trpcTransport';
+import { REALTIME_ACCESS_GRANT_HEADER } from '@sammo-ts/common/realtime/types';
 import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
 import type { AppRouter } from '@sammo-ts/game-api';
 import { resolveBatchRealtimeAccessGrant } from './realtimeAccessGrant';

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import PanelCard from '../components/ui/PanelCard.vue';

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, ref } from 'vue';
 import TournamentBracket from '../components/tournament/TournamentBracket.vue';
 import TournamentPageHeader from '../components/tournament/TournamentPageHeader.vue';

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { formatServerDateTime, JosaUtil } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
+import { JosaUtil } from '@sammo-ts/common/util/JosaUtil';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { trpc } from '../utils/trpc';
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import type { RuntimeNavigationConfig } from '@sammo-ts/common/navigation/menuConfig';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useGameFeedback } from '../composables/useGameFeedback';

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

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { JosaUtil } from '@sammo-ts/common';
+import { JosaUtil } from '@sammo-ts/common/util/JosaUtil';
 
 import PersonnelSelectionDialog from '../components/personnel/PersonnelSelectionDialog.vue';
 import { useGameFeedback } from '../composables/useGameFeedback';

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, ref } from 'vue';
 import { trpc } from '../utils/trpc';
 type Result = Awaited<ReturnType<typeof trpc.nation.getSecretGeneralList.query>>;

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 
-import { isLegacyArchiveProfile, type LegacyArchiveProfile } from '@sammo-ts/common';
+import {
+    isLegacyArchiveProfile,
+    type LegacyArchiveProfile,
+} from '@sammo-ts/common/legacyArchive/ArchivedGeneralSnapshot';
 
 import GeneralBasicCard from '../components/main/GeneralBasicCard.vue';
 import GeneralBattleSummary, { type GeneralBattleSummaryData } from '../components/main/GeneralBattleSummary.vue';

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, ref } from 'vue';
 import TournamentBracket from '../components/tournament/TournamentBracket.vue';
 import TournamentPageHeader from '../components/tournament/TournamentPageHeader.vue';

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 

app/gateway-frontend/e2e/lobby-admin-navigation.spec.ts

@@ -240,6 +240,112 @@ test('desktop administrator sidebar follows the navbar away and then sticks to t
     await writeFile(testInfo.outputPath('admin-sidebar-scroll-geometry.json'), JSON.stringify(measurements, null, 2));
 });
 
+test('keeps mobile account actions on clean rows for users and administrators', async ({ browser }, testInfo) => {
+    const measureAccountActions = async (page: Page) => {
+        const actions = page.locator('.account-actions');
+        await expect(actions).toBeVisible();
+        return actions.evaluate((element) => {
+            const rect = (target: Element) => {
+                const value = target.getBoundingClientRect();
+                return {
+                    top: value.top,
+                    right: value.right,
+                    bottom: value.bottom,
+                    left: value.left,
+                    width: value.width,
+                    height: value.height,
+                };
+            };
+            const items = Array.from(element.children).map((child) => ({
+                ...rect(child),
+                clientWidth: (child as HTMLElement).clientWidth,
+                scrollWidth: (child as HTMLElement).scrollWidth,
+                whiteSpace: getComputedStyle(child).whiteSpace,
+            }));
+            return {
+                container: rect(element),
+                documentWidth: document.documentElement.scrollWidth,
+                viewportWidth: window.innerWidth,
+                items,
+            };
+        });
+    };
+
+    const userContext = await browser.newContext({ viewport: { width: 500, height: 900 } });
+    const userPage = await userContext.newPage();
+    await installGatewayFixture(userPage, []);
+    await userPage.goto('lobby');
+    const userGeometry = await measureAccountActions(userPage);
+    expect(userGeometry.documentWidth).toBe(userGeometry.viewportWidth);
+    expect(userGeometry.items).toHaveLength(2);
+    expect(userGeometry.items[0]?.top).toBeCloseTo(userGeometry.items[1]?.top ?? 0, 0);
+    expect(userGeometry.items[0]?.bottom).toBeCloseTo(userGeometry.items[1]?.bottom ?? 0, 0);
+    expect(userGeometry.items[0]?.width).toBeCloseTo(userGeometry.items[1]?.width ?? 0, 0);
+    expect(userGeometry.items.every(({ scrollWidth, clientWidth }) => scrollWidth <= clientWidth)).toBe(true);
+    await userPage.screenshot({ path: testInfo.outputPath('gateway-account-actions-user-500px.png'), fullPage: true });
+    await userContext.close();
+
+    const adminContext = await browser.newContext({ viewport: { width: 500, height: 900 } });
+    const adminPage = await adminContext.newPage();
+    await installGatewayFixture(adminPage, ['superuser']);
+    await adminPage.goto('lobby');
+    const adminGeometry = await measureAccountActions(adminPage);
+    expect(adminGeometry.documentWidth).toBe(adminGeometry.viewportWidth);
+    expect(adminGeometry.items).toHaveLength(3);
+    const [account, logout, admin] = adminGeometry.items;
+    expect(account?.top).toBeCloseTo(logout?.top ?? 0, 0);
+    expect(account?.bottom).toBeCloseTo(logout?.bottom ?? 0, 0);
+    expect(account?.width).toBeCloseTo(logout?.width ?? 0, 0);
+    expect(admin?.top).toBeCloseTo((logout?.bottom ?? 0) + 16, 0);
+    expect(admin?.left).toBeCloseTo(account?.left ?? 0, 0);
+    expect(admin?.right).toBeCloseTo(logout?.right ?? 0, 0);
+    expect(adminGeometry.items.every(({ scrollWidth, clientWidth }) => scrollWidth <= clientWidth)).toBe(true);
+    expect(account?.whiteSpace).toBe('nowrap');
+    expect(admin?.whiteSpace).toBe('nowrap');
+
+    const adminLink = adminPage.getByRole('link', { name: '관리자 페이지' });
+    const baseBackground = await adminLink.evaluate((element) => getComputedStyle(element).backgroundColor);
+    await adminLink.hover();
+    await expect.poll(() => adminLink.evaluate((element) => getComputedStyle(element).backgroundColor)).not.toBe(
+        baseBackground
+    );
+    await adminLink.focus();
+    await expect(adminLink).toBeFocused();
+    await adminPage.screenshot({ path: testInfo.outputPath('gateway-account-actions-admin-500px.png'), fullPage: true });
+
+    await adminPage.setViewportSize({ width: 390, height: 844 });
+    const adminNarrowGeometry = await measureAccountActions(adminPage);
+    expect(adminNarrowGeometry.documentWidth).toBe(adminNarrowGeometry.viewportWidth);
+    expect(adminNarrowGeometry.items[0]?.top).toBeCloseTo(adminNarrowGeometry.items[1]?.top ?? 0, 0);
+    expect(adminNarrowGeometry.items[2]?.top).toBeCloseTo(
+        (adminNarrowGeometry.items[1]?.bottom ?? 0) + 16,
+        0
+    );
+    expect(adminNarrowGeometry.items.every(({ scrollWidth, clientWidth }) => scrollWidth <= clientWidth)).toBe(true);
+    await adminPage.screenshot({ path: testInfo.outputPath('gateway-account-actions-admin-390px.png'), fullPage: true });
+
+    await adminPage.setViewportSize({ width: 360, height: 800 });
+    const adminSmallGeometry = await measureAccountActions(adminPage);
+    expect(adminSmallGeometry.documentWidth).toBe(adminSmallGeometry.viewportWidth);
+    expect(adminSmallGeometry.items[1]?.top).toBeCloseTo((adminSmallGeometry.items[0]?.bottom ?? 0) + 16, 0);
+    expect(adminSmallGeometry.items[2]?.top).toBeCloseTo((adminSmallGeometry.items[1]?.bottom ?? 0) + 16, 0);
+    expect(adminSmallGeometry.items.every(({ scrollWidth, clientWidth }) => scrollWidth <= clientWidth)).toBe(true);
+    await writeFile(
+        testInfo.outputPath('gateway-account-actions-geometry.json'),
+        JSON.stringify(
+            {
+                user: userGeometry,
+                admin: adminGeometry,
+                adminNarrow: adminNarrowGeometry,
+                adminSmall: adminSmallGeometry,
+            },
+            null,
+            2
+        )
+    );
+    await adminContext.close();
+});
+
 test('legacy server operations URL keeps query parameters and redirects to the server list', async ({ page }) => {
     await installGatewayFixture(page, ['superuser']);
 

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/router/index.ts

@@ -1,12 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import HomeView from '../views/HomeView.vue';
-import LobbyView from '../views/LobbyView.vue';
-import AdminOverviewView from '../views/AdminOverviewView.vue';
-import AdminView from '../views/AdminView.vue';
-import ServerOperationsView from '../views/ServerOperationsView.vue';
-import AccountView from '../views/AccountView.vue';
-import OAuthCallbackView from '../views/OAuthCallbackView.vue';
-import SignupView from '../views/SignupView.vue';
+
+const HomeView = () => import('../views/HomeView.vue');
+const LobbyView = () => import('../views/LobbyView.vue');
+const AdminOverviewView = () => import('../views/AdminOverviewView.vue');
+const AdminView = () => import('../views/AdminView.vue');
+const ServerOperationsView = () => import('../views/ServerOperationsView.vue');
+const AccountView = () => import('../views/AccountView.vue');
+const OAuthCallbackView = () => import('../views/OAuthCallbackView.vue');
+const SignupView = () => import('../views/SignupView.vue');
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),

app/gateway-frontend/src/utils/formatLog.ts

@@ -1,3 +1,3 @@
-import { formatLegacyLogHtml } from '@sammo-ts/common';
+import { formatLegacyLogHtml } from '@sammo-ts/common/logging/formatLegacyLogHtml';
 
 export const formatLog = (text: string): string => formatLegacyLogHtml(text);

app/gateway-frontend/src/utils/gameTrpc.ts

@@ -1,4 +1,4 @@
-import { trpcJsonBodyHttpClientOptions } from '@sammo-ts/common';
+import { trpcJsonBodyHttpClientOptions } from '@sammo-ts/common/http/trpcTransport';
 import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
 import type { appRouter } from '@sammo-ts/game-api';
 
@@ -9,9 +9,7 @@ const resolveProfileUrl = (template: string, profile: string): string =>
 
 export const createGameTrpc = (profile: string, port: number, gameToken?: string) => {
     const urlTemplate = import.meta.env.VITE_GAME_API_URL_TEMPLATE;
-    const url = urlTemplate
-        ? resolveProfileUrl(urlTemplate, profile)
-        : `http://localhost:${port}/api/trpc`;
+    const url = urlTemplate ? resolveProfileUrl(urlTemplate, profile) : `http://localhost:${port}/api/trpc`;
     return createTRPCProxyClient<GameRouter>({
         links: [
             httpBatchLink({

app/gateway-frontend/src/utils/trpc.ts

@@ -1,4 +1,4 @@
-import { trpcJsonBodyHttpClientOptions } from '@sammo-ts/common';
+import { trpcJsonBodyHttpClientOptions } from '@sammo-ts/common/http/trpcTransport';
 import { createTRPCProxyClient, httpBatchLink, httpLink } from '@trpc/client';
 import type { AppRouter } from '@sammo-ts/gateway-api';
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 

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

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import {
     formatServerDateTime,
-    gatewayProfileCapabilities,
     serverDateTimeInputToIso,
     toServerDateTimeInputValue,
-    type GatewayProfileStatus,
-} from '@sammo-ts/common';
+} from '@sammo-ts/common/time/ServerDateTime';
+import { gatewayProfileCapabilities, type GatewayProfileStatus } from '@sammo-ts/common/gateway/profileStatus';
 import { computed, onMounted, ref, watch } from 'vue';
 import ServerProfileTabs from '../components/ServerProfileTabs.vue';
 import AdminConsoleLayout from '../layouts/AdminConsoleLayout.vue';

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

@@ -3,7 +3,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import type { inferRouterOutputs } from '@trpc/server';
 import type { AppRouter } from '@sammo-ts/gateway-api';
-import { gatewayProfileCapabilities } from '@sammo-ts/common';
+import { gatewayProfileCapabilities } from '@sammo-ts/common/gateway/profileStatus';
 
 import MapPreview from '../components/MapPreview.vue';
 import KakaoOtpDialog from '../components/KakaoOtpDialog.vue';

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime } from '@sammo-ts/common';
+import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import type { inferRouterOutputs } from '@trpc/server';
@@ -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">
@@ -823,10 +826,10 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
                 >
                     계 정 관 리
                 </div>
-                <div class="p-6 flex justify-center space-x-4">
+                <div class="account-actions p-6">
                     <RouterLink
                         to="/account"
-                        class="bg-zinc-800 hover:bg-zinc-700 text-white px-6 py-2 rounded border border-zinc-700 transition-colors"
+                        class="account-navigation-button bg-zinc-800 hover:bg-zinc-700 text-white px-6 py-2 rounded border border-zinc-700 transition-colors"
                     >
                         비밀번호 & 전콘 & 탈퇴
                     </RouterLink>
@@ -841,7 +844,7 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
                     <RouterLink
                         v-if="canAccessAdmin"
                         to="/admin"
-                        class="bg-zinc-800 hover:bg-zinc-700 text-white px-6 py-2 rounded border border-zinc-700 transition-colors"
+                        class="account-navigation-button account-admin-button bg-zinc-800 hover:bg-zinc-700 text-white px-6 py-2 rounded border border-zinc-700 transition-colors"
                     >
                         관리자 페이지
                     </RouterLink>
@@ -855,6 +858,20 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
 </template>
 
 <style scoped>
+.account-actions {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+}
+
+.account-navigation-button {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
 .legacy-logout-button {
     box-sizing: border-box;
     width: 200px;
@@ -1091,4 +1108,38 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
     cursor: default;
     opacity: 0.65;
 }
+
+@media (max-width: 640px) {
+    .account-actions {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .account-actions > * {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .account-navigation-button {
+        height: 48px;
+        padding: 10px 4px;
+        font-size: clamp(12px, 3.2vw, 16px);
+        line-height: 24px;
+        white-space: nowrap;
+    }
+
+    .account-admin-button {
+        grid-column: 1 / -1;
+    }
+}
+
+@media (max-width: 360px) {
+    .account-actions {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .account-admin-button {
+        grid-column: auto;
+    }
+}
 </style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatServerDateTime, serverDateTimeInputToIso } from '@sammo-ts/common';
+import { formatServerDateTime, serverDateTimeInputToIso } from '@sammo-ts/common/time/ServerDateTime';
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 
 import CompactHelp from '../components/CompactHelp.vue';

app/gateway-frontend/test/routerLoading.test.mjs

@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { describe, it } from 'node:test';
+
+const routerSourcePath = path.resolve(import.meta.dirname, '../src/router/index.ts');
+
+void describe('gateway route loading contract', () => {
+    void it('loads view components through route-level dynamic imports', async () => {
+        const source = await readFile(routerSourcePath, 'utf8');
+        const staticViewImports = [...source.matchAll(/^import\s+.+\s+from\s+['"]\.\.\/views\//gm)];
+        const lazyViewComponents = new Set(
+            [...source.matchAll(/^const\s+([A-Z][A-Za-z0-9]+View)\s*=\s*\(\)\s*=>\s*import\(['"]\.\.\/views\//gm)].map(
+                (match) => match[1]
+            )
+        );
+        const routedViewComponents = new Set(
+            [...source.matchAll(/^\s*component:\s*([A-Z][A-Za-z0-9]+View),?$/gm)].map((match) => match[1])
+        );
+
+        assert.deepEqual(staticViewImports, []);
+        assert.deepEqual(lazyViewComponents, routedViewComponents);
+        assert.ok(lazyViewComponents.size >= 8);
+    });
+});