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

릴리스: v1.2.61 게임 템플릿 검색과 즐겨찾기 추가

Browse Source
This commit is contained in:
zenn
2026-03-31 15:26:41 +09:00
parent 2cdd627658
commit faa2a01f6c
6 changed files with 185 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/App.vue
View File

@@ -21,6 +21,7 @@ const { toasts, dismissToast } = useToast()
const leftRailCollapsed = ref(false)
const rightRailOpen = ref(true)
const searchQuery = ref('')
const searchPlaceholder = computed(() => (route.name === 'home' ? '게임 템플릿 검색' : '전체 티어표 검색'))
const isCollapsedSearchOpen = ref(false)
const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1440)
provide('rightRailOpen', rightRailOpen)
@@ -261,6 +262,10 @@ function handleLeftRailSearch() {
function submitGlobalSearch() {
const query = (searchQuery.value || '').trim()
isCollapsedSearchOpen.value = false
if (route.name === 'home') {
router.push(query ? `/?q=${encodeURIComponent(query)}` : '/')
return
}
router.push(query ? `/search?q=${encodeURIComponent(query)}` : '/search')
}
@@ -310,7 +315,7 @@ function submitGlobalSearch() {
<img :src="iconSearch" alt="" />
</span>
</button>
<input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : '전체 티어표 검색'" />
<input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : searchPlaceholder" />
</form>
<nav class="leftNav">
@@ -359,12 +364,12 @@ function submitGlobalSearch() {
</section>
</main>
<div v-if="isCollapsedSearchOpen" class="collapsedSearchModal" role="dialog" aria-modal="true" aria-label="전체 티어표 검색" @click.self="closeCollapsedSearch">
<div v-if="isCollapsedSearchOpen" class="collapsedSearchModal" role="dialog" aria-modal="true" :aria-label="searchPlaceholder" @click.self="closeCollapsedSearch">
<form class="collapsedSearchBar" @submit.prevent="submitGlobalSearch">
<span class="collapsedSearchBar__icon">
<img :src="iconSearch" alt="" />
</span>
<input v-model="searchQuery" class="collapsedSearchBar__input" type="search" placeholder="전체 티어표 검색" autofocus />
<input v-model="searchQuery" class="collapsedSearchBar__input" type="search" :placeholder="searchPlaceholder" autofocus />
</form>
</div>
@@ -410,7 +415,8 @@ function submitGlobalSearch() {
<style scoped>
.appShell {
min-height: 100vh;
min-height: 100dvh;
height: 100dvh;
display: grid;
grid-template-columns: var(--left-rail-width, 248px) minmax(0, 1fr) var(--right-rail-width, 320px);
background:
@@ -426,7 +432,8 @@ function submitGlobalSearch() {
.leftRail,
.rightRail {
min-height: 100vh;
min-height: 100dvh;
height: 100dvh;
border-right: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(14, 14, 14, 0.92);
box-sizing: border-box;
@@ -794,8 +801,10 @@ function submitGlobalSearch() {
.workspace {
display: grid;
grid-template-rows: 56px minmax(0, 1fr);
gap: 0;
min-height: 100vh;
min-height: 100dvh;
height: 100dvh;
}
.workspace--localRail {
@@ -836,7 +845,7 @@ function submitGlobalSearch() {
}
.workspaceBody {
min-height: calc(100vh - 56px);
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
@@ -846,7 +855,7 @@ function submitGlobalSearch() {
}
.workspaceBody--localRail {
min-height: calc(100vh - 56px);
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
@@ -978,7 +987,7 @@ function submitGlobalSearch() {
top: 0;
right: 0;
width: min(360px, calc(100vw - 20px));
height: 100vh;
height: 100dvh;
z-index: 30;
border-left: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(14, 14, 14, 0.96);