zenn
069eda3544
캐릭터 이름 표시가 긴 항목은 카드 하단 텍스트를 자동 무한 슬라이드로 보여주고, 넘치지 않는 이름은 기존 고정 표시를 유지하도록 정리했다. 개발 환경에서는 SKIP_EMAIL_VERIFICATION=true 설정으로 가입 시 메일 인증 단계를 건너뛸 수 있게 보강했다. Made-with: Cursor
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를 확인하세요.