feat: complete legacy game screen parity

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

@@ -21,6 +21,11 @@ interface GeneralInfo {
     injury: number;
     experience: number;
     dedication: number;
+    age?: number;
+    turnTime?: string;
+    crewTypeId?: number;
+    traits?: { personal: string; specialWar: string; specialDomestic: string };
+    progression?: { experienceLevel: number; dedicationLevel: number; dex: number[] };
 }
 
 const props = defineProps<{
@@ -36,61 +41,71 @@ const props = defineProps<{
         </div>
         <div v-else-if="!props.general" class="empty">장수 정보를 불러오지 못했습니다.</div>
         <div v-else class="general-body">
-            <div class="general-header">
-                <span class="name">{{ props.general.name }}</span>
-                <span class="meta">ID {{ props.general.id }} · 관직 {{ props.general.officerLevel }}</span>
+            <div class="general-title">
+                {{ props.general.name }} · 관직 {{ props.general.officerLevel }} · {{ props.general.age ?? '-' }}세
             </div>
-            <div class="stats">
-                <div>통솔 {{ props.general.stats.leadership }}</div>
-                <div>무력 {{ props.general.stats.strength }}</div>
-                <div>지력 {{ props.general.stats.intelligence }}</div>
-            </div>
-            <div class="resources">
-                <div>금 {{ props.general.gold }}</div>
-                <div>쌀 {{ props.general.rice }}</div>
-                <div>병 {{ props.general.crew }}</div>
-            </div>
-            <div class="status">
-                <div>훈련 {{ props.general.train }}</div>
-                <div>사기 {{ props.general.atmos }}</div>
-                <div>부상 {{ props.general.injury }}</div>
-                <div>경험 {{ props.general.experience }}</div>
-                <div>공헌 {{ props.general.dedication }}</div>
+            <div class="legacy-grid">
+                <span>통솔</span><strong>{{ props.general.stats.leadership }}</strong> <span>무력</span
+                ><strong>{{ props.general.stats.strength }}</strong> <span>지력</span
+                ><strong>{{ props.general.stats.intelligence }}</strong> <span>자금</span
+                ><strong>{{ props.general.gold.toLocaleString() }}</strong> <span>군량</span
+                ><strong>{{ props.general.rice.toLocaleString() }}</strong> <span>병력</span
+                ><strong>{{ props.general.crew.toLocaleString() }}</strong> <span>훈련</span
+                ><strong>{{ props.general.train }}</strong> <span>사기</span><strong>{{ props.general.atmos }}</strong>
+                <span>부상</span><strong>{{ props.general.injury }}</strong> <span>명망</span
+                ><strong
+                    >Lv {{ props.general.progression?.experienceLevel ?? 0 }} ({{ props.general.experience }})</strong
+                >
+                <span>계급</span
+                ><strong
+                    >Lv {{ props.general.progression?.dedicationLevel ?? 0 }} ({{ props.general.dedication }})</strong
+                >
+                <span>병종</span><strong>{{ props.general.crewTypeId || '-' }}</strong> <span>성격</span
+                ><strong>{{ props.general.traits?.personal ?? '-' }}</strong> <span>전투특기</span
+                ><strong>{{ props.general.traits?.specialWar ?? '-' }}</strong> <span>내정특기</span
+                ><strong>{{ props.general.traits?.specialDomestic ?? '-' }}</strong> <span>다음 턴</span
+                ><strong>{{ props.general.turnTime?.slice(11, 16) ?? '-' }}</strong>
             </div>
+            <div class="dex">숙련도 {{ props.general.progression?.dex?.join(' / ') ?? '0 / 0 / 0 / 0 / 0' }}</div>
         </div>
     </div>
 </template>
 
 <style scoped>
-.general-card {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+.general-title {
+    min-height: 24px;
+    padding: 2px 6px;
+    border-bottom: 1px solid #777;
+    background: #173d27;
+    text-align: center;
+    font-weight: 700;
 }
-
-.general-header {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.general-header .name {
-    font-size: 1.1rem;
-    font-weight: 600;
-}
-
-.general-header .meta {
-    font-size: 0.75rem;
-    color: rgba(232, 221, 196, 0.7);
-}
-
-.stats,
-.resources,
-.status {
+.legacy-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
-    gap: 6px;
-    font-size: 0.85rem;
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    font-size: 12px;
+}
+.legacy-grid > * {
+    min-height: 22px;
+    box-sizing: border-box;
+    border-right: 1px solid #666;
+    border-bottom: 1px solid #666;
+    padding: 2px 4px;
+    overflow: hidden;
+    white-space: nowrap;
+}
+.legacy-grid > span {
+    background: rgb(20 75 42 / 70%);
+    text-align: center;
+}
+.legacy-grid > strong {
+    text-align: right;
+    font-weight: 400;
+}
+.dex {
+    padding: 3px 6px;
+    font-size: 12px;
+    color: #ddd;
 }
 
 .empty {