fix: suppress exhaustive-deps warnings in admin components

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

docs/superpowers/specs/2026-03-23-wallet-ui-design.md

@@ -0,0 +1,195 @@
+# 지갑 UI 설계
+
+> 작성일: 2026-03-23
+> 상태: 승인됨
+
+---
+
+## 개요
+
+웹 클라이언트(`a301_client`)에 블록체인 지갑 UI를 추가한다. 단일 `/wallet` 페이지에 4개 탭(지갑, 자산, 인벤토리, 마켓)으로 구성하고, HomePage에 잔액 요약 카드를 배치한다.
+
+---
+
+## 페이지 구조
+
+### 라우팅
+
+| 경로 | 컴포넌트 | 인증 |
+|------|----------|------|
+| `/wallet` | WalletPage | 로그인 필수 |
+
+`/wallet` 라우트 보호: 기존 `AdminRoute` 패턴을 참고하여 `PrivateRoute` 컴포넌트를 새로 만든다. 로그인하지 않은 유저는 `/login`으로 리다이렉트.
+
+기존 라우트는 변경하지 않는다.
+
+### HomePage 변경
+
+1. **헤더**: "지갑" 링크 추가 → `/wallet`로 이동
+2. **지갑 요약 카드**: DownloadSection 위에 배치
+   - TOL 잔액 (큰 글씨)
+   - 보유 자산 수, 장착 아이템 수
+   - 클릭 시 `/wallet`로 이동
+   - 로그인하지 않은 상태에서는 숨김
+   - 3개 API (`/balance`, `/assets`, `/inventory`) `Promise.all`로 병렬 호출
+   - 일부 API 실패 시: 실패한 항목만 "--"로 표시, 카드 자체는 숨기지 않음
+
+---
+
+## 탭 1: 지갑
+
+잔액, 지갑 주소, 키 내보내기.
+
+### 잔액 카드
+- TOL 잔액을 크게 표시
+- API: `GET /api/chain/balance`
+
+### 지갑 정보
+- 공개키: 축약 표시 (`a3b4...e1f2`) + 복사 버튼
+- 주소: 축약 표시 (`a3b4c5d6...e9f0a1b2`) + 복사 버튼
+- 클릭 시 클립보드에 전체 값 복사, 토스트로 "복사됨" 알림
+- API: `GET /api/chain/wallet`
+
+### 키 내보내기
+- 비밀번호 입력 필드 + "내보내기" 버튼
+- 성공 시: 개인키 hex를 화면에 표시 (복사 버튼 포함)
+- 경고 텍스트: "개인키를 안전하게 보관하세요"
+- 탭 이탈 시(다른 탭 클릭): 개인키 표시 상태 초기화 (보안)
+- 에러 처리:
+  - HTTP 401 → "비밀번호가 올바르지 않습니다"
+  - 기타 에러 → 토스트로 서버 에러 메시지 표시
+- API: `POST /api/chain/wallet/export` (body: `{"password": "..."}`)
+
+---
+
+## 탭 2: 자산
+
+보유 NFT 목록 + 상세 정보.
+
+### 자산 목록
+- 아이템 이름, 템플릿 이름, 자산 ID 표시
+- 거래 가능 여부 표시 ("거래 가능" / "거래 불가")
+- API 호출 전략:
+  1. `GET /api/chain/assets` → 자산 ID 배열 반환
+  2. 각 ID에 대해 `GET /api/chain/asset/:id`를 `Promise.all`로 **병렬 호출**
+  3. 개별 자산 로드 실패 시: 해당 자산만 "로드 실패" 표시, 나머지는 정상 표시
+- 로딩 중: 스피너 표시
+
+### 자산 상세 (클릭 시 펼치기)
+- 속성(properties) 키-값 표시
+- 거래 가능 여부
+- 마켓 등록 상태 (등록됨 / 미등록)
+- **마켓 등록 버튼**: 미등록 + 거래 가능한 자산에만 표시
+  - 클릭 시: 가격 입력 인라인 UI (펼쳐진 상세 영역 내 숫자 input + "등록" 버튼)
+  - `POST /api/chain/market/list` (body: `{"asset_id": "...", "price": N}`)
+  - Idempotency-Key 헤더 필요
+  - 성공 시: 토스트 알림 + 해당 자산 상태 갱신 (마켓 등록됨으로 변경)
+
+---
+
+## 탭 3: 인벤토리
+
+장착 슬롯 현황 (조회 전용).
+
+### 슬롯 목록
+- 슬롯 이름 + 장착된 아이템 이름/ID 표시
+- 빈 슬롯은 "비어있음"으로 표시 (점선 테두리)
+- 장착/해제 버튼 없음 (게임 내에서만 조작)
+- API: `GET /api/chain/inventory`
+
+---
+
+## 탭 4: 마켓
+
+NFT 마켓플레이스. 구매, 판매(자산 탭에서 연결), 취소.
+
+### 리스팅 목록
+- 전체 / 내 리스팅 필터 토글
+- 각 리스팅: 아이템 이름, 판매자 (축약 주소), 가격
+- "내 리스팅" 필터: 클라이언트에서 `/api/chain/wallet`으로 가져온 내 지갑 주소와 리스팅의 seller 필드를 비교하여 필터링
+- API: `GET /api/chain/market` → 활성 리스팅 목록
+- 미사용: `GET /api/chain/market/:id` — 리스팅 상세 모달이 없으므로 의도적으로 사용하지 않음
+
+### 구매
+- 타인의 리스팅에 "구매" 버튼
+- 확인 다이얼로그 (useConfirm 사용): "화염 활을 500 TOL에 구매하시겠습니까?"
+- `POST /api/chain/market/buy` (body: `{"listing_id": "..."}`)
+- Idempotency-Key 헤더 필요
+- 성공 시: 토스트 알림 + 리스팅 목록 새로고침 + 잔액 갱신
+- 실패 시: 서버 응답 에러 메시지를 토스트로 표시 (잔액 부족 등 포함)
+
+### 내 리스팅 취소
+- 내 리스팅에 "취소" 버튼 (빨간 테두리)
+- 확인 다이얼로그: "리스팅을 취소하시겠습니까?"
+- `POST /api/chain/market/cancel` (body: `{"listing_id": "..."}`)
+- Idempotency-Key 헤더 필요
+- 성공 시: 토스트 알림 + 리스팅 목록 새로고침
+
+---
+
+## API 호출 패턴
+
+### 기존 API 클라이언트 활용
+- 모든 API 호출은 `src/api/client.js`의 `apiFetch()` 경유
+- JWT 토큰 자동 첨부, 401 시 자동 refresh
+- 새 파일: `src/api/chain.js` — 체인 관련 API 래퍼 함수 모음
+
+### Idempotency-Key
+- 마켓 구매/등록/취소 등 트랜잭션 API에는 `Idempotency-Key` 헤더 필요
+- `chain.js` 래퍼 내부에서 `crypto.randomUUID()`로 자동 생성하여 헤더에 추가
+- 호출 측(컴포넌트)에서는 Idempotency-Key를 신경 쓸 필요 없음
+
+### 에러 처리
+- API 에러 시 토스트로 에러 메시지 표시
+- 네트워크 에러 시 기존 retry 로직 적용 (GET만)
+
+### 로딩 상태
+- 각 탭 진입 시: 중앙 스피너 표시 (기존 로딩 패턴과 동일)
+- WalletSummary: 인라인 스피너 또는 "--" placeholder
+
+---
+
+## 컴포넌트 구조
+
+```
+src/
+├── api/
+│   └── chain.js              # 체인 API 래퍼 (신규)
+├── pages/
+│   ├── WalletPage.jsx        # /wallet 페이지 (탭 컨테이너) (신규)
+│   └── WalletPage.css        # 지갑 페이지 스타일 (신규)
+├── components/
+│   └── wallet/               # 지갑 관련 컴포넌트 (신규)
+│       ├── WalletTab.jsx     # 탭 1: 잔액, 주소, 키 내보내기
+│       ├── AssetsTab.jsx     # 탭 2: 자산 목록 + 상세
+│       ├── InventoryTab.jsx  # 탭 3: 인벤토리 조회
+│       ├── MarketTab.jsx     # 탭 4: 마켓
+│       └── WalletSummary.jsx # HomePage 요약 카드
+```
+
+---
+
+## 스타일링
+
+- 기존 프로젝트 패턴 그대로: plain CSS, dark 테마
+- 색상: 기존 `#BACDB0` (sage green) accent 사용
+- 탭 UI: 하단 보더로 활성 탭 표시
+- 복사 버튼: 클릭 시 `navigator.clipboard.writeText()` + 토스트
+- 반응형: `@media (max-width: 768px)` 대응
+
+---
+
+## 변경 파일 요약
+
+| 파일 | 변경 |
+|------|------|
+| `src/api/chain.js` | 신규: 체인 API 래퍼 (Idempotency-Key 자동 생성) |
+| `src/pages/WalletPage.jsx` | 신규: 지갑 페이지 (탭 컨테이너) |
+| `src/pages/WalletPage.css` | 신규: 지갑 페이지 스타일 |
+| `src/components/wallet/WalletTab.jsx` | 신규: 잔액/주소/키 내보내기 |
+| `src/components/wallet/AssetsTab.jsx` | 신규: 자산 목록 + 상세 + 마켓 등록 |
+| `src/components/wallet/InventoryTab.jsx` | 신규: 인벤토리 조회 |
+| `src/components/wallet/MarketTab.jsx` | 신규: 마켓 (구매/취소) |
+| `src/components/wallet/WalletSummary.jsx` | 신규: 홈 요약 카드 |
+| `src/App.jsx` | 수정: `/wallet` 라우트 + PrivateRoute 추가 |
+| `src/pages/HomePage.jsx` | 수정: 헤더 링크 + WalletSummary 추가 |

