// inventory.jsx — 재고관리 (운영 전용, 깔끔 + 명확) const { useState, useMemo, useEffect } = React; const CAT = window.CATALOG; const fmtKRW = (n) => "₩" + n.toLocaleString("ko-KR"); const CAT_LABEL = { road:"Road", gravel:"Gravel", mtb:"MTB", ebike:"E-bike", kids:"Kids" }; const LOC_LABEL = CAT.ops.locations; const LOC_KEYS = Object.keys(LOC_LABEL); // 오늘 날짜 const todayStr = () => { const d = new Date(); return `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,"0")}.${String(d.getDate()).padStart(2,"0")}`; }; const nowTime = () => { const d = new Date(); return `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}`; }; // ─── HEADER ────────────────────────────────────────────── function InvHeader() { return (
김성호바이크 세종점
Inventory ・ Operations
재고 관리
현재 시각 {new Date().toLocaleString("ko-KR",{dateStyle:"short",timeStyle:"short"})}
); } // ─── PAGE NAV ──────────────────────────────────────────── function PageNav({ active }) { return ( ); } // ─── v3.10 재고관리 보강 5건 (기획서 §4 Phase A) ───────────────── // A1: 메인 KPI 큰 카드 — 총 평가액을 메인으로 강조 function InventoryHero({ bikes, moves }) { const role = window.AUTH?.role || "owner"; const value = bikes.reduce((a,b) => a + b.stock * b.priceShop, 0); const stock = bikes.reduce((a,b) => a + b.stock, 0); const skus = bikes.length; const lowCount = bikes.filter(b => b.stock > 0 && b.stock <= (b.lowThreshold||1)).length; const outCount = bikes.filter(b => b.stock === 0).length; // 자금 흐름 — 이번 달 입고/출고 가치 (mock — 운영시 stock_movements 집계) const monthIn = (moves||[]).filter(m=>m.type==='IN').reduce((a,m)=> a + (m.qty||0)*(m.priceShop||1000000), 0); const monthOut = (moves||[]).filter(m=>m.type==='OUT').reduce((a,m)=> a + (m.qty||0)*(m.priceShop||1000000), 0); const fmtMoney = (n) => role === "owner" ? "₩" + (n||0).toLocaleString("ko-KR") : "₩***"; return (
{/* 메인 — 총 평가액 */}
총 재고 평가액
{fmtMoney(value)}
{skus} SKU · {stock} 대 · 매장가 × 재고
{(monthIn || monthOut) > 0 && (
↗ 입고 {fmtMoney(monthIn)} ↘ 출고 {fmtMoney(monthOut)}
)}
{/* 작은 KPI 3개 */}
실 재고
{stock}대
{skus}개 SKU 합계
저재고
{lowCount}건
{lowCount > 0 ? "발주 검토 필요" : "충분 ✓"}
품절
{outCount}건
{outCount > 0 ? "즉시 입고 대기" : "전체 보유 ✓"}
); } // A2: 입고 예정 패널 — 본사 발주 후 입고 대기 (mock) function PendingReceipts() { // 실 운영: pending_orders 테이블에서 fetch const items = [ { sku:"TSL8-EXP", name:"Tarmac SL8 Expert", qty:2, ordered:"2026-05-22", expected:"2026-05-29", days: 3, status:"in_transit" }, { sku:"PT-CHN-12", name:"Shimano CN-M8100 체인 (12s)", qty:10, ordered:"2026-05-24", expected:"2026-05-27", days: 1, status:"in_transit" }, { sku:"ACC-HLM-EVD", name:"S-Works Evade III 헬멧", qty:3, ordered:"2026-05-25", expected:"2026-06-02", days: 7, status:"ordered" }, ]; if (items.length === 0) return null; return (
📦 입고 예정 {items.length}건 · 본사 발주분
{items.map(it => { const urgent = it.days <= 2; return (
{it.sku}
{it.name}
{it.qty}개 · {it.expected} D-{it.days}
); })}
); } // A4: 일일 마감 점검 카드 — 17시 이후 자동 노출 (또는 항상) function DailyClosing({ moves }) { const [open, setOpen] = React.useState(false); const [checked, setChecked] = React.useState(() => localStorage.getItem("sejong-closed-" + new Date().toISOString().slice(0,10)) === "1" ); const inCount = (moves||[]).filter(m=>m.type==='IN').length; const outCount = (moves||[]).filter(m=>m.type==='OUT').length; const moveCount = (moves||[]).filter(m=>m.type==='MOVE_OUT' || m.type==='MOVE_IN').length / 2; const totalMoves = inCount + outCount + moveCount; const today = new Date().toISOString().slice(0,10); const doClose = () => { localStorage.setItem("sejong-closed-" + today, "1"); setChecked(true); if (window.SECURITY) window.SECURITY.showToast("일일 마감 완료 ✓", "success"); }; return (
{open && (
  • 오늘 모든 입출고 정확히 처리됨
  • 저재고 / 품절 모델 확인 완료
  • 다음 영업일 입고 예정 확인 완료
  • 지연된 정비 / 견적 응답 확인 완료
{!checked && ( )} {checked && ( 마감 완료 — 내일 자정에 자동 초기화 )}
)}
); } // ─── KPI STRIP ─────────────────────────────────────────── function KpiStrip({ bikes }) { const stock = bikes.reduce((a,b) => a + b.stock, 0); const value = bikes.reduce((a,b) => a + b.stock * b.priceShop, 0); const skus = bikes.length; const lowCount = bikes.filter(b => b.stock > 0 && b.stock <= b.lowThreshold).length; const outCount = bikes.filter(b => b.stock === 0).length; return (
총 SKU
{skus}라인
전체 카테고리
실 재고
{stock}대
실재고 수량
총 평가액
{fmtKRW(value)}
매장 판매가 × 재고
저재고
{lowCount}건
발주 검토 필요
품절
{outCount}건
즉시 입고 대기
); } // ─── TOOLBAR ───────────────────────────────────────────── function Toolbar({ q, setQ, cat, setCat, loc, setLoc, status, setStatus }) { return (
setQ(e.target.value)} />
카테고리 {CAT.categories.map(c => ( ))}
위치 {Object.entries(LOC_LABEL).map(([k, v]) => ( ))}
재고상태
); } // ─── LOW STOCK ALERT ───────────────────────────────────── function LowAlert({ bikes }) { const lows = bikes.filter(b => b.stock <= b.lowThreshold); if (lows.length === 0) return null; const out = lows.filter(b => b.stock === 0).length; return (
{lows.length}개 SKU가 저재고/품절 상태입니다. {out > 0 && <> 그 중 {out}개는 품절 — 즉시 발주가 필요합니다.}
); } // ─── MOVEMENT MODAL (single OR batch, per-row settings) ── function MovementModal({ bike, initialTab, allBikes, onClose, onApply }) { const [tab, setTab] = useState(initialTab || "in"); // selected: [{ sku, qty, loc, size, checked }] const [selected, setSelected] = useState(() => bike ? [{ sku: bike.sku, qty: 1, loc: bike.location, size: bike.sizes[0] || "", checked: false }] : [] ); const [note, setNote] = useState(""); const [pickQ, setPickQ] = useState(""); const [showPicker, setShowPicker] = useState(!bike); useEffect(() => { const k = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", k); return () => window.removeEventListener("keydown", k); }, []); // selected의 실제 bike 객체 매핑 const selectedBikes = selected .map(s => { const b = allBikes.find(x => x.sku === s.sku); return b ? { ...b, qty: s.qty, loc: s.loc, size: s.size, checked: s.checked } : null; }) .filter(Boolean); const checkedCount = selected.filter(s => s.checked).length; const addBike = (sku) => { if (selected.find(s => s.sku === sku)) return; const b = allBikes.find(x => x.sku === sku); setSelected([...selected, { sku, qty: 1, loc: b ? b.location : "A", size: b && b.sizes ? b.sizes[0] : "", checked: false }]); setPickQ(""); }; const removeBike = (sku) => setSelected(selected.filter(s => s.sku !== sku)); const toggleCheck = (sku) => setSelected(selected.map(s => s.sku === sku ? { ...s, checked: !s.checked } : s)); const toggleAll = () => { const allChecked = selected.length > 0 && selected.every(s => s.checked); setSelected(selected.map(s => ({ ...s, checked: !allChecked }))); }; const updateQty = (sku, delta) => { setSelected(selected.map(s => { if (s.sku !== sku) return s; if (tab === "out") { const b = allBikes.find(x => x.sku === sku); return { ...s, qty: Math.max(1, Math.min(b ? b.stock : 999, s.qty + delta)) }; } return { ...s, qty: Math.max(1, s.qty + delta) }; })); }; const setQtyDirect = (sku, val) => { setSelected(selected.map(s => s.sku === sku ? { ...s, qty: Math.max(1, val) } : s)); }; const setRowLoc = (sku, loc) => { setSelected(selected.map(s => s.sku === sku ? { ...s, loc } : s)); }; const setRowSize = (sku, size) => { setSelected(selected.map(s => s.sku === sku ? { ...s, size } : s)); }; // 일괄: 체크된 모든 row의 loc/qty/size 일괄 변경 const bulkSetLoc = (loc) => { setSelected(selected.map(s => s.checked ? { ...s, loc } : s)); }; const bulkSetQty = (qty) => { setSelected(selected.map(s => { if (!s.checked) return s; if (tab === "out") { const b = allBikes.find(x => x.sku === s.sku); return { ...s, qty: Math.max(1, Math.min(b ? b.stock : 999, qty)) }; } return { ...s, qty: Math.max(1, qty) }; })); }; const candidates = useMemo(() => { const s = pickQ.trim().toLowerCase(); return allBikes .filter(b => !selected.find(x => x.sku === b.sku)) .filter(b => !s || b.name.toLowerCase().includes(s) || b.sku.toLowerCase().includes(s) || b.series.toLowerCase().includes(s)) .slice(0, 5); }, [pickQ, selected, allBikes]); const canApply = useMemo(() => { if (selectedBikes.length === 0) return false; if (tab === "out") return selectedBikes.every(b => b.qty <= b.stock); if (tab === "move") return selectedBikes.some(b => b.loc !== b.location); // 최소 1개는 위치 변경 return true; // 입고는 항상 가능 }, [selectedBikes, tab]); const apply = () => { if (!canApply) return; if (tab === "in") { selectedBikes.forEach(b => onApply(b, { kind: "입고", qty: b.qty, note, toLoc: b.loc, size: b.size })); } else if (tab === "out") { selectedBikes.forEach(b => onApply(b, { kind: "출고", qty: b.qty, note, size: b.size })); } else { selectedBikes.forEach(b => { if (b.loc !== b.location) onApply(b, { kind: "위치변경", from: b.location, to: b.loc, note, size: b.size }); }); } }; const allChecked = selected.length > 0 && selected.every(s => s.checked); const someChecked = checkedCount > 0; return ( <>
재고 이동 · Stock Movement {selectedBikes.length > 0 && {selectedBikes.length}개 모델 선택}
모델별로 수량 · 위치를 개별 지정. 체크박스로 여러 행을 한 번에 수정할 수 있습니다.
{/* 검색으로 모델 추가 */}
{setPickQ(e.target.value); setShowPicker(true);}} onFocus={()=>setShowPicker(true)} /> {pickQ && }
{showPicker && pickQ && candidates.length > 0 && (
{candidates.map(b => ( ))}
)} {showPicker && pickQ && candidates.length === 0 && (
검색 결과 없음 · 이미 선택했거나 일치하는 모델이 없습니다.
)}
{/* BULK EDIT BAR — checked rows에 대해 일괄 수정 */} {selectedBikes.length > 0 && (
{someChecked && ( <>
{tab !== "out" && ( <> 일괄 위치 →
{LOC_KEYS.map(k => ( ))}
)} {tab !== "move" && ( <>
일괄 수량 →
{[1, 2, 3, 5, 10].map(n => ( ))}
)} )}
)} {/* 선택된 모델 목록 */}
{selectedBikes.length === 0 ? (
위 검색창에서 모델을 추가하세요.
) : (
{selectedBikes.map(b => { const outOver = tab === "out" && b.qty > b.stock; const sameLoc = tab === "move" && b.loc === b.location; const bodyCls = tab === "out" ? "out" : tab === "move" ? "move" : ""; return (
{b.name} {LOC_LABEL[b.location]} · {b.location} {" "}· {b.sku} · 재고 {b.stock}대
{b.sizes && b.sizes.length > 0 && (
{b.sizes.map(sz => ( ))}
)} {tab !== "move" && (
setQtyDirect(b.sku, Number(e.target.value) || 1)} /> 대
)} {tab !== "out" && (
{LOC_KEYS.map(k => ( ))}
)}
); })}
)}
{tab === "out" && selectedBikes.length > 0 && (
출고는 각 모델의 현재 위치에서 차감됩니다.
)} {/* 공통 메모 */}
setNote(e.target.value)} placeholder={tab === "in" ? "예) 본사 발주 5/24 분 입고" : tab === "out" ? "예) 고객 매장 출고 일괄" : "예) 시승 라인으로 전환"} />
{/* 변경 후 프리뷰 */} {selectedBikes.length > 0 && (
변경 후 미리보기
{selectedBikes.map(b => { const sameLoc = tab === "move" && b.loc === b.location; const locChange = tab === "in" && b.loc !== b.location; return (
{b.name} {b.size && {b.size}} {tab === "in" && <> {b.stock} → {b.stock + b.qty}대 (+{b.qty}) {locChange && · {LOC_LABEL[b.location]} → {LOC_LABEL[b.loc]}} {!locChange && · {LOC_LABEL[b.loc]}} } {tab === "out" && (b.qty > b.stock ? 재고 부족 ({b.stock}대) : <>{b.stock} → {Math.max(0, b.stock - b.qty)}대 (−{b.qty}) · {LOC_LABEL[b.location]}에서)} {tab === "move" && (sameLoc ? 건너뜀 : `${LOC_LABEL[b.location]} → ${LOC_LABEL[b.loc]}`)}
); })}
)}
); } // ─── QUICK ACTIONS (위쪽 섹션) ──────────────────────────── // v3.14: "신상 등록" 4번째 타일 신설 (사용자 요청) function QuickActions({ onOpen, onCreate }) { return (
빠른 재고 처리
신상 등록 · 입고 · 출고 · 위치 이동을 한 번에 처리할 수 있습니다.
{/* v3.14: 신상 등록 (사장님 운영 첫 시작점) */}
); } // ─── RECENT MOVEMENTS CARD ─────────────────────────────── function RecentMovements({ moves }) { if (moves.length === 0) return null; return (
최근 재고 이동 이번 세션 · {moves.length}건
{moves.slice(0, 6).map((m, i) => (
{m.kind}
{m.name}{m.size && {m.size}} {m.sku}
{m.detail}
{m.note &&
"{m.note}"
}
{m.date} {m.time}
))}
); } // ─── STOCK MATRIX BOARD — 위치 × 사이즈 직관적 현황 ───── function StockBoard({ bikes }) { const [collapsed, setCollapsed] = useState(false); const [view, setView] = useState("card"); // card | table // 전체 위치별 합계 const locTotals = useMemo(() => { const t = { A: 0, B: 0, W: 0, T: 0 }; bikes.forEach(b => { if (!b.stockMatrix) return; Object.values(b.stockMatrix).forEach(row => { LOC_KEYS.forEach(k => { t[k] += row[k] || 0; }); }); }); return t; }, [bikes]); const grandTotal = LOC_KEYS.reduce((a, k) => a + locTotals[k], 0); return (
위치 × 사이즈 재고 현황판 전체 {grandTotal}대 ・ 16 모델
{LOC_KEYS.map(k => (
{LOC_LABEL[k]} {locTotals[k]}대
))}
{!collapsed && ( view === "card" ?
{bikes.map(b => )}
: )}
); } // ─── 표 보기: 모델 = 행, 위치 = 열, 셀 = 사이즈별 분포 ─── function StockBoardTable({ bikes }) { return (
{LOC_KEYS.map(k => ( ))} {bikes.map(b => { const locStock = LOC_KEYS.map(k => { const sizes = b.sizes .map(sz => ({ sz, n: b.stockMatrix?.[sz]?.[k] || 0 })) .filter(x => x.n > 0); const total = sizes.reduce((a, x) => a + x.n, 0); return { loc: k, sizes, total }; }); return ( {locStock.map(({ loc, sizes, total }) => ( ))} ); })}
모델 총 {LOC_LABEL[k]} {k}
{b.name} {b.sku} · {b.tier}
{b.stock}대 {total === 0 ? ( — ) : (
{sizes.map(({ sz, n }) => ( {sz} {n} ))} / {total}
)}
); } function StockBoardCard({ bike }) { if (!bike.stockMatrix) return null; const sizes = bike.sizes; const sizeTotals = sizes.map(sz => LOC_KEYS.reduce((a, k) => a + (bike.stockMatrix[sz]?.[k] || 0), 0)); const locTotals = LOC_KEYS.map(k => sizes.reduce((a, sz) => a + (bike.stockMatrix[sz]?.[k] || 0), 0)); const max = Math.max(1, ...sizes.flatMap(sz => LOC_KEYS.map(k => bike.stockMatrix[sz]?.[k] || 0))); return (
{bike.name} {bike.sku} · {bike.tier}
{bike.stock} 대
{/* 헤더 행 */}
{sizes.map(sz => (
{sz}
))}
총
{/* 위치별 행 */} {LOC_KEYS.map(k => (
{LOC_LABEL[k]} {k}
{sizes.map(sz => { const n = bike.stockMatrix[sz]?.[k] || 0; const intensity = n / max; return (
0 ? { background: `rgba(227,30,38,${0.08 + intensity * 0.42})`, color: intensity > 0.6 ? "#fff" : "var(--fg-primary)" } : undefined} title={`${LOC_LABEL[k]} · ${sz} · ${n}대`} > {n > 0 ? n : "·"}
); })}
{locTotals[LOC_KEYS.indexOf(k)]}
 ))} {/* 사이즈별 합계 행 */}
사이즈 합
{sizes.map((sz, i) => (
{sizeTotals[i] || "·"}
))}
{bike.stock}
); } // ─── NEW PRODUCT MODAL (size-specific SKU, optional sizes) ─ // v3.16: 카테고리별 사이즈+신장 프리셋 (회의록 v3.16 §2.3) const HEIGHT_PRESETS = { road: [ { size:"49", h1:152, h2:160 }, { size:"52", h1:159, h2:168 }, { size:"54", h1:166, h2:175 }, { size:"56", h1:173, h2:182 }, { size:"58", h1:180, h2:188 }, { size:"61", h1:186, h2:194 }, ], gravel: [ { size:"XS", h1:150, h2:162 }, { size:"S", h1:160, h2:172 }, { size:"M", h1:170, h2:182 }, { size:"L", h1:180, h2:192 }, ], mtb: [ { size:"S", h1:155, h2:170 }, { size:"M", h1:168, h2:180 }, { size:"L", h1:178, h2:190 }, ], ebike: [ { size:"S", h1:160, h2:172 }, { size:"M", h1:170, h2:182 }, { size:"L", h1:180, h2:192 }, ], kids: [ { size:"20″", h1:110, h2:130 }, { size:"24″", h1:125, h2:145 }, { size:"26″", h1:140, h2:160 }, ], }; function NewProductModal({ onClose, onCreate }) { const [form, setForm] = useState({ name: "", series: "", tier: "Comp", cat: "road", year: 2026, priceRetail: "", priceShop: "", weightKg: "", frame: "", wheels: "", brake: "디스크 · 유압", group: "", hasSizes: true, // v3.16: variants = [{ size, sku, h1, h2, A, B, C, W }] variants: [], singleSku: "", singleStock: { A:0, B:0, C:0, W:0 }, colors: ["#1B1B1F"], image: "", }); const [imgPreview, setImgPreview] = useState(""); const [sizeInput, setSizeInput] = useState(""); useEffect(() => { const k = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", k); return () => window.removeEventListener("keydown", k); }, []); const update = (patch) => setForm({...form, ...patch}); const addSize = (sz) => { const s = (sz || sizeInput).trim(); if (!s || form.variants.find(v => v.size === s)) return; setForm({...form, variants: [...form.variants, { size: s, sku: "", h1: "", h2: "", A:0, B:0, C:0, W:0 }]}); setSizeInput(""); }; const removeVariant = (sz) => { setForm({...form, variants: form.variants.filter(v => v.size !== sz)}); }; const updateVariant = (sz, patch) => { setForm({...form, variants: form.variants.map(v => v.size === sz ? { ...v, ...patch } : v)}); }; const applyPreset = (sizes) => { const existing = new Set(form.variants.map(v => v.size)); const merged = [...form.variants]; sizes.forEach(s => { if (!existing.has(s)) merged.push({ size: s, sku: "", h1: "", h2: "", A:0, B:0, C:0, W:0 }); }); update({ variants: merged }); }; // v3.16: 카테고리별 신장 프리셋 한 번에 적용 (사이즈 + 신장 자동 채움) const applyHeightPreset = (catKey) => { const preset = HEIGHT_PRESETS[catKey]; if (!preset) return; if (form.variants.length > 0 && !confirm("기존 사이즈 행을 모두 교체합니다. 진행하시겠습니까?")) return; update({ variants: preset.map(p => ({ size: p.size, sku: "", h1: p.h1, h2: p.h2, A:0, B:0, C:0, W:0 })), cat: catKey, }); }; const setColor = (i, hex) => { const c = [...form.colors]; c[i] = hex; setForm({...form, colors: c}); }; const onImageFile = (e) => { const file = e.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = (ev) => { setImgPreview(ev.target.result); update({ image: ev.target.result }); }; reader.readAsDataURL(file); }; // ─ Validation const validSizesAll = form.hasSizes ? form.variants.length > 0 && form.variants.every(v => v.sku.trim()) : form.singleSku.trim().length > 0; const canCreate = form.name.trim() && validSizesAll && Number(form.priceShop) > 0; const handleCreate = () => { if (!canCreate) return; let totalStock = 0; const matrix = {}; const skuMap = {}; let mainSku = ""; if (form.hasSizes) { form.variants.forEach(v => { matrix[v.size] = { A: v.A||0, B: v.B||0, C: v.C||0, W: v.W||0 }; totalStock += (v.A||0) + (v.B||0) + (v.C||0) + (v.W||0); skuMap[v.size] = v.sku.trim().toUpperCase(); }); mainSku = form.variants[0]?.sku.trim().toUpperCase() || ""; } else { const sz = "ONE"; matrix[sz] = { A: form.singleStock.A||0, B: form.singleStock.B||0, C: form.singleStock.C||0, W: form.singleStock.W||0 }; totalStock = matrix[sz].A + matrix[sz].B + matrix[sz].C + matrix[sz].W; skuMap[sz] = form.singleSku.trim().toUpperCase(); mainSku = form.singleSku.trim().toUpperCase(); } const locSums = LOC_KEYS.map(k => ({ k, n: Object.values(matrix).reduce((a, m) => a + (m[k]||0), 0) })); locSums.sort((a,b) => b.n - a.n); const today = new Date(); const todayDateStr = `${today.getFullYear()}.${String(today.getMonth()+1).padStart(2,"0")}.${String(today.getDate()).padStart(2,"0")}`; const fallbackGradient = `linear-gradient(155deg, ${form.colors[0] || "#1B1B1F"} 0%, ${form.colors[1] || form.colors[0] || "#37383C"} 100%)`; onCreate({ sku: mainSku, name: form.name.trim(), series: form.series.trim() || form.name.split(" ")[0] || "", tier: form.tier, cat: form.cat, eyebrow: `${CAT_LABEL[form.cat]} · 신상`, group: form.group.trim() || "—", priceRetail: Number(form.priceRetail) || Number(form.priceShop), priceShop: Number(form.priceShop), weightKg: Number(form.weightKg) || 0, frame: form.frame.trim() || "—", wheels: form.wheels.trim() || "—", brake: form.brake.trim() || "—", status: "신상", statusTone: "blue", stock: totalStock, sizes: form.hasSizes ? form.variants.map(v => v.size) : ["ONE"], skuMap, colors: form.colors, gradient: fallbackGradient, image: form.image || null, sales: "신규 등록 모델.", location: locSums[0]?.n > 0 ? locSums[0].k : "A", lastReceived: todayDateStr, lowThreshold: 2, supplier: "Specialized KR", year: Number(form.year) || 2026, stockMatrix: matrix, // v3.16: 사이즈별 신장 매핑 ({size: {h1, h2}}) sizeHeightMap: form.hasSizes ? form.variants.reduce((acc, v) => { if (v.h1 || v.h2) acc[v.size] = { h1: Number(v.h1) || null, h2: Number(v.h2) || null }; return acc; }, {}) : {}, }); }; const grandTotal = form.hasSizes ? form.variants.reduce((a, v) => a + (v.A||0)+(v.B||0)+(v.C||0)+(v.W||0), 0) : (form.singleStock.A||0)+(form.singleStock.B||0)+(form.singleStock.C||0)+(form.singleStock.W||0); // ─ v3.14: 다른 모달 패턴(white BG + radius 16 + sticky CTA)에 맞춘 통일 디자인 ─── const SX = { scrim: { position:"fixed", inset:0, background:"rgba(0,0,0,0.45)", zIndex:9999, display:"flex", alignItems:"center", justifyContent:"center", padding:16 }, modal: { background:"#fff", borderRadius:16, maxWidth:720, width:"100%", maxHeight:"calc(100dvh - 32px)", display:"flex", flexDirection:"column", boxShadow:"0 20px 60px rgba(0,0,0,0.2)" }, head: { padding:"20px 24px 12px", borderBottom:"1px solid var(--grey-100,#F2F4F6)" }, headTopRow: { display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:6 }, h2: { margin:0, font:"700 20px/1.3 var(--font-sans)", letterSpacing:"-0.01em" }, closeBtn: { background:"none", border:"none", fontSize:22, cursor:"pointer", color:"var(--grey-500,#8B95A1)", padding:0, lineHeight:1 }, sub: { margin:0, fontSize:13, color:"var(--grey-600,#6B7684)", lineHeight:1.5 }, statusChip: (ok) => ({ display:"inline-flex", alignItems:"center", gap:4, padding:"3px 9px", borderRadius:14, fontSize:11, fontWeight:700, marginTop:8, background: ok ? "var(--green-50,#E5F8EE)" : "var(--red-50,#FFE5E6)", color: ok ? "#0E8F5F" : "var(--red-500,#E31E26)", }), body: { flex:1, overflowY:"auto", padding:"16px 24px" }, section: { background:"var(--grey-50,#F9FAFB)", border:"1px solid var(--grey-100,#F2F4F6)", borderRadius:12, padding:"16px 18px", marginBottom:12 }, sectionH: { display:"flex", alignItems:"center", gap:8, marginBottom:12, fontSize:13, fontWeight:700, color:"var(--grey-700,#4E5968)" }, sectionStep: { width:20, height:20, borderRadius:10, background:"var(--grey-900,#191F28)", color:"#fff", fontSize:11, fontWeight:700, display:"flex", alignItems:"center", justifyContent:"center" }, grid3: { display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:10 }, grid2: { display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }, field: { display:"flex", flexDirection:"column", gap:4 }, fieldLabel: { fontSize:12, fontWeight:500, color:"var(--grey-700,#4E5968)" }, fieldRequired: { color:"var(--red-500,#E31E26)", marginLeft:3 }, fieldInput: { padding:"9px 11px", border:"1px solid var(--grey-300,#D1D6DB)", borderRadius:8, fontSize:13, background:"#fff", width:"100%", boxSizing:"border-box" }, fieldHint: { fontSize:11, color:"var(--grey-500,#8B95A1)" }, catChips: { display:"flex", gap:6, flexWrap:"wrap" }, catChip: (on) => ({ padding:"7px 14px", border:"1px solid "+(on?"var(--red-500,#E31E26)":"var(--grey-300,#D1D6DB)"), borderRadius:8, background: on?"var(--red-50,#FFE5E6)":"#fff", color: on?"var(--red-700,#9A0E14)":"var(--grey-700,#4E5968)", fontSize:13, fontWeight: on?700:500, cursor:"pointer", transition:"all .15s", }), modeRow: { display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginBottom:12 }, modeTile: (on) => ({ display:"flex", flexDirection:"column", alignItems:"flex-start", gap:2, padding:"12px 14px", border:"2px solid "+(on?"var(--blue-500,#0064FF)":"var(--grey-200,#E5E8EB)"), borderRadius:10, background: on?"var(--blue-50,#E8F3FF)":"#fff", cursor:"pointer", textAlign:"left", }), modeTileB: { fontSize:13, fontWeight:700, color:"var(--grey-900,#191F28)" }, modeTileSmall: { fontSize:11, color:"var(--grey-600,#6B7684)" }, presetRow: { display:"flex", gap:6, flexWrap:"wrap", alignItems:"center", marginBottom:10 }, presetChip: { padding:"6px 10px", border:"1px solid var(--grey-300,#D1D6DB)", borderRadius:6, background:"#fff", cursor:"pointer", fontSize:12, color:"var(--grey-700,#4E5968)" }, sizeInputRow: { display:"flex", gap:6, marginBottom:10, maxWidth:340 }, actions: { display:"flex", alignItems:"center", gap:8, padding:"14px 24px", borderTop:"1px solid var(--grey-200,#E5E8EB)", background:"#fff", borderBottomLeftRadius:16, borderBottomRightRadius:16 }, actionsLeft: { flex:1, fontSize:12, color:"var(--grey-600,#6B7684)" }, btn: { padding:"10px 18px", border:"1px solid var(--grey-300,#D1D6DB)", borderRadius:8, background:"#fff", cursor:"pointer", fontSize:13, fontWeight:500 }, btnPrimary: (disabled) => ({ padding:"10px 20px", border:"none", borderRadius:8, background: disabled ? "var(--grey-300,#D1D6DB)" : "var(--red-500,#E31E26)", color:"#fff", cursor: disabled?"not-allowed":"pointer", fontSize:13, fontWeight:600, opacity: disabled?0.7:1, }), }; return (
e.stopPropagation()}> {/* ── 헤더 ── */}

