// KASHA website — booking flow (4 steps): 촬영 선택 → 옵션 → 일정(캘린더) → 정보 // · 촬영 상품/옵션은 KASHADB(관리자)에서 파생 (옵션 = 상품 고유 + 전역 템플릿) // · 예약 시간대 09:00~21:00 1시간 간격, 상품의 최소 촬영시간(minutes)만큼 연속 슬롯이 비어야 예약 가능 const OPEN_HOUR = 9, CLOSE_HOUR = 22; // 마지막 촬영 종료는 22:00 const DOW_KR = ["일", "월", "화", "수", "목", "금", "토"]; const pad2b = (n) => (n < 10 ? "0" : "") + n; const SLOT_TIMES = Array.from({ length: 21 - OPEN_HOUR + 1 }, (_, i) => pad2b(OPEN_HOUR + i) + ":00"); // 09:00..21:00 const dateKeyOf = (s) => { const m = String(s || "").match(/(\d{4})\.(\d{2})\.(\d{2})/); return m ? `${m[1]}.${m[2]}.${m[3]}` : ""; }; const hourOf = (t) => parseInt(String(t).split(":")[0], 10); const reqSlots = (pkg) => Math.max(1, Math.ceil((((pkg && pkg.minutes) || 60)) / 60)); // 날짜의 시간대 점유 맵 (예약 상품 minutes 기반 연속 점유). hour → "closed" | "pending" function occupancyMap(allRes, pkgByName, dateKey) { const map = {}; allRes.forEach((r) => { if (dateKeyOf(r.date) !== dateKey || r.status === "취소") return; const start = hourOf(r.time); const span = pkgByName[r.pkg] ? reqSlots(pkgByName[r.pkg]) : 1; const level = r.status === "대기" ? "pending" : "closed"; for (let h = start; h < start + span; h++) { if (map[h] !== "closed") map[h] = level; } }); return map; } function BookingScreen({ order, onNavigate }) { const { Button, Card, Input, Select, Badge, Icon } = window.DS; const packages = window.PACKAGES; const pkgByName = {}; window.KASHADB.getPackages().forEach((p) => { pkgByName[p.name] = p; }); const user = window.KASHADB.getCurrentUser(); const places = window.PLACES || ["성수 스튜디오"]; const presetId = (order && order.pkgId) || (packages[0] && packages[0].id); const [step, setStep] = React.useState(1); const [pkgId, setPkgId] = React.useState(presetId); const [selAddons, setSelAddons] = React.useState((order && order.addonIds) || []); const [dateKey, setDateKey] = React.useState(""); const [dateDow, setDateDow] = React.useState(""); const [time, setTime] = React.useState(""); const [name, setName] = React.useState((order && order.name) || (user && user.name) || ""); const [phone, setPhone] = React.useState((order && order.phone) || (user && user.phone) || ""); const [email, setEmail] = React.useState((order && order.email) || (user && user.email) || ""); const [place, setPlace] = React.useState(places[0]); const pkg = packages.find((p) => p.id === pkgId) || packages[0]; const addons = window.effectiveAddons(pkg); const allRes = window.KASHADB.getReservations(); const won = (n) => Number(n || 0).toLocaleString("ko-KR"); const req = reqSlots(pkg); const addonTotal = addons.filter((a) => selAddons.includes(a.id)).reduce((s, a) => s + a.price, 0); const total = (pkg ? pkg.priceNum : 0) + addonTotal; const toggleAddon = (id) => setSelAddons((s) => (s.includes(id) ? s.filter((x) => x !== id) : s.concat([id]))); // 선택 날짜의 슬롯 점유 + 시작 가능 여부(연속 req시간 비어있고 22시 내 종료) const occ = dateKey ? occupancyMap(allRes, pkgByName, dateKey) : {}; const startSelectable = (h) => { if (h + req > CLOSE_HOUR) return false; for (let i = h; i < h + req; i++) { if (occ[i]) return false; } return true; }; const canNext = step === 1 ? !!pkg : step === 2 ? true : step === 3 ? (!!dateKey && !!time) : (!!name && !!phone && /.+@.+\..+/.test(email)); const next = () => { if (step < 4) return setStep(step + 1); const dateStr = dateKey ? `${dateKey} (${dateDow})` : ""; onNavigate("payment", { pkgId, date: dateStr, time, name, phone, email, place, addonIds: selAddons }); }; const back = () => (step > 1 ? setStep(step - 1) : onNavigate("home")); const titles = ["어떤 촬영을 원하세요?", "옵션을 추가해 보세요", "날짜와 시간을 선택하세요", "예약자 정보를 입력하세요"]; return (

{titles[step - 1]}

{/* STEP 1 — 촬영 선택 */} {step === 1 && (
{packages.map((p) => { const active = pkgId === p.id; return ( setPkgId(p.id)} style={{ border: `1.5px solid ${active ? "var(--ink)" : "var(--border-subtle)"}`, boxShadow: active ? "var(--shadow-md)" : "var(--shadow-card)" }}>
{active && }
{p.name} {p.popular && 인기}
{p.time} · {p.cuts}
{p.price}원
 ); })}
)} {/* STEP 2 — 옵션 (상품 고유 + 전역 템플릿) */} {step === 2 && (
{addons.length === 0 ? (

추가 옵션이 없어요. 바로 다음 단계로 진행해 주세요.

 ) : addons.map((a) => { const on = selAddons.includes(a.id); return ( ); })} {addons.length > 0 && (
선택한 옵션 +{won(addonTotal)}원
)}
)} {/* STEP 3 — 일정 (캘린더 + 슬롯) */} {step === 3 && (
{pkg.name}은(는) 최소  {pkg.time} (약 {req}시간) 촬영이에요. 연속으로 비어있는 시간만 선택할 수 있어요.
{ setDateKey(k); setDateDow(dow); setTime(""); }} allRes={allRes} pkgByName={pkgByName} /> {dateKey && (
{dateKey} ({dateDow}) 예약 현황
{SLOT_TIMES.map((t) => { const h = hourOf(t); const st = occ[h] || "available"; const sel = time === t; const selectable = st === "available" && startSelectable(h); const meta = st === "closed" ? { label: "마감", color: "var(--red-500)", bg: "var(--red-50)" } : st === "pending" ? { label: "대기 중", color: "var(--yellow-600)", bg: "var(--yellow-50)" } : selectable ? { label: "예약 가능", color: "var(--green-600)", bg: "var(--green-50)" } : { label: "시간 부족", color: "var(--text-tertiary)", bg: "var(--gray-100)" }; return ( ); })}
)}
)} {/* STEP 4 — 정보 */} {step === 4 && (
setName(e.target.value)} placeholder="홍길동" /> setPhone(e.target.value)} placeholder="010-0000-0000" /> setEmail(e.target.value)} placeholder="you@example.com" />

예약 확정·결제 영수증을 이 이메일로 보내드려요.