src/App.jsx

@@ -9,6 +9,7 @@ import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import HomePage from './pages/HomePage';
 import AdminPage from './pages/AdminPage';
+import WalletPage from './pages/WalletPage';
 import SSAFYCallbackPage from './pages/SSAFYCallbackPage';
 
 function AuthRedirect() {
@@ -26,6 +27,12 @@ function AuthRedirect() {
   return null;
 }
 
+function PrivateRoute({ children }) {
+  const { user } = useAuth();
+  if (!user) return <Navigate to="/login" replace />;
+  return children;
+}
+
 function AdminRoute({ children }) {
   const { user } = useAuth();
   if (!user) return <Navigate to="/login" replace />;
@@ -43,6 +50,14 @@ function AppRoutes() {
         <Route path="/register" element={user ? <Navigate to="/" replace /> : <RegisterPage />} />
         <Route path="/auth/ssafy/callback" element={<SSAFYCallbackPage />} />
         <Route path="/" element={<HomePage />} />
+        <Route
+          path="/wallet"
+          element={
+            <PrivateRoute>
+              <WalletPage />
+            </PrivateRoute>
+          }
+        />
         <Route
           path="/admin"
           element={

src/api/chain.js

@@ -0,0 +1,72 @@
+import { apiFetch } from './client';
+
+const BASE = import.meta.env.VITE_API_BASE_URL || '';
+
+// --- 지갑 ---
+export async function getBalance() {
+  return apiFetch('/api/chain/balance');
+}
+
+export async function getWallet() {
+  return apiFetch('/api/chain/wallet');
+}
+
+// 키 내보내기는 비밀번호 오류 시 서버가 401을 반환하므로,
+// apiFetch의 401 자동 refresh/로그아웃을 우회하기 위해 직접 fetch한다.
+export async function exportWalletKey(password) {
+  const token = localStorage.getItem('token');
+  const headers = { 'Content-Type': 'application/json' };
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+  const res = await fetch(BASE + '/api/chain/wallet/export', {
+    method: 'POST',
+    headers,
+    credentials: 'include',
+    body: JSON.stringify({ password }),
+  });
+  if (!res.ok) {
+    const err = new Error(res.status === 401 ? '비밀번호가 올바르지 않습니다' : '키 내보내기에 실패했습니다');
+    err.status = res.status;
+    try { const body = await res.json(); err.message = body.message || err.message; } catch { /* ignore parse failure */ }
+    throw err;
+  }
+  return res.json();
+}
+
+// --- 자산 ---
+export async function getAssets() {
+  return apiFetch('/api/chain/assets');
+}
+
+export async function getAsset(id) {
+  return apiFetch(`/api/chain/asset/${id}`);
+}
+
+// --- 인벤토리 ---
+export async function getInventory() {
+  return apiFetch('/api/chain/inventory');
+}
+
+// --- 마켓 ---
+export async function getMarketListings() {
+  return apiFetch('/api/chain/market');
+}
+
+function idempotentPost(path, body) {
+  return apiFetch(path, {
+    method: 'POST',
+    headers: { 'Idempotency-Key': crypto.randomUUID() },
+    body: JSON.stringify(body),
+  });
+}
+
+export async function listOnMarket(assetId, price) {
+  return idempotentPost('/api/chain/market/list', { asset_id: assetId, price });
+}
+
+export async function buyFromMarket(listingId) {
+  return idempotentPost('/api/chain/market/buy', { listing_id: listingId });
+}
+
+export async function cancelListing(listingId) {
+  return idempotentPost('/api/chain/market/cancel', { listing_id: listingId });
+}

src/components/admin/DownloadAdmin.jsx

@@ -26,7 +26,7 @@ export default function DownloadAdmin() {
       .finally(() => setLoading(false));
   };
 
-  // eslint-disable-next-line react-hooks/set-state-in-effect -- initial data fetch on mount
+  // eslint-disable-next-line react-hooks/set-state-in-effect, react-hooks/exhaustive-deps -- initial data fetch on mount
   useEffect(() => { load(); }, []);
 
   if (loading) {

src/components/admin/UserAdmin.jsx

@@ -30,7 +30,7 @@ export default function UserAdmin() {
       })
       .finally(() => setLoading(false));
   };
-  // eslint-disable-next-line react-hooks/set-state-in-effect -- initial data fetch on mount
+  // eslint-disable-next-line react-hooks/set-state-in-effect, react-hooks/exhaustive-deps -- initial data fetch on mount
   useEffect(() => { load(0); }, []);
 
   const handleRoleToggle = async (u) => {

src/components/wallet/AssetsTab.jsx

@@ -0,0 +1,158 @@
+import { useState, useEffect, useCallback, Fragment } from 'react';
+import { getAssets, getAsset, listOnMarket } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+
+export default function AssetsTab() {
+  const toast = useToast();
+  const [assets, setAssets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [expanded, setExpanded] = useState(null);
+  const [listingAsset, setListingAsset] = useState(null);
+  const [listingPrice, setListingPrice] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    getAssets()
+      .then((ids) => {
+        if (!ids || ids.length === 0) {
+          setAssets([]);
+          return;
+        }
+        return Promise.all(
+          ids.map((id) =>
+            getAsset(id)
+              .then((data) => ({ ...data, _loaded: true }))
+              .catch(() => ({ id, _loaded: false }))
+          )
+        ).then(setAssets);
+      })
+      .catch(() => {
+        toast.error('자산 목록을 불러오지 못했습니다.');
+      })
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const toggleExpand = (id) => {
+    setExpanded((prev) => (prev === id ? null : id));
+    setListingAsset(null);
+    setListingPrice('');
+  };
+
+  const handleList = async (assetId) => {
+    const price = Number(listingPrice);
+    if (!price || price <= 0) return;
+    setSubmitting(true);
+    try {
+      await listOnMarket(assetId, price);
+      toast.success('마켓에 등록되었습니다.');
+      setAssets((prev) =>
+        prev.map((a) => (a.id === assetId ? { ...a, listed: true } : a))
+      );
+      setListingAsset(null);
+      setListingPrice('');
+    } catch (err) {
+      toast.error(err.message || '마켓 등록에 실패했습니다.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+  if (assets.length === 0) return <div className="wallet-empty">보유 자산이 없습니다</div>;
+
+  return (
+    <div>
+      {assets.map((asset) => (
+        <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>
+                ) : (
+                  <span className="wallet-tag wallet-tag-no">미등록</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>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/wallet/InventoryTab.jsx

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { getInventory } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+
+export default function InventoryTab() {
+  const toast = useToast();
+  const [slots, setSlots] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    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
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+  if (!slots || slots.length === 0) return <div className="wallet-empty">인벤토리가 비어있습니다</div>;
+
+  return (
+    <div>
+      {slots.map((slot, i) => {
+        const isEmpty = !slot.item_name && !slot.item_id;
+        return (
+          <div key={slot.slot_name || i} className={`inv-slot${isEmpty ? ' inv-slot-empty' : ''}`}>
+            <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '0.85rem' }}>
+              {slot.slot_name}
+            </span>
+            <span style={{ color: isEmpty ? 'rgba(255,255,255,0.25)' : '#fff', fontSize: '0.9rem' }}>
+              {isEmpty ? '비어있음' : `${slot.item_name} #${slot.item_id}`}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/wallet/MarketTab.jsx

@@ -0,0 +1,131 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getMarketListings, getWallet, buyFromMarket, cancelListing } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+import { useConfirm } from '../confirm/useConfirm';
+
+function truncateAddr(addr) {
+  if (!addr || addr.length <= 12) return addr || '';
+  return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+}
+
+export default function MarketTab() {
+  const toast = useToast();
+  const confirm = useConfirm();
+  const [listings, setListings] = useState([]);
+  const [myAddress, setMyAddress] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState('all');
+  const [processing, setProcessing] = useState(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    Promise.all([getMarketListings(), getWallet()])
+      .then(([l, w]) => {
+        setListings(l || []);
+        setMyAddress(w?.address || '');
+      })
+      .catch(() => {
+        toast.error('마켓 정보를 불러오지 못했습니다.');
+      })
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const handleBuy = async (listing) => {
+    const ok = await confirm(
+      `${listing.item_name || '아이템'}을(를) ${Number(listing.price).toLocaleString()} TOL에 구매하시겠습니까?`
+    );
+    if (!ok) return;
+    setProcessing(listing.listing_id);
+    try {
+      await buyFromMarket(listing.listing_id);
+      toast.success('구매가 완료되었습니다.');
+      load();
+    } catch (err) {
+      toast.error(err.message || '구매에 실패했습니다.');
+    } finally {
+      setProcessing(null);
+    }
+  };
+
+  const handleCancel = async (listing) => {
+    const ok = await confirm('리스팅을 취소하시겠습니까?');
+    if (!ok) return;
+    setProcessing(listing.listing_id);
+    try {
+      await cancelListing(listing.listing_id);
+      toast.success('리스팅이 취소되었습니다.');
+      load();
+    } catch (err) {
+      toast.error(err.message || '취소에 실패했습니다.');
+    } finally {
+      setProcessing(null);
+    }
+  };
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+
+  const filtered = filter === 'mine'
+    ? listings.filter((l) => l.seller === myAddress)
+    : listings;
+
+  return (
+    <div>
+      <div className="market-filter">
+        <button
+          className={`market-filter-btn${filter === 'all' ? ' active' : ''}`}
+          onClick={() => setFilter('all')}
+        >
+          전체
+        </button>
+        <button
+          className={`market-filter-btn${filter === 'mine' ? ' active' : ''}`}
+          onClick={() => setFilter('mine')}
+        >
+          내 리스팅
+        </button>
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="wallet-empty">
+          {filter === 'mine' ? '내 리스팅이 없습니다' : '등록된 리스팅이 없습니다'}
+        </div>
+      ) : (
+        filtered.map((listing) => {
+          const isMine = listing.seller === myAddress;
+          return (
+            <div key={listing.listing_id} className="market-item">
+              <div>
+                <strong style={{ color: '#fff' }}>{listing.item_name || '아이템'}</strong>
+                <span className="market-seller" style={{ marginLeft: 12 }}>
+                  {truncateAddr(listing.seller)}
+                </span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                <span className="market-price">{Number(listing.price).toLocaleString()} TOL</span>
+                {isMine ? (
+                  <button
+                    className="btn-danger-outline"
+                    disabled={processing === listing.listing_id}
+                    onClick={() => handleCancel(listing)}
+                  >
+                    {processing === listing.listing_id ? '처리 중...' : '취소'}
+                  </button>
+                ) : (
+                  <button
+                    className="btn-primary"
+                    disabled={processing === listing.listing_id}
+                    onClick={() => handleBuy(listing)}
+                  >
+                    {processing === listing.listing_id ? '처리 중...' : '구매'}
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}

src/components/wallet/WalletSummary.jsx

@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getBalance, getAssets, getInventory } from '../../api/chain';
+import '../../pages/WalletPage.css';
+
+export default function WalletSummary() {
+  const navigate = useNavigate();
+  const [balance, setBalance] = useState(null);
+  const [assetCount, setAssetCount] = useState(null);
+  const [equippedCount, setEquippedCount] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([
+      getBalance().catch(() => null),
+      getAssets().catch(() => null),
+      getInventory().catch(() => null),
+    ]).then(([b, assets, inv]) => {
+      setBalance(b?.balance != null ? b.balance : null);
+      setAssetCount(assets != null ? assets.length : null);
+      setEquippedCount(
+        inv != null ? inv.filter((s) => s.item_name || s.item_id).length : null
+      );
+    }).finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return null;
+
+  return (
+    <div className="wallet-summary" onClick={() => navigate('/wallet')}>
+      <h3 className="wallet-summary-title">내 지갑</h3>
+      <p className="wallet-summary-balance">
+        {balance != null ? `${Number(balance).toLocaleString()} TOL` : '-- TOL'}
+      </p>
+      <div className="wallet-summary-stats">
+        <span className="wallet-summary-stat">
+          보유 자산 <strong>{assetCount != null ? assetCount : '--'}</strong>
+        </span>
+        <span className="wallet-summary-stat">
+          장착 아이템 <strong>{equippedCount != null ? equippedCount : '--'}</strong>
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/wallet/WalletTab.jsx

@@ -0,0 +1,146 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getBalance, getWallet, exportWalletKey } from '../../api/chain';
+import { useToast } from '../toast/useToast';
+
+function truncate(str, startLen = 4, endLen = 4) {
+  if (!str || str.length <= startLen + endLen + 3) return str || '';
+  return `${str.slice(0, startLen)}...${str.slice(-endLen)}`;
+}
+
+export default function WalletTab() {
+  const toast = useToast();
+  const [balance, setBalance] = useState(null);
+  const [wallet, setWallet] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const [password, setPassword] = useState('');
+  const [privateKey, setPrivateKey] = useState('');
+  const [exportError, setExportError] = useState('');
+  const [exporting, setExporting] = useState(false);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    Promise.all([getBalance(), getWallet()])
+      .then(([b, w]) => {
+        setBalance(b);
+        setWallet(w);
+      })
+      .catch(() => {
+        toast.error('지갑 정보를 불러오지 못했습니다.');
+      })
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  // 탭 이탈 시 개인키 초기화
+  useEffect(() => {
+    return () => {
+      setPrivateKey('');
+      setPassword('');
+      setExportError('');
+    };
+  }, []);
+
+  const copyToClipboard = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} 복사됨`);
+    } catch {
+      toast.error('복사에 실패했습니다.');
+    }
+  };
+
+  const handleExport = async (e) => {
+    e.preventDefault();
+    if (!password) return;
+    setExportError('');
+    setExporting(true);
+    try {
+      const data = await exportWalletKey(password);
+      setPrivateKey(data.private_key);
+    } catch (err) {
+      if (err.status === 401) {
+        setExportError(err.message);
+      } else {
+        toast.error(err.message || '키 내보내기에 실패했습니다.');
+      }
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  if (loading) return <div className="wallet-spinner">불러오는 중...</div>;
+
+  return (
+    <>
+      {/* 잔액 카드 */}
+      <div className="wallet-card">
+        <h3 className="wallet-card-title">TOL 잔액</h3>
+        <p className="wallet-balance">
+          {balance?.balance != null ? Number(balance.balance).toLocaleString() : '--'}
+        </p>
+      </div>
+
+      {/* 지갑 정보 */}
+      {wallet && (
+        <div className="wallet-card">
+          <h3 className="wallet-card-title">지갑 정보</h3>
+
+          <div style={{ marginBottom: 12 }}>
+            <div className="wallet-label">공개키</div>
+            <div className="wallet-row">
+              <span className="wallet-mono">{truncate(wallet.public_key, 4, 4)}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(wallet.public_key, '공개키')}>
+                복사
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <div className="wallet-label">주소</div>
+            <div className="wallet-row">
+              <span className="wallet-mono">{truncate(wallet.address, 8, 8)}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(wallet.address, '주소')}>
+                복사
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 키 내보내기 */}
+      <div className="wallet-card">
+        <h3 className="wallet-card-title">개인키 내보내기</h3>
+
+        {!privateKey ? (
+          <form onSubmit={handleExport} style={{ display: 'flex', gap: 8 }}>
+            <input
+              type="password"
+              className="wallet-input"
+              placeholder="비밀번호 입력"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              style={{ flex: 1 }}
+            />
+            <button type="submit" className="btn-primary" disabled={!password || exporting}>
+              {exporting ? '처리 중...' : '내보내기'}
+            </button>
+          </form>
+        ) : (
+          <div>
+            <div className="wallet-row" style={{ marginBottom: 8 }}>
+              <span className="wallet-mono" style={{ flex: 1 }}>{privateKey}</span>
+              <button className="btn-copy" onClick={() => copyToClipboard(privateKey, '개인키')}>
+                복사
+              </button>
+            </div>
+            <p className="wallet-warning">개인키를 안전하게 보관하세요</p>
+          </div>
+        )}
+
+        {exportError && <p className="wallet-error-text">{exportError}</p>}
+      </div>
+    </>
+  );
+}

src/pages/HomePage.jsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import { useAuth } from '../context/useAuth';
 import DownloadSection from '../components/DownloadSection';
+import WalletSummary from '../components/wallet/WalletSummary';
 import AnnouncementBoard from '../components/AnnouncementBoard';
 import './HomePage.css';
 
@@ -15,6 +16,7 @@ export default function HomePage() {
           {user ? (
             <>
               <span className="home-username">{user.username}</span>
+              <Link to="/wallet" className="btn-admin-link">지갑</Link>
               {user.role === 'admin' && (
                 <Link to="/admin" className="btn-admin-link">관리자</Link>
               )}
@@ -34,6 +36,7 @@ export default function HomePage() {
       </section>
 
       <main className="home-main">
+        {user && <WalletSummary />}
         <DownloadSection />
         <AnnouncementBoard />
       </main>

src/pages/WalletPage.css

@@ -0,0 +1,470 @@
+.wallet-page {
+  min-height: 100vh;
+  background-color: #2E2C2F;
+}
+
+.wallet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 32px;
+  border-bottom: 1px solid rgba(186, 205, 176, 0.1);
+}
+
+.wallet-header-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.wallet-home-link {
+  font-size: 0.85rem;
+  color: rgba(186, 205, 176, 0.6);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.wallet-home-link:hover {
+  color: #BACDB0;
+}
+
+.wallet-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.wallet-header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.wallet-username {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.btn-wallet-logout {
+  padding: 8px 16px;
+  background: transparent;
+  color: rgba(186, 205, 176, 0.7);
+  border: 1px solid rgba(186, 205, 176, 0.25);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-wallet-logout:hover {
+  background: rgba(186, 205, 176, 0.08);
+}
+
+.wallet-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 16px 32px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.wallet-tab {
+  padding: 10px 24px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.45);
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+  margin-bottom: -1px;
+}
+
+.wallet-tab:hover {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.wallet-tab.active {
+  color: #BACDB0;
+  border-bottom-color: #BACDB0;
+}
+
+.wallet-main {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 32px 24px 80px;
+}
+
+/* === Tab content shared styles === */
+
+.wallet-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(186, 205, 176, 0.12);
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 20px;
+}
+
+.wallet-card-title {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 0.08em;
+  margin: 0 0 12px;
+}
+
+.wallet-balance {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.wallet-mono {
+  font-family: monospace;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.7);
+  word-break: break-all;
+}
+
+.wallet-label {
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 4px;
+}
+
+.wallet-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.btn-copy {
+  padding: 4px 12px;
+  background: transparent;
+  color: rgba(186, 205, 176, 0.6);
+  border: 1px solid rgba(186, 205, 176, 0.2);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+}
+
+.btn-copy:hover {
+  background: rgba(186, 205, 176, 0.08);
+}
+
+.btn-primary {
+  padding: 8px 20px;
+  background: #BACDB0;
+  color: #2E2C2F;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+.btn-primary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-danger-outline {
+  padding: 8px 20px;
+  background: transparent;
+  color: #e57373;
+  border: 1px solid rgba(229, 115, 115, 0.4);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-danger-outline:hover {
+  background: rgba(229, 115, 115, 0.08);
+}
+
+.wallet-input {
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(186, 205, 176, 0.2);
+  border-radius: 6px;
+  color: #fff;
+  font-size: 0.85rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.wallet-input:focus {
+  border-color: rgba(186, 205, 176, 0.5);
+}
+
+.wallet-input::placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.wallet-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.9rem;
+}
+
+.wallet-empty {
+  text-align: center;
+  padding: 40px 0;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 0.9rem;
+}
+
+.wallet-error-text {
+  color: #e57373;
+  font-size: 0.85rem;
+  margin-top: 8px;
+}
+
+.wallet-warning {
+  color: #ffb74d;
+  font-size: 0.8rem;
+  margin-top: 8px;
+}
+
+.wallet-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.wallet-tag-ok {
+  background: rgba(186, 205, 176, 0.15);
+  color: #BACDB0;
+}
+
+.wallet-tag-no {
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.wallet-tag-listed {
+  background: rgba(78, 168, 222, 0.15);
+  color: #4ea8de;
+}
+
+/* Asset list */
+.asset-item {
+  border: 1px solid rgba(186, 205, 176, 0.1);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.asset-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.asset-header:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.asset-detail {
+  padding: 0 16px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.asset-props {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 16px;
+  font-size: 0.85rem;
+  margin: 12px 0;
+}
+
+.asset-prop-key {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.asset-prop-val {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Inventory slots */
+.inv-slot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border: 1px solid rgba(186, 205, 176, 0.1);
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.inv-slot-empty {
+  border-style: dashed;
+  color: rgba(255, 255, 255, 0.25);
+}
+
+/* Market listings */
+.market-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border: 1px solid rgba(186, 205, 176, 0.1);
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.market-price {
+  font-weight: 600;
+  color: #BACDB0;
+}
+
+.market-seller {
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.market-filter {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.market-filter-btn {
+  padding: 6px 16px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.market-filter-btn.active {
+  color: #BACDB0;
+  border-color: rgba(186, 205, 176, 0.4);
+  background: rgba(186, 205, 176, 0.08);
+}
+
+/* Wallet 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-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);
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .wallet-header {
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px;
+  }
+
+  .wallet-header-left {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .wallet-header-right {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .wallet-tabs {
+    padding: 12px 16px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .wallet-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .wallet-tab {
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-height: 44px;
+  }
+
+  .wallet-main {
+    padding: 20px 12px 60px;
+  }
+
+  .wallet-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .wallet-summary-stats {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .market-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+}

src/pages/WalletPage.jsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/useAuth';
+import WalletTab from '../components/wallet/WalletTab';
+import AssetsTab from '../components/wallet/AssetsTab';
+import InventoryTab from '../components/wallet/InventoryTab';
+import MarketTab from '../components/wallet/MarketTab';
+import './WalletPage.css';
+
+const TABS = [
+  { key: 'wallet', label: '지갑' },
+  { key: 'assets', label: '자산' },
+  { key: 'inventory', label: '인벤토리' },
+  { key: 'market', label: '마켓' },
+];
+
+export default function WalletPage() {
+  const { user, logout } = useAuth();
+  const [tab, setTab] = useState('wallet');
+
+  return (
+    <div className="wallet-page">
+      <header className="wallet-header">
+        <div className="wallet-header-left">
+          <Link to="/" className="wallet-home-link">← 메인으로</Link>
+          <h1 className="wallet-title">지갑</h1>
+        </div>
+        <div className="wallet-header-right">
+          <span className="wallet-username">{user?.username}</span>
+          <button className="btn-wallet-logout" onClick={logout}>로그아웃</button>
+        </div>
+      </header>
+
+      <div className="wallet-tabs" role="tablist">
+        {TABS.map((t) => (
+          <button
+            key={t.key}
+            role="tab"
+            id={`tab-${t.key}`}
+            aria-selected={tab === t.key}
+            aria-controls={`tabpanel-${t.key}`}
+            className={`wallet-tab${tab === t.key ? ' active' : ''}`}
+            onClick={() => setTab(t.key)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <main className="wallet-main" role="tabpanel" id={`tabpanel-${tab}`} aria-labelledby={`tab-${tab}`}>
+        {tab === 'wallet' && <WalletTab />}
+        {tab === 'assets' && <AssetsTab />}
+        {tab === 'inventory' && <InventoryTab />}
+        {tab === 'market' && <MarketTab />}
+      </main>
+    </div>
+  );
+}