docs: README, CLAUDE.md 작성

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

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 .
+```

src/components/DownloadSection.jsx

@@ -48,7 +48,7 @@ export default function DownloadSection() {
   return (
     <section className="download-section">
       <div className="download-content">
-        <h2 className="download-title">A301</h2>
+        <h2 className="download-title">One of the plans</h2>
         {info ? (
           <>
             <p className="download-meta">

src/pages/HomePage.jsx

@@ -10,7 +10,7 @@ export default function HomePage() {
   return (
     <div className="home-page">
       <header className="home-header">
-        <h1 className="home-logo">A301</h1>
+        <h1 className="home-logo">One of the plans</h1>
         <div className="home-user">
           {user ? (
             <>
@@ -28,7 +28,7 @@ export default function HomePage() {
 
       <section className="hero-banner">
         <div className="hero-overlay">
-          <h2 className="hero-title">A301 MULTIPLAYER</h2>
+          <h2 className="hero-title">One of the plans</h2>
           <p className="hero-desc">Unity 3D 멀티플레이어 테스트에 참여하세요</p>
         </div>
       </section>

src/pages/LoginPage.jsx

@@ -31,7 +31,7 @@ export default function LoginPage() {
     <div className="login-page">
       <div className="login-panel">
         <div className="login-header">
-          <h1 className="game-title">A301</h1>
+          <h1 className="game-title">One of the plans</h1>
           <p className="game-subtitle">MULTIPLAYER</p>
         </div>
 

src/pages/RegisterPage.jsx

@@ -39,7 +39,7 @@ export default function RegisterPage() {
     <div className="login-page">
       <div className="login-panel">
         <div className="login-header">
-          <h1 className="game-title">A301</h1>
+          <h1 className="game-title">One of the plans</h1>
           <p className="game-subtitle">MULTIPLAYER</p>
         </div>