From d03d0f7957342d170b2f50c92d26126ce7af3c1c Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Thu, 20 Aug 2026 15:32:45 +0000
Subject: [PATCH] =?UTF-8?q?fix(game-ui):=20=EB=AA=85=EC=9E=A5=EC=9D=BC?=
 =?UTF-8?q?=EB=9E=8C=20=EB=B3=B4=EA=B8=B0=20=EC=A0=84=ED=99=98=EC=9D=84=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9C=BC=EB=A1=9C=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

유저 보기와 NPC 보기 입력을 기존 명장일람 버튼 스타일에 연결한다. 실제 Chromium 회귀에서 닫기 버튼과의 스타일 일치 및 데스크톱·모바일 상호작용을 확인한다.
---
 .../src/views/BestGeneralView.vue             | 16 ++++++++--
 .../visual-parity.spec.ts                     | 30 +++++++++++++++++++
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/app/game-frontend/src/views/BestGeneralView.vue b/app/game-frontend/src/views/BestGeneralView.vue
index 434f2d65..56d652cc 100644
--- a/app/game-frontend/src/views/BestGeneralView.vue
+++ b/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 type="button" value="NPC 보기" :aria-pressed="viewMode === 'npc'" @click="viewMode = 'npc'" />
+            <input
+                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>
diff --git a/tools/frontend-legacy-parity/visual-parity.spec.ts b/tools/frontend-legacy-parity/visual-parity.spec.ts
index 3f2c16e5..04aa5448 100644
--- a/tools/frontend-legacy-parity/visual-parity.spec.ts
+++ b/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(