From ce70e8b2b90e7af92b9ba4a9d2586c6035209184 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Wed, 19 Aug 2026 11:31:04 +0000
Subject: [PATCH] =?UTF-8?q?fix(game-ui):=20=EA=B1=B4=EA=B5=AD=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=EB=9D=BC=EB=B2=A8=EC=97=90=20=EA=B5=AD=EA=B0=80?=
 =?UTF-8?q?=EC=83=89=EC=9D=84=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

색상 선택지와 선택된 라벨에 국가색 배경과 대비 전경색을 적용한다. 실제 Chromium 회귀로 색상 16과 밝은 색, desktop/mobile 표시를 고정한다.
---
 .../e2e/commandArguments.spec.ts              | 40 +++++++++++++++++--
 .../components/main/CommandArgumentForm.vue   | 19 ++++++++-
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/app/game-frontend/e2e/commandArguments.spec.ts b/app/game-frontend/e2e/commandArguments.spec.ts
index 1ae4f7a4..f9248840 100644
--- a/app/game-frontend/e2e/commandArguments.spec.ts
+++ b/app/game-frontend/e2e/commandArguments.spec.ts
@@ -916,9 +916,14 @@ test('renders and accepts every Ref strategy command at mobile width', async ({
     await picker.screenshot({ path: test.info().outputPath('all-strategy-commands-mobile.png') });
 });
 
-test('defaults founding to a Ref-selectable nation trait without exposing the neutral storage trait', async ({
+test('defaults founding to a Ref-selectable nation trait and paints color option labels', async ({
     page,
 }) => {
+    const foundingColors = [
+        { value: 0, label: '색상 1', color: '#FF0000' },
+        { value: 15, label: '색상 16', color: '#6495ED' },
+        { value: 16, label: '색상 17', color: '#7FFFD4' },
+    ];
     const foundingCommandTable = {
         general: [
             {
@@ -952,7 +957,7 @@ test('defaults founding to a Ref-selectable nation trait without exposing the ne
             },
         ],
         nation: [],
-        inputOptions,
+        inputOptions: { ...inputOptions, colors: foundingColors },
     };
     await install(page, false, foundingCommandTable);
     await page.setViewportSize({ width: 1200, height: 900 });
@@ -968,7 +973,36 @@ test('defaults founding to a Ref-selectable nation trait without exposing the ne
     await expect(nationType.locator('option')).toHaveText(['도적']);
     await nationType.focus();
     await expect(nationType).toBeFocused();
-    await picker.screenshot({ path: test.info().outputPath('founding-selectable-nation-trait-desktop-1200.png') });
+
+    const colorType = picker.getByLabel('국기 색상');
+    const color16 = colorType.locator('option[value="15"]');
+    await expect(color16).toHaveText('색상 16');
+    await expect(color16).toHaveCSS('background-color', 'rgb(100, 149, 237)');
+    await expect(color16).toHaveCSS('color', 'rgb(255, 255, 255)');
+    await colorType.selectOption('15');
+    await expect(colorType).toHaveValue('15');
+    await expect(colorType).toHaveCSS('background-color', 'rgb(100, 149, 237)');
+    await expect(colorType).toHaveCSS('color', 'rgb(255, 255, 255)');
+    await colorType.selectOption('16');
+    await expect(colorType).toHaveCSS('background-color', 'rgb(127, 255, 212)');
+    await expect(colorType).toHaveCSS('color', 'rgb(0, 0, 0)');
+    await colorType.selectOption('15');
+    await picker.screenshot({ path: test.info().outputPath('founding-colored-option-desktop-1200.png') });
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    await page.getByRole('button', { name: '1턴 명령 입력', exact: true }).click();
+    const mobilePicker = page.getByTestId('command-picker');
+    await mobilePicker.getByRole('button', { name: '국가', exact: true }).click();
+    await mobilePicker.getByRole('button', { name: '건국', exact: true }).click();
+    const mobileColorType = mobilePicker.getByLabel('국기 색상');
+    await mobileColorType.selectOption('15');
+    await expect(mobileColorType).toHaveCSS('background-color', 'rgb(100, 149, 237)');
+    await expect(mobileColorType).toHaveCSS('color', 'rgb(255, 255, 255)');
+    const colorSelectRect = await mobileColorType.evaluate((element) => element.getBoundingClientRect().toJSON());
+    expect(colorSelectRect.x).toBeGreaterThanOrEqual(0);
+    expect(colorSelectRect.right).toBeLessThanOrEqual(500);
+    await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(500);
+    await mobilePicker.screenshot({ path: test.info().outputPath('founding-colored-option-mobile-500.png') });
 });
 
 test('reserves force move, retirement, and resignation from the user command picker', async ({ page }) => {
diff --git a/app/game-frontend/src/components/main/CommandArgumentForm.vue b/app/game-frontend/src/components/main/CommandArgumentForm.vue
index ba7f4191..9000dfde 100644
--- a/app/game-frontend/src/components/main/CommandArgumentForm.vue
+++ b/app/game-frontend/src/components/main/CommandArgumentForm.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
+import { computed, reactive, watch, type CSSProperties } from 'vue';
 import MapViewer from './MapViewer.vue';
 import { commandArgumentPresentation } from '../command/commandArgumentPresentation';
+import { legacyNationTextColor } from '../../utils/legacyNationColor';
 import type {
     CommandInputContext,
     CommandInputField,
@@ -105,6 +106,14 @@ const setSelectValue = (field: CommandInputField, rawValue: string) => {
 const selectedOptionFor = (field: CommandInputField): CommandOption | undefined =>
     optionsFor(field).find((entry) => entry.value === values[field.key]);
 
+const colorOptionStyle = (field: CommandInputField, option?: CommandOption): CSSProperties | undefined => {
+    if (field.optionSource !== 'colors' || !option?.color) return undefined;
+    return {
+        backgroundColor: option.color,
+        color: legacyNationTextColor(option.color),
+    };
+};
+
 const cityTargetField = computed(() =>
     props.fields.find(
         (field) =>
@@ -438,9 +447,15 @@ watch(
                 v-else-if="field.kind === 'select'"
                 :id="`command-arg-${field.key}`"
                 :value="String(values[field.key] ?? '')"
+                :style="colorOptionStyle(field, selectedOptionFor(field))"
                 @change="setSelectValue(field, ($event.target as HTMLSelectElement).value)"
             >
-                <option v-for="option in optionsFor(field)" :key="String(option.value)" :value="String(option.value)">
+                <option
+                    v-for="option in optionsFor(field)"
+                    :key="String(option.value)"
+                    :value="String(option.value)"
+                    :style="colorOptionStyle(field, option)"
+                >
                     {{ option.label }}
                 </option>
             </select>