// Admin Data Management — Excel upload, image/text management, IndexedDB persistence // ═══════════════════════════════════════════════════════════ // IndexedDB Helper // ═══════════════════════════════════════════════════════════ const WU_DB_NAME = 'workup-admin'; const WU_DB_VERSION = 1; function openDB() { return new Promise((resolve, reject) => { const req = indexedDB.open(WU_DB_NAME, WU_DB_VERSION); req.onupgradeneeded = (e) => { const db = e.target.result; if (!db.objectStoreNames.contains('products')) db.createObjectStore('products', { keyPath: 'id', autoIncrement: true }); if (!db.objectStoreNames.contains('stores')) db.createObjectStore('stores', { keyPath: 'id', autoIncrement: true }); if (!db.objectStoreNames.contains('images')) db.createObjectStore('images', { keyPath: 'id', autoIncrement: true }); if (!db.objectStoreNames.contains('settings')) db.createObjectStore('settings', { keyPath: 'key' }); }; req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); }); } async function dbGetAll(storeName) { const db = await openDB(); return new Promise((resolve, reject) => { const tx = db.transaction(storeName, 'readonly'); const store = tx.objectStore(storeName); const req = store.getAll(); req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); }); } async function dbPut(storeName, data) { const db = await openDB(); return new Promise((resolve, reject) => { const tx = db.transaction(storeName, 'readwrite'); const store = tx.objectStore(storeName); const req = store.put(data); req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); }); } async function dbPutBulk(storeName, items) { const db = await openDB(); return new Promise((resolve, reject) => { const tx = db.transaction(storeName, 'readwrite'); const store = tx.objectStore(storeName); store.clear(); items.forEach(item => store.put(item)); tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); }); } async function dbDelete(storeName, id) { const db = await openDB(); return new Promise((resolve, reject) => { const tx = db.transaction(storeName, 'readwrite'); const store = tx.objectStore(storeName); const req = store.delete(id); req.onsuccess = () => resolve(); req.onerror = () => reject(req.error); }); } async function dbClear(storeName) { const db = await openDB(); return new Promise((resolve, reject) => { const tx = db.transaction(storeName, 'readwrite'); tx.objectStore(storeName).clear(); tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); }); } // File to base64 function fileToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); } // Excel parser using SheetJS async function parseExcel(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (e) => { try { const data = new Uint8Array(e.target.result); const wb = XLSX.read(data, { type: 'array' }); const sheets = {}; wb.SheetNames.forEach(name => { sheets[name] = XLSX.utils.sheet_to_json(wb.Sheets[name]); }); resolve(sheets); } catch (err) { reject(err); } }; reader.onerror = reject; reader.readAsArrayBuffer(file); }); } Object.assign(window, { WU_DB_NAME, WU_DB_VERSION, openDB, dbGetAll, dbPut, dbPutBulk, dbDelete, dbClear, fileToBase64, parseExcel }); // ═══════════════════════════════════════════════════════════ // Admin Dashboard Component // ═══════════════════════════════════════════════════════════ function AdminDashboard({ onBack }) { const [tab, setTab] = React.useState('products'); const [products, setProducts] = React.useState([]); const [stores, setStores] = React.useState([]); const [images, setImages] = React.useState([]); const [uploading, setUploading] = React.useState(false); const [msg, setMsg] = React.useState(null); const [stats, setStats] = React.useState({ products: 0, stores: 0, images: 0 }); // Load from IndexedDB on mount React.useEffect(() => { (async () => { const [p, s, i] = await Promise.all([dbGetAll('products'), dbGetAll('stores'), dbGetAll('images')]); setProducts(p); setStores(s); setImages(i); setStats({ products: p.length, stores: s.length, images: i.length }); })(); }, []); const flash = (text, type = 'ok') => { setMsg({ text, type }); setTimeout(() => setMsg(null), 3000); }; // ── Excel Upload ── const handleExcelUpload = async (e, target) => { const file = e.target.files[0]; if (!file) return; setUploading(true); try { const sheets = await parseExcel(file); const sheetName = Object.keys(sheets)[0]; const rows = sheets[sheetName]; if (!rows || rows.length === 0) { flash('빈 시트입니다', 'err'); setUploading(false); return; } const withId = rows.map((r, i) => ({ ...r, id: r.id || r.store_id || r.product_id || (i + 1) })); if (target === 'products') { await dbPutBulk('products', withId); setProducts(withId); setStats(s => ({ ...s, products: withId.length })); flash(`상품 ${withId.length}건 업로드 완료`); } else { await dbPutBulk('stores', withId); setStores(withId); setStats(s => ({ ...s, stores: withId.length })); flash(`매장 ${withId.length}건 업로드 완료`); } } catch (err) { flash('파싱 실패: ' + err.message, 'err'); } setUploading(false); e.target.value = ''; }; // ── Image Upload ── const handleImageUpload = async (e) => { const files = Array.from(e.target.files); if (!files.length) return; setUploading(true); const newImages = []; for (const f of files) { const b64 = await fileToBase64(f); const entry = { id: Date.now() + Math.random(), name: f.name, data: b64, description: '', uploadedAt: new Date().toISOString() }; await dbPut('images', entry); newImages.push(entry); } const all = [...images, ...newImages]; setImages(all); setStats(s => ({ ...s, images: all.length })); flash(`이미지 ${files.length}건 업로드 완료`); setUploading(false); e.target.value = ''; }; // ── Image description update ── const updateImageDesc = async (id, desc) => { const img = images.find(i => i.id === id); if (!img) return; const updated = { ...img, description: desc }; await dbPut('images', updated); setImages(images.map(i => i.id === id ? updated : i)); }; // ── Delete handlers ── const deleteImage = async (id) => { await dbDelete('images', id); const all = images.filter(i => i.id !== id); setImages(all); setStats(s => ({ ...s, images: all.length })); flash('이미지 삭제됨'); }; const clearStore = async (storeName) => { await dbClear(storeName); if (storeName === 'products') { setProducts([]); setStats(s => ({ ...s, products: 0 })); } if (storeName === 'stores') { setStores([]); setStats(s => ({ ...s, stores: 0 })); } if (storeName === 'images') { setImages([]); setStats(s => ({ ...s, images: 0 })); } flash(`${storeName} 데이터 초기화됨`); }; React.useEffect(() => { const esc = e => { if (e.key === 'Escape') onBack(); }; document.addEventListener('keydown', esc); return () => document.removeEventListener('keydown', esc); }, [onBack]); const tabs = [ ['products', '📦 상품 관리'], ['stores', '🏪 매장 데이터'], ['images', '📷 이미지 관리'], ['kpi', '📊 실시간 KPI'], ]; return (
{/* Sidebar */}
⚙ DATA ADMIN
{tabs.map(([k, l]) => ( ))}
{/* Quick stats */}
● INDEXED DB
{[['상품', stats.products], ['매장', stats.stores], ['이미지', stats.images]].map(([l, n]) => (
{l} {n}
))}
{/* Content */}
{/* Flash message */} {msg && (
{msg.text}
)} {uploading && (
)} {/* ── PRODUCTS TAB — direct input, not excel ── */} {tab === 'products' && ( )} {/* ── STORES TAB ── */} {tab === 'stores' && (
DATA ADMIN · STORES
매장 데이터 관리
매장 정보 엑셀 템플릿에 맞춰 업로드하세요.
{stores.length > 0 && }
EXPECTED COLUMNS
store_id · store_name · owner_name · region · city · address_road · latitude · longitude · hours_weekday · status · membership_status
{stores.length > 0 ? (
#
매장명
점주
지역
주소
영업시간
상태
{stores.slice(0, 50).map((s, i) => (
{i + 1}
{s.store_name || s['매장명'] || '—'}
{s.owner_name || s['점주'] || '—'}
{s.region || s['지역'] || '—'}
{s.address_road || s['주소'] || '—'}
{s.hours_weekday || s['영업시간'] || '—'}
{s.status || s['상태'] || '—'}
))} {stores.length > 50 &&
… 총 {stores.length}건
}
) : (
🏪
NO DATA
매장 엑셀 파일을 업로드해주세요
)}
)} {/* ── IMAGES TAB ── */} {tab === 'images' && (
DATA ADMIN · IMAGES
이미지 · 텍스트 관리
상품/매장 이미지를 업로드하고 설명을 추가하세요. IndexedDB에 저장됩니다.
{images.length > 0 && }
{images.length > 0 ? (
{images.map(img => (
{img.name}
{new Date(img.uploadedAt).toLocaleString('ko-KR')}