From d0b9b8f211ac11513651a5a4bb67e9e06645e8e1 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Sat, 15 Aug 2026 18:17:59 +0000
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=EC=84=9C=EB=B2=84=20=EB=B3=B4?=
 =?UTF-8?q?=EC=A0=95=20=EC=8B=9C=EA=B0=81=EC=9D=84=20=EB=A1=9C=EC=BB=AC=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B3=84=EB=A1=9C=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

명령 목록 중앙 시계는 서버 게임 시각과 클라이언트 시각 차이를 보정해 흐르게 한다. 장수 다음 턴과 예약 행 시각도 브라우저 로컬 시간대로 투영한다.
---
 app/game-frontend/e2e/mainNavigation.spec.ts  | 39 +++++++++++----
 .../src/components/main/CommandListPanel.vue  | 48 ++++++++++++++++---
 .../src/components/main/GeneralBasicCard.vue  |  4 +-
 app/game-frontend/src/utils/legacyDateTime.ts |  8 ++++
 app/game-frontend/src/views/MainView.vue      |  4 ++
 app/game-frontend/test/legacyDateTime.test.ts | 17 ++++++-
 6 files changed, 100 insertions(+), 20 deletions(-)

diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts
index 6100a9a6..c36fdc16 100644
--- a/app/game-frontend/e2e/mainNavigation.spec.ts
+++ b/app/game-frontend/e2e/mainNavigation.spec.ts
@@ -21,6 +21,8 @@ type NavigationFixture = {
     operations: string[];
     generalName?: string;
     generalTurnTime?: string;
+    serverTime?: string;
+    clockMode?: 'realtime' | 'manual';
     cityDefence?: number;
     cityState?: number;
     nationRate?: number;
@@ -346,6 +348,8 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
                     year: state.currentYear ?? 185,
                     month: state.currentMonth ?? 1,
                     turnTerm: 10,
+                    serverTime: state.serverTime ?? '2026-08-13T00:00:00.000Z',
+                    clockMode: state.clockMode ?? 'realtime',
                     scenarioTitle: state.scenarioTitle ?? '',
                 });
             }
@@ -766,7 +770,7 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
     await persistArtifact(page, `${basePath.slice(1)}-desktop-1200`);
 });
 
