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

{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 [hoverId, setHoverId] = useEmp(null); const cats = ['전체', '상의', '하의', '신발', '보호구', '장갑', '안전', '동계용', '우천용']; const filtered = store.products.filter(p => (cat === '전체' || p.cat === cat) && (search === '' || p.name.includes(search)) ); return (

{/* 필터바 + 검색 */}

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

{/* 검색 */}

setSearch(e.target.value)} />

{/* 결과 수 */}

{filtered.length}개 상품

{/* 그리드 */}

{filtered.map(p => { const totalStock = Object.values(p.stock).reduce((a,b)=>a+b,0); const isHovered = hoverId === p.id; const quickSizes = p.sizes.filter(s=>p.stock[s]>0).slice(0,4); const badgeText = p.tag==='인기' ? '인기' : (totalStock<=5&&totalStock>0) ? '재고 부족' : totalStock===0 ? '품절' : null; return (

setHoverId(p.id)} onMouseLeave={()=>setHoverId(null)} onClick={()=>{setSelectedProduct(p); setScreen('detail');}} style={{ background:'#fff', borderRadius:4, cursor:'pointer', overflow:'hidden', transform: isHovered ? 'scale(1.03)' : 'scale(1)', transition:'transform 200ms ease, box-shadow 200ms ease', boxShadow: isHovered ? '0 8px 28px rgba(0,0,0,0.12)' : '0 1px 4px rgba(0,0,0,0.06)', position:'relative', }} > {/* 이미지 영역 (카드 2/3) */}

{badgeText && ( {badgeText} )} {p.thumb}

{/* 호버 시 사이즈 바 */} {isHovered && quickSizes.length > 0 && (

{quickSizes.map(s=>( {s} ))}

)} {/* 상품 정보 */}

{p.cat}

{p.name}

{fmtPts(p.pts)}P

); })}

); } /* ---- 상품 상세 화면 (나이키 스타일) ---- */ function ProductDetail({ product, setScreen, cart, setCart, openCart }) { 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 thumbs = [ { bg:'#f0f0f0', label:'정면' }, { bg:'#e8e8e8', label:'측면' }, { bg:'#ececec', label:'후면' }, { bg:'#f4f4f4', label:'디테일' }, { bg:'#efefef', label:'착용' }, ]; function addToCart() { if (!size) return; setCart(prev => { const idx = prev.findIndex(i=>i.id===product.id && i.size===size); if (idx >= 0) { const next = [...prev]; next[idx] = { ...next[idx], qty: (next[idx].qty || 1) + 1 }; return next; } return [...prev, { ...product, size, variant_id: 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.thumb} {product.tag==='인기' && ( 인기 )}

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

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

{product.cat}

{product.name}

{fmtPts(product.pts)}P

{/* 사이즈 선택 */}

사이즈 선택 사이즈 가이드

{!size &&

사이즈를 선택해주세요

}

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

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

이 사이즈는 {product.stock[size]}개만 남았어요.

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

{openDisclosure===d.key && (

{d.content}

)}

))}

); } /* ---- 장바구니 화면 ---- */ 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.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 items = cart.filter(i => i.variant_id).map(i => ({ variant_id: i.variant_id, quantity: i.qty || 1 })); if (!items.length) throw new Error('상품 variant_id 매핑 후 주문 가능합니다.'); 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.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 });