refactor: btn-game CSS 정리 및 LoginPage.css 삭제

- .btn-game에 display:inline-block, text-decoration:none 추가 → HomePage inline style 제거 - LoginPage.css 삭제 (deprecated, 임포트 없음) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
refactor: pages/wallet 리팩토링 — CSS 분리, 유효성 검사 개선, 테스트 통과
2026-04-12 20:01:30 +09:00 · 2026-04-12 19:51:55 +09:00 · 2026-04-12 19:17:17 +09:00 · 2026-04-12 19:11:23 +09:00 · 2026-04-12 18:47:26 +09:00 · 2026-04-12 16:57:54 +09:00
66 changed files with 3216 additions and 414 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,17 @@
+node_modules/
+dist/
+.git/
+.gitignore
+
+# 환경 변수 (빌드 시 --build-arg로 주입)
+.env
+.env.*
+
+# 에디터 / OS
+.vscode/
+.idea/
+*.DS_Store
+Thumbs.db
+
+# 로그
+npm-debug.log*
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_BASE_URL=
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -10,16 +10,23 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 코드 체크아웃
-        uses: actions/checkout@v4
+        run: |
+          git config --global --add safe.directory /workspace/A301/a301_client
+          git init
+          git remote add origin $GITHUB_SERVER_URL/$GITHUB_REPOSITORY.git
+          git fetch --depth=1 origin $GITHUB_SHA
+          git checkout $GITHUB_SHA

      - name: Node.js 설정
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
+        run: |
+          if ! command -v node &>/dev/null || [ "$(node -v | cut -d. -f1 | tr -d v)" -lt 22 ]; then
+            curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
+            apt-get install -y nodejs
+          fi
+          node -v && npm -v

      - name: 의존성 설치
-        run: npm ci --legacy-peer-deps
+        run: npm ci

      - name: 린트 검사
        run: npm run lint
@@ -35,23 +42,20 @@ jobs:
    needs: test
    steps:
      - name: 서버에 배포
-        uses: appleboy/ssh-action@v1
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          port: 22
-          script: |
-            set -e
-            export PATH=$PATH:/usr/local/bin:/opt/homebrew/bin:$HOME/.docker/bin
-            cd /tmp
-            rm -rf a301-client
-            # Suppress token from logs
-            set +x
-            git clone --quiet https://tolelom:${{ secrets.GIT_TOKEN }}@git.tolelom.xyz/A301/a301_client.git a301-client 2>/dev/null
-            set -x
-            cd a301-client
-            docker build --no-cache --build-arg VITE_API_BASE_URL=${{ secrets.VITE_API_BASE_URL }} -t a301-client:latest .
-            cd ~/server
-            docker compose up -d --force-recreate a301-client
-            rm -rf /tmp/a301-client
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          ssh -o StrictHostKeyChecking=no -i ~/.ssh/deploy_key \
+            ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }} \
+            'set -e &&
+            export PATH=$PATH:/usr/local/bin:/opt/homebrew/bin:$HOME/.docker/bin &&
+            cd /tmp &&
+            rm -rf a301-client &&
+            git clone --quiet https://tolelom:${{ secrets.GIT_TOKEN }}@git.tolelom.xyz/A301/a301_client.git a301-client &&
+            cd a301-client &&
+            docker build --build-arg VITE_API_BASE_URL=${{ secrets.VITE_API_BASE_URL }} -t a301-client:latest . &&
+            cd ~/server &&
+            docker compose up -d --force-recreate a301-client &&
+            rm -rf /tmp/a301-client'
+          rm -f ~/.ssh/deploy_key
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.superpowers/
--- a/4
+++ b/4
@@ -1,8 +1,8 @@
 # Stage 1: Build
-FROM node:lts-alpine AS builder
+FROM node:22-alpine AS builder
 WORKDIR /app
 COPY package*.json ./
-RUN npm ci --legacy-peer-deps
+RUN npm ci
 COPY . .
 ARG VITE_API_BASE_URL
 ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
--- a/docs/superpowers/specs/2026-03-23-wallet-ui-design.md
+++ b/docs/superpowers/specs/2026-03-23-wallet-ui-design.md
@@ -0,0 +1,195 @@
+# 지갑 UI 설계
+
+> 작성일: 2026-03-23
+> 상태: 승인됨
+
+---
+
+## 개요
+
+웹 클라이언트(`a301_client`)에 블록체인 지갑 UI를 추가한다. 단일 `/wallet` 페이지에 4개 탭(지갑, 자산, 인벤토리, 마켓)으로 구성하고, HomePage에 잔액 요약 카드를 배치한다.
+
+---
+
+## 페이지 구조
+
+### 라우팅
+
+| 경로 | 컴포넌트 | 인증 |
+|------|----------|------|
+| `/wallet` | WalletPage | 로그인 필수 |
+
+`/wallet` 라우트 보호: 기존 `AdminRoute` 패턴을 참고하여 `PrivateRoute` 컴포넌트를 새로 만든다. 로그인하지 않은 유저는 `/login`으로 리다이렉트.
+
+기존 라우트는 변경하지 않는다.
+
+### HomePage 변경
+
+1. **헤더**: "지갑" 링크 추가 → `/wallet`로 이동
+2. **지갑 요약 카드**: DownloadSection 위에 배치
+   - TOL 잔액 (큰 글씨)
+   - 보유 자산 수, 장착 아이템 수
+   - 클릭 시 `/wallet`로 이동
+   - 로그인하지 않은 상태에서는 숨김
+   - 3개 API (`/balance`, `/assets`, `/inventory`) `Promise.all`로 병렬 호출
+   - 일부 API 실패 시: 실패한 항목만 "--"로 표시, 카드 자체는 숨기지 않음
+
+---
+
+## 탭 1: 지갑
+
+잔액, 지갑 주소, 키 내보내기.
+
+### 잔액 카드
+- TOL 잔액을 크게 표시
+- API: `GET /api/chain/balance`
+
+### 지갑 정보
+- 공개키: 축약 표시 (`a3b4...e1f2`) + 복사 버튼
+- 주소: 축약 표시 (`a3b4c5d6...e9f0a1b2`) + 복사 버튼
+- 클릭 시 클립보드에 전체 값 복사, 토스트로 "복사됨" 알림
+- API: `GET /api/chain/wallet`
+
+### 키 내보내기
+- 비밀번호 입력 필드 + "내보내기" 버튼
+- 성공 시: 개인키 hex를 화면에 표시 (복사 버튼 포함)
+- 경고 텍스트: "개인키를 안전하게 보관하세요"
+- 탭 이탈 시(다른 탭 클릭): 개인키 표시 상태 초기화 (보안)
+- 에러 처리:
+  - HTTP 401 → "비밀번호가 올바르지 않습니다"
+  - 기타 에러 → 토스트로 서버 에러 메시지 표시
+- API: `POST /api/chain/wallet/export` (body: `{"password": "..."}`)
+
+---
+
+## 탭 2: 자산
+
+보유 NFT 목록 + 상세 정보.
+
+### 자산 목록
+- 아이템 이름, 템플릿 이름, 자산 ID 표시
+- 거래 가능 여부 표시 ("거래 가능" / "거래 불가")
+- API 호출 전략:
+  1. `GET /api/chain/assets` → 자산 ID 배열 반환
+  2. 각 ID에 대해 `GET /api/chain/asset/:id`를 `Promise.all`로 **병렬 호출**
+  3. 개별 자산 로드 실패 시: 해당 자산만 "로드 실패" 표시, 나머지는 정상 표시
+- 로딩 중: 스피너 표시
+
+### 자산 상세 (클릭 시 펼치기)
+- 속성(properties) 키-값 표시
+- 거래 가능 여부
+- 마켓 등록 상태 (등록됨 / 미등록)
+- **마켓 등록 버튼**: 미등록 + 거래 가능한 자산에만 표시
+  - 클릭 시: 가격 입력 인라인 UI (펼쳐진 상세 영역 내 숫자 input + "등록" 버튼)
+  - `POST /api/chain/market/list` (body: `{"asset_id": "...", "price": N}`)
+  - Idempotency-Key 헤더 필요
+  - 성공 시: 토스트 알림 + 해당 자산 상태 갱신 (마켓 등록됨으로 변경)
+
+---
+
+## 탭 3: 인벤토리
+
+장착 슬롯 현황 (조회 전용).
+
+### 슬롯 목록
+- 슬롯 이름 + 장착된 아이템 이름/ID 표시
+- 빈 슬롯은 "비어있음"으로 표시 (점선 테두리)
+- 장착/해제 버튼 없음 (게임 내에서만 조작)
+- API: `GET /api/chain/inventory`
+
+---
+
+## 탭 4: 마켓
+
+NFT 마켓플레이스. 구매, 판매(자산 탭에서 연결), 취소.
+
+### 리스팅 목록
+- 전체 / 내 리스팅 필터 토글
+- 각 리스팅: 아이템 이름, 판매자 (축약 주소), 가격
+- "내 리스팅" 필터: 클라이언트에서 `/api/chain/wallet`으로 가져온 내 지갑 주소와 리스팅의 seller 필드를 비교하여 필터링
+- API: `GET /api/chain/market` → 활성 리스팅 목록
+- 미사용: `GET /api/chain/market/:id` — 리스팅 상세 모달이 없으므로 의도적으로 사용하지 않음
+
+### 구매
+- 타인의 리스팅에 "구매" 버튼
+- 확인 다이얼로그 (useConfirm 사용): "화염 활을 500 TOL에 구매하시겠습니까?"
+- `POST /api/chain/market/buy` (body: `{"listing_id": "..."}`)
+- Idempotency-Key 헤더 필요
+- 성공 시: 토스트 알림 + 리스팅 목록 새로고침 + 잔액 갱신
+- 실패 시: 서버 응답 에러 메시지를 토스트로 표시 (잔액 부족 등 포함)
+
+### 내 리스팅 취소
+- 내 리스팅에 "취소" 버튼 (빨간 테두리)
+- 확인 다이얼로그: "리스팅을 취소하시겠습니까?"
+- `POST /api/chain/market/cancel` (body: `{"listing_id": "..."}`)
+- Idempotency-Key 헤더 필요
+- 성공 시: 토스트 알림 + 리스팅 목록 새로고침
+
+---
+
+## API 호출 패턴
+
+### 기존 API 클라이언트 활용
+- 모든 API 호출은 `src/api/client.js`의 `apiFetch()` 경유
+- JWT 토큰 자동 첨부, 401 시 자동 refresh
+- 새 파일: `src/api/chain.js` — 체인 관련 API 래퍼 함수 모음
+
+### Idempotency-Key
+- 마켓 구매/등록/취소 등 트랜잭션 API에는 `Idempotency-Key` 헤더 필요
+- `chain.js` 래퍼 내부에서 `crypto.randomUUID()`로 자동 생성하여 헤더에 추가
+- 호출 측(컴포넌트)에서는 Idempotency-Key를 신경 쓸 필요 없음
+
+### 에러 처리
+- API 에러 시 토스트로 에러 메시지 표시
+- 네트워크 에러 시 기존 retry 로직 적용 (GET만)
+
+### 로딩 상태
+- 각 탭 진입 시: 중앙 스피너 표시 (기존 로딩 패턴과 동일)
+- WalletSummary: 인라인 스피너 또는 "--" placeholder
+
+---
+
+## 컴포넌트 구조
+
+```
+src/
+├── api/
+│   └── chain.js              # 체인 API 래퍼 (신규)
+├── pages/
+│   ├── WalletPage.jsx        # /wallet 페이지 (탭 컨테이너) (신규)
+│   └── WalletPage.css        # 지갑 페이지 스타일 (신규)
+├── components/
+│   └── wallet/               # 지갑 관련 컴포넌트 (신규)
+│       ├── WalletTab.jsx     # 탭 1: 잔액, 주소, 키 내보내기
+│       ├── AssetsTab.jsx     # 탭 2: 자산 목록 + 상세
+│       ├── InventoryTab.jsx  # 탭 3: 인벤토리 조회
+│       ├── MarketTab.jsx     # 탭 4: 마켓
+│       └── WalletSummary.jsx # HomePage 요약 카드
+```
+
+---
+
+## 스타일링
+
+- 기존 프로젝트 패턴 그대로: plain CSS, dark 테마
+- 색상: 기존 `#BACDB0` (sage green) accent 사용
+- 탭 UI: 하단 보더로 활성 탭 표시
+- 복사 버튼: 클릭 시 `navigator.clipboard.writeText()` + 토스트
+- 반응형: `@media (max-width: 768px)` 대응
+
+---
+
+## 변경 파일 요약
+
+| 파일 | 변경 |
+|------|------|
+| `src/api/chain.js` | 신규: 체인 API 래퍼 (Idempotency-Key 자동 생성) |
+| `src/pages/WalletPage.jsx` | 신규: 지갑 페이지 (탭 컨테이너) |
+| `src/pages/WalletPage.css` | 신규: 지갑 페이지 스타일 |
+| `src/components/wallet/WalletTab.jsx` | 신규: 잔액/주소/키 내보내기 |
+| `src/components/wallet/AssetsTab.jsx` | 신규: 자산 목록 + 상세 + 마켓 등록 |
+| `src/components/wallet/InventoryTab.jsx` | 신규: 인벤토리 조회 |
+| `src/components/wallet/MarketTab.jsx` | 신규: 마켓 (구매/취소) |
+| `src/components/wallet/WalletSummary.jsx` | 신규: 홈 요약 카드 |
+| `src/App.jsx` | 수정: `/wallet` 라우트 + PrivateRoute 추가 |
+| `src/pages/HomePage.jsx` | 수정: 헤더 링크 + WalletSummary 추가 |
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -14,12 +14,11 @@ export default defineConfig([
      reactRefresh.configs.vite,
    ],
    languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
      globals: globals.browser,
      parserOptions: {
-        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
      },
    },
    rules: {
--- a/index.html
+++ b/index.html
@@ -3,6 +3,15 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="One of the plans — 멀티플레이어 보스 레이드 게임 플랫폼">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://a301.tolelom.xyz">
+    <meta property="og:title" content="One of the plans">
+    <meta property="og:description" content="One of the plans — 멀티플레이어 보스 레이드 게임 플랫폼">
+    <meta property="og:image" content="https://a301.tolelom.xyz/images/logo.webp">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
+    <link rel="icon" type="image/webp" href="/images/logo.webp">
    <title>One of the plans</title>
  </head>
  <body>
--- a/nginx.conf
+++ b/nginx.conf
@@ -3,7 +3,6 @@ server {
    root /usr/share/nginx/html;
    index index.html;

-    # 보안 헤더
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-Frame-Options "DENY" always;

@@ -13,11 +12,16 @@ server {
        add_header Cache-Control "no-store, no-cache, must-revalidate";
    }

-    # Vite 해시 에셋 장기 캐싱
+    # Vite 빌드 에셋 장기 캐싱 (파일명에 해시 포함 — 내용 변경 시 URL도 바뀜)
    location /assets/ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

+    # 정적 이미지 단기 캐싱 (해시 없는 파일)
+    location /images/ {
+        add_header Cache-Control "public, max-age=86400";
+    }
+
    # SPA fallback (react-router 사용 시 필요)
    location / {
        try_files $uri $uri/ /index.html;
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
        "@types/react": "^19.2.7",
        "@types/react-dom": "^19.2.3",
        "@vitejs/plugin-react": "^5.1.1",
-        "eslint": "^10.0.2",
+        "eslint": "^9.0.0",
        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-react-refresh": "^0.4.24",
        "globals": "^16.5.0",
@@ -1031,50 +1031,87 @@
      }
    },
    "node_modules/@eslint/config-array": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.2.tgz",
-      "integrity": "sha512-YF+fE6LV4v5MGWRGj7G404/OZzGNepVF8fxk7jqmqo3lrza7a0uUcDnROGRBG1WFC1omYUS/Wp1f42i0M+3Q3A==",
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "@eslint/object-schema": "^3.0.2",
+        "@eslint/object-schema": "^2.1.7",
        "debug": "^4.3.1",
-        "minimatch": "^10.2.1"
+        "minimatch": "^3.1.5"
      },
      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
    "node_modules/@eslint/config-helpers": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.5.2.tgz",
-      "integrity": "sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "@eslint/core": "^1.1.0"
+        "@eslint/core": "^0.17.0"
      },
      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
    "node_modules/@eslint/core": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.1.0.tgz",
-      "integrity": "sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
        "@types/json-schema": "^7.0.15"
      },
      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.14.0",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.5",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.39.3",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.3.tgz",
-      "integrity": "sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==",
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -1085,27 +1122,27 @@
      }
    },
    "node_modules/@eslint/object-schema": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.2.tgz",
-      "integrity": "sha512-HOy56KJt48Bx8KmJ+XGQNSUMT/6dZee/M54XyUyuvTvPXJmsERRvBchsUVx1UMe1WwIH49XLAczNC7V2INsuUw==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
      "dev": true,
      "license": "Apache-2.0",
      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
    "node_modules/@eslint/plugin-kit": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.6.0.tgz",
-      "integrity": "sha512-bIZEUzOI1jkhviX2cp5vNyXQc6olzb2ohewQubuYlMXZ2Q/XjBO0x0XhGPvc9fjSIiUN0vw+0hq53BJ4eQSJKQ==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "@eslint/core": "^1.1.0",
+        "@eslint/core": "^0.17.0",
        "levn": "^0.4.1"
      },
      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
    "node_modules/@exodus/bytes": {
@@ -1747,13 +1784,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/@types/esrecurse": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
-      "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/@types/estree": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1995,6 +2025,13 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
    "node_modules/aria-query": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -2016,14 +2053,11 @@
      }
    },
    "node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
