tolelom
6fb7e2cbc5
- api/client: 리프레시 토큰 자동 갱신 (401 시 재시도, 동시 요청 dedup) - api/client: 204 No Content 처리 추가 (res.json() 크래시 방지) - api/client: 서버 에러 메시지 body에서 파싱하여 전달 - api/auth: logout 함수 추가 (서버 세션 삭제), 미사용 refreshToken 함수 제거 - AuthContext: 로그인 시 refreshToken 저장, 로그아웃 시 서버 호출 분리 - AuthContext: 401 이벤트는 로컬 세션만 정리 (clearSession 분리) - DownloadSection: 게임 시작 토큰을 localStorage에서 직접 읽기 (스테일 방지) - DownloadAdmin: XHR 401 처리, Content-Type 헤더 추가 - AnnouncementAdmin: 등록/수정/삭제 에러 상태 표시 추가 - AnnouncementBoard: API 실패 시 에러 메시지 표시 - UserAdmin: 권한 변경/삭제 에러 처리 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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
게임 실행 흐름
- 유저가 "게임 시작" 클릭 →
a301://launch?token=<JWT>호출 - 런처 미설치 시 →
launcher.exe자동 다운로드 - 런처 설치 후 재클릭 → 런처가 게임 다운로드/실행 처리
배포
Docker + nginx로 서빙. nginx.conf 참고.
docker build --build-arg VITE_API_BASE_URL=https://a301.api.tolelom.xyz -t a301-client .