토너먼트 대진 장수에 능력치와 배당 표시

app/game-frontend/src/components/tournament/TournamentBracket.vue

@@ -81,7 +81,7 @@ const connections = computed(() =>
 );
 
 const odds = (id: number | null) => {
-    if (id === null) return '0';
+    if (id === null || props.betTotals === undefined) return '-';
     const amount = props.betTotals?.[id] ?? 0;
     if (!amount) return '∞';
     return (props.totalBet / amount).toFixed(2);
@@ -158,11 +158,19 @@ const mobilePairs = computed(() => {
                         }"
                     >
                         <GeneralIdentity
+                            class="bracket-info-identity"
                             :name="slot.name"
                             :picture="slot.picture"
                             :image-server="slot.imageServer"
                             :npc-state="slot.npcState"
-                        />
+                        >
+                            <template v-if="slot.id !== null" #details>
+                                <span v-if="coreStat(slot)" class="bracket-core-stat">
+                                    {{ coreStat(slot)?.label }} {{ coreStat(slot)?.value }}
+                                </span>
+                                <span class="bracket-odds">배당 {{ odds(slot.id) }}</span>
+                            </template>
+                        </GeneralIdentity>
                         <slot
                             v-if="columnIndex === 0 && bettingOpen && slot.id !== null"
                             name="bet-controls"
@@ -210,16 +218,22 @@ const mobilePairs = computed(() => {
                         :data-general-id="slot.id ?? undefined"
                     >
                         <GeneralIdentity
-                            :class="{ 'bracket-candidate-identity': activeMobileRound === 0 && bettingMode }"
+                            :class="{
+                                'bracket-candidate-identity': activeMobileRound === 0 && bettingMode,
+                                'bracket-info-identity': !bettingMode || activeMobileRound !== 0,
+                            }"
                             :name="slot.name"
                             :picture="slot.picture"
                             :image-server="slot.imageServer"
                             :npc-state="slot.npcState"
                         >
-                            <template v-if="activeMobileRound === 0 && bettingMode" #details>
+                            <template v-if="slot.id !== null" #details>
                                 <span v-if="coreStat(slot)" class="bracket-core-stat">
                                     {{ coreStat(slot)?.label }} {{ coreStat(slot)?.value }}
                                 </span>
+                                <span v-if="!bettingMode || activeMobileRound !== 0" class="bracket-odds">
+                                    배당 {{ odds(slot.id) }}
+                                </span>
                             </template>
                         </GeneralIdentity>
                         <div v-if="activeMobileRound === 0 && bettingMode" class="bracket-bet-summary">
@@ -496,4 +510,16 @@ const mobilePairs = computed(() => {
         gap: 10px 18px;
     }
 }
+.bracket-info-identity :deep(.general-identity-name) {
+    font-size: 16px;
+    line-height: 18px;
+}
+.bracket-info-identity :deep(.general-identity-details) {
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    line-height: 18px;
+    text-align: left;
+    overflow-wrap: anywhere;
+}
 </style>

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

@@ -13,7 +13,7 @@ import { trpc } from '../utils/trpc';
 import { resolveTournamentSectionVisibility, resolveTournamentStageName } from '../utils/tournamentStatus';
 
 const tournamentPages = useTournamentPagesStore();
-const { snapshot, loading, error } = storeToRefs(tournamentPages);
+const { snapshot, betting, loading, error } = storeToRefs(tournamentPages);
 type Snapshot = NonNullable<typeof snapshot.value>;
 const myGeneralId = ref(0);
 const adminEnabled = ref(false);
@@ -229,6 +229,8 @@ const start = async () => {
                 :matches="snapshot?.matches ?? []"
                 :winner-id="snapshot?.state?.winnerId"
                 :tournament-type="snapshot?.state?.type ?? 0"
+                :bet-totals="betting?.totals"
+                :total-bet="betting?.totalAmount ?? 0"
             />
 
             <section v-if="currentMatch" class="fight bg0" aria-label="현재 토너먼트 전투 로그">