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>

.dockerignore

@@ -0,0 +1,17 @@
+node_modules/
+dist/
+.git/
+.gitignore
+
+# 환경 변수 (빌드 시 --build-arg로 주입)
+.env
+.env.*
+
+# 에디터 / OS
+.vscode/
+.idea/
+*.DS_Store
+Thumbs.db
+
+# 로그
+npm-debug.log*

.env.development

@@ -0,0 +1 @@
+VITE_API_BASE_URL=

.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
+        run: |
-        with:
+          if ! command -v node &>/dev/null || [ "$(node -v | cut -d. -f1 | tr -d v)" -lt 22 ]; then
-          node-version: '22'
+            curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
-          cache: 'npm'
+            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
+        run: |
-        with:
+          mkdir -p ~/.ssh
-          host: ${{ secrets.SERVER_HOST }}
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/deploy_key
-          username: ${{ secrets.SERVER_USER }}
+          chmod 600 ~/.ssh/deploy_key
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          ssh -o StrictHostKeyChecking=no -i ~/.ssh/deploy_key \
-          port: 22
+            ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }} \
-          script: |
+            'set -e &&
-            set -e
+            export PATH=$PATH:/usr/local/bin:/opt/homebrew/bin:$HOME/.docker/bin &&
-            export PATH=$PATH:/usr/local/bin:/opt/homebrew/bin:$HOME/.docker/bin
+            cd /tmp &&
-            cd /tmp
+            rm -rf a301-client &&
-            rm -rf a301-client
+            git clone --quiet https://tolelom:${{ secrets.GIT_TOKEN }}@git.tolelom.xyz/A301/a301_client.git a301-client &&
-            # Suppress token from logs
+            cd a301-client &&
-            set +x
+            docker build --build-arg VITE_API_BASE_URL=${{ secrets.VITE_API_BASE_URL }} -t a301-client:latest . &&
-            git clone --quiet https://tolelom:${{ secrets.GIT_TOKEN }}@git.tolelom.xyz/A301/a301_client.git a301-client 2>/dev/null
+            cd ~/server &&
-            set -x
+            docker compose up -d --force-recreate a301-client &&
-            cd a301-client
+            rm -rf /tmp/a301-client'
-            docker build --no-cache --build-arg VITE_API_BASE_URL=${{ secrets.VITE_API_BASE_URL }} -t a301-client:latest .
+          rm -f ~/.ssh/deploy_key
-            cd ~/server
-            docker compose up -d --force-recreate a301-client
-            rm -rf /tmp/a301-client

.github/workflows/ci.yml

@@ -1,76 +0,0 @@
-name: CI/CD
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  # ── 1. 린트 + 테스트 + 빌드 ────────────────────────────────────────────────
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-
-      - name: Lint
-        run: npm run lint
-
-      - name: Test
-        run: npm test
-
-      - name: Build
-        run: npm run build
-        env:
-          VITE_API_BASE_URL: https://a301.api.tolelom.xyz
-
-  # ── 2. Docker 빌드 & Gitea 레지스트리 푸시 (main 머지 시만) ───────────────
-  docker:
-    needs: test
-    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: docker/setup-buildx-action@v3
-
-      - uses: docker/login-action@v3
-        with:
-          registry: git.tolelom.xyz
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITEA_TOKEN }}
-
-      - uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: git.tolelom.xyz/${{ github.repository_owner }}/a301-web:latest
-          platforms: linux/arm64
-          build-args: |
-            VITE_API_BASE_URL=https://a301.api.tolelom.xyz
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-  # ── 3. 서버 배포 ──────────────────────────────────────────────────────────
-  deploy:
-    needs: docker
-    runs-on: ubuntu-latest
-    steps:
-      - uses: appleboy/ssh-action@v1
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          script: |
-            export PATH=$PATH:/usr/local/bin:/opt/homebrew/bin:$HOME/.docker/bin
-            cd ~/server
-            docker compose pull web
-            docker compose up -d web

.gitignore

@@ -23,3 +23,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.superpowers/

Dockerfile

