zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

릴리스: v1.3.32 라이트 다크 모드 1차 도입

Browse Source
This commit is contained in:
zenn
2026-04-01 15:25:21 +09:00
parent 3b5e744130
commit 9ad985f7c5
11 changed files with 352 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
frontend/src/App.vue
View File

@@ -26,6 +26,7 @@ const searchQuery = ref('')
const searchPlaceholder = computed(() => (route.name === 'home' ? '게임 템플릿 검색' : '전체 티어표 검색'))
const isCollapsedSearchOpen = ref(false)
const isGuideModalOpen = ref(false)
const themeMode = ref('dark')
const guideStepIndex = ref(0)
const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1440)
provide('rightRailOpen', rightRailOpen)
@@ -125,6 +126,9 @@ const guideSteps = [
const currentGuideStep = computed(() => guideSteps[guideStepIndex.value] || guideSteps[0])
const isGuidePrevDisabled = computed(() => guideStepIndex.value <= 0)
const isGuideNextDisabled = computed(() => guideStepIndex.value >= guideSteps.length - 1)
const isLightTheme = computed(() => themeMode.value === 'light')
const themeToggleLabel = computed(() => (isLightTheme.value ? '다크 모드' : '라이트 모드'))
const showSettingsThemePanel = computed(() => route.name === 'profile')
const showGameHubViewToggle = computed(() => route.name === 'gameHub')
const gameHubViewMode = computed(() => (route.query.view === 'list' ? 'list' : 'grid'))
const leftBottomPrimaryAction = computed(() => {
@@ -240,7 +244,22 @@ function syncViewportWidth() {
viewportWidth.value = window.innerWidth
}
function applyTheme(mode) {
themeMode.value = mode === 'light' ? 'light' : 'dark'
if (typeof document !== 'undefined') document.documentElement.dataset.theme = themeMode.value
if (typeof window !== 'undefined') window.localStorage.setItem('tier-maker:theme', themeMode.value)
}
function toggleTheme() {
applyTheme(isLightTheme.value ? 'dark' : 'light')
}
onMounted(async () => {
if (typeof window !== 'undefined') {
const savedTheme = window.localStorage.getItem('tier-maker:theme')
if (savedTheme === 'light' || savedTheme === 'dark') applyTheme(savedTheme)
else applyTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
}
await auth.refresh()
if (typeof window !== 'undefined') {
syncViewportWidth()
@@ -574,7 +593,17 @@ function submitGlobalSearch() {
<div class="rightRail__content">
<div v-if="usesLocalRightRail" id="local-right-rail-root" class="localRightRailRoot"></div>
<template v-else>
<RightRailAd />
<section v-if="showSettingsThemePanel" class="settingsThemePanel">
<div class="settingsThemePanel__eyebrow">Appearance</div>
<div class="settingsThemePanel__title">테마 설정</div>
<div class="settingsThemePanel__desc">밝은 톤과 어두운 톤 중 원하는 작업 환경으로 전환할 수 있어요.</div>
<label class="toggleSwitch settingsThemePanel__toggle">
<input :checked="isLightTheme" type="checkbox" @change="toggleTheme" />
<span class="toggleSwitch__label">{{ isLightTheme ? '라이트 모드' : '다크 모드' }}</span>
<span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
</label>
</section>
<RightRailAd v-else />
</template>
</div>
<div class="rightRail__bottom">
@@ -607,8 +636,8 @@ function submitGlobalSearch() {
min-height: 100dvh;
display: grid;
grid-template-columns: var(--left-rail-width, 248px) minmax(0, 1fr) var(--right-rail-width, 325px);
background: rgba(14, 14, 14, 0.96);
color: rgba(255, 255, 255, 0.92);
background: var(--theme-shell-bg);
color: var(--theme-text);
transition: grid-template-columns 220ms ease;
}
@@ -619,8 +648,8 @@ function submitGlobalSearch() {
.leftRail,
.rightRail {
min-height: 100dvh;
border-right: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(14, 14, 14, 0.92);
border-right: 1px solid var(--theme-border);
background: var(--theme-rail-bg);
box-sizing: border-box;
min-width: 0;
display: flex;
@@ -630,7 +659,7 @@ function submitGlobalSearch() {
.rightRail {
border-right: 0;
border-left: 1px solid rgba(255, 255, 255, 0.08);
border-left: 1px solid var(--theme-border);
transition:
opacity 220ms ease,
transform 220ms ease,
@@ -654,7 +683,7 @@ function submitGlobalSearch() {
display: flex;
align-items: center;
padding: 0 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--theme-border);
box-sizing: border-box;
}
@@ -713,8 +742,8 @@ function submitGlobalSearch() {
height: 28px;
padding: 0 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--theme-border);
background: var(--theme-pill-bg);
color: rgba(255, 255, 255, 0.72);
cursor: pointer;
display: inline-flex;
@@ -783,7 +812,7 @@ function submitGlobalSearch() {
object-fit: cover;
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);
background: var(--theme-surface-soft-3);
}
.appUserCard__avatar--fallback {
@@ -809,7 +838,7 @@ function submitGlobalSearch() {
.appUserCard__email {
font-size: 12px;
color: rgba(255, 255, 255, 0.56);
color: var(--theme-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -822,8 +851,8 @@ function submitGlobalSearch() {
gap: 10px;
padding: 11px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--theme-border);
background: var(--theme-pill-bg);
color: rgba(255, 255, 255, 0.62);
margin-bottom: 14px;
box-sizing: border-box;
@@ -836,7 +865,7 @@ function submitGlobalSearch() {
max-width: 100%;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.92);
color: var(--theme-text);
outline: none;
font: inherit;
overflow: hidden;
@@ -844,7 +873,7 @@ function submitGlobalSearch() {
}
.searchStub__input::placeholder {
color: rgba(255, 255, 255, 0.42);
color: var(--theme-text-soft);
}
.searchStub__iconButton {
@@ -978,9 +1007,9 @@ function submitGlobalSearch() {
gap: 8px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.92);
border: 1px solid var(--theme-border-strong);
background: var(--theme-surface-soft);
color: var(--theme-text);
text-decoration: none;
box-sizing: border-box;
font-weight: 800;
@@ -998,9 +1027,9 @@ function submitGlobalSearch() {
min-width: 0;
min-height: 0;
box-sizing: border-box;
background: rgba(18, 18, 18, 0.98);
border-left: 1px solid rgba(255, 255, 255, 0.08);
border-right: 1px solid rgba(255, 255, 255, 0.08);
background: var(--theme-main-bg);
border-left: 1px solid var(--theme-border);
border-right: 1px solid var(--theme-border);
}
.appMain--preview {
@@ -1045,13 +1074,13 @@ function submitGlobalSearch() {
.workspaceHead__brandSub {
font-size: 13px;
font-weight: 700;
color: rgba(255, 255, 255, 0.58);
color: var(--theme-text-muted);
text-decoration: none;
transition: color 180ms ease, opacity 180ms ease;
}
.workspaceHead__brandSub:hover {
color: rgba(255, 255, 255, 0.92);
color: var(--theme-text);
}
.workspaceHead__actions {
@@ -1067,7 +1096,7 @@ function submitGlobalSearch() {
gap: 6px;
padding: 4px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
background: var(--theme-surface-soft);
}
.viewToggle .ghostIcon--iconOnly {
@@ -1078,7 +1107,7 @@ function submitGlobalSearch() {
}
.ghostIcon--active {
background: rgba(255, 255, 255, 0.08);
background: var(--theme-surface-soft-3);
}
.workspaceBody {
@@ -1086,7 +1115,7 @@ function submitGlobalSearch() {
padding: 18px 18px 32px;
border: 0;
border-radius: 0;
background: rgba(24, 24, 24, 0.92);
background: var(--theme-workspace-bg);
box-shadow: none;
margin: 0;
}
@@ -1096,7 +1125,7 @@ function submitGlobalSearch() {
padding: 18px 18px 32px;
border: 0;
border-radius: 0;
background: rgba(24, 24, 24, 0.92);
background: var(--theme-workspace-bg);
box-shadow: none;
margin: 0;
}
@@ -1118,13 +1147,105 @@ function submitGlobalSearch() {
padding-top: 12px;
}
.settingsThemePanel {
display: grid;
gap: 10px;
padding: 18px;
border-radius: 22px;
border: 1px solid var(--theme-border);
background: var(--theme-pill-bg);
}
.settingsThemePanel__eyebrow {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--theme-text-soft);
}
.settingsThemePanel__title {
font-size: 22px;
font-weight: 800;
color: var(--theme-text-strong);
}
.settingsThemePanel__desc {
color: var(--theme-text-muted);
line-height: 1.6;
}
.settingsThemePanel__toggle {
margin-top: 4px;
}
.toggleSwitch {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid var(--theme-border-strong);
background: var(--theme-surface-soft);
cursor: pointer;
user-select: none;
}
.toggleSwitch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.toggleSwitch__track {
position: relative;
width: 42px;
height: 24px;
border-radius: 999px;
background: var(--theme-surface-soft-3);
border: 1px solid var(--theme-border-strong);
transition: background 180ms ease, border-color 180ms ease;
flex: 0 0 auto;
}
.toggleSwitch__thumb {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
transition: transform 180ms ease;
}
:root[data-theme='light'] .toggleSwitch__thumb {
background: #fff;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}
.toggleSwitch__label {
font-weight: 800;
color: var(--theme-text);
}
.toggleSwitch input:checked ~ .toggleSwitch__track {
background: rgba(96, 165, 250, 0.34);
border-color: rgba(96, 165, 250, 0.42);
}
.toggleSwitch input:checked ~ .toggleSwitch__track .toggleSwitch__thumb {
transform: translateX(18px);
}
.rightRailAction__button {
width: 100%;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(77, 127, 233, 0.96);
background: rgba(77, 127, 233, 0.88);
color: #fff;
background: var(--theme-accent-bg);
color: var(--theme-accent-text);
font-weight: 800;
cursor: pointer;
}
@@ -1162,8 +1283,8 @@ function submitGlobalSearch() {
align-content: start;
gap: 18px;
padding: 28px 22px;
background: rgba(255, 255, 255, 0.03);
border-right: 1px solid rgba(255, 255, 255, 0.08);
background: var(--theme-pill-bg);
border-right: 1px solid var(--theme-border);
}
.guideModal__eyebrow {
@@ -1192,7 +1313,7 @@ function submitGlobalSearch() {
align-items: center;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--theme-border);
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
@@ -1228,7 +1349,7 @@ function submitGlobalSearch() {
justify-self: end;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.56);
color: var(--theme-text-muted);
cursor: pointer;
font-size: 13px;
}
@@ -1256,7 +1377,7 @@ function submitGlobalSearch() {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--theme-border);
background: radial-gradient(circle at top, rgba(77, 127, 233, 0.18), rgba(255, 255, 255, 0.02) 52%), rgba(255, 255, 255, 0.03);
display: grid;
align-content: center;
@@ -1291,7 +1412,7 @@ function submitGlobalSearch() {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
color: var(--theme-text-soft);
}
.guideModal__stepTitle {
@@ -1344,8 +1465,8 @@ function submitGlobalSearch() {
padding: 12px 18px;
border-radius: 14px;
border: 1px solid rgba(77, 127, 233, 0.96);
background: rgba(77, 127, 233, 0.88);
color: #fff;
background: var(--theme-accent-bg);
color: var(--theme-accent-text);
font-weight: 800;
cursor: pointer;
}
@@ -1354,9 +1475,9 @@ function submitGlobalSearch() {
width: 52px;
height: 52px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft);
color: var(--theme-text);
font-size: 28px;
line-height: 1;
cursor: pointer;
@@ -1412,7 +1533,7 @@ function submitGlobalSearch() {
flex: 1;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.92);
color: var(--theme-text);
font-size: 18px;
font-weight: 700;
outline: none;
@@ -1450,7 +1571,7 @@ function submitGlobalSearch() {
justify-content: space-between;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--theme-border-strong);
background: rgba(11, 18, 32, 0.94);
backdrop-filter: blur(12px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
@@ -1484,7 +1605,7 @@ function submitGlobalSearch() {
.toast__count {
margin-top: 6px;
font-size: 12px;
color: rgba(255, 255, 255, 0.56);
color: var(--theme-text-muted);
}
.toast__close {
@@ -1503,7 +1624,7 @@ function submitGlobalSearch() {
.guideModal__sidebar {
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--theme-border);
}
.guideModal__content {
@@ -1530,8 +1651,8 @@ function submitGlobalSearch() {
width: min(360px, calc(100vw - 20px));
height: 100dvh;
z-index: 30;
border-left: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(14, 14, 14, 0.96);
border-left: 1px solid var(--theme-border);
background: var(--theme-shell-bg);
box-shadow: -18px 0 36px rgba(0, 0, 0, 0.34);
}
@@ -1592,7 +1713,7 @@ function submitGlobalSearch() {
min-height: auto;
height: auto;
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--theme-border);
}
.leftRail__top {