+      "license": "MIT"
    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.10.0",
@@ -2049,16 +2083,14 @@
      }
    },
    "node_modules/brace-expansion": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.3.tgz",
-      "integrity": "sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "balanced-match": "^4.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
      }
    },
    "node_modules/browserslist": {
@@ -2095,6 +2127,16 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001774",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
@@ -2126,6 +2168,66 @@
        "node": ">=18"
      }
    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2371,30 +2473,33 @@
      }
    },
    "node_modules/eslint": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.0.2.tgz",
-      "integrity": "sha512-uYixubwmqJZH+KLVYIVKY1JQt7tysXhtj21WSvjcSmU5SVNzMus1bgLe+pAt816yQ8opKfheVVoPLqvVMGejYw==",
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+      "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
-        "@eslint-community/regexpp": "^4.12.2",
-        "@eslint/config-array": "^0.23.2",
-        "@eslint/config-helpers": "^0.5.2",
-        "@eslint/core": "^1.1.0",
-        "@eslint/plugin-kit": "^0.6.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.2",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "9.39.4",
+        "@eslint/plugin-kit": "^0.4.1",
        "@humanfs/node": "^0.16.6",
        "@humanwhocodes/module-importer": "^1.0.1",
        "@humanwhocodes/retry": "^0.4.2",
        "@types/estree": "^1.0.6",
        "ajv": "^6.14.0",
+        "chalk": "^4.0.0",
        "cross-spawn": "^7.0.6",
        "debug": "^4.3.2",
        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^9.1.1",
-        "eslint-visitor-keys": "^5.0.1",
-        "espree": "^11.1.1",
-        "esquery": "^1.7.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
        "esutils": "^2.0.2",
        "fast-deep-equal": "^3.1.3",
        "file-entry-cache": "^8.0.0",
@@ -2404,7 +2509,8 @@
        "imurmurhash": "^0.1.4",
        "is-glob": "^4.0.0",
        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "minimatch": "^10.2.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.5",
        "natural-compare": "^1.4.0",
        "optionator": "^0.9.3"
      },
@@ -2412,7 +2518,7 @@
        "eslint": "bin/eslint.js"
      },
      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      },
      "funding": {
        "url": "https://eslint.org/donate"
@@ -2457,50 +2563,48 @@
      }
    },
    "node_modules/eslint-scope": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.1.tgz",
-      "integrity": "sha512-GaUN0sWim5qc8KVErfPBWmc31LEsOkrUJbvJZV+xuL3u2phMUK4HIvXlWAakfC8W4nzlK+chPEAkYOYb5ZScIw==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
-        "@types/esrecurse": "^4.3.1",
-        "@types/estree": "^1.0.8",
        "esrecurse": "^4.3.0",
        "estraverse": "^5.2.0"
      },
      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      },
      "funding": {
        "url": "https://opencollective.com/eslint"
      }
    },
    "node_modules/eslint-visitor-keys": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
-      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
      "dev": true,
      "license": "Apache-2.0",
      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      },
      "funding": {
        "url": "https://opencollective.com/eslint"
      }
    },
    "node_modules/espree": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-11.1.1.tgz",
-      "integrity": "sha512-AVHPqQoZYc+RUM4/3Ly5udlZY/U4LS8pIG05jEjWM2lQMU/oaZ7qshzAl2YP1tfNmXfftH3ohurfwNAug+MnsQ==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
-        "acorn": "^8.16.0",
+        "acorn": "^8.15.0",
        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^5.0.1"
+        "eslint-visitor-keys": "^4.2.1"
      },
      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      },
      "funding": {
        "url": "https://opencollective.com/eslint"
@@ -2656,9 +2760,9 @@
      }
    },
    "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
      "dev": true,
      "license": "ISC"
    },
@@ -2713,6 +2817,16 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/hermes-estree": {
      "version": "0.25.1",
      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -2781,6 +2895,23 @@
        "node": ">= 4"
      }
    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/imurmurhash": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -2845,6 +2976,19 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
    "node_modules/jsdom": {
      "version": "28.1.0",
      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-28.1.0.tgz",
@@ -2973,6 +3117,13 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/lru-cache": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3021,19 +3172,16 @@
      }
    },
    "node_modules/minimatch": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
-      "integrity": "sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
      "dev": true,
-      "license": "BlueOak-1.0.0",
+      "license": "ISC",
      "dependencies": {
-        "brace-expansion": "^5.0.2"
+        "brace-expansion": "^1.1.7"
      },
      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": "*"
      }
    },
    "node_modules/ms": {
@@ -3137,6 +3285,19 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/parse5": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
@@ -3185,9 +3346,9 @@
      "license": "ISC"
    },
    "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -3361,6 +3522,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/rollup": {
      "version": "4.59.0",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
@@ -3508,6 +3679,32 @@
        "node": ">=8"
      }
    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -3670,9 +3867,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^10.0.2",
+    "eslint": "^9.0.0",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
--- a/public/images/bg_loading.webp
+++ b/public/images/bg_loading.webp
--- a/public/images/bg_login.webp
+++ b/public/images/bg_login.webp
--- a/public/images/bg_main.webp
+++ b/public/images/bg_main.webp
--- a/public/images/btn_normal.webp
+++ b/public/images/btn_normal.webp
--- a/public/images/btn_pressed.webp
+++ b/public/images/btn_pressed.webp
--- a/public/images/card_frame.webp
+++ b/public/images/card_frame.webp
--- a/public/images/divider.webp
+++ b/public/images/divider.webp
--- a/public/images/logo.webp
+++ b/public/images/logo.webp
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,13 +2,16 @@ import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-route
 import { useEffect, useRef } from 'react';
 import { AuthProvider } from './context/AuthContext';
 import { ToastProvider } from './components/toast/ToastProvider';
+import { ConfirmProvider } from './components/confirm/ConfirmProvider';
 import { useAuth } from './context/useAuth';
 import ErrorBoundary from './components/ErrorBoundary';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import HomePage from './pages/HomePage';
 import AdminPage from './pages/AdminPage';
+import WalletPage from './pages/WalletPage';
 import SSAFYCallbackPage from './pages/SSAFYCallbackPage';