@@ -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

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 추가 |

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: {

index.html

@@ -4,8 +4,14 @@
     <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>

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;

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",
+      "version": "0.21.2",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.2.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
-      "integrity": "sha512-YF+fE6LV4v5MGWRGj7G404/OZzGNepVF8fxk7jqmqo3lrza7a0uUcDnROGRBG1WFC1omYUS/Wp1f42i0M+3Q3A==",
+      "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",
+      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
-      "integrity": "sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==",
+      "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",
+      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
-      "integrity": "sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==",
+      "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",
+      "version": "9.39.4",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.3.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
-      "integrity": "sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1085,27 +1122,27 @@
       }
     },
     "node_modules/@eslint/object-schema": {
-      "version": "3.0.2",
+      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
-      "integrity": "sha512-HOy56KJt48Bx8KmJ+XGQNSUMT/6dZee/M54XyUyuvTvPXJmsERRvBchsUVx1UMe1WwIH49XLAczNC7V2INsuUw==",
+      "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",
+      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
-      "integrity": "sha512-bIZEUzOI1jkhviX2cp5vNyXQc6olzb2ohewQubuYlMXZ2Q/XjBO0x0XhGPvc9fjSIiUN0vw+0hq53BJ4eQSJKQ==",
+      "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",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT"
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
     },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.0",
@@ -2049,16 +2083,14 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.3",
+      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
-      "integrity": "sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^4.0.2"
+        "balanced-match": "^1.0.0",
-      },
+        "concat-map": "0.0.1"
-      "engines": {
-        "node": "18 || 20 || >=22"
       }
     },
     "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",
+      "version": "9.39.4",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
-      "integrity": "sha512-uYixubwmqJZH+KLVYIVKY1JQt7tysXhtj21WSvjcSmU5SVNzMus1bgLe+pAt816yQ8opKfheVVoPLqvVMGejYw==",
+      "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-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.23.2",
+        "@eslint/config-array": "^0.21.2",
-        "@eslint/config-helpers": "^0.5.2",
+        "@eslint/config-helpers": "^0.4.2",
-        "@eslint/core": "^1.1.0",
+        "@eslint/core": "^0.17.0",
-        "@eslint/plugin-kit": "^0.6.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-scope": "^8.4.0",
-        "eslint-visitor-keys": "^5.0.1",
+        "eslint-visitor-keys": "^4.2.1",
-        "espree": "^11.1.1",
+        "espree": "^10.4.0",
-        "esquery": "^1.7.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",
+      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
-      "integrity": "sha512-GaUN0sWim5qc8KVErfPBWmc31LEsOkrUJbvJZV+xuL3u2phMUK4HIvXlWAakfC8W4nzlK+chPEAkYOYb5ZScIw==",
+      "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",
+      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "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",
+      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-11.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
-      "integrity": "sha512-AVHPqQoZYc+RUM4/3Ly5udlZY/U4LS8pIG05jEjWM2lQMU/oaZ7qshzAl2YP1tfNmXfftH3ohurfwNAug+MnsQ==",
+      "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",
+      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "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",
+      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-      "integrity": "sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==",
+      "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"
+        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "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",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "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",
+      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

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",

src/App.jsx

@@ -9,7 +9,9 @@ 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();
@@ -26,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 />;
@@ -43,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={
@@ -51,13 +67,7 @@ function AppRoutes() {
             </AdminRoute>
           }
         />
-        <Route path="*" element={
+        <Route path="*" element={<NotFoundPage />} />
-          <div style={{ padding: '2rem', textAlign: 'center', color: '#aaa' }}>
-            <h2>404</h2>
-            <p>페이지를 찾을 수 없습니다</p>
-            <a href="/" style={{ color: '#4ea8de' }}>홈으로 돌아가기</a>
-          </div>
-        } />
       </Routes>
     </ErrorBoundary>
   );

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;
 }
-

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 });
+}

src/api/client.js

@@ -1,6 +1,10 @@
 const BASE = import.meta.env.VITE_API_BASE_URL || '';
 
