# Tier Maker (Vue)

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

## 권장 로컬 실행

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

### 1) MariaDB + phpMyAdmin 실행

```bash
docker compose up -d mariadb phpmyadmin
```

- MariaDB: `127.0.0.1:3307`
- phpMyAdmin: `http://localhost:8081`

### 2) 백엔드 실행

```bash
cd backend
npm install
npm run dev
```

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

### 3) 프론트엔드 실행

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

- 접속: `http://localhost:5173`

자세한 내용은 [docs/local-mariadb.md](/Users/bicute/Desktop/zenn.dev/tier-cursor/docs/local-mariadb.md)를 참고하세요.

## 사용 흐름(현재 구현)

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

## 업데이트 내역

`UPDATE.md`를 확인하세요.