fix: 공개 지도 미리보기 정보를 간결하게 정리

서버 탭 아래 중복 이름과 내부 지도 테마명을 제거하고 런타임 상태를 하단 요약으로 옮긴다. 연월은 레거시 지도 제목과 같은 20px 중앙 띠로 표시하고 데스크톱·모바일 Chromium 검증을 보강한다.
This commit is contained in:
2026-08-17 16:04:33 +00:00
parent 919c48f023
commit aa66f2701d
3 changed files with 88 additions and 24 deletions
@@ -276,8 +276,7 @@ const stateClass = (state: number): string => {
<template>
<div class="map-preview" :class="`map-preview-${props.mode}`">
<div class="map-preview-header">
<span class="map-preview-title">{{ props.mapLayout.mapName }}</span>
<div class="map-preview-date-bar">
<span class="map-preview-date">{{ props.mapData.year }} {{ props.mapData.month }}</span>
</div>
<div ref="mapBody" class="map-preview-body" :style="{ backgroundImage: `url('${mapBackground}')` }">
@@ -358,18 +357,22 @@ const stateClass = (state: number): string => {
width: min(100%, 700px);
margin-inline: auto;
flex-direction: column;
gap: 6px;
}
.map-preview-header {
.map-preview-date-bar {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
color: rgba(232, 221, 196, 0.7);
height: 20px;
justify-content: center;
background: #000;
color: rgba(232, 221, 196, 0.82);
}
.map-preview-title {
font-weight: 600;
.map-preview-date {
display: block;
width: 160px;
font-size: 14px;
line-height: 20px;
text-align: center;
}
.map-preview-body {
+31 -11
View File
@@ -700,12 +700,6 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
class="map-preview-panel"
data-testid="public-map-preview-panel"
>
<div class="flex items-center justify-between text-xs text-zinc-400 mb-2">
<span class="font-semibold" :style="{ color: selectedMapProfile.color }">
{{ selectedMapProfile.korName }}섭
</span>
<span>{{ selectedMapProfile.status }}</span>
</div>
<div v-if="selectedMapPreview">
<MapPreview
:map-data="selectedMapPreview.mapData"
@@ -714,12 +708,18 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
/>
<div
v-if="profileDetails[selectedMapProfile.profileName]"
class="text-xs text-zinc-400 mt-2"
class="map-preview-summary"
data-testid="public-map-preview-summary"
>
유저 {{ profileDetails[selectedMapProfile.profileName]?.userCnt ?? '-' }} /
{{ profileDetails[selectedMapProfile.profileName]?.maxUserCnt ?? '-' }} ·
{{ profileDetails[selectedMapProfile.profileName]?.nationCnt ?? '-' }}국 ·
{{ profileDetails[selectedMapProfile.profileName]?.turnTerm ?? '-' }}분 턴
<span class="map-preview-runtime-status" :style="{ color: selectedMapProfile.color }">
{{ selectedMapProfile.status }}
</span>
<span>
유저 {{ profileDetails[selectedMapProfile.profileName]?.userCnt ?? '-' }} /
{{ profileDetails[selectedMapProfile.profileName]?.maxUserCnt ?? '-' }}
</span>
<span>{{ profileDetails[selectedMapProfile.profileName]?.nationCnt ?? '-' }}국</span>
<span>{{ profileDetails[selectedMapProfile.profileName]?.turnTerm ?? '-' }}분 턴</span>
</div>
</div>
<div v-else class="text-xs text-zinc-500 py-8 text-center">지도를 불러오는 중...</div>
@@ -832,6 +832,26 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
padding: 12px;
}
.map-preview-summary {
display: flex;
flex-wrap: wrap;
gap: 2px 0;
margin-top: 8px;
color: #a1a1aa;
font-size: 12px;
line-height: 18px;
}
.map-preview-summary > span + span::before {
margin-inline: 6px;
color: #52525b;
content: '·';
}
.map-preview-runtime-status {
font-weight: 600;
}
.legacy-logout-button:hover,
.legacy-logout-button:focus,
.legacy-logout-button:active {