-/** 네트워크 에러 메시지를 한국어로 변환 */
+/**
+ * 네트워크 에러 메시지를 한국어로 변환
+ * @param {string} message
+ * @returns {string}
+ */
 function localizeError(message) {
   if (typeof message !== 'string') return message;
   if (message.includes('Failed to fetch')) return '서버에 연결할 수 없습니다';
@@ -9,9 +13,14 @@ function localizeError(message) {
   return message;
 }
 
-// 동시 401 발생 시 refresh를 한 번만 실행하기 위한 Promise 공유
 let refreshingPromise = null;
 
+/**
+ * 리프레시 토큰으로 액세스 토큰 갱신
+ * 동시 401 발생 시 refresh를 한 번만 실행하기 위해 Promise를 공유
+ * @returns {Promise<string>} 새 액세스 토큰
+ * @throws {Error} refresh_failed — 리프레시 토큰 만료 또는 서버 오류
+ */
 export async function tryRefresh() {
   if (refreshingPromise) return refreshingPromise;
 
@@ -40,7 +49,7 @@ async function doFetch(path, options, token) {
   return fetch(BASE + path, { ...options, headers, credentials: 'include' });
 }
 
-/** 에러 코드별 기본 한국어 메시지 */
+/** @type {Record<string, string>} 에러 코드별 기본 한국어 메시지 */
 const ERROR_MESSAGES = {
   bad_request: '잘못된 요청입니다',
   unauthorized: '로그인이 필요합니다',
@@ -66,21 +75,32 @@ async function parseError(res) {
   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);
     }
@@ -111,8 +131,8 @@ export async function apiFetch(path, options = {}, _retryCount = 0) {
     }
   }
 
-  // 5xx 서버 에러 — 최대 2회 재시도 (exponential backoff)
+  // 5xx 서버 에러 — 멱등 요청만 최대 2회 재시도 (exponential backoff)
-  if (res.status >= 500 && _retryCount < 2) {
+  if (res.status >= 500 && isIdempotent && _retryCount < 2) {
     await delay(1000 * (_retryCount + 1));
     return apiFetch(path, options, _retryCount + 1);
   }

src/api/users.js

@@ -1,7 +1,8 @@
 import { apiFetch } from './client';
 
-export function getUsers() {
+export function getUsers(offset = 0, limit = 20) {
-  return apiFetch('/api/users');
+  const params = new URLSearchParams({ offset, limit });
+  return apiFetch(`/api/users?${params}`);
 }
 
 export function updateUserRole(id, role) {

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;
+  padding-bottom: 0;
-  border-bottom: 1px solid rgba(186, 205, 176, 0.15);
+  border-bottom: none;
+  text-align: center;
 }
 
 .announcement-list {

src/components/DownloadSection.css

@@ -1,9 +1,12 @@
 .download-section {
-  background: rgba(186, 205, 176, 0.06);
+  position: relative;
-  border: 1px solid rgba(186, 205, 176, 0.12);
+  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 {

src/components/admin/DownloadAdmin.jsx

@@ -1,33 +1,24 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { getDownloadInfo } from '../../api/download';
-import { useToast } from '../toast/useToast';
 import UploadForm from './UploadForm';
 import s from './AdminCommon.module.css';
 
 export default function DownloadAdmin() {
-  const toast = useToast();
   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) => {
+      .then((data) => setInfo(data))
-        setInfo(data);
+      .catch(() => setLoadError('배포 정보를 불러올 수 없습니다.'))
-        setLoadError('');
-      })
-      .catch((err) => {
-        console.error('다운로드 정보 로드 실패:', err);
-        setLoadError('배포 정보를 불러올 수 없습니다.');
-        toast.error('배포 정보를 불러올 수 없습니다.');
-      })
       .finally(() => setLoading(false));
-  };
+  }, []);
 
-  // eslint-disable-next-line react-hooks/set-state-in-effect -- initial data fetch on mount
+  // eslint-disable-next-line react-hooks/set-state-in-effect
-  useEffect(() => { load(); }, []);
+  useEffect(() => { load(); }, [load]);
 
   if (loading) {
     return (

src/components/admin/UploadForm.jsx

@@ -22,10 +22,11 @@ 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) {
@@ -35,28 +36,16 @@ export default function UploadForm({ title, hint, accept, endpoint, onSuccess })
         if (fileInputRef.current) fileInputRef.current.value = '';
         setProgress(0);
       } else if (status === 413) {
-        const msg = '파일 크기가 너무 큽니다. 더 작은 파일을 선택해주세요.';
+        fail('파일 크기가 너무 큽니다. 더 작은 파일을 선택해주세요.');
-        setError(msg);
-        toast.error(msg);
       } else if (status === 409) {
-        const msg = '동일한 파일이 이미 존재합니다.';
+        fail('동일한 파일이 이미 존재합니다.');
-        setError(msg);
-        toast.error(msg);
       } else if (status >= 500) {
-        const msg = '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
+        fail('서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
-        setError(msg);
-        toast.error(msg);
       } else {
-        const msg = body.error || '업로드에 실패했습니다.';
+        fail(body.error || '업로드에 실패했습니다.');
-        setError(msg);
-        toast.error(msg);
-        setProgress(0);
       }
     } catch {
-      const msg = '네트워크 오류가 발생했습니다.';
+      fail('네트워크 오류가 발생했습니다.');
-      setError(msg);
-      toast.error(msg);
-      setProgress(0);
     } finally {
       setUploading(false);
     }

src/components/admin/UserAdmin.jsx

@@ -1,31 +1,36 @@
-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 { 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()
+    getUsers(off, PAGE_SIZE)
-      .then(setUsers)
+      .then((data) => {
-      .catch((err) => {
+        setUsers(data);
-        console.error('유저 목록 로드 실패:', err);
+        setHasMore(data.length === PAGE_SIZE);
-        setFetchError(true);
       })
+      .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';
@@ -79,6 +84,30 @@ export default function UserAdmin() {
           </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>
   );
 }

src/components/confirm/ConfirmProvider.jsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useRef } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { ConfirmContext } from './confirmContextValue';
 import './Confirm.css';
 
@@ -25,10 +25,8 @@ export function ConfirmProvider({ children }) {
     setDialog(null);
   }, []);
 
-  const value = useMemo(() => confirm, [confirm]);
-
   return (
-    <ConfirmContext.Provider value={value}>
+    <ConfirmContext.Provider value={confirm}>
       {children}
       {dialog && (
         <div className="confirm-overlay" onClick={handleCancel}>

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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;
+  }
+}

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>
+  );
+}

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>
+    </>
+  );
+}

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: payload?.role || 'user' };
-    return { token, username, role };
   });
 
