feat(game-ui): port Ref progress bars

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

@@ -3,6 +3,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import PanelCard from '../components/ui/PanelCard.vue';
 import SkeletonLines from '../components/ui/SkeletonLines.vue';
+import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
 import { trpc } from '../utils/trpc';
 import { getNpcColor } from '../utils/npcColor';
 import { formatLog } from '../utils/formatLog';
@@ -302,9 +303,9 @@ onMounted(() => {
                             ><strong>{{ selectedGeneral.battleStats.deathCrew.toLocaleString('ko-KR') }}</strong>
                             <span>전투 특기</span><strong>{{ selectedGeneral.traits.specialWar }}</strong>
                             <span>내정 특기</span><strong>{{ selectedGeneral.traits.specialDomestic }}</strong>
-                            <span>성격</span><strong>{{ selectedGeneral.traits.personal }}</strong> <span>숙련도</span
-                            ><strong>{{ selectedGeneral.battleStats.dex.join(' / ') }}</strong>
+                            <span>성격</span><strong>{{ selectedGeneral.traits.personal }}</strong>
                         </div>
+                        <LegacyGeneralProgress :general="selectedGeneral" />
                     </div>
                     <div v-if="selectedGeneral" class="general-meta">
                         <div>최근 턴: {{ selectedGeneral.turnTime ? selectedGeneral.turnTime.slice(-5) : '-' }}</div>

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

@@ -6,6 +6,7 @@ import { formatSeoulDateTime } from '../utils/legacyDateTime';
 import { isDefenceTrainPenaltyWaivedByScenarioEffect } from '@sammo-ts/logic';
 import { useSessionStore } from '../stores/session';
 import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
+import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
 
 const SCREEN_MODE_KEY = 'sam.screenMode';
 const CUSTOM_CSS_KEY = 'sam_customCSS';
@@ -417,19 +418,12 @@ onMounted(() => {
                     <div>전투 0 · 계략 0 · 사관 7년</div>
                     <div>승률 0% · 승리 0 · 패배 0</div>
                     <div>살상률 0% · 사살 0 · 피살 0</div>
-                    <div class="dexterity-title">숙련도</div>
-                    <div>
-                        보병 {{ data.general.progression?.dex?.[0] ?? 0 }} · 궁병
-                        {{ data.general.progression?.dex?.[1] ?? 0 }} · 기병
-                        {{ data.general.progression?.dex?.[2] ?? 0 }} · 귀병
-                        {{ data.general.progression?.dex?.[3] ?? 0 }} · 차병
-                        {{ data.general.progression?.dex?.[4] ?? 0 }}
-                    </div>
                     <div>
                         병종 {{ data.general.crewTypeId || '-' }} · 내정특기
                         {{ data.general.traits?.specialDomestic ?? '-' }} · 부상 {{ data.general.injury }} · 부대
                         {{ data.general.troopId || '-' }} · 벌점 {{ penalties.length || '-' }}
                     </div>
+                    <LegacyGeneralProgress :general="data.general" />
                 </div>
             </div>
 
@@ -791,10 +785,9 @@ button:disabled {
 .legacy-general-details > div {
     border-top: 1px solid #557;
 }
-.dexterity-title {
-    background: #14241b var(--sammo-texture-green);
-}
 .legacy-credit {
+    max-width: 100%;
+    overflow: hidden;
     white-space: nowrap;
 }
 dl {

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

@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router';
 
 import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
 import { trpc } from '../utils/trpc';
+import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
 
 type TroopList = Awaited<ReturnType<typeof trpc.troop.getList.query>>;
 type Troop = TroopList['troops'][number];
@@ -347,8 +348,11 @@ onMounted(() => {
             <div></div>
         </footer>
         <div v-if="popupMember" id="generalPopup" :style="{ top: `${popupTop}px` }" role="tooltip">
-            <strong>{{ popupMember.name }}</strong>
-            <span>{{ popupMember.cityName }}</span>
+            <div class="popup-title">
+                <strong>{{ popupMember.name }}</strong>
+                <span>{{ popupMember.cityName }}</span>
+            </div>
+            <LegacyGeneralProgress :general="popupMember" />
         </div>
     </main>
 </template>
@@ -420,13 +424,19 @@ onMounted(() => {
     z-index: 10;
     width: 500px;
     min-height: 58px;
-    padding: 8px;
+    padding: 0;
     display: flex;
     flex-direction: column;
     border: 1px solid #999;
     background: #202020;
 }
 
+.popup-title {
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 6px;
+}
+
 .additionalTroopOptions {
     margin-top: 1em;
 }