본인 티어표 복사 복구와 팔로우 피드 추가

backend/index.js

@@ -12,6 +12,7 @@ const { ensureData } = require('./src/db')
 const authRoutes = require('./src/routes/auth')
 const topicsRoutes = require('./src/routes/topics')
 const tierListsRoutes = require('./src/routes/tierlists')
+const usersRoutes = require('./src/routes/users')
 const adminRoutes = require('./src/routes/admin')
 
 const app = express()
@@ -85,6 +86,7 @@ app.use(async (req, res, next) => {
 app.use('/api/auth', authRoutes)
 app.use('/api/topics', topicsRoutes)
 app.use('/api/tierlists', tierListsRoutes)
+app.use('/api/users', usersRoutes)
 app.use('/api/admin', adminRoutes)
 
 app.listen(PORT, () => {

backend/src/db.js

@@ -426,6 +426,18 @@ async function ensureSchema() {
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
     `)
 
+    await query(`
+      CREATE TABLE IF NOT EXISTS user_follows (
+        follower_id VARCHAR(64) NOT NULL,
+        following_id VARCHAR(64) NOT NULL,
+        created_at BIGINT NOT NULL,
+        PRIMARY KEY (follower_id, following_id),
+        INDEX idx_user_follows_following (following_id, created_at),
+        CONSTRAINT fk_user_follows_follower FOREIGN KEY (follower_id) REFERENCES users(id) ON DELETE CASCADE,
+        CONSTRAINT fk_user_follows_following FOREIGN KEY (following_id) REFERENCES users(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
+    `)
+
     await query(`
       CREATE TABLE IF NOT EXISTS image_assets (
         id VARCHAR(64) PRIMARY KEY,
@@ -2182,6 +2194,198 @@ async function listUserTierLists(userId) {
   return applyFavoriteMetaToTierLists(tierLists, favoriteStats)
 }
 
+async function findUserProfileById(userId, currentUserId = '') {
+  const rows = await query(
+    `
+      SELECT
+        u.id,
+        u.email,
+        u.nickname,
+        u.avatar_src,
+        u.created_at,
+        (
+          SELECT COUNT(*)
+          FROM tierlists t
+          WHERE t.author_id = u.id AND t.is_public = 1
+        ) AS public_tierlist_count,
+        (
+          SELECT COUNT(*)
+          FROM user_follows uf
+          WHERE uf.following_id = u.id
+        ) AS follower_count,
+        (
+          SELECT COUNT(*)
+          FROM user_follows uf
+          WHERE uf.follower_id = u.id
+        ) AS following_count,
+        ${
+          currentUserId
+            ? `EXISTS(
+                SELECT 1
+                FROM user_follows uf
+                WHERE uf.follower_id = ? AND uf.following_id = u.id
+              )`
+            : '0'
+        } AS is_following
+      FROM users u
+      WHERE u.id = ?
+      LIMIT 1
+    `,
+    currentUserId ? [currentUserId, userId] : [userId]
+  )
+  const row = rows[0]
+  if (!row) return null
+  return {
+    id: row.id,
+    nickname: row.nickname || '',
+    accountName: getUserAccountName(row),
+    avatarSrc: row.avatar_src || '',
+    createdAt: Number(row.created_at || 0),
+    publicTierListCount: Number(row.public_tierlist_count || 0),
+    followerCount: Number(row.follower_count || 0),
+    followingCount: Number(row.following_count || 0),
+    isFollowing: !!row.is_following,
+    isSelf: !!currentUserId && currentUserId === row.id,
+  }
+}
+
+async function followUser({ followerId, followingId }) {
+  await query('INSERT IGNORE INTO user_follows (follower_id, following_id, created_at) VALUES (?, ?, ?)', [
+    followerId,
+    followingId,
+    now(),
+  ])
+}
+
+async function unfollowUser({ followerId, followingId }) {
+  await query('DELETE FROM user_follows WHERE follower_id = ? AND following_id = ?', [followerId, followingId])
+}
+
+async function listPublicTierListsByAuthor(authorId, currentUserId = '', queryText = '') {
+  const params = [authorId]
+  let whereClause = 'WHERE t.author_id = ? AND t.is_public = 1'
+  if ((queryText || '').trim()) {
+    const search = `%${queryText.trim()}%`
+    whereClause += ' AND (t.title LIKE ? OR tp.name LIKE ?)'
+    params.push(search, search)
+  }
+
+  const rows = await query(
+    `
+      SELECT
+        t.id,
+        t.topic_id,
+        tp.name AS topic_name,
+        t.title,
+        t.thumbnail_src,
+        t.is_public,
+        t.is_featured,
+        t.featured_at,
+        t.featured_by,
+        t.created_at,
+        t.updated_at,
+        t.author_id,
+        u.nickname,
+        u.email,
+        u.avatar_src
+      FROM tierlists t
+      INNER JOIN users u ON u.id = t.author_id
+      INNER JOIN topics tp ON tp.id = t.topic_id
+      ${whereClause}
+      ORDER BY t.is_featured DESC, t.featured_at DESC, t.updated_at DESC
+      LIMIT 200
+    `,
+    params
+  )
+
+  const tierLists = rows.map((row) => ({
+    id: row.id,
+    topicId: row.topic_id,
+    topicName: row.topic_name || '',
+    title: row.title,
+    thumbnailSrc: row.thumbnail_src || '',
+    isPublic: !!row.is_public,
+    isFeatured: !!row.is_featured,
+    featuredAt: Number(row.featured_at || 0),
+    createdAt: Number(row.created_at),
+    updatedAt: Number(row.updated_at),
+    authorId: row.author_id,
+    authorName: getUserDisplayName(row),
+    authorAccountName: getUserAccountName(row),
+    authorAvatarSrc: row.avatar_src || '',
+  }))
+
+  const favoriteStats = await getFavoriteStatsForTierListIds(
+    tierLists.map((tierList) => tierList.id),
+    currentUserId
+  )
+  return applyFavoriteMetaToTierLists(tierLists, favoriteStats)
+}
+
+async function listFollowingTierLists(userId, queryText = '') {
+  const params = [userId]
+  let whereClause = 'WHERE uf.follower_id = ? AND t.is_public = 1'
+  if ((queryText || '').trim()) {
+    const search = `%${queryText.trim()}%`
+    whereClause += ' AND (t.title LIKE ? OR tp.name LIKE ? OR u.nickname LIKE ? OR u.email LIKE ?)'
+    params.push(search, search, search, search)
+  }
+
+  const rows = await query(
+    `
+      SELECT
+        t.id,
+        t.topic_id,
+        tp.name AS topic_name,
+        t.title,
+        t.thumbnail_src,
+        t.is_public,
+        t.is_featured,
+        t.featured_at,
+        t.featured_by,
+        t.created_at,
+        t.updated_at,
+        t.author_id,
+        uf.created_at AS followed_at,
+        u.nickname,
+        u.email,
+        u.avatar_src
+      FROM user_follows uf
+      INNER JOIN tierlists t ON t.author_id = uf.following_id
+      INNER JOIN users u ON u.id = t.author_id
+      INNER JOIN topics tp ON tp.id = t.topic_id
+      ${whereClause}
+      ORDER BY t.updated_at DESC, uf.created_at DESC
+      LIMIT 200
+    `,
+    params
+  )
+
+  const tierLists = rows.map((row) => ({
+    id: row.id,
+    topicId: row.topic_id,
+    topicName: row.topic_name || '',
+    title: row.title,
+    thumbnailSrc: row.thumbnail_src || '',
+    isPublic: !!row.is_public,
+    isFeatured: !!row.is_featured,
+    featuredAt: Number(row.featured_at || 0),
+    createdAt: Number(row.created_at),
+    updatedAt: Number(row.updated_at),
+    authorId: row.author_id,
+    authorName: getUserDisplayName(row),
+    authorAccountName: getUserAccountName(row),
+    authorAvatarSrc: row.avatar_src || '',
+    isFavorited: false,
+  }))
+
+  const favoriteStats = await getFavoriteStatsForTierListIds(
+    tierLists.map((tierList) => tierList.id),
+    userId
+  )
+  return applyFavoriteMetaToTierLists(tierLists, favoriteStats)
+}
+
 function uniqueTierListItems(poolItems) {
   const map = new Map()
   ;(poolItems || []).forEach((item) => {
@@ -2726,6 +2930,7 @@ module.exports = {
   findUserByEmail,
   findUserByNickname,
   findUserById,
+  findUserProfileById,
   createUser,
   updateUserPassword,
   verifyUserEmail,
@@ -2779,6 +2984,8 @@ module.exports = {
   listCustomItems,
   findUnusedCustomItems,
   listPublicTierLists,
+  listPublicTierListsByAuthor,
+  listFollowingTierLists,
   listFavoriteTierLists,
   listUserTierLists,
   listAdminTierLists,
@@ -2788,6 +2995,8 @@ module.exports = {
   updateTierListFeaturedStatus,
   favoriteTopic,
   unfavoriteTopic,
+  followUser,
+  unfollowUser,
   favoriteTierList,
   unfavoriteTierList,
   deleteTierList,

backend/src/routes/users.js

@@ -0,0 +1,77 @@
+const express = require('express')
+const { z } = require('zod')
+const {
+  findUserProfileById,
+  followUser,
+  unfollowUser,
+  listPublicTierListsByAuthor,
+  listFollowingTierLists,
+} = require('../db')
+const { requireAuth } = require('../middleware/auth')
+
+const router = express.Router()
+
+router.get('/following-feed', requireAuth, async (req, res) => {
+  const schema = z.object({
+    q: z.string().trim().max(120).optional().default(''),
+  })
+  const parsed = schema.safeParse(req.query)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const tierLists = await listFollowingTierLists(req.session.userId, parsed.data.q)
+  res.json({ tierLists })
+})
+
+router.get('/:userId', async (req, res) => {
+  const user = await findUserProfileById(req.params.userId, req.session?.userId || '')
+  if (!user) return res.status(404).json({ error: 'not_found' })
+  res.json({ user })
+})
+
+router.get('/:userId/tierlists', async (req, res) => {
+  const schema = z.object({
+    q: z.string().trim().max(120).optional().default(''),
+  })
+  const parsed = schema.safeParse(req.query)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const user = await findUserProfileById(req.params.userId, req.session?.userId || '')
+  if (!user) return res.status(404).json({ error: 'not_found' })
+
+  const tierLists = await listPublicTierListsByAuthor(
+    req.params.userId,
+    req.session?.userId || '',
+    parsed.data.q
+  )
+  res.json({ tierLists })
+})
+
+router.post('/:userId/follow', requireAuth, async (req, res) => {
+  const targetUserId = req.params.userId || ''
+  if (!targetUserId || targetUserId === req.session.userId) {
+    return res.status(400).json({ error: 'self_follow_not_allowed' })
+  }
+
+  const user = await findUserProfileById(targetUserId, req.session.userId)
+  if (!user) return res.status(404).json({ error: 'not_found' })
+
+  await followUser({ followerId: req.session.userId, followingId: targetUserId })
+  const updated = await findUserProfileById(targetUserId, req.session.userId)
+  res.json({ user: updated })
+})
+
+router.delete('/:userId/follow', requireAuth, async (req, res) => {
+  const targetUserId = req.params.userId || ''
+  if (!targetUserId || targetUserId === req.session.userId) {
+    return res.status(400).json({ error: 'self_follow_not_allowed' })
+  }
+
+  const user = await findUserProfileById(targetUserId, req.session.userId)
+  if (!user) return res.status(404).json({ error: 'not_found' })
+
+  await unfollowUser({ followerId: req.session.userId, followingId: targetUserId })
+  const updated = await findUserProfileById(targetUserId, req.session.userId)
+  res.json({ user: updated })
+})
+
+module.exports = router

docs/history.md

@@ -1,5 +1,11 @@
 # 의사결정 이력
 
+## 2026-04-03 v1.4.53
+- 본인 티어표 복사 기능이 타인 티어표 전용 조건으로만 남아 있었지만, 실제 사용에서는 자기 작업본을 변형용 복사본으로 다시 만들고 싶은 경우도 많으므로 저장된 본인 티어표에도 복사 버튼을 여는 편이 맞다고 판단했다.
+- 편집 중 저장하지 않은 변경이 있는 상태에서 복사본을 만들 때는 마지막 저장본이 아니라 현재 화면 상태가 복사되기를 기대하기 쉬우므로, 본인 편집본 복사는 복사 직전에 현재 원본을 한 번 저장한 뒤 새 복사본을 만드는 쪽으로 정리했다.
+- 팔로우 기능은 처음부터 추천 알고리즘까지 섞기보다, 작성자 프로필과 팔로우 피드라는 명확한 사용자 경로를 먼저 열어두는 편이 제품 구조상 자연스럽다고 보고 `user_follows` 기반 1차 구현을 먼저 붙였다.
+- 작성자 프로필 진입점은 목록 카드 내부 작성자 클릭을 바로 분리하면 기존 카드 전체 클릭 문법과 충돌할 수 있으므로, 이번 단계에서는 티어표 편집/뷰어 우측 패널의 `작성자 프로필 보기`를 우선 진입점으로 두고 카드 내부 세부 클릭 분리는 후속 UX로 미루는 편이 안전하다고 판단했다.
+
 ## 2026-04-03 v1.4.51
 - 불특정 다수가 만드는 공개 티어표를 전부 같은 선상에 두면 첫 화면 품질 편차가 너무 커질 수 있으므로, 주제별 목록 상단에 관리자 큐레이션 `추천 티어표` 섹션을 두고 아래 일반 공개 목록과 분리하는 편이 맞다고 판단했다.
 - 추천 선정은 처음부터 완전 자동화보다 운영자가 직접 지정/해제할 수 있는 수동 큐레이션을 먼저 넣는 편이 안전하므로, 좋아요 수 기반 자동 후보 필터와 팔로우 피드는 후속 작업으로 미루고 이번 릴리스에서는 추천 표시 구조와 관리자 토글만 먼저 완성했다.

docs/map.md

@@ -30,6 +30,16 @@
 - 역할: 즐겨찾기한 티어표 목록 조회, 검색/정렬, 라이브러리 카드형 표시, 편집 화면 이동, 즐겨찾기 상태 확인
 - 연동 API: `GET /api/tierlists/favorites/me`, `DELETE /api/tierlists/:id/favorite`
 
+## `/following`
+- 화면 파일: `frontend/src/views/FollowingFeedView.vue`
+- 역할: 팔로우한 작성자의 공개 티어표를 최신 업데이트순 카드 목록으로 모아보기, 제목/주제/작성자 검색, 티어표 상세 이동, 작성자 프로필 이동
+- 연동 API: `GET /api/users/following-feed`
+
+## `/users/:userId`
+- 화면 파일: `frontend/src/views/UserProfileView.vue`
+- 역할: 작성자 공개 프로필, 팔로워/팔로잉/공개 티어표 수 표시, 로그인 사용자의 팔로우/언팔로우 전환, 해당 작성자의 공개 티어표 목록 조회와 상세 이동
+- 연동 API: `GET /api/users/:userId`, `GET /api/users/:userId/tierlists`, `POST /api/users/:userId/follow`, `DELETE /api/users/:userId/follow`
+
 ## `/search`
 - 화면 파일: `frontend/src/views/SearchResultsView.vue`
 - 역할: 좌측 전역 검색 입력에서 넘긴 키워드로 공개 티어표 전체를 검색하고, 자체 검색 툴바 없이 `상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일` 카드 목록으로 표시
@@ -59,4 +69,5 @@
 - 메일 발송 유틸: `backend/src/lib/mailer.js`
 - 주제 라우트: `backend/src/routes/topics.js`
 - 티어표 라우트: `backend/src/routes/tierlists.js`
+- 사용자/팔로우 라우트: `backend/src/routes/users.js`
 - 관리자 라우트: `backend/src/routes/admin.js`

docs/spec.md

@@ -120,6 +120,10 @@
   - `userId`: string
   - `tierListId`: string
   - `createdAt`: number
+- `userFollows`
+  - `followerId`: string
+  - `followingId`: string
+  - `createdAt`: number
 - `gameSuggestions`
   - `id`: string
   - `name`: string
@@ -162,6 +166,15 @@
   - `POST /api/tierlists/thumbnail`
   - `POST /api/tierlists/custom-items`
   - `POST /api/tierlists`
+- 사용자/팔로우
+  - `GET /api/users/following-feed`
+    - 로그인한 사용자가 팔로우한 작성자의 공개 티어표를 최신 업데이트순으로 조회한다.
+  - `GET /api/users/:userId`
+    - 작성자 공개 프로필, 공개 티어표 수, 팔로워/팔로잉 수, 현재 로그인 사용자의 팔로우 여부를 반환한다.
+  - `GET /api/users/:userId/tierlists`
+    - 해당 작성자의 공개 티어표 목록을 반환한다.
+  - `POST /api/users/:userId/follow`
+  - `DELETE /api/users/:userId/follow`
 - 관리자
   - `POST /api/admin/templates`
   - `POST /api/admin/templates/:templateId/thumbnail`
@@ -216,10 +229,12 @@
 - 공유 링크로 여는 `preview=1` 화면은 `뷰어 모드`로 취급하며, 드래그/행열 편집/저장 같은 편집 UI 없이 완성본만 렌더링한다.
 - 비로그인 사용자나 작성자 본인이 아닌 로그인 사용자는 저장된 티어표를 기본적으로 뷰어 모드로 열람하며, 일반 편집 URL로 직접 진입해도 소유자가 아니면 `preview=1` 주소로 자동 전환된다.
 - 비로그인 사용자도 뷰어 모드 우측 레일의 `공유하기` 버튼으로 현재 공유 링크를 복사할 수 있다.
-- 로그인한 타인 티어표 열람자는 뷰어 모드 우측 레일에서 `내 티어표로 복사`를 사용할 수 있고, 작성자 본인은 `수정 모드로 전환`을 사용할 수 있다.
+- 로그인한 사용자는 뷰어 모드 우측 레일에서 저장된 티어표를 복사할 수 있고, 타인 티어표면 `내 티어표로 복사`, 본인 티어표면 `복사본 만들기` 문구를 사용한다. 작성자 본인은 `수정 모드로 전환`도 사용할 수 있다.
 - 작성자 본인이 일반 편집 화면에서 저장된 본인 티어표를 보고 있을 때는 우측 패널의 `뷰어 모드로 보기`로 공유 화면 형태를 바로 확인할 수 있다.
+- 편집/뷰어 우측 패널의 `작성자 프로필 보기`로 해당 작성자의 공개 프로필과 공개 티어표 목록을 열 수 있고, 로그인 상태에서는 작성자 프로필에서 팔로우/언팔로우를 전환할 수 있다.
 - 같은 `TierEditorView` 안에서 `topicId / tierListId / preview` 라우트 값만 바뀌어도 화면이 이전 티어표 데이터에 남지 않도록, 라우트 변경마다 에디터 상태를 다시 로드한다.
 - 복사한 티어표 상단의 `원본` 링크를 누르면 원본 티어표로 이동하며, 편집 모드에서 저장하지 않은 변경이 있으면 이동 전에 `저장 없이 이동` 확인 모달을 먼저 띄운다.
+- 본인 티어표도 저장된 상태라면 편집/뷰어 우측 패널에서 복사본을 만들 수 있고, 편집 중 저장하지 않은 수정이 남아 있으면 복사 직전에 현재 수정본을 먼저 저장해 최신 상태 기준 복사본을 만든다.
 - 비공개 티어표라도 관리자는 편집 화면에서 완성본을 열람할 수 있다.
 - 공개 티어표는 목록과 상세 화면에서 즐겨찾기 토글 및 개수를 함께 표시한다.
 - 카드형 목록에서는 즐겨찾기 수/상태만 표시하고, 실제 토글은 상세 화면에서 처리한다.

docs/todo.md

@@ -1,6 +1,11 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- `v1.4.53`에서 본인 티어표 복사 버튼을 다시 열었으므로, 작성자 본인 편집 모드와 뷰어 모드 모두에서 `복사본 만들기`가 보이고, 복사 후 새 복사본 화면으로 실제 이동하는지 확인한다.
+- 본인 티어표를 수정한 뒤 저장하지 않은 상태로 `복사본 만들기`를 누르면 복사 직전에 원본이 먼저 저장되고, 새 복사본이 방금 수정한 최신 내용 기준으로 생성되는지 QA한다.
+- `/users/:userId` 작성자 프로필에서 비로그인 사용자는 팔로우 버튼이 안 보이고, 로그인 사용자는 타인 프로필에서 `팔로우 / 팔로잉` 전환과 팔로워 수 갱신이 정상이며, 자기 프로필에서는 팔로우 버튼이 숨겨지는지 확인한다.
+- `/following` 팔로우 피드는 팔로우한 작성자의 공개 티어표만 최신 업데이트순으로 보이고, 비로그인 진입 시 `/login?redirect=/following`으로 이동하며, 검색어로 제목/주제/작성자를 필터링할 수 있는지 확인한다.
+- 티어표 편집/뷰어 우측 패널의 `작성자 프로필 보기`가 현재 티어표 작성자 프로필로 정확히 이동하고, 복사본에서는 복사본 작성자 자신 프로필로, 원본 링크는 기존처럼 원본 티어표로 이동하는지 함께 QA한다.
 - `v1.4.51`에서 주제별 공개 목록을 `추천 티어표 / 전체 공개 티어표`로 분리했으므로, 추천 지정된 티어표가 상단 강조 섹션에만 나오고 아래 일반 목록에는 중복되지 않는지, 추천 해제 즉시 아래 일반 목록으로 내려가는지 확인한다.
 - 관리자 `전체 티어표 관리`에서 공개 글은 `추천 지정 / 추천 해제`가 정상 동작하고, 비공개 글은 추천 지정 버튼이 비활성화되며, 추천글을 비공개로 바꾸면 추천 상태가 자동 해제되는지 QA한다.
 - 추천 섹션은 최대 16개까지만 보여주도록 잘라두었으므로, 17개 이상 추천 지정 시 최근 지정순과 좋아요 수 보조 정렬이 기대대로 적용되는지 한 번 더 확인한다.
@@ -135,7 +140,7 @@
 - 아이템 관리의 같은 이미지 참조 요약과 상세 모달은 붙였으므로, 실제 운영 데이터에서 카드 수치와 모달 목록이 기대한 참조 관계와 맞는지 한 번 더 QA한다.
 
 ## 중기 개선
-- 특정 작성자 팔로우, 작성자 프로필 페이지, 팔로우한 작성자 티어표만 모아보는 피드 화면을 추가한다.
+- 목록 카드의 작성자 메타를 카드 전체 열기 버튼과 충돌 없이 직접 프로필 링크로 분리하는 후속 UX를 검토한다.
 - 추천 티어표는 이번에 관리자 수동 지정부터 붙였으므로, 다음 단계에서는 최근 N일 좋아요 수 기준 추천 후보 필터와 추천 섹션 노출 개수 설정을 관리자 화면에 추가할지 검토한다.
 - 이메일 인증/비밀번호 재설정 1차 구현이 들어갔으므로, 다음 단계에서는 Gmail 발신 기반이 실제 운영에서 스팸함으로 얼마나 가는지 보고 필요하면 Cloudflare DNS의 SPF/DKIM/DMARC와 도메인 발신 주소 전환을 정리한다.
 - 구글 계정 로그인은 아직 붙이지 않았으므로, 이메일 인증 안정화 후 Google OAuth 클라이언트를 만들고 일반 이메일 계정과 같은 이메일의 구글 계정을 자동 연결할지 정책을 먼저 결정한다.

docs/update.md

@@ -1,5 +1,12 @@
 # 업데이트 로그
 
+## 2026-04-03 v1.4.53
+- 티어표 복사 버튼이 타인 티어표에서만 보이도록 묶여 있어 본인 티어표에서는 숨겨지던 문제를 고쳐, 저장된 본인 티어표도 `복사본 만들기`로 새 복사본을 만들 수 있게 복구했다.
+- 본인 티어표를 편집 중 저장하지 않은 변경이 있는 상태로 복사본을 만들면 화면에 보이는 최신 수정 내용이 빠질 수 있었으므로, 복사 실행 직전에 현재 수정본을 먼저 저장한 뒤 복사본을 생성하도록 보정했다.
+- 작성자 프로필 화면(`/users/:userId`)과 팔로우 피드 화면(`/following`)을 추가하고, 백엔드에 `user_follows` 테이블과 팔로우/언팔로우/작성자 공개 티어표/팔로잉 피드 API를 붙였다.
+- 티어표 편집/뷰어 우측 패널에 `작성자 프로필 보기` 진입점을 추가하고, 왼쪽 내비게이션에도 `팔로우 피드` 메뉴를 노출해 팔로우한 작성자의 공개 티어표를 따로 모아 볼 수 있게 했다.
+- 프런트 HTML 메타 제목/설명에서도 `게임 템플릿` 표현을 `템플릿` 기준 문구로 맞춰, 실제 서비스가 특정 게임만 다루는 것처럼 보이지 않도록 한 번 더 정리했다.
+
 ## 2026-04-03 v1.4.52
 - 관리자 전체 티어표 카드 컴포넌트의 `추천 지정 / 추천 해제` 버튼과 `추천 노출중` 배지, 추천 개수 통계 표시가 실제 릴리스 커밋에 함께 포함되도록 누락 파일을 다시 묶었다.
 

frontend/index.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tier Maker | 게임 템플릿으로 만드는 티어표</title>
+    <title>Tier Maker | 템플릿으로 쉽게 만드는 티어표</title>
     <meta
       name="description"
-      content="게임 템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요. 관리자 요청과 템플릿 업데이트 흐름까지 한 번에 관리할 수 있습니다."
+      content="템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요. 관리자 요청과 템플릿 업데이트 흐름까지 한 번에 관리할 수 있습니다."
     />
     <meta name="theme-color" content="#090d16" />
     <meta name="application-name" content="Tier Maker" />
@@ -20,10 +20,10 @@
     <meta property="og:locale" content="ko_KR" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://tmaker.sori.studio/" />
-    <meta property="og:title" content="Tier Maker | 게임 템플릿으로 만드는 티어표" />
+    <meta property="og:title" content="Tier Maker | 템플릿으로 쉽게 만드는 티어표" />
     <meta
       property="og:description"
-      content="게임 템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요. 관리자 요청과 템플릿 업데이트 흐름까지 한 번에 관리할 수 있습니다."
+      content="템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요. 관리자 요청과 템플릿 업데이트 흐름까지 한 번에 관리할 수 있습니다."
     />
     <meta property="og:image" content="https://tmaker.sori.studio/og-card.png" />
     <meta property="og:image:alt" content="Tier Maker 공유 썸네일" />
@@ -31,10 +31,10 @@
     <meta property="og:image:height" content="630" />
 
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Tier Maker | 게임 템플릿으로 만드는 티어표" />
+    <meta name="twitter:title" content="Tier Maker | 템플릿으로 쉽게 만드는 티어표" />
     <meta
       name="twitter:description"
-      content="게임 템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요."
+      content="템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요."
     />
     <meta name="twitter:image" content="https://tmaker.sori.studio/og-card.png" />
   </head>

frontend/src/App.vue

@@ -2,7 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
-import { editorNewPath, favoritesPath, homePath, loginPath, mePath } from './lib/paths'
+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'
@@ -14,6 +14,7 @@ import iconAddNotes from './assets/icons/add_notes.svg'
 import iconDashboardCustomize from './assets/icons/dashboard_customize.svg'
 import iconSearch from './assets/icons/search.svg'
 import iconSettings from './assets/icons/settings.svg'
+import iconKidStar from './assets/icons/kid_star.svg'
 import iconMenuBook from './assets/icons/menu_book.svg'
 import RightRailAd from './components/RightRailAd.vue'
 import SvgIcon from './components/SvgIcon.vue'
@@ -69,6 +70,7 @@ const leftNavItems = computed(() => {
     { 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: 'profile', label: '설정', path: '/profile', iconSrc: iconSettings, requiresAuth: true },
   ]
   return items.filter((item) => !item.requiresAuth || (authReady.value && auth.user))
@@ -221,6 +223,26 @@ const routeMeta = computed(() => {
       action: () => router.push(mePath()),
     }
   }
+  if (route.name === 'followingFeed') {
+    return {
+      title: '팔로우 피드',
+      subtitle: '팔로우한 작성자의 새 티어표',
+      contextTitle: '구독 목록',
+      contextText: '작성자 프로필에서 팔로우한 사람의 공개 티어표를 한곳에서 볼 수 있어요.',
+      actionLabel: '즐겨찾기 보기',
+      action: () => router.push(favoritesPath()),
+    }
+  }
+  if (route.name === 'userProfile') {
+    return {
+      title: '작성자 프로필',
+      subtitle: '공개 티어표와 팔로우',
+      contextTitle: '작성자 탐색',
+      contextText: auth.user ? '마음에 드는 작성자를 팔로우하고 새 공개 티어표를 피드에서 이어서 볼 수 있어요.' : '로그인하면 작성자를 팔로우할 수 있어요.',
+      actionLabel: auth.user ? '팔로우 피드 보기' : '로그인하러 가기',
+      action: () => router.push(auth.user ? followingFeedPath() : loginPath(route.fullPath)),
+    }
+  }
   if (route.name === 'profile') {
     return {
       title: '설정',

frontend/src/lib/api.js

@@ -155,6 +155,13 @@ export const api = {
   listMyTierLists: () => request('/api/tierlists/me'),
   listMyFavoriteTierLists: ({ q = '', sort = 'favorited' } = {}) =>
     request(`/api/tierlists/favorites/me?q=${encodeURIComponent(q)}&sort=${encodeURIComponent(sort)}`),
+  getUserProfile: (userId) => request(`/api/users/${encodeURIComponent(userId)}`),
+  listUserPublicTierLists: (userId, { q = '' } = {}) =>
+    request(`/api/users/${encodeURIComponent(userId)}/tierlists?q=${encodeURIComponent(q || '')}`),
+  listFollowingFeed: ({ q = '' } = {}) =>
+    request(`/api/users/following-feed?q=${encodeURIComponent(q || '')}`),
+  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)}`),
   favoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'POST' }),
   unfavoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'DELETE' }),

frontend/src/lib/paths.js

@@ -33,6 +33,14 @@ export function favoritesPath() {
   return '/favorites'
 }
 
+export function followingFeedPath() {
+  return '/following'
+}
+
 export function profilePath() {
   return '/profile'
 }
+
+export function userProfilePath(userId) {
+  return `/users/${encodeSegment(userId)}`
+}

frontend/src/router/index.js

@@ -6,6 +6,8 @@ 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 UserProfileView from '../views/UserProfileView.vue'
 import AdminView from '../views/AdminView.vue'
 import ProfileView from '../views/ProfileView.vue'
 import SearchResultsView from '../views/SearchResultsView.vue'
@@ -22,6 +24,7 @@ export function createRouter() {
       { path: '/login', name: 'login', component: LoginView },
       { path: '/me', name: 'me', component: MyTierListsView },
       { path: '/favorites', name: 'favorites', component: FavoriteTierListsView },
+      { path: '/following', name: 'followingFeed', component: FollowingFeedView },
       { path: '/search', name: 'search', component: SearchResultsView },
       { path: '/admin', redirect: '/admin/featured' },
       { path: '/admin/featured', name: 'adminFeatured', component: AdminView },
@@ -30,6 +33,7 @@ export function createRouter() {
       { path: '/admin/tierlists', name: 'adminTierlists', component: AdminView },
       { path: '/admin/users', name: 'adminUsers', component: AdminView },
       { path: '/profile', name: 'profile', component: ProfileView },
+      { path: '/users/:userId', name: 'userProfile', component: UserProfileView },
     ],
   })
 

frontend/src/views/FollowingFeedView.vue

@@ -0,0 +1,328 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { api } from '../lib/api'
+import { editorPath, loginPath, userProfilePath } from '../lib/paths'
+import { toApiUrl } from '../lib/runtime'
+import { useToast } from '../composables/useToast'
+
+const router = useRouter()
+const toast = useToast()
+
+const tierLists = ref([])
+const query = ref('')
+const isLoading = ref(false)
+const error = ref('')
+const brokenThumbnailIds = ref({})
+
+watch(error, (message) => {
+  if (!message) return
+  toast.error(message)
+  error.value = ''
+})
+
+function fmt(ts) {
+  return new Date(ts).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+function displayNameOf(tierList) {
+  return tierList.authorName || '알 수 없음'
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
+}
+
+function avatarFallbackOf(tierList) {
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+}
+
+function tierListThumbnailUrl(tierList) {
+  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 loadFollowingFeed() {
+  isLoading.value = true
+  try {
+    const data = await api.listFollowingFeed({ q: query.value })
+    brokenThumbnailIds.value = {}
+    tierLists.value = data.tierLists || []
+  } catch (e) {
+    toast.error('로그인이 필요해요.')
+    router.push(loginPath('/following'))
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function openTierList(tierList) {
+  router.push(editorPath(tierList.topicId, tierList.id))
+}
+
+function openAuthorProfile(tierList) {
+  if (!tierList?.authorId) return
+  router.push(userProfilePath(tierList.authorId))
+}
+
+onMounted(loadFollowingFeed)
+</script>
+
+<template>
+  <section class="pageWrap">
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Following</div>
+        <h2 class="pageHead__title">팔로우 피드</h2>
+        <div class="pageHead__desc">팔로우한 작성자가 공개한 티어표를 최신 업데이트순으로 모아봅니다.</div>
+      </div>
+      <div class="pageHead__aside toolbar">
+        <input v-model="query" class="input" placeholder="제목, 주제, 작성자 검색" @keydown.enter.prevent="loadFollowingFeed" />
+        <button class="btn" :disabled="isLoading" @click="loadFollowingFeed">{{ isLoading ? '검색중...' : '검색' }}</button>
+      </div>
+    </section>
+
+    <section class="panel">
+      <div v-if="isLoading" class="empty">팔로우 피드를 불러오고 있어요.</div>
+      <div v-else-if="tierLists.length === 0" class="empty">아직 팔로우한 작성자의 공개 티어표가 없어요.</div>
+      <div v-else class="list">
+        <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard">
+          <button class="boardCard__body" 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.topicId }}</div>
+            </div>
+          </button>
+
+          <button class="authorLink" type="button" @click="openAuthorProfile(tierList)">
+            <div class="authorLink__main">
+              <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="authorLink__name">{{ displayNameOf(tierList) }}</span>
+            </div>
+            <span class="authorLink__date">{{ fmt(tierList.updatedAt) }}</span>
+          </button>
+        </article>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped>
+.panel {
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+}
+.toolbar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.input {
+  min-width: 240px;
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
+}
+.btn {
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft-2);
+  color: var(--theme-text);
+  font-weight: 800;
+  cursor: pointer;
+}
+.empty {
+  opacity: 0.75;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
+}
+.boardCard {
+  min-width: 0;
+  border-radius: 22px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  color: var(--theme-text);
+  overflow: hidden;
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+  transition:
+    transform 0.16s ease,
+    background 0.16s ease;
+}
+.boardCard:hover {
+  background: var(--theme-card-bg-hover);
+  transform: translateY(-2px);
+}
+.boardCard__body {
+  width: 100%;
+  min-width: 0;
+  text-align: left;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  display: grid;
+}
+.boardCard__thumbWrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 14px 14px 0;
+  box-sizing: border-box;
+}
+.boardCard__thumb,
+.boardCard__thumbPlaceholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 18px;
+  display: block;
+}
+.boardCard__thumb {
+  object-fit: cover;
+}
+.boardCard__thumbPlaceholder {
+  display: grid;
+  place-items: center;
+  background: var(--theme-thumb-fallback-bg);
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 700;
+}
+.boardCard__head {
+  min-width: 0;
+  padding: 16px 18px 0;
+  display: grid;
+  gap: 6px;
+}
+.boardCard__titleRow {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: flex-start;
+}
+.boardCard__title {
+  min-width: 0;
+  font-weight: 800;
+  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,
+.favoriteStat {
+  font-size: 13px;
+  color: var(--theme-text-faint);
+}
+.favoriteStat {
+  white-space: nowrap;
+}
+.authorLink {
+  width: calc(100% - 28px);
+  margin: 14px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.authorLink__main {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.authorLink__name {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 800;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.authorLink__date {
+  flex: 0 0 auto;
+  font-size: 10px;
+  color: var(--theme-text-faint);
+}
+.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;
+}
+.boardCard__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 900;
+}
+@media (max-width: 1400px) {
+  .list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 1200px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .list {
+    grid-template-columns: 1fr;
+  }
+
+  .input {
+    min-width: 0;
+    width: 100%;
+  }
+}
+</style>

frontend/src/views/TierEditorView.vue

@@ -10,7 +10,7 @@ import addPhotoAlternateIcon from '../assets/icons/add_photo_alternate.svg'
 import shareIcon from '../assets/icons/share.svg'
 import RightRailAd from '../components/RightRailAd.vue'
 import { api } from '../lib/api'
-import { editorNewPath, editorPath, loginPath, mePath, topicPath } from '../lib/paths'
+import { editorNewPath, editorPath, loginPath, mePath, topicPath, userProfilePath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
 import { useToast } from '../composables/useToast'
@@ -122,9 +122,11 @@ const untitledWarning = computed(
     '제목 없이 저장된 티어표는 무분별한 도배 방지를 위해 관리자에 의해 임의 삭제될 수 있어요.'
 )
 const canFavorite = computed(() => !!auth.user && !isNewTierList.value && !canEdit.value)
-const canDuplicate = computed(() => !!auth.user && hasSavedTierList.value && !isOwnTierList.value)
+const canDuplicate = computed(() => !!auth.user && hasSavedTierList.value)
 const canSwitchToViewerMode = computed(() => isOwnTierList.value && hasSavedTierList.value && !previewMode.value)
 const canSwitchToEditMode = computed(() => isOwnTierList.value && hasSavedTierList.value && previewMode.value)
+const duplicateActionLabel = computed(() => (isOwnTierList.value ? '복사본 만들기' : '내 티어표로 복사'))
+const canOpenAuthorProfile = computed(() => !!ownerId.value && hasSavedTierList.value)
 const copiedFromLabel = computed(() => {
   if (!sourceTierListId.value) return ''
   const parts = []
@@ -940,6 +942,11 @@ function openSourceTierList() {
   requestEditorNavigation(editorPath(templateId.value, sourceTierListId.value))
 }
 
+function openAuthorProfile() {
+  if (!canOpenAuthorProfile.value) return
+  router.push(userProfilePath(ownerId.value))
+}
+
 function closeSaveModal() {
   isSaveModalOpen.value = false
 }
@@ -998,6 +1005,9 @@ async function confirmDeleteTierList() {
 async function duplicateCurrentTierList() {
   if (!canDuplicate.value) return
   try {
+    if (canEdit.value && hasUnsavedChanges.value) {
+      await persistTierList({ showModal: false })
+    }
     const data = await api.duplicateTierList(tierListId.value)
     const duplicatedId = data.tierList?.id
     if (!duplicatedId) throw new Error('duplicate_failed')
@@ -1297,11 +1307,14 @@ onUnmounted(() => {
               공유하기
             </button>
             <button v-if="canDuplicate" class="btn btn--save viewerSidebar__button" type="button" @click="duplicateCurrentTierList">
-              내 티어표로 복사
+              {{ duplicateActionLabel }}
             </button>
             <button v-if="canSwitchToEditMode" class="btn btn--save viewerSidebar__button" type="button" @click="openEditMode">
               수정 모드로 전환
             </button>
+            <button v-if="canOpenAuthorProfile" class="btn btn--ghost viewerSidebar__button" type="button" @click="openAuthorProfile">
+              작성자 프로필 보기
+            </button>
           </div>
         </div>
       </template>
@@ -1730,8 +1743,9 @@ onUnmounted(() => {
             <SvgIcon :src="shareIcon" :size="16" />
             <span>공유하기</span>
           </button>
+          <button v-if="canOpenAuthorProfile" class="editorSidebar__utilityLink" @click="openAuthorProfile">작성자 프로필 보기</button>
           <button v-if="canEdit && hasSavedTierList" class="editorSidebar__utilityLink editorSidebar__utilityLink--danger" @click="openDeleteModal">삭제하기</button>
-          <button v-if="canDuplicate" class="editorSidebar__utilityLink" @click="duplicateCurrentTierList">복사해서 내 티어표로 가져오기</button>
+          <button v-if="canDuplicate" class="editorSidebar__utilityLink" @click="duplicateCurrentTierList">{{ duplicateActionLabel }}</button>
           <button
             v-if="canRequestTemplateCreate"
             class="editorSidebar__utilityLink"

frontend/src/views/UserProfileView.vue

@@ -0,0 +1,471 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '../lib/api'
+import { editorPath, followingFeedPath, loginPath } from '../lib/paths'
+import { toApiUrl } from '../lib/runtime'
+import { useAuthStore } from '../stores/auth'
+import { useToast } from '../composables/useToast'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const toast = useToast()
+
+const userId = computed(() => route.params.userId || '')
+const profile = ref(null)
+const tierLists = ref([])
+const query = ref('')
+const isLoading = ref(false)
+const isFollowBusy = ref(false)
+const error = ref('')
+const brokenThumbnailIds = ref({})
+
+const profileAvatarUrl = computed(() => (profile.value?.avatarSrc ? toApiUrl(profile.value.avatarSrc) : ''))
+const profileDisplayName = computed(() => profile.value?.nickname || profile.value?.accountName || '알 수 없음')
+const profileFallback = computed(() => (profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?')
+const canFollow = computed(() => !!auth.user && !!profile.value && !profile.value.isSelf)
+
+watch(error, (message) => {
+  if (!message) return
+  toast.error(message)
+  error.value = ''
+})
+
+function fmt(ts) {
+  return new Date(ts).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+function displayNameOf(tierList) {
+  return tierList.authorName || profileDisplayName.value
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : profileAvatarUrl.value
+}
+
+function avatarFallbackOf(tierList) {
+  return (tierList.authorAccountName || profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?'
+}
+
+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 loadProfile() {
+  isLoading.value = true
+  try {
+    if (!auth.hydrated) await auth.refresh()
+    const [profileRes, tierListsRes] = await Promise.all([
+      api.getUserProfile(userId.value),
+      api.listUserPublicTierLists(userId.value, { q: query.value }),
+    ])
+    profile.value = profileRes.user || null
+    tierLists.value = tierListsRes.tierLists || []
+    brokenThumbnailIds.value = {}
+  } catch (e) {
+    error.value = '작성자 프로필을 불러오지 못했어요.'
+    profile.value = null
+    tierLists.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function toggleFollow() {
+  if (!canFollow.value || !profile.value?.id || isFollowBusy.value) return
+  try {
+    isFollowBusy.value = true
+    const data = profile.value.isFollowing
+      ? await api.unfollowUser(profile.value.id)
+      : await api.followUser(profile.value.id)
+    profile.value = data.user || profile.value
+    toast.success(profile.value.isFollowing ? '팔로우했어요.' : '팔로우를 해제했어요.')
+  } catch (e) {
+    if (e?.status === 401) {
+      router.push(loginPath(route.fullPath))
+      return
+    }
+    error.value = '팔로우 상태를 변경하지 못했어요.'
+  } finally {
+    isFollowBusy.value = false
+  }
+}
+
+function openTierList(tierList) {
+  router.push(editorPath(tierList.topicId, tierList.id))
+}
+
+watch(userId, loadProfile, { immediate: true })
+</script>
+
+<template>
+  <section class="pageWrap">
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Author</div>
+        <h2 class="pageHead__title">{{ profileDisplayName }}</h2>
+        <div class="pageHead__desc">
+          {{ profile?.accountName ? `@${profile.accountName}` : '작성자 프로필' }}
+        </div>
+      </div>
+      <div class="pageHead__aside profileActions">
+        <button v-if="canFollow" class="btn btn--primary" :disabled="isFollowBusy" type="button" @click="toggleFollow">
+          {{ profile?.isFollowing ? '팔로잉' : '팔로우' }}
+        </button>
+        <button v-if="auth.user" class="btn" type="button" @click="router.push(followingFeedPath())">팔로우 피드</button>
+      </div>
+    </section>
+
+    <section class="profileHero">
+      <div class="profileCard">
+        <img v-if="profileAvatarUrl" class="profileAvatar" :src="profileAvatarUrl" :alt="profileDisplayName" draggable="false" />
+        <div v-else class="profileAvatar profileAvatar--fallback">{{ profileFallback }}</div>
+        <div class="profileMeta">
+          <div class="profileMeta__name">{{ profileDisplayName }}</div>
+          <div class="profileMeta__handle">{{ profile?.accountName ? `@${profile.accountName}` : '작성자 프로필' }}</div>
+        </div>
+      </div>
+      <div class="profileStats">
+        <article class="profileStat">
+          <span class="profileStat__label">공개 티어표</span>
+          <strong class="profileStat__value">{{ profile?.publicTierListCount || 0 }}</strong>
+        </article>
+        <article class="profileStat">
+          <span class="profileStat__label">팔로워</span>
+          <strong class="profileStat__value">{{ profile?.followerCount || 0 }}</strong>
+        </article>
+        <article class="profileStat">
+          <span class="profileStat__label">팔로잉</span>
+          <strong class="profileStat__value">{{ profile?.followingCount || 0 }}</strong>
+        </article>
+      </div>
+    </section>
+
+    <section class="listToolbar">
+      <input v-model="query" class="input" placeholder="이 작성자의 공개 티어표 검색" @keydown.enter.prevent="loadProfile" />
+      <button class="btn" :disabled="isLoading" type="button" @click="loadProfile">{{ isLoading ? '검색중...' : '검색' }}</button>
+    </section>
+
+    <div v-if="isLoading" class="empty">작성자 티어표를 불러오고 있어요.</div>
+    <div v-else-if="!tierLists.length" class="empty">아직 공개 티어표가 없어요.</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__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>
+</template>
+
+<style scoped>
+.profileActions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.btn {
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft-2);
+  color: var(--theme-text);
+  font-weight: 800;
+  cursor: pointer;
+}
+.btn--primary {
+  border: 0;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #fff;
+}
+.profileHero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
+  gap: 18px;
+  margin-bottom: 22px;
+}
+.profileCard,
+.profileStat {
+  border-radius: 24px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+}
+.profileCard {
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  min-width: 0;
+}
+.profileAvatar {
+  width: 82px;
+  height: 82px;
+  border-radius: 9999px;
+  object-fit: cover;
+  border: 1px solid var(--theme-avatar-border);
+  background: var(--theme-border);
+  flex: 0 0 auto;
+}
+.profileAvatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 28px;
+  font-weight: 900;
+}
+.profileMeta {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+.profileMeta__name {
+  font-size: 24px;
+  font-weight: 900;
+  color: var(--theme-text);
+  word-break: break-word;
+}
+.profileMeta__handle {
+  font-size: 14px;
+  color: var(--theme-text-faint);
+}
+.profileStats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+.profileStat {
+  padding: 18px;
+  display: grid;
+  gap: 8px;
+  align-content: center;
+}
+.profileStat__label {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--theme-text-faint);
+}
+.profileStat__value {
+  font-size: 26px;
+  font-weight: 900;
+  color: var(--theme-text);
+}
+.listToolbar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+}
+.input {
+  min-width: 260px;
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
+}
+.empty {
+  opacity: 0.76;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
+}
+.boardCard {
+  min-width: 0;
+  border-radius: 22px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  color: var(--theme-text);
+  overflow: hidden;
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+  transition:
+    transform 0.16s ease,
+    background 0.16s ease;
+}
+.boardCard:hover {
+  background: var(--theme-card-bg-hover);
+  transform: translateY(-2px);
+}
+.boardCard__body {
+  width: 100%;
+  min-width: 0;
+  text-align: left;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  display: grid;
+}
+.boardCard__thumbWrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 14px 14px 0;
+  box-sizing: border-box;
+}
+.boardCard__thumb,
+.boardCard__thumbPlaceholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 18px;
+  display: block;
+}
+.boardCard__thumb {
+  object-fit: cover;
+}
+.boardCard__thumbPlaceholder {
+  display: grid;
+  place-items: center;
+  background: var(--theme-thumb-fallback-bg);
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 700;
+}
+.boardCard__head {
+  min-width: 0;
+  padding: 16px 18px 18px;
+  display: grid;
+  gap: 8px;
+}
+.boardCard__titleRow,
+.boardCard__metaRow {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+}
+.boardCard__titleRow {
+  align-items: flex-start;
+}
+.boardCard__metaRow {
+  align-items: flex-end;
+}
+.boardCard__title {
+  min-width: 0;
+  font-weight: 800;
+  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__author {
+  min-width: 0;
+  max-width: 100%;
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  font-size: 13px;
+  opacity: 0.86;
+  overflow: hidden;
+}
+.boardCard__authorName {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.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;
+}
+.boardCard__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 900;
+}
+.boardCard__date,
+.favoriteStat {
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 13px;
+  color: var(--theme-text-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.boardCard__date {
+  font-size: 10px;
+}
+@media (max-width: 1400px) {
+  .list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 1200px) {
+  .profileHero {
+    grid-template-columns: 1fr;
+  }
+
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .profileCard {
+    padding: 18px;
+  }
+
+  .profileStats,
+  .list {
+    grid-template-columns: 1fr;
+  }
+
+  .input {
+    min-width: 0;
+    width: 100%;
+  }
+}
+</style>