docs: README, CLAUDE.md 작성
All checks were successful
Client CI/CD / deploy (push) Successful in 11s
All checks were successful
Client CI/CD / deploy (push) Successful in 11s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
72
README.md
72
README.md
@@ -1,16 +1,70 @@
|
||||
# React + Vite
|
||||
# One of the plans — Frontend
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
React 기반 웹 프론트엔드. 유저 인증, 공지사항, 게임 런처 다운로드/실행 기능을 제공합니다.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
## 기술 스택
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
- **React 19** (plain JavaScript, no TypeScript)
|
||||
- **Vite 7** — 빌드 도구 / HMR
|
||||
- **React Router v7** — 클라이언트 사이드 라우팅
|
||||
- **ESLint** — flat config (`eslint.config.js`)
|
||||
|
||||
## React Compiler
|
||||
## 실행
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
```bash
|
||||
npm install
|
||||
npm run dev # 개발 서버 (HMR)
|
||||
npm run build # 프로덕션 빌드 → dist/
|
||||
npm run preview # 빌드 결과 로컬 미리보기
|
||||
npm run lint # ESLint 검사
|
||||
```
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
## 환경 변수
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
| 변수 | 설명 | 기본값 |
|
||||
|------|------|--------|
|
||||
| `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 .
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user