{/* ══ 히어로 배너 ══ */}

{activeBanners.map((sl, i) => (

{sl.tag}

{sl.title}

{sl.sub}

{sl.thumb}

))} {/* 도트 인디케이터 */}

{activeBanners.map((_, i) => (

{/* ══ 카테고리 퀵 메뉴 ══ */}

{CAT_MENU.map(cat => ( ))}

{/* ══ 추천 상품 슬라이더 ══ */}

이번 달 추천 상품

{featured.map(p => { const isHov = hovProd===p.id; return (

setHovProd(p.id)} onMouseLeave={() => setHovProd(null)} onClick={() => { setSelectedProduct(p); setScreen('detail'); }} style={{ width:192, flexShrink:0, ...card, borderRadius:16, overflow:'hidden', cursor:'pointer', scrollSnapAlign:'start', boxShadow: isHov ? '0 8px 24px rgba(10,37,64,0.11)' : '0 2px 8px rgba(10,37,64,0.06)', transform: isHov ? 'translateY(-3px)' : 'translateY(0)', transition:'box-shadow 220ms, transform 220ms', }} >

{p.thumb}

{/* 담기 슬라이드업 */}

{p.tag && (

{p.tag}

)}

{p.cat}

{p.name}

{fmtPts(p.pts)}P

); })}

{/* ══ 최근 주문 (컴팩트) ══ */}

최근 주문

{recentOrders.map(order => { const sc = HOME_STATUS[order.status] || HOME_STATUS.delivered; return (

{order.items}

{order.date}

{sc.label}

); })}

); } /* ---- 카탈로그 화면 (나이키 스타일) ---- */ function EmployeeCatalog({ setScreen, setSelectedProduct }) { const store = useStore(); const [search, setSearch] = useEmp(''); const [cat, setCat] = useEmp('전체'); const cats = ['전체', '상의', '하의', '신발', '보호구', '장갑', '안전', '동계용', '우천용']; const filtered = store.products.filter(p => p.active && (cat === '전체' || p.cat === cat) && (search === '' || p.name.includes(search)) ); return (

{cats.map(c => ( ))}

setSearch(e.target.value)} />

{filtered.length}개 상품

{filtered.map(p => (

{setSelectedProduct(p); setScreen('detail');}}>

{p.thumb}

{p.cat}

{p.name}

{p.colors?.length > 0 && (

{p.colors.slice(0,4).map(c => ( ))} {p.colors.length > 4 && ( +{p.colors.length - 4} )}

)}

{fmtPts(p.pts)} P

))}

); } /* ---- 상품 상세 화면 (나이키 스타일) ---- */ function ProductDetail({ product, setScreen, setSelectedProduct, cart, setCart, openCart }) { const store = useStore(); const [color, setColor] = useEmp(product?.colors?.[0] || null); const [size, setSize] = useEmp(null); const [added, setAdded] = useEmp(false); const [activeThumb, setActiveThumb] = useEmp(0); const [openDisclosure, setOpenDisclosure] = useEmp(null); if (!product) return null; const NKF = "'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif"; const colors = product.colors || []; const needsColor = colors.length > 0; const selectedColor = needsColor ? color : null; const selectedStock = selectedColor && product.stockByColorSize ? product.stockByColorSize[selectedColor.id] || {} : product.stock; const canAddToCart = (!needsColor || selectedColor) && !!size; // 더미 썸네일 (동일 이모지 각도 변형 표현) const thumbs = [ { bg:'#f0f0f0', label:'정면' }, { bg:'#e8e8e8', label:'측면' }, { bg:'#ececec', label:'후면' }, { bg:'#f4f4f4', label:'디테일' }, { bg:'#efefef', label:'착용' }, ]; const recommendations = store.products.filter(p => p.active && p.id !== product.id).slice(0, 3); function addToCart() { if (!canAddToCart) return; setCart(prev => { const colorId = selectedColor?.id || 'default'; const idx = prev.findIndex(i=>i.id===product.id && i.size===size && (i.color?.id || 'default')===colorId); if (idx >= 0) { const next = [...prev]; next[idx] = { ...next[idx], qty: (next[idx].qty || 1) + 1 }; return next; } return [...prev, { ...product, color: selectedColor, size, variant_id: selectedColor ? product.variantByColorSize?.[selectedColor.id]?.[size] || null : product.variantBySize?.[size] || null, qty: 1, }]; }); setAdded(true); setTimeout(()=>setAdded(false), 1800); } return (

{/* 뒤로 가기 */}

{/* 본문 */}

{/* 좌측 세로 썸네일 */}

{thumbs.map((t,i)=>(

setActiveThumb(i)} style={{ width:46, height:56, borderRadius:4, background:t.bg, display:'flex', alignItems:'center', justifyContent:'center', fontSize:20, cursor:'pointer', border: activeThumb===i ? '1.5px solid #111' : '1.5px solid transparent', transition:'border-color 120ms', }}> {product.thumb}

))}