+  // 토큰 저장 + 유저 상태 업데이트 공통 처리 (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);
+    applySession(data);
-    localStorage.setItem('username', data.username);
+  }, [applySession]);
-    const decoded = decodeTokenPayload(data.token);
-    const role = decoded?.role || 'user';
-    setUser({ token: data.token, username: data.username, role });
-  }, []);
 
   // SSAFY OAuth 콜백에서 받은 토큰으로 로그인 처리
   const setUserFromSSAFY = useCallback((data) => {
-    localStorage.setItem('token', data.token);
+    applySession(data);
-    localStorage.setItem('username', data.username);
+  }, [applySession]);
-    const decoded = decodeTokenPayload(data.token);
-    const role = decoded?.role || 'user';
-    setUser({ token: data.token, username: data.username, role });
-  }, []);
 
   // 로컬 세션만 정리 (토큰 만료·강제 로그아웃 시)
   const clearSession = useCallback(() => {

src/index.css

@@ -31,3 +31,53 @@ 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); }
+}

src/pages/AdminPage.css

@@ -96,6 +96,19 @@
   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 {

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}`}>

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;

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;
+  min-height: 100vh;
-  background:
+  background: url('/images/bg_loading.webp') center/cover no-repeat;
-    linear-gradient(135deg, rgba(46, 44, 47, 0.85), rgba(46, 44, 47, 0.6)),
-    linear-gradient(135deg, #2E2C2F 0%, #3a3a3a 50%, #2E2C2F 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -94,28 +115,62 @@
   content: '';
   position: absolute;
   inset: 0;
-  background:
+  background: linear-gradient(
-    radial-gradient(ellipse at 30% 40%, rgba(186, 205, 176, 0.12) 0%, transparent 60%),
+    to bottom,
-    radial-gradient(ellipse at 70% 60%, rgba(186, 205, 176, 0.06) 0%, transparent 50%);
+    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;
+  font-size: 1.1rem;
-  color: rgba(255, 255, 255, 0.5);
+  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 */
@@ -128,19 +183,23 @@
 /* Mobile responsive */
 @media (max-width: 768px) {
   .home-header {
-    flex-direction: column;
-    gap: 12px;
     padding: 12px 16px;
-    text-align: center;
+  }
+
+  .home-header.scrolled {
+    padding: 8px 16px;
   }
 
   .home-user {
-    width: 100%;
+    gap: 8px;
-    justify-content: center;
   }
 
   .hero-banner {
-    height: 180px;
+    min-height: 80vh;
+  }
+
+  .hero-logo {
+    width: 120px;
   }
 
   .hero-title {
@@ -149,6 +208,7 @@
 
   .hero-desc {
     font-size: 0.85rem;
+    letter-spacing: 0.15em;
   }
 
   .home-main {

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">
+      <header className={`home-header${scrolled ? ' scrolled' : ''}`}>
-        <h1 className="home-logo">One of the plans</h1>
+        <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>
+          <img src="/images/logo.webp" alt="" className="hero-logo" />
-          <p className="hero-desc">Unity 3D 멀티플레이어 테스트에 참여하세요</p>
+          <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>

src/pages/LoginPage.css

@@ -1 +0,0 @@
-/* This file is deprecated. Both LoginPage and RegisterPage now use AuthPage.css */

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('');
@@ -84,17 +96,7 @@ export default function LoginPage() {
         <button
           type="button"
           className="btn-ssafy"
-          onClick={async () => {
+          onClick={handleSSAFYLogin}
-            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을 가져올 수 없습니다.');
-            }
-          }}
         >
           SSAFY 계정으로 로그인
         </button>

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>
+  );
+}

src/pages/RegisterPage.jsx

@@ -5,6 +5,13 @@ 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('');
@@ -18,13 +25,6 @@ export default function RegisterPage() {
   const showUsernameError = usernameTouched && username.length > 0 && !isUsernameValid;
   const showUsernameValid = usernameTouched && username.length > 0 && isUsernameValid;
 
-  const 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' };
-  };
-
   const passwordStrength = getPasswordStrength(password);
   const confirmMismatch = confirm.length > 0 && password !== confirm;
   const confirmMatch = confirm.length > 0 && password === confirm;
@@ -34,7 +34,7 @@ export default function RegisterPage() {
     setError('');
 
     const trimmed = username.trim().toLowerCase();
-    if (!trimmed) {
+    if (trimmed.length === 0) {
       setError('아이디를 입력해주세요.');
       return;
     }
@@ -42,7 +42,7 @@ export default function RegisterPage() {
       setError('아이디는 3자 이상이어야 합니다.');
       return;
     }
-    if (!/^[a-z0-9_-]+$/.test(trimmed)) {
+    if (!USERNAME_REGEX.test(trimmed)) {
       setError('아이디는 영문 소문자, 숫자, _, -만 사용 가능합니다.');
       return;
     }
@@ -70,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>
@@ -127,17 +128,15 @@ export default function RegisterPage() {
               className={confirmMatch ? 'input-valid' : confirmMismatch ? 'input-invalid' : ''}
               aria-describedby="confirm-hint"
             />
-            {confirmMismatch && (
+            <span id="confirm-hint" className={`input-hint ${confirmMismatch ? 'input-hint-error' : confirmMatch ? 'input-hint-success' : ''}`}>
-              <span id="confirm-hint" className="input-hint input-hint-error">비밀번호가 일치하지 않습니다</span>
+              {confirmMismatch && '비밀번호가 일치하지 않습니다'}
-            )}
+              {confirmMatch && `비밀번호가 일치합니다 \u2713`}
-            {confirmMatch && (
+            </span>
-              <span id="confirm-hint" className="input-hint input-hint-success">비밀번호가 일치합니다 \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>

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>

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;
+  }
+}

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>
+  );
+}

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',