# One of the plans — Frontend

React 기반 웹 프론트엔드. 유저 인증, 공지사항, 게임 런처 다운로드/실행 기능을 제공합니다.

## 기술 스택

- **React 19** (plain JavaScript, no TypeScript)
- **Vite 7** — 빌드 도구 / HMR
- **React Router v7** — 클라이언트 사이드 라우팅
- **ESLint** — flat config (`eslint.config.js`)

## 실행

```bash
npm install
npm run dev       # 개발 서버 (HMR)
npm run build     # 프로덕션 빌드 → dist/
npm run preview   # 빌드 결과 로컬 미리보기
npm run lint      # ESLint 검사
```

## 환경 변수

| 변수 | 설명 | 기본값 |
|------|------|--------|
| `VITE_API_BASE_URL` | 백엔드 API 주소 | `""` (상대경로) |

프로덕션 빌드 시 `--build-arg VITE_API_BASE_URL=https://a301.api.tolelom.xyz` 로 주입.

## 프로젝트 구조

```
src/
├── api/                  # 백엔드 API 호출 모듈
│   ├── client.js         # fetch 래퍼 (JWT 자동 첨부, 401 리다이렉트)
│   ├── auth.js
│   ├── announcements.js
│   ├── download.js
│   └── users.js
├── context/              # 인증 컨텍스트 (3파일 분리 — react-refresh 규칙)
│   ├── authContextValue.js  # createContext
│   ├── AuthContext.jsx      # AuthProvider
│   └── useAuth.js           # useAuth hook
├── pages/
│   ├── HomePage.jsx      # 메인 (배너 + 다운로드 + 공지)
│   ├── LoginPage.jsx
│   ├── RegisterPage.jsx
│   └── AdminPage.jsx     # 관리자 (공지/다운로드/유저 관리)
└── components/
    ├── DownloadSection.jsx   # 게임 시작 버튼 (a301:// URI 호출)
    ├── AnnouncementBoard.jsx
    └── admin/
        ├── AnnouncementAdmin.jsx
        ├── DownloadAdmin.jsx  # launcher.exe / game.zip 업로드
        └── UserAdmin.jsx
```

## 게임 실행 흐름

1. 유저가 "게임 시작" 클릭 → `a301://launch?token=<JWT>` 호출
2. 런처 미설치 시 → `launcher.exe` 자동 다운로드
3. 런처 설치 후 재클릭 → 런처가 게임 다운로드/실행 처리

## 배포

Docker + nginx로 서빙. `nginx.conf` 참고.

```bash
docker build --build-arg VITE_API_BASE_URL=https://a301.api.tolelom.xyz -t a301-client .
```