{/* 메인 이미지 */}

{product.imageUrl ? {product.name}

: {product.thumb}} {product.tag==='인기' && ( 인기 )}

{/* 우측 상품 정보 */}

{/* 카테고리 + 이름 + 가격 */}

{product.cat}

{product.name}

{fmtPts(product.pts)}P

{/* 색상 선택 */} {needsColor && ( <>

색상 선택 {selectedColor && {selectedColor.name}}

{!selectedColor &&

색상을 선택해주세요

}

{colors.map(c => { const isSelected = selectedColor?.id === c.id; return ( ); })}

)} {/* 사이즈 선택 */}

사이즈 선택 사이즈 가이드

{!size &&

사이즈를 선택해주세요

}

{product.sizes.map(s => { const stockQty = selectedStock[s] || 0; const inStock = stockQty > 0; const isSelected = size === s; return ( ); })}

{/* 재고 안내 */} {size && selectedStock[size] <= 3 && selectedStock[size] > 0 && (

이 조합은 {selectedStock[size]}개만 남았어요.

)} {/* 장바구니 CTA */} {/* ── 요약 설명 ── */} {product.desc && (

{product.desc}

)} {/* ── disclosure rows ── */} {[ { key:'info', label:'상품 정보', content: product.detailInfo || '100% 폴리에스터 소재, 현장 작업에 최적화된 내구성 원단. 반사 테이프 적용으로 야간 안전성 확보.' }, { key:'ship', label:'배송 안내', content: product.shippingInfo || '승인 후 2~3 영업일 내 발송. 사내 물류팀을 통해 근무지로 배송됩니다.' }, { key:'return', label:'교환·반품', content: product.returnInfo || '수령 후 7일 이내 미착용 상태에서 교환 가능. 담당자에게 문의 후 반품 절차 안내 받으세요.' }, ].map(d => (

{openDisclosure===d.key && (

{d.content}

)}

))}

{/* 다른 제품 추천 */}

다른 제품 추천

비슷한 카테고리의 다른 제품을 확인해보세요.

