feat: 사령부 명령 필요 턴을 표시한다

Ref처럼 여러 턴이 필요한 국가 명령의 소요 턴을 명령명 아래에 표시한다. 실행 getPreReqTurn을 기준으로 삼고 천도는 거리 기반 공식을 노출한다.

app/game-frontend/src/components/command/types.ts

@@ -63,6 +63,7 @@ export type CommandInputField = {
 export type CommandAvailability = {
     key: string;
     name: string;
+    turnDurationText?: string;
     reqArg: boolean;
     status: 'available' | 'blocked' | 'needsInput' | 'unknown';
     possible: boolean;

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

@@ -5,6 +5,7 @@ import SkeletonLines from '../ui/SkeletonLines.vue';
 type CommandAvailability = {
     key: string;
     name: string;
+    turnDurationText?: string;
     reqArg: boolean;
     status: 'available' | 'blocked' | 'needsInput' | 'unknown';
     possible: boolean;
@@ -161,6 +162,9 @@ const commandTitle = (command: CommandAvailability) =>
                     @click="emit('select', command.key)"
                 >
                     <span class="command-name">{{ command.name }}</span>
+                    <small v-if="command.turnDurationText" class="command-duration">
+                        /{{ command.turnDurationText }}
+                    </small>
                 </button>
             </div>
         </div>
@@ -210,6 +214,7 @@ const commandTitle = (command: CommandAvailability) =>
     min-height: 0;
     padding-inline: 5px;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -236,6 +241,14 @@ const commandTitle = (command: CommandAvailability) =>
     font-weight: 600;
 }
 
+.command-duration {
+    display: block;
+    font-size: 0.875em;
+    font-weight: 400;
+    line-height: 1.1;
+    white-space: nowrap;
+}
+
 .empty {
     color: rgba(232, 221, 196, 0.6);
 }