From 6896de351d6401849baf0cf806e3eec24934635e Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Fri, 21 Aug 2026 05:57:03 +0000
Subject: [PATCH] =?UTF-8?q?fix(game-ui):=20=ED=84=B4=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=EA=B8=B0=EC=99=80=20=EC=A0=9C=EC=96=B4=ED=96=89=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=20=EA=B0=84=EA=B2=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/game-frontend/e2e/mainNavigation.spec.ts  | 27 ++++++++++++++-----
 .../src/components/main/MainTurnControls.vue  |  1 +
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts
index 251de1d6..b5eb870d 100644
--- a/app/game-frontend/e2e/mainNavigation.spec.ts
+++ b/app/game-frontend/e2e/mainNavigation.spec.ts
@@ -1047,6 +1047,10 @@ const persistArtifact = async (page: Page, name: string) => {
             quickPopup: describe('#mobile-quick-menu'),
             gameHeader: describe('.game-shell__header'),
             gameTitle: describe('.game-shell__title'),
+            commandPanel: describe('[data-main-target="commands"]'),
+            mapPanel: describe('[data-main-target="map"]'),
+            cityPanel: describe('[data-main-target="city"]'),
+            turnEditor: describe('[data-main-target="commands"] .reserved-command-editor'),
             turnControls: describe('.main-turn-controls'),
             turnAutoRefresh: describe('.main-turn-controls__auto'),
             turnManualRefresh: describe('.main-turn-controls__manual'),
@@ -3266,13 +3270,21 @@ test('places the joined refresh controls and lobby below the turn editor without
         });
 
     let layout = await measure();
-    const cityBottom = await page
-        .locator('[data-main-target="city"]')
-        .evaluate((element) => element.getBoundingClientRect().bottom);
-    expect(layout.commands.bottom).toBe(cityBottom);
-    expect(layout.commands.height).toBeCloseTo(645, 0);
+    const leftColumn = await page.evaluate(() => {
+        const map = document.querySelector<HTMLElement>('[data-main-target="map"]');
+        const city = document.querySelector<HTMLElement>('[data-main-target="city"]');
+        if (!map || !city) throw new Error('desktop map or city panel is missing');
+        const mapRect = map.getBoundingClientRect();
+        const cityRect = city.getBoundingClientRect();
+        return { top: mapRect.top, bottom: cityRect.bottom, height: cityRect.bottom - mapRect.top };
+    });
+    expect(layout.commands.top).toBe(leftColumn.top);
+    expect(layout.commands.bottom).toBe(leftColumn.bottom);
+    expect(layout.commands.height).toBeCloseTo(leftColumn.height, 2);
+    expect(layout.commands.height).toBeGreaterThanOrEqual(645);
+    expect(layout.commands.height).toBeLessThan(647);
     expect(layout.controlsAfterEditor).toBe(true);
-    expect(layout.controls.top).toBeGreaterThanOrEqual(layout.editor.bottom);
+    expect(layout.controls.top - layout.editor.bottom).toBeCloseTo(4, 2);
     expect(layout.manual.right).toBe(layout.auto.left);
     expect(layout.pair.right + 4).toBe(layout.lobby.left);
     expect(layout.manualRadius).toEqual({ topRight: '0px', bottomRight: '0px' });
@@ -3294,13 +3306,14 @@ test('places the joined refresh controls and lobby below the turn editor without
     await expect(page.getByTestId('game-toast')).toContainText('이미 정보를 갱신하고 있습니다.');
     await expect(manualRefresh).toHaveAttribute('aria-busy', 'false');
     expect(state.generalMeCalls).toBe(callsBeforeManualRefresh + 1);
+    await persistArtifact(page, `${basePath.slice(1)}-main-turn-action-layout-desktop`);
 
     await page.setViewportSize({ width: 500, height: 900 });
     await expect(page.locator('.layout-mobile .main-turn-controls')).toBeVisible();
     layout = await measure();
     expect(layout.commands.width).toBe(500);
     expect(layout.controlsAfterEditor).toBe(true);
-    expect(layout.controls.top).toBeGreaterThanOrEqual(layout.editor.bottom);
+    expect(layout.controls.top - layout.editor.bottom).toBeCloseTo(4, 2);
     expect(layout.manual.right).toBe(layout.auto.left);
     expect(layout.pair.right + 4).toBe(layout.lobby.left);
     expect(layout.overflow).toBeLessThanOrEqual(0);
diff --git a/app/game-frontend/src/components/main/MainTurnControls.vue b/app/game-frontend/src/components/main/MainTurnControls.vue
index aed3cc56..11c9d1fd 100644
--- a/app/game-frontend/src/components/main/MainTurnControls.vue
+++ b/app/game-frontend/src/components/main/MainTurnControls.vue
@@ -49,6 +49,7 @@ const emit = defineEmits<{
     display: grid;
     grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
     gap: 4px;
+    margin-top: 4px;
 }
 
 .main-turn-controls__refresh-pair {