ui: add initial loading states

backend/index.js

@@ -12,7 +12,6 @@ const { ensureData } = require('./src/db')
 const authRoutes = require('./src/routes/auth')
 const topicsRoutes = require('./src/routes/topics')
 const tierListsRoutes = require('./src/routes/tierlists')
-const commentsRoutes = require('./src/routes/comments')
 const usersRoutes = require('./src/routes/users')
 const adminRoutes = require('./src/routes/admin')
 const shareRoutes = require('./src/routes/share')
@@ -88,7 +87,6 @@ app.use(async (req, res, next) => {
 app.use('/api/auth', authRoutes)
 app.use('/api/topics', topicsRoutes)
 app.use('/api/tierlists', tierListsRoutes)
-app.use('/api/comments', commentsRoutes)
 app.use('/api/users', usersRoutes)
 app.use('/api/admin', adminRoutes)
 app.use('/share', shareRoutes)

backend/src/db.js

@@ -241,54 +241,6 @@ function mapTierListRow(row) {
   }
 }
 
-function mapTierListCommentRow(row) {
-  if (!row) return null
-  return {
-    id: row.id,
-    tierListId: row.tierlist_id,
-    parentCommentId: row.parent_comment_id || '',
-    authorId: row.author_id,
-    authorName: getUserDisplayName(row),
-    authorAccountName: getUserAccountName(row),
-    authorAvatarSrc: row.avatar_src || '',
-    content: row.content || '',
-    createdAt: Number(row.created_at || 0),
-    updatedAt: Number(row.updated_at || 0),
-    replies: [],
-  }
-}
-
-function mapCommentNotificationRow(row) {
-  if (!row) return null
-  return {
-    id: row.id,
-    userId: row.user_id,
-    tierListId: row.tierlist_id,
-    topicId: row.topic_id,
-    topicSlug: row.topic_slug || row.topic_id,
-    topicName: row.topic_name || '',
-    tierListTitle: row.tierlist_title || '',
-    tierListThumbnailSrc: row.tierlist_thumbnail_src || '',
-    commentId: row.comment_id,
-    parentCommentId: row.parent_comment_id || '',
-    parentCommentContent: row.parent_comment_content || '',
-    notificationType: row.notification_type || 'tierlist_comment',
-    isRead: !!row.is_read,
-    readAt: Number(row.read_at || 0),
-    createdAt: Number(row.created_at || 0),
-    actorId: row.actor_user_id,
-    actorName: getUserDisplayName({
-      nickname: row.actor_nickname,
-      email: row.actor_email,
-    }),
-    actorAccountName: getUserAccountName({
-      email: row.actor_email,
-    }),
-    actorAvatarSrc: row.actor_avatar_src || '',
-    commentContent: row.comment_content || '',
-  }
-}
-
 function mapTemplateRequestRow(row) {
   if (!row) return null
   return {
@@ -547,51 +499,6 @@ async function ensureSchema() {
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
     `)
 
-    await query(`
-      CREATE TABLE IF NOT EXISTS tierlist_comments (
-        id VARCHAR(64) PRIMARY KEY,
-        tierlist_id VARCHAR(64) NOT NULL,
-        author_id VARCHAR(64) NOT NULL,
-        parent_comment_id VARCHAR(64) NULL DEFAULT NULL,
-        content TEXT NOT NULL,
-        created_at BIGINT NOT NULL,
-        updated_at BIGINT NOT NULL,
-        INDEX idx_tierlist_comments_tierlist_created (tierlist_id, created_at),
-        INDEX idx_tierlist_comments_parent (parent_comment_id),
-        CONSTRAINT fk_tierlist_comments_tierlist FOREIGN KEY (tierlist_id) REFERENCES tierlists(id) ON DELETE CASCADE,
-        CONSTRAINT fk_tierlist_comments_author FOREIGN KEY (author_id) REFERENCES users(id) ON DELETE CASCADE,
-        CONSTRAINT fk_tierlist_comments_parent FOREIGN KEY (parent_comment_id) REFERENCES tierlist_comments(id) ON DELETE CASCADE
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
-    `)
-
-    await query(`
-      CREATE TABLE IF NOT EXISTS comment_notifications (
-        id VARCHAR(64) PRIMARY KEY,
-        user_id VARCHAR(64) NOT NULL,
-        tierlist_id VARCHAR(64) NOT NULL,
-        comment_id VARCHAR(64) NOT NULL,
-        actor_user_id VARCHAR(64) NOT NULL,
-        notification_type VARCHAR(32) NOT NULL,
-        is_read TINYINT(1) NOT NULL DEFAULT 0,
-        read_at BIGINT NOT NULL DEFAULT 0,
-        created_at BIGINT NOT NULL,
-        INDEX idx_comment_notifications_user_read_created (user_id, is_read, created_at),
-        INDEX idx_comment_notifications_comment (comment_id),
-        CONSTRAINT fk_comment_notifications_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
-        CONSTRAINT fk_comment_notifications_tierlist FOREIGN KEY (tierlist_id) REFERENCES tierlists(id) ON DELETE CASCADE,
-        CONSTRAINT fk_comment_notifications_comment FOREIGN KEY (comment_id) REFERENCES tierlist_comments(id) ON DELETE CASCADE,
-        CONSTRAINT fk_comment_notifications_actor FOREIGN KEY (actor_user_id) REFERENCES users(id) ON DELETE CASCADE
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
-    `)
-    await query(`ALTER TABLE tierlist_comments ADD COLUMN IF NOT EXISTS parent_comment_id VARCHAR(64) NULL DEFAULT NULL AFTER author_id`)
-    await query(`ALTER TABLE tierlist_comments ADD COLUMN IF NOT EXISTS updated_at BIGINT NOT NULL DEFAULT 0 AFTER created_at`)
-    await query(`ALTER TABLE comment_notifications ADD COLUMN IF NOT EXISTS actor_user_id VARCHAR(64) NOT NULL DEFAULT '' AFTER comment_id`)
-    await query(`ALTER TABLE comment_notifications ADD COLUMN IF NOT EXISTS notification_type VARCHAR(32) NOT NULL DEFAULT 'tierlist_comment' AFTER actor_user_id`)
-    await query(`ALTER TABLE comment_notifications ADD COLUMN IF NOT EXISTS is_read TINYINT(1) NOT NULL DEFAULT 0 AFTER notification_type`)
-    await query(`ALTER TABLE comment_notifications ADD COLUMN IF NOT EXISTS read_at BIGINT NOT NULL DEFAULT 0 AFTER is_read`)
-    await query(`CREATE INDEX IF NOT EXISTS idx_comment_notifications_user_read_created ON comment_notifications (user_id, is_read, created_at)`)
-    await query(`CREATE INDEX IF NOT EXISTS idx_comment_notifications_comment ON comment_notifications (comment_id)`)
-
     await query(`
       CREATE TABLE IF NOT EXISTS user_follows (
         follower_id VARCHAR(64) NOT NULL,
@@ -2705,190 +2612,6 @@ async function listFollowingTierLists(userId, queryText = '') {
   return applyFavoriteMetaToTierLists(tierLists, favoriteStats)
 }
 
-async function listTierListComments(tierListId) {
-  const rows = await query(
-    `
-      SELECT
-        c.id,
-        c.tierlist_id,
-        c.author_id,
-        c.parent_comment_id,
-        c.content,
-        c.created_at,
-        c.updated_at,
-        u.nickname,
-        u.email,
-        u.avatar_src
-      FROM tierlist_comments c
-      INNER JOIN users u ON u.id = c.author_id
-      WHERE c.tierlist_id = ?
-      ORDER BY c.created_at ASC, c.id ASC
-    `,
-    [tierListId]
-  )
-
-  const comments = rows.map(mapTierListCommentRow)
-  const byId = new Map(comments.map((comment) => [comment.id, comment]))
-  const roots = []
-  comments.forEach((comment) => {
-    if (comment.parentCommentId) {
-      const parent = byId.get(comment.parentCommentId)
-      if (parent) {
-        parent.replies.push(comment)
-        return
-      }
-    }
-    roots.push(comment)
-  })
-  return roots
-}
-
-async function findTierListCommentById(commentId) {
-  const rows = await query(
-    `
-      SELECT id, tierlist_id, author_id, parent_comment_id, content, created_at, updated_at
-      FROM tierlist_comments
-      WHERE id = ?
-      LIMIT 1
-    `,
-    [commentId]
-  )
-  const row = rows[0]
-  if (!row) return null
-  return {
-    id: row.id,
-    tierListId: row.tierlist_id,
-    authorId: row.author_id,
-    parentCommentId: row.parent_comment_id || '',
-    content: row.content || '',
-    createdAt: Number(row.created_at || 0),
-    updatedAt: Number(row.updated_at || 0),
-  }
-}
-
-async function createTierListComment({ tierListId, authorId, parentCommentId = '', content }) {
-  let parentComment = null
-  if (parentCommentId) {
-    parentComment = await findTierListCommentById(parentCommentId)
-    if (!parentComment || parentComment.tierListId !== tierListId) {
-      const error = new Error('comment_parent_invalid')
-      error.code = 'COMMENT_PARENT_INVALID'
-      throw error
-    }
-    if (parentComment.parentCommentId) {
-      const error = new Error('comment_reply_depth_invalid')
-      error.code = 'COMMENT_REPLY_DEPTH_INVALID'
-      throw error
-    }
-  }
-
-  const commentId = nanoid()
-  const createdAt = now()
-  await query(
-    `
-      INSERT INTO tierlist_comments (id, tierlist_id, author_id, parent_comment_id, content, created_at, updated_at)
-      VALUES (?, ?, ?, ?, ?, ?, ?)
-    `,
-    [commentId, tierListId, authorId, parentComment ? parentComment.id : null, String(content || '').trim(), createdAt, createdAt]
-  )
-  return commentId
-}
-
-async function deleteTierListComment(commentId) {
-  await query('DELETE FROM tierlist_comments WHERE id = ?', [commentId])
-}
-
-async function createCommentNotificationsForComment(commentId) {
-  const comment = await findTierListCommentById(commentId)
-  if (!comment) return
-
-  const tierList = await findTierListById(comment.tierListId)
-  if (!tierList) return
-
-  const recipientMap = new Map()
-  if (tierList.authorId && tierList.authorId !== comment.authorId) {
-    recipientMap.set(tierList.authorId, 'tierlist_comment')
-  }
-
-  if (comment.parentCommentId) {
-    const parentComment = await findTierListCommentById(comment.parentCommentId)
-    if (parentComment && parentComment.authorId && parentComment.authorId !== comment.authorId) {
-      recipientMap.set(parentComment.authorId, 'comment_reply')
-    }
-  }
-
-  await Promise.all(
-    Array.from(recipientMap.entries()).map(([userId, notificationType]) =>
-      query(
-        `
-          INSERT INTO comment_notifications (id, user_id, tierlist_id, comment_id, actor_user_id, notification_type, is_read, read_at, created_at)
-          VALUES (?, ?, ?, ?, ?, ?, 0, 0, ?)
-        `,
-        [nanoid(), userId, comment.tierListId, comment.id, comment.authorId, notificationType, now()]
-      )
-    )
-  )
-}
-
-async function listCommentNotifications(userId, { unreadOnly = false } = {}) {
-  const rows = await query(
-    `
-      SELECT
-        n.id,
-        n.user_id,
-        n.tierlist_id,
-        n.comment_id,
-        n.notification_type,
-        n.is_read,
-        n.read_at,
-        n.created_at,
-        n.actor_user_id,
-        c.parent_comment_id,
-        c.content AS comment_content,
-        parent.content AS parent_comment_content,
-        t.topic_id,
-        tp.slug AS topic_slug,
-        tp.name AS topic_name,
-        t.title AS tierlist_title,
-        t.thumbnail_src AS tierlist_thumbnail_src,
-        actor.nickname AS actor_nickname,
-        actor.email AS actor_email,
-        actor.avatar_src AS actor_avatar_src
-      FROM comment_notifications n
-      INNER JOIN tierlist_comments c ON c.id = n.comment_id
-      LEFT JOIN tierlist_comments parent ON parent.id = c.parent_comment_id
-      INNER JOIN tierlists t ON t.id = n.tierlist_id
-      INNER JOIN topics tp ON tp.id = t.topic_id
-      INNER JOIN users actor ON actor.id = n.actor_user_id
-      WHERE n.user_id = ?
-      ${unreadOnly ? 'AND n.is_read = 0' : ''}
-      ORDER BY n.is_read ASC, n.created_at DESC
-      LIMIT 300
-    `,
-    [userId]
-  )
-  return rows.map(mapCommentNotificationRow)
-}
-
-async function countUnreadCommentNotifications(userId) {
-  const rows = await query('SELECT COUNT(*) AS count FROM comment_notifications WHERE user_id = ? AND is_read = 0', [userId])
-  return Number(rows[0]?.count || 0)
-}
-
-async function markCommentNotificationsRead(userId, { notificationIds = [], all = false } = {}) {
-  if (all) {
-    await query('UPDATE comment_notifications SET is_read = 1, read_at = ? WHERE user_id = ? AND is_read = 0', [now(), userId])
-    return
-  }
-
-  const ids = Array.from(new Set((notificationIds || []).filter(Boolean))).slice(0, 100)
-  if (!ids.length) return
-  await query(
-    `UPDATE comment_notifications SET is_read = 1, read_at = ? WHERE user_id = ? AND id IN (${ids.map(() => '?').join(', ')}) AND is_read = 0`,
-    [now(), userId, ...ids]
-  )
-}
-
 function uniqueTierListItems(poolItems) {
   const map = new Map()
   ;(poolItems || []).forEach((item) => {
@@ -3552,14 +3275,6 @@ module.exports = {
   updateTierListFeaturedStatus,
   favoriteTopic,
   unfavoriteTopic,
-  listTierListComments,
-  findTierListCommentById,
-  createTierListComment,
-  deleteTierListComment,
-  createCommentNotificationsForComment,
-  listCommentNotifications,
-  countUnreadCommentNotifications,
-  markCommentNotificationsRead,
   followUser,
   unfollowUser,
   favoriteTierList,

backend/src/routes/admin.js

@@ -136,11 +136,6 @@ function canManageAdminRole(actingUser, primaryAdmin) {
   return !!actingUser?.isAdmin && primaryAdmin?.id === actingUser.id
 }
 
-router.get('/templates', requireAdmin, async (req, res) => {
-  const templates = await listTopics('', { includePrivate: true })
-  res.json({ topics: templates })
-})
-
 router.post('/templates', requireAdmin, async (req, res) => {
   const schema = z.object({
     slug: z.string().trim().min(1).max(120).regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/),

backend/src/routes/comments.js

@@ -1,49 +0,0 @@
-const express = require('express')
-const { z } = require('zod')
-const {
-  listCommentNotifications,
-  countUnreadCommentNotifications,
-  markCommentNotificationsRead,
-} = require('../db')
-const { requireAuth } = require('../middleware/auth')
-
-const router = express.Router()
-
-router.get('/inbox', requireAuth, async (req, res) => {
-  const schema = z.object({
-    unreadOnly: z
-      .union([z.literal('1'), z.literal('0'), z.literal('true'), z.literal('false')])
-      .optional()
-      .default('0'),
-  })
-  const parsed = schema.safeParse(req.query)
-  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
-
-  const unreadOnly = ['1', 'true'].includes(parsed.data.unreadOnly)
-  const notifications = await listCommentNotifications(req.session.userId, { unreadOnly })
-  res.json({ notifications })
-})
-
-router.get('/inbox/unread-count', requireAuth, async (req, res) => {
-  const unreadCount = await countUnreadCommentNotifications(req.session.userId)
-  res.json({ unreadCount })
-})
-
-router.post('/inbox/read', requireAuth, async (req, res) => {
-  const schema = z.object({
-    all: z.boolean().optional().default(false),
-    notificationIds: z.array(z.string().min(1).max(64)).max(100).optional().default([]),
-  })
-  const parsed = schema.safeParse(req.body)
-  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
-
-  await markCommentNotificationsRead(req.session.userId, {
-    all: parsed.data.all,
-    notificationIds: parsed.data.notificationIds,
-  })
-
-  const unreadCount = await countUnreadCommentNotifications(req.session.userId)
-  res.json({ ok: true, unreadCount })
-})
-
-module.exports = router

backend/src/routes/tierlists.js

@@ -16,11 +16,6 @@ const {
   favoriteTierList,
   unfavoriteTierList,
   duplicateTierListForUser,
-  listTierListComments,
-  findTierListCommentById,
-  createTierListComment,
-  deleteTierListComment,
-  createCommentNotificationsForComment,
 } = require('../db')
 const { requireAuth } = require('../middleware/auth')
 const { createMemoryUpload, writeOptimizedImage } = require('../lib/image-storage')
@@ -127,22 +122,6 @@ const tierListUpsertSchema = z.object({
   }
 })
 
-const tierListCommentSchema = z.object({
-  content: z.string().trim().min(1).max(2000),
-  parentCommentId: z.string().trim().max(64).optional().default(''),
-})
-
-async function getTierListAccessContext(req, tierListId) {
-  const tierList = await findTierListById(tierListId, req.session?.userId || '')
-  if (!tierList) return { error: 'not_found' }
-  if (tierList.isPublic) return { tierList, canRead: true, canEdit: req.session?.userId === tierList.authorId }
-  if (!req.session?.userId) return { error: 'forbidden' }
-  if (req.session.userId === tierList.authorId) return { tierList, canRead: true, canEdit: true }
-  const currentUser = await findUserById(req.session.userId)
-  if (!currentUser?.isAdmin) return { error: 'forbidden' }
-  return { tierList, canRead: true, canEdit: true, isAdmin: true }
-}
-
 router.get('/public', async (req, res) => {
   const topicId = typeof req.query.topicId === 'string' ? req.query.topicId : ''
   const queryText = typeof req.query.q === 'string' ? req.query.q : ''
@@ -163,10 +142,14 @@ router.get('/favorites/me', requireAuth, async (req, res) => {
 })
 
 router.get('/:id', async (req, res) => {
-  const access = await getTierListAccessContext(req, req.params.id)
-  if (access.error === 'not_found') return res.status(404).json({ error: 'not_found' })
-  if (access.error === 'forbidden') return res.status(403).json({ error: 'forbidden' })
-  res.json({ tierList: normalizeTierList(access.tierList) })
+  const t = await findTierListById(req.params.id, req.session?.userId || '')
+  if (!t) return res.status(404).json({ error: 'not_found' })
+  if (!t.isPublic) {
+    if (!req.session?.userId) return res.status(403).json({ error: 'forbidden' })
+    const currentUser = req.session.userId === t.authorId ? { isAdmin: false } : await findUserById(req.session.userId)
+    if (req.session.userId !== t.authorId && !currentUser?.isAdmin) return res.status(403).json({ error: 'forbidden' })
+  }
+  res.json({ tierList: normalizeTierList(t) })
 })
 
 router.post('/:id/duplicate', requireAuth, async (req, res) => {
@@ -206,62 +189,6 @@ router.delete('/:id/favorite', requireAuth, async (req, res) => {
   res.json({ tierList: normalizeTierList(updated) })
 })
 
-router.get('/:id/comments', async (req, res) => {
-  const access = await getTierListAccessContext(req, req.params.id)
-  if (access.error === 'not_found') return res.status(404).json({ error: 'not_found' })
-  if (access.error === 'forbidden') return res.status(403).json({ error: 'forbidden' })
-
-  const comments = await listTierListComments(access.tierList.id)
-  res.json({ comments })
-})
-
-router.post('/:id/comments', requireAuth, async (req, res) => {
-  const parsed = tierListCommentSchema.safeParse(req.body)
-  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
-
-  const access = await getTierListAccessContext(req, req.params.id)
-  if (access.error === 'not_found') return res.status(404).json({ error: 'not_found' })
-  if (access.error === 'forbidden') return res.status(403).json({ error: 'forbidden' })
-
-  try {
-    const commentId = await createTierListComment({
-      tierListId: access.tierList.id,
-      authorId: req.session.userId,
-      parentCommentId: parsed.data.parentCommentId,
-      content: parsed.data.content,
-    })
-    await createCommentNotificationsForComment(commentId)
-    const comments = await listTierListComments(access.tierList.id)
-    res.json({ comments, createdCommentId: commentId })
-  } catch (error) {
-    if (error?.code === 'COMMENT_PARENT_INVALID') {
-      return res.status(400).json({ error: 'comment_parent_invalid' })
-    }
-    if (error?.code === 'COMMENT_REPLY_DEPTH_INVALID') {
-      return res.status(400).json({ error: 'comment_reply_depth_invalid' })
-    }
-    throw error
-  }
-})
-
-router.delete('/:id/comments/:commentId', requireAuth, async (req, res) => {
-  const access = await getTierListAccessContext(req, req.params.id)
-  if (access.error === 'not_found') return res.status(404).json({ error: 'not_found' })
-  if (access.error === 'forbidden') return res.status(403).json({ error: 'forbidden' })
-
-  const comment = await findTierListCommentById(req.params.commentId)
-  if (!comment || comment.tierListId !== access.tierList.id) return res.status(404).json({ error: 'not_found' })
-
-  const currentUser = req.session.userId === comment.authorId ? { isAdmin: false } : await findUserById(req.session.userId)
-  if (req.session.userId !== comment.authorId && !currentUser?.isAdmin) {
-    return res.status(403).json({ error: 'forbidden' })
-  }
-
-  await deleteTierListComment(comment.id)
-  const comments = await listTierListComments(access.tierList.id)
-  res.json({ comments })
-})
-
 router.post('/custom-items', requireAuth, upload.single('image'), async (req, res) => {
   if (!req.file) return res.status(400).json({ error: 'file_required' })
 

backend/src/routes/topics.js

@@ -5,7 +5,7 @@ const { requireAuth } = require('../middleware/auth')
 const router = express.Router()
 
 router.get('/', async (req, res) => {
-  const topics = await listTopics(req.session?.userId || '', { includePrivate: false })
+  const topics = await listTopics(req.session?.userId || '', { includePrivate: !!req.session?.isAdmin })
   res.json({ topics })
 })
 

docs/history.md

@@ -1,28 +1,7 @@
 # 의사결정 이력
 
-## 2026-04-07 v1.1.4
-- 댓글 관리함은 단순 목록보다 `무슨 티어표에서`, `원래 어떤 댓글이 있었고`, `새로 무엇이 달렸는지`를 한눈에 이해하는 정보 구조가 중요하다고 판단했다. 그래서 썸네일 + 스레드 비교 블록을 기본 카드 문법으로 채택했다.
-- 댓글 본문과 답글도 단순 들여쓰기보다 카드/말풍선/연결선으로 관계를 보여주는 쪽이 최신 UI 감각에 더 맞는다고 보고, reply depth 1단 구조에 맞춘 시각 문법을 적용했다.
-
-## 2026-04-07 v1.1.3
-- 댓글 답글 입력창은 포커스 상태에만 의존하지 않고, 비포커스 상태에서도 시각적 경계를 명확히 주기로 했다. 댓글 UI는 에디터 안의 부가 기능이지만 사용자가 바로 이해할 수 있어야 하므로 카드형 배경과 기본 테두리를 유지한다.
-
-## 2026-04-07 v1.1.2
-- 댓글/알림 기능처럼 새 테이블을 뒤늦게 붙이는 경우 `CREATE TABLE IF NOT EXISTS`만으로는 충분하지 않다고 판단했다. 이미 남아 있는 예전 스키마와 충돌할 수 있으므로, 서버 시작 시 `ALTER TABLE ... ADD COLUMN IF NOT EXISTS` 형태의 점진 마이그레이션을 함께 넣는 방향으로 유지한다.
-
-## 2026-04-07 v1.1.1
-- 댓글 기능은 다시 붙일 때 에디터 본문 로딩과 강하게 결합하지 않기로 했다. 저장된 티어표 하단 독립 카드로 분리하고, 편집 모드와 프리뷰 모드가 같은 댓글 컴포넌트를 재사용하도록 결정했다.
-- 댓글 알림은 메일이나 실시간 푸시 대신 좌측 사이드 `댓글 관리` 메뉴의 red dot + 전용 `/comments` 관리함으로 시작한다. 먼저 안정적인 인앱 확인 흐름을 만들고, 실시간 반영은 후속 과제로 남긴다.
-- 답글은 우선 1단계까지만 허용한다. 깊은 스레드는 UI 복잡도와 에디터 화면 밀도를 크게 높이므로 현재 단계에서는 root 댓글 + 답글 1단 구조만 유지한다.
-
-## 2026-04-07 v1.1.0
-- 홈은 템플릿 진입 화면과 성격이 다르므로, 공개 티어표 피드와 템플릿 목록을 분리하는 편이 정보 구조상 더 자연스럽다고 정리했다.
-- 비공개 템플릿은 관리자라도 일반 사용자 화면 문법 안에서는 보이지 않아야 하므로, 일반 목록과 관리자 관리 목록 API를 분리하는 방향을 택했다.
-- 아바타 fallback 은 이메일 계정명보다 사용자가 직접 정한 닉네임을 우선하는 편이 화면 인상이 더 일관적이라고 정리했다.
-
-## 2026-04-07 기준 복원 메모
-- 최근 회귀는 개별 버그 패치로 좁히기보다, 마지막 안정 버전인 `v1.0.104`를 기준선으로 되돌린 뒤 기능을 다시 쌓는 편이 더 안전하다고 판단했다.
-- 특히 티어표 편집 화면은 새로고침/라우트 전환 안정성이 핵심이므로, 이후 기능 추가는 편집기 내부 생명주기를 건드리는 범위를 최소화하는 방향으로 진행한다.
+## 2026-04-06 v1.0.105
+- 인증 상태와 템플릿 데이터는 모두 비동기 로딩이라, 응답 전 빈 상태를 먼저 보여주면 “로그아웃된 것처럼 보임” 또는 “템플릿이 없는 사이트처럼 보임”으로 오해될 수 있다. 따라서 앱 셸에서는 인증 확인이 끝날 때까지 공통 로딩을 보여주고, 홈 화면은 템플릿 API 응답 전 빈 상태 대신 로딩 카드를 보여주는 편이 더 자연스럽다고 정리했다.
 
 ## 2026-04-06 v1.0.104
 - 아이템 사용 횟수는 “템플릿에 포함되어 선택 가능했던 횟수”가 아니라 “사용자가 실제 티어표 보드에 배치한 횟수”가 운영 지표로 더 의미 있다고 정리했다. 따라서 `pool_json`은 미사용 후보로 보고 제외하고, `groups_json`에 들어간 item id만 사용 횟수로 집계한다.

docs/map.md

@@ -2,13 +2,8 @@
 
 ## `/`
 - 화면 파일: `frontend/src/views/HomeView.vue`
-- 역할: 공개 티어표 홈 피드, 상단 `추천 티어표`와 아래 `최신 공개 티어표` 목록을 같은 카드 문법으로 표시, 검색어(`q`)가 있으면 공개 티어표 제목/작성자 기준으로 필터링, 카드 클릭 시 해당 티어표 화면으로 이동
-- 연동 API: `GET /api/tierlists/public?q=...`
-
-## `/templates`
-- 화면 파일: `frontend/src/views/TemplatesView.vue`
-- 역할: 공개 템플릿 전용 목록, 관리자 수동 순서와 즐겨찾기 여부를 반영한 주제 템플릿 카드 목록 표시, 템플릿 즐겨찾기 토글, 검색어(`q`)가 있으면 템플릿 이름/slug 기준으로 즉시 필터링
-- 연동 API: `GET /api/topics`, `POST /api/topics/:topicId/favorite`, `DELETE /api/topics/:topicId/favorite`
+- 역할: 데스크톱 기본 4열 주제 카드 라이브러리 대시보드, 상단 메인 썸네일과 `주제명 + 작은 ID` 메타를 가진 템플릿 선택 카드, 주제 카드 클릭 이동, `직접 티어표 만들기` 진입
+- 연동 API: `GET /api/topics`
 
 ## `/topics/:topicId`
 - 화면 파일: `frontend/src/views/TopicHubView.vue`
@@ -17,13 +12,8 @@
 
 ## `/editor/:topicId/new`, `/editor/:topicId/:tierListId`
 - 화면 파일: `frontend/src/views/TierEditorView.vue`
-- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 아이템 클릭 선택 후 셀/풀 재배치, 아이템 우클릭 메뉴 기반 복제본 생성, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, 댓글 카드 표시, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰와 하단 댓글 카드를 렌더링
-- 연동 API: `GET /api/topics/:topicId`, `GET /api/tierlists/:id`, `GET /api/tierlists/:id/comments`, `POST /api/tierlists/:id/comments`, `DELETE /api/tierlists/:id/comments/:commentId`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`, `POST /api/tierlists/thumbnail`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`, `POST /api/tierlists/template-request`
-
-## `/comments`
-- 화면 파일: `frontend/src/views/CommentInboxView.vue`
-- 역할: 내 티어표에 달린 댓글과 내 댓글에 달린 답글을 시간순 카드로 확인, 안 읽은 댓글만 보기 필터, 모두 읽음 처리, 카드별 red dot 표시, 티어표 썸네일과 원댓글/새 댓글 비교 블록 제공, 카드 클릭 시 해당 티어표의 특정 댓글 위치로 이동
-- 연동 API: `GET /api/comments/inbox`, `GET /api/comments/inbox/unread-count`, `POST /api/comments/inbox/read`
+- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 아이템 클릭 선택 후 셀/풀 재배치, 아이템 우클릭 메뉴 기반 복제본 생성, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰 렌더링
+- 연동 API: `GET /api/topics/:topicId`, `GET /api/tierlists/:id`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`, `POST /api/tierlists/thumbnail`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`, `POST /api/tierlists/template-request`
 
 ## `/login`
 - 화면 파일: `frontend/src/views/LoginView.vue`
@@ -58,7 +48,7 @@
 ## `/admin`
 - 화면 파일: `frontend/src/views/AdminView.vue`
 - 역할: 공통 우측 패널 대신 전용 `320px` 운영 패널을 사용해 `템플릿 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 선택된 템플릿 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 템플릿 이름/slug 수정, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/받은 즐겨찾기 수 표시/인기순 정렬/최소 즐겨찾기 필터/추천 지정 토글/썸네일 클릭 기반 완성본 보기, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 템플릿화, 사용자 템플릿 등록/업데이트 요청 승인·반려와 일반 완성본과 같은 보드 문법의 요청 미리보기, 회원의 작성 티어표·팔로워·받은 즐겨찾기·최근 콘텐츠 활동·마지막 접속일 확인과 회원 정보·권한 수정 및 공개 프로필 보기, 파일 입력 초기화, 아이템 삭제, 템플릿 삭제
-- 연동 API: `GET /api/admin/templates`, `POST /api/admin/templates`, `POST /api/admin/templates/:templateId/thumbnail`, `POST /api/admin/templates/:templateId/images`, `PATCH /api/admin/templates/:templateId/items/:itemId`, `GET /api/admin/custom-items`, `POST /api/admin/custom-items/:itemId/promote`, `DELETE /api/admin/custom-items/:itemId`, `DELETE /api/admin/custom-items`, `GET /api/admin/tierlists`, `GET /api/admin/tierlists/stats`, `PATCH /api/admin/tierlists/:tierListId/featured`, `GET /api/admin/template-requests`, `POST /api/admin/template-requests/:requestId/approve`, `POST /api/admin/template-requests/:requestId/reject`, `POST /api/admin/template-requests/:requestId/link-template`, `POST /api/admin/tierlists/:tierListId/promote-items`, `POST /api/admin/tierlists/:tierListId/create-template`, `GET /api/admin/users`, `PATCH /api/admin/users/:userId`, `PATCH /api/admin/users/:userId/password`, `DELETE /api/admin/users/:userId`, `DELETE /api/admin/templates/:templateId/items/:itemId`, `DELETE /api/admin/templates/:templateId`
+- 연동 API: `POST /api/admin/templates`, `POST /api/admin/templates/:templateId/thumbnail`, `POST /api/admin/templates/:templateId/images`, `PATCH /api/admin/templates/:templateId/items/:itemId`, `GET /api/admin/custom-items`, `POST /api/admin/custom-items/:itemId/promote`, `DELETE /api/admin/custom-items/:itemId`, `DELETE /api/admin/custom-items`, `GET /api/admin/tierlists`, `GET /api/admin/tierlists/stats`, `PATCH /api/admin/tierlists/:tierListId/featured`, `GET /api/admin/template-requests`, `POST /api/admin/template-requests/:requestId/approve`, `POST /api/admin/template-requests/:requestId/reject`, `POST /api/admin/template-requests/:requestId/link-template`, `POST /api/admin/tierlists/:tierListId/promote-items`, `POST /api/admin/tierlists/:tierListId/create-template`, `GET /api/admin/users`, `PATCH /api/admin/users/:userId`, `PATCH /api/admin/users/:userId/password`, `DELETE /api/admin/users/:userId`, `DELETE /api/admin/templates/:templateId/items/:itemId`, `DELETE /api/admin/templates/:templateId`
 
 ## `/profile`
 - 화면 파일: `frontend/src/views/ProfileView.vue`
@@ -67,13 +57,12 @@
 
 ## 공통 레이아웃
 - 앱 셸 파일: `frontend/src/App.vue`
-- 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, `홈 / 템플릿 / 댓글 관리` 네비게이션과 화면별 검색 placeholder 전환, `preview=1` 공유 프리뷰에서도 같은 좌우 레일과 중앙 헤더 유지, 로그인 상태 반영, 최근 즐겨찾기 바로가기와 전역 검색 입력, 댓글 알림 unread dot, 관리자 메뉴 노출 제어, 실제 SVG 에셋과 선형 SVG 아이콘이 혼합된 레일 UI, 전역 우측 상단 토스트 렌더링, 관리자/에디터 화면이 Teleport로 사용하는 `#local-right-rail-root` 대상 DOM을 상시 유지해 라우트 전환 중 우측 레일 언마운트 순서를 안정화
+- 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, `preview=1` 공유 프리뷰에서도 같은 좌우 레일과 중앙 헤더 유지, 로그인 상태 반영, 최근 즐겨찾기 바로가기와 전역 검색 입력, 관리자 메뉴 노출 제어, 실제 SVG 에셋과 선형 SVG 아이콘이 혼합된 레일 UI, 전역 우측 상단 토스트 렌더링, 관리자/에디터 화면이 Teleport로 사용하는 `#local-right-rail-root` 대상 DOM을 상시 유지해 라우트 전환 중 우측 레일 언마운트 순서를 안정화
 - 세부: 좌측 패널은 `248px` 기준 폭을 사용하되 축소 시 아이콘 중심의 좁은 레일로 전환하고, 우측 패널은 `320px` 기준 폭을 사용한다. 세 컬럼 모두 상단에 높이 `56px`의 헤더 블록을 유지한다. 중앙 헤더에는 고정 브랜드 `Tier Maker`와 서비스 설명이 표시되고, 우측 패널 토글은 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 아이콘만 표시된다. 좌우 레일의 주요 액션은 각각 하단 `56px` 푸터 안에서 항상 보이도록 유지하면서 아래쪽 패딩으로 여백을 확보한다.
 
 ## 백엔드 진입점
 - 서버 엔트리: `backend/index.js`
 - 데이터 초기화: `backend/src/db.js`
-- 세부: 댓글/알림 관련 테이블(`tierlist_comments`, `comment_notifications`)은 여기서 생성되고, 기존 DB에 누락된 컬럼이 있으면 서버 시작 시 자동 보강한다.
 - 로컬 DB 실행 설정: `docker-compose.yml`
 - 로컬 MariaDB 가이드: `docs/local-mariadb.md`
 - 인증 라우트: `backend/src/routes/auth.js`

docs/spec.md

@@ -33,23 +33,12 @@
   - 상단 토글 버튼은 항상 고정되어 있고, 패널을 축소하면 텍스트를 숨기고 아이콘 중심 레일로 전환한다.
   - `Settings`는 별도 메뉴 항목으로만 진입하며, 사용자 카드 자체는 정보 표시 용도로만 사용한다.
   - 사용자 아바타는 원형 보더 스타일을 유지하고, `Favorites` 영역은 최근 즐겨찾기 티어표 최대 10개를 메인 메뉴보다 작은 밀도의 바로가기 목록으로 보여준 뒤 하단 `즐겨찾기 더 보기` 링크로 전체 즐겨찾기 화면에 연결한다.
-  - 사용자 아바타가 없을 때 표시하는 fallback 이니셜은 계정명보다 닉네임을 우선한다.
 - 중앙 워크스페이스
   - 현재 라우트의 핵심 콘텐츠를 렌더링하는 영역이며, 홈/목록 계열 화면은 카드형 대시보드 레이아웃을 우선 적용한다.
   - 공통 `workspaceBody`는 별도 외곽 카드 테두리 없이 셸 여백만 제공하고, 실제 카드/패널 레이어는 각 화면 내부에서만 구성한다.
   - 홈, 게임 허브, 내 티어표, 즐겨찾기, 검색 결과 화면은 같은 카드 문법(상단 16:9 썸네일, `제목+좋아요` 1행, `작성자+최종 수정일` 1행)을 공유하며, 데스크톱 기준 기본 4열 카드 그리드를 사용한다.
-  - `/` 홈은 템플릿 선택 화면이 아니라 `공개 티어표 피드`이며, 추천 티어표와 최신 공개 티어표를 같은 보드 카드 문법으로 보여준다.
-  - `/templates`는 공개 템플릿 전용 화면이며, 템플릿 카드는 상단 메인 썸네일과 `주제명 + 작은 slug/id` 메타를 가진다.
+  - 단, 홈 게임 선택 카드는 템플릿 선택용이므로 상단 메인 썸네일은 유지하되, 하단 메타는 `게임명 + 작은 ID`만 간결하게 표시한다.
   - 목록 계열 화면의 상단 도구 영역은 통계 카드와 액션 버튼을 공통 높이/반경으로 맞춰, 같은 라이브러리 대시보드로 읽히도록 정리한다.
-
-## 주요 라우트/데이터 규칙
-- 일반 `GET /api/topics`는 로그인한 관리자라도 공개 템플릿만 반환한다.
-- 관리자 전용 템플릿 목록은 `GET /api/admin/templates`를 사용하며, 비공개 템플릿까지 포함한다.
-- 홈 피드(`/`)는 `GET /api/tierlists/public?q=...`를 사용한다.
-  - `featuredTierLists`: 상단 추천 티어표
-  - `tierLists`: 추천 제외 최신 공개 티어표
-- 저장된 티어표에는 댓글 스레드가 붙을 수 있다. 작성자 본인 편집 화면에서는 `작업 팁` 아래, 작성자가 아닌 사용자의 보기 전용 화면에서는 `preview` 보드 아래에서 같은 댓글 카드를 사용한다.
-- 댓글 알림 메뉴는 좌측 사이드 `댓글 관리`로 노출하며, 읽지 않은 댓글이 하나라도 있으면 빨간 dot을 표시한다.
 - 우측 패널
   - 현재 화면 문맥에 맞는 설명, 빠른 액션, 계정 상태 같은 보조 정보를 배치한다.
   - 에디터/관리자 세부 옵션은 후속 단계에서 이 패널로 점진 이관한다.
@@ -150,26 +139,6 @@
   - `userId`: string
   - `topicId`: string
   - `createdAt`: number
-- `tierListComments`
-  - `id`: string
-  - `tierListId`: string
-  - `authorId`: string
-  - `parentCommentId`: string
-  - `content`: string
-  - `createdAt`: number
-  - `updatedAt`: number
-  - 답글은 1단계까지만 허용한다.
-- `commentNotifications`
-  - `id`: string
-  - `userId`: string
-  - `tierListId`: string
-  - `commentId`: string
-  - `actorUserId`: string
-  - `notificationType`: `tierlist_comment | comment_reply`
-  - `isRead`: boolean
-  - `readAt`: number
-  - `createdAt`: number
-  - 기존 운영 DB에 예전 형태 테이블이 남아 있어도 서버 시작 시 스키마 보정으로 누락 컬럼을 자동 추가한다.
 - `templateRequests`
   - `id`: string
   - `type`: string
@@ -222,9 +191,6 @@
   - `GET /api/tierlists/me`
   - `GET /api/tierlists/favorites/me`
   - `GET /api/tierlists/:id`
-  - `GET /api/tierlists/:id/comments`
-  - `POST /api/tierlists/:id/comments`
-  - `DELETE /api/tierlists/:id/comments/:commentId`
   - `POST /api/tierlists/:id/template-request`
   - `POST /api/tierlists/:id/favorite`
   - `DELETE /api/tierlists/:id/favorite`
@@ -241,11 +207,6 @@
     - 해당 작성자의 공개 티어표 목록을 반환한다.
   - `POST /api/users/:userId/follow`
   - `DELETE /api/users/:userId/follow`
-- 댓글 알림
-  - `GET /api/comments/inbox`
-    - 알림 카드 렌더링을 위해 티어표 썸네일과 부모 댓글 내용도 함께 반환한다.
-  - `GET /api/comments/inbox/unread-count`
-  - `POST /api/comments/inbox/read`
 - 관리자
   - `POST /api/admin/templates`
     - 요청 본문은 `slug`, `name`, `isPublic`, `thumbnailSrc`를 사용하고, 내부 `topics.id`는 서버가 자동 생성한다.

docs/todo.md

@@ -1,28 +1,5 @@
 # 할 일 및 이슈
 
-## 단기 확인
-- `v1.1.4` 이후 댓글 관리 카드에서 티어표 썸네일, 원댓글/새 댓글 비교 블록이 데스크톱과 모바일에서 모두 자연스럽게 보이는지 확인한다.
-- 댓글 스레드 카드 리디자인 후 답글 연결선, 배지, 본문 말풍선 배경이 라이트/다크 모드 모두에서 과하지 않게 보이는지 확인한다.
-- `v1.1.3` 이후 답글 작성 시 입력창이 열리자마자 포커스를 받고, 포커스 전에도 카드/입력 경계가 분명하게 보이는지 다크/라이트 모드 모두에서 확인한다.
-- `v1.1.2` 반영 후 실제 운영/로컬 DB에서 서버를 다시 띄워 `comment_notifications.is_read` 컬럼이 자동 보강되는지, `댓글 관리` 메뉴 unread dot과 `/api/comments/inbox/unread-count`가 더 이상 SQL 오류 없이 동작하는지 확인한다.
-- `v1.1.1` 댓글 복구 이후 다음 흐름을 우선 QA한다: 공개 티어표 프리뷰 하단 댓글 노출, 댓글 작성/답글 작성/본인 댓글 삭제, 댓글 관리 메뉴 red dot, 댓글 관리 화면에서 `안 읽은 댓글만 보기`와 `모두 읽음 처리`, 카드 클릭 후 해당 댓글 위치 스크롤.
-- 작성자 본인 티어표 편집 화면과 타인 티어표 프리뷰 화면에서 같은 댓글 카드가 모두 자연스럽게 보이는지, 새로고침 후에도 기존 에디터 회귀 없이 댓글 카드만 안정적으로 붙는지 확인한다.
-- 댓글 알림 unread count는 현재 접속 시와 라우트 이동 시 갱신되므로, 다른 탭에서 새 댓글이 생겼을 때 실시간 반영이 필요하면 이후 polling 또는 SSE 도입 여부를 검토한다.
-- `v1.1.0`에서 홈을 공개 티어표 피드로, 템플릿을 `/templates`로 분리했으므로 왼쪽 사이드 `홈 / 템플릿 / 나의 티어표 / 설정` 흐름과 검색 placeholder가 각 화면에서 자연스럽게 바뀌는지 확인한다.
-- 관리자 계정으로 일반 템플릿 목록(`/templates`)에 들어가도 비공개 템플릿이 보이지 않고, 관리자 화면에서는 여전히 비공개 템플릿이 관리 가능한지 확인한다.
-- 홈 피드의 추천 티어표와 최신 공개 티어표 카드가 데스크톱/태블릿/모바일에서 overflow 없이 안정적으로 보이는지 확인한다.
-- 아바타 fallback 이니셜이 썸네일 미등록 상태에서 계정명이 아니라 닉네임 첫 글자로 보이는지 홈/주제 허브/나의 티어표/즐겨찾기/팔로우 피드/검색 결과/사용자 프로필에서 각각 확인한다.
-
-## 다음 작업자 인수인계
-- 현재 기준선은 `v1.0.104`다. 홈 피드와 댓글 기능은 이 버전 위에서 다시 구현해야 하며, 편집 화면 로딩/새로고침 안정성이 먼저다.
-- 홈 피드는 기존 템플릿 메인 화면과 분리된 별도 `/` 화면으로 두되, 데이터 원천은 `공개 티어표 목록` API로만 시작한다. 첫 단계에서는 `최근 공개 티어표` 목록과 `관리자 추천 티어표` 상단 섹션만 붙이고, 템플릿 화면 카드 문법을 최대한 재사용한다.
-- 홈 피드 카드는 새 컴포넌트를 급히 만들기보다, 이미 안정적이던 템플릿/목록 카드 문법을 공통 컴포넌트로 먼저 분리한 뒤 사용한다. 썸네일 비율, 아바타 fallback, 제목/메타 overflow를 카드마다 따로 다시 구현하지 않는다.
-- 댓글 기능은 티어표 편집기 본문 안으로 깊게 섞기보다, 저장된 티어표 하단의 독립 카드 섹션으로 붙인다. 편집 모드와 preview 모드 모두 같은 댓글 카드 컴포넌트를 재사용하는 구조가 안전하다.
-- 댓글 로딩은 에디터 메인 `loadEditorState()`와 분리해, 티어표 본문이 먼저 안정적으로 그려진 뒤 별도 비동기로 붙인다. 댓글 로딩/스크롤/읽음 처리 타이머는 라우트 변경 시 즉시 취소 가능해야 한다.
-- `commentId` 이동, 댓글 관리함, unread dot 같은 부가 기능은 댓글 목록 조회/등록이 안정화된 뒤 2단계로 구현한다. 처음부터 알림, 자동 스크롤, 읽음 처리까지 한 번에 붙이지 않는다.
-- 글로벌 로딩 화면이나 initial loading state는 에디터 본문 전체를 조건부로 갈아끼우기보다, 앱 셸 수준의 고정 오버레이 또는 최소한의 skeleton으로 처리한다. Teleport 우측 레일, RouterView, 편집기 내부 DOM을 동시에 조건부 마운트/언마운트하는 방식은 피한다.
-- 티어표 편집 화면에서는 새로고침 직후 다음 세 가지 QA가 항상 선행되어야 한다: `오른쪽 아이템 풀 복구`, `왼쪽 메뉴 이동 가능`, `콘솔 Vue patch/unmount 오류 없음`.
-
 ## 단기 확인
 - `v1.4.68`에서 아이템 우클릭 처리를 `window` 캡처 단계로 보강했으므로, 보드에 배치된 아이템/미사용 풀 아이템/아이템 썸네일 이미지 위에서 각각 우클릭했을 때 브라우저 기본 메뉴 대신 `아이템 복제` 메뉴가 바로 뜨는지 QA한다.
 - `v1.4.67`에서 같은 `src`가 프로필 아바타와 템플릿/사용자 아이템으로 동시에 쓰여도 자산 카드를 유지하도록 바꿨으므로, 운영 관리자 화면의 `전체 이미지`와 `프로필 이미지` 필터에서 실제 아바타가 보이고 상세 모달의 공유 참조 목록도 자연스럽게 읽히는지 QA한다.

docs/update.md

@@ -1,42 +1,10 @@
 # 업데이트 로그
 
-## 2026-04-07 v1.1.4
-- 댓글 관리 카드 디자인을 확장했다. 각 카드에 해당 티어표 썸네일을 붙이고, `원래 댓글`과 `새 댓글/새 답글`을 한 번에 비교해서 볼 수 있게 스레드 블록 구조로 바꿨다.
-- 댓글 알림 조회 API는 이제 티어표 썸네일과 부모 댓글 내용을 함께 내려준다. 답글 알림에서는 어떤 댓글에 어떤 답글이 달렸는지 바로 읽을 수 있다.
-- 일반 댓글 카드(`commentItem`)도 더 카드형이고 세련된 톤으로 정리했다. 본문은 말풍선처럼 분리하고, 답글은 얇은 연결선과 보조 배지로 관계가 자연스럽게 읽히도록 다듬었다.
-- 확인: `node --check backend/src/db.js`, `npm run build`
-
-## 2026-04-07 v1.1.3
-- 댓글 답글 입력 UX를 다듬었다. `답글` 버튼을 누르면 입력창이 열리자마자 자동으로 포커스가 이동하고, 포커스 전에도 구분이 되도록 답글 입력 영역 카드와 textarea 기본 경계선을 보강했다.
-- 답글 등록 버튼도 기존의 작은 기본형 버튼 대신 프로젝트 전반의 저장 계열 CTA 문법과 같은 `btn--save` 스타일로 맞췄다.
+## 2026-04-06 v1.0.105
+- 사이트 최초 접속 시 로그인/세션 확인이 끝나기 전 게스트 UI처럼 보였다가 뒤늦게 로그인 상태로 바뀌는 깜빡임을 줄이기 위해, 앱 공통 초기 로딩 화면을 추가했다.
+- 홈 화면의 주제 템플릿 목록도 API 응답 전에는 `표시할 주제 템플릿이 없어요.`를 바로 보여주지 않고, `주제 템플릿을 불러오고 있어요.` 로딩 카드가 먼저 나오도록 정리했다.
 - 확인: `npm run build`
 
-## 2026-04-07 v1.1.2
-- 댓글 알림 테이블을 기존 DB에서도 안전하게 올릴 수 있도록 스키마 보정 로직을 추가했다. 예전 형태의 `comment_notifications` 또는 `tierlist_comments` 테이블이 이미 있어도 `ALTER TABLE ... ADD COLUMN IF NOT EXISTS`로 `is_read`, `read_at`, `notification_type`, `actor_user_id`, `parent_comment_id`, `updated_at`를 보강한다.
-- 이 수정으로 기존 DB에서 `/api/comments/inbox/unread-count` 호출 시 `Unknown column 'is_read' in 'WHERE'`가 나던 문제를 해결한다.
-- 확인: `node --check backend/src/db.js`, `npm run build`
-
-## 2026-04-07 v1.1.1
-- 댓글 시스템을 `v1.1.0` 기준 위에 다시 복구했다. 티어표 댓글/답글용 DB 테이블(`tierlist_comments`)과 댓글 알림 테이블(`comment_notifications`)을 추가하고, 댓글 작성 시 `내 티어표에 새 댓글`, `내 댓글에 새 답글` 알림이 생성되도록 했다.
-- 티어표 API에 댓글 조회/작성/삭제를 추가했다. 비공개 티어표의 댓글은 기존 티어표 접근 권한을 그대로 따르며, 답글은 1단계까지만 허용한다.
-- 댓글 관리 전용 `/comments` 화면을 추가했다. 안 읽은 댓글만 보기, 모두 읽음 처리, 개별 red dot, 카드 클릭 시 해당 티어표의 댓글 위치로 바로 이동하는 흐름을 붙였다.
-- 왼쪽 사이드 메뉴에 `댓글 관리`를 추가하고, 읽지 않은 댓글이 하나라도 있으면 메뉴 아이콘에 빨간 dot이 표시되도록 했다.
-- 티어표 편집 화면과 `preview=1` 보기 화면 모두 저장된 티어표 하단에서 같은 댓글 카드 컴포넌트를 재사용하도록 정리했다. 작성자가 아닌 사용자는 프리뷰 화면 아래에서 댓글을 보고 작성할 수 있다.
-- 프리뷰 자동 전환 시 `commentId` 쿼리가 유지되도록 보정해 댓글 관리함에서 특정 댓글 위치로 이동하는 흐름이 끊기지 않게 했다.
-- 확인: `node --check backend/src/routes/tierlists.js`, `node --check backend/src/routes/comments.js`, `npm run build`
-
-## 2026-04-07 v1.1.0
-- 홈 화면을 템플릿 목록이 아니라 `공개 티어표 피드`로 다시 구성했다. 공개 티어표는 최신 업데이트순으로 표시하고, 관리자가 추천한 티어표는 상단 `추천 티어표` 섹션에 별도로 유지한다.
-- 템플릿 목록은 새 `/templates` 화면으로 분리했다. 기존 템플릿 카드 문법과 즐겨찾기 토글은 그대로 유지하면서, 홈과 템플릿의 역할을 분리했다.
-- 일반 `/api/topics`는 이제 관리자 계정이라도 `비공개 템플릿`을 포함하지 않는다. 관리자 화면은 별도 `/api/admin/templates` 목록 API를 사용해 비공개 템플릿까지 관리한다.
-- 사용자 아바타가 없을 때 표시하는 fallback 이니셜 기준을 계정명보다 `닉네임 우선`으로 통일했다. 홈/주제 허브/나의 티어표/즐겨찾기/팔로우 피드/검색 결과/사용자 프로필/앱 셸까지 같은 helper를 사용한다.
-- 확인: `npm run build`
-
-## 2026-04-07 기준 복원 메모
-- 현재 작업 트리는 사용자 요청에 따라 `v1.0.104` 태그 기준으로 전체 복원했다.
-- 복원 이유: 티어표 편집 화면에 `initial loading states`와 이후 홈 피드/댓글 기능을 얹는 과정에서 새로고침 시 사이트 전체가 멈추는 회귀가 발생했고, 편집 화면 진입 경로도 일부 저장본에서 `freeform`으로 잘못 열리는 문제가 겹쳤다.
-- 따라서 다음 작업자는 `v1.0.104`를 안정 기준선으로 삼고, 홈 피드/댓글 기능은 이 기준 위에서 다시 단계적으로 구현해야 한다.
-
 ## 2026-04-06 v1.0.104
 - 관리자 아이템 사용 횟수 기준을 실제 티어표 배치 기준으로 정리했다. 이제 `pool_json`에 남아 있는 미사용 후보는 사용 횟수에 포함하지 않고, `groups_json`에 실제 배치된 아이템만 사용된 것으로 계산한다.
 - 템플릿 아이템 사용 횟수도 같은 이미지가 연결된 템플릿 개수가 아니라, 해당 기본 아이템이 저장된 티어표 보드에 실제로 배치된 횟수를 기준으로 계산한다.

frontend/src/App.vue

@@ -2,9 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
-import { commentsPath, editorNewPath, favoritesPath, followingFeedPath, homePath, loginPath, mePath, templatesPath } from './lib/paths'
-import { displayInitialFrom } from './lib/display'
-import { api } from './lib/api'
+import { editorNewPath, favoritesPath, followingFeedPath, homePath, loginPath, mePath } from './lib/paths'
 import { toApiUrl } from './lib/runtime'
 import { useToast } from './composables/useToast'
 import iconDockToLeft from './assets/icons/dock_to_left.svg'
@@ -32,7 +30,7 @@ const leftRailCollapsed = ref(false)
 const mobileLeftNavOpen = ref(false)
 const rightRailOpen = ref(true)
 const searchQuery = ref('')
-const leftRailSearchPlaceholder = computed(() => (route.name === 'templates' ? '주제 템플릿 검색' : '공개 티어표 검색'))
+const leftRailSearchPlaceholder = '주제 템플릿 검색'
 const isCollapsedSearchOpen = ref(false)
 const isGuideModalOpen = ref(false)
 const themeMode = ref('dark')
@@ -41,7 +39,6 @@ const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 14
 const backendState = ref('online')
 const backendMessage = ref('')
 const isFullscreenActive = ref(false)
-const unreadCommentCount = ref(0)
 provide('rightRailOpen', rightRailOpen)
 provide('localRightRailTarget', '#local-right-rail-root')
 
@@ -73,12 +70,10 @@ const shellStyle = computed(() => ({
 }))
 const leftNavItems = computed(() => {
   const items = [
-    { key: 'home', label: '홈', path: '/', iconSrc: iconGridView },
-    { key: 'templates', label: '템플릿', path: '/templates', iconSrc: iconDashboardCustomize },
+    { key: 'home', label: '주제 선택', path: '/', iconSrc: iconGridView },
     { 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 },
-    { key: 'comments', label: '댓글 관리', path: commentsPath(), iconSrc: iconMenuBook, requiresAuth: true, showDot: unreadCommentCount.value > 0 },
     { key: 'profile', label: '설정', path: '/profile', iconSrc: iconSettings, requiresAuth: true },
   ]
   return items.filter((item) => !item.requiresAuth || (authReady.value && auth.user))
@@ -160,15 +155,13 @@ const showSettingsThemePanel = computed(() => route.name === 'profile')
 const showTopicViewToggle = computed(() => route.name === 'topicHub')
 const topicViewMode = computed(() => (route.query.view === 'list' ? 'list' : 'grid'))
 const showBackendFallback = computed(() => !isPreviewMode.value && ['maintenance', 'offline'].includes(backendState.value))
+const showInitialAppLoading = computed(() => !authReady.value && !showBackendFallback.value)
 const shouldLockRightRailBodyScroll = computed(() => isRightRailOverlay.value && rightRailOpen.value && !showBackendFallback.value)
 const leftBottomPrimaryAction = computed(() => {
   if (!authReady.value) return null
   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 }
@@ -179,22 +172,10 @@ const leftBottomPrimaryAction = computed(() => {
 const routeMeta = computed(() => {
   if (route.name === 'home') {
     return {
-      title: '홈',
-      subtitle: '공개 티어표 피드',
+      title: '주제 선택',
+      subtitle: '주제 템플릿 선택과 커스텀 보드 시작',
       contextTitle: '빠른 시작',
-      contextText: auth.user ? '추천 티어표와 최신 공개 티어표를 둘러보고 바로 새 작업을 시작할 수 있어요.' : '로그인하면 커스텀 티어표 생성과 개인 목록 관리가 열립니다.',
-      actionLabel: '템플릿 보기',
-      action: () => {
-        router.push(templatesPath())
-      },
-    }
-  }
-  if (route.name === 'templates') {
-    return {
-      title: '템플릿',
-      subtitle: '주제 템플릿 선택',
-      contextTitle: '빠른 시작',
-      contextText: auth.user ? '주제 템플릿을 고르거나 커스텀 티어표 만들기로 바로 시작할 수 있어요.' : '로그인하면 커스텀 티어표 생성과 개인 목록 관리가 열립니다.',
+      contextText: auth.user ? '커스텀 티어표를 만들거나 원하는 주제를 바로 선택할 수 있어요.' : '로그인하면 커스텀 티어표 생성과 개인 목록 관리가 열립니다.',
       actionLabel: auth.user ? '커스텀 티어표 만들기' : '로그인하러 가기',
       action: () => {
         router.push(auth.user ? editorNewPath('freeform') : loginPath())
@@ -264,16 +245,6 @@ const routeMeta = computed(() => {
       action: () => router.push(favoritesPath()),
     }
   }
-  if (route.name === 'comments') {
-    return {
-      title: '댓글 관리',
-      subtitle: '댓글과 답글 확인',
-      contextTitle: '알림',
-      contextText: '내 티어표에 달린 댓글과 내 댓글에 달린 답글을 확인하고 바로 해당 위치로 이동할 수 있어요.',
-      actionLabel: '나의 티어표 보기',
-      action: () => router.push(mePath()),
-    }
-  }
   if (route.name === 'userProfile') {
     return {
       title: '작성자 프로필',
@@ -326,23 +297,6 @@ function handleBackendStatus(event) {
   backendMessage.value = typeof event?.detail?.message === 'string' ? event.detail.message : ''
 }
 
-function handleCommentInboxUpdated(event) {
-  unreadCommentCount.value = Math.max(0, Number(event?.detail?.unreadCount || 0))
-}
-
-async function refreshUnreadCommentCount() {
-  if (!authReady.value || !auth.user) {
-    unreadCommentCount.value = 0
-    return
-  }
-  try {
-    const data = await api.getCommentInboxUnreadCount()
-    unreadCommentCount.value = Math.max(0, Number(data.unreadCount || 0))
-  } catch (error) {
-    unreadCommentCount.value = 0
-  }
-}
-
 function syncFullscreenState() {
   if (typeof document === 'undefined') return
   isFullscreenActive.value = !!(document.fullscreenElement || document.webkitFullscreenElement)
@@ -374,7 +328,6 @@ onMounted(async () => {
     syncViewportWidth()
     syncFullscreenState()
     window.addEventListener('tier-maker:backend-status', handleBackendStatus)
-    window.addEventListener('tier-maker:comment-inbox-updated', handleCommentInboxUpdated)
     window.addEventListener('resize', syncViewportWidth)
     window.addEventListener('keydown', handleGlobalKeydown)
     document.addEventListener('fullscreenchange', syncFullscreenState)
@@ -391,7 +344,6 @@ onMounted(async () => {
     rightRailOpen.value = true
   }
   searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
-  await refreshUnreadCommentCount()
 })
 
 function handleGlobalKeydown(event) {
@@ -455,7 +407,6 @@ async function toggleFullscreen() {
 onBeforeUnmount(() => {
   if (typeof window !== 'undefined') {
     window.removeEventListener('tier-maker:backend-status', handleBackendStatus)
-    window.removeEventListener('tier-maker:comment-inbox-updated', handleCommentInboxUpdated)
     window.removeEventListener('resize', syncViewportWidth)
     window.removeEventListener('keydown', handleGlobalKeydown)
     document.removeEventListener('fullscreenchange', syncFullscreenState)
@@ -474,14 +425,6 @@ watch(
       mobileLeftNavOpen.value = false
       rightRailOpen.value = false
     }
-    refreshUnreadCommentCount()
-  }
-)
-
-watch(
-  () => auth.user?.id,
-  () => {
-    refreshUnreadCommentCount()
   }
 )
 
@@ -597,7 +540,7 @@ function handleLeftRailSearch() {
 function submitGlobalSearch() {
   const query = (searchQuery.value || '').trim()
   isCollapsedSearchOpen.value = false
-  router.push(route.name === 'templates' ? templatesPath(query) : homePath(query))
+  router.push(homePath(query))
 }
 
 function reloadApp() {
@@ -638,6 +581,16 @@ function reloadApp() {
         </section>
       </main>
     </template>
+    <template v-else-if="showInitialAppLoading">
+      <main class="appLoading">
+        <section class="appLoading__card">
+          <div class="appLoading__eyebrow">Loading</div>
+          <h1 class="appLoading__title">접속 정보를 확인하고 있어요.</h1>
+          <p class="appLoading__desc">로그인 상태와 기본 데이터를 확인한 뒤 화면을 보여드릴게요.</p>
+          <div class="appLoading__spinner" aria-hidden="true"></div>
+        </section>
+      </main>
+    </template>
     <template v-else>
       <aside class="leftRail">
         <div class="leftRail__top railHeader">
@@ -651,7 +604,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">{{ displayInitialFrom(auth.user?.nickname, accountName, 'U') }}</div>
+            <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" :class="{ 'appUserCard__email--hint': isAccountEmailHint }">{{ accountEmail }}</div>
@@ -697,7 +650,6 @@ function reloadApp() {
               <span class="leftNav__glyph">
                 <SvgIcon v-if="item.iconSrc" :src="item.iconSrc" :size="24" />
                 <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
-                <span v-if="item.showDot" class="leftNav__dot" aria-hidden="true"></span>
               </span>
               <span class="leftNav__label">{{ item.label }}</span>
             </RouterLink>
@@ -896,7 +848,8 @@ function reloadApp() {
   transition: grid-template-columns 220ms ease;
 }
 
-.backendFallback {
+.backendFallback,
+.appLoading {
   min-width: 100dvw;
   min-height: 100dvh;
   display: grid;
@@ -907,7 +860,8 @@ function reloadApp() {
     var(--theme-shell-bg);
 }
 
-.backendFallback__card {
+.backendFallback__card,
+.appLoading__card {
   width: min(100%, 560px);
   display: grid;
   gap: 18px;
@@ -918,7 +872,8 @@ function reloadApp() {
   box-shadow: inset 0 1px 0 var(--theme-card-shadow);
 }
 
-.backendFallback__eyebrow {
+.backendFallback__eyebrow,
+.appLoading__eyebrow {
   color: var(--theme-accent-strong);
   font-size: 12px;
   font-weight: 800;
@@ -926,20 +881,37 @@ function reloadApp() {
   text-transform: uppercase;
 }
 
-.backendFallback__title {
+.backendFallback__title,
+.appLoading__title {
   margin: 0;
   font-size: clamp(28px, 4vw, 42px);
   line-height: 1.05;
   letter-spacing: -0.04em;
 }
 
-.backendFallback__desc {
+.backendFallback__desc,
+.appLoading__desc {
   margin: 0;
   color: var(--theme-text-muted);
   font-size: 15px;
   line-height: 1.7;
 }
 
+.appLoading__spinner {
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  border: 3px solid color-mix(in srgb, var(--theme-text-faint) 34%, transparent);
+  border-top-color: var(--theme-accent-strong);
+  animation: appLoadingSpin 820ms linear infinite;
+}
+
+@keyframes appLoadingSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .backendFallback__actions {
   display: flex;
   justify-content: flex-start;
@@ -1302,24 +1274,12 @@ function reloadApp() {
   /* width: 28px; */
   /* height: 28px; */
   /* border-radius: 10px; */
-  position: relative;
   display: grid;
   place-items: center;
   /* background: rgba(255, 255, 255, 0.06); */
   flex: 0 0 auto;
 }
 
-.leftNav__dot {
-  position: absolute;
-  top: -2px;
-  right: -3px;
-  width: 9px;
-  height: 9px;
-  border-radius: 999px;
-  background: #ff4d67;
-  box-shadow: 0 0 0 2px var(--theme-surface);
-}
-
 .appShell--leftCollapsed .leftRail__top {
   justify-content: center;
 }

frontend/src/components/TierListCommentsCard.vue

@@ -1,635 +0,0 @@
-<script setup>
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
-import { api } from '../lib/api'
-import { displayInitialFrom } from '../lib/display'
-import { loginPath } from '../lib/paths'
-import { toApiUrl } from '../lib/runtime'
-
-const props = defineProps({
-  tierListId: {
-    type: String,
-    default: '',
-  },
-  canWrite: {
-    type: Boolean,
-    default: false,
-  },
-  currentUserId: {
-    type: String,
-    default: '',
-  },
-  title: {
-    type: String,
-    default: '댓글',
-  },
-  description: {
-    type: String,
-    default: '티어표에 대한 의견을 남기고 답글로 대화를 이어갈 수 있어요.',
-  },
-})
-
-const route = useRoute()
-const comments = ref([])
-const isLoading = ref(false)
-const error = ref('')
-const commentDraft = ref('')
-const replyDrafts = ref({})
-const openedReplyComposerId = ref('')
-const submittingTargetId = ref('')
-const deletingCommentId = ref('')
-const replyInputRefs = ref({})
-let activeCommentRetryTimer = 0
-
-const totalCommentCount = computed(() =>
-  comments.value.reduce((count, comment) => count + 1 + (comment.replies?.length || 0), 0)
-)
-const loginTarget = computed(() => loginPath(route.fullPath))
-const highlightedCommentId = computed(() =>
-  typeof route.query.commentId === 'string' ? route.query.commentId.trim() : ''
-)
-
-function avatarUrlOf(user) {
-  return user?.authorAvatarSrc ? toApiUrl(user.authorAvatarSrc) : ''
-}
-
-function avatarFallbackOf(user) {
-  return displayInitialFrom(user?.authorName, user?.authorAccountName, '?')
-}
-
-function displayNameOf(user) {
-  return user?.authorName || '알 수 없음'
-}
-
-function formatDate(ts) {
-  return new Date(Number(ts || 0)).toLocaleString('ko-KR', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
-function isOwnComment(comment) {
-  return !!props.currentUserId && props.currentUserId === comment?.authorId
-}
-
-function isHighlighted(commentId) {
-  return !!commentId && highlightedCommentId.value === commentId
-}
-
-function clearActiveCommentRetry() {
-  if (typeof window === 'undefined' || !activeCommentRetryTimer) return
-  window.clearTimeout(activeCommentRetryTimer)
-  activeCommentRetryTimer = 0
-}
-
-async function scrollToHighlightedComment(attempt = 0) {
-  clearActiveCommentRetry()
-  if (!highlightedCommentId.value || typeof document === 'undefined') return
-  await nextTick()
-  const target = document.querySelector(`[data-comment-id="${highlightedCommentId.value}"]`)
-  if (target) {
-    target.scrollIntoView({ behavior: attempt === 0 ? 'auto' : 'smooth', block: 'center' })
-    return
-  }
-  if (attempt >= 6 || typeof window === 'undefined') return
-  activeCommentRetryTimer = window.setTimeout(() => {
-    scrollToHighlightedComment(attempt + 1)
-  }, 180)
-}
-
-async function loadComments() {
-  if (!props.tierListId) {
-    comments.value = []
-    return
-  }
-  isLoading.value = true
-  error.value = ''
-  try {
-    const data = await api.listTierListComments(props.tierListId)
-    comments.value = Array.isArray(data.comments) ? data.comments : []
-    scrollToHighlightedComment()
-  } catch (loadError) {
-    error.value = '댓글을 불러오지 못했어요.'
-  } finally {
-    isLoading.value = false
-  }
-}
-
-async function submitComment(parentCommentId = '') {
-  if (!props.canWrite || !props.tierListId) return
-  const isReply = !!parentCommentId
-  const draftValue = isReply ? replyDrafts.value[parentCommentId] || '' : commentDraft.value
-  const content = String(draftValue || '').trim()
-  if (!content) return
-
-  submittingTargetId.value = parentCommentId || 'root'
-  error.value = ''
-  try {
-    const data = await api.createTierListComment(props.tierListId, {
-      content,
-      parentCommentId,
-    })
-    comments.value = Array.isArray(data.comments) ? data.comments : []
-    if (isReply) {
-      replyDrafts.value = { ...replyDrafts.value, [parentCommentId]: '' }
-      openedReplyComposerId.value = ''
-    } else {
-      commentDraft.value = ''
-    }
-    await nextTick()
-    if (data.createdCommentId && typeof window !== 'undefined') {
-      const target = document.querySelector(`[data-comment-id="${data.createdCommentId}"]`)
-      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'center' })
-    }
-  } catch (submitError) {
-    const code = submitError?.data?.error
-    if (code === 'comment_reply_depth_invalid') {
-      error.value = '답글에는 다시 답글을 달 수 없어요.'
-    } else {
-      error.value = '댓글을 저장하지 못했어요.'
-    }
-  } finally {
-    submittingTargetId.value = ''
-  }
-}
-
-async function deleteComment(commentId) {
-  if (!commentId || !props.tierListId) return
-  deletingCommentId.value = commentId
-  error.value = ''
-  try {
-    const data = await api.deleteTierListComment(props.tierListId, commentId)
-    comments.value = Array.isArray(data.comments) ? data.comments : []
-  } catch (deleteError) {
-    error.value = '댓글을 삭제하지 못했어요.'
-  } finally {
-    deletingCommentId.value = ''
-  }
-}
-
-function registerReplyInput(commentId, element) {
-  if (!commentId) return
-  if (element) {
-    replyInputRefs.value[commentId] = element
-    return
-  }
-  delete replyInputRefs.value[commentId]
-}
-
-async function focusReplyInput(commentId) {
-  if (!commentId) return
-  await nextTick()
-  const target = replyInputRefs.value[commentId]
-  if (target && typeof target.focus === 'function') {
-    target.focus()
-    const value = target.value || ''
-    if (typeof target.setSelectionRange === 'function') {
-      target.setSelectionRange(value.length, value.length)
-    }
-  }
-}
-
-async function toggleReplyComposer(commentId) {
-  const nextId = openedReplyComposerId.value === commentId ? '' : commentId
-  openedReplyComposerId.value = nextId
-  if (!nextId) return
-  await focusReplyInput(nextId)
-}
-
-watch(() => props.tierListId, loadComments, { immediate: true })
-watch(highlightedCommentId, () => {
-  scrollToHighlightedComment()
-})
-
-onBeforeUnmount(() => {
-  clearActiveCommentRetry()
-})
-</script>
-
-<template>
-  <section class="commentsCard">
-    <header class="commentsCard__head">
-      <div>
-        <div class="commentsCard__eyebrow">Comments</div>
-        <h3 class="commentsCard__title">{{ title }}</h3>
-        <p class="commentsCard__desc">{{ description }}</p>
-      </div>
-      <div class="commentsCard__count">{{ totalCommentCount }}개</div>
-    </header>
-
-    <div v-if="error" class="commentsCard__error">{{ error }}</div>
-
-    <div v-if="props.canWrite" class="commentsComposer">
-      <textarea
-        v-model="commentDraft"
-        class="commentsComposer__input"
-        maxlength="2000"
-        rows="3"
-        placeholder="이 티어표에 대한 의견을 남겨보세요."
-      />
-      <div class="commentsComposer__footer">
-        <span class="commentsComposer__hint">{{ commentDraft.length }}/2000</span>
-        <button class="btn btn--save btn--small" type="button" :disabled="!commentDraft.trim() || submittingTargetId === 'root'" @click="submitComment()">
-          댓글 등록
-        </button>
-      </div>
-    </div>
-    <div v-else class="commentsLoginCta">
-      <div class="commentsLoginCta__text">로그인하면 댓글과 답글을 남길 수 있어요.</div>
-      <RouterLink class="btn btn--ghost btn--small" :to="loginTarget">로그인</RouterLink>
-    </div>
-
-    <div v-if="isLoading" class="commentsCard__empty">댓글을 불러오는 중이에요.</div>
-    <div v-else-if="comments.length === 0" class="commentsCard__empty">아직 댓글이 없어요. 첫 댓글을 남겨보세요.</div>
-
-    <div v-else class="commentsThread">
-      <article
-        v-for="comment in comments"
-        :key="comment.id"
-        class="commentItem"
-        :class="{ 'commentItem--highlighted': isHighlighted(comment.id) }"
-        :data-comment-id="comment.id"
-      >
-        <div class="commentItem__head">
-          <div class="commentItem__author">
-            <img v-if="avatarUrlOf(comment)" class="commentItem__avatar" :src="avatarUrlOf(comment)" :alt="displayNameOf(comment)" draggable="false" />
-            <div v-else class="commentItem__avatar commentItem__avatar--fallback">{{ avatarFallbackOf(comment) }}</div>
-            <div class="commentItem__meta">
-              <div class="commentItem__metaTop">
-                <div class="commentItem__name">{{ displayNameOf(comment) }}</div>
-                <span class="commentItem__badge">댓글</span>
-              </div>
-              <div class="commentItem__date">{{ formatDate(comment.createdAt) }}</div>
-            </div>
-          </div>
-          <div class="commentItem__actions">
-            <button v-if="props.canWrite" class="commentItem__action" type="button" @click="toggleReplyComposer(comment.id)">답글</button>
-            <button
-              v-if="isOwnComment(comment)"
-              class="commentItem__action commentItem__action--danger"
-              type="button"
-              :disabled="deletingCommentId === comment.id"
-              @click="deleteComment(comment.id)"
-            >
-              삭제
-            </button>
-          </div>
-        </div>
-        <div class="commentItem__body">{{ comment.content }}</div>
-
-        <div v-if="openedReplyComposerId === comment.id && props.canWrite" class="replyComposer">
-          <textarea
-            v-model="replyDrafts[comment.id]"
-            :ref="(element) => registerReplyInput(comment.id, element)"
-            class="commentsComposer__input commentsComposer__input--reply"
-            maxlength="2000"
-            rows="2"
-            placeholder="답글을 입력하세요."
-          />
-          <div class="commentsComposer__footer">
-            <span class="commentsComposer__hint">{{ (replyDrafts[comment.id] || '').length }}/2000</span>
-            <button class="btn btn--save commentsComposer__submit" type="button" :disabled="!(replyDrafts[comment.id] || '').trim() || submittingTargetId === comment.id" @click="submitComment(comment.id)">
-              답글 등록
-            </button>
-          </div>
-        </div>
-
-        <div v-if="comment.replies?.length" class="replyList">
-          <article
-            v-for="reply in comment.replies"
-            :key="reply.id"
-            class="commentItem commentItem--reply"
-            :class="{ 'commentItem--highlighted': isHighlighted(reply.id) }"
-            :data-comment-id="reply.id"
-          >
-            <div class="commentItem__head">
-              <div class="commentItem__author">
-                <img v-if="avatarUrlOf(reply)" class="commentItem__avatar" :src="avatarUrlOf(reply)" :alt="displayNameOf(reply)" draggable="false" />
-                <div v-else class="commentItem__avatar commentItem__avatar--fallback">{{ avatarFallbackOf(reply) }}</div>
-                <div class="commentItem__meta">
-                  <div class="commentItem__metaTop">
-                    <div class="commentItem__name">{{ displayNameOf(reply) }}</div>
-                    <span class="commentItem__badge commentItem__badge--reply">답글</span>
-                  </div>
-                  <div class="commentItem__date">{{ formatDate(reply.createdAt) }}</div>
-                </div>
-              </div>
-              <div class="commentItem__actions">
-                <button
-                  v-if="isOwnComment(reply)"
-                  class="commentItem__action commentItem__action--danger"
-                  type="button"
-                  :disabled="deletingCommentId === reply.id"
-                  @click="deleteComment(reply.id)"
-                >
-                  삭제
-                </button>
-              </div>
-            </div>
-            <div class="commentItem__body">{{ reply.content }}</div>
-          </article>
-        </div>
-      </article>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.commentsCard {
-  margin-top: 24px;
-  padding: 24px;
-  border-radius: 28px;
-  border: 1px solid var(--theme-card-border);
-  background: var(--theme-card-bg);
-  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
-}
-
-.commentsCard__head {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 18px;
-}
-
-.commentsCard__eyebrow {
-  font-size: 11px;
-  font-weight: 900;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--theme-text-faint);
-}
-
-.commentsCard__title {
-  margin: 6px 0 8px;
-  font-size: 22px;
-  font-weight: 900;
-}
-
-.commentsCard__desc {
-  margin: 0;
-  color: var(--theme-text-muted);
-}
-
-.commentsCard__count {
-  flex: 0 0 auto;
-  align-self: flex-start;
-  padding: 8px 12px;
-  border-radius: 999px;
-  background: var(--theme-surface-soft);
-  color: var(--theme-text-muted);
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.commentsCard__error {
-  margin-bottom: 16px;
-  padding: 12px 14px;
-  border-radius: 16px;
-  border: 1px solid var(--theme-danger-border);
-  background: var(--theme-danger-bg);
-  color: var(--theme-text);
-}
-
-.commentsComposer,
-.commentsLoginCta,
-.commentItem,
-.commentItem--reply {
-  border: 1px solid var(--theme-card-border);
-  background: var(--theme-surface);
-}
-
-.commentsComposer,
-.commentsLoginCta {
-  margin-bottom: 18px;
-  padding: 16px;
-  border-radius: 22px;
-}
-
-.commentsComposer__input {
-  width: 100%;
-  min-height: 92px;
-  resize: vertical;
-  padding: 14px 16px;
-  border-radius: 18px;
-  border: 1px solid var(--theme-field-border);
-  background: var(--theme-input-bg);
-  color: var(--theme-text);
-  box-sizing: border-box;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-field-border) 45%, transparent);
-}
-
-.commentsComposer__input--reply {
-  min-height: 72px;
-  background: color-mix(in srgb, var(--theme-input-bg) 82%, var(--theme-surface-soft));
-}
-
-.commentsComposer__input:focus {
-  outline: none;
-  border-color: color-mix(in srgb, var(--theme-accent) 60%, var(--theme-field-border));
-  box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 52%, transparent),
-    0 0 0 3px color-mix(in srgb, var(--theme-accent) 16%, transparent);
-}
-
-.commentsComposer__footer,
-.commentsLoginCta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.commentsComposer__footer {
-  margin-top: 12px;
-}
-
-.commentsComposer__hint,
-.commentsLoginCta__text {
-  color: var(--theme-text-muted);
-  font-size: 13px;
-}
-
-.commentsCard__empty {
-  padding: 20px 0;
-  color: var(--theme-text-muted);
-}
-
-.commentsThread {
-  display: grid;
-  gap: 16px;
-}
-
-.commentItem {
-  position: relative;
-  padding: 18px 18px 16px;
-  border-radius: 24px;
-  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 88%, var(--theme-surface-soft)) 0%, var(--theme-surface) 100%);
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, white 6%, transparent),
-    0 14px 32px rgba(0, 0, 0, 0.08);
-}
-
-.commentItem--reply {
-  margin-top: 12px;
-  margin-left: 28px;
-  border-radius: 20px;
-  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 6%, var(--theme-surface)) 0%, var(--theme-surface) 100%);
-}
-
-.commentItem--reply::before {
-  content: '';
-  position: absolute;
-  top: 22px;
-  left: -16px;
-  width: 12px;
-  height: calc(100% - 44px);
-  border-left: 2px solid color-mix(in srgb, var(--theme-accent) 36%, var(--theme-card-border));
-  border-bottom: 2px solid color-mix(in srgb, var(--theme-accent) 36%, var(--theme-card-border));
-  border-bottom-left-radius: 14px;
-}
-
-.commentItem--highlighted {
-  border-color: color-mix(in srgb, var(--theme-accent) 65%, var(--theme-card-border));
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 38%, transparent);
-}
-
-.commentItem__head {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.commentItem__author {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.commentItem__avatar {
-  width: 38px;
-  height: 38px;
-  border-radius: 999px;
-  object-fit: cover;
-  border: 1px solid var(--theme-avatar-border);
-  background: var(--theme-border);
-  flex: 0 0 auto;
-}
-
-.commentItem__avatar--fallback {
-  display: grid;
-  place-items: center;
-  font-size: 14px;
-  font-weight: 900;
-}
-
-.commentItem__meta {
-  min-width: 0;
-}
-
-.commentItem__metaTop {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.commentItem__name {
-  font-size: 14px;
-  font-weight: 800;
-}
-
-.commentItem__badge {
-  display: inline-flex;
-  align-items: center;
-  min-height: 24px;
-  padding: 0 9px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--theme-surface-soft) 84%, transparent);
-  color: var(--theme-text-muted);
-  font-size: 11px;
-  font-weight: 900;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.commentItem__badge--reply {
-  background: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-surface-soft));
-  color: var(--theme-text);
-}
-
-.commentItem__date {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--theme-text-faint);
-}
-
-.commentItem__actions {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.commentItem__action {
-  border: 0;
-  background: transparent;
-  color: var(--theme-text-muted);
-  font-size: 13px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.commentItem__action--danger {
-  color: var(--theme-danger-text, #ff8f8f);
-}
-
-.commentItem__body {
-  padding: 14px 15px;
-  border-radius: 18px;
-  background: color-mix(in srgb, var(--theme-input-bg) 82%, var(--theme-surface));
-  border: 1px solid color-mix(in srgb, var(--theme-card-border) 76%, transparent);
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 1.6;
-}
-
-.replyComposer {
-  margin-top: 14px;
-  padding: 14px;
-  border-radius: 18px;
-  border: 1px solid var(--theme-card-border);
-  background: color-mix(in srgb, var(--theme-surface) 76%, var(--theme-surface-soft));
-}
-
-.commentsComposer__submit {
-  min-width: 112px;
-  min-height: 42px;
-}
-
-@media (max-width: 860px) {
-  .commentsCard {
-    padding: 20px;
-  }
-
-  .commentsCard__head,
-  .commentsComposer__footer,
-  .commentsLoginCta,
-  .commentItem__head {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .commentItem--reply {
-    margin-left: 14px;
-  }
-
-  .commentItem--reply::before {
-    left: -10px;
-    width: 8px;
-  }
-}
-</style>

frontend/src/lib/api.js

@@ -67,7 +67,6 @@ 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' }),
@@ -170,19 +169,10 @@ export const api = {
   followUser: (userId) => request(`/api/users/${encodeURIComponent(userId)}/follow`, { method: 'POST', body: {} }),
   unfollowUser: (userId) => request(`/api/users/${encodeURIComponent(userId)}/follow`, { method: 'DELETE' }),
   getTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`),
-  listTierListComments: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/comments`),
-  createTierListComment: (id, payload) =>
-    request(`/api/tierlists/${encodeURIComponent(id)}/comments`, { method: 'POST', body: payload }),
-  deleteTierListComment: (id, commentId) =>
-    request(`/api/tierlists/${encodeURIComponent(id)}/comments/${encodeURIComponent(commentId)}`, { method: 'DELETE' }),
   favoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'POST' }),
   unfavoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'DELETE' }),
   deleteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`, { method: 'DELETE' }),
   duplicateTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/duplicate`, { method: 'POST' }),
-  listCommentInbox: ({ unreadOnly = false } = {}) =>
-    request(`/api/comments/inbox?unreadOnly=${encodeURIComponent(unreadOnly ? '1' : '0')}`),
-  getCommentInboxUnreadCount: () => request('/api/comments/inbox/unread-count'),
-  markCommentInboxRead: (payload) => request('/api/comments/inbox/read', { method: 'POST', body: payload }),
   requestTierListTemplate: (payload) => request('/api/tierlists/template-request', { method: 'POST', body: payload }),
   saveTierList: (payload) => request('/api/tierlists', { method: 'POST', body: payload }),
   uploadTierListThumbnail: async (file) => {

frontend/src/lib/display.js

@@ -1,9 +0,0 @@
-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
-}

frontend/src/lib/paths.js

@@ -7,11 +7,6 @@ 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'
@@ -46,10 +41,6 @@ export function followingFeedPath() {
   return '/following'
 }
 
-export function commentsPath() {
-  return '/comments'
-}
-
 export function profilePath() {
   return '/profile'
 }

frontend/src/router/index.js

@@ -1,14 +1,12 @@
 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'
 import MyTierListsView from '../views/MyTierListsView.vue'
 import FavoriteTierListsView from '../views/FavoriteTierListsView.vue'
 import FollowingFeedView from '../views/FollowingFeedView.vue'
-import CommentInboxView from '../views/CommentInboxView.vue'
 import UserProfileView from '../views/UserProfileView.vue'
 import AdminView from '../views/AdminView.vue'
 import ProfileView from '../views/ProfileView.vue'
@@ -20,7 +18,6 @@ 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 },
@@ -28,7 +25,6 @@ export function createRouter() {
       { path: '/me', name: 'me', component: MyTierListsView },
       { path: '/favorites', name: 'favorites', component: FavoriteTierListsView },
       { path: '/following', name: 'followingFeed', component: FollowingFeedView },
-      { path: '/comments', name: 'comments', component: CommentInboxView },
       { path: '/search', name: 'search', component: SearchResultsView },
       { path: '/admin', redirect: '/admin/featured' },
       { path: '/admin/featured', name: 'adminFeatured', component: AdminView },

frontend/src/views/AdminView.vue

@@ -946,7 +946,7 @@ async function selectAdminTemplate(templateId) {
 
 async function refreshTemplates() {
   try {
-    const data = await api.listAdminTemplates()
+    const data = await api.listTopics()
     templates.value = data.topics || []
     featuredTemplateIds.value = templates.value
       .filter((template) => template.displayRank != null)

frontend/src/views/CommentInboxView.vue

@@ -1,433 +0,0 @@
-<script setup>
-import { computed, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { api } from '../lib/api'
-import { displayInitialFrom } from '../lib/display'
-import { editorPath, loginPath } from '../lib/paths'
-import { toApiUrl } from '../lib/runtime'
-import { useToast } from '../composables/useToast'
-
-const router = useRouter()
-const toast = useToast()
-const notifications = ref([])
-const isLoading = ref(false)
-const unreadOnly = ref(false)
-const isMarkingAllRead = ref(false)
-
-const unreadCount = computed(() => notifications.value.filter((item) => !item.isRead).length)
-
-function avatarUrlOf(notification) {
-  return notification.actorAvatarSrc ? toApiUrl(notification.actorAvatarSrc) : ''
-}
-
-function tierListThumbnailUrl(notification) {
-  return notification.tierListThumbnailSrc ? toApiUrl(notification.tierListThumbnailSrc) : ''
-}
-
-function avatarFallbackOf(notification) {
-  return displayInitialFrom(notification.actorName, notification.actorAccountName, '?')
-}
-
-function formatDate(ts) {
-  return new Date(Number(ts || 0)).toLocaleString('ko-KR', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
-function notificationTitle(notification) {
-  return notification.notificationType === 'comment_reply' ? '내 댓글에 답글이 달렸어요.' : '내 티어표에 새 댓글이 달렸어요.'
-}
-
-function notificationLead(notification) {
-  return notification.notificationType === 'comment_reply' ? '원래 댓글과 새 답글을 함께 확인해보세요.' : '내 티어표에 새로 남겨진 댓글입니다.'
-}
-
-function emitUnreadCount(unread) {
-  if (typeof window === 'undefined') return
-  window.dispatchEvent(new CustomEvent('tier-maker:comment-inbox-updated', { detail: { unreadCount: unread } }))
-}
-
-async function loadInbox() {
-  isLoading.value = true
-  try {
-    const data = await api.listCommentInbox({ unreadOnly: unreadOnly.value })
-    notifications.value = Array.isArray(data.notifications) ? data.notifications : []
-    emitUnreadCount(unreadCount.value)
-  } catch (error) {
-    toast.error('댓글 알림을 불러오지 못했어요.')
-  } finally {
-    isLoading.value = false
-  }
-}
-
-async function markOneAsRead(notificationId) {
-  const target = notifications.value.find((item) => item.id === notificationId)
-  if (!target || target.isRead) return
-  target.isRead = true
-  emitUnreadCount(unreadCount.value)
-  try {
-    await api.markCommentInboxRead({ notificationIds: [notificationId] })
-  } catch (error) {
-    target.isRead = false
-    emitUnreadCount(unreadCount.value)
-  }
-}
-
-async function markAllAsRead() {
-  if (!unreadCount.value) return
-  isMarkingAllRead.value = true
-  const original = notifications.value.map((item) => ({ ...item }))
-  notifications.value = notifications.value.map((item) => ({ ...item, isRead: true }))
-  emitUnreadCount(0)
-  try {
-    await api.markCommentInboxRead({ all: true })
-    if (unreadOnly.value) {
-      notifications.value = []
-    }
-  } catch (error) {
-    notifications.value = original
-    emitUnreadCount(unreadCount.value)
-    toast.error('읽음 처리를 완료하지 못했어요.')
-  } finally {
-    isMarkingAllRead.value = false
-  }
-}
-
-async function openNotification(notification) {
-  await markOneAsRead(notification.id)
-  router.push({
-    path: editorPath(notification.topicSlug || notification.topicId, notification.tierListId),
-    query: { commentId: notification.commentId },
-  })
-}
-
-onMounted(async () => {
-  try {
-    await api.me()
-  } catch (error) {
-    toast.error('로그인이 필요해요.')
-    router.push(loginPath('/comments'))
-    return
-  }
-  loadInbox()
-})
-
-watch(unreadOnly, loadInbox)
-</script>
-
-<template>
-  <section class="pageWrap">
-    <section class="pageHead">
-      <div class="pageHead__main">
-        <div class="pageHead__eyebrow">Inbox</div>
-        <h1 class="pageHead__title">댓글 관리</h1>
-        <p class="pageHead__desc">내 티어표에 달린 댓글과, 내 댓글에 달린 답글을 한곳에서 확인하고 바로 이동할 수 있어요.</p>
-      </div>
-    </section>
-
-    <section class="commentInboxToolbar">
-      <label class="commentInboxToolbar__toggle">
-        <input v-model="unreadOnly" type="checkbox" />
-        <span>안 읽은 댓글만 보기</span>
-      </label>
-      <button class="btn btn--ghost btn--small" type="button" :disabled="!unreadCount || isMarkingAllRead" @click="markAllAsRead">
-        모두 읽음 처리
-      </button>
-    </section>
-
-    <section class="commentInboxPanel">
-      <div v-if="isLoading" class="commentInboxEmpty">댓글 알림을 불러오는 중이에요.</div>
-      <div v-else-if="notifications.length === 0" class="commentInboxEmpty">
-        {{ unreadOnly ? '안 읽은 댓글 알림이 없어요.' : '아직 도착한 댓글 알림이 없어요.' }}
-      </div>
-
-      <div v-else class="commentInboxList">
-        <article
-          v-for="notification in notifications"
-          :key="notification.id"
-          class="commentInboxCard"
-          :class="{ 'commentInboxCard--unread': !notification.isRead }"
-        >
-          <button class="commentInboxCard__body" type="button" @click="openNotification(notification)">
-            <div class="commentInboxCard__thumbWrap">
-              <img
-                v-if="tierListThumbnailUrl(notification)"
-                class="commentInboxCard__thumb"
-                :src="tierListThumbnailUrl(notification)"
-                :alt="notification.tierListTitle || '티어표 썸네일'"
-                draggable="false"
-              />
-              <div v-else class="commentInboxCard__thumbFallback">티어표</div>
-            </div>
-            <div class="commentInboxCard__main">
-              <div class="commentInboxCard__titleRow">
-                <div>
-                  <div class="commentInboxCard__title">{{ notificationTitle(notification) }}</div>
-                  <div class="commentInboxCard__lead">{{ notificationLead(notification) }}</div>
-                </div>
-                <div class="commentInboxCard__status">
-                  <span v-if="!notification.isRead" class="commentInboxCard__dot" aria-label="안 읽음"></span>
-                  <span class="commentInboxCard__badge">{{ notification.notificationType === 'comment_reply' ? '답글' : '댓글' }}</span>
-                </div>
-              </div>
-              <div class="commentInboxCard__meta">
-                <img
-                  v-if="avatarUrlOf(notification)"
-                  class="commentInboxCard__avatar"
-                  :src="avatarUrlOf(notification)"
-                  :alt="notification.actorName || '작성자'"
-                  draggable="false"
-                />
-                <div v-else class="commentInboxCard__avatar commentInboxCard__avatar--fallback">{{ avatarFallbackOf(notification) }}</div>
-                <span class="commentInboxCard__actor">{{ notification.actorName }}</span>
-                <span class="commentInboxCard__separator">·</span>
-                <span class="commentInboxCard__date">{{ formatDate(notification.createdAt) }}</span>
-              </div>
-              <div class="commentInboxCard__target">
-                {{ notification.tierListTitle || '제목 없는 티어표' }}
-                <span class="commentInboxCard__targetMeta">/ {{ notification.topicName || notification.topicSlug || notification.topicId }}</span>
-              </div>
-              <div class="commentInboxCard__thread">
-                <div v-if="notification.parentCommentContent" class="commentInboxCard__threadBlock">
-                  <div class="commentInboxCard__threadLabel">원래 댓글</div>
-                  <div class="commentInboxCard__threadText">{{ notification.parentCommentContent }}</div>
-                </div>
-                <div class="commentInboxCard__threadBlock commentInboxCard__threadBlock--accent">
-                  <div class="commentInboxCard__threadLabel">{{ notification.notificationType === 'comment_reply' ? '새 답글' : '새 댓글' }}</div>
-                  <div class="commentInboxCard__threadText">{{ notification.commentContent }}</div>
-                </div>
-              </div>
-            </div>
-          </button>
-        </article>
-      </div>
-    </section>
-  </section>
-</template>
-
-<style scoped>
-.commentInboxToolbar {
-  margin-bottom: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.commentInboxToolbar__toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--theme-text-muted);
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.commentInboxPanel {
-  border-radius: 28px;
-  border: 1px solid var(--theme-card-border);
-  background: var(--theme-card-bg);
-  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
-  padding: 24px;
-}
-
-.commentInboxEmpty {
-  color: var(--theme-text-muted);
-}
-
-.commentInboxList {
-  display: grid;
-  gap: 14px;
-}
-
-.commentInboxCard {
-  border-radius: 22px;
-  border: 1px solid var(--theme-card-border);
-  background: var(--theme-surface);
-  overflow: hidden;
-}
-
-.commentInboxCard--unread {
-  border-color: color-mix(in srgb, var(--theme-accent) 48%, var(--theme-card-border));
-}
-
-.commentInboxCard__body {
-  width: 100%;
-  padding: 18px;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: 140px minmax(0, 1fr);
-  gap: 18px;
-  align-items: stretch;
-}
-
-.commentInboxCard__thumbWrap {
-  width: 100%;
-  aspect-ratio: 16 / 10;
-  border-radius: 18px;
-  overflow: hidden;
-  background: var(--theme-thumb-fallback-bg);
-  border: 1px solid color-mix(in srgb, var(--theme-card-border) 78%, transparent);
-}
-
-.commentInboxCard__thumb,
-.commentInboxCard__thumbFallback {
-  width: 100%;
-  height: 100%;
-}
-
-.commentInboxCard__thumb {
-  object-fit: cover;
-  display: block;
-}
-
-.commentInboxCard__thumbFallback {
-  display: grid;
-  place-items: center;
-  color: var(--theme-text-faint);
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.commentInboxCard__titleRow {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.commentInboxCard__title {
-  font-size: 17px;
-  font-weight: 900;
-}
-
-.commentInboxCard__lead {
-  margin-top: 6px;
-  color: var(--theme-text-muted);
-  font-size: 13px;
-}
-
-.commentInboxCard__status {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.commentInboxCard__dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  background: #ff4d67;
-  flex: 0 0 auto;
-}
-
-.commentInboxCard__badge {
-  display: inline-flex;
-  align-items: center;
-  min-height: 28px;
-  padding: 0 12px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--theme-accent) 18%, var(--theme-surface-soft));
-  color: var(--theme-text);
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.commentInboxCard__meta {
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--theme-text-muted);
-  font-size: 13px;
-}
-
-.commentInboxCard__avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 999px;
-  object-fit: cover;
-  border: 1px solid var(--theme-avatar-border);
-  background: var(--theme-border);
-  flex: 0 0 auto;
-}
-
-.commentInboxCard__avatar--fallback {
-  display: grid;
-  place-items: center;
-  font-size: 11px;
-  font-weight: 900;
-}
-
-.commentInboxCard__target {
-  margin-top: 12px;
-  font-size: 15px;
-  font-weight: 800;
-}
-
-.commentInboxCard__targetMeta {
-  color: var(--theme-text-faint);
-  font-weight: 700;
-}
-
-.commentInboxCard__content {
-  margin-top: 10px;
-}
-
-.commentInboxCard__thread {
-  margin-top: 14px;
-  display: grid;
-  gap: 10px;
-}
-
-.commentInboxCard__threadBlock {
-  padding: 14px 15px;
-  border-radius: 18px;
-  border: 1px solid var(--theme-card-border);
-  background: color-mix(in srgb, var(--theme-surface) 88%, var(--theme-surface-soft));
-}
-
-.commentInboxCard__threadBlock--accent {
-  border-color: color-mix(in srgb, var(--theme-accent) 38%, var(--theme-card-border));
-  background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface));
-}
-
-.commentInboxCard__threadLabel {
-  font-size: 11px;
-  font-weight: 900;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--theme-text-faint);
-}
-
-.commentInboxCard__threadText {
-  margin-top: 8px;
-  color: var(--theme-text);
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-@media (max-width: 860px) {
-  .commentInboxToolbar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .commentInboxPanel {
-    padding: 20px;
-  }
-
-  .commentInboxCard__body {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

frontend/src/views/FavoriteTierListsView.vue

@@ -5,7 +5,6 @@ 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()
@@ -31,7 +30,7 @@ function avatarSrcOf(tierList) {
 }
 
 function avatarFallbackOf(tierList) {
-  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
 }
 
 function tierListThumbnailUrl(tierList) {

frontend/src/views/FollowingFeedView.vue

@@ -5,7 +5,6 @@ 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()
@@ -39,7 +38,7 @@ function avatarSrcOf(tierList) {
 }
 
 function avatarFallbackOf(tierList) {
-  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
 }
 
 function tierListThumbnailUrl(tierList) {

frontend/src/views/HomeView.vue

@@ -2,166 +2,137 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
-import { editorPath } from '../lib/paths'
+import SvgIcon from '../components/SvgIcon.vue'
+import kidStarIcon from '../assets/icons/kid_star.svg'
 import { toApiUrl } from '../lib/runtime'
-import { displayInitialFrom } from '../lib/display'
+import { loginPath, topicPath } from '../lib/paths'
+import { useAuthStore } from '../stores/auth'
 
 const route = useRoute()
 const router = useRouter()
+const auth = useAuthStore()
 
-const featuredTierLists = ref([])
-const tierLists = ref([])
+const templateRecords = ref([])
 const error = ref('')
-const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim() : ''))
-const brokenThumbnailIds = ref({})
+const isLoadingTemplates = ref(false)
+const hasLoadedTemplates = ref(false)
+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)
+    })
 
-function fmt(ts) {
-  return new Date(ts).toLocaleDateString(undefined, {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
+  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 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() {
+async function loadTemplates() {
   try {
-    const data = await api.searchAllPublicTierLists(query.value)
-    brokenThumbnailIds.value = {}
-    featuredTierLists.value = data.featuredTierLists || []
-    tierLists.value = data.tierLists || []
+    isLoadingTemplates.value = true
+    error.value = ''
+    const data = await api.listTopics()
+    templateRecords.value = data.topics || []
   } catch (e) {
-    error.value = '공개 티어표를 불러오지 못했어요.'
+    error.value = '백엔드에 연결할 수 없어요. backend 서버가 실행 중인지 확인해주세요.'
+  } finally {
+    isLoadingTemplates.value = false
+    hasLoadedTemplates.value = true
   }
 }
 
-function openTierList(tierList) {
-  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
+onMounted(loadTemplates)
+watch(() => auth.user?.id, loadTemplates)
+
+function openTopic(template) {
+  router.push(topicPath(template?.slug || template?.id || ''))
 }
 
-onMounted(loadHomeFeed)
-watch(() => route.query.q, loadHomeFeed)
+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) : ''
+}
 </script>
 
 <template>
-  <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>
-    </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>
-        <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 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>
+  <section v-else-if="isLoadingTemplates && !hasLoadedTemplates" class="libraryLoading" aria-live="polite">
+    <div class="libraryLoading__spinner" aria-hidden="true"></div>
+    <div>
+      <div class="libraryLoading__title">주제 템플릿을 불러오고 있어요.</div>
+      <div class="libraryLoading__desc">처음 접속 시 서버 응답에 따라 잠시 걸릴 수 있어요.</div>
+    </div>
+  </section>
+  <TransitionGroup v-else-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-if="hasLoadedTemplates" class="libraryEmpty">{{ query ? '검색어에 맞는 주제 템플릿이 없어요.' : '표시할 주제 템플릿이 없어요.' }}</div>
 </template>
 
 <style scoped>
-.pageHead__searchState {
-  margin-top: 8px;
-  color: var(--theme-text-muted);
+.libraryGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
 }
 .error {
   margin: 0 0 16px;
@@ -171,204 +142,178 @@ watch(() => route.query.q, loadHomeFeed)
   background: var(--theme-danger-bg);
   color: var(--theme-text);
 }
-.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;
+.pageHead__searchState {
+  margin-top: 8px;
   color: var(--theme-text-muted);
 }
-.sectionLabel {
-  margin-bottom: 14px;
+.libraryLoading {
+  min-height: 220px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 28px;
+  border-radius: 24px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  color: var(--theme-text);
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
 }
-.empty {
-  opacity: 0.76;
+.libraryLoading__spinner {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 3px solid color-mix(in srgb, var(--theme-text-faint) 32%, transparent);
+  border-top-color: var(--theme-accent);
+  animation: libraryLoadingSpin 820ms linear infinite;
 }
-.list {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 18px;
+.libraryLoading__title {
+  font-weight: 900;
+  letter-spacing: -0.02em;
 }
-.boardCard {
-  min-width: 0;
+.libraryLoading__desc {
+  margin-top: 4px;
+  color: var(--theme-text-soft);
+  font-size: 13px;
+}
+@keyframes libraryLoadingSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.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);
-  overflow: hidden;
-  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
-  transition:
-    transform 0.16s ease,
-    background 0.16s ease;
-}
-.boardCard:hover {
-  transform: translateY(-2px);
-  background: var(--theme-card-bg-hover);
-}
-.boardCard__body {
-  width: 100%;
-  min-width: 0;
-  text-align: left;
   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;
-  padding: 0;
-  display: grid;
-  overflow: hidden;
+  text-align: left;
+  cursor: pointer;
 }
-.boardCard__thumbWrap {
-  min-width: 0;
+.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;
-  padding: 14px 14px 0;
-  box-sizing: border-box;
+  border-radius: 14px;
+  border: 1px solid var(--theme-surface-soft-2);
+  background: var(--theme-thumb-fallback-bg);
+  overflow: hidden;
+  display: grid;
+  place-items: center;
 }
-.boardCard__thumb,
-.boardCard__thumbPlaceholder {
+.libraryCard__thumb {
   width: 100%;
   height: 100%;
-  display: block;
-  border-radius: 18px;
-}
-.boardCard__thumb {
   object-fit: cover;
 }
-.boardCard__thumbPlaceholder {
-  background: var(--theme-thumb-fallback-bg);
-  display: grid;
-  place-items: center;
+.libraryCard__thumbFallback {
+  font-size: 14px;
   color: var(--theme-text-faint);
-  font-size: 13px;
-  font-weight: 700;
 }
-.boardCard__head {
-  min-width: 0;
-  padding: 16px 18px 18px;
+.libraryCard__body {
   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;
+.libraryCard__title {
   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;
 }
-.boardCard__topic {
-  min-width: 0;
+.libraryCard__meta {
   color: var(--theme-text-soft);
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.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-move,
+.libraryCard-enter-active,
+.libraryCard-leave-active {
+  transition: transform 280ms ease, opacity 220ms ease;
 }
-.boardCard__authorName {
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+.libraryCard-enter-from,
+.libraryCard-leave-to {
+  opacity: 0;
+  transform: translateY(10px) scale(0.985);
 }
-.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;
+
+.libraryCard-leave-active {
+  position: absolute;
+  width: calc(100% - 0px);
+  pointer-events: none;
 }
-.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;
+
+.libraryEmpty {
+  padding: 20px 0;
+  color: var(--theme-text-muted);
 }
 @media (max-width: 1400px) {
-  .list {
+  .libraryGrid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 @media (max-width: 1200px) {
-  .list {
+  .libraryGrid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (max-width: 900px) {
-  .list {
-    grid-template-columns: minmax(0, 1fr);
+  .libraryGrid {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 720px) {
+  .libraryGrid {
+    grid-template-columns: 1fr;
   }
 }
 </style>

frontend/src/views/MyTierListsView.vue

@@ -5,7 +5,6 @@ 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()
@@ -36,7 +35,7 @@ function avatarSrcOf(tierList) {
 }
 
 function avatarFallbackOf(tierList) {
-  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
 }
 
 function tierListThumbnailUrl(tierList) {

frontend/src/views/SearchResultsView.vue

@@ -4,7 +4,6 @@ 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()
@@ -31,7 +30,7 @@ function avatarSrcOf(tierList) {
 }
 
 function avatarFallbackOf(tierList) {
-  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
 }
 
 function tierListThumbnailUrl(tierList) {

frontend/src/views/TemplatesView.vue

@@ -1,263 +0,0 @@
-<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>

frontend/src/views/TierEditorView.vue

@@ -4,7 +4,6 @@ import { useRoute, useRouter } from 'vue-router'
 import Sortable from 'sortablejs'
 import * as htmlToImage from 'html-to-image'
 import SvgIcon from '../components/SvgIcon.vue'
-import TierListCommentsCard from '../components/TierListCommentsCard.vue'
 import addColumnRightIcon from '../assets/icons/add_column_right.svg'
 import addRowBelowIcon from '../assets/icons/add_row_below.svg'
 import addPhotoAlternateIcon from '../assets/icons/add_photo_alternate.svg'
@@ -160,8 +159,6 @@ const canRequestTemplateCreate = computed(
 const canRequestTemplateUpdate = computed(
   () => canEdit.value && hasSavedTierList.value && templateId.value !== 'freeform' && customItems.value.length > 0
 )
-const activeTierListId = computed(() => persistedTierListId.value || (tierListId.value && tierListId.value !== 'new' ? tierListId.value : ''))
-const currentUserId = computed(() => auth.user?.id || '')
 const canSubmitTemplateCreateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const canSubmitTemplateUpdateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const templateRequestTargetLabel = computed(() => (templateId.value === 'freeform' ? '새로운 템플릿' : (templateName.value || templateId.value || '선택한 주제')))
@@ -1064,20 +1061,12 @@ async function copyShareUrl() {
 
 function openViewerMode() {
   if (!canSwitchToViewerMode.value) return
-  router.push({
-    path: editorPath(templateId.value, persistedTierListId.value || tierListId.value),
-    query: { ...route.query, preview: '1' },
-  })
+  router.push(editorPath(templateId.value, persistedTierListId.value || tierListId.value, { preview: true }))
 }
 
 function openEditMode() {
   if (!canSwitchToEditMode.value) return
-  const nextQuery = { ...route.query }
-  delete nextQuery.preview
-  router.push({
-    path: editorPath(templateId.value, persistedTierListId.value || tierListId.value),
-    query: nextQuery,
-  })
+  router.push(editorPath(templateId.value, persistedTierListId.value || tierListId.value))
 }
 
 function closeNavigationConfirmModal() {
@@ -1365,10 +1354,7 @@ async function loadEditorState() {
       isFavorited.value = !!t.isFavorited
 
       if (!previewMode.value && !canEdit.value) {
-        router.replace({
-          path: editorPath(templateId.value, t.id),
-          query: { ...route.query, preview: '1' },
-        })
+        router.replace(editorPath(templateId.value, t.id, { preview: true }))
         return
       }
 
@@ -1479,14 +1465,6 @@ onUnmounted(() => {
         <span>{{ formatExportDate(fallbackTimestamp) }}</span>
       </div>
     </div>
-    <TierListCommentsCard
-      v-if="activeTierListId"
-      :tier-list-id="activeTierListId"
-      :can-write="!!auth.user"
-      :current-user-id="currentUserId"
-      title="댓글"
-      description="이 티어표에 대한 의견을 남기고 답글로 대화를 이어갈 수 있어요."
-    />
 
     <Teleport :to="localRightRailTarget">
       <template v-if="globalRightRailOpen">
@@ -1778,6 +1756,16 @@ onUnmounted(() => {
                         >
                           ×
                         </button>
+                        <button
+                          v-if="canRemoveEditorItem(id) && !isExporting"
+                          class="cellDeleteBtn"
+                          type="button"
+                          title="커스텀 이미지 제거"
+                          @pointerdown.stop
+                          @click.stop="deleteEditorItem(id)"
+                        >
+                          삭제
+                        </button>
                       </div>
                     </div>
                   </div>
@@ -1819,14 +1807,6 @@ onUnmounted(() => {
               <li>아이템이 많아 한 번에 보기 어렵다면 브라우저 확대/축소(`Ctrl +`, `Ctrl -`)로 화면 밀도를 조절해보세요.</li>
             </ul>
           </div>
-          <TierListCommentsCard
-            v-if="activeTierListId"
-            :tier-list-id="activeTierListId"
-            :can-write="!!auth.user"
-            :current-user-id="currentUserId"
-            title="댓글"
-            description="이 티어표에 대한 의견을 남기고 답글로 대화를 이어갈 수 있어요."
-          />
         </div>
 
         <div class="sidebarStickyFrame">
@@ -1872,6 +1852,16 @@ 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>
@@ -3220,6 +3210,7 @@ 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%;
@@ -3305,7 +3296,7 @@ onUnmounted(() => {
   opacity: 0.3;
 }
 .chosen {
-  border: 1px solid rgba(110, 231, 183, 0.5);
+  outline: 2px solid rgba(110, 231, 183, 0.5);
   border-radius: 14px;
 }
 @media (max-width: 980px) {

frontend/src/views/TopicHubView.vue

@@ -5,7 +5,6 @@ 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()
@@ -40,7 +39,7 @@ function avatarSrcOf(tierList) {
 }
 
 function avatarFallbackOf(tierList) {
-  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
 }
 
 function tierListThumbnailUrl(tierList) {

frontend/src/views/UserProfileView.vue

@@ -6,7 +6,6 @@ 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()
@@ -24,7 +23,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(() => displayInitialFrom(profile.value?.nickname, profile.value?.accountName, '?'))
+const profileFallback = computed(() => (profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?')
 const canFollow = computed(() => !!auth.user && !!profile.value && !profile.value.isSelf)
 
 watch(error, (message) => {
@@ -50,7 +49,7 @@ function avatarSrcOf(tierList) {
 }
 
 function avatarFallbackOf(tierList) {
-  return displayInitialFrom(tierList.authorName, tierList.authorAccountName || profile.value?.accountName, '?')
+  return (tierList.authorAccountName || profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?'
 }
 
 function tierListThumbnailUrl(tierList) {