tier-maker/docs/map.md

파일-화면 매핑 가이드

/

• 화면 파일: frontend/src/views/HomeView.vue
• 역할: 데스크톱 기본 4열 게임 카드 라이브러리 대시보드, 상단 메인 썸네일과 게임명 + 작은 ID 메타를 가진 템플릿 선택 카드, 게임 카드 클릭 이동, 직접 티어표 만들기 진입
• 연동 API: GET /api/games

/games/:gameId

• 화면 파일: frontend/src/views/GameHubView.vue
• 역할: 선택한 게임 정보 표시, 공개 티어표 목록 표시, 제목/작성자 검색, 티어표별 상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일 카드 표시, 새 티어표 작성은 우측 하단 CTA로 진입
• 연동 API: GET /api/games/:gameId, GET /api/tierlists/public, POST /api/tierlists/:id/favorite, DELETE /api/tierlists/:id/favorite

/editor/:gameId/new, /editor/:gameId/:tierListId

• 화면 파일: frontend/src/views/TierEditorView.vue
• 역할: 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드
• 연동 API: GET /api/games/:gameId, 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

/login

• 화면 파일: frontend/src/views/LoginView.vue
• 역할: 로그인/회원가입 전환, 첫 가입 안내
• 연동 API: GET /api/auth/meta, POST /api/auth/login, POST /api/auth/signup

/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

/search

• 화면 파일: frontend/src/views/SearchResultsView.vue
• 역할: 좌측 전역 검색 입력에서 넘긴 키워드로 공개 티어표 전체를 검색하고, 자체 검색 툴바 없이 상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일 카드 목록으로 표시
• 연동 API: GET /api/tierlists/public?q=...

/admin

• 화면 파일: frontend/src/views/AdminView.vue
• 역할: 공통 우측 패널 대신 전용 320px 운영 패널을 사용해 게임 관리 / 아이템 관리 / 티어표 관리 / 회원 관리 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 선택된 게임 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/완성본 이동, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 게임 템플릿화, 사용자 템플릿 등록/업데이트 요청 승인·반려, 회원 비밀번호 초기화 포함 회원 관리, 파일 입력 초기화, 아이템 삭제, 게임 삭제
• 연동 API: POST /api/admin/games, POST /api/admin/games/:gameId/thumbnail, POST /api/admin/games/:gameId/images, PATCH /api/admin/games/:gameId/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/template-requests, POST /api/admin/template-requests/:requestId/approve, POST /api/admin/template-requests/:requestId/reject, POST /api/admin/tierlists/:tierListId/promote-items, POST /api/admin/tierlists/:tierListId/create-game-template, GET /api/admin/users, PATCH /api/admin/users/:userId, PATCH /api/admin/users/:userId/password, DELETE /api/admin/users/:userId, DELETE /api/admin/games/:gameId/items/:itemId, DELETE /api/admin/games/:gameId

/profile

• 화면 파일: frontend/src/views/ProfileView.vue
• 역할: 프로필 표시, 작성자 닉네임 수정, 아바타 미리보기 후 저장, 설정 화면 하단 로그아웃 처리
• 연동 API: GET /api/auth/me, POST /api/auth/profile

공통 레이아웃

• 앱 셸 파일: frontend/src/App.vue
• 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, 로그인 상태 반영, 최근 즐겨찾기 바로가기와 전역 검색 입력, 관리자 메뉴 노출 제어, 실제 SVG 에셋과 선형 SVG 아이콘이 혼합된 레일 UI, 전역 우측 상단 토스트 렌더링
• 세부: 좌측 패널은 248px 기준 폭을 사용하되 축소 시 아이콘 중심의 좁은 레일로 전환하고, 우측 패널은 320px 기준 폭을 사용한다. 세 컬럼 모두 상단에 높이 56px의 헤더 블록을 유지한다. 중앙 헤더에는 고정 브랜드 Tier Maker by zenn이 표시되고, 우측 패널 토글은 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 아이콘만 표시된다. 좌우 레일의 주요 액션은 각각 하단 56px 푸터 안에서 항상 보이도록 유지하면서 아래쪽 패딩으로 여백을 확보한다.

백엔드 진입점

• 서버 엔트리: backend/index.js
• 데이터 초기화: backend/src/db.js
• 로컬 DB 실행 설정: docker-compose.yml
• 로컬 MariaDB 가이드: docs/local-mariadb.md
• 인증 라우트: backend/src/routes/auth.js
• 게임 라우트: backend/src/routes/games.js
• 티어표 라우트: backend/src/routes/tierlists.js
• 관리자 라우트: backend/src/routes/admin.js