🆕 신상 등록

모델 정보 · 가격 · 사이즈별 SKU · 위치별 초기 재고 · 사진을 한 번에 등록합니다.

{canCreate ? <>✓ 등록 준비됨 · {form.hasSizes ? form.variants.length + "개 사이즈" : "1개"} · 총 {grandTotal}대 : <>⚠️ 모델명 · 매장가 · {form.hasSizes ? "사이즈별 SKU" : "SKU"} 입력 필요 }
{/* ── 본문 (스크롤) ── */}
{/* ① 기본 정보 */}
1 기본 정보
update({name:e.target.value})} placeholder="예: Tarmac SL8 Expert" /> {!form.name.trim() && 모델명을 입력해주세요}
update({year:e.target.value})} />
update({series:e.target.value})} placeholder="Tarmac" />
{Object.entries(CAT_LABEL).map(([k, v]) => ( ))}
{/* ② 가격 · 스펙 */}
2 가격 · 스펙
update({priceShop:e.target.value})} placeholder="11200000" /> {!Number(form.priceShop) > 0 && form.priceShop && 0보다 큰 금액 입력}
update({priceRetail:e.target.value})} placeholder="11800000" />
update({weightKg:e.target.value})} placeholder="7.4" />
update({frame:e.target.value})} placeholder="FACT 10r Carbon" />
update({wheels:e.target.value})} placeholder="Roval Rapide CL II" />
update({group:e.target.value})} placeholder="Shimano Ultegra Di2" />
{/* ③ SKU · 사이즈 · 재고 */}
3 SKU · 사이즈 · 초기 재고
{form.hasSizes ? (
빠른 추가: {[ ["로드","49,52,54,56,58"], ["MTB","S,M,L"], ["트레일","S1,S2,S3,S4,S5"], ["키즈","20″,24″"], ].map(([label, sizes]) => ( ))}
{/* v3.16: 신장 프리셋 빠른 적용 */}
📏 신장 자동 추천 {[ ["로드", "road", "49~61 / 152~194cm"], ["그래블","gravel","XS~L / 150~192cm"], ["MTB", "mtb", "S~L / 155~190cm"], ["E-bike","ebike", "S~L / 160~192cm"], ["키즈", "kids", "20-26″ / 110~160cm"], ].map(([label, key, hint]) => ( ))}
setSizeInput(e.target.value)} onKeyDown={(e)=>{ if (e.key === "Enter") { e.preventDefault(); addSize(); }}} placeholder="사이즈 직접 입력 후 Enter (예: 60)" />
{form.variants.length > 0 ? (
{LOC_KEYS.map(k => )} {form.variants.map(v => { const subTot = (v.A||0)+(v.B||0)+(v.C||0)+(v.W||0); return ( {LOC_KEYS.map(k => ( ))} ); })}
사이즈 SKU * 📏 추천 신장 (cm){LOC_LABEL[k]}
{k}		소계
{v.size} updateVariant(v.size, { sku: e.target.value.toUpperCase() })} style={{width:"100%", padding:"5px 8px", border:"1px solid var(--grey-300,#D1D6DB)", borderRadius:6, fontSize:11, fontFamily:"monospace"}} />
updateVariant(v.size, { h1: e.target.value ? Math.max(80, Math.min(230, Number(e.target.value))) : "" })} style={{width:48, padding:"4px 4px", border:"1px solid var(--blue-300,#B0D2FF)", borderRadius:4, fontSize:11, textAlign:"center"}} /> ~ updateVariant(v.size, { h2: e.target.value ? Math.max(80, Math.min(230, Number(e.target.value))) : "" })} style={{width:48, padding:"4px 4px", border:"1px solid var(--blue-300,#B0D2FF)", borderRadius:4, fontSize:11, textAlign:"center"}} />
{v.h1 && v.h2 && Number(v.h2) < Number(v.h1) && (
min>max ⚠
)} 		updateVariant(v.size, { [k]: Math.max(0, Number(e.target.value) || 0) })} style={{width:"100%", padding:"5px 6px", border:"1px solid var(--grey-300,#D1D6DB)", borderRadius:6, fontSize:11, textAlign:"center"}} /> 0 ? "var(--green-500,#0E8F5F)" : "var(--grey-400,#B0B8C1)"}}>{subTot}
총 {form.variants.length}개 사이즈 · {grandTotal}대 · 📏 신장은 비워둬도 등록 가능 (카탈로그에서 "신장 정보 없음" 표시)
) : (
위 빠른 추가 버튼을 클릭하거나 사이즈를 직접 입력해주세요
)} ) : (
update({singleSku:e.target.value.toUpperCase()})} placeholder="예: ACC-BOTTLE-24" />
위치별 초기 재고
{LOC_KEYS.map(k => (
{LOC_LABEL[k]} · {k}
update({singleStock: {...form.singleStock, [k]: Math.max(0, Number(e.target.value) || 0)}})} />
))}
총 {grandTotal}대
)}
{/* ④ 사진 + 컬러 */}
4 사진 · 컬러 (선택)
{imgPreview && ( )}
{form.colors.map((c, i) => (
setColor(i, e.target.value)} style={{width:32, height:32, padding:0, border:"none", background:"transparent", cursor:"pointer"}} /> setColor(i, e.target.value)} style={{...SX.fieldInput, flex:1, fontFamily:"monospace", fontSize:12}} /> {form.colors.length > 1 && ( )}
))}
{/* ── 하단 sticky CTA ── */}
{canCreate ? * 저장 시 카탈로그 · 재고 라인에 즉시 반영 : * 필수 항목을 먼저 입력해주세요 }
); } const COLS = [ { id: "sku", label: "년식", w: 76, mono: true }, { id: "name", label: "모델", w: 240 }, { id: "cat", label: "카테고리", w: 76 }, { id: "stock", label: "총재고", w: 96, num: true }, { id: "locA", label: "쇼룸 1F (A)", w: 160, sortable: false }, { id: "locB", label: "쇼룸 2F (B)", w: 160, sortable: false }, { id: "locC", label: "쇼룸 3F (C)", w: 160, sortable: false }, { id: "locW", label: "창고 (W)", w: 160, sortable: false }, { id: "priceShop", label: "매장가", w: 124, num: true }, { id: "lastReceived", label: "최근 입고", w: 100, center: true }, { id: "actions", label: "재고 이동", w: 196, center: true, sortable: false }, ]; function InventoryView({ bikes, sortBy, setSortBy, onAction, view, setView, onCreate }) { return (
재고 라인 · {bikes.length}건 위치별 분포 · 사이즈 · 매장가 · 액션을 한 화면에
{/* A5: 빈 검색 결과 EmptyState */} {bikes.length === 0 ? (
📦

{(window.CATALOG?.bikes||[]).length === 0 ? "등록된 모델이 없어요" : "검색 결과가 없어요"}

{(window.CATALOG?.bikes||[]).length === 0 ? "첫 신상을 등록하면 이곳에 표시됩니다." : "다른 검색어나 필터를 시도해보세요."}

) : (view === "table" ? : ) }
); } function InventoryTable({ bikes, sortBy, setSortBy, onAction }) { const toggleSort = (key) => { setSortBy(s => s.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" }); }; return ( {COLS.map(c => ( ))} {bikes.map(b => { const isOut = b.stock === 0; const isLow = b.stock > 0 && b.stock <= b.lowThreshold; return ( {LOC_KEYS.map(loc => { const sizes = b.sizes .map(sz => ({ sz, n: b.stockMatrix?.[sz]?.[loc] || 0 })) .filter(x => x.n > 0); const total = sizes.reduce((a, x) => a + x.n, 0); return ( ); })} ); })} {bikes.length === 0 && ( )}
toggleSort(c.id)} > {c.label} {c.sortable !== false && {sortBy.key === c.id ? (sortBy.dir === "asc" ? "▲" : "▼") : "↕"} }
{b.year}
{b.image ? ( ) : (
)}
{b.name} {b.tier} · {b.group}
{CAT_LABEL[b.cat]} {b.stock}대 {total === 0 ? — : (
{sizes.map(({ sz, n }) => ( {sz} {n} {b.sku}-{sz} ))}
)} 		{fmtKRW(b.priceShop)} 평가 {fmtKRW(b.priceShop * b.stock)} {b.lastReceived}
조건에 맞는 재고가 없습니다.
); } // ─── CARD GRID 보기 ─────────────────────────────────────── function InventoryCardGrid({ bikes, onAction }) { return (
{bikes.map(b => { const isOut = b.stock === 0; const isLow = b.stock > 0 && b.stock <= b.lowThreshold; return (
{b.image ? ( ) : (
)}
{b.year} {CAT_LABEL[b.cat]}
{b.name} {b.sku} · {b.tier}
{b.stock}대
{LOC_KEYS.map(loc => { const sizes = b.sizes .map(sz => ({ sz, n: b.stockMatrix?.[sz]?.[loc] || 0 })) .filter(x => x.n > 0); const total = sizes.reduce((a, x) => a + x.n, 0); return (
{LOC_LABEL[loc]} {total}대
{total === 0 ? — : sizes.map(({sz, n}) => { // v3.16: 신장 정보 (있으면 툴팁) const h = b.sizeHeightMap?.[sz] || (Array.isArray(b.size_height_map) ? b.size_height_map.find(x => x.size === sz) : null); const hTitle = h && (h.h1 || h.height_min_cm) ? ` · 신장 ${h.h1 || h.height_min_cm}~${h.h2 || h.height_max_cm}cm` : ""; return ( {sz} {n} {b.sku}-{sz} ); })}
); })}
매장가 {fmtKRW(b.priceShop)}
최근 입고 {b.lastReceived}
); })} {bikes.length === 0 &&
조건에 맞는 재고가 없습니다.
}
); } // ─── FOOTER ────────────────────────────────────────────── function Footer() { return (
재고관리 · 김성호바이크 세종점
매주 월요일 본사 시스템 동기화 · 수동 입출고는 즉시 반영
위치코드: A 쇼룸 1F · B 쇼룸 2F · W 창고 Specialized
); } // ─── APP ───────────────────────────────────────────────── function App() { // 재고 데이터 → React state (변경 가능) const [bikes, setBikes] = useState(() => CAT.bikes.map(b => ({...b}))); const [moves, setMoves] = useState([]); // 이번 세션 이동 로그 // Modal 상태 — bike==null이면 SKU 검색부터 const [modal, setModal] = useState(null); const [newProductOpen, setNewProductOpen] = useState(false); // { bike?, action } const [q, setQ] = useState(""); const [cat, setCat] = useState("all"); const [loc, setLoc] = useState("all"); const [status, setStatus] = useState("all"); const [sortBy, setSortBy] = useState({ key: "cat", dir: "asc" }); const [view, setView] = useState("table"); // table | card const filtered = useMemo(() => { const qs = q.trim().toLowerCase(); let r = bikes.filter(b => (cat === "all" || b.cat === cat) && (loc === "all" || b.location === loc) && (status === "all" || (status === "ok" && b.stock > b.lowThreshold) || (status === "low" && b.stock > 0 && b.stock <= b.lowThreshold) || (status === "out" && b.stock === 0)) && (!qs || b.name.toLowerCase().includes(qs) || b.sku.toLowerCase().includes(qs) || b.group.toLowerCase().includes(qs) || b.series.toLowerCase().includes(qs)) ); const dir = sortBy.dir === "asc" ? 1 : -1; r = [...r].sort((a, b) => { let av, bv; if (sortBy.key === "value") { av = a.priceShop * a.stock; bv = b.priceShop * b.stock; } else if (sortBy.key === "sizes") { av = a.sizes.length; bv = b.sizes.length; } else { av = a[sortBy.key]; bv = b[sortBy.key]; } if (typeof av === "number") return (av - bv) * dir; return String(av).localeCompare(String(bv), "ko") * dir; }); return r; }, [bikes, q, cat, loc, status, sortBy]); const handleAction = (bike, action) => { setModal({ bike, action }); }; const handleQuick = (action) => { setModal({ bike: null, action }); }; const handleApply = async (bike, op) => { // v3.12 Phase B1: Supabase RPC 실호출 (운영 모드에서만) if (window.DAL?.isOnline && bike.id) { try { const type = op.kind === "입고" ? "IN" : op.kind === "출고" ? "OUT" : "MOVE"; await window.DAL.moveStock({ bike_id: bike.id, size: op.size || (bike.sizes && bike.sizes[0]) || "M", qty: op.qty, type, from_location: op.from || (type === "OUT" || type === "MOVE" ? bike.location : null), to_location: op.toLoc || op.to || null, note: op.note || null, }); if (window.SECURITY) window.SECURITY.showToast(`${op.kind} 완료 — Supabase 반영됨`, "success", 2000); } catch (e) { console.error("[B1] moveStock 실패:", e); if (window.SECURITY) window.SECURITY.showToast(`${op.kind} 실패: ${e.message}`, "error", 4000); else alert(`${op.kind} 실패: ${e.message}`); return; } } // 함수형 업데이트 — 배치 호출 시 누적되도록 const sizeNote = op.size ? `${op.size} · ` : ""; const base = { sku: bike.sku, name: bike.name, size: op.size, date: todayStr(), time: nowTime(), note: op.note }; setBikes(prev => { const current = prev.find(b => b.sku === bike.sku) || bike; if (op.kind === "입고") { return prev.map(b => b.sku === bike.sku ? { ...b, stock: b.stock + op.qty, lastReceived: todayStr(), location: op.toLoc || b.location, } : b); } else if (op.kind === "출고") { return prev.map(b => b.sku === bike.sku ? { ...b, stock: Math.max(0, b.stock - op.qty) } : b); } else { return prev.map(b => b.sku === bike.sku ? { ...b, location: op.to } : b); } }); setMoves(prev => { const current = bikes.find(b => b.sku === bike.sku) || bike; let move; if (op.kind === "입고") { const newLoc = op.toLoc || current.location; const locChanged = newLoc !== current.location; move = { ...base, kind: "입고", kindTone: "in", detail: `${sizeNote}+${op.qty}대 · ${current.stock} → ${current.stock + op.qty}대 · ${locChanged ? `${LOC_LABEL[current.location]} → ${LOC_LABEL[newLoc]} (${newLoc})` : `${LOC_LABEL[newLoc]} (${newLoc})`}` }; } else if (op.kind === "출고") { move = { ...base, kind: "출고", kindTone: "out", detail: `${sizeNote}−${op.qty}대 · ${current.stock} → ${Math.max(0, current.stock - op.qty)}대 · ${LOC_LABEL[current.location]} (${current.location})에서` }; } else { move = { ...base, kind: "이동", kindTone: "move", detail: `${sizeNote}${LOC_LABEL[op.from]} (${op.from}) → ${LOC_LABEL[op.to]} (${op.to}) · ${current.stock}대` }; } return [move, ...prev]; }); setModal(null); }; // Modal에 표시할 bike (선택된 경우) const modalBike = modal && modal.bike ? bikes.find(b => b.sku === modal.bike.sku) : null; return (

