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

- .btn-game에 display:inline-block, text-decoration:none 추가 → HomePage inline style 제거
- LoginPage.css 삭제 (deprecated, 임포트 없음)

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

.dockerignore

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

.env.development

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

.gitea/workflows/deploy.yml

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

.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

.gitignore

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

Dockerfile

@@ -1,8 +1,8 @@
 # Stage 1: Build
-FROM node:lts-alpine AS builder
+FROM node:22-alpine AS builder
 WORKDIR /app
 COPY package*.json ./
-RUN npm ci --legacy-peer-deps
+RUN npm ci
 COPY . .
 ARG VITE_API_BASE_URL
 ENV VITE_API_BASE_URL=$VITE_API_BASE_URL

eslint.config.js

@@ -14,12 +14,11 @@ export default defineConfig([
       reactRefresh.configs.vite,
     ],
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
       },
     },
     rules: {

index.html

@@ -4,8 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="One of the plans — 멀티플레이어 보스 레이드 게임 플랫폼">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://a301.tolelom.xyz">
     <meta property="og:title" content="One of the plans">
     <meta property="og:description" content="One of the plans — 멀티플레이어 보스 레이드 게임 플랫폼">
+    <meta property="og:image" content="https://a301.tolelom.xyz/images/logo.webp">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
+    <link rel="icon" type="image/webp" href="/images/logo.webp">
     <title>One of the plans</title>
   </head>
   <body>

nginx.conf

@@ -3,7 +3,6 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    # 보안 헤더
     add_header X-Content-Type-Options "nosniff" always;
     add_header X-Frame-Options "DENY" always;
 
@@ -13,11 +12,16 @@ server {
         add_header Cache-Control "no-store, no-cache, must-revalidate";
     }
 
-    # Vite 해시 에셋 장기 캐싱
+    # Vite 빌드 에셋 장기 캐싱 (파일명에 해시 포함 — 내용 변경 시 URL도 바뀜)
     location /assets/ {
         add_header Cache-Control "public, max-age=31536000, immutable";
     }
 
+    # 정적 이미지 단기 캐싱 (해시 없는 파일)
+    location /images/ {
+        add_header Cache-Control "public, max-age=86400";
+    }
+
     # SPA fallback (react-router 사용 시 필요)
     location / {
         try_files $uri $uri/ /index.html;

package-lock.json

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

package.json

@@ -24,7 +24,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^10.0.2",
+    "eslint": "^9.0.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",

src/App.jsx

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

src/api/auth.js

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

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

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;

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

src/components/AnnouncementBoard.css

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

src/components/DownloadSection.css

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

src/components/admin/DownloadAdmin.jsx

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

src/components/admin/UploadForm.jsx

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

src/components/admin/UserAdmin.jsx

@@ -1,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';
 
-export default function UserAdmin() {
 const PAGE_SIZE = 20;
+
+export default function UserAdmin() {
   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) => {
+      .catch(() => setFetchError(true))
-        console.error('유저 목록 로드 실패:', err);
-        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>

src/components/confirm/ConfirmProvider.jsx

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

src/components/wallet/AssetsTab.jsx

@@ -14,8 +14,9 @@ export default function AssetsTab() {
   const load = useCallback(() => {
     setLoading(true);
     getAssets()
-      .then((ids) => {
+      .then((result) => {
-        if (!ids || ids.length === 0) {
+        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,16 +66,15 @@ export default function AssetsTab() {
 
   return (
     <div>
-      {assets.map((asset) => (
+      {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.item_name || asset.template_name || '자산'}</strong>
+                    <strong style={{ color: '#fff' }}>{asset.template_id || '자산'}</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>
                   </>
                 ) : (
@@ -82,8 +82,8 @@ export default function AssetsTab() {
                 )}
               </div>
               {asset._loaded && (
-              <span className={`wallet-tag ${asset.tradable ? 'wallet-tag-ok' : 'wallet-tag-no'}`}>
+                <span className={`wallet-tag ${asset.tradeable ? 'wallet-tag-ok' : 'wallet-tag-no'}`}>
-                {asset.tradable ? '거래 가능' : '거래 불가'}
+                  {asset.tradeable ? '거래 가능' : '거래 불가'}
                 </span>
               )}
             </div>
@@ -104,7 +104,7 @@ export default function AssetsTab() {
 
                 {/* 마켓 등록 상태 */}
                 <div style={{ marginTop: 12 }}>
-                {asset.listed ? (
+                  {isListed ? (
                     <span className="wallet-tag wallet-tag-listed">마켓 등록됨</span>
                   ) : (
                     <span className="wallet-tag wallet-tag-no">미등록</span>
@@ -112,7 +112,7 @@ export default function AssetsTab() {
                 </div>
 
                 {/* 마켓 등록 버튼 */}
-              {!asset.listed && asset.tradable && (
+                {!isListed && asset.tradeable && (
                   <div style={{ marginTop: 12 }}>
                     {listingAsset === asset.id ? (
                       <div style={{ display: 'flex', gap: 8 }}>
@@ -152,7 +152,8 @@ export default function AssetsTab() {
               </div>
             )}
           </div>
-      ))}
+        );
+      })}
     </div>
   );
 }

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(() => {
+  const load = useCallback(() => {
-    let cancelled = false;
+    setLoading(true);
     getInventory()
-      .then((data) => { if (!cancelled) setSlots(data); })
+      .then(setInventory)
-      .catch(() => { if (!cancelled) toast.error('인벤토리를 불러오지 못했습니다.'); })
+      .catch(() => toast.error('인벤토리를 불러오지 못했습니다.'))
-      .finally(() => { if (!cancelled) setLoading(false); });
+      .finally(() => setLoading(false));
-    return () => { cancelled = true; };
+  }, [toast]);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 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) => {
+      {entries.map(([slotName, assetId]) => {
-        const isEmpty = !slot.item_name && !slot.item_id;
+        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>
         );

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]) => {
+      .then(([result, w]) => {
-        setListings(l || []);
+        const ids = result?.ids || result;
-        setMyAddress(w?.address || '');
+        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>

src/components/wallet/WalletSummary.css

@@ -0,0 +1,51 @@
+.wallet-summary {
+  background: rgba(186, 205, 176, 0.06);
+  border: 1px solid rgba(186, 205, 176, 0.15);
+  border-radius: 10px;
+  padding: 20px 24px;
+  margin-bottom: 32px;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.wallet-summary:hover {
+  border-color: rgba(186, 205, 176, 0.3);
+  background: rgba(186, 205, 176, 0.09);
+}
+
+.wallet-summary-title {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 0.08em;
+  margin: 0 0 12px;
+}
+
+.wallet-summary-balance {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.wallet-summary-stats {
+  display: flex;
+  gap: 24px;
+  margin-top: 12px;
+}
+
+.wallet-summary-stat {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.wallet-summary-stat strong {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+@media (max-width: 768px) {
+  .wallet-summary-stats {
+    flex-direction: column;
+    gap: 8px;
+  }
+}

src/components/wallet/WalletSummary.jsx

@@ -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));
   }, []);

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>
+              <span className="wallet-mono">{truncate(wallet.pubKeyHex, 4, 4)}</span>
-              <button className="btn-copy" onClick={() => copyToClipboard(wallet.public_key, '공개키')}>
+              <button className="btn-copy" onClick={() => copyToClipboard(wallet.pubKeyHex, '공개키')}>
                 복사
               </button>
             </div>

src/context/AuthContext.jsx

@@ -15,27 +15,26 @@ export function AuthProvider({ children }) {
     const username = localStorage.getItem('username');
     if (!token) return null;
     const payload = decodeTokenPayload(token);
-    const role = payload?.role || 'user';
+    return { token, username, role: payload?.role || 'user' };
-    return { token, username, role };
   });
 
+  // 토큰 저장 + 유저 상태 업데이트 공통 처리 (login, setUserFromSSAFY에서 공유)
+  const applySession = useCallback((data) => {
+    localStorage.setItem('token', data.token);
+    localStorage.setItem('username', data.username);
+    const role = decodeTokenPayload(data.token)?.role || 'user';
+    setUser({ token: data.token, username: data.username, role });
+  }, []);
+
   const login = useCallback(async (username, password) => {
     const data = await apiLogin(username, password);
-    localStorage.setItem('token', data.token);
+    applySession(data);
-    localStorage.setItem('username', data.username);
+  }, [applySession]);
-    const decoded = decodeTokenPayload(data.token);
-    const role = decoded?.role || 'user';
-    setUser({ token: data.token, username: data.username, role });
-  }, []);
 
   // SSAFY OAuth 콜백에서 받은 토큰으로 로그인 처리
   const setUserFromSSAFY = useCallback((data) => {
-    localStorage.setItem('token', data.token);
+    applySession(data);
-    localStorage.setItem('username', data.username);
+  }, [applySession]);
-    const decoded = decodeTokenPayload(data.token);
-    const role = decoded?.role || 'user';
-    setUser({ token: data.token, username: data.username, role });
-  }, []);
 
   // 로컬 세션만 정리 (토큰 만료·강제 로그아웃 시)
   const clearSession = useCallback(() => {

src/index.css

@@ -31,3 +31,53 @@ a {
 a:hover {
   opacity: 0.85;
 }
+
+/* ── Game asset common classes ───────────────────── */
+
+.btn-game {
+  position: relative;
+  display: inline-block;
+  border: none;
+  color: #fff;
+  padding: 14px 40px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  cursor: pointer;
+  background: url('/images/btn_normal.webp') center/100% 100% no-repeat;
+  letter-spacing: 0.05em;
+  overflow: hidden;
+  text-decoration: none;
+  transition: transform 0.15s, filter 0.15s;
+}
+.btn-game:hover { transform: translateY(-1px); filter: brightness(1.2); }
+.btn-game:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.btn-game > * { position: relative; z-index: 1; }
+
+.card-game {
+  position: relative;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.card-game::before {
+  content: '';
+  position: absolute;
+  inset: -8px;
+  background: url('/images/card_frame.webp') center/100% 100% no-repeat;
+  pointer-events: none;
+  z-index: 0;
+}
+.card-game > * { position: relative; z-index: 1; }
+
+.divider-game {
+  width: 100%;
+  max-width: 400px;
+  height: 20px;
+  background: url('/images/divider.webp') center/contain no-repeat;
+  margin: 2rem auto;
+}
+
+@media (max-width: 768px) {
+  .card-game::before { display: none; }
+  .card-game { border: 1px solid rgba(186, 205, 176, 0.3); }
+}

src/pages/AdminPage.css

@@ -96,6 +96,19 @@
   padding: 32px 24px 80px;
 }
 
+.admin-logo {
+  height: 32px;
+  width: auto;
+}
+
+.admin-tabs-divider {
+  width: 100%;
+  max-width: 300px;
+  height: 16px;
+  background: url('/images/divider.webp') center/contain no-repeat;
+  margin: 0 auto;
+}
+
 /* Mobile responsive */
 @media (max-width: 768px) {
   .admin-header {

src/pages/AdminPage.jsx

@@ -21,6 +21,7 @@ export default function AdminPage() {
       <header className="admin-header">
         <div className="admin-header-left">
           <Link to="/" className="admin-home-link">← 메인으로</Link>
+          <img src="/images/logo.webp" alt="" className="admin-logo" />
           <h1 className="admin-title">관리자 페이지</h1>
         </div>
         <div className="admin-header-right">
@@ -44,6 +45,7 @@ export default function AdminPage() {
           </button>
         ))}
       </div>
+      <div className="admin-tabs-divider"></div>
 
       {/* Tabs are conditionally rendered (not hidden) to avoid stale data. Each panel re-fetches on mount. */}
       <main className="admin-main" role="tabpanel" id={`tabpanel-${tab}`} aria-labelledby={`tab-${tab}`}>

src/pages/AuthPage.css

@@ -151,6 +151,13 @@
   border-color: rgba(186, 205, 176, 0.5);
 }
 
+.login-logo {
+  max-width: 120px;
+  height: auto;
+  margin: 0 auto 16px;
+  display: block;
+}
+
 .login-back {
   display: block;
   text-align: center;

src/pages/HomePage.css

@@ -3,21 +3,44 @@
   background-color: #2E2C2F;
 }
 
-/* Header */
+/* Header - fixed with scroll effect */
 .home-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 32px;
+  background: transparent;
+  transition: background 0.3s;
+}
+
+.home-header.scrolled {
+  background: rgba(46, 44, 47, 0.85);
+  backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(186, 205, 176, 0.1);
 }
 
 .home-logo {
-  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+}
+
+.home-logo img {
+  height: 40px;
+  width: auto;
+}
+
+.home-logo-text {
+  font-size: 1.2rem;
   font-weight: 800;
   color: #BACDB0;
   letter-spacing: 0.1em;
-  margin: 0;
 }
 
 .home-user {
@@ -77,13 +100,11 @@
   opacity: 0.9;
 }
 
-/* Hero banner */
+/* Hero banner - fullscreen with game background */
 .hero-banner {
   position: relative;
-  height: 280px;
+  min-height: 100vh;
-  background:
+  background: url('/images/bg_loading.webp') center/cover no-repeat;
-    linear-gradient(135deg, rgba(46, 44, 47, 0.85), rgba(46, 44, 47, 0.6)),
-    linear-gradient(135deg, #2E2C2F 0%, #3a3a3a 50%, #2E2C2F 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -94,28 +115,62 @@
   content: '';
   position: absolute;
   inset: 0;
-  background:
+  background: linear-gradient(
-    radial-gradient(ellipse at 30% 40%, rgba(186, 205, 176, 0.12) 0%, transparent 60%),
+    to bottom,
-    radial-gradient(ellipse at 70% 60%, rgba(186, 205, 176, 0.06) 0%, transparent 50%);
+    rgba(0, 0, 0, 0.7) 0%,
+    rgba(0, 0, 0, 0.3) 50%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
 }
 
 .hero-overlay {
   position: relative;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.hero-logo {
+  width: 200px;
+  height: auto;
+  margin-bottom: 24px;
 }
 
 .hero-title {
-  font-size: 2.8rem;
+  font-size: 3rem;
   font-weight: 800;
   color: #BACDB0;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.15em;
+  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
   margin: 0;
 }
 
 .hero-desc {
-  font-size: 1rem;
+  font-size: 1.1rem;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.6);
+  letter-spacing: 0.3em;
   margin: 12px 0 0;
+  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+}
+
+.hero-cta {
+  margin-top: 40px;
+}
+
+.hero-scroll-hint {
+  position: absolute;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.8rem;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateX(-50%) translateY(0); }
+  50% { transform: translateX(-50%) translateY(-8px); }
 }
 
 /* Main content */
@@ -128,19 +183,23 @@
 /* Mobile responsive */
 @media (max-width: 768px) {
   .home-header {
-    flex-direction: column;
-    gap: 12px;
     padding: 12px 16px;
-    text-align: center;
+  }
+
+  .home-header.scrolled {
+    padding: 8px 16px;
   }
 
   .home-user {
-    width: 100%;
+    gap: 8px;
-    justify-content: center;
   }
 
   .hero-banner {
-    height: 180px;
+    min-height: 80vh;
+  }
+
+  .hero-logo {
+    width: 120px;
   }
 
   .hero-title {
@@ -149,6 +208,7 @@
 
   .hero-desc {
     font-size: 0.85rem;
+    letter-spacing: 0.15em;
   }
 
   .home-main {

src/pages/HomePage.jsx

@@ -1,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">
+      <header className={`home-header${scrolled ? ' scrolled' : ''}`}>
-        <h1 className="home-logo">One of the plans</h1>
+        <Link to="/" className="home-logo">
+          <img src="/images/logo.webp" alt="One of the Plans" />
+          <span className="home-logo-text">One of the Plans</span>
+        </Link>
         <div className="home-user">
           {user ? (
             <>
@@ -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>
+          <img src="/images/logo.webp" alt="" className="hero-logo" />
-          <p className="hero-desc">Unity 3D 멀티플레이어 테스트에 참여하세요</p>
+          <h2 className="hero-title">One of the Plans</h2>
+          <p className="hero-desc">MULTIPLAYER BOSS RAID</p>
+          <div className="hero-cta">
+            {user ? (
+              <a href="#download" className="btn-game">
+                <span>게임 시작</span>
+              </a>
+            ) : (
+              <Link to="/login" className="btn-game">
+                <span>로그인</span>
+              </Link>
+            )}
           </div>
+        </div>
+        <div className="hero-scroll-hint">▼ 스크롤</div>
       </section>
 
-      <main className="home-main">
+      <main className="home-main" id="download">
+        <div className="divider-game"></div>
         {user && <WalletSummary />}
         <DownloadSection />
+        <div className="divider-game"></div>
         <AnnouncementBoard />
       </main>
     </div>

src/pages/LoginPage.css

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

src/pages/LoginPage.jsx

@@ -14,6 +14,18 @@ export default function LoginPage() {
   const location = useLocation();
   const justRegistered = location.state?.registered;
 
+  const handleSSAFYLogin = async () => {
+    try {
+      const data = await getSSAFYLoginURL();
+      if (!data.url || !data.url.startsWith('https://')) {
+        throw new Error('유효하지 않은 로그인 URL입니다.');
+      }
+      window.location.href = data.url;
+    } catch {
+      setError('SSAFY 로그인 URL을 가져올 수 없습니다.');
+    }
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError('');
@@ -84,17 +96,7 @@ export default function LoginPage() {
         <button
           type="button"
           className="btn-ssafy"
-          onClick={async () => {
+          onClick={handleSSAFYLogin}
-            try {
-              const data = await getSSAFYLoginURL();
-              if (!data.url || !data.url.startsWith('https://')) {
-                throw new Error('유효하지 않은 로그인 URL입니다.');
-              }
-              window.location.href = data.url;
-            } catch {
-              setError('SSAFY 로그인 URL을 가져올 수 없습니다.');
-            }
-          }}
         >
           SSAFY 계정으로 로그인
         </button>

src/pages/NotFoundPage.jsx

@@ -0,0 +1,11 @@
+import { Link } from 'react-router-dom';
+
+export default function NotFoundPage() {
+  return (
+    <div style={{ padding: '2rem', textAlign: 'center', color: '#aaa' }}>
+      <h2>404</h2>
+      <p>페이지를 찾을 수 없습니다</p>
+      <Link to="/" style={{ color: '#4ea8de' }}>홈으로 돌아가기</Link>
+    </div>
+  );
+}

src/pages/RegisterPage.jsx

@@ -5,6 +5,13 @@ import './AuthPage.css';
 
 const USERNAME_REGEX = /^[a-z0-9_-]{3,50}$/;
 
+function getPasswordStrength(pw) {
+  if (pw.length === 0) return { label: '', level: '' };
+  if (pw.length < 6) return { label: '약함', level: 'weak' };
+  if (pw.length < 10) return { label: '중간', level: 'medium' };
+  return { label: '강함', level: 'strong' };
+}
+
 export default function RegisterPage() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -18,13 +25,6 @@ export default function RegisterPage() {
   const showUsernameError = usernameTouched && username.length > 0 && !isUsernameValid;
   const showUsernameValid = usernameTouched && username.length > 0 && isUsernameValid;
 
-  const getPasswordStrength = (pw) => {
-    if (pw.length === 0) return { label: '', level: '' };
-    if (pw.length < 6) return { label: '약함', level: 'weak' };
-    if (pw.length < 10) return { label: '중간', level: 'medium' };
-    return { label: '강함', level: 'strong' };
-  };
-
   const passwordStrength = getPasswordStrength(password);
   const confirmMismatch = confirm.length > 0 && password !== confirm;
   const confirmMatch = confirm.length > 0 && password === confirm;
@@ -34,7 +34,7 @@ export default function RegisterPage() {
     setError('');
 
     const trimmed = username.trim().toLowerCase();
-    if (!trimmed) {
+    if (trimmed.length === 0) {
       setError('아이디를 입력해주세요.');
       return;
     }
@@ -42,7 +42,7 @@ export default function RegisterPage() {
       setError('아이디는 3자 이상이어야 합니다.');
       return;
     }
-    if (!/^[a-z0-9_-]+$/.test(trimmed)) {
+    if (!USERNAME_REGEX.test(trimmed)) {
       setError('아이디는 영문 소문자, 숫자, _, -만 사용 가능합니다.');
       return;
     }
@@ -70,6 +70,7 @@ export default function RegisterPage() {
     <div className="login-page">
       <div className="login-panel">
         <div className="login-header">
+          <img src="/images/logo.webp" alt="One of the Plans" className="login-logo" />
           <h1 className="game-title">One of the plans</h1>
           <p className="game-subtitle">MULTIPLAYER</p>
         </div>
@@ -127,17 +128,15 @@ export default function RegisterPage() {
               className={confirmMatch ? 'input-valid' : confirmMismatch ? 'input-invalid' : ''}
               aria-describedby="confirm-hint"
             />
-            {confirmMismatch && (
+            <span id="confirm-hint" className={`input-hint ${confirmMismatch ? 'input-hint-error' : confirmMatch ? 'input-hint-success' : ''}`}>
-              <span id="confirm-hint" className="input-hint input-hint-error">비밀번호가 일치하지 않습니다</span>
+              {confirmMismatch && '비밀번호가 일치하지 않습니다'}
-            )}
+              {confirmMatch && `비밀번호가 일치합니다 \u2713`}
-            {confirmMatch && (
+            </span>
-              <span id="confirm-hint" className="input-hint input-hint-success">비밀번호가 일치합니다 \u2713</span>
-            )}
           </div>
 
           {error && <p className="login-error" role="alert">{error}</p>}
 
-          <button type="submit" className="btn-login" disabled={loading}>
+          <button type="submit" className="btn-login btn-game" disabled={loading}>
             {loading ? '처리 중...' : '회원가입'}
           </button>
         </form>

src/pages/SSAFYCallbackPage.jsx

@@ -2,8 +2,9 @@ import { useEffect, useState, useRef } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import { ssafyCallback } from '../api/auth';
+import './AuthPage.css';
 
-// Inline styles are intentional for this simple callback/loading page — not worth a separate CSS file.
+// Inline styles are intentional for this simple callback/loading page — layout only, AuthPage.css handles buttons.
 export default function SSAFYCallbackPage() {
   const [error, setError] = useState('');
   const navigate = useNavigate();
@@ -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>

src/pages/WalletPage.css

@@ -367,50 +367,18 @@
   background: rgba(186, 205, 176, 0.08);
 }
 
-/* Wallet summary card (HomePage) */
+
-.wallet-summary {
+.wallet-logo {
-  background: rgba(186, 205, 176, 0.06);
+  height: 32px;
-  border: 1px solid rgba(186, 205, 176, 0.15);
+  width: auto;
-  border-radius: 10px;
-  padding: 20px 24px;
-  margin-bottom: 32px;
-  cursor: pointer;
-  transition: border-color 0.2s, background 0.2s;
 }
 
-.wallet-summary:hover {
+.wallet-tabs-divider {
-  border-color: rgba(186, 205, 176, 0.3);
+  width: 100%;
-  background: rgba(186, 205, 176, 0.09);
+  max-width: 300px;
-}
+  height: 16px;
-
+  background: url('/images/divider.webp') center/contain no-repeat;
-.wallet-summary-title {
+  margin: 0 auto;
-  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);
 }
 
 /* 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;

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