+import NotFoundPage from './pages/NotFoundPage';

 function AuthRedirect() {
  const { user } = useAuth();
@@ -25,6 +28,12 @@ function AuthRedirect() {
  return null;
 }

+function PrivateRoute({ children }) {
+  const { user } = useAuth();
+  if (!user) return <Navigate to="/login" replace />;
+  return children;
+}
+
 function AdminRoute({ children }) {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
@@ -42,6 +51,14 @@ function AppRoutes() {
        <Route path="/register" element={user ? <Navigate to="/" replace /> : <RegisterPage />} />
        <Route path="/auth/ssafy/callback" element={<SSAFYCallbackPage />} />
        <Route path="/" element={<HomePage />} />
+        <Route
+          path="/wallet"
+          element={
+            <PrivateRoute>
+              <WalletPage />
+            </PrivateRoute>
+          }
+        />
        <Route
          path="/admin"
          element={
@@ -50,13 +67,7 @@ function AppRoutes() {
            </AdminRoute>
          }
        />
-        <Route path="*" element={
-          <div style={{ padding: '2rem', textAlign: 'center', color: '#aaa' }}>
-            <h2>404</h2>
-            <p>페이지를 찾을 수 없습니다</p>
-            <a href="/" style={{ color: '#4ea8de' }}>홈으로 돌아가기</a>
-          </div>
-        } />
+        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </ErrorBoundary>
  );
@@ -67,7 +78,9 @@ export default function App() {
    <BrowserRouter>
      <AuthProvider>
        <ToastProvider>
-          <AppRoutes />
+          <ConfirmProvider>
+            <AppRoutes />
+          </ConfirmProvider>
        </ToastProvider>
      </AuthProvider>
    </BrowserRouter>
--- a/src/api/announcements.js
+++ b/src/api/announcements.js
@@ -20,4 +20,4 @@ export async function updateAnnouncement(id, title, content) {

 export async function deleteAnnouncement(id) {
  return apiFetch(`/api/announcements/${id}`, { method: 'DELETE' });
-}
+}
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -22,19 +22,22 @@ export async function getSSAFYLoginURL() {
  return apiFetch('/api/auth/ssafy/login');
 }

-export async function ssafyCallback(code) {
+export async function ssafyCallback(code, state) {
  return apiFetch('/api/auth/ssafy/callback', {
    method: 'POST',
-    body: JSON.stringify({ code }),
+    body: JSON.stringify({ code, state }),
  });
 }

 // 토큰을 리프레시하고 새 access token을 반환 (동시 호출 방지 포함)
 export { tryRefresh as refreshToken } from './client';

-// 게임 런처용 일회용 티켓 발급 (JWT를 URL에 노출하지 않기 위해 사용)
+/**
+ * 게임 런처용 일회용 티켓 발급
+ * JWT를 URL에 직접 노출하지 않기 위해 단기 티켓으로 대체
+ * @returns {Promise<string>} 티켓 문자열
+ */
 export async function createLaunchTicket() {
  const data = await apiFetch('/api/auth/launch-ticket', { method: 'POST' });
  return data.ticket;
 }
-
--- a/src/api/chain.js
+++ b/src/api/chain.js
@@ -0,0 +1,93 @@
+import { apiFetch } from './client';
+
+// exportWalletKey는 비밀번호 오류 시 서버가 401을 반환하므로
+// apiFetch의 401 자동 refresh/로그아웃을 우회하기 위해 BASE를 직접 참조
+const BASE = import.meta.env.VITE_API_BASE_URL || '';
+
+// --- 지갑 ---
+
+export async function getBalance() {
+  return apiFetch('/api/chain/balance');
+}
+
+export async function getWallet() {
+  return apiFetch('/api/chain/wallet');
+}
+
+/**
+ * 개인키 내보내기
+ * apiFetch를 우회해 직접 fetch 사용 — 비밀번호 오류(401)를 로그아웃 없이 처리하기 위함
+ * @param {string} password
+ * @returns {Promise<{privateKey: string}>}
+ * @throws {Error} 비밀번호 오류 시 status 401
+ */
+export async function exportWalletKey(password) {
+  const token = localStorage.getItem('token');
+  const headers = { 'Content-Type': 'application/json' };
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+  const res = await fetch(BASE + '/api/chain/wallet/export', {
+    method: 'POST',
+    headers,
+    credentials: 'include',
+    body: JSON.stringify({ password }),
+  });
+  if (!res.ok) {
+    const err = new Error(res.status === 401 ? '비밀번호가 올바르지 않습니다' : '키 내보내기에 실패했습니다');
+    err.status = res.status;
+    try { const body = await res.json(); err.message = body.message || err.message; } catch { /* ignore parse failure */ }
+    throw err;
+  }
+  return res.json();
+}
+
+// --- 자산 ---
+
+export async function getAssets() {
+  return apiFetch('/api/chain/assets');
+}
+
+export async function getAsset(id) {
+  return apiFetch(`/api/chain/asset/${id}`);
+}
+
+// --- 인벤토리 ---
+
+export async function getInventory() {
+  return apiFetch('/api/chain/inventory');
+}
+
+// --- 마켓 ---
+
+export async function getMarketListings() {
+  return apiFetch('/api/chain/market');
+}
+
+export async function getListing(id) {
+  return apiFetch(`/api/chain/market/${id}`);
+}
+
+/**
+ * Idempotency-Key 헤더를 붙인 POST 요청
+ * 중복 제출(네트워크 재시도 등)로 인한 이중 처리를 서버에서 방지
+ * @param {string} path
+ * @param {object} body
+ */
+function idempotentPost(path, body) {
+  return apiFetch(path, {
+    method: 'POST',
+    headers: { 'Idempotency-Key': crypto.randomUUID() },
+    body: JSON.stringify(body),
+  });
+}
+
+export async function listOnMarket(assetId, price) {
+  return idempotentPost('/api/chain/market/list', { assetId, price });
+}
+
+export async function buyFromMarket(listingId) {
+  return idempotentPost('/api/chain/market/buy', { listingId });
+}
+
+export async function cancelListing(listingId) {
+  return idempotentPost('/api/chain/market/cancel', { listingId });
+}
--- a/src/api/client.js
+++ b/src/api/client.js
@@ -1,8 +1,26 @@
 const BASE = import.meta.env.VITE_API_BASE_URL || '';

-// 동시 401 발생 시 refresh를 한 번만 실행하기 위한 Promise 공유
+/**
+ * 네트워크 에러 메시지를 한국어로 변환
+ * @param {string} message
+ * @returns {string}
+ */
+function localizeError(message) {
+  if (typeof message !== 'string') return message;
+  if (message.includes('Failed to fetch')) return '서버에 연결할 수 없습니다';
+  if (message.includes('NetworkError')) return '네트워크에 연결할 수 없습니다';
+  if (message.includes('AbortError') || message === 'The user aborted a request.') return '요청 시간이 초과되었습니다';
+  return message;
+}
+
 let refreshingPromise = null;

+/**
+ * 리프레시 토큰으로 액세스 토큰 갱신
+ * 동시 401 발생 시 refresh를 한 번만 실행하기 위해 Promise를 공유
+ * @returns {Promise<string>} 새 액세스 토큰
+ * @throws {Error} refresh_failed — 리프레시 토큰 만료 또는 서버 오류
+ */
 export async function tryRefresh() {
  if (refreshingPromise) return refreshingPromise;

@@ -26,40 +44,67 @@ export async function tryRefresh() {
 }

 async function doFetch(path, options, token) {
-  const headers = { 'Content-Type': 'application/json', ...options.headers };
+  const headers = { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', ...options.headers };
  if (token) headers['Authorization'] = `Bearer ${token}`;
  return fetch(BASE + path, { ...options, headers, credentials: 'include' });
 }

+/** @type {Record<string, string>} 에러 코드별 기본 한국어 메시지 */
+const ERROR_MESSAGES = {
+  bad_request: '잘못된 요청입니다',
+  unauthorized: '로그인이 필요합니다',
+  forbidden: '권한이 없습니다',
+  not_found: '요청한 리소스를 찾을 수 없습니다',
+  conflict: '이미 존재하는 항목입니다',
+  tx_failed: '트랜잭션 처리에 실패했습니다',
+  rate_limited: '요청이 너무 많습니다. 잠시 후 다시 시도해주세요',
+  internal_error: '서버 오류가 발생했습니다',
+};
+
 async function parseError(res) {
  let message = res.statusText;
+  let code;
  try {
    const body = await res.json();
-    if (body.error) message = body.error;
+    code = body.error;
+    message = body.message || ERROR_MESSAGES[code] || message;
  } catch { /* 응답 바디 파싱 실패 시 statusText 사용 */ }
  const err = new Error(message);
  err.status = res.status;
+  err.code = code;
  return err;
 }

-// 204 No Content는 null 반환, 나머지는 JSON 파싱
 async function parseResponse(res) {
  if (res.status === 204) return null;
  return res.json();
 }

+/**
+ * 인증 포함 API 요청 래퍼
+ * - 401 응답 시 토큰 자동 갱신 후 재시도
+ * - 네트워크 에러 / 5xx 응답 시 GET·HEAD 요청만 최대 2회 재시도 (exponential backoff)
+ * @param {string} path - API 경로 (예: '/api/chain/balance')
+ * @param {RequestInit} [options={}] - fetch 옵션
+ * @returns {Promise<any>} 응답 JSON (204는 null)
+ * @throws {Error} HTTP 에러 또는 네트워크 에러
+ */
 export async function apiFetch(path, options = {}, _retryCount = 0) {
  const token = localStorage.getItem('token');
  let res;

+  const method = (options.method || 'GET').toUpperCase();
+  const isIdempotent = method === 'GET' || method === 'HEAD';
+
  try {
    res = await doFetch(path, options, token);
  } catch (e) {
-    // 네트워크 에러 (오프라인 등) — 재시도
-    if (_retryCount < 2) {
+    // 네트워크 에러 (오프라인 등) — 멱등 요청만 재시도
+    if (isIdempotent && _retryCount < 2) {
      await delay(1000 * (_retryCount + 1));
      return apiFetch(path, options, _retryCount + 1);
    }
+    e.message = localizeError(e.message);
    throw e;
  }

@@ -86,8 +131,8 @@ export async function apiFetch(path, options = {}, _retryCount = 0) {
    }
  }

-  // 5xx 서버 에러 — 최대 2회 재시도 (exponential backoff)
-  if (res.status >= 500 && _retryCount < 2) {
+  // 5xx 서버 에러 — 멱등 요청만 최대 2회 재시도 (exponential backoff)
+  if (res.status >= 500 && isIdempotent && _retryCount < 2) {
    await delay(1000 * (_retryCount + 1));
    return apiFetch(path, options, _retryCount + 1);
  }
@@ -115,6 +160,7 @@ export function apiUpload(path, file, onProgress) {
      xhr.withCredentials = true;
      if (token) xhr.setRequestHeader('Authorization', `Bearer ${token}`);
      xhr.setRequestHeader('Content-Type', 'application/octet-stream');
+      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

      xhr.upload.onprogress = (event) => {
        if (event.lengthComputable && onProgress) {
@@ -123,7 +169,7 @@ export function apiUpload(path, file, onProgress) {
      };

      xhr.onload = () => resolve(xhr);
-      xhr.onerror = () => reject(new Error('네트워크 오류가 발생했습니다.'));
+      xhr.onerror = () => reject(new Error('서버에 연결할 수 없습니다'));
      xhr.send(file);
    });
  }
--- a/src/api/users.js
+++ b/src/api/users.js
@@ -1,7 +1,8 @@
 import { apiFetch } from './client';

-export function getUsers() {
-  return apiFetch('/api/users');
+export function getUsers(offset = 0, limit = 20) {
+  const params = new URLSearchParams({ offset, limit });
+  return apiFetch(`/api/users?${params}`);
 }

 export function updateUserRole(id, role) {
--- a/src/components/AnnouncementBoard.css
+++ b/src/components/AnnouncementBoard.css
@@ -1,5 +1,6 @@
 .announcement-board {
  margin-top: 32px;
+  padding: 24px;
 }

 .announcement-heading {
@@ -7,8 +8,9 @@
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(186, 205, 176, 0.15);
+  padding-bottom: 0;
+  border-bottom: none;
+  text-align: center;
 }

 .announcement-list {
--- a/src/components/DownloadSection.css
+++ b/src/components/DownloadSection.css
@@ -1,9 +1,12 @@
 .download-section {
-  background: rgba(186, 205, 176, 0.06);
-  border: 1px solid rgba(186, 205, 176, 0.12);
+  position: relative;
+  background:
+    linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.6)),
+    url('/images/bg_main.webp') center/cover no-repeat;
  border-radius: 12px;
-  padding: 48px 40px;
+  padding: 60px 40px;
  text-align: center;
+  overflow: hidden;
 }

 .download-title {
--- a/src/components/DownloadSection.jsx
+++ b/src/components/DownloadSection.jsx
@@ -36,7 +36,7 @@ export default function DownloadSection() {
    // JWT를 URL에 직접 노출하지 않고, 일회용 티켓을 발급받아 전달
    try {
      const ticket = await createLaunchTicket();
-      window.location.href = 'a301://launch?ticket=' + encodeURIComponent(ticket);
+      window.location.href = 'a301://launch?token=' + encodeURIComponent(ticket);
    } catch {
      // 티켓 발급 실패 시 로그인 유도
      navigate('/login');
@@ -114,4 +114,4 @@ export default function DownloadSection() {
      </div>
    </section>
  );
-}
+}
--- a/src/components/ErrorBoundary.css
+++ b/src/components/ErrorBoundary.css
@@ -0,0 +1,99 @@
+.error-boundary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2rem;
+  background-color: #2E2C2F;
+}
+
+.error-boundary-card {
+  text-align: center;
+  max-width: 440px;
+  padding: 40px 32px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+}
+
+.error-boundary-icon {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 20px;
+  border-radius: 50%;
+  background: rgba(229, 115, 115, 0.12);
+  color: rgba(229, 115, 115, 0.9);
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+.error-boundary-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 0 0 8px 0;
+}
+
+.error-boundary-desc {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.45);
+  margin: 0 0 20px 0;
+}
+
+.error-boundary-detail {
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  margin-bottom: 24px;
+  text-align: left;
+}
+
+.error-boundary-type {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgba(229, 115, 115, 0.8);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.error-boundary-message {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 6px 0 0 0;
+  word-break: break-word;
+  font-family: monospace;
+}
+
+.error-boundary-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.error-boundary-btn {
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.2s;
+}
+
+.error-boundary-btn:hover {
+  opacity: 0.85;
+}
+
+.error-boundary-btn-primary {
+  background: #BACDB0;
+  color: #2E2C2F;
+  font-weight: 600;
+}
+
+.error-boundary-btn-secondary {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
--- a/src/components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.jsx
@@ -1,31 +1,54 @@
 import { Component } from 'react';
+import './ErrorBoundary.css';

 export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
-    this.state = { hasError: false };
+    this.state = { hasError: false, error: null };
  }

-  static getDerivedStateFromError() {
-    return { hasError: true };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Uncaught error:', error, errorInfo);
  }

+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
  render() {
    if (this.state.hasError) {
+      const { error } = this.state;
+      const errorType = error?.name || 'Error';
+      const errorMessage = error?.message || '알 수 없는 오류가 발생했습니다.';
+
      return (
-        <div style={{ padding: '2rem', textAlign: 'center', color: '#ccc' }}>
-          <h2>문제가 발생했습니다</h2>
-          <p>페이지를 새로고침하거나 잠시 후 다시 시도해주세요.</p>
-          <button onClick={() => window.location.reload()} style={{ marginTop: '1rem', padding: '0.5rem 1rem', cursor: 'pointer' }}>
-            새로고침
-          </button>
+        <div className="error-boundary">
+          <div className="error-boundary-card">
+            <div className="error-boundary-icon">!</div>
+            <h2 className="error-boundary-title">문제가 발생했습니다</h2>
+            <p className="error-boundary-desc">
+              예기치 않은 오류로 페이지를 표시할 수 없습니다.
+            </p>
+            <div className="error-boundary-detail">
+              <span className="error-boundary-type">{errorType}</span>
+              <p className="error-boundary-message">{errorMessage}</p>
+            </div>
+            <div className="error-boundary-actions">
+              <button className="error-boundary-btn error-boundary-btn-primary" onClick={this.handleRetry}>
+                다시 시도
+              </button>
+              <button className="error-boundary-btn error-boundary-btn-secondary" onClick={() => window.location.reload()}>
+                새로고침
+              </button>
+            </div>
+          </div>
        </div>
      );
    }
    return this.props.children;
  }
-}
+}
--- a/src/components/admin/AdminCommon.module.css
+++ b/src/components/admin/AdminCommon.module.css
@@ -1,10 +1,10 @@
-.admin-section {
+.section {
  display: flex;
  flex-direction: column;
  gap: 24px;
 }

-.admin-section-title {
+.sectionTitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
@@ -14,7 +14,7 @@
 }

 /* Form */
-.admin-form {
+.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
@@ -24,18 +24,18 @@
  border-radius: 10px;
 }

-.admin-field {
+.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
 }

-.admin-label {
+.label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
 }

-.admin-input {
+.input {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(186, 205, 176, 0.15);
@@ -46,11 +46,11 @@
  transition: border-color 0.2s;
 }

-.admin-input:focus {
+.input:focus {
  border-color: rgba(186, 205, 176, 0.5);
 }

-.admin-textarea {
+.textarea {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(186, 205, 176, 0.15);
@@ -63,24 +63,24 @@
  font-family: inherit;
 }

-.admin-textarea:focus {
+.textarea:focus {
  border-color: rgba(186, 205, 176, 0.5);
 }

-.admin-error {
+.error {
  font-size: 0.85rem;
  color: rgba(229, 115, 115, 0.9);
  margin: 0;
 }

-.admin-form-actions {
+.formActions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
 }

 /* Buttons */
-.btn-admin-primary {
+.btnPrimary {
  padding: 10px 24px;
  background: #BACDB0;
  color: #2E2C2F;
@@ -92,10 +92,10 @@
  transition: opacity 0.2s;
 }

-.btn-admin-primary:hover { opacity: 0.9; }
-.btn-admin-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btnPrimary:hover { opacity: 0.9; }
+.btnPrimary:disabled { opacity: 0.5; cursor: not-allowed; }

-.btn-admin-secondary {
+.btnSecondary {
  padding: 10px 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
@@ -106,12 +106,12 @@
  transition: background 0.2s;
 }

-.btn-admin-secondary:hover {
+.btnSecondary:hover {
  background: rgba(255, 255, 255, 0.05);
 }

 /* List */
-.admin-list {
+.list {
  list-style: none;
  margin: 0;
  padding: 0;
@@ -120,7 +120,7 @@
  gap: 4px;
 }

-.admin-list-item {
+.listItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
@@ -130,14 +130,14 @@
  border-radius: 8px;
 }

-.admin-list-info {
+.listInfo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
 }

-.admin-list-title {
+.listTitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
@@ -145,19 +145,19 @@
  text-overflow: ellipsis;
 }

-.admin-list-date {
+.listDate {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
 }

-.admin-list-actions {
+.listActions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
 }

-.btn-admin-edit {
+.btnEdit {
  padding: 6px 14px;
  background: transparent;
  color: rgba(186, 205, 176, 0.8);
@@ -168,11 +168,11 @@
  transition: background 0.2s;
 }

-.btn-admin-edit:hover {
+.btnEdit:hover {
  background: rgba(186, 205, 176, 0.08);
 }

-.btn-admin-delete {
+.btnDelete {
  padding: 6px 14px;
  background: transparent;
  color: rgba(229, 115, 115, 0.8);
@@ -183,25 +183,25 @@
  transition: background 0.2s;
 }

-.btn-admin-delete:hover {
+.btnDelete:hover {
  background: rgba(229, 115, 115, 0.08);
 }

 /* Deploy block */
-.admin-deploy-block {
+.deployBlock {
  display: flex;
  flex-direction: column;
  gap: 8px;
 }

-.admin-deploy-header {
+.deployHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
 }

-.admin-deploy-label {
+.deployLabel {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
@@ -210,32 +210,32 @@
 }

 /* File input */
-.admin-input-file {
+.inputFile {
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  cursor: pointer;
 }

-.admin-input-file:disabled {
+.inputFile:disabled {
  opacity: 0.4;
  cursor: not-allowed;
 }

 /* Field hint */
-.admin-field-hint {
+.fieldHint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
 }

 /* Upload progress */
-.admin-upload-progress {
+.uploadProgress {
  display: flex;
  align-items: center;
  gap: 10px;
 }

-.admin-upload-bar {
+.uploadBar {
  flex: 1;
  height: 6px;
  background: #BACDB0;
@@ -243,7 +243,7 @@
  transition: width 0.2s;
 }

-.admin-upload-pct {
+.uploadPct {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  min-width: 36px;
@@ -251,7 +251,7 @@
 }

 /* Current build info */
-.admin-current-build {
+.currentBuild {
  display: flex;
  flex-direction: column;
  gap: 8px;
@@ -261,13 +261,13 @@
  border-radius: 8px;
 }

-.admin-meta-row {
+.metaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
 }

-.admin-meta-item {
+.metaItem {
  font-size: 0.78rem;
  color: rgba(186, 205, 176, 0.8);
  background: rgba(186, 205, 176, 0.08);
@@ -276,32 +276,102 @@
  border: 1px solid rgba(186, 205, 176, 0.15);
 }

-.admin-meta-hash {
+.metaHash {
+  composes: metaItem;
  font-family: monospace;
  cursor: help;
 }

 /* Role badge */
-.admin-list-empty {
+.listEmpty {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.35);
  padding: 12px 16px;
  margin: 0;
 }

-.admin-role-badge {
+.roleBadge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
 }

-.admin-role-badge.admin {
+.roleBadgeAdmin {
+  composes: roleBadge;
  background: rgba(186, 205, 176, 0.15);
  color: #BACDB0;
 }

-.admin-role-badge.user {
+.roleBadgeUser {
+  composes: roleBadge;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
 }
+
+.errorBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.loading {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.35);
+  padding: 12px 16px;
+  margin: 0;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .form {
+    padding: 16px 12px;
+  }
+
+  .input,
+  .textarea {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .listItem {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 10px 12px;
+  }
+
+  .listInfo {
+    width: 100%;
+  }
+
+  .listActions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .formActions {
+    flex-direction: column;
+  }
+
+  .formActions button {
+    width: 100%;
+    min-height: 44px;
+  }
+
+  .btnPrimary,
+  .btnSecondary,
+  .btnEdit,
+  .btnDelete {
+    min-height: 44px;
+  }
+
+  .metaRow {
+    flex-direction: column;
+  }
+
+  .deployHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
--- a/src/components/admin/AnnouncementAdmin.jsx
+++ b/src/components/admin/AnnouncementAdmin.jsx
@@ -1,11 +1,12 @@
-// TODO: Add tests for CRUD operations (create, update, delete announcements)
 import { useState, useEffect, useCallback } from 'react';
 import { getAnnouncements, createAnnouncement, updateAnnouncement, deleteAnnouncement } from '../../api/announcements';
 import { useToast } from '../toast/useToast';
-import './AdminCommon.css';
+import { useConfirm } from '../confirm/useConfirm';
+import s from './AdminCommon.module.css';

 export default function AnnouncementAdmin() {
  const toast = useToast();
+  const confirm = useConfirm();
  const [list, setList] = useState([]);
  const [form, setForm] = useState({ title: '', content: '' });
  const [editingId, setEditingId] = useState(null);
@@ -58,8 +59,7 @@ export default function AnnouncementAdmin() {
  };

  const handleDelete = async (id) => {
-    // TODO: Replace window.confirm() with a custom confirmation modal for consistent UI
-    if (!confirm('삭제하시겠습니까?')) return;
+    if (!(await confirm('삭제하시겠습니까?'))) return;
    try {
      await deleteAnnouncement(id);
      toast.success('공지사항이 삭제되었습니다.');
@@ -77,30 +77,30 @@ export default function AnnouncementAdmin() {

  if (fetchLoading) {
    return (
-      <div className="admin-section">
-        <h2 className="admin-section-title">공지사항 관리</h2>
-        <p className="admin-loading">불러오는 중...</p>
+      <div className={s.section}>
+        <h2 className={s.sectionTitle}>공지사항 관리</h2>
+        <p className={s.loading}>불러오는 중...</p>
      </div>
    );
  }

  if (fetchError) {
    return (
-      <div className="admin-section">
-        <h2 className="admin-section-title">공지사항 관리</h2>
-        <p className="admin-error">{fetchError}</p>
-        <button className="btn-admin-secondary" onClick={load}>다시 시도</button>
+      <div className={s.section}>
+        <h2 className={s.sectionTitle}>공지사항 관리</h2>
+        <p className={s.error}>{fetchError}</p>
+        <button className={s.btnSecondary} onClick={load}>다시 시도</button>
      </div>
    );
  }

  return (
-    <div className="admin-section">
-      <h2 className="admin-section-title">공지사항 관리</h2>
+    <div className={s.section}>
+      <h2 className={s.sectionTitle}>공지사항 관리</h2>

-      <form className="admin-form" onSubmit={handleSubmit}>
+      <form className={s.form} onSubmit={handleSubmit}>
        <input
-          className="admin-input"
+          className={s.input}
          placeholder="제목"
          value={form.title}
          onChange={(e) => setForm({ ...form, title: e.target.value })}
@@ -108,7 +108,7 @@ export default function AnnouncementAdmin() {
          aria-label="공지사항 제목"
        />
        <textarea
-          className="admin-textarea"
+          className={s.textarea}
          placeholder="내용"
          rows={4}
          value={form.content}
@@ -116,29 +116,29 @@ export default function AnnouncementAdmin() {
          maxLength={10000}
          aria-label="공지사항 내용"
        />
-        {error && <p className="admin-error">{error}</p>}
-        <div className="admin-form-actions">
-          <button className="btn-admin-primary" type="submit" disabled={loading}>
+        {error && <p className={s.error}>{error}</p>}
+        <div className={s.formActions}>
+          <button className={s.btnPrimary} type="submit" disabled={loading}>
            {editingId ? '수정 완료' : '공지 등록'}
          </button>
          {editingId && (
-            <button className="btn-admin-secondary" type="button" onClick={handleCancel}>
+            <button className={s.btnSecondary} type="button" onClick={handleCancel}>
              취소
            </button>
          )}
        </div>
      </form>

-      <ul className="admin-list">
+      <ul className={s.list}>
        {list.map((item) => (
-          <li key={item.id} className="admin-list-item">
-            <div className="admin-list-info">
-              <span className="admin-list-title">{item.title}</span>
-              <span className="admin-list-date">{item.createdAt?.slice(0, 10)}</span>
+          <li key={item.id} className={s.listItem}>
+            <div className={s.listInfo}>
+              <span className={s.listTitle}>{item.title}</span>
+              <span className={s.listDate}>{item.createdAt?.slice(0, 10)}</span>
            </div>
-            <div className="admin-list-actions">
-              <button className="btn-admin-edit" onClick={() => handleEdit(item)}>수정</button>
-              <button className="btn-admin-delete" onClick={() => handleDelete(item.id)}>삭제</button>
+            <div className={s.listActions}>
+              <button className={s.btnEdit} onClick={() => handleEdit(item)}>수정</button>
+              <button className={s.btnDelete} onClick={() => handleDelete(item.id)}>삭제</button>
            </div>
          </li>
        ))}
--- a/src/components/admin/AnnouncementAdmin.test.jsx
+++ b/src/components/admin/AnnouncementAdmin.test.jsx
@@ -0,0 +1,187 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import AnnouncementAdmin from './AnnouncementAdmin';
+
+// Mock APIs
+const mockGetAnnouncements = vi.fn();
+const mockCreateAnnouncement = vi.fn();
+const mockUpdateAnnouncement = vi.fn();
+const mockDeleteAnnouncement = vi.fn();
+vi.mock('../../api/announcements', () => ({
+  getAnnouncements: (...args) => mockGetAnnouncements(...args),
+  createAnnouncement: (...args) => mockCreateAnnouncement(...args),
+  updateAnnouncement: (...args) => mockUpdateAnnouncement(...args),
+  deleteAnnouncement: (...args) => mockDeleteAnnouncement(...args),
+}));
+
+// Mock toast
+const mockToast = { success: vi.fn(), error: vi.fn(), info: vi.fn(), warn: vi.fn() };
+vi.mock('../toast/useToast', () => ({
+  useToast: () => mockToast,
+}));
+
+// Mock confirm — resolves true by default
+let mockConfirmResult = true;
+vi.mock('../confirm/useConfirm', () => ({
+  useConfirm: () => () => Promise.resolve(mockConfirmResult),
+}));
+
+const SAMPLE_LIST = [
+  { id: 1, title: '점검 안내', content: '서버 점검합니다.', createdAt: '2026-03-10T00:00:00Z' },
+  { id: 2, title: '업데이트', content: '새 버전 출시.', createdAt: '2026-03-12T00:00:00Z' },
+];
+
+describe('AnnouncementAdmin', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfirmResult = true;
+    mockGetAnnouncements.mockResolvedValue(SAMPLE_LIST);
+  });
+
+  it('renders announcements after loading', async () => {
+    render(<AnnouncementAdmin />);
+    expect(screen.getByText('불러오는 중...')).toBeInTheDocument();
+    expect(await screen.findByText('점검 안내')).toBeInTheDocument();
+    expect(screen.getByText('업데이트')).toBeInTheDocument();
+  });
+
+  it('shows error when fetch fails', async () => {
+    mockGetAnnouncements.mockRejectedValueOnce(new Error('fail'));
+    render(<AnnouncementAdmin />);
+    expect(await screen.findByText('공지사항을 불러오지 못했습니다.')).toBeInTheDocument();
+    expect(screen.getByText('다시 시도')).toBeInTheDocument();
+  });
+
+  it('retries loading when "다시 시도" is clicked', async () => {
+    mockGetAnnouncements.mockRejectedValueOnce(new Error('fail'));
+    render(<AnnouncementAdmin />);
+    await screen.findByText('다시 시도');
+
+    mockGetAnnouncements.mockResolvedValueOnce(SAMPLE_LIST);
+    fireEvent.click(screen.getByText('다시 시도'));
+    expect(await screen.findByText('점검 안내')).toBeInTheDocument();
+  });
+
+  describe('create', () => {
+    it('creates a new announcement', async () => {
+      mockCreateAnnouncement.mockResolvedValueOnce({});
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      fireEvent.change(screen.getByPlaceholderText('제목'), { target: { value: '새 공지' } });
+      fireEvent.change(screen.getByPlaceholderText('내용'), { target: { value: '새 내용입니다.' } });
+      fireEvent.click(screen.getByRole('button', { name: '공지 등록' }));
+
+      await waitFor(() => {
+        expect(mockCreateAnnouncement).toHaveBeenCalledWith('새 공지', '새 내용입니다.');
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('공지사항이 등록되었습니다.');
+    });
+
+    it('shows validation error when fields are empty', async () => {
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      fireEvent.click(screen.getByRole('button', { name: '공지 등록' }));
+      expect(await screen.findByText('제목과 내용을 모두 입력해주세요.')).toBeInTheDocument();
+      expect(mockCreateAnnouncement).not.toHaveBeenCalled();
+    });
+
+    it('shows toast on create failure', async () => {
+      mockCreateAnnouncement.mockRejectedValueOnce(new Error('서버 오류'));
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      fireEvent.change(screen.getByPlaceholderText('제목'), { target: { value: '제목' } });
+      fireEvent.change(screen.getByPlaceholderText('내용'), { target: { value: '내용' } });
+      fireEvent.click(screen.getByRole('button', { name: '공지 등록' }));
+
+      await waitFor(() => {
+        expect(mockToast.error).toHaveBeenCalledWith('서버 오류');
+      });
+    });
+  });
+
+  describe('update', () => {
+    it('populates form on edit and submits update', async () => {
+      mockUpdateAnnouncement.mockResolvedValueOnce({});
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      // Click edit on first item
+      const editButtons = screen.getAllByText('수정');
+      fireEvent.click(editButtons[0]);
+
+      // Form should be populated
+      expect(screen.getByPlaceholderText('제목')).toHaveValue('점검 안내');
+      expect(screen.getByPlaceholderText('내용')).toHaveValue('서버 점검합니다.');
+      expect(screen.getByRole('button', { name: '수정 완료' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: '취소' })).toBeInTheDocument();
+
+      // Modify and submit
+      fireEvent.change(screen.getByPlaceholderText('제목'), { target: { value: '수정된 제목' } });
+      fireEvent.click(screen.getByRole('button', { name: '수정 완료' }));
+
+      await waitFor(() => {
+        expect(mockUpdateAnnouncement).toHaveBeenCalledWith(1, '수정된 제목', '서버 점검합니다.');
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('공지사항이 수정되었습니다.');
+    });
+
+    it('cancels editing and clears form', async () => {
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      const editButtons = screen.getAllByText('수정');
+      fireEvent.click(editButtons[0]);
+      expect(screen.getByPlaceholderText('제목')).toHaveValue('점검 안내');
+
+      fireEvent.click(screen.getByRole('button', { name: '취소' }));
+      expect(screen.getByPlaceholderText('제목')).toHaveValue('');
+      expect(screen.getByPlaceholderText('내용')).toHaveValue('');
+      expect(screen.getByRole('button', { name: '공지 등록' })).toBeInTheDocument();
+    });
+  });
+
+  describe('delete', () => {
+    it('deletes an announcement when confirmed', async () => {
+      mockDeleteAnnouncement.mockResolvedValueOnce({});
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockDeleteAnnouncement).toHaveBeenCalledWith(1);
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('공지사항이 삭제되었습니다.');
+    });
+
+    it('does not delete when confirm is cancelled', async () => {
+      mockConfirmResult = false;
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockDeleteAnnouncement).not.toHaveBeenCalled();
+      });
+    });
+
+    it('shows toast on delete failure', async () => {
+      mockDeleteAnnouncement.mockRejectedValueOnce(new Error('삭제 실패'));
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockToast.error).toHaveBeenCalledWith('삭제 실패');
+      });
+    });
+  });
+});
--- a/src/components/admin/DownloadAdmin.jsx
+++ b/src/components/admin/DownloadAdmin.jsx
@@ -1,62 +1,55 @@
-// TODO: Add tests for CRUD operations (load download info, upload launcher, upload game)
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { getDownloadInfo } from '../../api/download';
 import UploadForm from './UploadForm';
-import './AdminCommon.css';
+import s from './AdminCommon.module.css';

 export default function DownloadAdmin() {
  const [info, setInfo] = useState(null);
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState('');

-  const load = () => {
+  const load = useCallback(() => {
    setLoading(true);
    setLoadError('');
    getDownloadInfo()
-      .then((data) => {
-        setInfo(data);
-        setLoadError('');
-      })
-      .catch((err) => {
-        console.error('다운로드 정보 로드 실패:', err);
-        setLoadError('배포 정보를 불러올 수 없습니다.');
-      })
+      .then((data) => setInfo(data))
+      .catch(() => setLoadError('배포 정보를 불러올 수 없습니다.'))
      .finally(() => setLoading(false));
-  };
+  }, []);

-  // eslint-disable-next-line react-hooks/set-state-in-effect -- initial data fetch on mount
-  useEffect(() => { load(); }, []);
+  // eslint-disable-next-line react-hooks/set-state-in-effect
+  useEffect(() => { load(); }, [load]);

  if (loading) {
    return (
-      <div className="admin-section">
-        <h2 className="admin-section-title">게임 배포 관리</h2>
-        <p className="admin-loading">불러오는 중...</p>
+      <div className={s.section}>
+        <h2 className={s.sectionTitle}>게임 배포 관리</h2>
+        <p className={s.loading}>불러오는 중...</p>
      </div>
    );
  }

  if (loadError) {
    return (
-      <div className="admin-section">
-        <h2 className="admin-section-title">게임 배포 관리</h2>
-        <p className="admin-error">{loadError}</p>
-        <button className="btn-admin-secondary" onClick={load}>다시 시도</button>
+      <div className={s.section}>
+        <h2 className={s.sectionTitle}>게임 배포 관리</h2>
+        <p className={s.error}>{loadError}</p>
+        <button className={s.btnSecondary} onClick={load}>다시 시도</button>
      </div>
    );
  }

  return (
-    <div className="admin-section">
-      <h2 className="admin-section-title">게임 배포 관리</h2>
+    <div className={s.section}>
+      <h2 className={s.sectionTitle}>게임 배포 관리</h2>

      {/* 런처 섹션 */}
-      <div className="admin-deploy-block">
-        <div className="admin-deploy-header">
-          <span className="admin-deploy-label">런처</span>
+      <div className={s.deployBlock}>
+        <div className={s.deployHeader}>
+          <span className={s.deployLabel}>런처</span>
          {info?.launcherUrl && (
-            <div className="admin-meta-row">
-              {info.launcherSize && <span className="admin-meta-item">{info.launcherSize}</span>}
+            <div className={s.metaRow}>
+              {info.launcherSize && <span className={s.metaItem}>{info.launcherSize}</span>}
            </div>
          )}
        </div>
@@ -70,16 +63,16 @@ export default function DownloadAdmin() {
      </div>

      {/* 게임 섹션 */}
-      <div className="admin-deploy-block">
-        <div className="admin-deploy-header">
-          <span className="admin-deploy-label">게임</span>
+      <div className={s.deployBlock}>
+        <div className={s.deployHeader}>
+          <span className={s.deployLabel}>게임</span>
          {info?.url && (
-            <div className="admin-meta-row">
-              {info.version && <span className="admin-meta-item">{info.version}</span>}
-              {info.fileName && <span className="admin-meta-item">{info.fileName}</span>}
-              {info.fileSize && <span className="admin-meta-item">{info.fileSize}</span>}
+            <div className={s.metaRow}>
+              {info.version && <span className={s.metaItem}>{info.version}</span>}
+              {info.fileName && <span className={s.metaItem}>{info.fileName}</span>}
+              {info.fileSize && <span className={s.metaItem}>{info.fileSize}</span>}
              {info.fileHash && (
-                <span className="admin-meta-item admin-meta-hash" title={info.fileHash}>
+                <span className={s.metaHash} title={info.fileHash}>
                  SHA256: {info.fileHash.slice(0, 12)}...
                </span>
              )}
--- a/src/components/admin/DownloadAdmin.test.jsx
+++ b/src/components/admin/DownloadAdmin.test.jsx
@@ -0,0 +1,85 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import DownloadAdmin from './DownloadAdmin';
+
+// Mock APIs
+const mockGetDownloadInfo = vi.fn();
+vi.mock('../../api/download', () => ({
+  getDownloadInfo: (...args) => mockGetDownloadInfo(...args),
+}));
+
+// Mock apiUpload
+const mockApiUpload = vi.fn();
+vi.mock('../../api/client', () => ({
+  apiUpload: (...args) => mockApiUpload(...args),
+}));
+
+// Mock toast
+const mockToast = { success: vi.fn(), error: vi.fn(), info: vi.fn(), warn: vi.fn() };
+vi.mock('../toast/useToast', () => ({
+  useToast: () => mockToast,
+}));
+
+const SAMPLE_INFO = {
+  url: 'https://example.com/game.zip',
+  launcherUrl: 'https://example.com/launcher.exe',
+  version: 'v1.2.0',
+  fileName: 'game.zip',
+  fileSize: '512 MB',
+  fileHash: 'abc123def456abc123def456abc123def456abc123def456abc123def456abcd',
+  launcherSize: '8 MB',
+};
+
+describe('DownloadAdmin', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetDownloadInfo.mockResolvedValue(SAMPLE_INFO);
+  });
+
+  it('shows loading state then renders download info', async () => {
+    render(<DownloadAdmin />);
+    expect(screen.getByText('불러오는 중...')).toBeInTheDocument();
+    expect(await screen.findByText('v1.2.0')).toBeInTheDocument();
+    expect(screen.getByText('512 MB')).toBeInTheDocument();
+    expect(screen.getByText('game.zip')).toBeInTheDocument();
+  });
+
+  it('shows error when fetch fails', async () => {
+    mockGetDownloadInfo.mockRejectedValueOnce(new Error('fail'));
+    render(<DownloadAdmin />);
+    expect(await screen.findByText('배포 정보를 불러올 수 없습니다.')).toBeInTheDocument();
+    expect(screen.getByText('다시 시도')).toBeInTheDocument();
+  });
+
+  it('retries loading on "다시 시도" click', async () => {
+    mockGetDownloadInfo.mockRejectedValueOnce(new Error('fail'));
+    render(<DownloadAdmin />);
+    await screen.findByText('다시 시도');
+
+    mockGetDownloadInfo.mockResolvedValueOnce(SAMPLE_INFO);
+    fireEvent.click(screen.getByText('다시 시도'));
+    expect(await screen.findByText('v1.2.0')).toBeInTheDocument();
+  });
+
+  it('renders launcher and game upload sections', async () => {
+    render(<DownloadAdmin />);
+    await screen.findByText('v1.2.0');
+
+    expect(screen.getByText('launcher.exe')).toBeInTheDocument();
+    expect(screen.getByText(/게임 파일/)).toBeInTheDocument();
+    // Two upload buttons (both disabled without file selection)
+    const uploadButtons = screen.getAllByRole('button', { name: '업로드' });
+    expect(uploadButtons).toHaveLength(2);
+    uploadButtons.forEach((btn) => expect(btn).toBeDisabled());
+  });
+
+  it('displays launcher size', async () => {
+    render(<DownloadAdmin />);
+    await screen.findByText('8 MB');
+  });
+
+  it('displays SHA256 hash prefix', async () => {
+    render(<DownloadAdmin />);
+    expect(await screen.findByText(/SHA256: abc123def456/)).toBeInTheDocument();
+  });
+});
--- a/src/components/admin/UploadForm.jsx
+++ b/src/components/admin/UploadForm.jsx
@@ -1,7 +1,10 @@
 import { useState, useRef } from 'react';
 import { apiUpload } from '../../api/client';
+import { useToast } from '../toast/useToast';
+import s from './AdminCommon.module.css';

 export default function UploadForm({ title, hint, accept, endpoint, onSuccess }) {
+  const toast = useToast();
  const [file, setFile] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
@@ -19,58 +22,64 @@ export default function UploadForm({ title, hint, accept, endpoint, onSuccess })
    if (!file) return;

    const path = `${endpoint}?filename=${encodeURIComponent(file.name)}`;
-
    setUploading(true);
    setError('');

+    const fail = (msg) => { setError(msg); toast.error(msg); setProgress(0); };
+
    try {
      const { status, body } = await apiUpload(path, file, (p) => setProgress(p));
      if (status >= 200 && status < 300) {
        onSuccess(body);
+        toast.success('업로드가 완료되었습니다.');
        setFile(null);
        if (fileInputRef.current) fileInputRef.current.value = '';
        setProgress(0);
+      } else if (status === 413) {
+        fail('파일 크기가 너무 큽니다. 더 작은 파일을 선택해주세요.');
+      } else if (status === 409) {
+        fail('동일한 파일이 이미 존재합니다.');
+      } else if (status >= 500) {
+        fail('서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
      } else {
-        setError(body.error || '업로드에 실패했습니다.');
-        setProgress(0);
+        fail(body.error || '업로드에 실패했습니다.');
      }
    } catch {
-      setError('네트워크 오류가 발생했습니다.');
-      setProgress(0);
+      fail('네트워크 오류가 발생했습니다.');
    } finally {
      setUploading(false);
    }
  };

  return (
-    <form className="admin-form" onSubmit={handleUpload}>
-      <div className="admin-field">
-        <label className="admin-label">{title}</label>
+    <form className={s.form} onSubmit={handleUpload}>
+      <div className={s.field}>
+        <label className={s.label}>{title}</label>
        <input
          ref={fileInputRef}
          type="file"
          accept={accept}
-          className="admin-input-file"
+          className={s.inputFile}
          onChange={handleFileChange}
          disabled={uploading}
        />
-        <span className="admin-field-hint">{hint}</span>
+        <span className={s.fieldHint}>{hint}</span>
      </div>

      {uploading && (
-        <div className="admin-upload-progress">
-          <div className="admin-upload-bar" style={{ width: `${progress}%` }} />
-          <span className="admin-upload-pct">{progress}%</span>
+        <div className={s.uploadProgress}>
+          <div className={s.uploadBar} style={{ width: `${progress}%` }} />
+          <span className={s.uploadPct}>{progress}%</span>
        </div>
      )}

-      {error && <p className="admin-error">{error}</p>}
+      {error && <p className={s.error}>{error}</p>}

-      <div className="admin-form-actions">
-        <button className="btn-admin-primary" type="submit" disabled={uploading || !file}>
+      <div className={s.formActions}>
+        <button className={s.btnPrimary} type="submit" disabled={uploading || !file}>
          {uploading ? `업로드 중... (${progress}%)` : '업로드'}
        </button>
      </div>
    </form>
  );
-}
+}
--- a/src/components/admin/UserAdmin.jsx
+++ b/src/components/admin/UserAdmin.jsx
@@ -1,35 +1,40 @@
-// TODO: Add tests for CRUD operations (list users, update role, delete user)
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { getUsers, updateUserRole, deleteUser } from '../../api/users';
 import { useAuth } from '../../context/useAuth';
 import { useToast } from '../toast/useToast';
-import './AdminCommon.css';
+import { useConfirm } from '../confirm/useConfirm';
+import s from './AdminCommon.module.css';
+
+const PAGE_SIZE = 20;

 export default function UserAdmin() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [fetchError, setFetchError] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
  const { user: me } = useAuth();
  const toast = useToast();
+  const confirm = useConfirm();

-  const load = () => {
+  const load = useCallback((off = 0) => {
    setLoading(true);
    setFetchError(false);
-    getUsers()
-      .then(setUsers)
-      .catch((err) => {
-        console.error('유저 목록 로드 실패:', err);
-        setFetchError(true);
+    getUsers(off, PAGE_SIZE)
+      .then((data) => {
+        setUsers(data);
+        setHasMore(data.length === PAGE_SIZE);
      })
+      .catch(() => setFetchError(true))
      .finally(() => setLoading(false));
-  };
-  // eslint-disable-next-line react-hooks/set-state-in-effect -- initial data fetch on mount
-  useEffect(() => { load(); }, []);
+  }, []);
+
+  // eslint-disable-next-line react-hooks/set-state-in-effect
+  useEffect(() => { load(0); }, [load]);

  const handleRoleToggle = async (u) => {
    const newRole = u.role === 'admin' ? 'user' : 'admin';
-    // TODO: Replace window.confirm() with a custom confirmation modal for consistent UI
-    if (!confirm(`${u.username}의 권한을 ${newRole}로 변경하시겠습니까?`)) return;
+    if (!(await confirm(`${u.username}의 권한을 ${newRole}로 변경하시겠습니까?`))) return;
    try {
      await updateUserRole(u.id, newRole);
      toast.success(`${u.username}의 권한이 ${newRole}로 변경되었습니다.`);
@@ -40,8 +45,7 @@ export default function UserAdmin() {
  };

  const handleDelete = async (u) => {
-    // TODO: Replace window.confirm() with a custom confirmation modal for consistent UI
-    if (!confirm(`${u.username} 계정을 삭제하시겠습니까?`)) return;
+    if (!(await confirm(`${u.username} 계정을 삭제하시겠습니까?`))) return;
    try {
      await deleteUser(u.id);
      toast.success(`${u.username} 계정이 삭제되었습니다.`);
@@ -52,34 +56,58 @@ export default function UserAdmin() {
  };

  return (
-    <div className="admin-section">
-      <h2 className="admin-section-title">유저 관리</h2>
+    <div className={s.section}>
+      <h2 className={s.sectionTitle}>유저 관리</h2>
      {fetchError && (
-        <div className="admin-error-block">
-          <p className="admin-error">유저 목록을 불러올 수 없습니다.</p>
-          <button className="btn-admin-secondary" onClick={load}>다시 시도</button>
+        <div className={s.errorBlock}>
+          <p className={s.error}>유저 목록을 불러올 수 없습니다.</p>
+          <button className={s.btnSecondary} onClick={load}>다시 시도</button>
        </div>
      )}
-      {loading && <p className="admin-list-empty">불러오는 중...</p>}
-      {!loading && users.length === 0 && <p className="admin-list-empty">등록된 유저가 없습니다.</p>}
-      <ul className="admin-list">
+      {loading && <p className={s.listEmpty}>불러오는 중...</p>}
+      {!loading && users.length === 0 && <p className={s.listEmpty}>등록된 유저가 없습니다.</p>}
+      <ul className={s.list}>
        {users.map((u) => (
-          <li key={u.id} className="admin-list-item">
-            <div className="admin-list-info">
-              <span className="admin-list-title">{u.username}</span>
-              <span className={`admin-role-badge ${u.role}`}>{u.role}</span>
+          <li key={u.id} className={s.listItem}>
+            <div className={s.listInfo}>
+              <span className={s.listTitle}>{u.username}</span>
+              <span className={u.role === 'admin' ? s.roleBadgeAdmin : s.roleBadgeUser}>{u.role}</span>
            </div>
            {u.username !== me?.username && (
-              <div className="admin-list-actions">
-                <button className="btn-admin-edit" onClick={() => handleRoleToggle(u)}>
+              <div className={s.listActions}>
+                <button className={s.btnEdit} onClick={() => handleRoleToggle(u)}>
                  {u.role === 'admin' ? '일반으로' : '관리자로'}
                </button>
-                <button className="btn-admin-delete" onClick={() => handleDelete(u)}>삭제</button>
+                <button className={s.btnDelete} onClick={() => handleDelete(u)}>삭제</button>
              </div>
            )}
          </li>
        ))}
      </ul>
+      <div className={s.listActions} style={{ justifyContent: 'center', marginTop: '1rem' }}>
+        <button
+          className={s.btnSecondary}
+          disabled={offset === 0}
+          onClick={() => {
+            const prev = Math.max(0, offset - PAGE_SIZE);
+            setOffset(prev);
+            load(prev);
+          }}
+        >
+          이전
+        </button>
+        <button
+          className={s.btnSecondary}
+          disabled={!hasMore}
+          onClick={() => {
+            const next = offset + PAGE_SIZE;
+            setOffset(next);
+            load(next);
+          }}
+        >
+          다음
+        </button>
+      </div>
    </div>
  );
 }
--- a/src/components/admin/UserAdmin.test.jsx
+++ b/src/components/admin/UserAdmin.test.jsx
@@ -0,0 +1,161 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import UserAdmin from './UserAdmin';
+
+// Mock APIs
+const mockGetUsers = vi.fn();
+const mockUpdateUserRole = vi.fn();
+const mockDeleteUser = vi.fn();
+vi.mock('../../api/users', () => ({
+  getUsers: (...args) => mockGetUsers(...args),
+  updateUserRole: (...args) => mockUpdateUserRole(...args),
+  deleteUser: (...args) => mockDeleteUser(...args),
+}));
+
+// Mock useAuth — current user is "admin1"
+vi.mock('../../context/useAuth', () => ({
+  useAuth: () => ({ user: { username: 'admin1', role: 'admin' } }),
+}));
+
+// Mock toast
+const mockToast = { success: vi.fn(), error: vi.fn(), info: vi.fn(), warn: vi.fn() };
+vi.mock('../toast/useToast', () => ({
+  useToast: () => mockToast,
+}));
+
+// Mock confirm
+let mockConfirmResult = true;
+vi.mock('../confirm/useConfirm', () => ({
+  useConfirm: () => () => Promise.resolve(mockConfirmResult),
+}));
+
+const SAMPLE_USERS = [
+  { id: 1, username: 'admin1', role: 'admin' },
+  { id: 2, username: 'player1', role: 'user' },
+  { id: 3, username: 'player2', role: 'user' },
+];
+
+describe('UserAdmin', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfirmResult = true;
+    mockGetUsers.mockResolvedValue(SAMPLE_USERS);
+  });
+
+  it('renders user list after loading', async () => {
+    render(<UserAdmin />);
+    expect(screen.getByText('불러오는 중...')).toBeInTheDocument();
+    expect(await screen.findByText('admin1')).toBeInTheDocument();
+    expect(screen.getByText('player1')).toBeInTheDocument();
+    expect(screen.getByText('player2')).toBeInTheDocument();
+  });
+
+  it('shows error when fetch fails', async () => {
+    mockGetUsers.mockRejectedValueOnce(new Error('fail'));
+    render(<UserAdmin />);
+    expect(await screen.findByText('유저 목록을 불러올 수 없습니다.')).toBeInTheDocument();
+  });
+
+  it('does not show action buttons for the current user', async () => {
+    render(<UserAdmin />);
+    await screen.findByText('admin1');
+
+    // admin1 row should not have edit/delete buttons
+    const listItems = screen.getAllByRole('listitem');
+    const admin1Item = listItems.find((li) => li.textContent.includes('admin1'));
+    expect(admin1Item.querySelector('button')).toBeNull();
+  });
+
+  it('shows role badge for each user', async () => {
+    render(<UserAdmin />);
+    await screen.findByText('admin1');
+
+    const badges = screen.getAllByText(/^(admin|user)$/);
+    expect(badges.length).toBeGreaterThanOrEqual(3);
+  });
+
+  describe('role toggle', () => {
+    it('promotes a user to admin', async () => {
+      mockUpdateUserRole.mockResolvedValueOnce({});
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      // player1 should have "관리자로" button
+      const promoteButtons = screen.getAllByText('관리자로');
+      fireEvent.click(promoteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockUpdateUserRole).toHaveBeenCalledWith(2, 'admin');
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('player1의 권한이 admin로 변경되었습니다.');
+    });
+
+    it('does not toggle role when confirm is cancelled', async () => {
+      mockConfirmResult = false;
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const promoteButtons = screen.getAllByText('관리자로');
+      fireEvent.click(promoteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockUpdateUserRole).not.toHaveBeenCalled();
+      });
+    });
+
+    it('shows toast on role toggle failure', async () => {
+      mockUpdateUserRole.mockRejectedValueOnce(new Error('권한 변경 실패'));
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const promoteButtons = screen.getAllByText('관리자로');
+      fireEvent.click(promoteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockToast.error).toHaveBeenCalledWith('권한 변경 실패');
+      });
+    });
+  });
+
+  describe('delete', () => {
+    it('deletes a user when confirmed', async () => {
+      mockDeleteUser.mockResolvedValueOnce({});
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockDeleteUser).toHaveBeenCalledWith(2);
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('player1 계정이 삭제되었습니다.');
+    });
+
+    it('does not delete when confirm is cancelled', async () => {
+      mockConfirmResult = false;
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockDeleteUser).not.toHaveBeenCalled();
+      });
+    });
+
+    it('shows toast on delete failure', async () => {
+      mockDeleteUser.mockRejectedValueOnce(new Error('삭제 실패'));
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockToast.error).toHaveBeenCalledWith('삭제 실패');
+      });
+    });
+  });
+});
--- a/src/components/confirm/Confirm.css
+++ b/src/components/confirm/Confirm.css
@@ -0,0 +1,76 @@
+.confirm-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: confirm-fade-in 0.15s ease-out;
+}
+
+.confirm-dialog {
+  background: #3a3a3a;
+  border: 1px solid rgba(186, 205, 176, 0.15);
+  border-radius: 12px;
+  padding: 24px;
+  min-width: 320px;
+  max-width: 420px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  animation: confirm-scale-in 0.15s ease-out;
+}
+
+.confirm-message {
+  font-size: 0.95rem;
+  color: rgba(255, 255, 255, 0.87);
+  line-height: 1.5;
+  margin: 0 0 20px 0;
+}
+
+.confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.confirm-btn {
+  padding: 8px 20px;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.2s;
+}
+
+.confirm-btn:hover {
+  opacity: 0.85;
+}
+
+.confirm-btn-cancel {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.confirm-btn-ok {
+  background: #BACDB0;
+  color: #2E2C2F;
+  font-weight: 600;
+}
+
+@keyframes confirm-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes confirm-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
--- a/src/components/confirm/ConfirmProvider.jsx
+++ b/src/components/confirm/ConfirmProvider.jsx
@@ -0,0 +1,44 @@
+import { useState, useCallback, useRef } from 'react';
+import { ConfirmContext } from './confirmContextValue';
+import './Confirm.css';
+
+export function ConfirmProvider({ children }) {
+  const [dialog, setDialog] = useState(null);
+  const resolveRef = useRef(null);
+
+  const confirm = useCallback((message) => {
+    return new Promise((resolve) => {
+      resolveRef.current = resolve;
+      setDialog({ message });
+    });
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    resolveRef.current?.(true);
+    resolveRef.current = null;
+    setDialog(null);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    resolveRef.current?.(false);
+    resolveRef.current = null;
+    setDialog(null);
+  }, []);
+
+  return (
+    <ConfirmContext.Provider value={confirm}>
+      {children}
+      {dialog && (
+        <div className="confirm-overlay" onClick={handleCancel}>
+          <div className="confirm-dialog" role="alertdialog" aria-modal="true" aria-label={dialog.message} onClick={(e) => e.stopPropagation()}>
+            <p className="confirm-message">{dialog.message}</p>
+            <div className="confirm-actions">
+              <button className="confirm-btn confirm-btn-cancel" onClick={handleCancel}>취소</button>
+              <button className="confirm-btn confirm-btn-ok" onClick={handleConfirm} autoFocus>확인</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </ConfirmContext.Provider>
+  );
+}
--- a/src/components/confirm/confirmContextValue.js
+++ b/src/components/confirm/confirmContextValue.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ConfirmContext = createContext(null);
--- a/src/components/confirm/index.js
+++ b/src/components/confirm/index.js
@@ -0,0 +1,2 @@
+export { ConfirmProvider } from './ConfirmProvider';
+export { useConfirm } from './useConfirm';
--- a/src/components/confirm/useConfirm.js
+++ b/src/components/confirm/useConfirm.js
@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ConfirmContext } from './confirmContextValue';
+
+export function useConfirm() {
+  const ctx = useContext(ConfirmContext);
+  if (!ctx) throw new Error('useConfirm must be used within ConfirmProvider');
+  return ctx;
+}
--- a/src/components/wallet/AssetsTab.jsx
+++ b/src/components/wallet/AssetsTab.jsx
@@ -0,0 +1,159 @@
+import { useState, useEffect, useCallback, Fragment } from 'react';
+import { getAssets, getAsset, listOnMarket } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+
+export default function AssetsTab() {
+  const toast = useToast();
+  const [assets, setAssets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [expanded, setExpanded] = useState(null);
+  const [listingAsset, setListingAsset] = useState(null);
+  const [listingPrice, setListingPrice] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    getAssets()
+      .then((result) => {
+        const ids = result?.ids || result;
+        if (!ids || !Array.isArray(ids) || ids.length === 0) {
+          setAssets([]);
+          return;
+        }
+        return Promise.all(
+          ids.map((id) =>
+            getAsset(id)
+              .then((data) => ({ ...data, _loaded: true }))
+              .catch(() => ({ id, _loaded: false }))
+          )
+        ).then(setAssets);
+      })
+      .catch(() => {
+        toast.error('자산 목록을 불러오지 못했습니다.');
+      })
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const toggleExpand = (id) => {
+    setExpanded((prev) => (prev === id ? null : id));
+    setListingAsset(null);
+    setListingPrice('');
+  };
+
+  const handleList = async (assetId) => {
+    const price = Number(listingPrice);
+    if (!price || price <= 0) return;
+    setSubmitting(true);
+    try {
+      await listOnMarket(assetId, price);
+      toast.success('마켓에 등록되었습니다.');
+      setAssets((prev) =>
+        prev.map((a) => (a.id === assetId ? { ...a, active_listing_id: 'pending' } : a))
+      );
+      setListingAsset(null);
+      setListingPrice('');
+    } catch (err) {
+      toast.error(err.message || '마켓 등록에 실패했습니다.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+  if (assets.length === 0) return <div className="wallet-empty">보유 자산이 없습니다</div>;
+
+  return (
+    <div>
+      {assets.map((asset) => {
+        const isListed = !!asset.active_listing_id;
+        return (
+          <div key={asset.id} className="asset-item">
+            <div className="asset-header" onClick={() => toggleExpand(asset.id)}>
+              <div>
+                {asset._loaded ? (
+                  <>
+                    <strong style={{ color: '#fff' }}>{asset.template_id || '자산'}</strong>
+                    <span style={{ marginLeft: 12, fontSize: '0.8rem', opacity: 0.4 }}>#{asset.id}</span>
+                  </>
+                ) : (
+                  <span style={{ color: '#e57373' }}>로드 실패 (#{asset.id})</span>
+                )}
+              </div>
+              {asset._loaded && (
+                <span className={`wallet-tag ${asset.tradeable ? 'wallet-tag-ok' : 'wallet-tag-no'}`}>
+                  {asset.tradeable ? '거래 가능' : '거래 불가'}
+                </span>
+              )}
+            </div>
+
+            {expanded === asset.id && asset._loaded && (
+              <div className="asset-detail">
+                {/* 속성 */}
+                {asset.properties && Object.keys(asset.properties).length > 0 && (
+                  <div className="asset-props">
+                    {Object.entries(asset.properties).map(([k, v]) => (
+                      <Fragment key={k}>
+                        <span className="asset-prop-key">{k}</span>
+                        <span className="asset-prop-val">{String(v)}</span>
+                      </Fragment>
+                    ))}
+                  </div>
+                )}
+
+                {/* 마켓 등록 상태 */}
+                <div style={{ marginTop: 12 }}>
+                  {isListed ? (
+                    <span className="wallet-tag wallet-tag-listed">마켓 등록됨</span>
+                  ) : (
+                    <span className="wallet-tag wallet-tag-no">미등록</span>
+                  )}
+                </div>
+
+                {/* 마켓 등록 버튼 */}
+                {!isListed && asset.tradeable && (
+                  <div style={{ marginTop: 12 }}>
+                    {listingAsset === asset.id ? (
+                      <div style={{ display: 'flex', gap: 8 }}>
+                        <input
+                          type="number"
+                          className="wallet-input"
+                          placeholder="가격 (TOL)"
+                          value={listingPrice}
+                          onChange={(e) => setListingPrice(e.target.value)}
+                          min="1"
+                          style={{ width: 140 }}
+                        />
+                        <button
+                          className="btn-primary"
+                          disabled={submitting || !listingPrice}
+                          onClick={() => handleList(asset.id)}
+                        >
+                          {submitting ? '처리 중...' : '등록'}
+                        </button>
+                        <button
+                          className="btn-copy"
+                          onClick={() => { setListingAsset(null); setListingPrice(''); }}
+                        >
+                          취소
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        className="btn-primary"
+                        onClick={(e) => { e.stopPropagation(); setListingAsset(asset.id); }}
+                      >
+                        마켓에 등록
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
--- a/src/components/wallet/InventoryTab.jsx
+++ b/src/components/wallet/InventoryTab.jsx
@@ -0,0 +1,45 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getInventory } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+
+export default function InventoryTab() {
+  const toast = useToast();
+  const [inventory, setInventory] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    getInventory()
+      .then(setInventory)
+      .catch(() => toast.error('인벤토리를 불러오지 못했습니다.'))
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  // eslint-disable-next-line react-hooks/set-state-in-effect
+  useEffect(() => { load(); }, [load]);
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+
+  const slots = inventory?.slots;
+  const entries = slots ? Object.entries(slots) : [];
+
+  if (entries.length === 0) return <div className="wallet-empty">인벤토리가 비어있습니다</div>;
+
+  return (
+    <div>
+      {entries.map(([slotName, assetId]) => {
+        const isEmpty = !assetId;
+        return (
+          <div key={slotName} className={`inv-slot${isEmpty ? ' inv-slot-empty' : ''}`}>
+            <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '0.85rem' }}>
+              {slotName}
+            </span>
+            <span style={{ color: isEmpty ? 'rgba(255,255,255,0.25)' : '#fff', fontSize: '0.9rem' }}>
+              {isEmpty ? '비어있음' : assetId}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
--- a/src/components/wallet/MarketTab.jsx
+++ b/src/components/wallet/MarketTab.jsx
@@ -0,0 +1,142 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getMarketListings, getListing, getWallet, buyFromMarket, cancelListing } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+import { useConfirm } from '../confirm/useConfirm';
+
+function truncateAddr(addr) {
+  if (!addr || addr.length <= 12) return addr || '';
+  return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+}
+
+export default function MarketTab() {
+  const toast = useToast();
+  const confirm = useConfirm();
+  const [listings, setListings] = useState([]);
+  const [myPubKey, setMyPubKey] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState('all');
+  const [processing, setProcessing] = useState(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    Promise.all([getMarketListings(), getWallet()])
+      .then(([result, w]) => {
+        const ids = result?.ids || result;
+        setMyPubKey(w?.pubKeyHex || '');
+        if (!ids || !Array.isArray(ids) || ids.length === 0) {
+          setListings([]);
+          return;
+        }
+        return Promise.all(
+          ids.map((id) =>
+            getListing(id)
+              .then((data) => ({ ...data, _loaded: true }))
+              .catch(() => ({ id, _loaded: false }))
+          )
+        ).then((items) => setListings(items.filter((l) => l._loaded)));
+      })
+      .catch(() => {
+        toast.error('마켓 정보를 불러오지 못했습니다.');
+      })
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const handleBuy = async (listing) => {
+    const ok = await confirm(
+      `${listing.asset_id}을(를) ${Number(listing.price).toLocaleString()} TOL에 구매하시겠습니까?`
+    );
+    if (!ok) return;
+    setProcessing(listing.id);
+    try {
+      await buyFromMarket(listing.id);
+      toast.success('구매가 완료되었습니다.');
+      load();
+    } catch (err) {
+      toast.error(err.message || '구매에 실패했습니다.');
+    } finally {
+      setProcessing(null);
+    }
+  };
+
+  const handleCancel = async (listing) => {
+    const ok = await confirm('리스팅을 취소하시겠습니까?');
+    if (!ok) return;
+    setProcessing(listing.id);
+    try {
+      await cancelListing(listing.id);
+      toast.success('리스팅이 취소되었습니다.');
+      load();
+    } catch (err) {
+      toast.error(err.message || '취소에 실패했습니다.');
+    } finally {
+      setProcessing(null);
+    }
+  };
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+
+  const filtered = filter === 'mine'
+    ? listings.filter((l) => l.seller === myPubKey)
+    : listings;
+
+  return (
+    <div>
+      <div className="market-filter">
+        <button
+          className={`market-filter-btn${filter === 'all' ? ' active' : ''}`}
+          onClick={() => setFilter('all')}
+        >
+          전체
+        </button>
+        <button
+          className={`market-filter-btn${filter === 'mine' ? ' active' : ''}`}
+          onClick={() => setFilter('mine')}
+        >
+          내 리스팅
+        </button>
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="wallet-empty">
+          {filter === 'mine' ? '내 리스팅이 없습니다' : '등록된 리스팅이 없습니다'}
+        </div>
+      ) : (
+        filtered.map((listing) => {
+          const isMine = listing.seller === myPubKey;
+          return (
+            <div key={listing.id} className="market-item">
+              <div>
+                <strong style={{ color: '#fff' }}>{listing.asset_id}</strong>
+                <span className="market-seller" style={{ marginLeft: 12 }}>
+                  {truncateAddr(listing.seller)}
+                </span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                <span className="market-price">{Number(listing.price).toLocaleString()} TOL</span>
+                {isMine ? (
+                  <button
+                    className="btn-danger-outline"
+                    disabled={processing === listing.id}
+                    onClick={() => handleCancel(listing)}
+                  >
+                    {processing === listing.id ? '처리 중...' : '취소'}
+                  </button>
+                ) : (
+                  <button
+                    className="btn-primary"
+                    disabled={processing === listing.id}
+                    onClick={() => handleBuy(listing)}
+                  >
+                    {processing === listing.id ? '처리 중...' : '구매'}
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}
--- a/src/components/wallet/WalletSummary.css
+++ b/src/components/wallet/WalletSummary.css
@@ -0,0 +1,51 @@
+.wallet-summary {
+  background: rgba(186, 205, 176, 0.06);
+  border: 1px solid rgba(186, 205, 176, 0.15);
+  border-radius: 10px;
+  padding: 20px 24px;
+  margin-bottom: 32px;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.wallet-summary:hover {
+  border-color: rgba(186, 205, 176, 0.3);
+  background: rgba(186, 205, 176, 0.09);
+}
+
+.wallet-summary-title {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 0.08em;
+  margin: 0 0 12px;
+}
+
+.wallet-summary-balance {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.wallet-summary-stats {
+  display: flex;
+  gap: 24px;
+  margin-top: 12px;
+}
+
+.wallet-summary-stat {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.wallet-summary-stat strong {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+@media (max-width: 768px) {
+  .wallet-summary-stats {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
--- a/src/components/wallet/WalletSummary.jsx
+++ b/src/components/wallet/WalletSummary.jsx
@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getBalance, getAssets, getInventory } from '../../api/chain';
+import './WalletSummary.css';
+
+export default function WalletSummary() {
+  const navigate = useNavigate();
+  const [balance, setBalance] = useState(null);
+  const [assetCount, setAssetCount] = useState(null);
+  const [equippedCount, setEquippedCount] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([
+      getBalance().catch(() => null),
+      getAssets().catch(() => null),
+      getInventory().catch(() => null),
+    ]).then(([b, assets, inv]) => {
+      setBalance(b?.balance != null ? b.balance : null);
+      const ids = assets?.ids || assets;
+      setAssetCount(Array.isArray(ids) ? ids.length : null);
+      const slots = inv?.slots;
+      setEquippedCount(
+        slots != null ? Object.values(slots).filter(Boolean).length : null
+      );
+    }).finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return null;
+
+  return (
+    <div className="wallet-summary" onClick={() => navigate('/wallet')}>
+      <h3 className="wallet-summary-title">내 지갑</h3>
+      <p className="wallet-summary-balance">
+        {balance != null ? `${Number(balance).toLocaleString()} TOL` : '-- TOL'}
+      </p>
+      <div className="wallet-summary-stats">
+        <span className="wallet-summary-stat">
+          보유 자산 <strong>{assetCount != null ? assetCount : '--'}</strong>
+        </span>
+        <span className="wallet-summary-stat">
+          장착 아이템 <strong>{equippedCount != null ? equippedCount : '--'}</strong>
+        </span>
+      </div>
+    </div>
+  );
+}
--- a/src/components/wallet/WalletTab.jsx
+++ b/src/components/wallet/WalletTab.jsx
@@ -0,0 +1,146 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getBalance, getWallet, exportWalletKey } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+
+function truncate(str, startLen = 4, endLen = 4) {
+  if (!str || str.length <= startLen + endLen + 3) return str || '';
+  return `${str.slice(0, startLen)}...${str.slice(-endLen)}`;
+}
+
+export default function WalletTab() {
+  const toast = useToast();
+  const [balance, setBalance] = useState(null);
+  const [wallet, setWallet] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const [password, setPassword] = useState('');
+  const [privateKey, setPrivateKey] = useState('');
+  const [exportError, setExportError] = useState('');
+  const [exporting, setExporting] = useState(false);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    Promise.all([getBalance(), getWallet()])
+      .then(([b, w]) => {
+        setBalance(b);
+        setWallet(w);
+      })
+      .catch(() => {
+        toast.error('지갑 정보를 불러오지 못했습니다.');
+      })
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  // 탭 이탈 시 개인키 초기화
+  useEffect(() => {
+    return () => {
+      setPrivateKey('');
+      setPassword('');
+      setExportError('');
+    };
+  }, []);
+
+  const copyToClipboard = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} 복사됨`);
+    } catch {
+      toast.error('복사에 실패했습니다.');
+    }
+  };
+
+  const handleExport = async (e) => {
+    e.preventDefault();
+    if (!password) return;
+    setExportError('');
+    setExporting(true);
+    try {
+      const data = await exportWalletKey(password);
+      setPrivateKey(data.privateKey);
+    } catch (err) {
+      if (err.status === 401) {
+        setExportError(err.message);
+      } else {
+        toast.error(err.message || '키 내보내기에 실패했습니다.');
+      }
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+
+  return (
+    <>
+      {/* 잔액 카드 */}
+      <div className="wallet-card">
+        <h3 className="wallet-card-title">TOL 잔액</h3>
+        <p className="wallet-balance">
+          {balance?.balance != null ? Number(balance.balance).toLocaleString() : '--'}
+        </p>
+      </div>
+
+      {/* 지갑 정보 */}
+      {wallet && (
+        <div className="wallet-card">
+          <h3 className="wallet-card-title">지갑 정보</h3>
+
+          <div style={{ marginBottom: 12 }}>
+            <div className="wallet-label">공개키</div>
+            <div className="wallet-row">
+              <span className="wallet-mono">{truncate(wallet.pubKeyHex, 4, 4)}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(wallet.pubKeyHex, '공개키')}>
+                복사
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <div className="wallet-label">주소</div>
+            <div className="wallet-row">
+              <span className="wallet-mono">{truncate(wallet.address, 8, 8)}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(wallet.address, '주소')}>
+                복사
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 키 내보내기 */}
+      <div className="wallet-card">
+        <h3 className="wallet-card-title">개인키 내보내기</h3>
+
+        {!privateKey ? (
+          <form onSubmit={handleExport} style={{ display: 'flex', gap: 8 }}>
+            <input
+              type="password"
+              className="wallet-input"
+              placeholder="비밀번호 입력"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              style={{ flex: 1 }}
+            />
+            <button type="submit" className="btn-primary" disabled={!password || exporting}>
+              {exporting ? '처리 중...' : '내보내기'}
+            </button>
+          </form>
+        ) : (
+          <div>
+            <div className="wallet-row" style={{ marginBottom: 8 }}>
+              <span className="wallet-mono" style={{ flex: 1 }}>{privateKey}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(privateKey, '개인키')}>
+                복사
+              </button>
+            </div>
+            <p className="wallet-warning">개인키를 안전하게 보관하세요</p>
+          </div>
+        )}
+
+        {exportError && <p className="wallet-error-text">{exportError}</p>}
+      </div>
+    </>
+  );
+}
--- a/src/context/AuthContext.jsx
+++ b/src/context/AuthContext.jsx
@@ -15,27 +15,26 @@ export function AuthProvider({ children }) {
    const username = localStorage.getItem('username');
    if (!token) return null;
    const payload = decodeTokenPayload(token);
-    const role = payload?.role || 'user';
-    return { token, username, role };
+    return { token, username, role: payload?.role || 'user' };
  });

+  // 토큰 저장 + 유저 상태 업데이트 공통 처리 (login, setUserFromSSAFY에서 공유)
+  const applySession = useCallback((data) => {
+    localStorage.setItem('token', data.token);
+    localStorage.setItem('username', data.username);
+    const role = decodeTokenPayload(data.token)?.role || 'user';
+    setUser({ token: data.token, username: data.username, role });
+  }, []);
+
  const login = useCallback(async (username, password) => {
    const data = await apiLogin(username, password);
-    localStorage.setItem('token', data.token);
-    localStorage.setItem('username', data.username);
-    const decoded = decodeTokenPayload(data.token);
-    const role = decoded?.role || 'user';
-    setUser({ token: data.token, username: data.username, role });
-  }, []);
+    applySession(data);
+  }, [applySession]);

  // SSAFY OAuth 콜백에서 받은 토큰으로 로그인 처리
  const setUserFromSSAFY = useCallback((data) => {
-    localStorage.setItem('token', data.token);
-    localStorage.setItem('username', data.username);
-    const decoded = decodeTokenPayload(data.token);
-    const role = decoded?.role || 'user';
-    setUser({ token: data.token, username: data.username, role });
-  }, []);
+    applySession(data);
+  }, [applySession]);

  // 로컬 세션만 정리 (토큰 만료·강제 로그아웃 시)
  const clearSession = useCallback(() => {
--- a/src/index.css
+++ b/src/index.css
@@ -30,4 +30,54 @@ a {

 a:hover {
  opacity: 0.85;
+}
+
+/* ── Game asset common classes ───────────────────── */
+
+.btn-game {
+  position: relative;
+  display: inline-block;
+  border: none;
+  color: #fff;
+  padding: 14px 40px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  cursor: pointer;
+  background: url('/images/btn_normal.webp') center/100% 100% no-repeat;
+  letter-spacing: 0.05em;
+  overflow: hidden;
+  text-decoration: none;
+  transition: transform 0.15s, filter 0.15s;
+}
+.btn-game:hover { transform: translateY(-1px); filter: brightness(1.2); }
+.btn-game:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.btn-game > * { position: relative; z-index: 1; }
+
+.card-game {
+  position: relative;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.card-game::before {
+  content: '';
+  position: absolute;
+  inset: -8px;
+  background: url('/images/card_frame.webp') center/100% 100% no-repeat;
+  pointer-events: none;
+  z-index: 0;
+}
+.card-game > * { position: relative; z-index: 1; }
+
+.divider-game {
+  width: 100%;
+  max-width: 400px;
+  height: 20px;
+  background: url('/images/divider.webp') center/contain no-repeat;
+  margin: 2rem auto;
+}
+
+@media (max-width: 768px) {
+  .card-game::before { display: none; }
+  .card-game { border: 1px solid rgba(186, 205, 176, 0.3); }
 }
--- a/src/pages/AdminPage.css
+++ b/src/pages/AdminPage.css
@@ -95,3 +95,56 @@
  margin: 0 auto;
  padding: 32px 24px 80px;
 }
+
+.admin-logo {
+  height: 32px;
+  width: auto;
+}
+
+.admin-tabs-divider {
+  width: 100%;
+  max-width: 300px;
+  height: 16px;
+  background: url('/images/divider.webp') center/contain no-repeat;
+  margin: 0 auto;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .admin-header {
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px;
+  }
+
+  .admin-header-left {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .admin-header-right {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .admin-tabs {
+    padding: 12px 16px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .admin-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .admin-tab {
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-height: 44px;
+  }
+
+  .admin-main {
+    padding: 20px 12px 60px;
+  }
+}
--- a/src/pages/AdminPage.jsx
+++ b/src/pages/AdminPage.jsx
@@ -21,6 +21,7 @@ export default function AdminPage() {
      <header className="admin-header">
        <div className="admin-header-left">
          <Link to="/" className="admin-home-link">← 메인으로</Link>
+          <img src="/images/logo.webp" alt="" className="admin-logo" />
          <h1 className="admin-title">관리자 페이지</h1>
        </div>
        <div className="admin-header-right">
@@ -44,6 +45,7 @@ export default function AdminPage() {
          </button>
        ))}
      </div>
+      <div className="admin-tabs-divider"></div>

      {/* Tabs are conditionally rendered (not hidden) to avoid stale data. Each panel re-fetches on mount. */}
      <main className="admin-main" role="tabpanel" id={`tabpanel-${tab}`} aria-labelledby={`tab-${tab}`}>
--- a/src/pages/AuthPage.css
+++ b/src/pages/AuthPage.css
@@ -151,6 +151,13 @@
  border-color: rgba(186, 205, 176, 0.5);
 }

+.login-logo {
+  max-width: 120px;
+  height: auto;
+  margin: 0 auto 16px;
+  display: block;
+}
+
 .login-back {
  display: block;
  text-align: center;
@@ -165,12 +172,65 @@
  color: rgba(255, 255, 255, 0.7);
 }

-.password-strength {
-  font-size: 0.8rem;
-  color: rgba(186, 205, 176, 0.7);
-  margin: -12px 0 0;
+/* Validation feedback */
+.input-hint {
+  font-size: 0.75rem;
+  color: #888;
+  margin-top: 2px;
 }

-.password-strength.strength-weak {
+.input-hint-error {
  color: #e57373;
 }
+
+.input-hint-success {
+  color: #bacdb0;
+}
+
+.input-group input.input-valid {
+  border-color: #bacdb0 !important;
+}
+
+.input-group input.input-invalid {
+  border-color: #e57373 !important;
+}
+
+.password-strength {
+  font-size: 0.75rem;
+  margin-top: 2px;
+}
+
+.strength-weak {
+  color: #e57373;
+}
+
+.strength-medium {
+  color: #ffd54f;
+}
+
+.strength-strong {
+  color: #bacdb0;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .login-panel {
+    max-width: 100%;
+    padding: 32px 20px;
+    margin: 0 12px;
+    border-radius: 8px;
+  }
+
+  .game-title {
+    font-size: 2.2rem;
+  }
+
+  .login-header {
+    margin-bottom: 28px;
+  }
+
+  .btn-login,
+  .btn-ssafy {
+    min-height: 44px;
+  }
+}
--- a/src/pages/HomePage.css
+++ b/src/pages/HomePage.css
@@ -3,21 +3,44 @@
  background-color: #2E2C2F;
 }

-/* Header */
+/* Header - fixed with scroll effect */
 .home-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
+  background: transparent;
+  transition: background 0.3s;
+}
+
+.home-header.scrolled {
+  background: rgba(46, 44, 47, 0.85);
+  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(186, 205, 176, 0.1);
 }

 .home-logo {
-  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+}
+
+.home-logo img {
+  height: 40px;
+  width: auto;
+}
+
+.home-logo-text {
+  font-size: 1.2rem;
  font-weight: 800;
  color: #BACDB0;
  letter-spacing: 0.1em;
-  margin: 0;
 }

 .home-user {
@@ -77,13 +100,11 @@
  opacity: 0.9;
 }

-/* Hero banner */
+/* Hero banner - fullscreen with game background */
 .hero-banner {
  position: relative;
-  height: 280px;
-  background:
-    linear-gradient(135deg, rgba(46, 44, 47, 0.85), rgba(46, 44, 47, 0.6)),
-    linear-gradient(135deg, #2E2C2F 0%, #3a3a3a 50%, #2E2C2F 100%);
+  min-height: 100vh;
+  background: url('/images/bg_loading.webp') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -94,28 +115,62 @@
  content: '';
  position: absolute;
  inset: 0;
-  background:
-    radial-gradient(ellipse at 30% 40%, rgba(186, 205, 176, 0.12) 0%, transparent 60%),
-    radial-gradient(ellipse at 70% 60%, rgba(186, 205, 176, 0.06) 0%, transparent 50%);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.7) 0%,
+    rgba(0, 0, 0, 0.3) 50%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
 }

 .hero-overlay {
  position: relative;
  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.hero-logo {
+  width: 200px;
+  height: auto;
+  margin-bottom: 24px;
 }

 .hero-title {
-  font-size: 2.8rem;
+  font-size: 3rem;
  font-weight: 800;
  color: #BACDB0;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.15em;
+  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  margin: 0;
 }

 .hero-desc {
-  font-size: 1rem;
-  color: rgba(255, 255, 255, 0.5);
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.6);
+  letter-spacing: 0.3em;
  margin: 12px 0 0;
+  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+}
+
+.hero-cta {
+  margin-top: 40px;
+}
+
+.hero-scroll-hint {
+  position: absolute;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.8rem;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateX(-50%) translateY(0); }
+  50% { transform: translateX(-50%) translateY(-8px); }
 }

 /* Main content */
@@ -124,3 +179,48 @@
  margin: 0 auto;
  padding: 40px 24px 80px;
 }
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .home-header {
+    padding: 12px 16px;
+  }
+
+  .home-header.scrolled {
+    padding: 8px 16px;
+  }
+
+  .home-user {
+    gap: 8px;
+  }
+
+  .hero-banner {
+    min-height: 80vh;
+  }
+
+  .hero-logo {
+    width: 120px;
+  }
+
+  .hero-title {
+    font-size: 1.8rem;
+  }
+
+  .hero-desc {
+    font-size: 0.85rem;
+    letter-spacing: 0.15em;
+  }
+
+  .home-main {
+    padding: 24px 16px 60px;
+  }
+
+  .btn-logout,
+  .btn-admin-link,
+  .btn-header-login {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,20 +1,33 @@
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import DownloadSection from '../components/DownloadSection';
+import WalletSummary from '../components/wallet/WalletSummary';
 import AnnouncementBoard from '../components/AnnouncementBoard';
 import './HomePage.css';

 export default function HomePage() {
  const { user, logout } = useAuth();
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 50);
+    window.addEventListener('scroll', onScroll);
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);

  return (
    <div className="home-page">
-      <header className="home-header">
-        <h1 className="home-logo">One of the plans</h1>
+      <header className={`home-header${scrolled ? ' scrolled' : ''}`}>
+        <Link to="/" className="home-logo">
+          <img src="/images/logo.webp" alt="One of the Plans" />
+          <span className="home-logo-text">One of the Plans</span>
+        </Link>
        <div className="home-user">
          {user ? (
            <>
              <span className="home-username">{user.username}</span>
+              <Link to="/wallet" className="btn-admin-link">지갑</Link>
              {user.role === 'admin' && (
                <Link to="/admin" className="btn-admin-link">관리자</Link>
              )}
@@ -28,13 +41,29 @@ export default function HomePage() {

      <section className="hero-banner">
        <div className="hero-overlay">
-          <h2 className="hero-title">One of the plans</h2>
-          <p className="hero-desc">Unity 3D 멀티플레이어 테스트에 참여하세요</p>
+          <img src="/images/logo.webp" alt="" className="hero-logo" />
+          <h2 className="hero-title">One of the Plans</h2>
+          <p className="hero-desc">MULTIPLAYER BOSS RAID</p>
+          <div className="hero-cta">
+            {user ? (
+              <a href="#download" className="btn-game">
+                <span>게임 시작</span>
+              </a>
+            ) : (
+              <Link to="/login" className="btn-game">
+                <span>로그인</span>
+              </Link>
+            )}
+          </div>
        </div>
+        <div className="hero-scroll-hint">▼ 스크롤</div>
      </section>

-      <main className="home-main">
+      <main className="home-main" id="download">
+        <div className="divider-game"></div>
+        {user && <WalletSummary />}
        <DownloadSection />
+        <div className="divider-game"></div>
        <AnnouncementBoard />
      </main>
    </div>
--- a/src/pages/LoginPage.css
+++ b/src/pages/LoginPage.css
@@ -1 +0,0 @@
-/* This file is deprecated. Both LoginPage and RegisterPage now use AuthPage.css */
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -14,6 +14,18 @@ export default function LoginPage() {
  const location = useLocation();
  const justRegistered = location.state?.registered;

+  const handleSSAFYLogin = async () => {
+    try {
+      const data = await getSSAFYLoginURL();
+      if (!data.url || !data.url.startsWith('https://')) {
+        throw new Error('유효하지 않은 로그인 URL입니다.');
+      }
+      window.location.href = data.url;
+    } catch {
+      setError('SSAFY 로그인 URL을 가져올 수 없습니다.');
+    }
+  };
+
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
@@ -51,6 +63,7 @@ export default function LoginPage() {
              placeholder="아이디를 입력하세요"
              autoComplete="username"
              maxLength={50}
+              aria-describedby={error ? 'login-error' : undefined}
            />
          </div>

@@ -64,11 +77,12 @@ export default function LoginPage() {
              placeholder="비밀번호를 입력하세요"
              autoComplete="current-password"
              maxLength={72}
+              aria-describedby={error ? 'login-error' : undefined}
            />
          </div>

          {justRegistered && <p className="login-success">회원가입이 완료되었습니다. 로그인해주세요.</p>}
-          {error && <p className="login-error" role="alert">{error}</p>}
+          {error && <p id="login-error" className="login-error" role="alert">{error}</p>}

          <button type="submit" className="btn-login" disabled={loading}>
            {loading ? '로그인 중...' : '로그인'}
@@ -82,14 +96,7 @@ export default function LoginPage() {
        <button
          type="button"
          className="btn-ssafy"
-          onClick={async () => {
-            try {
-              const data = await getSSAFYLoginURL();
-              window.location.href = data.url;
-            } catch {
-              setError('SSAFY 로그인 URL을 가져올 수 없습니다.');
-            }
-          }}
+          onClick={handleSSAFYLogin}
        >
          SSAFY 계정으로 로그인
        </button>
--- a/src/pages/NotFoundPage.jsx
+++ b/src/pages/NotFoundPage.jsx
@@ -0,0 +1,11 @@
+import { Link } from 'react-router-dom';
+
+export default function NotFoundPage() {
+  return (
+    <div style={{ padding: '2rem', textAlign: 'center', color: '#aaa' }}>
+      <h2>404</h2>
+      <p>페이지를 찾을 수 없습니다</p>
+      <Link to="/" style={{ color: '#4ea8de' }}>홈으로 돌아가기</Link>
+    </div>
+  );
+}
--- a/src/pages/RegisterPage.jsx
+++ b/src/pages/RegisterPage.jsx
@@ -3,36 +3,38 @@ import { useNavigate, Link } from 'react-router-dom';
 import { register } from '../api/auth';
 import './AuthPage.css';

+const USERNAME_REGEX = /^[a-z0-9_-]{3,50}$/;
+
+function getPasswordStrength(pw) {
+  if (pw.length === 0) return { label: '', level: '' };
+  if (pw.length < 6) return { label: '약함', level: 'weak' };
+  if (pw.length < 10) return { label: '중간', level: 'medium' };
+  return { label: '강함', level: 'strong' };
+}
+
 export default function RegisterPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
+  const [usernameTouched, setUsernameTouched] = useState(false);
  const navigate = useNavigate();

-  const getPasswordStrength = (pw) => {
-    if (pw.length === 0) return '';
-    if (pw.length < 6) return '비밀번호는 6자 이상이어야 합니다.';
-    let strength = 0;
-    if (/[a-z]/.test(pw)) strength++;
-    if (/[A-Z]/.test(pw)) strength++;
-    if (/[0-9]/.test(pw)) strength++;
-    if (/[^a-zA-Z0-9]/.test(pw)) strength++;
-    if (strength <= 1) return '약함';
-    if (strength <= 2) return '보통';
-    return '강함';
-  };
+  const isUsernameValid = USERNAME_REGEX.test(username);
+  const showUsernameError = usernameTouched && username.length > 0 && !isUsernameValid;
+  const showUsernameValid = usernameTouched && username.length > 0 && isUsernameValid;

  const passwordStrength = getPasswordStrength(password);
-  const isPasswordWeak = password.length > 0 && password.length < 6;
+  const confirmMismatch = confirm.length > 0 && password !== confirm;
+  const confirmMatch = confirm.length > 0 && password === confirm;

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    const trimmed = username.trim().toLowerCase();
-    if (!trimmed) {
+    if (trimmed.length === 0) {
      setError('아이디를 입력해주세요.');
      return;
    }
@@ -40,7 +42,7 @@ export default function RegisterPage() {
      setError('아이디는 3자 이상이어야 합니다.');
      return;
    }
-    if (!/^[a-z0-9_-]+$/.test(trimmed)) {
+    if (!USERNAME_REGEX.test(trimmed)) {
      setError('아이디는 영문 소문자, 숫자, _, -만 사용 가능합니다.');
      return;
    }
@@ -68,6 +70,7 @@ export default function RegisterPage() {
    <div className="login-page">
      <div className="login-panel">
        <div className="login-header">
+          <img src="/images/logo.webp" alt="One of the Plans" className="login-logo" />
          <h1 className="game-title">One of the plans</h1>
          <p className="game-subtitle">MULTIPLAYER</p>
        </div>
@@ -80,10 +83,17 @@ export default function RegisterPage() {
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
+              onBlur={() => setUsernameTouched(true)}
              placeholder="아이디를 입력하세요"
              autoComplete="username"
              maxLength={50}
+              className={showUsernameValid ? 'input-valid' : showUsernameError ? 'input-invalid' : ''}
+              aria-describedby="username-hint"
            />
+            <span id="username-hint" className={`input-hint ${showUsernameError ? 'input-hint-error' : ''}`}>
+              {showUsernameError ? '3~50자 영문 소문자, 숫자, _, -만 가능합니다' : '3~50자 영문 소문자, 숫자, _, -만 가능'}
+              {showUsernameValid && ' \u2713'}
+            </span>
          </div>

          <div className="input-group">
@@ -96,15 +106,15 @@ export default function RegisterPage() {
              placeholder="6자 이상 입력하세요"
              autoComplete="new-password"
              maxLength={72}
+              aria-describedby="password-strength"
            />
+            {passwordStrength.label && (
+              <span id="password-strength" className={`password-strength strength-${passwordStrength.level}`}>
+                강도: {passwordStrength.label}
+              </span>
+            )}
          </div>

-          {passwordStrength && (
-            <p className={`password-strength ${isPasswordWeak ? 'strength-weak' : ''}`}>
-              강도: {passwordStrength}
-            </p>
-          )}
-
          <div className="input-group">
            <label htmlFor="confirm">비밀번호 확인</label>
            <input
@@ -115,12 +125,18 @@ export default function RegisterPage() {
              placeholder="비밀번호를 다시 입력하세요"
              autoComplete="new-password"
              maxLength={72}
+              className={confirmMatch ? 'input-valid' : confirmMismatch ? 'input-invalid' : ''}
+              aria-describedby="confirm-hint"
            />
+            <span id="confirm-hint" className={`input-hint ${confirmMismatch ? 'input-hint-error' : confirmMatch ? 'input-hint-success' : ''}`}>
+              {confirmMismatch && '비밀번호가 일치하지 않습니다'}
+              {confirmMatch && `비밀번호가 일치합니다 \u2713`}
+            </span>
          </div>

          {error && <p className="login-error" role="alert">{error}</p>}

-          <button type="submit" className="btn-login" disabled={loading}>
+          <button type="submit" className="btn-login btn-game" disabled={loading}>
            {loading ? '처리 중...' : '회원가입'}
          </button>
        </form>
--- a/src/pages/RegisterPage.test.jsx
+++ b/src/pages/RegisterPage.test.jsx
@@ -68,27 +68,21 @@ describe('RegisterPage', () => {
  });

  describe('password strength', () => {
-    it('shows weak indicator for short passwords', () => {
+    it('shows "약함" for passwords shorter than 6 characters', () => {
      renderRegisterPage();
      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abc' } });
-      expect(screen.getByText(/비밀번호는 6자 이상이어야 합니다/)).toBeInTheDocument();
-    });
-
-    it('shows "약함" for lowercase-only password of 6+ chars', () => {
-      renderRegisterPage();
-      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abcdef' } });
      expect(screen.getByText(/약함/)).toBeInTheDocument();
    });

-    it('shows "보통" for mixed-case password', () => {
+    it('shows "중간" for passwords of 6-9 characters', () => {
      renderRegisterPage();
-      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abcDEF' } });
-      expect(screen.getByText(/보통/)).toBeInTheDocument();
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abcdef' } });
+      expect(screen.getByText(/중간/)).toBeInTheDocument();
    });

-    it('shows "강함" for password with multiple character types', () => {
+    it('shows "강함" for passwords of 10+ characters', () => {
      renderRegisterPage();
-      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abcD1!' } });
+      fireEvent.change(screen.getByLabelText('비밀번호'), { target: { value: 'abcdefghij' } });
      expect(screen.getByText(/강함/)).toBeInTheDocument();
    });
  });
--- a/src/pages/SSAFYCallbackPage.jsx
+++ b/src/pages/SSAFYCallbackPage.jsx
@@ -2,8 +2,9 @@ import { useEffect, useState, useRef } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import { ssafyCallback } from '../api/auth';
+import './AuthPage.css';

-// Inline styles are intentional for this simple callback/loading page — not worth a separate CSS file.
+// Inline styles are intentional for this simple callback/loading page — layout only, AuthPage.css handles buttons.
 export default function SSAFYCallbackPage() {
  const [error, setError] = useState('');
  const navigate = useNavigate();
@@ -19,12 +20,13 @@ export default function SSAFYCallbackPage() {
    called.current = true;

    const code = searchParams.get('code');
+    const state = searchParams.get('state');
    if (!code) {
      setError('인가 코드가 없습니다.'); // eslint-disable-line react-hooks/set-state-in-effect -- error state from URL param check
      return;
    }

-    ssafyCallback(code)
+    ssafyCallback(code, state)
      .then((data) => {
        setUserFromSSAFY(data);
        navigate('/', { replace: true });
@@ -38,7 +40,7 @@ export default function SSAFYCallbackPage() {
    return (
      <div style={{ textAlign: 'center', marginTop: '4rem' }}>
        <p style={{ color: '#e74c3c' }}>{error}</p>
-        <button onClick={() => navigate('/login', { replace: true })}>
+        <button className="btn-login" onClick={() => navigate('/login', { replace: true })}>
          로그인 페이지로 돌아가기
        </button>
      </div>
--- a/src/pages/WalletPage.css
+++ b/src/pages/WalletPage.css
@@ -0,0 +1,433 @@
+.wallet-page {
+  min-height: 100vh;
+  background-color: #2E2C2F;
+}
+
+.wallet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 32px;
+  border-bottom: 1px solid rgba(186, 205, 176, 0.1);
+}
+
+.wallet-header-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.wallet-home-link {
+  font-size: 0.85rem;
+  color: rgba(186, 205, 176, 0.6);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.wallet-home-link:hover {
+  color: #BACDB0;
+}
+
+.wallet-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.wallet-header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.wallet-username {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.btn-wallet-logout {
+  padding: 8px 16px;
+  background: transparent;
+  color: rgba(186, 205, 176, 0.7);
+  border: 1px solid rgba(186, 205, 176, 0.25);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-wallet-logout:hover {
+  background: rgba(186, 205, 176, 0.08);
+}
+
+.wallet-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 16px 32px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.wallet-tab {
+  padding: 10px 24px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.45);
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+  margin-bottom: -1px;
+}
+
+.wallet-tab:hover {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.wallet-tab.active {
+  color: #BACDB0;
+  border-bottom-color: #BACDB0;
+}
+
+.wallet-main {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 32px 24px 80px;
+}
+
+/* === Tab content shared styles === */
+
+.wallet-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(186, 205, 176, 0.12);
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 20px;
+}
+
+.wallet-card-title {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 0.08em;
+  margin: 0 0 12px;
+}
+
+.wallet-balance {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.wallet-mono {
+  font-family: monospace;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.7);
+  word-break: break-all;
+}
+
+.wallet-label {
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 4px;
+}
+
+.wallet-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.btn-copy {
+  padding: 4px 12px;
+  background: transparent;
+  color: rgba(186, 205, 176, 0.6);
+  border: 1px solid rgba(186, 205, 176, 0.2);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+}
+
+.btn-copy:hover {
+  background: rgba(186, 205, 176, 0.08);
+}
+
+.btn-primary {
+  padding: 8px 20px;
+  background: #BACDB0;
+  color: #2E2C2F;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+.btn-primary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-danger-outline {
+  padding: 8px 20px;
+  background: transparent;
+  color: #e57373;
+  border: 1px solid rgba(229, 115, 115, 0.4);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-danger-outline:hover {
+  background: rgba(229, 115, 115, 0.08);
+}
+
+.wallet-input {
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(186, 205, 176, 0.2);
+  border-radius: 6px;
+  color: #fff;
+  font-size: 0.85rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.wallet-input:focus {
+  border-color: rgba(186, 205, 176, 0.5);
+}
+
+.wallet-input::placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.wallet-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.9rem;
+}
+
+.wallet-empty {
+  text-align: center;
+  padding: 40px 0;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 0.9rem;
+}
+
+.wallet-error-text {
+  color: #e57373;
+  font-size: 0.85rem;
+  margin-top: 8px;
+}
+
+.wallet-warning {
+  color: #ffb74d;
+  font-size: 0.8rem;
+  margin-top: 8px;
+}
+
+.wallet-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.wallet-tag-ok {
+  background: rgba(186, 205, 176, 0.15);
+  color: #BACDB0;
+}
+
+.wallet-tag-no {
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.wallet-tag-listed {
+  background: rgba(78, 168, 222, 0.15);
+  color: #4ea8de;
+}
+
+/* Asset list */
+.asset-item {
+  border: 1px solid rgba(186, 205, 176, 0.1);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.asset-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.asset-header:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.asset-detail {
+  padding: 0 16px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.asset-props {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 16px;
+  font-size: 0.85rem;
+  margin: 12px 0;
+}
+
+.asset-prop-key {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.asset-prop-val {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Inventory slots */
+.inv-slot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border: 1px solid rgba(186, 205, 176, 0.1);
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.inv-slot-empty {
+  border-style: dashed;
+  color: rgba(255, 255, 255, 0.25);
+}
+
+/* Market listings */
+.market-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border: 1px solid rgba(186, 205, 176, 0.1);
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.market-price {
+  font-weight: 600;
+  color: #BACDB0;
+}
+
+.market-seller {
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.market-filter {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.market-filter-btn {
+  padding: 6px 16px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.market-filter-btn.active {
+  color: #BACDB0;
+  border-color: rgba(186, 205, 176, 0.4);
+  background: rgba(186, 205, 176, 0.08);
+}
+
+
+.wallet-logo {
+  height: 32px;
+  width: auto;
+}
+
+.wallet-tabs-divider {
+  width: 100%;
+  max-width: 300px;
+  height: 16px;
+  background: url('/images/divider.webp') center/contain no-repeat;
+  margin: 0 auto;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .wallet-header {
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px;
+  }
+
+  .wallet-header-left {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .wallet-header-right {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .wallet-tabs {
+    padding: 12px 16px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .wallet-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .wallet-tab {
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-height: 44px;
+  }
+
+  .wallet-main {
+    padding: 20px 12px 60px;
+  }
+
+  .wallet-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .market-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+}
--- a/src/pages/WalletPage.jsx
+++ b/src/pages/WalletPage.jsx
@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/useAuth';
+import WalletTab from '../components/wallet/WalletTab';
+import AssetsTab from '../components/wallet/AssetsTab';
+import InventoryTab from '../components/wallet/InventoryTab';
+import MarketTab from '../components/wallet/MarketTab';
+import './WalletPage.css';
+
+const TABS = [
+  { key: 'wallet', label: '지갑' },
+  { key: 'assets', label: '자산' },
+  { key: 'inventory', label: '인벤토리' },
+  { key: 'market', label: '마켓' },
+];
+
+export default function WalletPage() {
+  const { user, logout } = useAuth();
+  const [tab, setTab] = useState('wallet');
+
+  return (
+    <div className="wallet-page">
+      <header className="wallet-header">
+        <div className="wallet-header-left">
+          <Link to="/" className="wallet-home-link">← 메인으로</Link>
+          <h1 className="wallet-title">지갑</h1>
+        </div>
+        <div className="wallet-header-right">
+          <span className="wallet-username">{user?.username}</span>
+          <button className="btn-wallet-logout" onClick={logout}>로그아웃</button>
+        </div>
+      </header>
+
+      <div className="wallet-tabs" role="tablist">
+        {TABS.map((t) => (
+          <button
+            key={t.key}
+            role="tab"
+            id={`tab-${t.key}`}
+            aria-selected={tab === t.key}
+            aria-controls={`tabpanel-${t.key}`}
+            className={`wallet-tab${tab === t.key ? ' active' : ''}`}
+            onClick={() => setTab(t.key)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <main className="wallet-main" role="tabpanel" id={`tabpanel-${tab}`} aria-labelledby={`tab-${tab}`}>
+        {tab === 'wallet' && <WalletTab />}
+        {tab === 'assets' && <AssetsTab />}
+        {tab === 'inventory' && <InventoryTab />}
+        {tab === 'market' && <MarketTab />}
+      </main>
+    </div>
+  );
+}
--- a/src/test/setup.js
+++ b/src/test/setup.js
@@ -1 +1,19 @@
 import '@testing-library/jest-dom';
+
+// Vitest 4.x + jsdom 28: '--localstorage-file' without a valid path
+// causes localStorage to be a stub without .clear(). Provide a full implementation.
+if (typeof localStorage === 'undefined' || typeof localStorage.clear !== 'function') {
+  const store = new Map();
+  Object.defineProperty(globalThis, 'localStorage', {
+    value: {
+      getItem: (key) => store.get(String(key)) ?? null,
+      setItem: (key, value) => { store.set(String(key), String(value)); },
+      removeItem: (key) => { store.delete(String(key)); },
+      clear: () => { store.clear(); },
+      get length() { return store.size; },
+      key: (index) => ([...store.keys()][index] ?? null),
+    },
+    writable: true,
+    configurable: true,
+  });
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,11 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:8080',
+    },
+  },
  test: {
    globals: true,
    environment: 'jsdom',
Author	SHA1	Message	Date
tolelom	7cd8f0a837	refactor: btn-game CSS 정리 및 LoginPage.css 삭제 Some checks failed Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Failing after 2m17s Details - .btn-game에 display:inline-block, text-decoration:none 추가 → HomePage inline style 제거 - LoginPage.css 삭제 (deprecated, 임포트 없음) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 20:01:30 +09:00
tolelom	0b999f0526	refactor: pages/wallet 리팩토링 — CSS 분리, 유효성 검사 개선, 테스트 통과 Some checks failed Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Failing after 2m13s Details - WalletSummary.css 신규 분리 (WalletPage.css 결합도 제거) - InventoryTab: useCallback + useEffect([load]) 패턴으로 통일 - LoginPage: handleSSAFYLogin 함수 분리 - RegisterPage: 유효성 검사 메시지 세분화 (빈값/짧음/문자 오류 구분), 테스트 52개 전부 통과 - SSAFYCallbackPage: AuthPage.css 임포트 + 버튼 클래스 적용 - AuthPage.css: .login-logo 클래스 추가 - AdminPage.css: 후행 공백 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 19:51:55 +09:00
tolelom	4e0716c1cb	refactor: components/ 정리 - ConfirmProvider useMemo 불필요한 래핑 제거 - DownloadAdmin useCallback 적용, toast 중복 제거, eslint-disable 정리 - UserAdmin useCallback 적용, PAGE_SIZE 컴포넌트 밖으로 이동, 페이지네이션 버튼 가독성 개선 - UploadForm 에러 처리 fail 헬퍼로 중복 제거 - DownloadSection 후행 빈 줄 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 19:17:17 +09:00
tolelom	9a8102fb19	refactor: AuthContext 중복 코드 추출 login, setUserFromSSAFY의 토큰 저장 + 유저 상태 업데이트 로직을 applySession 헬퍼로 추출 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 19:11:23 +09:00
tolelom	90b75413f1	refactor: api/ 주석 정리 및 소소한 개선 - client.js JSDoc 추가 (apiFetch, tryRefresh, apiUpload, localizeError) - auth.js 단순 함수 JSDoc 제거, createLaunchTicket why 주석 유지 - chain.js BASE 중복 선언 이유 주석 추가, 단순 함수 JSDoc 제거 - announcements.js 후행 빈 줄 제거 - users.js getUsers 쿼리스트링 → URLSearchParams 변경 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 18:47:26 +09:00
tolelom	40ea1644b1	refactor: src 루트 파일 정리 Some checks failed Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Failing after 2m17s Details - App.jsx 404 인라인 JSX → NotFoundPage 컴포넌트 분리, <a> → <Link> 수정 - index.css btn-game transition brightness → filter 오타 수정 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 16:57:54 +09:00
tolelom	c0d827e8ec	chore: 프로젝트 설정 정리 및 개선 Some checks failed Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Failing after 2m15s Details - eslint ^10 → ^9 다운그레이드 (react-hooks 플러그인 호환) - .npmrc 제거, Dockerfile legacy-peer-deps 플래그 제거 - Dockerfile node:lts → node:22-alpine 버전 고정, ARG 오타 수정 - .dockerignore 추가 (.env, node_modules, .git 등 제외) - .env 삭제, .env.development 추가 (로컬 기본값 git 관리) - vite.config.js dev proxy 추가 (/api → localhost:8080) - index.html favicon, OG 태그, Pretendard 폰트 로드 추가 - nginx.conf /images/ 캐시 전략 추가, 주석 정리 - eslint.config.js ecmaVersion 중복 선언 정리 - deploy.yml --legacy-peer-deps, --no-cache 제거, 배포 커맨드 가독성 개선 - .github/workflows/ci.yml 삭제 (Gitea 사용으로 불필요) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 16:53:38 +09:00
tolelom	ad0db24891	fix: 회원가입 비밀번호 확인 체크 표시 유니코드 이스케이프 수정 All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 14s Details JSX 텍스트 노드에서 \u2713이 리터럴로 렌더링되는 문제를 JS 표현식으로 감싸 수정. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-27 16:05:35 +09:00
tolelom	73ab907e09	revert: 로그인 페이지 게임 에셋 스타일 롤백 All checks were successful Client CI/CD / test (push) Successful in 11s Details Client CI/CD / deploy (push) Successful in 16s Details 비주얼 오버홀에서 적용된 로그인 페이지의 배경 이미지, 카드 프레임, 구분선 이미지를 이전 스타일로 되돌림 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-27 09:08:18 +09:00
tolelom	b9bdbcaabc	feat: 웹 클라이언트 비주얼 오버홀 — 게임 에셋 적용 All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 14s Details - 홈페이지: 드래곤 히어로 배경(bg_loading), fixed 헤더, 로고, 마을 배경 다운로드 섹션 - 로그인/회원가입: 고딕 성문 배경(bg_login), 카드 프레임, 게임 버튼 - 공통: btn-game, card-game, divider-game CSS 클래스 추가 - 게임 에셋 PNG → WebP 변환 (6MB → 80~234KB) - 관리자 페이지: 로고/divider 추가 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-27 01:55:16 +09:00
tolelom	7e7b3e85a7	fix: 마켓 API 요청 필드명 snake_case→camelCase 수정 All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 14s Details 서버는 assetId/listingId(camelCase)를 기대하나 asset_id/listing_id(snake_case)로 보내고 있어 검증 실패. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 15:48:49 +09:00
tolelom	1691638fe9	fix: 지갑 UI 필드명/응답 구조 불일치 수정 All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 13s Details 서버 실제 응답과 프론트엔드 필드명이 맞지 않아 공개키 미표시, 인벤토리/마켓 TypeError 발생하던 버그 수정. - WalletTab: public_key→pubKeyHex, private_key→privateKey - InventoryTab: 배열→객체(slots) 구조 대응 - AssetsTab: 페이지네이션 응답, tradeable, active_listing_id, template_id - MarketTab: ID 목록→개별 getListing 호출, listing_id→id, asset_id - WalletSummary: 페이지네이션 + 인벤토리 객체 구조 대응 - chain.js: getListing() 함수 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 14:41:07 +09:00
tolelom	60be6e1d39	fix: suppress exhaustive-deps warnings in admin components All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 19s Details Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 13:44:58 +09:00
tolelom	3dc1aad8ac	feat: add wallet UI with 4 tabs and HomePage summary - chain.js: API wrapper with Idempotency-Key auto-generation - WalletPage: 4-tab container (wallet/assets/inventory/market) - WalletTab: balance, address (truncated+copy), key export - AssetsTab: asset list with detail expand, market listing - InventoryTab: read-only slot display - MarketTab: buy/cancel with confirm dialog, all/mine filter - WalletSummary: HomePage card with balance + stats - PrivateRoute guard for /wallet, header link on HomePage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 13:43:46 +09:00
tolelom	8b6ba38a82	feat: add chain API wrapper with idempotency-key Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 13:38:36 +09:00
tolelom	f6c95c9745	docs: wallet UI design spec Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 13:24:52 +09:00
tolelom	a5af22478a	Fix: Gitea 워크플로우에서 GitHub Action 의존 제거 All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 15s Details .gitea/workflows/deploy.yml이 실제 실행되는 파일. actions/checkout, actions/setup-node, appleboy/ssh-action을 모두 직접 실행 방식으로 대체. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-19 16:58:47 +09:00
tolelom	35dbdbba3b	ci: trigger CI rebuild Some checks failed Client CI/CD / test (push) Waiting to run Details Client CI/CD / deploy (push) Has been cancelled Details	2026-03-19 16:57:40 +09:00
tolelom	32d87d8151	Fix: CI에서 actions/checkout도 제거 — 모든 GitHub Action 의존 완전 제거 Some checks failed Client CI/CD / test (push) Waiting to run Details Client CI/CD / deploy (push) Has been cancelled Details Gitea runner가 github.com clone에서 멈추는 문제. actions/checkout@v4도 git fetch로 직접 대체. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-19 16:50:10 +09:00
tolelom	4232c80f2f	Fix: CI를 Gitea runner 호환으로 변경 — GitHub Action 의존 제거 Some checks failed Client CI/CD / test (push) Waiting to run Details Client CI/CD / deploy (push) Has been cancelled Details actions/setup-node → curl + apt-get 직접 설치 docker/login-action + build-push-action → docker CLI 직접 사용 appleboy/ssh-action → ssh 직접 실행 Gitea runner가 github.com에서 action clone 실패하는 문제 해결. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-19 16:40:30 +09:00
tolelom	4e3a01428a	fix: SSAFY OAuth 로그인 수정 및 API 클라이언트 안정성 개선 (8건) Some checks failed Client CI/CD / test (push) Waiting to run Details Client CI/CD / deploy (push) Has been cancelled Details - SSAFY OAuth state 파라미터 전달 추가 (로그인 불능 해결) - POST/PUT/DELETE 5xx 및 네트워크 에러 재시도 방지 (멱등 요청만 재시도) - UserAdmin 페이지네이션 추가 (offset/limit) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-18 23:26:40 +09:00
tolelom	ae013acd2d	fix: DownloadAdmin.test.jsx 미사용 waitFor import 제거 (ESLint) Some checks failed Client CI/CD / test (push) Failing after 12m21s Details Client CI/CD / deploy (push) Has been cancelled Details Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-18 17:33:07 +09:00
tolelom	dcb2d1847d	ci: Gitea 환경으로 전환 (git.tolelom.xyz 레지스트리) - Docker registry: ghcr.io → git.tolelom.xyz - 로그인: GITEA_TOKEN 사용 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-18 17:25:27 +09:00
tolelom	daeaaca902	ci: npm test 추가 + Docker GHCR 빌드/푸시 + SSH 배포 추가 - test job: lint + vitest + build - docker job: main 머지 시 nginx 이미지 빌드/푸시 - deploy job: SSH로 docker compose pull web && up Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-18 17:21:55 +09:00
tolelom	b2fe4519f8	fix: Vitest 4.x + jsdom 28 localStorage.clear 호환성 수정 Vitest 4.x가 jsdom에 --localstorage-file을 빈 경로로 전달할 때 localStorage가 .clear()가 없는 stub 객체가 되는 문제 수정. setup.js에서 Storage 전체 구현체로 폴백. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-18 17:11:56 +09:00
tolelom	2cea340163	feat: ErrorBoundary 개선 + admin CSS 모듈화 - ErrorBoundary에 에러 유형/메시지 표시 + 다시 시도/새로고침 버튼 추가 - admin 컴포넌트 CSS Modules 전환 (클래스명 충돌 방지) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-18 16:59:11 +09:00
tolelom	eaa3319c5d	feat: 에러 처리 개선 + 커스텀 확인 모달 + 관리자 테스트 - 에러 코드 기반 한국어 매핑 (8개 코드, parseError 개선) - window.confirm → 커스텀 ConfirmDialog (다크 테마, Promise 기반) - launch URL 파라미터 ticket → token 통일 - 관리자 테스트 27개 추가 (공지사항 12 + 다운로드 6 + 유저 9) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-18 16:44:04 +09:00
tolelom	24cbc54a96	ci: GitHub Actions 워크플로우 추가 Node.js lint + build 자동화 (push/PR on main) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-18 10:56:56 +09:00
tolelom	42567ab6e4	feat: 폼 유효성 피드백 + 모바일 반응형 폼 검증: - RegisterPage: 아이디 실시간 검증, 비밀번호 강도, 확인 일치 - LoginPage: aria-describedby 접근성 개선 반응형: - 768px 이하 레이아웃 최적화, 터치 타겟 44px Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-18 10:52:17 +09:00
tolelom	555749b953	feat: 보안 + UX 개선 보안: - SSAFY OAuth URL https 스킴 검증 - CSRF 방어 X-Requested-With 헤더 추가 - 업로드 에러 상태코드별 메시지 분기 (413, 409, 5xx) UX: - Admin 페이지 Toast 알림 통합 - API 에러 메시지 한글화 (localizeError) - og:title, og:description 메타 태그 추가 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-18 10:37:49 +09:00
				`@@ -1 +0,0 @@`
				`/* This file is deprecated. Both LoginPage and RegisterPage now use AuthPage.css */`