tier-maker/docs/map.md

파일-화면 매핑 가이드

/

• 화면 파일: 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

/topics/:topicId

• 화면 파일: frontend/src/views/TopicHubView.vue
• 역할: 선택한 주제 slug 기준 정보 표시, 관리자 추천 티어표 상단 강조 섹션과 일반 공개 티어표 목록 분리 표시, 제목/작성자 검색, 티어표별 상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일 카드 표시, 새 티어표 작성은 우측 하단 CTA로 진입
• 연동 API: GET /api/topics/:topicId, GET /api/tierlists/public, POST /api/tierlists/:id/favorite, DELETE /api/tierlists/:id/favorite

/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

/login

• 화면 파일: frontend/src/views/LoginView.vue
• 역할: 로그인/회원가입 전환, 첫 가입 안내, 일반 회원가입 후 이메일 인증 안내와 인증 메일 재전송, 비밀번호 재설정 메일 요청, ?verifyToken=... 인증 링크 처리, ?resetToken=... 새 비밀번호 설정 처리
• 연동 API: GET /api/auth/meta, POST /api/auth/login, POST /api/auth/signup, POST /api/auth/email/verify, POST /api/auth/email/resend, POST /api/auth/password-reset/request, POST /api/auth/password-reset/confirm

/me

• 화면 파일: frontend/src/views/MyTierListsView.vue
• 역할: 내 티어표 목록 조회, 4열 라이브러리 카드형 썸네일 표시, 편집 화면으로 이동, 작성자 본인 티어표 삭제
• 연동 API: GET /api/tierlists/me, DELETE /api/tierlists/:id

/favorites

• 화면 파일: frontend/src/views/FavoriteTierListsView.vue
• 역할: 즐겨찾기한 티어표 목록 조회, 검색/정렬, 라이브러리 카드형 표시, 편집 화면 이동, 즐겨찾기 상태 확인
• 연동 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
• 역할: 좌측 전역 검색 입력에서 넘긴 키워드로 공개 티어표 전체를 검색하고, 자체 검색 툴바 없이 상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일 카드 목록으로 표시
• 연동 API: GET /api/tierlists/public?q=...

/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

/profile

• 화면 파일: frontend/src/views/ProfileView.vue
• 역할: 넓은 화면에서는 왼쪽 프로필 정보 카드와 오른쪽 비밀번호 변경 카드로 나뉘는 설정 화면, 프로필 표시, 작성자 닉네임 수정, 아바타 미리보기 후 저장, 중복/예약어 닉네임 오류 안내, 현재 비밀번호 확인 기반 비밀번호 변경, 설정 화면 로그아웃 처리
• 연동 API: GET /api/auth/me, POST /api/auth/profile, POST /api/auth/password

공통 레이아웃

• 앱 셸 파일: frontend/src/App.vue
• 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, 홈 / 템플릿 / 댓글 관리 네비게이션과 화면별 검색 placeholder 전환, preview=1 공유 프리뷰에서도 같은 좌우 레일과 중앙 헤더 유지, 로그인 상태 반영, 최근 즐겨찾기 바로가기와 전역 검색 입력, 댓글 알림 unread dot, 관리자 메뉴 노출 제어, 실제 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
• 메일 발송 유틸: 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