diff --git a/CLAUDE.md b/CLAUDE.md index e735f3c..3352b40 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,33 +1,50 @@ # CLAUDE.md -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. - ## Commands ```bash -npm run dev # Start dev server with HMR (hot module reloading) -npm run build # Production build to dist/ -npm run preview # Preview production build locally -npm run lint # Run ESLint on all files +npm run dev # 개발 서버 (HMR) +npm run build # 프로덕션 빌드 → dist/ +npm run preview # 빌드 결과 미리보기 +npm run lint # ESLint ``` ## Tech Stack -- **React 19** with plain JavaScript (no TypeScript) -- **Vite 7** as build tool (uses `@vitejs/plugin-react` with Babel/Fast Refresh) -- **ESLint** with react-hooks and react-refresh plugins +- **React 19** — plain JavaScript (no TypeScript) +- **Vite 7** — `@vitejs/plugin-react` (Babel / Fast Refresh) +- **React Router v7** +- **ESLint** — flat config, `no-unused-vars` ignores `^[A-Z_]` ## Project Purpose -Frontend for a **Unity 3D multiplayer game deployment**. Target users are testers who need to: -- Access/log in to the game platform -- Download the Unity game client -- Launch and play the multiplayer game +Unity 3D 멀티플레이어 게임 "One of the plans" 웹 플랫폼. +유저 인증 → 게임 런처 다운로드 → `a301://` 프로토콜로 런처 실행. ## Project Structure -Currently a minimal Vite + React starter. `src/main.jsx` is the entry point that mounts `src/App.jsx` to `#root`. No routing, state management libraries, or API layer are set up yet — these will be added as the project develops. +``` +src/ +├── api/ # 백엔드 호출 (client.js: fetch 래퍼 + JWT + 401 처리) +├── context/ # AuthContext — 3파일 분리 (react-refresh 규칙) +│ ├── authContextValue.js +│ ├── AuthContext.jsx +│ └── useAuth.js +├── pages/ # HomePage, LoginPage, RegisterPage, AdminPage +└── components/ + ├── DownloadSection.jsx # a301:// URI 호출, 미설치 시 launcher.exe 다운로드 + ├── AnnouncementBoard.jsx + └── admin/ # AnnouncementAdmin, DownloadAdmin, UserAdmin +``` -## ESLint Config +## Key Patterns -Uses the new flat config format (`eslint.config.js`). The `no-unused-vars` rule ignores variables matching `^[A-Z_]` (uppercase constants are exempt). +- `src/api/client.js` — 모든 API 호출은 이 래퍼를 통해 처리. 401 응답 시 자동으로 localStorage 토큰 삭제 후 `/login` 리다이렉트. +- AuthContext는 `react-refresh` 린트 규칙(컴포넌트와 hook 혼재 금지) 때문에 3개 파일로 분리. +- 환경변수 `VITE_API_BASE_URL` — 빌드 시 주입. 개발 시 빈 문자열(상대경로 사용). +- 게임 이름 표기: **"One of the plans"** (기술 식별자 `a301`, `A301.exe` 등은 변경하지 않음) + +## API Base URL + +프론트엔드 nginx는 `/api/` 프록시 없음. +런처·백엔드 직접 통신은 `https://a301.api.tolelom.xyz` 사용. diff --git a/README.md b/README.md index 18bc70e..28614f4 100644 --- a/README.md +++ b/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=` 호출 +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 . +```