-test('main general card and command clock render the next turn with second precision', async ({ page }) => {
+test('main general card uses local turn time and command clock tracks corrected server time', async ({ page }) => {
     const state: NavigationFixture = {
         officerLevel: 0,
         permission: 0,
@@ -776,22 +780,29 @@ test('main general card and command clock render the next turn with second preci
         generalMeCalls: 0,
         operations: [],
         generalName: 'Administrator',
-        generalTurnTime: '2026-08-13T00:07:06.713Z',
+        generalTurnTime: '2026-08-13T00:09:10.713Z',
+        serverTime: '2026-08-13T00:07:06.250Z',
+        clockMode: 'realtime',
         currentYear: 179,
         currentMonth: 8,
     };
     await installFixture(page, state);
+    await page.clock.install({ time: new Date('2026-08-13T00:00:00.000Z') });
+    const cdp = await page.context().newCDPSession(page);
+    await cdp.send('Emulation.setTimezoneOverride', { timezoneId: 'Asia/Seoul' });
     await page.setViewportSize({ width: 1200, height: 900 });
     await waitForMain(page);
 
     const title = page.locator('[data-main-target="general"] .general-title').first();
     await expect(title).toContainText('Administrator');
     await expect(title).toContainText('용장');
-    await expect(title).toContainText('09:07:06');
-    await expect(title).not.toContainText('00:07');
+    await expect(title).toContainText('09:09:10');
+    await expect(title).not.toContainText('00:09');
     const commandClock = page.locator('[data-main-target="commands"] [data-command-current-time]').first();
     await expect(commandClock).toHaveText('09:07:06');
     await expect(commandClock).not.toHaveText('00:07');
+    await page.clock.runFor(1_000);
+    await expect(commandClock).toHaveText('09:07:07');
     const generalCard = page.locator('[data-main-target="general"] [data-general-basic-card]').first();
     await expect(generalCard).toContainText('수비 함(훈사80)');
     await expect(generalCard).toContainText('5 턴');
@@ -836,9 +847,9 @@ test('main general card and command clock render the next turn with second preci
         const target = resolve(artifactRoot);
         await mkdir(target, { recursive: true });
         await Promise.all([
-            page.screenshot({ path: resolve(target, 'main-turn-time-seoul-desktop-1200.png'), fullPage: true }),
+            page.screenshot({ path: resolve(target, 'main-turn-time-local-desktop-1200.png'), fullPage: true }),
             writeFile(
-                resolve(target, 'main-turn-time-seoul-desktop-1200.json'),
+                resolve(target, 'main-turn-time-local-desktop-1200.json'),
                 `${JSON.stringify({ title: desktopGeometry, commandClock: desktopClockGeometry }, null, 2)}\n`
             ),
         ]);
@@ -846,9 +857,9 @@ test('main general card and command clock render the next turn with second preci
 
     await page.setViewportSize({ width: 500, height: 900 });
     const mobileTitle = page.locator('[data-main-target="general"] .general-title').first();
-    await expect(mobileTitle).toContainText('09:07:06');
+    await expect(mobileTitle).toContainText('09:09:10');
     const mobileCommandClock = page.locator('[data-main-target="commands"] [data-command-current-time]').first();
-    await expect(mobileCommandClock).toHaveText('09:07:06');
+    await expect(mobileCommandClock).toHaveText('09:07:07');
     const mobileGeometry = {
         title: await mobileTitle.evaluate((element) => ({
             width: element.getBoundingClientRect().width,
@@ -874,15 +885,23 @@ test('main general card and command clock render the next turn with second preci
     if (artifactRoot) {
         await Promise.all([
             page.screenshot({
-                path: resolve(artifactRoot, 'main-turn-time-seoul-mobile-500.png'),
+                path: resolve(artifactRoot, 'main-turn-time-local-mobile-500.png'),
                 fullPage: true,
             }),
             writeFile(
-                resolve(artifactRoot, 'main-turn-time-seoul-mobile-500.json'),
+                resolve(artifactRoot, 'main-turn-time-local-mobile-500.json'),
                 `${JSON.stringify(mobileGeometry, null, 2)}\n`
             ),
         ]);
     }
+
+    state.clockMode = 'manual';
+    state.serverTime = '2026-08-13T00:08:30.000Z';
+    await page.reload();
+    const frozenClock = page.locator('[data-main-target="commands"] [data-command-current-time]').first();
+    await expect(frozenClock).toHaveText('09:08:30');
+    await page.clock.runFor(2_000);
+    await expect(frozenClock).toHaveText('09:08:30');
 });
 
 test('pure NPC message senders are not rendered as reply targets', async ({ page }) => {
diff --git a/app/game-frontend/src/components/main/CommandListPanel.vue b/app/game-frontend/src/components/main/CommandListPanel.vue
index 86ae7745..0a2d2124 100644
--- a/app/game-frontend/src/components/main/CommandListPanel.vue
+++ b/app/game-frontend/src/components/main/CommandListPanel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 import { addMinutes } from 'date-fns';
 import ReservedCommandEditor from '../command/ReservedCommandEditor.vue';
-import { formatSeoulTimeSeconds } from '../../utils/legacyDateTime';
+import { formatLocalTimeSeconds } from '../../utils/legacyDateTime';
 import type {
     CommandMapData,
     CommandMapLayout,
@@ -19,6 +19,8 @@ const props = defineProps<{
     currentYear?: number;
     currentMonth?: number;
     turnTermMinutes?: number;
+    serverTime?: string;
+    clockMode?: 'realtime' | 'manual';
     autorunLimit?: number | null;
     storageKey?: string;
     mapData?: CommandMapData | null;
@@ -56,16 +58,48 @@ const rows = computed<ReservedCommandRow[]>(() => {
             autonomous: props.autorunLimit != null && absoluteMonth <= props.autorunLimit - 1,
             time: date
                 ? term >= 5
-                    ? `${String(date.getUTCHours()).padStart(2, '0')}:${String(date.getUTCMinutes()).padStart(2, '0')}`
-                    : `${String(date.getUTCMinutes()).padStart(2, '0')}:${String(date.getUTCSeconds()).padStart(2, '0')}`
+                    ? `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+                    : `${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
                 : '--:--',
         };
     });
 });
 
-const currentTurnTime = computed(() =>
-    props.general?.turnTime ? formatSeoulTimeSeconds(props.general.turnTime) : '--:--:--'
+const currentServerTime = ref('--:--:--');
+let sampledServerTimeMs: number | null = null;
+let sampledClientTimeMs = 0;
+let serverClockTimer: ReturnType<typeof setTimeout> | undefined;
+
+const updateServerClock = () => {
+    if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
+    serverClockTimer = undefined;
+    if (sampledServerTimeMs === null) {
+        currentServerTime.value = '--:--:--';
+        return;
+    }
+    const projectedTime = new Date(
+        props.clockMode === 'manual' ? sampledServerTimeMs : sampledServerTimeMs + Date.now() - sampledClientTimeMs
+    );
+    currentServerTime.value = formatLocalTimeSeconds(projectedTime);
+    if (props.clockMode !== 'manual') {
+        serverClockTimer = setTimeout(updateServerClock, 1_000 - projectedTime.getMilliseconds());
+    }
+};
+
+watch(
+    () => [props.serverTime, props.clockMode] as const,
+    ([serverTime]) => {
+        const parsed = serverTime ? new Date(serverTime).getTime() : Number.NaN;
+        sampledServerTimeMs = Number.isFinite(parsed) ? parsed : null;
+        sampledClientTimeMs = Date.now();
+        updateServerClock();
+    },
+    { immediate: true }
 );
+
+onUnmounted(() => {
+    if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
+});
 </script>
 
 <template>
@@ -75,7 +109,7 @@ const currentTurnTime = computed(() =>
         :command-table="props.commandTable"
         :loading="props.loading"
         :storage-key="props.storageKey ?? `core2026:general:${props.general?.id ?? 0}`"
-        :current-time="currentTurnTime"
+        :current-time="currentServerTime"
         :map-data="props.mapData"
         :map-layout="props.mapLayout"
         @reserve-bulk="emit('set-general-turns', $event)"
diff --git a/app/game-frontend/src/components/main/GeneralBasicCard.vue b/app/game-frontend/src/components/main/GeneralBasicCard.vue
index cc0aa0e5..9956af33 100644
--- a/app/game-frontend/src/components/main/GeneralBasicCard.vue
+++ b/app/game-frontend/src/components/main/GeneralBasicCard.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import SkeletonLines from '../ui/SkeletonLines.vue';
 import LegacyProgressBar from '../ui/LegacyProgressBar.vue';
-import { formatSeoulTimeSeconds } from '../../utils/legacyDateTime';
+import { formatLocalTimeSeconds } from '../../utils/legacyDateTime';
 import { legacyExperiencePercent, ratioPercent } from '../../utils/legacyProgress';
 import { DEFAULT_GENERAL_ICON_URL, resolveGeneralIconBackgroundImage } from '../../utils/generalIcon';
 import { configuredGameAssetUrl } from '../../utils/imageAssets';
@@ -232,7 +232,7 @@ const specialText = computed(() => {
                     {{ props.general.officerLevelText }} | {{ props.general.generalType ?? '-' }} |
                     <span :style="{ color: injuryInfo.color }">{{ injuryInfo.text }}</span> 】
                     <span data-general-turn-time>{{
-                        props.general.turnTime ? formatSeoulTimeSeconds(props.general.turnTime) : '-'
+                        props.general.turnTime ? formatLocalTimeSeconds(props.general.turnTime) : '-'
                     }}</span>
                 </div>
 
diff --git a/app/game-frontend/src/utils/legacyDateTime.ts b/app/game-frontend/src/utils/legacyDateTime.ts
index 219275db..8a7bff95 100644
--- a/app/game-frontend/src/utils/legacyDateTime.ts
+++ b/app/game-frontend/src/utils/legacyDateTime.ts
@@ -7,3 +7,11 @@ export const formatSeoulHourMinute = (value: string | Date): string =>
 
 export const formatSeoulTimeSeconds = (value: string | Date): string =>
     formatServerDateTime(value, { format: 'timeSeconds' });
+
+export const formatLocalTimeSeconds = (value: string | Date): string => {
+    const parsed = value instanceof Date ? value : new Date(value);
+    if (!Number.isFinite(parsed.getTime())) return '-';
+    return [parsed.getHours(), parsed.getMinutes(), parsed.getSeconds()]
+        .map((part) => String(part).padStart(2, '0'))
+        .join(':');
+};
diff --git a/app/game-frontend/src/views/MainView.vue b/app/game-frontend/src/views/MainView.vue
index 13dc1681..069c19b7 100644
--- a/app/game-frontend/src/views/MainView.vue
+++ b/app/game-frontend/src/views/MainView.vue
@@ -205,6 +205,8 @@ watch(
                         :current-year="lobbyInfo?.year"
                         :current-month="lobbyInfo?.month"
                         :turn-term-minutes="lobbyInfo?.turnTerm"
+                        :server-time="lobbyInfo?.serverTime"
+                        :clock-mode="lobbyInfo?.clockMode"
                         :autorun-limit="reservedGeneralAutorunLimit"
                         :map-data="worldMap"
                         :map-layout="mapLayout"
@@ -331,6 +333,8 @@ watch(
                     :current-year="lobbyInfo?.year"
                     :current-month="lobbyInfo?.month"
                     :turn-term-minutes="lobbyInfo?.turnTerm"
+                    :server-time="lobbyInfo?.serverTime"
+                    :clock-mode="lobbyInfo?.clockMode"
                     :autorun-limit="reservedGeneralAutorunLimit"
                     :map-data="worldMap"
                     :map-layout="mapLayout"
diff --git a/app/game-frontend/test/legacyDateTime.test.ts b/app/game-frontend/test/legacyDateTime.test.ts
index 9ea7158c..fe3af6e6 100644
--- a/app/game-frontend/test/legacyDateTime.test.ts
+++ b/app/game-frontend/test/legacyDateTime.test.ts
@@ -1,7 +1,12 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
-import { formatSeoulDateTime, formatSeoulHourMinute, formatSeoulTimeSeconds } from '../src/utils/legacyDateTime.ts';
+import {
+    formatLocalTimeSeconds,
+    formatSeoulDateTime,
+    formatSeoulHourMinute,
+    formatSeoulTimeSeconds,
+} from '../src/utils/legacyDateTime.ts';
 
 void test('formats API UTC timestamps in the server Seoul timezone', () => {
     assert.equal(formatSeoulDateTime('2026-08-13T00:07:06.713Z'), '2026-08-13 09:07:06');
@@ -14,3 +19,13 @@ void test('keeps legacy timezone-less server timestamps unchanged', () => {
     assert.equal(formatSeoulHourMinute('2026-08-13 09:07:06'), '09:07');
     assert.equal(formatSeoulTimeSeconds('2026-08-13 09:07:06'), '09:07:06');
 });
+
+void test('formats an ISO instant with the client local clock', () => {
+    const instant = new Date('2026-08-13T00:07:06.713Z');
+    const expected = [instant.getHours(), instant.getMinutes(), instant.getSeconds()]
+        .map((part) => String(part).padStart(2, '0'))
+        .join(':');
+    assert.equal(formatLocalTimeSeconds(instant), expected);
+    assert.equal(formatLocalTimeSeconds(instant.toISOString()), expected);
+    assert.equal(formatLocalTimeSeconds('invalid'), '-');
+});