// quote.jsx — 서비스 견적서 · 라이카 스타일 const { useState, useMemo, useEffect } = React; const CAT = window.CATALOG; const SVC = window.SERVICES; const fmtKRW = (n) => "₩" + Math.round(n).toLocaleString("ko-KR"); const fmtNum = (n) => Math.round(n).toLocaleString("ko-KR"); // 견적서 번호: 날짜 + 6자리 const todayISO = () => { const d = new Date(); const yy = d.getFullYear(), mm = String(d.getMonth()+1).padStart(2,"0"), dd = String(d.getDate()).padStart(2,"0"); return `${yy}-${mm}-${dd}`; }; const quoteNo = () => { const d = new Date(); const yymmdd = d.getFullYear().toString().slice(2) + String(d.getMonth()+1).padStart(2,"0") + String(d.getDate()).padStart(2,"0"); return `Q-${yymmdd}-${String(Math.floor(Math.random()*900)+100)}`; }; const validUntil = () => { const d = new Date(); d.setDate(d.getDate() + 14); const yy = d.getFullYear(), mm = String(d.getMonth()+1).padStart(2,"0"), dd = String(d.getDate()).padStart(2,"0"); return `${yy}-${mm}-${dd}`; }; // v3.16: 견적서 자동 사이즈 추천 배지 (회의록 v3.16 §3.3) function SizeRecommendBadge({ customer }) { const h = Number(customer?.heightCm); const bikeName = (customer?.bike || "").trim().toLowerCase(); // 카탈로그에서 가장 잘 매칭되는 모델 찾기 (이름 포함 검색) const matchedBike = React.useMemo(() => { if (!bikeName) return null; const bikes = (window.CATALOG?.bikes) || []; return bikes.find(b => b.name?.toLowerCase().includes(bikeName) || bikeName.includes((b.name || "").toLowerCase().split(" ")[0]) ); }, [bikeName]); // 매칭된 모델의 신장 매핑 const heightMap = React.useMemo(() => { if (!matchedBike) return []; if (Array.isArray(matchedBike.size_height_map)) return matchedBike.size_height_map; if (matchedBike.sizeHeightMap) { return Object.entries(matchedBike.sizeHeightMap).map(([size, hh]) => ({ size, height_min_cm: hh.h1, height_max_cm: hh.h2, })); } return []; }, [matchedBike]); // 추천 사이즈 const recommended = React.useMemo(() => { if (!h || !heightMap.length) return null; const matches = heightMap .filter(x => x.height_min_cm && x.height_max_cm && h >= x.height_min_cm && h <= x.height_max_cm) .map(x => ({ ...x, distance: Math.abs(((x.height_min_cm + x.height_max_cm)/2) - h) })) .sort((a, b) => a.distance - b.distance); return matches[0] || null; }, [h, heightMap]); if (!h) { return
신장 입력 시 자동 추천
; } if (!matchedBike) { return
차량 모델 입력 시 사이즈 추천
; } if (!heightMap.length || !heightMap.some(x => x.height_min_cm)) { return
이 모델은 신장 정보 미등록 — 시승 추천
; } if (!recommended) { return
{h}cm는 등록 범위 밖 — 시승 추천
; } return (
💡 {recommended.size} ({recommended.height_min_cm}~{recommended.height_max_cm}cm · {h}cm 기준)
); } // ─── HEADER ────────────────────────────────────────────── function Header() { return (
김성호바이크 · 세종
Authorized Specialized Dealer
Service · Estimate
발행일 · {todayISO()} 발행자 · 김성호
); } // ─── PAGE NAV ──────────────────────────────────────────── function PageNav() { return ( ); } // ─── BUILDER (left pane) ───────────────────────────────── function Builder({ q, setQ, onSaveImage, onCopyImage, onShareKakao, onSaveSupabase }) { const [tab, setTab] = useState("fit"); const [pickSku, setPickSku] = useState(""); const [name, setName] = useState(""); const [price, setPrice] = useState(""); const [desc, setDesc] = useState(""); const [discType, setDiscType] = useState("none"); // none | percent | amount | service const [discValue, setDiscValue] = useState(""); const [draggingId, setDraggingId] = useState(null); // 순서 변경 — 드래그 OR 위/아래 버튼 const reorderLine = (fromId, toId) => { if (!fromId || fromId === toId) return; const items = [...q.items]; const fi = items.findIndex(x => x.id === fromId); const ti = items.findIndex(x => x.id === toId); if (fi < 0 || ti < 0) return; const [moved] = items.splice(fi, 1); items.splice(ti, 0, moved); setQ({ ...q, items }); }; const moveLine = (id, delta) => { const items = [...q.items]; const idx = items.findIndex(x => x.id === id); const newIdx = idx + delta; if (idx < 0 || newIdx < 0 || newIdx >= items.length) return; [items[idx], items[newIdx]] = [items[newIdx], items[idx]]; setQ({ ...q, items }); }; // 현재 탭이 공임 탭인지 const isLaborTab = tab === "fit"; // 선택 가능한 프리셋 by tab const presets = useMemo(() => { if (tab === "bike") return CAT.bikes.map(b => ({ sku: b.sku, name: `${b.name} · ${b.tier}`, price: b.priceShop, desc: b.group })); if (tab === "fit") return SVC.fit.items; if (tab === "parts")return SVC.parts.items; if (tab === "acc") return SVC.acc.items; return []; }, [tab]); const applyPreset = (sku) => { setPickSku(sku); if (!sku) return; const p = presets.find(x => x.sku === sku); if (p) { setName(p.name); setPrice(String(p.price)); setDesc(p.desc || ""); } }; useEffect(() => { setPickSku(""); setName(""); setPrice(""); setDesc(""); setDiscType("none"); setDiscValue(""); }, [tab]); const addItem = () => { const nm = name.trim(); const pr = Number(price) || 0; if (!nm || !pr) return; const baseSku = pickSku || `${tab.toUpperCase()}-${String(Date.now()).slice(-5)}`; const ts = Date.now(); // 할인 / 서비스 처리 let discount = { type: "none", value: 0 }; if (discType === "service") { discount = { type: "percent", value: 100, service: true }; } else if (discType === "percent" && Number(discValue) > 0) { discount = { type: "percent", value: Number(discValue) }; } else if (discType === "amount" && Number(discValue) > 0) { discount = { type: "amount", value: Number(discValue) }; } setQ({ ...q, items: [...q.items, { id: `${baseSku}-${ts}`, sku: baseSku, name: nm, desc: desc.trim(), price: pr, qty: 1, discount, kind: tab, }]}); setPickSku(""); setName(""); setPrice(""); setDesc(""); setDiscType("none"); setDiscValue(""); }; const updateLine = (id, patch) => { setQ({ ...q, items: q.items.map(x => x.id === id ? { ...x, ...patch } : x) }); }; const updateLineDisc = (id, patch) => { setQ({ ...q, items: q.items.map(x => x.id === id ? { ...x, discount: { ...x.discount, ...patch } } : x) }); }; const updateQty = (id, delta) => { setQ({ ...q, items: q.items.map(x => x.id === id ? { ...x, qty: Math.max(1, x.qty + delta) } : x) }); }; const removeItem = (id) => { setQ({ ...q, items: q.items.filter(x => x.id !== id) }); }; // A4: 빠른 템플릿 (정비 풀패키지 / 신차 구매 / 부품 교체) const applyTemplate = (kind) => { const SRV = window.SERVICES || {}; let items = []; let memo = ""; if (kind === "tune-full") { memo = "정비 풀패키지 — 변속 + 브레이크 + 휠 트루닝"; items = [ { id: Math.random().toString(36).slice(2), kind:"labor", name:"Overhaul · 풀 분해 정비", price: 380000, qty:1, discount:{type:"none",value:0} }, { id: Math.random().toString(36).slice(2), kind:"labor", name:"Wheel Truing · 휠 트루닝", price: 60000, qty:1, discount:{type:"none",value:0} }, { id: Math.random().toString(36).slice(2), kind:"part", name:"Shimano CN-M8100 체인 (12s)", price: 78000, qty:1, discount:{type:"none",value:0} }, ]; } else if (kind === "new-bike") { memo = "신차 구매 — Body Geometry Fit 첫구매 50% 할인 포함"; items = [ { id: Math.random().toString(36).slice(2), kind:"part", name:"신차 본체 (모델 선택)", price: 0, qty:1, discount:{type:"none",value:0} }, { id: Math.random().toString(36).slice(2), kind:"labor", name:"Body Geometry Fit · 첫구매", price: 120000, qty:1, discount:{type:"none",value:0} }, ]; } else if (kind === "parts-swap") { memo = "부품 교체 — 체인 + 카세트 + 브레이크 패드"; items = [ { id: Math.random().toString(36).slice(2), kind:"part", name:"Shimano CN-M8100 체인 (12s)", price: 78000, qty:1, discount:{type:"none",value:0} }, { id: Math.random().toString(36).slice(2), kind:"part", name:"Shimano R8100 카세트 11-34T", price: 168000, qty:1, discount:{type:"none",value:0} }, { id: Math.random().toString(36).slice(2), kind:"part", name:"Resin 브레이크 패드 · 한 쌍", price: 32000, qty:1, discount:{type:"none",value:0} }, { id: Math.random().toString(36).slice(2), kind:"labor", name:"부품 교체 공임", price: 80000, qty:1, discount:{type:"none",value:0} }, ]; } setQ({ ...q, items, customer: { ...q.customer, note: memo } }); }; // A3: 자전거 자동완성 — 카탈로그 16종 datalist 데이터 const bikeOptions = (window.CATALOG?.bikes || []).map(b => `${b.name} (${b.sku || b.base_sku || ''})`); return (