/* shared.jsx — 공통 컴포넌트, 목데이터, 아이콘 */ /* ---- Mock Data ---- */ const EMPLOYEE = { name: '김민준', dept: '생산 1팀', points: 15000, used: 8500, avatar: '김' }; const PRODUCTS = [ { id:1, name:'방한 작업복 상의', cat:'상의', pts:4500, thumb:'🧥', sizes:['S','M','L','XL','2XL'], stock:{S:10,M:15,L:8,XL:3,'2XL':0}, tag:'인기' }, { id:2, name:'방한 작업복 하의', cat:'하의', pts:3800, thumb:'👖', sizes:['S','M','L','XL','2XL'], stock:{S:5,M:12,L:10,XL:6,'2XL':2} }, { id:3, name:'여름 작업복 상의', cat:'상의', pts:2800, thumb:'👕', sizes:['S','M','L','XL','2XL'], stock:{S:20,M:25,L:18,XL:10,'2XL':5} }, { id:4, name:'여름 작업복 하의', cat:'하의', pts:2500, thumb:'🩳', sizes:['S','M','L','XL','2XL'], stock:{S:15,M:20,L:14,XL:8,'2XL':3} }, { id:5, name:'안전화 (경량형)', cat:'신발', pts:6800, thumb:'👟', sizes:['250','260','270','280','290'], stock:{'250':4,'260':8,'270':10,'280':5,'290':2} }, { id:6, name:'안전모 (ABS)', cat:'보호구', pts:3200, thumb:'⛑️', sizes:['FREE'], stock:{FREE:30}, tag:'재고부족' }, { id:7, name:'방진 마스크 (10개입)', cat:'보호구', pts:1500, thumb:'😷', sizes:['FREE'], stock:{FREE:50} }, { id:8, name:'내열 안전장갑', cat:'장갑', pts:1200, thumb:'🧤', sizes:['S','M','L'], stock:{S:20,M:30,L:15} }, { id:9, name:'안전 조끼 (형광)', cat:'안전', pts:2200, thumb:'🦺', sizes:['FREE'], stock:{FREE:25} }, { id:10, name:'방수 우비 (투피스)', cat:'우천용', pts:3500, thumb:'🌧️', sizes:['M','L','XL','2XL'], stock:{M:8,L:12,XL:6,'2XL':2} }, { id:11, name:'내한 방한복', cat:'동계용', pts:8500, thumb:'🧣', sizes:['M','L','XL','2XL'], stock:{M:5,L:7,XL:4,'2XL':1}, tag:'인기' }, { id:12, name:'안전화 (중보호)', cat:'신발', pts:8200, thumb:'🥾', sizes:['250','260','270','280','290'], stock:{'250':3,'260':6,'270':8,'280':4,'290':1} }, ]; const ORDERS = [ { id:'ORD-2024-0234', emp:'김민준', dept:'생산 1팀', items:'방한 작업복 상의 L', pts:4500, status:'pending', date:'2024-11-28' }, { id:'ORD-2024-0233', emp:'이서연', dept:'품질관리팀', items:'안전화 (경량형) 265', pts:6800, status:'approved', date:'2024-11-27' }, { id:'ORD-2024-0232', emp:'박지훈', dept:'생산 2팀', items:'방한 작업복 상의 XL, 방한 작업복 하의 XL', pts:8300, status:'shipped', date:'2024-11-25' }, { id:'ORD-2024-0231', emp:'최유나', dept:'물류팀', items:'내한 방한복 L', pts:8500, status:'delivered', date:'2024-11-22' }, { id:'ORD-2024-0230', emp:'정태민', dept:'생산 1팀', items:'방진 마스크 10개입', pts:1500, status:'rejected', date:'2024-11-20' }, { id:'ORD-2024-0229', emp:'강수진', dept:'안전팀', items:'안전 조끼 (형광) FREE', pts:2200, status:'delivered', date:'2024-11-18' }, ]; const EMPLOYEES = [ { id:'E001', name:'김민준', dept:'생산 1팀', position:'주임', pts:15000, total_used:8500 }, { id:'E002', name:'이서연', dept:'품질관리팀', position:'대리', pts:12000, total_used:6800 }, { id:'E003', name:'박지훈', dept:'생산 2팀', position:'사원', pts:18500, total_used:8300 }, { id:'E004', name:'최유나', dept:'물류팀', position:'주임', pts:9500, total_used:8500 }, { id:'E005', name:'정태민', dept:'생산 1팀', position:'사원', pts:21000, total_used:1500 }, { id:'E006', name:'강수진', dept:'안전팀', position:'대리', pts:14800, total_used:2200 }, ]; /* ---- Global Reactive Store ---- */ if (!window._store) { window._store = { banners: [ { id:1, tag:'2024 WINTER NEW ARRIVAL', title:'겨울 작업복\n신상 입고', sub:'내한 방한복부터 방수 우비까지\n이번 시즌 필수 아이템을 만나보세요', cta:'지금 보러가기', bg:'linear-gradient(130deg,#042C44 0%,#1B6EEA 100%)', thumb:'🧣', active:true, startDate:'', endDate:'' }, { id:2, tag:'SAFETY FIRST', title:'안전 보호구\n전 품목 보유', sub:'현장 안전의 시작은 올바른 보호구\n안전모부터 장갑까지 한 번에', cta:'안전 용품 보기', bg:'linear-gradient(130deg,#0A2540 0%,#316074 100%)', thumb:'⛑️', active:true, startDate:'', endDate:'' }, { id:3, tag:'BEST SELLER', title:'이번 달 인기\n작업복 TOP', sub:'동료들이 가장 많이 선택한\n베스트 작업복을 확인해보세요', cta:'베스트 보기', bg:'linear-gradient(130deg,#1B4FBF 0%,#65A3B2 100%)', thumb:'🧥', active:true, startDate:'', endDate:'' }, ], products: PRODUCTS.map(p => ({ ...p, active:true, featured:!!p.tag, desc:'' })), orders: ORDERS.map(o => ({ ...o })), employees: EMPLOYEES.map(e => ({ ...e, joinDate:'2023-01-15' })), _subs: new Set(), sub(fn) { this._subs.add(fn); return () => this._subs.delete(fn); }, pub() { this._subs.forEach(fn => fn()); }, }; } function useStore() { const [, tick] = React.useState(0); React.useEffect(() => { const unsub = window._store.sub(() => tick(n => n + 1)); return unsub; }, []); return window._store; } const WW_CONFIG = window.WORKWEAR_CONFIG || {}; const WW_SUPABASE = (window.supabase && WW_CONFIG.SUPABASE_URL && WW_CONFIG.SUPABASE_ANON_KEY) ? window.supabase.createClient(WW_CONFIG.SUPABASE_URL, WW_CONFIG.SUPABASE_ANON_KEY) : null; async function wwApi(path, init = {}) { if (!WW_SUPABASE) throw new Error('Supabase 설정이 필요합니다.'); const { data } = await WW_SUPABASE.auth.getSession(); const token = data.session?.access_token; if (!token) throw new Error('로그인이 필요합니다.'); const res = await fetch(`${WW_CONFIG.API_BASE}${path}`, { ...init, headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}`, ...(init.headers || {}) }, }); if (!res.ok) { const body = await res.json().catch(() => ({})); throw new Error(body?.error?.message || `API 오류 (${res.status})`); } const body = await res.json().catch(() => ({})); return Object.prototype.hasOwnProperty.call(body, 'data') ? body.data : body; } const WW = { client: WW_SUPABASE, async signIn(email, password) { const { error } = await WW_SUPABASE.auth.signInWithPassword({ email, password }); if (error) throw error; }, async signOut() { if (WW_SUPABASE) await WW_SUPABASE.auth.signOut(); }, listProducts: () => wwApi('/products'), listMyOrders: () => wwApi('/orders'), listAdminOrders: () => wwApi('/admin/orders'), listUsers: () => wwApi('/admin/users'), myPoints: () => wwApi('/points/my'), createOrder: (payload) => wwApi('/orders', { method: 'POST', body: JSON.stringify(payload) }), approveOrder: (id) => wwApi(`/orders/${id}/approve`, { method: 'POST' }), rejectOrder: (id, reason) => wwApi(`/orders/${id}/reject`, { method: 'POST', body: JSON.stringify({ reason }) }), grantPoints: (user_id, amount, note) => wwApi('/points/grant', { method: 'POST', body: JSON.stringify({ user_id, amount, note }) }), async bootstrap() { if (!WW_SUPABASE) return; const { data } = await WW_SUPABASE.auth.getUser(); const user = data.user; if (!user) return; const [products, myOrders, myPoints, users, adminOrders] = await Promise.all([ WW.listProducts().catch(() => []), WW.listMyOrders().catch(() => []), WW.myPoints().catch(() => ({ balance: EMPLOYEE.points })), WW.listUsers().catch(() => []), WW.listAdminOrders().catch(() => []), ]); const detailedProducts = await Promise.all((products || []).map(async (p) => { const detail = await wwApi(`/products/${p.id}`).catch(() => null); const variants = detail?.variants || []; const sizes = variants.length ? variants.map((v) => String(v.size)) : ['FREE']; const stock = variants.length ? variants.reduce((acc, v) => ({ ...acc, [String(v.size)]: Number(v.stock_qty || 0) }), {}) : { FREE: 0 }; const variantBySize = variants.reduce((acc, v) => ({ ...acc, [String(v.size)]: v.id }), {}); return { id: p.id, name: p.name, cat: p.category || '기타', pts: Number(p.point_price || 0), thumb: '📦', sizes, stock, variantBySize, tag: '', active: !!p.is_active, featured: false, desc: p.description || '', }; })); window._store.products = detailedProducts; window._store.orders = ((adminOrders && adminOrders.length ? adminOrders : myOrders) || []).map((o) => ({ id: o.id, emp: o.profiles?.full_name || o.profiles?.email || '-', dept: '-', items: `주문 #${String(o.id).slice(0, 8)}`, pts: Number(o.total_points || 0), status: o.status, date: String(o.created_at || '').slice(0, 10), })); window._store.employees = (users || []).map((u) => ({ id: u.id, name: u.full_name || u.email, dept: '-', position: u.role, pts: Number(u.point_balance || 0), total_used: 0, joinDate: String(u.created_at || '').slice(0, 10), })); EMPLOYEE.points = Number(myPoints?.balance || EMPLOYEE.points); window._store.pub(); }, }; const ICON_PATHS = { home: , catalog: <>, cart: <>, orders: <>, gauge: <>, approve: <>, points: <>, inventory: <>, search: <>, filter: <>, plus: <>, chevronR: , chevronL: , x: <>, check: , alert: <>, truck: <>, pkg: <>, banner: <>, users: <>, edit: <>, trash: <>, drag: <>, }; function Icon({ name, size = 16, color }) { return ( {ICON_PATHS[name]} ); } /* ---- Status helpers ---- */ function StatusChip({ status }) { const map = { pending: { label: '승인 대기', cls: 'chip-warn' }, approved: { label: '승인됨', cls: 'chip-info' }, shipped: { label: '배송 중', cls: 'chip-ok' }, delivered: { label: '수령 완료', cls: 'chip-neutral' }, rejected: { label: '반려됨', cls: 'chip-err' }, }; const s = map[status] || { label: status, cls: 'chip-neutral' }; return {s.label}; } function fmtPts(n) { return n.toLocaleString('ko-KR'); } /* ---- Sidebar ---- */ function Sidebar({ role, setRole, screen, setScreen, openCart, cartQty, onLogout }) { const store = useStore(); const pendingOrderCount = store.orders.filter(o => o.status === 'pending').length; const empNav = [ { id:'home', label:'홈', icon:'home' }, { id:'catalog', label:'카탈로그', icon:'catalog' }, { id:'cart', label:'장바구니', icon:'cart', dynamicBadge: cartQty > 0 ? String(cartQty) : null }, { id:'orders', label:'주문 내역', icon:'orders' }, ]; const adminNav = [ { id:'admin-dashboard', label:'대시보드', icon:'gauge' }, { id:'admin-orders', label:'주문 승인', icon:'approve', dynamicBadge: pendingOrderCount > 0 ? String(pendingOrderCount) : null }, { id:'admin-points', label:'포인트 지급', icon:'points' }, { id:'admin-inventory', label:'재고 관리', icon:'inventory' }, { type:'section', label:'관리 시스템' }, { id:'admin-products', label:'상품 관리', icon:'catalog' }, { id:'admin-banners', label:'배너 관리', icon:'banner' }, { id:'admin-order-mgmt', label:'주문 관리', icon:'truck' }, { id:'admin-employees', label:'직원 관리', icon:'users' }, ]; const nav = role === 'employee' ? empNav : adminNav; return ( ); } Object.assign(window, { Icon, StatusChip, fmtPts, Sidebar, useStore, PRODUCTS, ORDERS, EMPLOYEES, EMPLOYEE, WW, WW_CONFIG });