fix(frontend): NPC 장수명 색상을 Ref와 일치시킨다

암행부와 국가 장수 목록의 잘못되거나 누락된 색상을 공통 팔레트로 통일한다.
명령 대상, 토너먼트와 베팅 응답에도 npcState를 전달해 같은 표시 계약을 적용한다.
데스크톱과 모바일 Chromium 회귀 테스트로 상태별 색상을 검증한다.

app/game-frontend/src/views/BettingView.vue

@@ -167,6 +167,7 @@ const placeBet = async () => {
                     :name="selectedTarget.name"
                     :picture="selectedTarget.picture"
                     :image-server="selectedTarget.imageServer"
+                    :npc-state="selectedTarget.npcState"
                 />
                 <label class="bet-amount-field">
                     <span>베팅 금액</span>
@@ -260,6 +261,7 @@ const placeBet = async () => {
                                 :name="entry.name"
                                 :picture="entry.picture"
                                 :image-server="entry.imageServer"
+                                :npc-state="entry.npcState"
                             />
                         </td>
                         <td>{{ entry.stat }}</td>

app/game-frontend/src/views/NationGeneralsView.vue

@@ -2,6 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { formatOfficerLevelText } from '../utils/nationFormat';
+import { getNpcColor } from '../utils/npcColor';
 import { resolveGeneralIconUrl } from '../utils/generalIcon';
 import {
     DISPLAY_SETTINGS_KEY,
@@ -770,14 +771,18 @@ onBeforeUnmount(() => {
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="(general, index) in generals" :key="general.id" :data-general-id="general.id">
+                    <tr
+                        v-for="(general, index) in generals"
+                        :key="general.id"
+                        :data-general-id="general.id"
+                        :data-npc-state="general.npcState"
+                    >
                         <td
                             v-for="column in activeColumns"
                             :key="column.id"
                             :class="{
                                 'icon-cell': column.id === 'icon',
                                 'name-cell': column.id === 'name',
-                                [`npc-${general.npcState}`]: column.id === 'name',
                                 'numeric-cell':
                                     column.searchable === 'number' ||
                                     ['goldRice_1', 'killturnAndRefresh_1'].includes(column.id),
@@ -799,6 +804,11 @@ onBeforeUnmount(() => {
                                 }}<span v-if="visibleCrew(general) !== null">명</span>
                             </template>
                             <template v-else-if="column.id === 'belong'">{{ general.belong }}년</template>
+                            <template v-else-if="column.id === 'name'">
+                                <span data-general-name :style="{ color: getNpcColor(general.npcState) }">{{
+                                    general.name
+                                }}</span>
+                            </template>
                             <template
                                 v-else-if="column.id === 'refreshScoreTotal' || column.id === 'killturnAndRefresh_1'"
                             >
@@ -1182,16 +1192,6 @@ td {
 .state {
     margin: 40px;
 }
-.npc-0,
-.npc-1 {
-    color: skyblue;
-}
-.npc-2,
-.npc-3,
-.npc-4,
-.npc-5 {
-    color: #aaa;
-}
 .error {
     color: #ff7373;
 }

app/game-frontend/src/views/NationSecretView.vue

@@ -4,6 +4,7 @@ import { computed, onMounted, ref } from 'vue';
 import { formatReservedCommandBrief } from '../components/command/reservedCommandBrief';
 import type { CommandTable } from '../components/command/types';
 import LegacySortControls from '../components/ui/LegacySortControls.vue';
+import { getNpcColor } from '../utils/npcColor';
 import { trpc } from '../utils/trpc';
 type Result = Awaited<ReturnType<typeof trpc.nation.getSecretGeneralList.query>>;
 type ReservedCommand = Result['generals'][number]['reservedCommands'][number];
@@ -221,8 +222,18 @@ onMounted(load);
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="general in generals" :key="general.id" :data-general-id="general.id">
-                        <td>{{ displayName(general) }}<br />Lv {{ general.experienceLevel }}</td>
+                    <tr
+                        v-for="general in generals"
+                        :key="general.id"
+                        :data-general-id="general.id"
+                        :data-npc-state="general.npcState"
+                    >
+                        <td>
+                            <span data-general-name :style="{ color: getNpcColor(general.npcState) }">{{
+                                displayName(general)
+                            }}</span
+                            ><br />Lv {{ general.experienceLevel }}
+                        </td>
                         <td>
                             {{ general.stats.leadership
                             }}<span v-if="general.leadershipBonus" class="bonus">+{{ general.leadershipBonus }}</span

app/game-frontend/src/views/NpcListView.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from 'vue';
 
 import LegacySortControls from '../components/ui/LegacySortControls.vue';
+import { getNpcColor } from '../utils/npcColor';
 import { trpc } from '../utils/trpc';
 
 type NpcList = Awaited<ReturnType<typeof trpc.public.getNpcList.query>>;
@@ -188,7 +189,7 @@ onMounted(() => {
             </thead>
             <tbody>
                 <tr v-for="general in data.generals" :key="general.id" :data-general-id="general.id">
-                    <td :class="{ possessed: general.npcState === 1 }">{{ general.name }}</td>
+                    <td :style="{ color: getNpcColor(general.npcState) }">{{ general.name }}</td>
                     <td>{{ general.ownerName }}</td>
                     <td>Lv {{ general.level }}</td>
                     <td>{{ general.nationName }}</td>
@@ -322,10 +323,6 @@ onMounted(() => {
     width: 78px;
 }
 
-.possessed {
-    color: skyblue;
-}
-
 .trait-tooltip {
     position: relative;
     cursor: help;