merge: 턴 입력기 연월 경계 수정을 main에 반영한다

app/game-frontend/e2e/mainNavigation.spec.ts

@@ -34,6 +34,7 @@ type NavigationFixture = {
     operations: string[];
     generalName?: string;
     generalTurnTime?: string;
+    nextTurnMonthOffset?: 0 | 1;
     serverTime?: string;
     serverWallTime?: string;
     clockMode?: 'realtime' | 'manual';
@@ -440,6 +441,7 @@ const generalContext = (state: NavigationFixture) => ({
         crewTypeName: '보병',
         traits: { personal: '대담', specialDomestic: '상재', specialWar: '무쌍' },
         turnTime: state.generalTurnTime ?? '0185-01-01T00:00:00.000Z',
+        nextTurnMonthOffset: state.nextTurnMonthOffset ?? 0,
     },
     city: {
         id: 1,
@@ -1623,6 +1625,105 @@ test('the repeated bottom global menu opens upward on the mobile document', asyn
     await persistArtifact(page, `${basePath.slice(1)}-mobile-bottom-dropup`);
 });
 
+test('first reserved month crosses December only after the general turn has passed', async ({ page }, testInfo) => {
+    const state: NavigationFixture = {
+        officerLevel: 0,
+        permission: 0,
+        nationLevel: 0,
+        stage: 0,
+        npcMode: 1,
+        generalMeCalls: 0,
+        operations: [],
+        currentYear: 179,
+        currentMonth: 12,
+        nextTurnMonthOffset: 0,
+        validMapImages: true,
+        reservedTurns: [
+            { index: 0, action: '휴식', args: {} },
+            { index: 1, action: '휴식', args: {} },
+        ],
+    };
+    await installRealtimeHarness(page);
+    await installFixture(page, state);
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await waitForMain(page);
+    await waitForMainRealtime(page);
+
+    const map = page.locator('[data-main-target="map"] .map-viewer').first();
+    const commandPanel = page.locator('[data-main-target="commands"]').first();
+    const firstDate = commandPanel.locator('.date-column [data-turn-index="0"]');
+    const secondDate = commandPanel.locator('.date-column [data-turn-index="1"]');
+
+    await expect(map).toContainText('179年 12月');
+    await expect(firstDate).toHaveText('179年 12月');
+    await expect(secondDate).toHaveText('180年 1月');
+    const before = await firstDate.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            rect: rect.toJSON(),
+            fontSize: style.fontSize,
+            lineHeight: style.lineHeight,
+            color: style.color,
+            documentScrollWidth: document.documentElement.scrollWidth,
+            viewportWidth: window.innerWidth,
+        };
+    });
+    await commandPanel.screenshot({ path: testInfo.outputPath('turn-month-before.png') });
+
+    state.nextTurnMonthOffset = 1;
+    state.contextRevision = 'BBBBBBBBBBBBBBBBBBBBBB';
+    state.contextOperations = [{ op: 'replace', path: '/general/nextTurnMonthOffset', value: 1 }];
+    await emitReadModelInvalidation(page, readModelInvalidation({ context: true }));
+
+    await expect(map).toContainText('179年 12月');
+    await expect(firstDate).toHaveText('180年 1月');
+    await expect(secondDate).toHaveText('180年 2月');
+    await firstDate.hover();
+    const after = await firstDate.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            rect: rect.toJSON(),
+            fontSize: style.fontSize,
+            lineHeight: style.lineHeight,
+            color: style.color,
+            documentScrollWidth: document.documentElement.scrollWidth,
+            viewportWidth: window.innerWidth,
+        };
+    });
+    expect(after.rect.width).toBe(before.rect.width);
+    expect(after.rect.height).toBe(before.rect.height);
+    expect(after.rect.left).toBe(before.rect.left);
+    expect(after.rect.right).toBe(before.rect.right);
+    expect(after.fontSize).toBe(before.fontSize);
+    expect(after.lineHeight).toBe(before.lineHeight);
+    expect(after.color).toBe(before.color);
+    expect(before.documentScrollWidth).toBe(before.viewportWidth);
+    expect(after.documentScrollWidth).toBe(after.viewportWidth);
+    await commandPanel.screenshot({ path: testInfo.outputPath('turn-month-after.png') });
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await firstDate.scrollIntoViewIfNeeded();
+    await expect(firstDate).toHaveText('180年 1月');
+    const mobile = await firstDate.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            rect: rect.toJSON(),
+            fontSize: style.fontSize,
+            lineHeight: style.lineHeight,
+            documentScrollWidth: document.documentElement.scrollWidth,
+        };
+    });
+    expect(mobile.rect.left).toBeGreaterThanOrEqual(0);
+    expect(mobile.rect.right).toBeLessThanOrEqual(500);
+    expect(mobile.fontSize).toBe(before.fontSize);
+    expect(mobile.lineHeight).toBe(before.lineHeight);
+    expect(mobile.documentScrollWidth).toBe(500);
+    await commandPanel.screenshot({ path: testInfo.outputPath('turn-month-mobile.png') });
+});
+
 test('main general card uses local turn time and command clock tracks corrected server time', async ({ page }) => {
     const state: NavigationFixture = {
         officerLevel: 0,

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

@@ -16,7 +16,7 @@ const props = defineProps<{
     commandTable: CommandTable | null;
     loading: boolean;
     reservedGeneralTurns: Array<{ index: number; action: string; args?: unknown }> | null;
-    general: { id: number; turnTime?: string } | null;
+    general: { id: number; turnTime?: string; nextTurnMonthOffset?: 0 | 1 } | null;
     currentYear?: number;
     currentMonth?: number;
     turnTermMinutes?: number;
@@ -45,13 +45,19 @@ const labelMap = computed(() => {
     return result;
 });
 
+const firstReservedMonth = computed(
+    () =>
+        (props.currentYear ?? 0) * 12 +
+        (props.currentMonth ?? 1) -
+        1 +
+        (props.general?.nextTurnMonthOffset ?? 0)
+);
+
 const rows = computed<ReservedCommandRow[]>(() => {
     const base = props.general?.turnTime ? new Date(props.general.turnTime) : null;
     const term = props.turnTermMinutes ?? 0;
-    const baseYear = props.currentYear ?? 0;
-    const baseMonth = props.currentMonth ?? 1;
     return (props.reservedGeneralTurns ?? []).map((turn, offset) => {
-        const absoluteMonth = baseYear * 12 + baseMonth - 1 + offset;
+        const absoluteMonth = firstReservedMonth.value + offset;
         const date = base && Number.isFinite(base.getTime()) ? addMinutes(base, offset * term) : null;
         return {
             ...turn,
@@ -71,9 +77,7 @@ const rows = computed<ReservedCommandRow[]>(() => {
 
 const autonomousUntil = computed(() => {
     if (props.autorunLimit == null) return null;
-    const baseYear = props.currentYear ?? 0;
-    const baseMonth = props.currentMonth ?? 1;
-    const currentAbsoluteMonth = baseYear * 12 + baseMonth - 1;
+    const currentAbsoluteMonth = firstReservedMonth.value;
     const lastAutonomousMonth = props.autorunLimit - 1;
     if (lastAutonomousMonth < currentAbsoluteMonth) return null;