fix(game-ui): 명장일람 보기 전환을 버튼으로 표시

유저 보기와 NPC 보기 입력을 기존 명장일람 버튼 스타일에 연결한다. 실제 Chromium 회귀에서 닫기 버튼과의 스타일 일치 및 데스크톱·모바일 상호작용을 확인한다.

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

@@ -87,8 +87,20 @@ watch(viewMode, () => {
         </div>
 
         <div class="view-selector" role="group" aria-label="장수 유형">
-            <input type="button" value="유저 보기" :aria-pressed="viewMode === 'user'" @click="viewMode = 'user'" />
+            <input
-            <input type="button" value="NPC 보기" :aria-pressed="viewMode === 'npc'" @click="viewMode = 'npc'" />
+                class="legacy-button"
+                type="button"
+                value="유저 보기"
+                :aria-pressed="viewMode === 'user'"
+                @click="viewMode = 'user'"
+            />
+            <input
+                class="legacy-button"
+                type="button"
+                value="NPC 보기"
+                :aria-pressed="viewMode === 'npc'"
+                @click="viewMode = 'npc'"
+            />
         </div>
 
         <div v-if="errorMessage" class="legacy-message error" role="alert">{{ errorMessage }}</div>

tools/frontend-legacy-parity/visual-parity.spec.ts

@@ -720,7 +720,37 @@ test.describe('best general legacy parity', () => {
             expect(geometry.image).toMatchObject({ width: 64, height: 64, objectFit: 'fill' });
             expect(geometry.image.naturalWidth).toBeGreaterThan(0);
 
+            const userButton = page.getByRole('button', { name: '유저 보기' });
             const npcButton = page.getByRole('button', { name: 'NPC 보기' });
+            await expect(userButton).toHaveClass('legacy-button');
+            await expect(npcButton).toHaveClass('legacy-button');
+            await expect(userButton).toHaveCSS('background-color', 'rgb(55, 90, 127)');
+            await expect(npcButton).toHaveCSS('background-color', 'rgb(55, 90, 127)');
+            const selectorAppearance = await page.evaluate(() => {
+                const summarize = (element: Element) => {
+                    const style = getComputedStyle(element);
+                    return {
+                        backgroundColor: style.backgroundColor,
+                        borderRadius: style.borderRadius,
+                        fontWeight: style.fontWeight,
+                        lineHeight: style.lineHeight,
+                        padding: style.padding,
+                    };
+                };
+                const closeButton = document.querySelector('.legacy-ranking-title .legacy-button')!;
+                const selectorButtons = document.querySelectorAll('.view-selector .legacy-button');
+                const firstRect = selectorButtons[0]!.getBoundingClientRect();
+                const secondRect = selectorButtons[1]!.getBoundingClientRect();
+                return {
+                    closeButton: summarize(closeButton),
+                    userButton: summarize(selectorButtons[0]!),
+                    npcButton: summarize(selectorButtons[1]!),
+                    gap: secondRect.left - firstRect.right,
+                };
+            });
+            expect(selectorAppearance.userButton).toEqual(selectorAppearance.closeButton);
+            expect(selectorAppearance.npcButton).toEqual(selectorAppearance.closeButton);
+            expect(selectorAppearance.gap).toBe(4);
             const npcButtonBox = await npcButton.boundingBox();
             expect(npcButtonBox).not.toBeNull();
             await page.mouse.move(