{recommendations.map(p => (

{ setSelectedProduct?.(p); setScreen('detail'); }} style={{cursor:'pointer'}}>

{p.imageUrl ? {p.name}

: p.thumb}

{p.cat}

{p.name}

{fmtPts(p.pts)}P

))}

); } /* ---- 장바구니 화면 ---- */ function EmployeeCart({ cart, setCart, setScreen }) { const [submitted, setSubmitted] = useEmp(false); const total = cart.reduce((s,i)=>s+i.pts, 0); const remaining = EMPLOYEE.points - total; function removeItem(idx) { setCart(prev => prev.filter((_,i)=>i!==idx)); } function submitOrder() { setSubmitted(true); setTimeout(()=>{setCart([]);setSubmitted(false);setScreen('orders');}, 2000); } if (submitted) return (

주문이 접수됐어요

관리자 승인 후 배송이 시작됩니다.

); if (cart.length === 0) return (

장바구니가 비어있어요

카탈로그에서 작업복을 담아보세요.

); return (

{/* 아이템 목록 */}

장바구니 ({cart.length}개)

{cart.map((item, idx) => (

{item.thumb}

{item.name}

{item.color ? `${item.color.name} · ` : ''}사이즈 {item.size} · {item.cat}

{fmtPts(item.pts)}P

))}

{/* 결제 요약 */}

주문 요약

상품 합계{fmtPts(total)}P

현재 포인트{fmtPts(EMPLOYEE.points)}P

결제 후 잔액{fmtPts(remaining)}P

{remaining < 0 &&

포인트가 부족해요. {fmtPts(Math.abs(remaining))}P 초과됩니다.

}

); } /* ---- 주문 내역 화면 ---- */ function EmployeeOrders() { const store = useStore(); const [filter, setFilter] = useEmp('전체'); const statusFilters = ['전체','pending','approved','shipped','delivered','rejected']; const labelMap = { 전체:'전체', pending:'대기', approved:'승인', shipped:'배송중', delivered:'완료', rejected:'반려' }; const filtered = filter==='전체' ? store.orders : store.orders.filter(o=>o.status===filter); return (

{statusFilters.map(f=>)}

{filtered.map(o=>( ))}

주문번호	상품	포인트	상태	날짜
{o.id}	{o.items}	{fmtPts(o.pts)}P		{o.date}

{filtered.length===0 && (

주문 내역이 없어요

)}

); } /* ---- 장바구니 드로어 ---- */ function CartDrawer({ isOpen, onClose, cart, setCart }) { const [submitted, setSubmitted] = useEmp(false); const PF = "var(--font-sans)"; function updateQty(idx, delta) { setCart(prev => { const newQty = (prev[idx].qty || 1) + delta; if (newQty <= 0) return prev.filter((_, i) => i !== idx); return prev.map((it, i) => i === idx ? { ...it, qty: newQty } : it); }); } function removeItem(idx) { setCart(prev => prev.filter((_, i) => i !== idx)); } function submitOrder() { (async () => { try { const excluded = cart.filter(i => !i.variant_id); if (excluded.length) alert(`아래 상품은 옵션 정보가 없어 주문에서 제외됩니다:\n${excluded.map(i => i.name).join('\n')}`); const items = cart.filter(i => i.variant_id).map(i => ({ variant_id: i.variant_id, quantity: i.qty || 1 })); if (!items.length) throw new Error('주문 가능한 상품이 없습니다. 상품을 다시 선택해주세요.'); await WW.createOrder({ items }); await WW.bootstrap(); setSubmitted(true); setTimeout(() => { setCart([]); setSubmitted(false); onClose(); }, 1600); } catch (e) { alert(e.message || '주문 실패'); } })(); } const total = cart.reduce((s, i) => s + i.pts * (i.qty || 1), 0); const remaining = EMPLOYEE.points - total; const totalQty = cart.reduce((s, i) => s + (i.qty || 1), 0); const qBtn = (label, onClick) => ({ width: 28, height: 28, background: 'rgba(255,255,255,0.9)', border: '1px solid rgba(10,37,64,0.13)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, color: 'var(--fg-2)', fontFamily: PF, }); return ( <> {/* ── 배경 딤 ── */}

{/* ── 드로어 패널 ── */}

{/* 헤더 */}

장바구니 ({totalQty})

{/* 상품 리스트 (스크롤) */}

{submitted ? (

주문이 접수됐어요

관리자 승인 후 배송이 시작됩니다

) : cart.length === 0 ? (

장바구니가 비어있어요

카탈로그에서 상품을 담아보세요

) : (

{cart.map((item, idx) => (

{/* 썸네일 */}

{item.thumb}

{/* 정보 + 수량 */}

{item.name}

{item.color && ( )} {item.color ? `${item.color.name} · ` : ''}사이즈 {item.size}

{/* 수량 조절 */}

{item.qty || 1}

{/* 금액 + 삭제 */}

{fmtPts(item.pts * (item.qty || 1))}P

))}

)}

{/* 하단 고정 영역 */} {!submitted && cart.length > 0 && (

상품 합계{fmtPts(total)}P

보유 포인트 {fmtPts(EMPLOYEE.points)}P

결제 후 잔액{fmtPts(remaining)}P

{remaining < 0 && (

포인트가 {fmtPts(Math.abs(remaining))}P 부족해요

)}

); } Object.assign(window, { EmployeeHome, EmployeeCatalog, ProductDetail, EmployeeCart, EmployeeOrders, CartDrawer });