feat: add wallet UI with 4 tabs and HomePage summary
- chain.js: API wrapper with Idempotency-Key auto-generation - WalletPage: 4-tab container (wallet/assets/inventory/market) - WalletTab: balance, address (truncated+copy), key export - AssetsTab: asset list with detail expand, market listing - InventoryTab: read-only slot display - MarketTab: buy/cancel with confirm dialog, all/mine filter - WalletSummary: HomePage card with balance + stats - PrivateRoute guard for /wallet, header link on HomePage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
15
src/App.jsx
15
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={
|
||||
|
||||
@@ -26,7 +26,7 @@ export async function exportWalletKey(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 {}
|
||||
try { const body = await res.json(); err.message = body.message || err.message; } catch { /* ignore parse failure */ }
|
||||
throw err;
|
||||
}
|
||||
return res.json();
|
||||
|
||||
158
src/components/wallet/AssetsTab.jsx
Normal file
158
src/components/wallet/AssetsTab.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
39
src/components/wallet/InventoryTab.jsx
Normal file
39
src/components/wallet/InventoryTab.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
131
src/components/wallet/MarketTab.jsx
Normal file
131
src/components/wallet/MarketTab.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
45
src/components/wallet/WalletSummary.jsx
Normal file
45
src/components/wallet/WalletSummary.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
146
src/components/wallet/WalletTab.jsx
Normal file
146
src/components/wallet/WalletTab.jsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
470
src/pages/WalletPage.css
Normal file
470
src/pages/WalletPage.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
58
src/pages/WalletPage.jsx
Normal file
58
src/pages/WalletPage.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user