One of the plans — Frontend

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

기술 스택

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

실행

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 참고.

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