Tier Maker (Vue)

리액트/타입스크립트 없이 Vue3 + JavaScript로 만드는 티어표 메이커 프로젝트입니다.

권장 로컬 실행

로컬과 서버의 DB 환경 차이를 줄이기 위해 기본 개발 환경도 MariaDB + phpMyAdmin 기준으로 맞춥니다.

1) MariaDB + phpMyAdmin 실행

docker compose up -d mariadb phpmyadmin

• MariaDB: 127.0.0.1:3307
• phpMyAdmin: http://localhost:8081

2) 백엔드 실행

cd backend
npm install
npm run dev

• 기본 주소: http://localhost:5179
• 업로드 경로: backend/uploads/
• 기본 개발 DB: MariaDB(tier_cursor)

3) 프론트엔드 실행

cd frontend
npm install
VITE_API_ORIGIN=http://localhost:5179 npm run dev

• 접속: http://localhost:5173

자세한 내용은 docs/local-mariadb.md를 참고하세요.

UGREEN NAS 운영 배포

운영용은 MariaDB + backend + frontend 3컨테이너 구조를 권장합니다.

cp .env.production.example .env.production
docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build

• 프로덕션 컴포즈: docker-compose.prod.yml
• 배포 가이드: docs/ugreen-nas-deploy.md

사용 흐름(현재 구현)

• 게임 선택: /에서 게임 클릭
• 게임 허브: 새 티어표 만들기 / 공개 티어표 목록
• 에디터:
  • 기본 그룹 5개(S/A/B/C/D)
  • 그룹 이름 수정, 그룹 순서 드래그 변경
  • 아이템 드래그&드롭(풀 ↔ 그룹, 그룹 ↔ 그룹)
  • 커스텀 이미지 추가 후 저장 시 서버 업로드
  • 저장(로그인 필요) / PNG 다운로드
• 로그인/회원가입: 첫 회원가입 계정은 개발용으로 admin 권한 부여
• 프로필: 작성자 닉네임 수정, 아바타 미리보기 후 저장
• 관리자: /admin에서 게임 추가, 게임 선택 후 썸네일/아이템 관리

업데이트 내역

UPDATE.md를 확인하세요.