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
52 changed files with 904 additions and 509 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/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
@@ -11,6 +11,7 @@ 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();
@@ -66,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
@@ -1,8 +1,11 @@
 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');
 }
@@ -11,8 +14,13 @@ export async function getWallet() {
  return apiFetch('/api/chain/wallet');
 }

-// 키 내보내기는 비밀번호 오류 시 서버가 401을 반환하므로,
-// apiFetch의 401 자동 refresh/로그아웃을 우회하기 위해 직접 fetch한다.
+/**
+ * 개인키 내보내기
+ * 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' };
@@ -33,6 +41,7 @@ export async function exportWalletKey(password) {
 }

 // --- 자산 ---
+
 export async function getAssets() {
  return apiFetch('/api/chain/assets');
 }
@@ -42,15 +51,27 @@ export async function getAsset(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',
@@ -60,13 +81,13 @@ function idempotentPost(path, body) {
 }

 export async function listOnMarket(assetId, price) {
-  return idempotentPost('/api/chain/market/list', { asset_id: assetId, price });
+  return idempotentPost('/api/chain/market/list', { assetId, price });
 }

 export async function buyFromMarket(listingId) {
-  return idempotentPost('/api/chain/market/buy', { listing_id: listingId });
+  return idempotentPost('/api/chain/market/buy', { listingId });
 }

 export async function cancelListing(listingId) {
-  return idempotentPost('/api/chain/market/cancel', { listing_id: 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, react-hooks/exhaustive-deps -- 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, react-hooks/exhaustive-deps -- 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
@@ -14,8 +14,9 @@ export default function AssetsTab() {
  const load = useCallback(() => {
    setLoading(true);
    getAssets()
-      .then((ids) => {
-        if (!ids || ids.length === 0) {
+      .then((result) => {
+        const ids = result?.ids || result;
+        if (!ids || !Array.isArray(ids) || ids.length === 0) {
          setAssets([]);
          return;
        }
@@ -49,7 +50,7 @@ export default function AssetsTab() {
      await listOnMarket(assetId, price);
      toast.success('마켓에 등록되었습니다.');
      setAssets((prev) =>
-        prev.map((a) => (a.id === assetId ? { ...a, listed: true } : a))
+        prev.map((a) => (a.id === assetId ? { ...a, active_listing_id: 'pending' } : a))
      );
      setListingAsset(null);
      setListingPrice('');
@@ -65,94 +66,94 @@ export default function AssetsTab() {

  return (
    <div>
-      {assets.map((asset) => (
-        <div key={asset.id} className="asset-item">
-          <div className="asset-header" onClick={() => toggleExpand(asset.id)}>
-            <div>
-              {asset._loaded ? (
-                <>
-                  <strong style={{ color: '#fff' }}>{asset.item_name || asset.template_name || '자산'}</strong>
-                  {asset.template_name && asset.item_name !== asset.template_name && (
-                    <span style={{ marginLeft: 8, fontSize: '0.8rem', opacity: 0.5 }}>{asset.template_name}</span>
-                  )}
-                  <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.tradable ? 'wallet-tag-ok' : 'wallet-tag-no'}`}>
-                {asset.tradable ? '거래 가능' : '거래 불가'}
-              </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 }}>
-                {asset.listed ? (
-                  <span className="wallet-tag wallet-tag-listed">마켓 등록됨</span>
+      {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 className="wallet-tag wallet-tag-no">미등록</span>
+                  <span style={{ color: '#e57373' }}>로드 실패 (#{asset.id})</span>
                )}
              </div>
-
-              {/* 마켓 등록 버튼 */}
-              {!asset.listed && asset.tradable && (
-                <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>
+              {asset._loaded && (
+                <span className={`wallet-tag ${asset.tradeable ? 'wallet-tag-ok' : 'wallet-tag-no'}`}>
+                  {asset.tradeable ? '거래 가능' : '거래 불가'}
+                </span>
              )}
            </div>
-          )}
-        </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
@@ -1,35 +1,41 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { getInventory } from '../../api/chain';
 import { useToast } from '../toast/useToast';

 export default function InventoryTab() {
  const toast = useToast();
-  const [slots, setSlots] = useState([]);
+  const [inventory, setInventory] = useState(null);
  const [loading, setLoading] = useState(true);

-  useEffect(() => {
-    let cancelled = false;
+  const load = useCallback(() => {
+    setLoading(true);
    getInventory()
-      .then((data) => { if (!cancelled) setSlots(data); })
-      .catch(() => { if (!cancelled) toast.error('인벤토리를 불러오지 못했습니다.'); })
-      .finally(() => { if (!cancelled) setLoading(false); });
-    return () => { cancelled = true; };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+      .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>;
-  if (!slots || slots.length === 0) return <div className="wallet-empty">인벤토리가 비어있습니다</div>;
+
+  const slots = inventory?.slots;
+  const entries = slots ? Object.entries(slots) : [];
+
+  if (entries.length === 0) return <div className="wallet-empty">인벤토리가 비어있습니다</div>;

  return (
    <div>
-      {slots.map((slot, i) => {
-        const isEmpty = !slot.item_name && !slot.item_id;
+      {entries.map(([slotName, assetId]) => {
+        const isEmpty = !assetId;
        return (
-          <div key={slot.slot_name || i} className={`inv-slot${isEmpty ? ' inv-slot-empty' : ''}`}>
+          <div key={slotName} className={`inv-slot${isEmpty ? ' inv-slot-empty' : ''}`}>
            <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '0.85rem' }}>
-              {slot.slot_name}
+              {slotName}
            </span>
            <span style={{ color: isEmpty ? 'rgba(255,255,255,0.25)' : '#fff', fontSize: '0.9rem' }}>
-              {isEmpty ? '비어있음' : `${slot.item_name} #${slot.item_id}`}
+              {isEmpty ? '비어있음' : assetId}
            </span>
          </div>
        );
--- a/src/components/wallet/MarketTab.jsx
+++ b/src/components/wallet/MarketTab.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { getMarketListings, getWallet, buyFromMarket, cancelListing } from '../../api/chain';
+import { getMarketListings, getListing, getWallet, buyFromMarket, cancelListing } from '../../api/chain';
 import { useToast } from '../toast/useToast';
 import { useConfirm } from '../confirm/useConfirm';

@@ -12,7 +12,7 @@ export default function MarketTab() {
  const toast = useToast();
  const confirm = useConfirm();
  const [listings, setListings] = useState([]);
-  const [myAddress, setMyAddress] = useState('');
+  const [myPubKey, setMyPubKey] = useState('');
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState('all');
  const [processing, setProcessing] = useState(null);
@@ -20,9 +20,20 @@ export default function MarketTab() {
  const load = useCallback(() => {
    setLoading(true);
    Promise.all([getMarketListings(), getWallet()])
-      .then(([l, w]) => {
-        setListings(l || []);
-        setMyAddress(w?.address || '');
+      .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('마켓 정보를 불러오지 못했습니다.');
@@ -34,12 +45,12 @@ export default function MarketTab() {

  const handleBuy = async (listing) => {
    const ok = await confirm(
-      `${listing.item_name || '아이템'}을(를) ${Number(listing.price).toLocaleString()} TOL에 구매하시겠습니까?`
+      `${listing.asset_id}을(를) ${Number(listing.price).toLocaleString()} TOL에 구매하시겠습니까?`
    );
    if (!ok) return;
-    setProcessing(listing.listing_id);
+    setProcessing(listing.id);
    try {
-      await buyFromMarket(listing.listing_id);
+      await buyFromMarket(listing.id);
      toast.success('구매가 완료되었습니다.');
      load();
    } catch (err) {
@@ -52,9 +63,9 @@ export default function MarketTab() {
  const handleCancel = async (listing) => {
    const ok = await confirm('리스팅을 취소하시겠습니까?');
    if (!ok) return;
-    setProcessing(listing.listing_id);
+    setProcessing(listing.id);
    try {
-      await cancelListing(listing.listing_id);
+      await cancelListing(listing.id);
      toast.success('리스팅이 취소되었습니다.');
      load();
    } catch (err) {
@@ -67,7 +78,7 @@ export default function MarketTab() {
  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;

  const filtered = filter === 'mine'
-    ? listings.filter((l) => l.seller === myAddress)
+    ? listings.filter((l) => l.seller === myPubKey)
    : listings;

  return (
@@ -93,11 +104,11 @@ export default function MarketTab() {
        </div>
      ) : (
        filtered.map((listing) => {
-          const isMine = listing.seller === myAddress;
+          const isMine = listing.seller === myPubKey;
          return (
-            <div key={listing.listing_id} className="market-item">
+            <div key={listing.id} className="market-item">
              <div>
-                <strong style={{ color: '#fff' }}>{listing.item_name || '아이템'}</strong>
+                <strong style={{ color: '#fff' }}>{listing.asset_id}</strong>
                <span className="market-seller" style={{ marginLeft: 12 }}>
                  {truncateAddr(listing.seller)}
                </span>
@@ -107,18 +118,18 @@ export default function MarketTab() {
                {isMine ? (
                  <button
                    className="btn-danger-outline"
-                    disabled={processing === listing.listing_id}
+                    disabled={processing === listing.id}
                    onClick={() => handleCancel(listing)}
                  >
-                    {processing === listing.listing_id ? '처리 중...' : '취소'}
+                    {processing === listing.id ? '처리 중...' : '취소'}
                  </button>
                ) : (
                  <button
                    className="btn-primary"
-                    disabled={processing === listing.listing_id}
+                    disabled={processing === listing.id}
                    onClick={() => handleBuy(listing)}
                  >
-                    {processing === listing.listing_id ? '처리 중...' : '구매'}
+                    {processing === listing.id ? '처리 중...' : '구매'}
                  </button>
                )}
              </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
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getBalance, getAssets, getInventory } from '../../api/chain';
-import '../../pages/WalletPage.css';
+import './WalletSummary.css';

 export default function WalletSummary() {
  const navigate = useNavigate();
@@ -17,9 +17,11 @@ export default function WalletSummary() {
      getInventory().catch(() => null),
    ]).then(([b, assets, inv]) => {
      setBalance(b?.balance != null ? b.balance : null);
-      setAssetCount(assets != null ? assets.length : null);
+      const ids = assets?.ids || assets;
+      setAssetCount(Array.isArray(ids) ? ids.length : null);
+      const slots = inv?.slots;
      setEquippedCount(
-        inv != null ? inv.filter((s) => s.item_name || s.item_id).length : null
+        slots != null ? Object.values(slots).filter(Boolean).length : null
      );
    }).finally(() => setLoading(false));
  }, []);
--- a/src/components/wallet/WalletTab.jsx
+++ b/src/components/wallet/WalletTab.jsx
@@ -58,7 +58,7 @@ export default function WalletTab() {
    setExporting(true);
    try {
      const data = await exportWalletKey(password);
-      setPrivateKey(data.private_key);
+      setPrivateKey(data.privateKey);
    } catch (err) {
      if (err.status === 401) {
        setExportError(err.message);
@@ -90,8 +90,8 @@ export default function WalletTab() {
          <div style={{ marginBottom: 12 }}>
            <div className="wallet-label">공개키</div>
            <div className="wallet-row">
-              <span className="wallet-mono">{truncate(wallet.public_key, 4, 4)}</span>
-              <button className="btn-copy" onClick={() => copyToClipboard(wallet.public_key, '공개키')}>
+              <span className="wallet-mono">{truncate(wallet.pubKeyHex, 4, 4)}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(wallet.pubKeyHex, '공개키')}>
                복사
              </button>
            </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,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import DownloadSection from '../components/DownloadSection';
@@ -7,11 +8,21 @@ 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 ? (
            <>
@@ -30,14 +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
@@ -367,50 +367,18 @@
  background: rgba(186, 205, 176, 0.08);
 }

-/* Wallet summary card (HomePage) */
-.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-logo {
+  height: 32px;
+  width: auto;
 }

-.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);
+.wallet-tabs-divider {
+  width: 100%;
+  max-width: 300px;
+  height: 16px;
+  background: url('/images/divider.webp') center/contain no-repeat;
+  margin: 0 auto;
 }

 /* Mobile responsive */
@@ -457,11 +425,6 @@
    align-items: stretch;
  }

-  .wallet-summary-stats {
-    flex-direction: column;
-    gap: 8px;
-  }
-
  .market-item {
    flex-direction: column;
    align-items: stretch;
--- 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
				`@@ -1 +0,0 @@`
				`/* This file is deprecated. Both LoginPage and RegisterPage now use AuthPage.css */`