fix(game-ui): 징병 모병 최종 자금을 표시한다

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(

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: