Structure legacy-compatible frontend CSS

This commit is contained in:
2026-07-27 11:13:54 +00:00
parent 1509a39d26
commit ab6f4129a9
38 changed files with 466 additions and 366 deletions
+12 -60
View File
@@ -97,24 +97,24 @@ onMounted(() => {
</script>
<template>
<main class="public-page">
<header class="page-header">
<main class="game-shell public-page">
<header class="game-shell__header">
<div>
<h1 class="page-title">공개 동향</h1>
<p class="page-subtitle">{{ trendSummary }}</p>
<h1 class="game-shell__title">공개 동향</h1>
<p class="game-shell__subtitle">{{ trendSummary }}</p>
<p class="page-hint">지도/정세는 10분 캐시된 정보로 제공됩니다.</p>
</div>
<div class="header-actions">
<RouterLink v-if="!session.isAuthed" class="ghost" to="/login">로그인</RouterLink>
<RouterLink v-else-if="session.needsGeneral" class="ghost" to="/join">장수 생성/빙의</RouterLink>
<RouterLink v-else class="ghost" to="/">메인으로</RouterLink>
<RouterLink class="ghost" to="/npc-list">빙의일람</RouterLink>
<RouterLink class="ghost" to="/traffic">접속량정보</RouterLink>
<button class="ghost" @click="refreshPublicData">새로고침</button>
<div class="game-shell__actions">
<RouterLink v-if="!session.isAuthed" class="game-shell__action" to="/login">로그인</RouterLink>
<RouterLink v-else-if="session.needsGeneral" class="game-shell__action" to="/join">장수 생성/빙의</RouterLink>
<RouterLink v-else class="game-shell__action" to="/">메인으로</RouterLink>
<RouterLink class="game-shell__action" to="/npc-list">빙의일람</RouterLink>
<RouterLink class="game-shell__action" to="/traffic">접속량정보</RouterLink>
<button class="game-shell__action" @click="refreshPublicData">새로고침</button>
</div>
</header>
<div v-if="error" class="error">{{ error }}</div>
<div v-if="error" class="game-feedback game-feedback--error" role="alert">{{ error }}</div>
<section v-if="isMobile" class="layout-mobile">
<PanelCard title="캐시 지도">
@@ -256,60 +256,12 @@ onMounted(() => {
</template>
<style scoped>
.public-page {
min-height: 100vh;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.page-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid rgba(201, 164, 90, 0.4);
padding-bottom: 12px;
}
.page-title {
font-size: 1.6rem;
font-weight: 600;
}
.page-subtitle {
font-size: 0.85rem;
color: rgba(232, 221, 196, 0.7);
}
.page-hint {
margin-top: 6px;
font-size: 0.75rem;
color: rgba(232, 221, 196, 0.5);
}
.header-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ghost {
border: 1px solid rgba(201, 164, 90, 0.4);
padding: 6px 12px;
font-size: 0.8rem;
cursor: pointer;
text-decoration: none;
color: inherit;
background: rgba(16, 16, 16, 0.6);
}
.error {
color: #f5b7b1;
font-size: 0.85rem;
}
.layout-desktop {
display: grid;
grid-template-columns: minmax(320px, 1.3fr) minmax(320px, 1fr);