릴리스: v1.2.19 왼쪽 레일 검색과 즐겨찾기 정리

frontend/src/App.vue

@@ -1,21 +1,24 @@
 <script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { computed, onMounted, provide, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { toApiUrl } from './lib/runtime'
+import { api } from './lib/api'
 import { useToast } from './composables/useToast'
 import iconDockToLeft from './assets/icons/dock_to_left.svg'
 import iconDockToRight from './assets/icons/dock_to_right.svg'
 import iconGridView from './assets/icons/grid_view.svg'
 import iconLists from './assets/icons/lists.svg'
+import iconSettings from './assets/icons/settings.svg'
 
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
 const { toasts, dismissToast } = useToast()
 
-const menuOpen = ref(false)
 const rightRailOpen = ref(true)
+const searchQuery = ref('')
+const favoriteShortcuts = ref([])
 provide('rightRailOpen', rightRailOpen)
 provide('localRightRailTarget', '#local-right-rail-root')
 
@@ -36,11 +39,8 @@ const leftNavItems = computed(() => {
     { key: 'home', label: 'Games', path: '/', iconSrc: iconGridView },
     { key: 'me', label: '내 리스트', path: '/me', iconSrc: iconLists, requiresAuth: true },
     { key: 'favorites', label: '즐겨찾기', path: '/favorites', icon: 'M12 4.75l2.18 4.42 4.88.71-3.53 3.44.83 4.86L12 15.9 7.64 18.18l.83-4.86-3.53-3.44 4.88-.71z', requiresAuth: true },
-    { key: 'profile', label: 'Settings', path: '/profile', icon: 'M12 4.75a2.2 2.2 0 0 1 2.08 1.5l.18.56.58.13a2.2 2.2 0 0 1 1.52 2.76l-.17.56.39.46a2.2 2.2 0 0 1 0 2.86l-.39.46.17.56a2.2 2.2 0 0 1-1.52 2.76l-.58.13-.18.56a2.2 2.2 0 0 1-4.16 0l-.18-.56-.58-.13a2.2 2.2 0 0 1-1.52-2.76l.17-.56-.39-.46a2.2 2.2 0 0 1 0-2.86l.39-.46-.17-.56a2.2 2.2 0 0 1 1.52-2.76l.58-.13.18-.56A2.2 2.2 0 0 1 12 4.75z M12 9.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3z', requiresAuth: true },
+    { key: 'profile', label: 'Settings', path: '/profile', iconSrc: iconSettings, requiresAuth: true },
   ]
-  if (isAdmin.value) {
-    items.push({ key: 'admin', label: 'Admin', path: '/admin', iconSrc: iconLists })
-  }
   return items.filter((item) => !item.requiresAuth || auth.user)
 })
 const routeMeta = computed(() => {
@@ -119,6 +119,16 @@ const routeMeta = computed(() => {
       action: () => router.push('/me'),
     }
   }
+  if (route.name === 'search') {
+    return {
+      title: 'Search',
+      subtitle: '전체 공개 티어표 검색 결과',
+      contextTitle: '검색',
+      contextText: '제목, 작성자 기준으로 공개 티어표를 전체 검색할 수 있어요.',
+      actionLabel: '홈으로',
+      action: () => router.push('/'),
+    }
+  }
   return {
     title: 'Tier Maker',
     subtitle: 'by zenn',
@@ -128,12 +138,6 @@ const routeMeta = computed(() => {
     action: () => router.push('/'),
   }
 })
-const favoriteLinks = computed(() => [
-  { label: 'Games', path: '/' },
-  ...(auth.user ? [{ label: 'Favorites', path: '/favorites' }] : []),
-  ...(auth.user ? [{ label: 'My Lists', path: '/me' }] : []),
-])
-
 function railGlyph(type) {
   if (type === 'menu') return 'M4 6.5h16M4 12h16M4 17.5h16'
   if (type === 'search') return 'M10.2 6.2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M13.6 13.6l3.2 3.2'
@@ -147,35 +151,22 @@ onMounted(async () => {
     const saved = window.localStorage.getItem('tier-maker:right-rail-open')
     if (saved === '0') rightRailOpen.value = false
   }
-  document.addEventListener('click', onDocumentClick)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', onDocumentClick)
+  searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
+  await loadFavoriteShortcuts()
 })
 
 watch(
   () => route.fullPath,
   () => {
-    menuOpen.value = false
+    searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
   }
 )
 
-function onDocumentClick(event) {
-  if (!event.target.closest('.appUserCard')) {
-    menuOpen.value = false
-  }
-}
-
 function isRouteActive(path) {
   if (path === '/') return route.path === '/'
   return route.path.startsWith(path)
 }
 
-function toggleMenu() {
-  menuOpen.value = !menuOpen.value
-}
-
 function toggleRightRail() {
   rightRailOpen.value = !rightRailOpen.value
   if (typeof window !== 'undefined') {
@@ -183,16 +174,42 @@ function toggleRightRail() {
   }
 }
 
-function goProfile() {
-  menuOpen.value = false
-  router.push('/profile')
+function avatarFallbackOfFavorite(tierList) {
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
 }
 
-async function logout() {
-  menuOpen.value = false
-  await auth.logout()
-  router.push('/')
+function favoriteThumbnailUrl(tierList) {
+  return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
 }
+
+async function loadFavoriteShortcuts() {
+  if (!auth.user) {
+    favoriteShortcuts.value = []
+    return
+  }
+  try {
+    const data = await api.listMyFavoriteTierLists({ sort: 'favorited' })
+    favoriteShortcuts.value = (data.tierLists || []).slice(0, 10)
+  } catch (e) {
+    favoriteShortcuts.value = []
+  }
+}
+
+function openFavoriteShortcut(item) {
+  router.push(`/editor/${item.gameId}/${item.id}`)
+}
+
+function submitGlobalSearch() {
+  const query = (searchQuery.value || '').trim()
+  router.push(query ? `/search?q=${encodeURIComponent(query)}` : '/search')
+}
+
+watch(
+  () => auth.user?.id,
+  async () => {
+    await loadFavoriteShortcuts()
+  }
+)
 </script>
 
 <template>
@@ -218,26 +235,22 @@ async function logout() {
 
         <div class="leftRail__body">
         <div v-if="auth.user" class="appUserCard">
-          <button v-if="auth.user" class="appUserCard__button" type="button" @click.stop="toggleMenu">
+          <div class="appUserCard__button">
             <img v-if="avatarUrl" :src="avatarUrl" class="appUserCard__avatar" alt="avatar" />
             <div v-else class="appUserCard__avatar appUserCard__avatar--fallback">{{ accountName[0]?.toUpperCase() || 'U' }}</div>
             <div class="appUserCard__meta">
               <div class="appUserCard__name">{{ accountName }}</div>
               <div class="appUserCard__email">{{ accountEmail }}</div>
             </div>
-          </button>
-          <div v-if="menuOpen" class="appUserMenu">
-            <button class="appUserMenu__item" type="button" @click="goProfile">프로필</button>
-            <button class="appUserMenu__item" type="button" @click="logout">로그아웃</button>
           </div>
         </div>
 
-        <button class="searchStub" type="button" @click="$router.push('/favorites')">
+        <form class="searchStub" @submit.prevent="submitGlobalSearch">
           <span class="searchStub__icon">
             <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('search')" /></svg>
           </span>
-          <span>Quick Search</span>
-        </button>
+          <input v-model="searchQuery" class="searchStub__input" type="search" placeholder="전체 티어표 검색" />
+        </form>
 
         <nav class="leftNav">
           <RouterLink
@@ -257,10 +270,27 @@ async function logout() {
 
         <div class="leftRail__section">
           <div class="leftRail__sectionTitle">Favorites</div>
-          <RouterLink v-for="item in favoriteLinks" :key="item.path" :to="item.path" class="favoriteLink">
-            <span class="favoriteLink__dot"></span>
-            <span>{{ item.label }}</span>
-          </RouterLink>
+          <template v-if="favoriteShortcuts.length">
+            <button
+              v-for="item in favoriteShortcuts"
+              :key="item.id"
+              type="button"
+              class="favoriteShortcut"
+              @click="openFavoriteShortcut(item)"
+            >
+              <img v-if="favoriteThumbnailUrl(item)" :src="favoriteThumbnailUrl(item)" alt="" class="favoriteShortcut__thumb" />
+              <div v-else class="favoriteShortcut__thumb favoriteShortcut__thumb--fallback">{{ avatarFallbackOfFavorite(item) }}</div>
+              <span class="favoriteShortcut__label">{{ item.title }}</span>
+            </button>
+            <RouterLink to="/favorites" class="favoriteMoreLink">
+              <span class="favoriteMoreLink__icon">
+                <img :src="iconSettings" alt="" />
+              </span>
+              <span>즐겨찾기 더 보기</span>
+              <span class="favoriteMoreLink__arrow">↗</span>
+            </RouterLink>
+          </template>
+          <div v-else class="favoriteEmpty">아직 즐겨찾기한 티어표가 없어요.</div>
         </div>
 
         <div class="leftRail__bottom">
@@ -463,7 +493,7 @@ async function logout() {
   background: rgba(255, 255, 255, 0.04);
   color: inherit;
   text-align: left;
-  cursor: pointer;
+  cursor: default;
   box-sizing: border-box;
 }
 
@@ -501,30 +531,6 @@ async function logout() {
   text-overflow: ellipsis;
 }
 
-.appUserMenu {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  right: 0;
-  display: grid;
-  gap: 6px;
-  padding: 8px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(10, 10, 10, 0.98);
-  z-index: 20;
-}
-
-.appUserMenu__item {
-  padding: 10px 12px;
-  border-radius: 10px;
-  border: 0;
-  background: rgba(255, 255, 255, 0.04);
-  color: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-
 .searchStub {
   width: 100%;
   display: flex;
@@ -535,8 +541,22 @@ async function logout() {
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.62);
-  cursor: pointer;
   margin-bottom: 14px;
+  box-sizing: border-box;
+}
+
+.searchStub__input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.92);
+  outline: none;
+  font: inherit;
+}
+
+.searchStub__input::placeholder {
+  color: rgba(255, 255, 255, 0.42);
 }
 
 .searchStub__icon {
@@ -586,27 +606,87 @@ async function logout() {
 }
 
 .leftRail__sectionTitle {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.62);
+  font-weight: 700;
 }
 
-.favoriteLink {
-  display: flex;
-  gap: 10px;
+.favoriteEmpty {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.46);
+  line-height: 1.5;
+}
+
+.favoriteShortcut {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  gap: 12px;
   align-items: center;
-  color: rgba(255, 255, 255, 0.7);
+  padding: 6px 0;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+  text-align: left;
+  cursor: pointer;
+}
+
+.favoriteShortcut__thumb {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  object-fit: cover;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.favoriteShortcut__thumb--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.favoriteShortcut__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.favoriteMoreLink {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 4px;
+  color: rgba(255, 255, 255, 0.76);
   text-decoration: none;
   font-size: 14px;
-  padding: 4px 0;
 }
 
-.favoriteLink__dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.86);
+.favoriteMoreLink__icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.06);
+  flex: 0 0 auto;
+}
+
+.favoriteMoreLink__icon img {
+  width: 16px;
+  height: 16px;
+  display: block;
+  filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
+}
+
+.favoriteMoreLink__arrow {
+  margin-left: auto;
+  opacity: 0.56;
 }
 
 .leftRail__bottom {

frontend/src/assets/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>

frontend/src/lib/api.js

@@ -62,6 +62,7 @@ export const api = {
     request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}`),
   searchPublicTierLists: (gameId, q = '') =>
     request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}&q=${encodeURIComponent(q || '')}`),
+  searchAllPublicTierLists: (q = '') => request(`/api/tierlists/public?q=${encodeURIComponent(q || '')}`),
   listMyTierLists: () => request('/api/tierlists/me'),
   listMyFavoriteTierLists: ({ q = '', sort = 'favorited' } = {}) =>
     request(`/api/tierlists/favorites/me?q=${encodeURIComponent(q)}&sort=${encodeURIComponent(sort)}`),

frontend/src/router/index.js

@@ -8,6 +8,7 @@ import MyTierListsView from '../views/MyTierListsView.vue'
 import FavoriteTierListsView from '../views/FavoriteTierListsView.vue'
 import AdminView from '../views/AdminView.vue'
 import ProfileView from '../views/ProfileView.vue'
+import SearchResultsView from '../views/SearchResultsView.vue'
 
 export function createRouter() {
   return _createRouter({
@@ -20,6 +21,7 @@ export function createRouter() {
       { path: '/login', name: 'login', component: LoginView },
       { path: '/me', name: 'me', component: MyTierListsView },
       { path: '/favorites', name: 'favorites', component: FavoriteTierListsView },
+      { path: '/search', name: 'search', component: SearchResultsView },
       { path: '/admin', name: 'admin', component: AdminView },
       { path: '/profile', name: 'profile', component: ProfileView },
     ],

frontend/src/views/ProfileView.vue

@@ -70,6 +70,12 @@ async function saveProfile() {
     saving.value = false
   }
 }
+
+async function logout() {
+  await auth.logout()
+  toast.success('로그아웃했어요.')
+  router.push('/')
+}
 </script>
 
 <template>
@@ -93,9 +99,12 @@ async function saveProfile() {
         <label class="label">아바타 업로드</label>
         <input class="file" type="file" accept="image/*" :disabled="saving" @change="onAvatarChange" />
         <div class="hint">파일 선택은 미리보기만 바뀌고, 실제 반영은 저장 버튼을 눌렀을 때 진행됩니다.</div>
-        <button class="saveBtn" :disabled="saving" @click="saveProfile">
-          {{ saving ? '저장중...' : '프로필 저장' }}
-        </button>
+        <div class="actions">
+          <button class="saveBtn" :disabled="saving" @click="saveProfile">
+            {{ saving ? '저장중...' : '프로필 저장' }}
+          </button>
+          <button class="logoutBtn" type="button" @click="logout">로그아웃</button>
+        </div>
       </div>
     </div>
   </section>
@@ -188,7 +197,6 @@ async function saveProfile() {
   font-size: 13px;
 }
 .saveBtn {
-  margin-top: 12px;
   padding: 10px 12px;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.14);
@@ -197,4 +205,19 @@ async function saveProfile() {
   cursor: pointer;
   font-weight: 800;
 }
+.actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.logoutBtn {
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(239, 68, 68, 0.24);
+  background: rgba(239, 68, 68, 0.12);
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  font-weight: 800;
+}
 </style>

frontend/src/views/SearchResultsView.vue

@@ -0,0 +1,302 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '../lib/api'
+import { toApiUrl } from '../lib/runtime'
+
+const route = useRoute()
+const router = useRouter()
+
+const tierLists = ref([])
+const loading = ref(false)
+const error = ref('')
+const query = ref('')
+
+const normalizedQuery = computed(() => (query.value || '').trim())
+
+function fmt(ts) {
+  return new Date(ts).toLocaleString(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function displayNameOf(tierList) {
+  return tierList.authorName || '알 수 없음'
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
+}
+
+function avatarFallbackOf(tierList) {
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+}
+
+function tierListThumbnailUrl(tierList) {
+  return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
+}
+
+function openTierList(tierList) {
+  router.push(`/editor/${tierList.gameId}/${tierList.id}`)
+}
+
+async function loadResults() {
+  loading.value = true
+  error.value = ''
+  try {
+    const data = await api.searchAllPublicTierLists(query.value)
+    tierLists.value = data.tierLists || []
+  } catch (e) {
+    error.value = '검색 결과를 불러오지 못했어요.'
+  } finally {
+    loading.value = false
+  }
+}
+
+function submitSearch() {
+  router.push(normalizedQuery.value ? `/search?q=${encodeURIComponent(normalizedQuery.value)}` : '/search')
+}
+
+watch(
+  () => route.query.q,
+  async (nextQuery) => {
+    query.value = typeof nextQuery === 'string' ? nextQuery : ''
+    await loadResults()
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  query.value = typeof route.query.q === 'string' ? route.query.q : ''
+})
+</script>
+
+<template>
+  <section class="wrap">
+    <div class="head">
+      <div>
+        <div class="head__eyebrow">Search</div>
+        <h2 class="title">전체 티어표 검색</h2>
+        <div class="desc">공개된 모든 티어표를 제목과 작성자 기준으로 찾아볼 수 있어요.</div>
+      </div>
+      <!-- <form class="toolbar" @submit.prevent="submitSearch">
+        <input v-model="query" class="input" placeholder="제목 또는 작성자 검색" />
+        <button class="btn" type="submit">검색</button>
+      </form> -->
+    </div>
+
+    <div v-if="error" class="error">{{ error }}</div>
+    <div v-else-if="loading" class="empty">검색 중이에요.</div>
+    <div v-else-if="tierLists.length === 0" class="empty">검색 결과가 없어요.</div>
+    <div v-else class="list">
+      <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard">
+        <button class="boardCard__body" @click="openTierList(tierList)">
+          <div class="boardCard__thumbWrap">
+            <img v-if="tierListThumbnailUrl(tierList)" class="boardCard__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" />
+            <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
+          </div>
+          <div class="boardCard__head">
+            <div class="boardCard__title">{{ tierList.title }}</div>
+            <div class="boardCard__author">
+              <img v-if="avatarSrcOf(tierList)" class="boardCard__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" />
+              <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
+              <span>by {{ displayNameOf(tierList) }}</span>
+            </div>
+          </div>
+        </button>
+        <div class="boardCard__foot">
+          <div class="boardCard__meta">
+            <div>{{ tierList.gameId }}</div>
+            <div>{{ fmt(tierList.updatedAt) }}</div>
+          </div>
+          <div class="favoriteStat" :title="tierList.isFavorited ? '이미 즐겨찾기한 티어표' : '즐겨찾기 수'">
+            {{ tierList.isFavorited ? '★' : '☆' }} {{ tierList.favoriteCount || 0 }}
+          </div>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.wrap {
+  display: grid;
+  gap: 18px;
+}
+.head {
+  display: flex;
+  gap: 14px;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  padding: 6px 2px 8px;
+}
+.head__eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.42);
+}
+.title {
+  margin: 4px 0 0;
+  font-size: 32px;
+  color: rgba(255, 255, 255, 0.96);
+  letter-spacing: -0.04em;
+}
+.desc {
+  margin-top: 6px;
+  color: rgba(255, 255, 255, 0.58);
+}
+.toolbar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.input {
+  min-width: 280px;
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.92);
+}
+.btn {
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.92);
+  font-weight: 800;
+  cursor: pointer;
+}
+.error {
+  margin: 0 0 8px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(239, 68, 68, 0.18);
+  background: rgba(239, 68, 68, 0.1);
+}
+.empty {
+  opacity: 0.76;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+.boardCard {
+  border-radius: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: rgba(62, 62, 62, 0.82);
+  overflow: hidden;
+  display: grid;
+  gap: 10px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  transition: transform 0.16s ease, background 0.16s ease;
+}
+.boardCard:hover {
+  transform: translateY(-2px);
+  background: rgba(70, 70, 70, 0.96);
+}
+.boardCard__body {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  display: grid;
+  gap: 10px;
+}
+.boardCard__thumbWrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #555;
+  display: grid;
+  place-items: center;
+}
+.boardCard__thumb,
+.boardCard__thumbPlaceholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.boardCard__thumb {
+  object-fit: cover;
+}
+.boardCard__thumbPlaceholder {
+  background: #555;
+  display: grid;
+  place-items: center;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 13px;
+  font-weight: 700;
+}
+.boardCard__head {
+  padding: 14px 14px 0;
+  display: grid;
+  gap: 10px;
+}
+.boardCard__title {
+  font-weight: 800;
+  font-size: 18px;
+}
+.boardCard__author {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  opacity: 0.86;
+}
+.boardCard__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  object-fit: cover;
+  background: rgba(255, 255, 255, 0.08);
+}
+.boardCard__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-weight: 900;
+}
+.boardCard__foot {
+  padding: 0 14px 14px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+.boardCard__meta {
+  display: grid;
+  gap: 4px;
+  opacity: 0.78;
+  font-size: 13px;
+}
+.favoriteStat {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.74);
+}
+@media (max-width: 1200px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .input {
+    min-width: 0;
+    width: 100%;
+  }
+  .toolbar {
+    width: 100%;
+  }
+  .list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>