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

- .btn-game에 display:inline-block, text-decoration:none 추가 → HomePage inline style 제거 - LoginPage.css 삭제 (deprecated, 임포트 없음) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
refactor: pages/wallet 리팩토링 — CSS 분리, 유효성 검사 개선, 테스트 통과
2026-04-12 20:01:30 +09:00 · 2026-04-12 19:51:55 +09:00 · 2026-04-12 19:17:17 +09:00 · 2026-04-12 19:11:23 +09:00 · 2026-04-12 18:47:26 +09:00 · 2026-04-12 16:57:54 +09:00
54 changed files with 2059 additions and 332 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,17 @@
+node_modules/
+dist/
+.git/
+.gitignore
+
+# 환경 변수 (빌드 시 --build-arg로 주입)
+.env
+.env.*
+
+# 에디터 / OS
+.vscode/
+.idea/
+*.DS_Store
+Thumbs.db
+
+# 로그
+npm-debug.log*
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_BASE_URL=
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -26,7 +26,7 @@ jobs:
          node -v && npm -v

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

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

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

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

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

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

 export async function deleteAnnouncement(id) {
  return apiFetch(`/api/announcements/${id}`, { method: 'DELETE' });
-}
+}
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -32,9 +32,12 @@ export async function ssafyCallback(code, state) {
 // 토큰을 리프레시하고 새 access token을 반환 (동시 호출 방지 포함)
 export { tryRefresh as refreshToken } from './client';

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

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

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

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

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

 .download-title {
--- a/src/components/DownloadSection.jsx
+++ b/src/components/DownloadSection.jsx
@@ -114,4 +114,4 @@ export default function DownloadSection() {
      </div>
    </section>
  );
-}
+}
--- a/src/components/admin/DownloadAdmin.jsx
+++ b/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) => {
-        setInfo(data);
-        setLoadError('');
-      })
-      .catch((err) => {
-        console.error('다운로드 정보 로드 실패:', err);
-        setLoadError('배포 정보를 불러올 수 없습니다.');
-        toast.error('배포 정보를 불러올 수 없습니다.');
-      })
+      .then((data) => setInfo(data))
+      .catch(() => setLoadError('배포 정보를 불러올 수 없습니다.'))
      .finally(() => setLoading(false));
-  };
+  }, []);

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

  if (loading) {
    return (
--- a/src/components/admin/UploadForm.jsx
+++ b/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 = '파일 크기가 너무 큽니다. 더 작은 파일을 선택해주세요.';
-        setError(msg);
-        toast.error(msg);
+        fail('파일 크기가 너무 큽니다. 더 작은 파일을 선택해주세요.');
      } else if (status === 409) {
-        const msg = '동일한 파일이 이미 존재합니다.';
-        setError(msg);
-        toast.error(msg);
+        fail('동일한 파일이 이미 존재합니다.');
      } else if (status >= 500) {
-        const msg = '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
-        setError(msg);
-        toast.error(msg);
+        fail('서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
      } else {
-        const msg = body.error || '업로드에 실패했습니다.';
-        setError(msg);
-        toast.error(msg);
-        setProgress(0);
+        fail(body.error || '업로드에 실패했습니다.');
      }
    } catch {
-      const msg = '네트워크 오류가 발생했습니다.';
-      setError(msg);
-      toast.error(msg);
-      setProgress(0);
+      fail('네트워크 오류가 발생했습니다.');
    } finally {
      setUploading(false);
    }
@@ -93,4 +82,4 @@ export default function UploadForm({ title, hint, accept, endpoint, onSuccess })
      </div>
    </form>
  );
-}
+}
--- a/src/components/admin/UserAdmin.jsx
+++ b/src/components/admin/UserAdmin.jsx
@@ -1,12 +1,13 @@
-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 PAGE_SIZE = 20;
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [fetchError, setFetchError] = useState(false);
@@ -16,7 +17,7 @@ export default function UserAdmin() {
  const toast = useToast();
  const confirm = useConfirm();

-  const load = (off = offset) => {
+  const load = useCallback((off = 0) => {
    setLoading(true);
    setFetchError(false);
    getUsers(off, PAGE_SIZE)
@@ -24,14 +25,12 @@ export default function UserAdmin() {
        setUsers(data);
        setHasMore(data.length === PAGE_SIZE);
      })
-      .catch((err) => {
-        console.error('유저 목록 로드 실패:', err);
-        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(0); }, []);
+  }, []);
+
+  // 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';
@@ -86,10 +85,26 @@ export default function UserAdmin() {
        ))}
      </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
+          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
+          className={s.btnSecondary}
+          disabled={!hasMore}
+          onClick={() => {
+            const next = offset + PAGE_SIZE;
+            setOffset(next);
+            load(next);
+          }}
+        >
          다음
        </button>
      </div>
