a301_client/CLAUDE.md

CLAUDE.md

Commands

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

Tech Stack

• 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

Unity 3D 멀티플레이어 게임 "One of the plans" 웹 플랫폼. 유저 인증 → 게임 런처 다운로드 → a301:// 프로토콜로 런처 실행.

Project Structure

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

Key Patterns

• 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 사용.