From fa7898b6a2833322d7a6ef300a061a9f40ba1bd5 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Sun, 30 Aug 2026 17:15:40 +0000
Subject: [PATCH] =?UTF-8?q?fix(game-ui):=20=EC=A7=95=EB=B3=91=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B3=91=20=EC=B5=9C=EC=A2=85=20=EC=9E=90=EA=B8=88=EC=9D=84=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../e2e/commandArguments.spec.ts              |  5 +++++
 .../command/RecruitmentCommandForm.vue        | 22 ++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/game-frontend/e2e/commandArguments.spec.ts b/app/game-frontend/e2e/commandArguments.spec.ts
index 2b50b2d5..e3be6ea7 100644
--- a/app/game-frontend/e2e/commandArguments.spec.ts
+++ b/app/game-frontend/e2e/commandArguments.spec.ts
@@ -1908,7 +1908,12 @@ test('uses a Ref-style full recruitment page without horizontal overflow on desk
     expect(desktopGeometry.bodyOverflow).toBe('hidden');
 
     const infantry = form.getByRole('button', { name: '보병 선택 가능', exact: true });
+    const estimatedGold = infantry.getByRole('status', { name: '보병 예상 자금' });
+    await expect(estimatedGold).toHaveText('673금');
+    await infantry.locator('input[type=number]').fill('100');
+    await expect(estimatedGold).toHaveText('1,035금');
     await infantry.getByRole('button', { name: '절반', exact: true }).click();
+    await expect(estimatedGold).toHaveText('363금');
     await page.screenshot({ path: testInfo.outputPath('recruitment-desktop.png') });
     await picker.getByRole('button', { name: '입력', exact: true }).click();
     await expect(page.locator('[data-command-scope="general"] .action-column > div').first()).toHaveText(
diff --git a/app/game-frontend/src/components/command/RecruitmentCommandForm.vue b/app/game-frontend/src/components/command/RecruitmentCommandForm.vue
index ed2f3ae1..b393dd2b 100644
--- a/app/game-frontend/src/components/command/RecruitmentCommandForm.vue
+++ b/app/game-frontend/src/components/command/RecruitmentCommandForm.vue
@@ -37,6 +37,10 @@ const filledAmount = (crewType: RecruitmentCrewType | null): number => {
     }
     return Math.max(1, props.info.fullLeadership);
 };
+const displayedAmount = (crewType: RecruitmentCrewType): number =>
+    crewType.id === selectedCrewTypeId.value ? amount.value : filledAmount(crewType);
+const estimatedGoldFor = (crewType: RecruitmentCrewType): number =>
+    Math.ceil(displayedAmount(crewType) * crewType.baseCost * goldCoefficient.value);
 
 const initialize = () => {
     showUnavailable.value = Object.fromEntries(props.info.groups.map((group) => [group.armType, false]));
@@ -246,6 +250,9 @@ watch(
                                 "
                             />
                             <span>00명</span>
+                            <output :aria-label="`${crewType.name} 예상 자금`">
+                                {{ estimatedGoldFor(crewType).toLocaleString() }}금
+                            </output>
                         </label>
                     </span>
                     <span class="crew-action" @click.stop>
@@ -393,7 +400,7 @@ watch(
 }
 .amount-panel label {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-columns: auto minmax(0, 1fr) auto minmax(76px, auto);
     align-items: center;
 }
 .amount-panel input {
@@ -402,6 +409,14 @@ watch(
     box-sizing: border-box;
     text-align: right;
 }
+.amount-panel output {
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 4px;
+    background: #ddd;
+    color: #303030;
+    text-align: right;
+}
 .crew-action button,
 .submit-recruit {
     width: 100%;
@@ -452,12 +467,7 @@ watch(
         grid-template-columns: auto minmax(0, 1fr) auto 85px;
     }
     .mobile-selected-panel output {
-        box-sizing: border-box;
         min-width: 0;
-        padding: 4px;
-        background: #ddd;
-        color: #303030;
-        text-align: right;
     }
     .crew-grid {
         grid-template-areas: