From 40e23b0c441c7ee5ee05a712ae3d79e3fa46ea75 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Sat, 15 Aug 2026 18:19:51 +0000
Subject: [PATCH] =?UTF-8?q?fix(game-ui):=20=EB=8A=A5=EB=A0=A5=EC=B9=98=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=88=8C=EB=A6=BC=20=EA=B9=8A=EC=9D=B4?=
 =?UTF-8?q?=EB=A5=BC=20Ref=EC=99=80=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

장수 생성 빠른 설정 버튼에 공통 navigation 버튼의 어두운 옆면과 상태별 눌림 깊이를 적용한다. 실제 Chromium 검증에 border 색과 폭, 위치와 높이 회귀를 추가한다.
---
 app/game-frontend/e2e/joinLayout.spec.ts | 59 +++++++++++++++++++++---
 app/game-frontend/src/views/JoinView.vue | 43 ++++++++++-------
 2 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/app/game-frontend/e2e/joinLayout.spec.ts b/app/game-frontend/e2e/joinLayout.spec.ts
index 337fe9b9..0df9167b 100644
--- a/app/game-frontend/e2e/joinLayout.spec.ts
+++ b/app/game-frontend/e2e/joinLayout.spec.ts
@@ -179,26 +179,54 @@ test('prioritizes core general fields and keeps context and inheritance progress
         const rect = element.getBoundingClientRect();
         const style = getComputedStyle(element);
         return {
+            top: rect.top,
             height: rect.height,
             backgroundColor: style.backgroundColor,
             color: style.color,
+            borderTopWidth: style.borderTopWidth,
+            borderRightWidth: style.borderRightWidth,
+            borderBottomWidth: style.borderBottomWidth,
+            borderBottomColor: style.borderBottomColor,
+            marginTop: style.marginTop,
             fontSize: style.fontSize,
             fontWeight: style.fontWeight,
             cursor: style.cursor,
         };
     });
-    expect(defaultButtonStyle).toEqual({
+    expect(defaultButtonStyle).toMatchObject({
         height: 40,
         backgroundColor: 'rgb(0, 88, 44)',
         color: 'rgb(255, 255, 255)',
+        borderTopWidth: '0px',
+        borderRightWidth: '1px',
+        borderBottomWidth: '4px',
+        borderBottomColor: 'rgb(0, 79, 40)',
+        marginTop: '0px',
         fontSize: '14px',
         fontWeight: '700',
         cursor: 'pointer',
     });
     await randomButton.hover();
-    await expect
-        .poll(() => randomButton.evaluate((element) => getComputedStyle(element).backgroundColor))
-        .toBe('rgb(0, 109, 55)');
+    const hoverButtonStyle = await randomButton.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            top: rect.top,
+            height: rect.height,
+            backgroundColor: style.backgroundColor,
+            borderBottomWidth: style.borderBottomWidth,
+            borderBottomColor: style.borderBottomColor,
+            marginTop: style.marginTop,
+        };
+    });
+    expect(hoverButtonStyle).toMatchObject({
+        top: defaultButtonStyle.top + 1,
+        height: 39,
+        backgroundColor: 'rgb(0, 88, 44)',
+        borderBottomWidth: '3px',
+        borderBottomColor: 'rgb(0, 79, 40)',
+        marginTop: '1px',
+    });
     await page.screenshot({ path: testInfo.outputPath('join-stat-actions-hover-desktop.png'), fullPage: true });
     await randomButton.focus();
     await expect(randomButton).toBeFocused();
@@ -210,9 +238,26 @@ test('prioritizes core general fields and keeps context and inheritance progress
         randomButtonBox!.y + randomButtonBox!.height / 2
     );
     await page.mouse.down();
-    await expect
-        .poll(() => randomButton.evaluate((element) => getComputedStyle(element).backgroundColor))
-        .toBe('rgb(0, 69, 35)');
+    const activeButtonStyle = await randomButton.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            top: rect.top,
+            height: rect.height,
+            backgroundColor: style.backgroundColor,
+            borderBottomWidth: style.borderBottomWidth,
+            borderBottomColor: style.borderBottomColor,
+            marginTop: style.marginTop,
+        };
+    });
+    expect(activeButtonStyle).toMatchObject({
+        top: defaultButtonStyle.top + 2,
+        height: 38,
+        backgroundColor: 'rgb(0, 88, 44)',
+        borderBottomWidth: '2px',
+        borderBottomColor: 'rgb(0, 79, 40)',
+        marginTop: '2px',
+    });
     await page.screenshot({ path: testInfo.outputPath('join-stat-actions-active-desktop.png'), fullPage: true });
     await page.mouse.up();
     const setRandomValues = async (values: number[]) => {
diff --git a/app/game-frontend/src/views/JoinView.vue b/app/game-frontend/src/views/JoinView.vue
index 3b7968bf..3f65db42 100644
--- a/app/game-frontend/src/views/JoinView.vue
+++ b/app/game-frontend/src/views/JoinView.vue
@@ -726,10 +726,26 @@ onUnmounted(() => {
                     </div>
 
                     <div class="stat-actions" role="group" aria-label="능력치 빠른 설정">
-                        <button type="button" @click="applyRandomStats">랜덤형</button>
-                        <button type="button" @click="applyLeadpowStats">통솔무력형</button>
-                        <button type="button" @click="applyLeadintStats">통솔지력형</button>
-                        <button type="button" @click="applyPowintStats">무력지력형</button>
+                        <button class="legacy-button legacy-button--navigation" type="button" @click="applyRandomStats">
+                            랜덤형
+                        </button>
+                        <button
+                            class="legacy-button legacy-button--navigation"
+                            type="button"
+                            @click="applyLeadpowStats"
+                        >
+                            통솔무력형
+                        </button>
+                        <button
+                            class="legacy-button legacy-button--navigation"
+                            type="button"
+                            @click="applyLeadintStats"
+                        >
+                            통솔지력형
+                        </button>
+                        <button class="legacy-button legacy-button--navigation" type="button" @click="applyPowintStats">
+                            무력지력형
+                        </button>
                     </div>
 
                     <div v-if="accountIcons.length" class="icon-choice">
@@ -1385,26 +1401,21 @@ onUnmounted(() => {
 
 .stat-actions button {
     flex: 1 1 140px;
+    height: 40px;
     min-height: 40px;
-    border: 1px solid #004f28;
-    border-radius: 3px;
-    background: #00582c;
     padding: 8px 14px;
-    color: #fff;
     font-size: 0.875rem;
-    font-weight: 700;
     line-height: 1.2;
-    cursor: pointer;
 }
 
-.stat-actions button:hover {
-    border-color: #005f30;
-    background: #006d37;
+.stat-actions button:not(:disabled):hover {
+    height: 39px;
+    min-height: 39px;
 }
 
-.stat-actions button:active {
-    border-color: #003d1f;
-    background: #004523;
+.stat-actions button:not(:disabled):active {
+    height: 38px;
+    min-height: 38px;
 }
 
 .stat-summary {