devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(game-ui): 능력치 버튼 눌림 깊이를 Ref와 맞춤

Browse Source 
장수 생성 빠른 설정 버튼에 공통 navigation 버튼의 어두운 옆면과 상태별 눌림 깊이를 적용한다. 실제 Chromium 검증에 border 색과 폭, 위치와 높이 회귀를 추가한다.
This commit is contained in:
Hide_D
2026-08-15 18:19:51 +00:00
parent 0cfedb82dd
commit 40e23b0c44
2 changed files with 79 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/joinLayout.spec.ts
+52 -7
View File
@@ -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[]) => {
app/game-frontend/src/views/JoinView.vue
+27 -16
View File
@@ -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 {