릴리스: v1.2.62 셸 배경과 템플릿 입력 스타일 정리

backend/src/db.js

@@ -252,6 +252,18 @@ async function ensureSchema() {
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
     `)
 
+    await query(`
+      CREATE TABLE IF NOT EXISTS favorite_games (
+        user_id VARCHAR(64) NOT NULL,
+        game_id VARCHAR(120) NOT NULL,
+        created_at BIGINT NOT NULL,
+        PRIMARY KEY (user_id, game_id),
+        INDEX idx_favorite_games_game_id (game_id),
+        CONSTRAINT fk_favorite_games_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+        CONSTRAINT fk_favorite_games_game FOREIGN KEY (game_id) REFERENCES games(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
+    `)
+
     await query(`
       CREATE TABLE IF NOT EXISTS template_requests (
         id VARCHAR(64) PRIMARY KEY,
@@ -431,7 +443,7 @@ async function adminDeleteUser(id) {
   await query('DELETE FROM users WHERE id = ?', [id])
 }
 
-async function listGames() {
+async function listGames(currentUserId = '') {
   const rows = await query(
     `
       SELECT id, name, thumbnail_src, display_rank, created_at
@@ -445,7 +457,15 @@ async function listGames() {
     `,
     [FREEFORM_GAME_ID]
   )
-  return rows.map(mapGameRow)
+  const games = rows.map(mapGameRow)
+  if (!currentUserId) return games.map((game) => ({ ...game, isFavorited: false }))
+
+  const favoriteRows = await query('SELECT game_id FROM favorite_games WHERE user_id = ?', [currentUserId])
+  const favoriteSet = new Set(favoriteRows.map((row) => row.game_id))
+  return games.map((game) => ({
+    ...game,
+    isFavorited: favoriteSet.has(game.id),
+  }))
 }
 
 async function findGameById(id) {
@@ -1295,6 +1315,14 @@ async function unfavoriteTierList({ userId, tierListId }) {
   await query('DELETE FROM favorite_tierlists WHERE user_id = ? AND tierlist_id = ?', [userId, tierListId])
 }
 
+async function favoriteGame({ userId, gameId }) {
+  await query('INSERT IGNORE INTO favorite_games (user_id, game_id, created_at) VALUES (?, ?, ?)', [userId, gameId, now()])
+}
+
+async function unfavoriteGame({ userId, gameId }) {
+  await query('DELETE FROM favorite_games WHERE user_id = ? AND game_id = ?', [userId, gameId])
+}
+
 module.exports = {
   DB_NAME,
   ensureData,
@@ -1329,6 +1357,8 @@ module.exports = {
   findTierListById,
   favoriteTierList,
   unfavoriteTierList,
+  favoriteGame,
+  unfavoriteGame,
   deleteTierList,
   findCustomItemsByIds,
   deleteCustomItems,

backend/src/routes/games.js

@@ -1,13 +1,32 @@
 const express = require('express')
-const { listGames, getGameDetail } = require('../db')
+const { listGames, getGameDetail, findGameById, favoriteGame, unfavoriteGame } = require('../db')
+const { requireAuth } = require('../middleware/auth')
 
 const router = express.Router()
 
 router.get('/', async (req, res) => {
-  const games = await listGames()
+  const games = await listGames(req.session?.userId || '')
   res.json({ games })
 })
 
+router.post('/:gameId/favorite', requireAuth, async (req, res) => {
+  const game = await findGameById(req.params.gameId)
+  if (!game || game.id === 'freeform') return res.status(404).json({ error: 'not_found' })
+  await favoriteGame({ userId: req.session.userId, gameId: game.id })
+  const games = await listGames(req.session.userId)
+  const updated = games.find((entry) => entry.id === game.id) || { ...game, isFavorited: true }
+  res.json({ game: updated })
+})
+
+router.delete('/:gameId/favorite', requireAuth, async (req, res) => {
+  const game = await findGameById(req.params.gameId)
+  if (!game || game.id === 'freeform') return res.status(404).json({ error: 'not_found' })
+  await unfavoriteGame({ userId: req.session.userId, gameId: game.id })
+  const games = await listGames(req.session.userId)
+  const updated = games.find((entry) => entry.id === game.id) || { ...game, isFavorited: false }
+  res.json({ game: updated })
+})
+
 router.get('/:gameId', async (req, res) => {
   const detail = await getGameDetail(req.params.gameId)
   if (!detail) return res.status(404).json({ error: 'not_found' })

docs/update.md

@@ -1,5 +1,14 @@
 # 업데이트 로그
 
+## 2026-03-31 v1.2.62
+- 템플릿 요청 모달의 제목/설명 입력을 Settings 화면과 같은 어두운 입력 문법으로 맞춰 흰 배경/흰 글자처럼 보이던 문제를 정리함.
+- 앱 셸은 사이드 기본 바탕색을 중심으로 재정리하고, 중앙 바디에 배경과 좌우 보더를 줘 긴 스크롤에서도 사이드가 잘리는 듯한 인상을 줄이도록 조정함.
+
+## 2026-03-31 v1.2.61
+- Game Library 왼쪽 검색을 전체 티어표 검색이 아니라 게임 템플릿 검색으로 바꾸고, 홈 화면에서 검색어에 맞는 게임만 필터링하도록 조정함.
+- 게임 템플릿에 사용자별 즐겨찾기 별 아이콘을 추가하고, 즐겨찾기한 게임이 관리자 고정 순서보다 우선 노출되도록 백엔드와 홈 화면을 함께 확장함.
+- 앱 셸의 100vh 높이 계산을 100dvh와 고정 행 구조로 정리해, 콘텐츠가 없어도 생기던 불필요한 세로 스크롤을 줄임.
+
 ## 2026-03-31 v1.2.60
 - 관리자 티어표 관리 카드에서 사용자가 입력한 설명을 제목 아래에 함께 노출해 요청 의도를 더 빨리 파악할 수 있게 함.
 - 템플릿 등록/업데이트 요청은 이제 에디터 모달에서 제목과 설명을 별도로 입력받고, 예시 문구와 함께 전송하도록 정리함.

frontend/src/App.vue

@@ -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,12 +415,11 @@ 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:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
-    linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
+  background: rgba(14, 14, 14, 0.96);
   color: rgba(255, 255, 255, 0.92);
   transition: grid-template-columns 220ms ease;
 }
@@ -426,7 +430,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;
@@ -492,7 +497,7 @@ function submitGlobalSearch() {
 }
 
 .leftRail__body {
-  max-height: calc(100vh - 56px);
+  max-height: calc(100dvh - 56px);
 }
 
 .rightRail__body {
@@ -785,7 +790,11 @@ function submitGlobalSearch() {
 
 .appMain {
   min-width: 0;
+  min-height: 100dvh;
   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);
 }
 
 .appMain--preview {
@@ -794,8 +803,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,23 +847,23 @@ function submitGlobalSearch() {
 }
 
 .workspaceBody {
-  min-height: calc(100vh - 56px);
-  padding: 0;
+  min-height: 0;
+  padding: 18px 18px 0;
   border: 0;
   border-radius: 0;
-  background: transparent;
+  background: rgba(24, 24, 24, 0.92);
   box-shadow: none;
-  margin: 18px 18px 0;
+  margin: 0;
 }
 
 .workspaceBody--localRail {
-  min-height: calc(100vh - 56px);
-  padding: 0;
+  min-height: 0;
+  padding: 18px 18px 0;
   border: 0;
   border-radius: 0;
-  background: transparent;
+  background: rgba(24, 24, 24, 0.92);
   box-shadow: none;
-  margin: 18px 18px 0;
+  margin: 0;
 }
 
 .rightRail {
@@ -978,7 +989,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);
@@ -996,10 +1007,13 @@ function submitGlobalSearch() {
 @media (max-width: 860px) {
   .appShell {
     grid-template-columns: 1fr;
+    height: auto;
+    min-height: 100dvh;
   }
 
   .leftRail {
     min-height: auto;
+    height: auto;
     border-right: 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }
@@ -1013,6 +1027,19 @@ function submitGlobalSearch() {
     padding: 12px 14px;
   }
 
+  .appMain {
+    min-height: auto;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  .workspace,
+  .workspaceBody,
+  .workspaceBody--localRail {
+    min-height: 0;
+    height: auto;
+  }
+
   .leftRail__content {
     overflow: visible;
   }

frontend/src/lib/api.js

@@ -32,6 +32,8 @@ export const api = {
 
   listGames: () => request('/api/games'),
   getGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}`),
+  favoriteGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}/favorite`, { method: 'POST' }),
+  unfavoriteGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}/favorite`, { method: 'DELETE' }),
   updateAdminGameDisplayOrder: (payload) => request('/api/admin/games/display-order', { method: 'PATCH', body: payload }),
   updateAdminGameItem: (gameId, itemId, payload) =>
     request(`/api/admin/games/${encodeURIComponent(gameId)}/items/${encodeURIComponent(itemId)}`, { method: 'PATCH', body: payload }),

frontend/src/views/HomeView.vue

@@ -1,28 +1,71 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
+import { useAuthStore } from '../stores/auth'
 
+const route = useRoute()
 const router = useRouter()
+const auth = useAuthStore()
 
 const items = ref([])
 const error = ref('')
-const games = computed(() => items.value.filter((item) => item.id !== 'freeform'))
+const loadingFavoriteId = ref('')
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim().toLowerCase() : ''))
+const games = computed(() => {
+  const filtered = items.value
+    .filter((item) => item.id !== 'freeform')
+    .filter((item) => {
+      if (!query.value) return true
+      const haystack = `${item.name || ''} ${item.id || ''}`.toLowerCase()
+      return haystack.includes(query.value)
+    })
 
-onMounted(async () => {
+  return filtered.slice().sort((a, b) => {
+    if (!!a.isFavorited !== !!b.isFavorited) return a.isFavorited ? -1 : 1
+    const rankA = a.displayRank == null ? Number.MAX_SAFE_INTEGER : a.displayRank
+    const rankB = b.displayRank == null ? Number.MAX_SAFE_INTEGER : b.displayRank
+    if (rankA !== rankB) return rankA - rankB
+    return (a.name || '').localeCompare(b.name || '', 'ko')
+  })
+})
+
+async function loadGames() {
   try {
     const data = await api.listGames()
     items.value = data.games || []
   } catch (e) {
     error.value = '백엔드에 연결할 수 없어요. backend 서버가 실행 중인지 확인해주세요.'
   }
-})
+}
+
+onMounted(loadGames)
+watch(() => auth.user?.id, loadGames)
 
 function goGame(gameId) {
   router.push(`/games/${gameId}`)
 }
 
+async function toggleFavorite(game, event) {
+  event?.stopPropagation()
+  if (!auth.user) {
+    router.push(`/login?redirect=${encodeURIComponent(route.fullPath || '/')}`)
+    return
+  }
+  if (!game?.id || loadingFavoriteId.value === game.id) return
+
+  try {
+    loadingFavoriteId.value = game.id
+    const res = game.isFavorited ? await api.unfavoriteGame(game.id) : await api.favoriteGame(game.id)
+    items.value = items.value.map((entry) => (entry.id === game.id ? { ...entry, ...res.game } : entry))
+  } catch (e) {
+    error.value = '즐겨찾기 변경에 실패했어요.'
+  } finally {
+    loadingFavoriteId.value = ''
+  }
+}
+
 function thumbUrl(g) {
   return g.thumbnailSrc ? toApiUrl(g.thumbnailSrc) : ''
 }
@@ -34,22 +77,35 @@ function thumbUrl(g) {
       <div class="pageHead__eyebrow">Workspace</div>
       <h1 class="pageHead__title">Game Library</h1>
       <p class="pageHead__desc">자주 쓰는 게임 템플릿을 빠르게 고르고, 필요하면 바로 커스텀 티어표를 시작할 수 있어요.</p>
+      <p v-if="query" class="pageHead__searchState">"{{ query }}"에 맞는 게임 템플릿만 보고 있어요.</p>
     </div>
   </section>
 
   <div v-if="error" class="error">{{ error }}</div>
-  <section class="libraryGrid">
-    <button v-for="g in games" :key="g.id" class="libraryCard" @click="goGame(g.id)">
-      <div class="libraryCard__thumbWrap">
+  <section v-if="games.length" class="libraryGrid">
+    <article v-for="g in games" :key="g.id" class="libraryCard">
+      <button
+        class="libraryCard__favorite"
+        type="button"
+        :class="{ 'libraryCard__favorite--active': g.isFavorited }"
+        :disabled="loadingFavoriteId === g.id"
+        @click.stop="toggleFavorite(g, $event)"
+      >
+        {{ g.isFavorited ? '★' : '☆' }}
+      </button>
+      <button class="libraryCard__main" type="button" @click="goGame(g.id)">
+        <div class="libraryCard__thumbWrap">
         <img v-if="thumbUrl(g)" class="libraryCard__thumb" :src="thumbUrl(g)" :alt="g.name" />
         <div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
       </div>
-      <div class="libraryCard__body">
-        <div class="libraryCard__title">{{ g.name }}</div>
-        <div class="libraryCard__meta">{{ g.id }}</div>
-      </div>
-    </button>
+        <div class="libraryCard__body">
+          <div class="libraryCard__title">{{ g.name }}</div>
+          <div class="libraryCard__meta">{{ g.id }}</div>
+        </div>
+      </button>
+    </article>
   </section>
+  <div v-else class="libraryEmpty">{{ query ? '검색어에 맞는 게임 템플릿이 없어요.' : '표시할 게임 템플릿이 없어요.' }}</div>
 </template>
 
 <style scoped>
@@ -66,7 +122,12 @@ function thumbUrl(g) {
   background: rgba(239, 68, 68, 0.1);
   color: rgba(255, 255, 255, 0.92);
 }
+.pageHead__searchState {
+  margin-top: 8px;
+  color: rgba(255, 255, 255, 0.62);
+}
 .libraryCard {
+  position: relative;
   text-align: left;
   padding: 14px;
   border-radius: 22px;
@@ -77,14 +138,40 @@ function thumbUrl(g) {
   display: grid;
   gap: 12px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
-  transition:
-    transform 0.16s ease,
-    background 0.16s ease;
+  transition: transform 0.16s ease, background 0.16s ease;
 }
 .libraryCard:hover {
   background: rgba(70, 70, 70, 0.96);
   transform: translateY(-2px);
 }
+.libraryCard__main {
+  display: grid;
+  gap: 12px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.libraryCard__favorite {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(15, 15, 15, 0.72);
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 17px;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 2;
+}
+.libraryCard__favorite--active {
+  color: #ffd86b;
+}
 .libraryCard__thumbWrap {
   width: 100%;
   aspect-ratio: 16 / 9;
@@ -119,6 +206,10 @@ function thumbUrl(g) {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.libraryEmpty {
+  padding: 20px 0;
+  color: rgba(255, 255, 255, 0.62);
+}
 @media (max-width: 1400px) {
   .libraryGrid {
     grid-template-columns: repeat(3, minmax(0, 1fr));