diff --git a/backend/index.js b/backend/index.js index 1825f04..936e574 100644 --- a/backend/index.js +++ b/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, () => { diff --git a/backend/src/db.js b/backend/src/db.js index bdea22c..bff4102 100644 --- a/backend/src/db.js +++ b/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, diff --git a/backend/src/routes/users.js b/backend/src/routes/users.js new file mode 100644 index 0000000..ced7016 --- /dev/null +++ b/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 diff --git a/docs/history.md b/docs/history.md index c9b568c..79ebd49 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,11 @@ # 의사결정 이력 +## 2026-04-03 v1.4.53 +- 본인 티어표 복사 기능이 타인 티어표 전용 조건으로만 남아 있었지만, 실제 사용에서는 자기 작업본을 변형용 복사본으로 다시 만들고 싶은 경우도 많으므로 저장된 본인 티어표에도 복사 버튼을 여는 편이 맞다고 판단했다. +- 편집 중 저장하지 않은 변경이 있는 상태에서 복사본을 만들 때는 마지막 저장본이 아니라 현재 화면 상태가 복사되기를 기대하기 쉬우므로, 본인 편집본 복사는 복사 직전에 현재 원본을 한 번 저장한 뒤 새 복사본을 만드는 쪽으로 정리했다. +- 팔로우 기능은 처음부터 추천 알고리즘까지 섞기보다, 작성자 프로필과 팔로우 피드라는 명확한 사용자 경로를 먼저 열어두는 편이 제품 구조상 자연스럽다고 보고 `user_follows` 기반 1차 구현을 먼저 붙였다. +- 작성자 프로필 진입점은 목록 카드 내부 작성자 클릭을 바로 분리하면 기존 카드 전체 클릭 문법과 충돌할 수 있으므로, 이번 단계에서는 티어표 편집/뷰어 우측 패널의 `작성자 프로필 보기`를 우선 진입점으로 두고 카드 내부 세부 클릭 분리는 후속 UX로 미루는 편이 안전하다고 판단했다. + ## 2026-04-03 v1.4.51 - 불특정 다수가 만드는 공개 티어표를 전부 같은 선상에 두면 첫 화면 품질 편차가 너무 커질 수 있으므로, 주제별 목록 상단에 관리자 큐레이션 `추천 티어표` 섹션을 두고 아래 일반 공개 목록과 분리하는 편이 맞다고 판단했다. - 추천 선정은 처음부터 완전 자동화보다 운영자가 직접 지정/해제할 수 있는 수동 큐레이션을 먼저 넣는 편이 안전하므로, 좋아요 수 기반 자동 후보 필터와 팔로우 피드는 후속 작업으로 미루고 이번 릴리스에서는 추천 표시 구조와 관리자 토글만 먼저 완성했다. diff --git a/docs/map.md b/docs/map.md index ccb82b5..43da0fb 100644 --- a/docs/map.md +++ b/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` diff --git a/docs/spec.md b/docs/spec.md index 90da192..3afb564 100644 --- a/docs/spec.md +++ b/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` 라우트 값만 바뀌어도 화면이 이전 티어표 데이터에 남지 않도록, 라우트 변경마다 에디터 상태를 다시 로드한다. - 복사한 티어표 상단의 `원본` 링크를 누르면 원본 티어표로 이동하며, 편집 모드에서 저장하지 않은 변경이 있으면 이동 전에 `저장 없이 이동` 확인 모달을 먼저 띄운다. +- 본인 티어표도 저장된 상태라면 편집/뷰어 우측 패널에서 복사본을 만들 수 있고, 편집 중 저장하지 않은 수정이 남아 있으면 복사 직전에 현재 수정본을 먼저 저장해 최신 상태 기준 복사본을 만든다. - 비공개 티어표라도 관리자는 편집 화면에서 완성본을 열람할 수 있다. - 공개 티어표는 목록과 상세 화면에서 즐겨찾기 토글 및 개수를 함께 표시한다. - 카드형 목록에서는 즐겨찾기 수/상태만 표시하고, 실제 토글은 상세 화면에서 처리한다. diff --git a/docs/todo.md b/docs/todo.md index 9e52fac..c8ed8ae 100644 --- a/docs/todo.md +++ b/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 클라이언트를 만들고 일반 이메일 계정과 같은 이메일의 구글 계정을 자동 연결할지 정책을 먼저 결정한다. diff --git a/docs/update.md b/docs/update.md index a41fa13..3b7872c 100644 --- a/docs/update.md +++ b/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 - 관리자 전체 티어표 카드 컴포넌트의 `추천 지정 / 추천 해제` 버튼과 `추천 노출중` 배지, 추천 개수 통계 표시가 실제 릴리스 커밋에 함께 포함되도록 누락 파일을 다시 묶었다. diff --git a/frontend/index.html b/frontend/index.html index 58d6628..09ddab0 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,10 +3,10 @@ - Tier Maker | 게임 템플릿으로 만드는 티어표 + Tier Maker | 템플릿으로 쉽게 만드는 티어표 @@ -20,10 +20,10 @@ - + @@ -31,10 +31,10 @@ - + diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 3cf4cb5..00039d5 100644 --- a/frontend/src/App.vue +++ b/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: '설정', diff --git a/frontend/src/lib/api.js b/frontend/src/lib/api.js index 737011e..4d0a142 100644 --- a/frontend/src/lib/api.js +++ b/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' }), diff --git a/frontend/src/lib/paths.js b/frontend/src/lib/paths.js index 96fb741..9c8de43 100644 --- a/frontend/src/lib/paths.js +++ b/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)}` +} diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js index 1d65db1..e142903 100644 --- a/frontend/src/router/index.js +++ b/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 }, ], }) diff --git a/frontend/src/views/FollowingFeedView.vue b/frontend/src/views/FollowingFeedView.vue new file mode 100644 index 0000000..79ce5de --- /dev/null +++ b/frontend/src/views/FollowingFeedView.vue @@ -0,0 +1,328 @@ + + + + + diff --git a/frontend/src/views/TierEditorView.vue b/frontend/src/views/TierEditorView.vue index 811a30a..18c6ea9 100644 --- a/frontend/src/views/TierEditorView.vue +++ b/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(() => { 공유하기 + @@ -1730,8 +1743,9 @@ onUnmounted(() => { 공유하기 + - +