tolelom
f4196f5918
All checks were successful
Client CI/CD / deploy (push) Successful in 11s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
71 lines
2.3 KiB
Markdown
71 lines
2.3 KiB
Markdown
# 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 .
|
|
```
|