--- a/src/components/confirm/ConfirmProvider.jsx
+++ b/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}>
--- a/src/components/wallet/AssetsTab.jsx
+++ b/src/components/wallet/AssetsTab.jsx
@@ -0,0 +1,159 @@
+import { useState, useEffect, useCallback, Fragment } from 'react';
+import { getAssets, getAsset, listOnMarket } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+
+export default function AssetsTab() {
+  const toast = useToast();
+  const [assets, setAssets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [expanded, setExpanded] = useState(null);
+  const [listingAsset, setListingAsset] = useState(null);
+  const [listingPrice, setListingPrice] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    getAssets()
+      .then((result) => {
+        const ids = result?.ids || result;
+        if (!ids || !Array.isArray(ids) || ids.length === 0) {
+          setAssets([]);
+          return;
+        }
+        return Promise.all(
+          ids.map((id) =>
+            getAsset(id)
+              .then((data) => ({ ...data, _loaded: true }))
+              .catch(() => ({ id, _loaded: false }))
+          )
+        ).then(setAssets);
+      })
+      .catch(() => {
+        toast.error('자산 목록을 불러오지 못했습니다.');
+      })
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const toggleExpand = (id) => {
+    setExpanded((prev) => (prev === id ? null : id));
+    setListingAsset(null);
+    setListingPrice('');
+  };
+
+  const handleList = async (assetId) => {
+    const price = Number(listingPrice);
+    if (!price || price <= 0) return;
+    setSubmitting(true);
+    try {
+      await listOnMarket(assetId, price);
+      toast.success('마켓에 등록되었습니다.');
+      setAssets((prev) =>
+        prev.map((a) => (a.id === assetId ? { ...a, active_listing_id: 'pending' } : a))
+      );
+      setListingAsset(null);
+      setListingPrice('');
+    } catch (err) {
+      toast.error(err.message || '마켓 등록에 실패했습니다.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+  if (assets.length === 0) return <div className="wallet-empty">보유 자산이 없습니다</div>;
+
+  return (
+    <div>
+      {assets.map((asset) => {
+        const isListed = !!asset.active_listing_id;
+        return (
+          <div key={asset.id} className="asset-item">
+            <div className="asset-header" onClick={() => toggleExpand(asset.id)}>
+              <div>
+                {asset._loaded ? (
+                  <>
+                    <strong style={{ color: '#fff' }}>{asset.template_id || '자산'}</strong>
+                    <span style={{ marginLeft: 12, fontSize: '0.8rem', opacity: 0.4 }}>#{asset.id}</span>
+                  </>
+                ) : (
+                  <span style={{ color: '#e57373' }}>로드 실패 (#{asset.id})</span>
+                )}
+              </div>
+              {asset._loaded && (
+                <span className={`wallet-tag ${asset.tradeable ? 'wallet-tag-ok' : 'wallet-tag-no'}`}>
+                  {asset.tradeable ? '거래 가능' : '거래 불가'}
+                </span>
+              )}
+            </div>
+
+            {expanded === asset.id && asset._loaded && (
+              <div className="asset-detail">
+                {/* 속성 */}
+                {asset.properties && Object.keys(asset.properties).length > 0 && (
+                  <div className="asset-props">
+                    {Object.entries(asset.properties).map(([k, v]) => (
+                      <Fragment key={k}>
+                        <span className="asset-prop-key">{k}</span>
+                        <span className="asset-prop-val">{String(v)}</span>
+                      </Fragment>
+                    ))}
+                  </div>
+                )}
+
+                {/* 마켓 등록 상태 */}
+                <div style={{ marginTop: 12 }}>
+                  {isListed ? (
+                    <span className="wallet-tag wallet-tag-listed">마켓 등록됨</span>
+                  ) : (
+                    <span className="wallet-tag wallet-tag-no">미등록</span>
+                  )}
+                </div>
+
+                {/* 마켓 등록 버튼 */}
+                {!isListed && asset.tradeable && (
+                  <div style={{ marginTop: 12 }}>
+                    {listingAsset === asset.id ? (
+                      <div style={{ display: 'flex', gap: 8 }}>
+                        <input
+                          type="number"
+                          className="wallet-input"
+                          placeholder="가격 (TOL)"
+                          value={listingPrice}
+                          onChange={(e) => setListingPrice(e.target.value)}
+                          min="1"
+                          style={{ width: 140 }}
+                        />
+                        <button
+                          className="btn-primary"
+                          disabled={submitting || !listingPrice}
+                          onClick={() => handleList(asset.id)}
+                        >
+                          {submitting ? '처리 중...' : '등록'}
+                        </button>
+                        <button
+                          className="btn-copy"
+                          onClick={() => { setListingAsset(null); setListingPrice(''); }}
+                        >
+                          취소
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        className="btn-primary"
+                        onClick={(e) => { e.stopPropagation(); setListingAsset(asset.id); }}
+                      >
+                        마켓에 등록
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
--- a/src/components/wallet/InventoryTab.jsx
+++ b/src/components/wallet/InventoryTab.jsx
@@ -0,0 +1,45 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getInventory } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+
+export default function InventoryTab() {
+  const toast = useToast();
+  const [inventory, setInventory] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    getInventory()
+      .then(setInventory)
+      .catch(() => toast.error('인벤토리를 불러오지 못했습니다.'))
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  // eslint-disable-next-line react-hooks/set-state-in-effect
+  useEffect(() => { load(); }, [load]);
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+
+  const slots = inventory?.slots;
+  const entries = slots ? Object.entries(slots) : [];
+
+  if (entries.length === 0) return <div className="wallet-empty">인벤토리가 비어있습니다</div>;
+
+  return (
+    <div>
+      {entries.map(([slotName, assetId]) => {
+        const isEmpty = !assetId;
+        return (
+          <div key={slotName} className={`inv-slot${isEmpty ? ' inv-slot-empty' : ''}`}>
+            <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '0.85rem' }}>
+              {slotName}
+            </span>
+            <span style={{ color: isEmpty ? 'rgba(255,255,255,0.25)' : '#fff', fontSize: '0.9rem' }}>
+              {isEmpty ? '비어있음' : assetId}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
--- a/src/components/wallet/MarketTab.jsx
+++ b/src/components/wallet/MarketTab.jsx
@@ -0,0 +1,142 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getMarketListings, getListing, getWallet, buyFromMarket, cancelListing } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+import { useConfirm } from '../confirm/useConfirm';
+
+function truncateAddr(addr) {
+  if (!addr || addr.length <= 12) return addr || '';
+  return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+}
+
+export default function MarketTab() {
+  const toast = useToast();
+  const confirm = useConfirm();
+  const [listings, setListings] = useState([]);
+  const [myPubKey, setMyPubKey] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState('all');
+  const [processing, setProcessing] = useState(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    Promise.all([getMarketListings(), getWallet()])
+      .then(([result, w]) => {
+        const ids = result?.ids || result;
+        setMyPubKey(w?.pubKeyHex || '');
+        if (!ids || !Array.isArray(ids) || ids.length === 0) {
+          setListings([]);
+          return;
+        }
+        return Promise.all(
+          ids.map((id) =>
+            getListing(id)
+              .then((data) => ({ ...data, _loaded: true }))
+              .catch(() => ({ id, _loaded: false }))
+          )
+        ).then((items) => setListings(items.filter((l) => l._loaded)));
+      })
+      .catch(() => {
+        toast.error('마켓 정보를 불러오지 못했습니다.');
+      })
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const handleBuy = async (listing) => {
+    const ok = await confirm(
+      `${listing.asset_id}을(를) ${Number(listing.price).toLocaleString()} TOL에 구매하시겠습니까?`
+    );
+    if (!ok) return;
+    setProcessing(listing.id);
+    try {
+      await buyFromMarket(listing.id);
+      toast.success('구매가 완료되었습니다.');
+      load();
+    } catch (err) {
+      toast.error(err.message || '구매에 실패했습니다.');
+    } finally {
+      setProcessing(null);
+    }
+  };
+
+  const handleCancel = async (listing) => {
+    const ok = await confirm('리스팅을 취소하시겠습니까?');
+    if (!ok) return;
+    setProcessing(listing.id);
+    try {
+      await cancelListing(listing.id);
+      toast.success('리스팅이 취소되었습니다.');
+      load();
+    } catch (err) {
+      toast.error(err.message || '취소에 실패했습니다.');
+    } finally {
+      setProcessing(null);
+    }
+  };
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+
+  const filtered = filter === 'mine'
+    ? listings.filter((l) => l.seller === myPubKey)
+    : listings;
+
+  return (
+    <div>
+      <div className="market-filter">
+        <button
+          className={`market-filter-btn${filter === 'all' ? ' active' : ''}`}
+          onClick={() => setFilter('all')}
+        >
+          전체
+        </button>
+        <button
+          className={`market-filter-btn${filter === 'mine' ? ' active' : ''}`}
+          onClick={() => setFilter('mine')}
+        >
+          내 리스팅
+        </button>
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="wallet-empty">
+          {filter === 'mine' ? '내 리스팅이 없습니다' : '등록된 리스팅이 없습니다'}
+        </div>
+      ) : (
+        filtered.map((listing) => {
+          const isMine = listing.seller === myPubKey;
+          return (
+            <div key={listing.id} className="market-item">
+              <div>
+                <strong style={{ color: '#fff' }}>{listing.asset_id}</strong>
+                <span className="market-seller" style={{ marginLeft: 12 }}>
+                  {truncateAddr(listing.seller)}
+                </span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                <span className="market-price">{Number(listing.price).toLocaleString()} TOL</span>
+                {isMine ? (
+                  <button
+                    className="btn-danger-outline"
+                    disabled={processing === listing.id}
+                    onClick={() => handleCancel(listing)}
+                  >
+                    {processing === listing.id ? '처리 중...' : '취소'}
+                  </button>
+                ) : (
+                  <button
+                    className="btn-primary"
+                    disabled={processing === listing.id}
+                    onClick={() => handleBuy(listing)}
+                  >
+                    {processing === listing.id ? '처리 중...' : '구매'}
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}
--- a/src/components/wallet/WalletSummary.css
+++ b/src/components/wallet/WalletSummary.css
@@ -0,0 +1,51 @@
+.wallet-summary {
+  background: rgba(186, 205, 176, 0.06);
+  border: 1px solid rgba(186, 205, 176, 0.15);
+  border-radius: 10px;
+  padding: 20px 24px;
+  margin-bottom: 32px;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.wallet-summary:hover {
+  border-color: rgba(186, 205, 176, 0.3);
+  background: rgba(186, 205, 176, 0.09);
+}
+
+.wallet-summary-title {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 0.08em;
+  margin: 0 0 12px;
+}
+
+.wallet-summary-balance {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.wallet-summary-stats {
+  display: flex;
+  gap: 24px;
+  margin-top: 12px;
+}
+
+.wallet-summary-stat {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.wallet-summary-stat strong {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+@media (max-width: 768px) {
+  .wallet-summary-stats {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
--- a/src/components/wallet/WalletSummary.jsx
+++ b/src/components/wallet/WalletSummary.jsx
@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getBalance, getAssets, getInventory } from '../../api/chain';
+import './WalletSummary.css';
+
+export default function WalletSummary() {
+  const navigate = useNavigate();
+  const [balance, setBalance] = useState(null);
+  const [assetCount, setAssetCount] = useState(null);
+  const [equippedCount, setEquippedCount] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([
+      getBalance().catch(() => null),
+      getAssets().catch(() => null),
+      getInventory().catch(() => null),
+    ]).then(([b, assets, inv]) => {
+      setBalance(b?.balance != null ? b.balance : null);
+      const ids = assets?.ids || assets;
+      setAssetCount(Array.isArray(ids) ? ids.length : null);
+      const slots = inv?.slots;
+      setEquippedCount(
+        slots != null ? Object.values(slots).filter(Boolean).length : null
+      );
+    }).finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return null;
+
+  return (
+    <div className="wallet-summary" onClick={() => navigate('/wallet')}>
+      <h3 className="wallet-summary-title">내 지갑</h3>
+      <p className="wallet-summary-balance">
+        {balance != null ? `${Number(balance).toLocaleString()} TOL` : '-- TOL'}
+      </p>
+      <div className="wallet-summary-stats">
+        <span className="wallet-summary-stat">
+          보유 자산 <strong>{assetCount != null ? assetCount : '--'}</strong>
+        </span>
+        <span className="wallet-summary-stat">
+          장착 아이템 <strong>{equippedCount != null ? equippedCount : '--'}</strong>
+        </span>
+      </div>
+    </div>
+  );
+}
--- a/src/components/wallet/WalletTab.jsx
+++ b/src/components/wallet/WalletTab.jsx
@@ -0,0 +1,146 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getBalance, getWallet, exportWalletKey } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+
+function truncate(str, startLen = 4, endLen = 4) {
+  if (!str || str.length <= startLen + endLen + 3) return str || '';
+  return `${str.slice(0, startLen)}...${str.slice(-endLen)}`;
+}
+
+export default function WalletTab() {
+  const toast = useToast();
+  const [balance, setBalance] = useState(null);
+  const [wallet, setWallet] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const [password, setPassword] = useState('');
+  const [privateKey, setPrivateKey] = useState('');
+  const [exportError, setExportError] = useState('');
+  const [exporting, setExporting] = useState(false);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    Promise.all([getBalance(), getWallet()])
+      .then(([b, w]) => {
+        setBalance(b);
+        setWallet(w);
+      })
+      .catch(() => {
+        toast.error('지갑 정보를 불러오지 못했습니다.');
+      })
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  // 탭 이탈 시 개인키 초기화
+  useEffect(() => {
+    return () => {
+      setPrivateKey('');
+      setPassword('');
+      setExportError('');
+    };
+  }, []);
+
+  const copyToClipboard = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} 복사됨`);
+    } catch {
+      toast.error('복사에 실패했습니다.');
+    }
+  };
+
+  const handleExport = async (e) => {
+    e.preventDefault();
+    if (!password) return;
+    setExportError('');
+    setExporting(true);
+    try {
+      const data = await exportWalletKey(password);
+      setPrivateKey(data.privateKey);
+    } catch (err) {
+      if (err.status === 401) {
+        setExportError(err.message);
+      } else {
+        toast.error(err.message || '키 내보내기에 실패했습니다.');
+      }
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+
+  return (
+    <>
+      {/* 잔액 카드 */}
+      <div className="wallet-card">
+        <h3 className="wallet-card-title">TOL 잔액</h3>
+        <p className="wallet-balance">
+          {balance?.balance != null ? Number(balance.balance).toLocaleString() : '--'}
+        </p>
+      </div>
+
+      {/* 지갑 정보 */}
+      {wallet && (
+        <div className="wallet-card">
+          <h3 className="wallet-card-title">지갑 정보</h3>
+
+          <div style={{ marginBottom: 12 }}>
+            <div className="wallet-label">공개키</div>
+            <div className="wallet-row">
+              <span className="wallet-mono">{truncate(wallet.pubKeyHex, 4, 4)}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(wallet.pubKeyHex, '공개키')}>
+                복사
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <div className="wallet-label">주소</div>
+            <div className="wallet-row">
+              <span className="wallet-mono">{truncate(wallet.address, 8, 8)}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(wallet.address, '주소')}>
+                복사
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 키 내보내기 */}
+      <div className="wallet-card">
+        <h3 className="wallet-card-title">개인키 내보내기</h3>
+
+        {!privateKey ? (
+          <form onSubmit={handleExport} style={{ display: 'flex', gap: 8 }}>
+            <input
+              type="password"
+              className="wallet-input"
+              placeholder="비밀번호 입력"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              style={{ flex: 1 }}
+            />
+            <button type="submit" className="btn-primary" disabled={!password || exporting}>
+              {exporting ? '처리 중...' : '내보내기'}
+            </button>
+          </form>
+        ) : (
+          <div>
+            <div className="wallet-row" style={{ marginBottom: 8 }}>
+              <span className="wallet-mono" style={{ flex: 1 }}>{privateKey}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(privateKey, '개인키')}>
+                복사
+              </button>
+            </div>
+            <p className="wallet-warning">개인키를 안전하게 보관하세요</p>
+          </div>
+        )}
+
+        {exportError && <p className="wallet-error-text">{exportError}</p>}
+      </div>
+    </>
+  );
+}
--- a/src/context/AuthContext.jsx
+++ b/src/context/AuthContext.jsx
@@ -15,27 +15,26 @@ export function AuthProvider({ children }) {
    const username = localStorage.getItem('username');
    if (!token) return null;
    const payload = decodeTokenPayload(token);
-    const role = payload?.role || 'user';
-    return { token, username, role };
+    return { token, username, role: payload?.role || 'user' };
  });

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

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

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

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

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

+.login-logo {
+  max-width: 120px;
+  height: auto;
+  margin: 0 auto 16px;
+  display: block;
+}
+
 .login-back {
  display: block;
  text-align: center;
--- a/src/pages/HomePage.css
+++ b/src/pages/HomePage.css
@@ -3,21 +3,44 @@
  background-color: #2E2C2F;
 }

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

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

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

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

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

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

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

 /* Main content */
@@ -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%;
-    justify-content: center;
+    gap: 8px;
  }

  .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 {
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,20 +1,33 @@
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import DownloadSection from '../components/DownloadSection';
+import WalletSummary from '../components/wallet/WalletSummary';
 import AnnouncementBoard from '../components/AnnouncementBoard';
 import './HomePage.css';

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

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

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

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

+  const handleSSAFYLogin = async () => {
+    try {
+      const data = await getSSAFYLoginURL();
+      if (!data.url || !data.url.startsWith('https://')) {
+        throw new Error('유효하지 않은 로그인 URL입니다.');
+      }
+      window.location.href = data.url;
+    } catch {
+      setError('SSAFY 로그인 URL을 가져올 수 없습니다.');
+    }
+  };
+
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
@@ -84,17 +96,7 @@ export default function LoginPage() {
        <button
          type="button"
          className="btn-ssafy"
-          onClick={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을 가져올 수 없습니다.');
-            }
-          }}
+          onClick={handleSSAFYLogin}
        >
          SSAFY 계정으로 로그인
        </button>
--- a/src/pages/NotFoundPage.jsx
+++ b/src/pages/NotFoundPage.jsx
@@ -0,0 +1,11 @@
+import { Link } from 'react-router-dom';
+
+export default function NotFoundPage() {
+  return (
+    <div style={{ padding: '2rem', textAlign: 'center', color: '#aaa' }}>
+      <h2>404</h2>
+      <p>페이지를 찾을 수 없습니다</p>
+      <Link to="/" style={{ color: '#4ea8de' }}>홈으로 돌아가기</Link>
+    </div>
+  );
+}
--- a/src/pages/RegisterPage.jsx
+++ b/src/pages/RegisterPage.jsx
@@ -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 input-hint-error">비밀번호가 일치하지 않습니다</span>
-            )}
-            {confirmMatch && (
-              <span id="confirm-hint" className="input-hint input-hint-success">비밀번호가 일치합니다 \u2713</span>
-            )}
+            <span id="confirm-hint" className={`input-hint ${confirmMismatch ? 'input-hint-error' : confirmMatch ? 'input-hint-success' : ''}`}>
+              {confirmMismatch && '비밀번호가 일치하지 않습니다'}
+              {confirmMatch && `비밀번호가 일치합니다 \u2713`}
+            </span>
          </div>

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

-          <button type="submit" className="btn-login" disabled={loading}>
+          <button type="submit" className="btn-login btn-game" disabled={loading}>
            {loading ? '처리 중...' : '회원가입'}
          </button>
        </form>
--- a/src/pages/SSAFYCallbackPage.jsx
+++ b/src/pages/SSAFYCallbackPage.jsx
@@ -2,8 +2,9 @@ import { useEffect, useState, useRef } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import { ssafyCallback } from '../api/auth';
+import './AuthPage.css';

-// Inline styles are intentional for this simple callback/loading page — not worth a separate CSS file.
+// Inline styles are intentional for this simple callback/loading page — layout only, AuthPage.css handles buttons.
 export default function SSAFYCallbackPage() {
  const [error, setError] = useState('');
  const navigate = useNavigate();
@@ -39,7 +40,7 @@ export default function SSAFYCallbackPage() {
    return (
      <div style={{ textAlign: 'center', marginTop: '4rem' }}>
        <p style={{ color: '#e74c3c' }}>{error}</p>
-        <button onClick={() => navigate('/login', { replace: true })}>
+        <button className="btn-login" onClick={() => navigate('/login', { replace: true })}>
          로그인 페이지로 돌아가기
        </button>
      </div>
--- a/src/pages/WalletPage.css
+++ b/src/pages/WalletPage.css
@@ -0,0 +1,433 @@
+.wallet-page {
+  min-height: 100vh;
+  background-color: #2E2C2F;
+}
+
+.wallet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 32px;
+  border-bottom: 1px solid rgba(186, 205, 176, 0.1);
+}
+
+.wallet-header-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.wallet-home-link {
+  font-size: 0.85rem;
+  color: rgba(186, 205, 176, 0.6);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.wallet-home-link:hover {
+  color: #BACDB0;
+}
+
+.wallet-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.wallet-header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.wallet-username {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.btn-wallet-logout {
+  padding: 8px 16px;
+  background: transparent;
+  color: rgba(186, 205, 176, 0.7);
+  border: 1px solid rgba(186, 205, 176, 0.25);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-wallet-logout:hover {
+  background: rgba(186, 205, 176, 0.08);
+}
+
+.wallet-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 16px 32px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.wallet-tab {
+  padding: 10px 24px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.45);
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+  margin-bottom: -1px;
+}
+
+.wallet-tab:hover {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.wallet-tab.active {
+  color: #BACDB0;
+  border-bottom-color: #BACDB0;
+}
+
+.wallet-main {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 32px 24px 80px;
+}
+
+/* === Tab content shared styles === */
+
+.wallet-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(186, 205, 176, 0.12);
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 20px;
+}
+
+.wallet-card-title {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 0.08em;
+  margin: 0 0 12px;
+}
+
+.wallet-balance {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.wallet-mono {
+  font-family: monospace;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.7);
+  word-break: break-all;
+}
+
+.wallet-label {
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 4px;
+}
+
+.wallet-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.btn-copy {
+  padding: 4px 12px;
+  background: transparent;
+  color: rgba(186, 205, 176, 0.6);
+  border: 1px solid rgba(186, 205, 176, 0.2);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+}
+
+.btn-copy:hover {
+  background: rgba(186, 205, 176, 0.08);
+}
+
+.btn-primary {
+  padding: 8px 20px;
+  background: #BACDB0;
+  color: #2E2C2F;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+.btn-primary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-danger-outline {
+  padding: 8px 20px;
+  background: transparent;
+  color: #e57373;
+  border: 1px solid rgba(229, 115, 115, 0.4);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-danger-outline:hover {
+  background: rgba(229, 115, 115, 0.08);
+}
+
+.wallet-input {
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(186, 205, 176, 0.2);
+  border-radius: 6px;
+  color: #fff;
+  font-size: 0.85rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.wallet-input:focus {
+  border-color: rgba(186, 205, 176, 0.5);
+}
+
+.wallet-input::placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.wallet-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.9rem;
+}
+
+.wallet-empty {
+  text-align: center;
+  padding: 40px 0;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 0.9rem;
+}
+
+.wallet-error-text {
+  color: #e57373;
+  font-size: 0.85rem;
+  margin-top: 8px;
+}
+
+.wallet-warning {
+  color: #ffb74d;
+  font-size: 0.8rem;
+  margin-top: 8px;
+}
+
+.wallet-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.wallet-tag-ok {
+  background: rgba(186, 205, 176, 0.15);
+  color: #BACDB0;
+}
+
+.wallet-tag-no {
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.wallet-tag-listed {
+  background: rgba(78, 168, 222, 0.15);
+  color: #4ea8de;
+}
+
+/* Asset list */
+.asset-item {
+  border: 1px solid rgba(186, 205, 176, 0.1);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.asset-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.asset-header:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.asset-detail {
+  padding: 0 16px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.asset-props {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 16px;
+  font-size: 0.85rem;
+  margin: 12px 0;
+}
+
+.asset-prop-key {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.asset-prop-val {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Inventory slots */
+.inv-slot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border: 1px solid rgba(186, 205, 176, 0.1);
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.inv-slot-empty {
+  border-style: dashed;
+  color: rgba(255, 255, 255, 0.25);
+}
+
+/* Market listings */
+.market-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border: 1px solid rgba(186, 205, 176, 0.1);
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.market-price {
+  font-weight: 600;
+  color: #BACDB0;
+}
+
+.market-seller {
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.market-filter {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.market-filter-btn {
+  padding: 6px 16px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.market-filter-btn.active {
+  color: #BACDB0;
+  border-color: rgba(186, 205, 176, 0.4);
+  background: rgba(186, 205, 176, 0.08);
+}
+
+
+.wallet-logo {
+  height: 32px;
+  width: auto;
+}
+
+.wallet-tabs-divider {
+  width: 100%;
+  max-width: 300px;
+  height: 16px;
+  background: url('/images/divider.webp') center/contain no-repeat;
+  margin: 0 auto;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .wallet-header {
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px;
+  }
+
+  .wallet-header-left {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .wallet-header-right {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .wallet-tabs {
+    padding: 12px 16px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .wallet-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .wallet-tab {
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-height: 44px;
+  }
+
+  .wallet-main {
+    padding: 20px 12px 60px;
+  }
+
+  .wallet-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .market-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+}
--- a/src/pages/WalletPage.jsx
+++ b/src/pages/WalletPage.jsx
@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/useAuth';
+import WalletTab from '../components/wallet/WalletTab';
+import AssetsTab from '../components/wallet/AssetsTab';
+import InventoryTab from '../components/wallet/InventoryTab';
+import MarketTab from '../components/wallet/MarketTab';
+import './WalletPage.css';
+
+const TABS = [
+  { key: 'wallet', label: '지갑' },
+  { key: 'assets', label: '자산' },
+  { key: 'inventory', label: '인벤토리' },
+  { key: 'market', label: '마켓' },
+];
+
+export default function WalletPage() {
+  const { user, logout } = useAuth();
+  const [tab, setTab] = useState('wallet');
+
+  return (
+    <div className="wallet-page">
+      <header className="wallet-header">
+        <div className="wallet-header-left">
+          <Link to="/" className="wallet-home-link">← 메인으로</Link>
+          <h1 className="wallet-title">지갑</h1>
+        </div>
+        <div className="wallet-header-right">
+          <span className="wallet-username">{user?.username}</span>
+          <button className="btn-wallet-logout" onClick={logout}>로그아웃</button>
+        </div>
+      </header>
+
+      <div className="wallet-tabs" role="tablist">
+        {TABS.map((t) => (
+          <button
+            key={t.key}
+            role="tab"
+            id={`tab-${t.key}`}
+            aria-selected={tab === t.key}
+            aria-controls={`tabpanel-${t.key}`}
+            className={`wallet-tab${tab === t.key ? ' active' : ''}`}
+            onClick={() => setTab(t.key)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <main className="wallet-main" role="tabpanel" id={`tabpanel-${tab}`} aria-labelledby={`tab-${tab}`}>
+        {tab === 'wallet' && <WalletTab />}
+        {tab === 'assets' && <AssetsTab />}
+        {tab === 'inventory' && <InventoryTab />}
+        {tab === 'market' && <MarketTab />}
+      </main>
+    </div>
+  );
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,11 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:8080',
+    },
+  },
  test: {
    globals: true,
    environment: 'jsdom',
Author	SHA1	Message	Date
tolelom	7cd8f0a837	refactor: btn-game CSS 정리 및 LoginPage.css 삭제 Some checks failed Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Failing after 2m17s Details - .btn-game에 display:inline-block, text-decoration:none 추가 → HomePage inline style 제거 - LoginPage.css 삭제 (deprecated, 임포트 없음) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 20:01:30 +09:00
tolelom	0b999f0526	refactor: pages/wallet 리팩토링 — CSS 분리, 유효성 검사 개선, 테스트 통과 Some checks failed Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Failing after 2m13s Details - WalletSummary.css 신규 분리 (WalletPage.css 결합도 제거) - InventoryTab: useCallback + useEffect([load]) 패턴으로 통일 - LoginPage: handleSSAFYLogin 함수 분리 - RegisterPage: 유효성 검사 메시지 세분화 (빈값/짧음/문자 오류 구분), 테스트 52개 전부 통과 - SSAFYCallbackPage: AuthPage.css 임포트 + 버튼 클래스 적용 - AuthPage.css: .login-logo 클래스 추가 - AdminPage.css: 후행 공백 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 19:51:55 +09:00
tolelom	4e0716c1cb	refactor: components/ 정리 - ConfirmProvider useMemo 불필요한 래핑 제거 - DownloadAdmin useCallback 적용, toast 중복 제거, eslint-disable 정리 - UserAdmin useCallback 적용, PAGE_SIZE 컴포넌트 밖으로 이동, 페이지네이션 버튼 가독성 개선 - UploadForm 에러 처리 fail 헬퍼로 중복 제거 - DownloadSection 후행 빈 줄 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 19:17:17 +09:00
tolelom	9a8102fb19	refactor: AuthContext 중복 코드 추출 login, setUserFromSSAFY의 토큰 저장 + 유저 상태 업데이트 로직을 applySession 헬퍼로 추출 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 19:11:23 +09:00
tolelom	90b75413f1	refactor: api/ 주석 정리 및 소소한 개선 - client.js JSDoc 추가 (apiFetch, tryRefresh, apiUpload, localizeError) - auth.js 단순 함수 JSDoc 제거, createLaunchTicket why 주석 유지 - chain.js BASE 중복 선언 이유 주석 추가, 단순 함수 JSDoc 제거 - announcements.js 후행 빈 줄 제거 - users.js getUsers 쿼리스트링 → URLSearchParams 변경 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 18:47:26 +09:00
tolelom	40ea1644b1	refactor: src 루트 파일 정리 Some checks failed Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Failing after 2m17s Details - App.jsx 404 인라인 JSX → NotFoundPage 컴포넌트 분리, <a> → <Link> 수정 - index.css btn-game transition brightness → filter 오타 수정 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 16:57:54 +09:00
tolelom	c0d827e8ec	chore: 프로젝트 설정 정리 및 개선 Some checks failed Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Failing after 2m15s Details - eslint ^10 → ^9 다운그레이드 (react-hooks 플러그인 호환) - .npmrc 제거, Dockerfile legacy-peer-deps 플래그 제거 - Dockerfile node:lts → node:22-alpine 버전 고정, ARG 오타 수정 - .dockerignore 추가 (.env, node_modules, .git 등 제외) - .env 삭제, .env.development 추가 (로컬 기본값 git 관리) - vite.config.js dev proxy 추가 (/api → localhost:8080) - index.html favicon, OG 태그, Pretendard 폰트 로드 추가 - nginx.conf /images/ 캐시 전략 추가, 주석 정리 - eslint.config.js ecmaVersion 중복 선언 정리 - deploy.yml --legacy-peer-deps, --no-cache 제거, 배포 커맨드 가독성 개선 - .github/workflows/ci.yml 삭제 (Gitea 사용으로 불필요) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-12 16:53:38 +09:00
tolelom	ad0db24891	fix: 회원가입 비밀번호 확인 체크 표시 유니코드 이스케이프 수정 All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 14s Details JSX 텍스트 노드에서 \u2713이 리터럴로 렌더링되는 문제를 JS 표현식으로 감싸 수정. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-27 16:05:35 +09:00
tolelom	73ab907e09	revert: 로그인 페이지 게임 에셋 스타일 롤백 All checks were successful Client CI/CD / test (push) Successful in 11s Details Client CI/CD / deploy (push) Successful in 16s Details 비주얼 오버홀에서 적용된 로그인 페이지의 배경 이미지, 카드 프레임, 구분선 이미지를 이전 스타일로 되돌림 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-27 09:08:18 +09:00
tolelom	b9bdbcaabc	feat: 웹 클라이언트 비주얼 오버홀 — 게임 에셋 적용 All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 14s Details - 홈페이지: 드래곤 히어로 배경(bg_loading), fixed 헤더, 로고, 마을 배경 다운로드 섹션 - 로그인/회원가입: 고딕 성문 배경(bg_login), 카드 프레임, 게임 버튼 - 공통: btn-game, card-game, divider-game CSS 클래스 추가 - 게임 에셋 PNG → WebP 변환 (6MB → 80~234KB) - 관리자 페이지: 로고/divider 추가 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-27 01:55:16 +09:00
tolelom	7e7b3e85a7	fix: 마켓 API 요청 필드명 snake_case→camelCase 수정 All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 14s Details 서버는 assetId/listingId(camelCase)를 기대하나 asset_id/listing_id(snake_case)로 보내고 있어 검증 실패. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 15:48:49 +09:00
tolelom	1691638fe9	fix: 지갑 UI 필드명/응답 구조 불일치 수정 All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 13s Details 서버 실제 응답과 프론트엔드 필드명이 맞지 않아 공개키 미표시, 인벤토리/마켓 TypeError 발생하던 버그 수정. - WalletTab: public_key→pubKeyHex, private_key→privateKey - InventoryTab: 배열→객체(slots) 구조 대응 - AssetsTab: 페이지네이션 응답, tradeable, active_listing_id, template_id - MarketTab: ID 목록→개별 getListing 호출, listing_id→id, asset_id - WalletSummary: 페이지네이션 + 인벤토리 객체 구조 대응 - chain.js: getListing() 함수 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 14:41:07 +09:00
tolelom	60be6e1d39	fix: suppress exhaustive-deps warnings in admin components All checks were successful Client CI/CD / test (push) Successful in 9s Details Client CI/CD / deploy (push) Successful in 19s Details Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 13:44:58 +09:00
tolelom	3dc1aad8ac	feat: add wallet UI with 4 tabs and HomePage summary - chain.js: API wrapper with Idempotency-Key auto-generation - WalletPage: 4-tab container (wallet/assets/inventory/market) - WalletTab: balance, address (truncated+copy), key export - AssetsTab: asset list with detail expand, market listing - InventoryTab: read-only slot display - MarketTab: buy/cancel with confirm dialog, all/mine filter - WalletSummary: HomePage card with balance + stats - PrivateRoute guard for /wallet, header link on HomePage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 13:43:46 +09:00
tolelom	8b6ba38a82	feat: add chain API wrapper with idempotency-key Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 13:38:36 +09:00
tolelom	f6c95c9745	docs: wallet UI design spec Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-23 13:24:52 +09:00
				`@@ -1 +0,0 @@`
				`/* This file is deprecated. Both LoginPage and RegisterPage now use AuthPage.css */`