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

merge: 최신 main을 도시정보 명령 요약에 통합한다

Browse Source
This commit is contained in:
Hide_D
2026-08-21 16:33:59 +00:00
parent 80f77c75cb 3df7e05030
commit a4dbe9bfe9
2 changed files with 193 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/inGameInfo.spec.ts
+75 -12
View File
@@ -517,6 +517,27 @@ test('map keeps desktop hover navigation and lets touch users choose one-tap or
await page.setViewportSize({ width: 1200, height: 900 });
await go(page, 'global-info');
const desktopOptionsTrigger = page.getByRole('button', { name: '지도 옵션' });
await expect(desktopOptionsTrigger).toBeVisible();
await expect(desktopOptionsTrigger).toHaveAttribute('aria-expanded', 'false');
await expect(desktopOptionsTrigger).toHaveCSS('background-color', 'rgb(52, 92, 133)');
await desktopOptionsTrigger.hover();
await expect(desktopOptionsTrigger).toHaveCSS('background-color', 'rgb(40, 73, 105)');
await expect(page.getByRole('button', { name: '도시명 표기 끄기' })).not.toBeVisible();
await desktopOptionsTrigger.click();
const cityNameToggle = page.getByRole('button', { name: '도시명 표기 끄기' });
await expect(cityNameToggle).toBeVisible();
await expect(desktopOptionsTrigger).toHaveAttribute('aria-expanded', 'true');
await expect(page.locator('.map-options-menu .map-toggle')).toHaveCount(1);
await page.keyboard.press('Tab');
await desktopOptionsTrigger.focus();
await expect(desktopOptionsTrigger).toHaveCSS('outline-style', 'solid');
await page.screenshot({ path: testInfo.outputPath('desktop-map-options-open.png'), fullPage: true });
await cityNameToggle.click();
await expect(page.locator('.map-area .city-name')).toHaveCount(0);
await page.keyboard.press('Escape');
await expect(desktopOptionsTrigger).toHaveAttribute('aria-expanded', 'false');
const desktopCity = page.locator('.city-base').first();
await expect(page.locator('.map-toggle-single-tap')).toHaveCount(0);
await desktopCity.hover();
@@ -550,20 +571,48 @@ test('map keeps desktop hover navigation and lets touch users choose one-tap or
await install(mobilePage);
await go(mobilePage, 'global-info');
const mobileOptionsTrigger = mobilePage.getByRole('button', { name: '지도 옵션' });
await expect(mobileOptionsTrigger).toBeVisible();
await expect(mobileOptionsTrigger).toHaveAttribute('aria-expanded', 'false');
await mobileOptionsTrigger.tap();
await expect(mobileOptionsTrigger).toHaveAttribute('aria-expanded', 'true');
await expect(mobilePage.locator('.map-options-menu .map-toggle')).toHaveCount(2);
const twoTapButton = mobilePage.getByRole('button', { name: '두번 탭 해 도시 이동 끄기' });
await expect(twoTapButton).toBeVisible();
await expect(twoTapButton).toHaveAttribute('aria-pressed', 'false');
const controlGeometry = await twoTapButton.evaluate((element) => {
const rect = element.getBoundingClientRect();
const controlGeometry = await mobilePage.locator('.map-controls').evaluate((element) => {
const triggerRect = element.querySelector('.map-options-trigger')!.getBoundingClientRect();
const menuRect = element.querySelector('.map-options-menu')!.getBoundingClientRect();
const optionRects = Array.from(element.querySelectorAll('.map-options-menu .map-toggle')).map((option) => {
const rect = option.getBoundingClientRect();
return { top: rect.top, bottom: rect.bottom };
});
const mapRect = element.closest('.map-area')?.getBoundingClientRect();
const style = getComputedStyle(element);
const optionStyle = getComputedStyle(element.querySelector('.map-toggle')!);
return {
right: rect.right,
bottom: rect.bottom,
mapRight: mapRect?.right,
mapBottom: mapRect?.bottom,
fontSize: style.fontSize,
lineHeight: style.lineHeight,
trigger: {
right: triggerRect.right,
bottom: triggerRect.bottom,
top: triggerRect.top,
},
menu: {
left: menuRect.left,
right: menuRect.right,
top: menuRect.top,
bottom: menuRect.bottom,
},
optionRects,
map: mapRect
? {
left: mapRect.left,
right: mapRect.right,
top: mapRect.top,
bottom: mapRect.bottom,
}
: null,
fontSize: optionStyle.fontSize,
lineHeight: optionStyle.lineHeight,
documentWidth: document.documentElement.scrollWidth,
viewportWidth: document.documentElement.clientWidth,
overflowing: Array.from(document.querySelectorAll<HTMLElement>('body *'))
@@ -585,8 +634,20 @@ test('map keeps desktop hover navigation and lets touch users choose one-tap or
overflowing: [],
});
expect(controlGeometry.documentWidth).toBeLessThanOrEqual(controlGeometry.viewportWidth + 1);
expect(controlGeometry.mapRight! - controlGeometry.right).toBeCloseTo(4, 1);
expect(controlGeometry.mapBottom! - controlGeometry.bottom).toBeCloseTo(4, 1);
expect(controlGeometry.map).not.toBeNull();
expect(controlGeometry.map!.right - controlGeometry.trigger.right).toBeCloseTo(4, 1);
expect(controlGeometry.map!.bottom - controlGeometry.trigger.bottom).toBeCloseTo(4, 1);
expect(controlGeometry.menu.left).toBeGreaterThanOrEqual(controlGeometry.map!.left);
expect(controlGeometry.menu.right).toBeLessThanOrEqual(controlGeometry.map!.right);
expect(controlGeometry.menu.top).toBeGreaterThanOrEqual(controlGeometry.map!.top);
expect(controlGeometry.menu.bottom).toBeLessThan(controlGeometry.trigger.top);
expect(controlGeometry.optionRects).toHaveLength(2);
expect(controlGeometry.optionRects[0]!.bottom).toBeLessThanOrEqual(controlGeometry.optionRects[1]!.top);
expect(controlGeometry.optionRects[1]!.bottom).toBeLessThanOrEqual(controlGeometry.menu.bottom);
await mobilePage.screenshot({ path: testInfo.outputPath('mobile-map-options-open.png'), fullPage: true });
await mobilePage.locator('.map-area').tap({ position: { x: 10, y: 10 } });
await expect(mobileOptionsTrigger).toHaveAttribute('aria-expanded', 'false');
const mobileCities = mobilePage.locator('.city-base');
await mobileCities.nth(0).tap();
@@ -602,17 +663,19 @@ test('map keeps desktop hover navigation and lets touch users choose one-tap or
await expect(mobilePage).toHaveURL(/\/current-city\?cityId=2$/u);
await go(mobilePage, 'global-info');
await mobilePage.getByRole('button', { name: '지도 옵션' }).tap();
await mobilePage.getByRole('button', { name: '두번 탭 해 도시 이동 끄기' }).click();
const singleTapButton = mobilePage.getByRole('button', { name: '두번 탭 해 도시 이동 켜기' });
await expect(singleTapButton).toHaveAttribute('aria-pressed', 'true');
expect(await mobilePage.evaluate(() => localStorage.getItem('sam.toggleSingleTap'))).toBe('yes');
await mobilePage.reload();
await expect(singleTapButton).toBeVisible();
await expect(singleTapButton).not.toBeVisible();
await mobilePage.locator('.city-base').nth(2).tap();
await expect(mobilePage).toHaveURL(/\/current-city\?cityId=3$/u);
await go(mobilePage, 'global-info');
await mobilePage.getByRole('button', { name: '지도 옵션' }).tap();
await mobilePage.getByRole('button', { name: '두번 탭 해 도시 이동 켜기' }).click();
expect(await mobilePage.evaluate(() => localStorage.getItem('sam.toggleSingleTap'))).toBe('no');
await mobilePage.locator('.city-base').first().tap();
app/game-frontend/src/components/main/MapViewer.vue
+118 -17
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed, ref, useId } from 'vue';
import { storeToRefs } from 'pinia';
import { useElementSize, useMediaQuery, useMouseInElement } from '@vueuse/core';
import { onClickOutside, useElementSize, useMediaQuery, useMouseInElement } from '@vueuse/core';
import SkeletonLines from '../ui/SkeletonLines.vue';
import MapCityBasic from './MapCityBasic.vue';
import MapCityDetail from './MapCityDetail.vue';
@@ -104,6 +104,9 @@ const hasTouchInput = useMediaQuery('(any-pointer: coarse)');
const mapArea = ref<HTMLElement | null>(null);
const mapBody = ref<HTMLElement | null>(null);
const mapControls = ref<HTMLElement | null>(null);
const mapOptionsOpen = ref(false);
const mapOptionsMenuId = `map-options-${useId()}`;
const { width: mapBodyWidth } = useElementSize(mapBody);
const { elementX, elementY } = useMouseInElement(mapArea);
@@ -416,6 +419,16 @@ const clearTouchPreview = () => {
setHoveredCity(null);
};
const closeMapOptions = () => {
mapOptionsOpen.value = false;
};
const toggleMapOptions = () => {
mapOptionsOpen.value = !mapOptionsOpen.value;
};
onClickOutside(mapControls, closeMapOptions);
const touchCity = (cityId: number, event: TouchEvent) => {
if (touchPreviewCityId.value !== cityId) {
touchPreviewCityId.value = cityId;
@@ -460,7 +473,10 @@ const selectCity = (cityId: number) => {
class="map-area"
:class="[mapThemeClass, mapSeasonClass]"
:style="{ width: mapWidth, height: mapHeight }"
@click="clearTouchPreview"
@click="
clearTouchPreview();
closeMapOptions();
"
>
<div class="map-layer map-bglayer1" :style="mapBackgroundStyle" />
<div class="map-layer map-bglayer2" />
@@ -495,18 +511,43 @@ const selectCity = (cityId: number) => {
<div class="tooltip-title">{{ hoveredCityTitle }}</div>
<div class="tooltip-body">{{ hoveredCity.nationId > 0 ? hoveredCity.nationName : '' }}</div>
</div>
<div class="map-controls">
<button class="map-toggle" :class="{ active: showCityName }" @click.stop="mapStore.toggleCityName">
도시명 표기 {{ showCityName ? '끄기' : '켜기' }}
</button>
<button
v-if="hasTouchInput && !isSelectionMap && !props.readonly"
class="map-toggle map-toggle-single-tap"
:class="{ active: singleTapNavigation }"
:aria-pressed="singleTapNavigation"
@click.stop="toggleSingleTapNavigation"
<div ref="mapControls" class="map-controls" @keydown.esc.stop="closeMapOptions">
<div
v-show="mapOptionsOpen"
:id="mapOptionsMenuId"
class="map-options-menu"
role="group"
aria-label="지도 옵션 메뉴"
@click.stop
>
두번 탭 해 도시 이동 {{ singleTapNavigation ? '켜기' : '끄기' }}
<button
class="map-toggle"
:class="{ active: showCityName }"
:aria-pressed="showCityName"
@click="mapStore.toggleCityName"
>
도시명 표기 {{ showCityName ? '끄기' : '켜기' }}
</button>
<button
v-if="hasTouchInput && !isSelectionMap && !props.readonly"
class="map-toggle map-toggle-single-tap"
:class="{ active: singleTapNavigation }"
:aria-pressed="singleTapNavigation"
@click="toggleSingleTapNavigation"
>
두번 탭 해 도시 이동 {{ singleTapNavigation ? '켜기' : '끄기' }}
</button>
</div>
<button
type="button"
class="map-options-trigger"
aria-label="지도 옵션"
title="지도 옵션"
:aria-controls="mapOptionsMenuId"
:aria-expanded="mapOptionsOpen"
@click.stop="toggleMapOptions"
>
<span aria-hidden="true">⚙</span>
</button>
</div>
</div>
@@ -591,14 +632,68 @@ const selectCity = (cityId: number) => {
.map-controls {
position: absolute;
z-index: 4;
right: 4px;
bottom: 4px;
inset: 4px;
pointer-events: none;
}
.map-options-trigger {
position: absolute;
right: 0;
bottom: 0;
display: grid;
box-sizing: border-box;
width: 30px;
height: 28px;
place-items: center;
border: 1px solid #6c757d;
border-radius: 2px;
padding: 0;
background: #345c85;
color: #fff;
cursor: pointer;
font-size: 17px;
line-height: 1;
pointer-events: auto;
}
.map-options-trigger:hover,
.map-options-trigger:focus-visible,
.map-options-trigger[aria-expanded='true'] {
border-color: #b7cadc;
background: #284969;
}
.map-options-trigger:active {
background: #1f3a54;
}
.map-options-trigger:focus-visible {
outline: 2px solid #fff;
outline-offset: 1px;
}
.map-options-menu {
position: absolute;
right: 0;
bottom: 32px;
display: flex;
max-width: 100%;
max-height: calc(100% - 32px);
flex-direction: column;
align-items: flex-end;
align-items: stretch;
overflow-y: auto;
border: 1px solid #6c757d;
border-radius: 2px;
padding: 3px;
background: rgba(11, 11, 11, 0.94);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
pointer-events: auto;
}
.map-toggle {
box-sizing: border-box;
width: max-content;
max-width: 100%;
border: 1px solid #6c757d;
border-radius: 2px;
padding: 3px 7px;
@@ -607,6 +702,12 @@ const selectCity = (cityId: number) => {
font-size: 11px;
line-height: 18px;
cursor: pointer;
text-align: left;
white-space: nowrap;
}
.map-toggle + .map-toggle {
margin-top: 3px;
}
.map-toggle.active {