홈 피드와 템플릿 분리

2026-04-07 12:30:20 +09:00
parent 8fc8872114
commit 2c0b5268fa
22 changed files with 652 additions and 229 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,7 +2,8 @@
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
-import { editorNewPath, favoritesPath, followingFeedPath, homePath, loginPath, mePath } from './lib/paths'
+import { editorNewPath, favoritesPath, followingFeedPath, homePath, loginPath, mePath, templatesPath } from './lib/paths'
+import { displayInitialFrom } from './lib/display'
 import { toApiUrl } from './lib/runtime'
 import { useToast } from './composables/useToast'
 import iconDockToLeft from './assets/icons/dock_to_left.svg'
@@ -30,7 +31,7 @@ const leftRailCollapsed = ref(false)
 const mobileLeftNavOpen = ref(false)
 const rightRailOpen = ref(true)
 const searchQuery = ref('')
-const leftRailSearchPlaceholder = '주제 템플릿 검색'
+const leftRailSearchPlaceholder = computed(() => (route.name === 'templates' ? '주제 템플릿 검색' : '공개 티어표 검색'))
 const isCollapsedSearchOpen = ref(false)
 const isGuideModalOpen = ref(false)
 const themeMode = ref('dark')
@@ -70,7 +71,8 @@ const shellStyle = computed(() => ({
 }))
 const leftNavItems = computed(() => {
  const items = [
-    { key: 'home', label: '주제 선택', path: '/', iconSrc: iconGridView },
+    { key: 'home', label: '홈', path: '/', iconSrc: iconGridView },
+    { key: 'templates', label: '템플릿', path: '/templates', iconSrc: iconDashboardCustomize },
    { key: 'me', label: '나의 티어표', path: '/me', iconSrc: iconLists, requiresAuth: true },
    { key: 'favorites', label: '즐겨찾기', path: '/favorites', iconSrc: iconFavorite, requiresAuth: true },
    { key: 'followingFeed', label: '팔로우 피드', path: '/following', iconSrc: iconKidStar, requiresAuth: true },
@@ -161,6 +163,9 @@ const leftBottomPrimaryAction = computed(() => {
  if (route.name === 'home' && auth.user) {
    return { label: '커스텀 티어표 만들기', to: editorNewPath('freeform'), iconSrc: iconDashboardCustomize }
  }
+  if (route.name === 'templates' && auth.user) {
+    return { label: '커스텀 티어표 만들기', to: editorNewPath('freeform'), iconSrc: iconDashboardCustomize }
+  }
  if (route.name === 'topicHub') {
    const target = editorNewPath(currentTopicId.value)
    return { label: '새 티어표 만들기', to: auth.user ? target : loginPath(target), iconSrc: iconAddNotes }
@@ -171,10 +176,22 @@ const leftBottomPrimaryAction = computed(() => {
 const routeMeta = computed(() => {
  if (route.name === 'home') {
    return {
-      title: '주제 선택',
-      subtitle: '주제 템플릿 선택과 커스텀 보드 시작',
+      title: '홈',
+      subtitle: '공개 티어표 피드',
      contextTitle: '빠른 시작',
-      contextText: auth.user ? '커스텀 티어표를 만들거나 원하는 주제를 바로 선택할 수 있어요.' : '로그인하면 커스텀 티어표 생성과 개인 목록 관리가 열립니다.',
+      contextText: auth.user ? '추천 티어표와 최신 공개 티어표를 둘러보고 바로 새 작업을 시작할 수 있어요.' : '로그인하면 커스텀 티어표 생성과 개인 목록 관리가 열립니다.',
+      actionLabel: '템플릿 보기',
+      action: () => {
+        router.push(templatesPath())
+      },
+    }
+  }
+  if (route.name === 'templates') {
+    return {
+      title: '템플릿',
+      subtitle: '주제 템플릿 선택',
+      contextTitle: '빠른 시작',
+      contextText: auth.user ? '주제 템플릿을 고르거나 커스텀 티어표 만들기로 바로 시작할 수 있어요.' : '로그인하면 커스텀 티어표 생성과 개인 목록 관리가 열립니다.',
      actionLabel: auth.user ? '커스텀 티어표 만들기' : '로그인하러 가기',
      action: () => {
        router.push(auth.user ? editorNewPath('freeform') : loginPath())
@@ -539,7 +556,7 @@ function handleLeftRailSearch() {
 function submitGlobalSearch() {
  const query = (searchQuery.value || '').trim()
  isCollapsedSearchOpen.value = false
-  router.push(homePath(query))
+  router.push(route.name === 'templates' ? templatesPath(query) : homePath(query))
 }

 function reloadApp() {
@@ -593,7 +610,7 @@ function reloadApp() {
        <div v-if="authReady" class="appUserCard">
          <div class="appUserCard__button">
            <img v-if="avatarUrl" :src="avatarUrl" class="appUserCard__avatar" alt="avatar" draggable="false" />
-            <div v-else class="appUserCard__avatar appUserCard__avatar--fallback">{{ accountName[0]?.toUpperCase() || 'U' }}</div>
+            <div v-else class="appUserCard__avatar appUserCard__avatar--fallback">{{ displayInitialFrom(auth.user?.nickname, accountName, 'U') }}</div>
            <div class="appUserCard__meta">
              <div class="appUserCard__name">{{ accountName }}</div>
              <div class="appUserCard__email" :class="{ 'appUserCard__email--hint': isAccountEmailHint }">{{ accountEmail }}</div>
--- a/frontend/src/lib/api.js
+++ b/frontend/src/lib/api.js
@@ -67,6 +67,7 @@ export const api = {
  logout: () => request('/api/auth/logout', { method: 'POST' }),

  listTopics: () => request('/api/topics'),
+  listAdminTemplates: () => request('/api/admin/templates'),
  getTopic: (topicId) => request(`/api/topics/${encodeURIComponent(topicId)}`),
  favoriteTopic: (topicId) => request(`/api/topics/${encodeURIComponent(topicId)}/favorite`, { method: 'POST' }),
  unfavoriteTopic: (topicId) => request(`/api/topics/${encodeURIComponent(topicId)}/favorite`, { method: 'DELETE' }),
--- a/frontend/src/lib/display.js
+++ b/frontend/src/lib/display.js
@@ -0,0 +1,9 @@
+export function displayInitialFrom(primaryName = '', fallbackName = '', emptyValue = 'U') {
+  const primary = String(primaryName || '').trim()
+  if (primary) return Array.from(primary)[0] || emptyValue
+
+  const fallback = String(fallbackName || '').trim()
+  if (fallback) return Array.from(fallback)[0] || emptyValue
+
+  return emptyValue
+}
--- a/frontend/src/lib/paths.js
+++ b/frontend/src/lib/paths.js
@@ -7,6 +7,11 @@ export function homePath(query = '') {
  return normalized ? `/?q=${encodeURIComponent(normalized)}` : '/'
 }

+export function templatesPath(query = '') {
+  const normalized = String(query || '').trim()
+  return normalized ? `/templates?q=${encodeURIComponent(normalized)}` : '/templates'
+}
+
 export function loginPath(redirect = '') {
  const normalized = String(redirect || '').trim()
  return normalized ? `/login?redirect=${encodeURIComponent(normalized)}` : '/login'
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter as _createRouter, createWebHistory } from 'vue-router'

 import HomeView from '../views/HomeView.vue'
+import TemplatesView from '../views/TemplatesView.vue'
 import TopicHubView from '../views/TopicHubView.vue'
 import TierEditorView from '../views/TierEditorView.vue'
 import LoginView from '../views/LoginView.vue'
@@ -18,6 +19,7 @@ export function createRouter() {
    history: createWebHistory(),
    routes: [
      { path: '/', name: 'home', component: HomeView },
+      { path: '/templates', name: 'templates', component: TemplatesView },
      { path: '/topics/:topicId', name: 'topicHub', component: TopicHubView },
      { path: '/editor/:topicId/new', name: 'newEditor', component: TierEditorView },
      { path: '/editor/:topicId/:tierListId', name: 'editEditor', component: TierEditorView },
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -946,7 +946,7 @@ async function selectAdminTemplate(templateId) {

 async function refreshTemplates() {
  try {
-    const data = await api.listTopics()
+    const data = await api.listAdminTemplates()
    templates.value = data.topics || []
    featuredTemplateIds.value = templates.value
      .filter((template) => template.displayRank != null)
--- a/frontend/src/views/FavoriteTierListsView.vue
+++ b/frontend/src/views/FavoriteTierListsView.vue
@@ -5,6 +5,7 @@ import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { useToast } from '../composables/useToast'
 import { editorPath, loginPath } from '../lib/paths'
+import { displayInitialFrom } from '../lib/display'

 const router = useRouter()
 const toast = useToast()
@@ -30,7 +31,7 @@ function avatarSrcOf(tierList) {
 }

 function avatarFallbackOf(tierList) {
-  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
 }

 function tierListThumbnailUrl(tierList) {
--- a/frontend/src/views/FollowingFeedView.vue
+++ b/frontend/src/views/FollowingFeedView.vue
@@ -5,6 +5,7 @@ import { api } from '../lib/api'
 import { editorPath, loginPath, userProfilePath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
 import { useToast } from '../composables/useToast'
+import { displayInitialFrom } from '../lib/display'

 const router = useRouter()
 const toast = useToast()
@@ -38,7 +39,7 @@ function avatarSrcOf(tierList) {
 }

 function avatarFallbackOf(tierList) {
-  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
 }

 function tierListThumbnailUrl(tierList) {
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -2,123 +2,166 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
-import SvgIcon from '../components/SvgIcon.vue'
-import kidStarIcon from '../assets/icons/kid_star.svg'
+import { editorPath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
-import { loginPath, topicPath } from '../lib/paths'
-import { useAuthStore } from '../stores/auth'
+import { displayInitialFrom } from '../lib/display'

 const route = useRoute()
 const router = useRouter()
-const auth = useAuthStore()

-const templateRecords = ref([])
+const featuredTierLists = ref([])
+const tierLists = ref([])
 const error = ref('')
-const loadingFavoriteId = ref('')
-const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim().toLowerCase() : ''))
-const templates = computed(() => {
-  const filtered = templateRecords.value
-    .filter((item) => item.id !== 'freeform')
-    .filter((item) => {
-      if (!query.value) return true
-      const haystack = `${item.name || ''} ${item.slug || ''}`.toLowerCase()
-      return haystack.includes(query.value)
-    })
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim() : ''))
+const brokenThumbnailIds = ref({})

-  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
-    if (Number(a.createdAt || 0) !== Number(b.createdAt || 0)) {
-      return Number(b.createdAt || 0) - Number(a.createdAt || 0)
-    }
-    return (a.name || '').localeCompare(b.name || '', 'ko')
+function fmt(ts) {
+  return new Date(ts).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
  })
-})
+}

-async function loadTemplates() {
+function displayNameOf(tierList) {
+  return tierList.authorName || '알 수 없음'
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
+}
+
+function avatarFallbackOf(tierList) {
+  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+}
+
+function tierListThumbnailUrl(tierList) {
+  if (!tierList?.id || brokenThumbnailIds.value[tierList.id]) return ''
+  return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
+}
+
+function handleThumbnailError(tierListId) {
+  if (!tierListId || brokenThumbnailIds.value[tierListId]) return
+  brokenThumbnailIds.value = { ...brokenThumbnailIds.value, [tierListId]: true }
+}
+
+async function loadHomeFeed() {
  try {
-    const data = await api.listTopics()
-    templateRecords.value = data.topics || []
+    const data = await api.searchAllPublicTierLists(query.value)
+    brokenThumbnailIds.value = {}
+    featuredTierLists.value = data.featuredTierLists || []
+    tierLists.value = data.tierLists || []
  } catch (e) {
-    error.value = '백엔드에 연결할 수 없어요. backend 서버가 실행 중인지 확인해주세요.'
+    error.value = '공개 티어표를 불러오지 못했어요.'
  }
 }

-onMounted(loadTemplates)
-watch(() => auth.user?.id, loadTemplates)
-
-function openTopic(template) {
-  router.push(topicPath(template?.slug || template?.id || ''))
+function openTierList(tierList) {
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
 }

-async function toggleFavorite(template, event) {
-  event?.stopPropagation()
-  if (!auth.user) {
-    router.push(loginPath(route.fullPath || '/'))
-    return
-  }
-  if (!template?.id || loadingFavoriteId.value === template.id) return
-
-  try {
-    loadingFavoriteId.value = template.id
-    const res = template.isFavorited ? await api.unfavoriteTopic(template.id) : await api.favoriteTopic(template.id)
-    templateRecords.value = templateRecords.value.map((entry) => (entry.id === template.id ? { ...entry, ...(res.topic || {}) } : entry))
-  } catch (e) {
-    error.value = '즐겨찾기 변경에 실패했어요.'
-  } finally {
-    loadingFavoriteId.value = ''
-  }
-}
-
-function templateThumbUrl(template) {
-  return template.thumbnailSrc ? toApiUrl(template.thumbnailSrc) : ''
-}
+onMounted(loadHomeFeed)
+watch(() => route.query.q, loadHomeFeed)
 </script>

 <template>
-  <section class="pageHead">
-    <div class="pageHead__main">
-      <div class="pageHead__eyebrow">Topic</div>
-      <h1 class="pageHead__title">주제 선택</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>
-  <TransitionGroup v-if="templates.length" name="libraryCard" tag="section" class="libraryGrid">
-    <article v-for="template in templates" :key="template.id" class="libraryCard">
-      <button
-        class="libraryCard__favorite"
-        type="button"
-        :class="{ 'libraryCard__favorite--active': template.isFavorited }"
-        :disabled="loadingFavoriteId === template.id"
-        @click.stop="toggleFavorite(template, $event)"
-      >
-        <SvgIcon class="libraryCard__favoriteIcon" :src="kidStarIcon" :size="18" />
-      </button>
-      <button class="libraryCard__main" type="button" @click="openTopic(template)">
-        <div class="libraryCard__thumbWrap">
-        <img v-if="templateThumbUrl(template)" class="libraryCard__thumb" :src="templateThumbUrl(template)" :alt="template.name" draggable="false" />
-        <div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
+  <section class="pageWrap">
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Feed</div>
+        <h1 class="pageHead__title">홈</h1>
+        <div class="pageHead__desc">사용자가 공개한 티어표를 최신순으로 살펴보고, 추천 티어표는 상단에서 바로 볼 수 있어요.</div>
+        <div v-if="query" class="pageHead__searchState">"{{ query }}"에 맞는 공개 티어표만 보고 있어요.</div>
      </div>
-        <div class="libraryCard__body">
-          <div class="libraryCard__title">{{ template.name }}</div>
-          <div class="libraryCard__meta">{{ template.slug || template.id }}</div>
+    </section>
+
+    <div v-if="error" class="error">{{ error }}</div>
+
+    <section v-if="featuredTierLists.length" class="featuredPanel">
+      <div class="featuredHead">
+        <div>
+          <div class="featuredHead__eyebrow">Featured</div>
+          <h3 class="featuredHead__title">추천 티어표</h3>
        </div>
-      </button>
-    </article>
-  </TransitionGroup>
-  <div v-else class="libraryEmpty">{{ query ? '검색어에 맞는 주제 템플릿이 없어요.' : '표시할 주제 템플릿이 없어요.' }}</div>
+        <div class="featuredHead__count">{{ featuredTierLists.length }}개</div>
+      </div>
+      <div class="list">
+        <article v-for="tierList in featuredTierLists" :key="`featured-${tierList.id}`" class="boardCard boardCard--featured">
+          <button class="boardCard__body" type="button" @click="openTierList(tierList)">
+            <div class="boardCard__thumbWrap">
+              <img
+                v-if="tierListThumbnailUrl(tierList)"
+                class="boardCard__thumb"
+                :src="tierListThumbnailUrl(tierList)"
+                :alt="tierList.title"
+                draggable="false"
+                @error="handleThumbnailError(tierList.id)"
+              />
+              <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
+            </div>
+            <div class="boardCard__head">
+              <div class="boardCard__titleRow">
+                <div class="boardCard__title">{{ tierList.title }}</div>
+                <div class="favoriteStat">{{ tierList.isFavorited ? '♥' : '♡' }} {{ tierList.favoriteCount || 0 }}</div>
+              </div>
+              <div class="boardCard__topic">{{ tierList.topicName || tierList.topicSlug || tierList.topicId }}</div>
+              <div class="boardCard__metaRow">
+                <div class="boardCard__author">
+                  <img v-if="avatarSrcOf(tierList)" class="boardCard__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" draggable="false" />
+                  <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
+                  <span class="boardCard__authorName">{{ displayNameOf(tierList) }}</span>
+                </div>
+                <div class="boardCard__date">{{ fmt(tierList.updatedAt) }}</div>
+              </div>
+            </div>
+          </button>
+        </article>
+      </div>
+    </section>
+
+    <section class="panel">
+      <div class="sectionLabel">최신 공개 티어표</div>
+      <div v-if="tierLists.length === 0" class="empty">{{ query ? '검색어에 맞는 공개 티어표가 없어요.' : '아직 공개 티어표가 없어요.' }}</div>
+      <div v-else class="list">
+        <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard">
+          <button class="boardCard__body" type="button" @click="openTierList(tierList)">
+            <div class="boardCard__thumbWrap">
+              <img
+                v-if="tierListThumbnailUrl(tierList)"
+                class="boardCard__thumb"
+                :src="tierListThumbnailUrl(tierList)"
+                :alt="tierList.title"
+                draggable="false"
+                @error="handleThumbnailError(tierList.id)"
+              />
+              <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
+            </div>
+            <div class="boardCard__head">
+              <div class="boardCard__titleRow">
+                <div class="boardCard__title">{{ tierList.title }}</div>
+                <div class="favoriteStat">{{ tierList.isFavorited ? '♥' : '♡' }} {{ tierList.favoriteCount || 0 }}</div>
+              </div>
+              <div class="boardCard__topic">{{ tierList.topicName || tierList.topicSlug || tierList.topicId }}</div>
+              <div class="boardCard__metaRow">
+                <div class="boardCard__author">
+                  <img v-if="avatarSrcOf(tierList)" class="boardCard__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" draggable="false" />
+                  <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
+                  <span class="boardCard__authorName">{{ displayNameOf(tierList) }}</span>
+                </div>
+                <div class="boardCard__date">{{ fmt(tierList.updatedAt) }}</div>
+              </div>
+            </div>
+          </button>
+        </article>
+      </div>
+    </section>
+  </section>
 </template>

 <style scoped>
-.libraryGrid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 18px;
+.pageHead__searchState {
+  margin-top: 8px;
+  color: var(--theme-text-muted);
 }
 .error {
  margin: 0 0 16px;
@@ -128,143 +171,204 @@ function templateThumbUrl(template) {
  background: var(--theme-danger-bg);
  color: var(--theme-text);
 }
-.pageHead__searchState {
-  margin-top: 8px;
+.panel {
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+}
+.featuredPanel {
+  margin-bottom: 28px;
+  padding: 24px;
+  border-radius: 28px;
+  border: 1px solid var(--theme-card-border);
+  background: linear-gradient(180deg, var(--theme-surface-soft) 0%, var(--theme-surface) 100%);
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+}
+.featuredHead {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+.featuredHead__eyebrow,
+.sectionLabel {
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--theme-text-faint);
+}
+.featuredHead__title {
+  margin: 6px 0 0;
+  font-size: 22px;
+  font-weight: 900;
+  color: var(--theme-text);
+}
+.featuredHead__count {
+  flex: 0 0 auto;
+  font-size: 13px;
+  font-weight: 800;
  color: var(--theme-text-muted);
 }
-.libraryCard {
-  position: relative;
-  text-align: left;
-  padding: 14px;
+.sectionLabel {
+  margin-bottom: 14px;
+}
+.empty {
+  opacity: 0.76;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
+}
+.boardCard {
+  min-width: 0;
  border-radius: 22px;
  border: 1px solid var(--theme-card-border);
  background: var(--theme-card-bg);
  color: var(--theme-text);
-  cursor: pointer;
-  display: grid;
-  gap: 12px;
+  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
-  transition: transform 0.16s ease, background 0.16s ease;
-  will-change: transform, opacity;
+  transition:
+    transform 0.16s ease,
+    background 0.16s ease;
 }
-.libraryCard:hover {
-  background: var(--theme-card-bg-hover);
+.boardCard:hover {
  transform: translateY(-2px);
+  background: var(--theme-card-bg-hover);
 }
-.libraryCard__main {
-  display: grid;
-  gap: 12px;
-  padding: 0;
+.boardCard__body {
+  width: 100%;
+  min-width: 0;
+  text-align: left;
+  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
-  text-align: left;
-  cursor: pointer;
+  padding: 0;
+  display: grid;
+  overflow: hidden;
 }
-.libraryCard__favorite {
-  position: absolute;
-  bottom: 24px;
-  right: 14px;
-  width: 34px;
-  height: 34px;
-  border-radius: 999px;
-  border: 1px solid var(--theme-favorite-border);
-  background: var(--theme-favorite-bg);
-  color: var(--theme-favorite-icon);
-  font-size: 17px;
-  line-height: 1;
-  cursor: pointer;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.libraryCard__favorite--active {
-  background: var(--theme-favorite-active-bg);
-  border-color: var(--theme-favorite-active-border);
-}
-.libraryCard__favoriteIcon {
-  opacity: 0.76;
-  color: var(--theme-favorite-icon);
-}
-.libraryCard__favorite--active .libraryCard__favoriteIcon {
-  opacity: 1;
-  color: var(--theme-favorite-active-icon);
-}
-.libraryCard__thumbWrap {
+.boardCard__thumbWrap {
+  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
-  border-radius: 14px;
-  border: 1px solid var(--theme-surface-soft-2);
-  background: var(--theme-thumb-fallback-bg);
-  overflow: hidden;
-  display: grid;
-  place-items: center;
+  padding: 14px 14px 0;
+  box-sizing: border-box;
 }
-.libraryCard__thumb {
+.boardCard__thumb,
+.boardCard__thumbPlaceholder {
  width: 100%;
  height: 100%;
+  display: block;
+  border-radius: 18px;
+}
+.boardCard__thumb {
  object-fit: cover;
 }
-.libraryCard__thumbFallback {
-  font-size: 14px;
-  color: var(--theme-text-faint);
-}
-.libraryCard__body {
+.boardCard__thumbPlaceholder {
+  background: var(--theme-thumb-fallback-bg);
  display: grid;
+  place-items: center;
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 700;
 }
-.libraryCard__title {
+.boardCard__head {
+  min-width: 0;
+  padding: 16px 18px 18px;
+  display: grid;
+  gap: 8px;
+  overflow: hidden;
+}
+.boardCard__titleRow,
+.boardCard__metaRow {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+}
+.boardCard__titleRow {
+  align-items: flex-start;
+}
+.boardCard__metaRow {
+  align-items: flex-end;
+}
+.boardCard__title {
+  min-width: 0;
  font-weight: 800;
-  letter-spacing: -0.02em;
  font-size: 18px;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
 }
-.libraryCard__meta {
+.boardCard__topic {
+  min-width: 0;
  color: var(--theme-text-soft);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
-.libraryCard-move,
-.libraryCard-enter-active,
-.libraryCard-leave-active {
-  transition: transform 280ms ease, opacity 220ms ease;
+.boardCard__author {
+  min-width: 0;
+  max-width: 100%;
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  font-size: 13px;
+  opacity: 0.86;
+  overflow: hidden;
 }
-
-.libraryCard-enter-from,
-.libraryCard-leave-to {
-  opacity: 0;
-  transform: translateY(10px) scale(0.985);
+.boardCard__authorName {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
-.libraryCard-leave-active {
-  position: absolute;
-  width: calc(100% - 0px);
-  pointer-events: none;
+.boardCard__avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 9999px;
+  object-fit: cover;
+  border: 1px solid var(--theme-avatar-border);
+  background: var(--theme-border);
+  flex: 0 0 auto;
 }
-
-.libraryEmpty {
-  padding: 20px 0;
-  color: var(--theme-text-muted);
+.boardCard__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--theme-text);
+}
+.boardCard__date,
+.favoriteStat {
+  flex: 0 0 auto;
+  font-size: 12px;
+  color: var(--theme-text-soft);
+}
+.favoriteStat {
+  font-weight: 800;
 }
@media (max-width: 1400px) {
-  .libraryGrid {
+  .list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
 }
@media (max-width: 1200px) {
-  .libraryGrid {
+  .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
 }
@media (max-width: 900px) {
-  .libraryGrid {
-    grid-template-columns: 1fr;
-  }
-}
-@media (max-width: 720px) {
-  .libraryGrid {
-    grid-template-columns: 1fr;
+  .list {
+    grid-template-columns: minmax(0, 1fr);
  }
 }
 </style>
--- a/frontend/src/views/MyTierListsView.vue
+++ b/frontend/src/views/MyTierListsView.vue
@@ -5,6 +5,7 @@ import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { useToast } from '../composables/useToast'
 import { editorPath, loginPath } from '../lib/paths'
+import { displayInitialFrom } from '../lib/display'

 const router = useRouter()
 const toast = useToast()
@@ -35,7 +36,7 @@ function avatarSrcOf(tierList) {
 }

 function avatarFallbackOf(tierList) {
-  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
 }

 function tierListThumbnailUrl(tierList) {
--- a/frontend/src/views/SearchResultsView.vue
+++ b/frontend/src/views/SearchResultsView.vue
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { editorPath } from '../lib/paths'
+import { displayInitialFrom } from '../lib/display'

 const route = useRoute()
 const router = useRouter()
@@ -30,7 +31,7 @@ function avatarSrcOf(tierList) {
 }

 function avatarFallbackOf(tierList) {
-  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
 }

 function tierListThumbnailUrl(tierList) {
--- a/frontend/src/views/TemplatesView.vue
+++ b/frontend/src/views/TemplatesView.vue
@@ -0,0 +1,263 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '../lib/api'
+import SvgIcon from '../components/SvgIcon.vue'
+import kidStarIcon from '../assets/icons/kid_star.svg'
+import { toApiUrl } from '../lib/runtime'
+import { loginPath, topicPath } from '../lib/paths'
+import { useAuthStore } from '../stores/auth'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+
+const templateRecords = ref([])
+const error = ref('')
+const loadingFavoriteId = ref('')
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim().toLowerCase() : ''))
+const templates = computed(() => {
+  const filtered = templateRecords.value
+    .filter((item) => item.id !== 'freeform')
+    .filter((item) => {
+      if (!query.value) return true
+      const haystack = `${item.name || ''} ${item.slug || ''}`.toLowerCase()
+      return haystack.includes(query.value)
+    })
+
+  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
+    if (Number(a.createdAt || 0) !== Number(b.createdAt || 0)) {
+      return Number(b.createdAt || 0) - Number(a.createdAt || 0)
+    }
+    return (a.name || '').localeCompare(b.name || '', 'ko')
+  })
+})
+
+async function loadTemplates() {
+  try {
+    const data = await api.listTopics()
+    templateRecords.value = data.topics || []
+  } catch (e) {
+    error.value = '백엔드에 연결할 수 없어요. backend 서버가 실행 중인지 확인해주세요.'
+  }
+}
+
+onMounted(loadTemplates)
+watch(() => auth.user?.id, loadTemplates)
+
+function openTopic(template) {
+  router.push(topicPath(template?.slug || template?.id || ''))
+}
+
+async function toggleFavorite(template, event) {
+  event?.stopPropagation()
+  if (!auth.user) {
+    router.push(loginPath(route.fullPath || '/templates'))
+    return
+  }
+  if (!template?.id || loadingFavoriteId.value === template.id) return
+
+  try {
+    loadingFavoriteId.value = template.id
+    const res = template.isFavorited ? await api.unfavoriteTopic(template.id) : await api.favoriteTopic(template.id)
+    templateRecords.value = templateRecords.value.map((entry) => (entry.id === template.id ? { ...entry, ...(res.topic || {}) } : entry))
+  } catch (e) {
+    error.value = '즐겨찾기 변경에 실패했어요.'
+  } finally {
+    loadingFavoriteId.value = ''
+  }
+}
+
+function templateThumbUrl(template) {
+  return template.thumbnailSrc ? toApiUrl(template.thumbnailSrc) : ''
+}
+</script>
+
+<template>
+  <section class="pageHead">
+    <div class="pageHead__main">
+      <div class="pageHead__eyebrow">Topic</div>
+      <h1 class="pageHead__title">템플릿</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>
+  <TransitionGroup v-if="templates.length" name="libraryCard" tag="section" class="libraryGrid">
+    <article v-for="template in templates" :key="template.id" class="libraryCard">
+      <button
+        class="libraryCard__favorite"
+        type="button"
+        :class="{ 'libraryCard__favorite--active': template.isFavorited }"
+        :disabled="loadingFavoriteId === template.id"
+        @click.stop="toggleFavorite(template, $event)"
+      >
+        <SvgIcon class="libraryCard__favoriteIcon" :src="kidStarIcon" :size="18" />
+      </button>
+      <button class="libraryCard__main" type="button" @click="openTopic(template)">
+        <div class="libraryCard__thumbWrap">
+          <img v-if="templateThumbUrl(template)" class="libraryCard__thumb" :src="templateThumbUrl(template)" :alt="template.name" draggable="false" />
+          <div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
+        </div>
+        <div class="libraryCard__body">
+          <div class="libraryCard__title">{{ template.name }}</div>
+          <div class="libraryCard__meta">{{ template.slug || template.id }}</div>
+        </div>
+      </button>
+    </article>
+  </TransitionGroup>
+  <div v-else class="libraryEmpty">{{ query ? '검색어에 맞는 주제 템플릿이 없어요.' : '표시할 주제 템플릿이 없어요.' }}</div>
+</template>
+
+<style scoped>
+.libraryGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
+}
+.error {
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--theme-danger-border);
+  background: var(--theme-danger-bg);
+  color: var(--theme-text);
+}
+.pageHead__searchState {
+  margin-top: 8px;
+  color: var(--theme-text-muted);
+}
+.libraryCard {
+  position: relative;
+  text-align: left;
+  padding: 14px;
+  border-radius: 22px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  color: var(--theme-text);
+  cursor: pointer;
+  display: grid;
+  gap: 12px;
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+  transition: transform 0.16s ease, background 0.16s ease;
+  will-change: transform, opacity;
+}
+.libraryCard:hover {
+  background: var(--theme-card-bg-hover);
+  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;
+  bottom: 24px;
+  right: 14px;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid var(--theme-favorite-border);
+  background: var(--theme-favorite-bg);
+  color: var(--theme-favorite-icon);
+  font-size: 17px;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.libraryCard__favorite--active {
+  background: var(--theme-favorite-active-bg);
+  border-color: var(--theme-favorite-active-border);
+}
+.libraryCard__favoriteIcon {
+  opacity: 0.76;
+  color: var(--theme-favorite-icon);
+}
+.libraryCard__favorite--active .libraryCard__favoriteIcon {
+  opacity: 1;
+  color: var(--theme-favorite-active-icon);
+}
+.libraryCard__thumbWrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 14px;
+  border: 1px solid var(--theme-surface-soft-2);
+  background: var(--theme-thumb-fallback-bg);
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+}
+.libraryCard__thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.libraryCard__thumbFallback {
+  font-size: 14px;
+  color: var(--theme-text-faint);
+}
+.libraryCard__body {
+  display: grid;
+  min-width: 0;
+}
+.libraryCard__title {
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  font-size: 18px;
+}
+.libraryCard__meta {
+  color: var(--theme-text-soft);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.libraryCard-move,
+.libraryCard-enter-active,
+.libraryCard-leave-active {
+  transition: transform 280ms ease, opacity 220ms ease;
+}
+.libraryCard-enter-from,
+.libraryCard-leave-to {
+  opacity: 0;
+  transform: translateY(10px) scale(0.985);
+}
+.libraryCard-leave-active {
+  position: absolute;
+  width: calc(100% - 0px);
+  pointer-events: none;
+}
+.libraryEmpty {
+  padding: 20px 0;
+  color: var(--theme-text-muted);
+}
+@media (max-width: 1400px) {
+  .libraryGrid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 1200px) {
+  .libraryGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 900px) {
+  .libraryGrid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>
--- a/frontend/src/views/TierEditorView.vue
+++ b/frontend/src/views/TierEditorView.vue
@@ -1756,16 +1756,6 @@ onUnmounted(() => {
                        >
                          ×
                        </button>
-                        <button
-                          v-if="canRemoveEditorItem(id) && !isExporting"
-                          class="cellDeleteBtn"
-                          type="button"
-                          title="커스텀 이미지 제거"
-                          @pointerdown.stop
-                          @click.stop="deleteEditorItem(id)"
-                        >
-                          삭제
-                        </button>
                      </div>
                    </div>
                  </div>
@@ -1852,16 +1842,6 @@ onUnmounted(() => {
                  draggable="false"
                />
                <div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
-                <button
-                  v-if="canRemoveEditorItem(id)"
-                  class="poolItem__deleteBtn"
-                  type="button"
-                  title="커스텀 이미지 제거"
-                  @pointerdown.stop
-                  @click.stop="deleteEditorItem(id)"
-                >
-                  삭제
-                </button>
                <div v-if="!canEdit" class="poolItem__state">미배치</div>
              </div>
            </div>
@@ -3210,7 +3190,6 @@ onUnmounted(() => {
 }
 .poolItem--selected {
  border-color: rgba(96, 165, 250, 0.58);
-  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.92), 0 0 0 6px rgba(96, 165, 250, 0.18);
 }
 .poolItem .thumb {
  width: 100%;
@@ -3296,7 +3275,7 @@ onUnmounted(() => {
  opacity: 0.3;
 }
 .chosen {
-  outline: 2px solid rgba(110, 231, 183, 0.5);
+  border: 1px solid rgba(110, 231, 183, 0.5);
  border-radius: 14px;
 }
@media (max-width: 980px) {
--- a/frontend/src/views/TopicHubView.vue
+++ b/frontend/src/views/TopicHubView.vue
@@ -5,6 +5,7 @@ import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { editorNewPath, editorPath, loginPath } from '../lib/paths'
 import { useAuthStore } from '../stores/auth'
+import { displayInitialFrom } from '../lib/display'

 const route = useRoute()
 const router = useRouter()
@@ -39,7 +40,7 @@ function avatarSrcOf(tierList) {
 }

 function avatarFallbackOf(tierList) {
-  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
 }

 function tierListThumbnailUrl(tierList) {
--- a/frontend/src/views/UserProfileView.vue
+++ b/frontend/src/views/UserProfileView.vue
@@ -6,6 +6,7 @@ import { editorPath, followingFeedPath, loginPath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
 import { useToast } from '../composables/useToast'
+import { displayInitialFrom } from '../lib/display'

 const route = useRoute()
 const router = useRouter()
@@ -23,7 +24,7 @@ const brokenThumbnailIds = ref({})

 const profileAvatarUrl = computed(() => (profile.value?.avatarSrc ? toApiUrl(profile.value.avatarSrc) : ''))
 const profileDisplayName = computed(() => profile.value?.nickname || profile.value?.accountName || '알 수 없음')
-const profileFallback = computed(() => (profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?')
+const profileFallback = computed(() => displayInitialFrom(profile.value?.nickname, profile.value?.accountName, '?'))
 const canFollow = computed(() => !!auth.user && !!profile.value && !profile.value.isSelf)

 watch(error, (message) => {
@@ -49,7 +50,7 @@ function avatarSrcOf(tierList) {
 }

 function avatarFallbackOf(tierList) {
-  return (tierList.authorAccountName || profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?'
+  return displayInitialFrom(tierList.authorName, tierList.authorAccountName || profile.value?.accountName, '?')
 }

 function tierListThumbnailUrl(tierList) {