재고 현황

{CAT.meta.asOf} 기준 · 입고 / 출고 / 위치 이동을 각 라인에서 바로 처리.

{/* A1: 메인 KPI 큰 카드 + 자금 흐름 통합 (KpiStrip 대체) */} {/* A2: 입고 예정 패널 */} {/* A4: 일일 마감 점검 */} setNewProductOpen(true)} /> setNewProductOpen(true)} />
{modal && ( setModal(null)} onApply={handleApply} /> )} {newProductOpen && ( setNewProductOpen(false)} onCreate={async (newBike) => { // v3.12 Phase B3: Supabase RPC 신상 등록 (운영 모드) if (window.DAL?.isOnline) { try { const baseSku = newBike.sku?.split("-").slice(0, -1).join("-") || newBike.sku; const initialStock = newBike.sizes.map(sz => ({ size: sz, location: newBike.location || "A", qty: 1 })); const { data, error } = await window.DAL.client.rpc("create_bike_with_variants", { p_base_sku: baseSku, p_name: newBike.name, p_series: newBike.series || "기타", p_tier: newBike.tier || "기본", p_category: newBike.cat || "road", p_price_retail: newBike.priceRetail || newBike.priceShop, p_price_shop: newBike.priceShop, p_year: newBike.year || 2026, p_sizes: newBike.sizes, p_colors: newBike.colors || [], p_initial_stock: initialStock, }); if (error) throw error; if (data?.bike_id) newBike.id = data.bike_id; // B3b: 이미지가 있으면 Storage 업로드 if (newBike.imageFile && window.STORAGE?.registerBikeMedia) { await window.STORAGE.registerBikeMedia(data.bike_id, baseSku, newBike.imageFile); } if (window.SECURITY) window.SECURITY.showToast("신상 등록 완료 — Supabase 반영됨", "success", 2500); } catch (e) { console.error("[B3] 신상 등록 실패:", e); if (window.SECURITY) window.SECURITY.showToast(`신상 등록 실패: ${e.message}`, "error", 4000); else alert(`신상 등록 실패: ${e.message}`); return; } } setBikes([newBike, ...bikes]); setMoves(m => [{ sku: newBike.sku, name: newBike.name, date: todayStr(), time: nowTime(), note: "신규 등록", kind: "등록", kindTone: "in", detail: `신상 등록 · ${newBike.sizes.length}개 사이즈 · 초기 ${newBike.stock}대`, }, ...m]); setNewProductOpen(false); }} /> )}
); } ReactDOM.createRoot(document.getElementById("root")).render();