// 통합예약 (Unified Booking) — type select → store select → booking form → confirm → edit info function BookingTypeSelect({ onBack, onNext, selected, setSelected }){ const types = [ {id:"screen",label:"스크린"}, {id:"training",label:"트레이닝"}, {id:"lesson",label:"레슨"}, {id:"field",label:"필드예약"}, ]; return (
원하는 매장 타입을
선택해 주세요.
{types.map(t=>( ))}
); } function BookingForm({ onBack, onClose, onNext, store, setForm, reserver, onEditUser, onChangeStore, todayCount=0, limit=2, onCycleLimit }){ const limitReached = todayCount >= limit; const [product, setProduct] = React.useState("Q"); const [date, setDate] = React.useState(0); const [payMethod, setPayMethod] = React.useState("app"); // 반복 노쇼(누적 3회) 선결제 전환 — 사전 결제 강제 (정책 §7) · 데모 토글 const [prepayRequired, setPrepayRequired] = React.useState(false); const [holes, setHoles] = React.useState("18"); const [people, setPeople] = React.useState(2); // 디폴트 2명 const [req, setReq] = React.useState(["t3","left","fourball"]); const [note, setNote] = React.useState(""); const [toast, setToast] = React.useState(null); // 시작 시간 — 시·분 휠 시트로 변경. 종료 = 시작 + 인원 × (18홀 60분 / 9홀 30분) const [startT, setStartT] = React.useState("13:00"); const [timeOpen, setTimeOpen] = React.useState(false); const [photoIdx, setPhotoIdx] = React.useState(0); // 매장 사진 (등록 이미지 스와이프) const [noticeOpen, setNoticeOpen] = React.useState(false); // 매장 공지 더보기 const showToast = (msg)=>{ setToast(msg); window.clearTimeout(showToast._t); showToast._t = window.setTimeout(()=>setToast(null), 2000); }; const copyText = (txt, msg)=>{ const done = ()=>showToast(msg); if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(txt).then(done, done); else done(); }; // Derive available products from store.hours (e.g. [["Q",...],["T2",...]]) const availableProducts = React.useMemo(()=>{ if (!store?.hours) return ["Q","T2"]; const codes = store.hours.map(h => Array.isArray(h) ? h[0] : String(h).split("/")[0].trim()); const screen = codes.filter(c => c==="Q" || c==="T2"); // 스크린 예약은 모든 매장이 Q/T2 중 최소 하나는 보유 — 데이터에 없으면 둘 다 가능으로 폴백 (둘 다 비활성 방지) return screen.length ? screen : ["Q","T2"]; }, [store]); // 가용 제품에 맞춰 보정 — 현재 선택이 불가하면 첫 가용 제품으로 React.useEffect(()=>{ setProduct(prev => availableProducts.includes(prev) ? prev : (availableProducts[0] || prev)); }, [availableProducts]); const productLabel = (p)=> p==="Q" ? "Quantum" : p==="T2" ? "T2" : p; // 단일 선택 — Q/T2 중 하나만 const onPickProduct = (p)=>{ if (!availableProducts.includes(p)) { setToast(`해당 매장은 ${productLabel(p)} 예약이 불가합니다.`); window.clearTimeout(onPickProduct._t); onPickProduct._t = window.setTimeout(()=>setToast(null), 2200); return; } setProduct(p); }; // 예약 가능 기간: 당일 ~ 14일 후 (정책 §1) const WD = ["일","월","화","수","목","금","토"]; const today = new Date(); const days14 = Array.from({length:14},(_,i)=>{ const d=new Date(today); d.setDate(today.getDate()+i); return d; }); const reqs = [ {id:"t3",label:"T3 신규 제품"}, {id:"left",label:"좌타방"}, {id:"2game",label:"2게임 예약"}, {id:"joined",label:"연결된 방"}, {id:"fourball",label:"포섬"}, {id:"4ball",label:"포볼"}, {id:"etc",label:"기타 (직접입력)"}, ]; const toggle = (id)=> setReq(r => r.includes(id) ? r.filter(x=>x!==id) : [...r, id]); // 티타임 계산 — 18홀 60분/인 · 9홀 30분/인 (인원 0명이면 1명 기준 표시) const perMin = holes === "18" ? 60 : 30; const calcPeople = Math.max(1, people); const startMin = (()=>{ const m = String(startT).match(/(\d{1,2}):(\d{2})/); return m ? (+m[1])*60 + (+m[2]) : 780; })(); const endMinTotal = startMin + calcPeople * perMin; const endT = `${endMinTotal >= 1440 ? "익일 " : ""}${String(Math.floor(endMinTotal/60)%24).padStart(2,"0")}:${String(endMinTotal%60).padStart(2,"0")}`; // 매장 정보 표시 값 (선택 매장 데이터 · 없으면 데모 폴백) const storeAddr = store?.addr || "경기 성남시 분당구 판교역로 235 (삼평동) 유스페이스1 지하 1층"; const storeTel = store?.tel || "031-701-0002"; const storeMachines = store?.machines || {Q:6, T2:5}; const storeAmenities = store?.amenities || ["주차가능","좌타석","스윙 플레이트","9X플레이트"]; // 매장 공지·주차 안내 — 미등록 시 해당 영역 숨김 (폴백 없음) const storeNotice = store?.notice || null; const storeParking = store?.parking || null; const screenHours = (store?.hours || [["Q","평일 09:30 - 익일 02:00 · 주말 09:30 - 익일 01:00"]]).filter(h=>Array.isArray(h)); const distText = store?.distM != null ? (store.distM >= 1000 ? (store.distM/1000).toFixed(1)+"km" : store.distM+"m") : null; // 결제 금액 — 입력에 따라 차등: 18홀 1인 19,000원 / 9홀 1인 11,000원 × 인원 (데모. 실제 가격은 매장 자율, §1) const UNIT = holes === "18" ? 19000 : 11000; const won = (n)=> n.toLocaleString("ko-KR") + "원"; const isApp = payMethod === "app" || prepayRequired; const total = UNIT * Math.max(1, people); const canPay = !limitReached && people >= 1; // 인원 미선택 시 결제/요청 불가 const noticeLong = storeNotice && storeNotice.length > 45; // 긴 공지 → 더보기 const goNext = ()=>{ setForm({store, product, date, holes, people, req, note, payMethod, startT, endT, time:`${startT} ~ ${endT}`}); onNext(); }; return (
}/>
{/* === 1. 매장 사진 — 등록 이미지 있으면 등록 이미지(실내/기기/가격표), 없으면 기본 이미지 === */} {/* === 2. 매장 아이덴티티 (매장명 · 영업상태 · 기기 대수 · 평점) === */}
{store?.name || "매장을 선택하세요"} {screenHours.map(([t])=>({t}))}
● {store?.open===false?"영업전":"영업중"} {Object.keys(storeMachines).length > 0 && ( <>{Object.entries(storeMachines).map(([code,cnt])=>`${code==="Q"?"Quantum":code==="T2"?"T2":code} ${cnt}대`).join(" · ")} )} {distText && <>{distText}}
4.9
리뷰 128
{/* 편의시설 칩 — 미등록 시 숨김 */} {storeAmenities.length > 0 && (
{storeAmenities.map(f=>( {f} ))}
)}
{/* === 3. 퀵 액션 (전화 · 길찾기 · 공유) — 매장 변경은 뒤로가기로 대체 === */}
전화 {[ {icon:"nav", label:"길찾기", fn:null}, {icon:"share", label:"공유", fn:null}, ].map(a=>( ))}
{/* === 4. 주소 · 영업시간 · 전화 카드 (복사 버튼 포함) === */}
{storeAddr}
{screenHours.map(([t,h],i)=>(
{t} {h}
))}
{storeTel}
{/* 매장 공지 · 주차 안내 — 미등록 항목은 숨김, 둘 다 없으면 박스 전체 미노출. 공지 길면 더보기 */} {(storeNotice || storeParking) && (
{storeNotice && ( <>
매장 공지
{storeNotice}
{noticeLong && ( )} )} {storeNotice && storeParking &&
} {storeParking && ( <>
주차 안내
{storeParking}
)}
)}
{/* === 5. 예약자 === */}
{/* divider */}
{/* 1일 예약 한도 안내 (정책 §1) */}
{/* Product select */}
제품 선택
· Q / T2 중 하나 선택
{["Quantum","T2"].map((p,i)=>{ const code = i===0 ? "Q" : "T2"; const active = product===code; const disabled = !availableProducts.includes(code); return ( ); })}
{/* Date — 당일~14일 (정책 §1) */}
날짜
· 당일부터 14일 이내
{days14.map((d,i)=>{ const on = date===i, dow = d.getDay(); return ( ); })}
{/* Time */}
시간
{["18H","9H"].map((h,i)=>( ))}
{holes === "18" ? "18홀 게임의 티타임은 한 사람 당 60분으로 계산돼요." : "9홀 게임의 티타임은 한 사람 당 30분으로 계산돼요."}
이용 시작 10분 전까지 예약할 수 있어요.
종료
{endT}
종료 시간은 {holes}홀 · {calcPeople}명 × {perMin}분 기준으로 자동 계산돼요.
{/* People */}
인원
0?"var(--primary)":"transparent",color:people>0?"#fff":"var(--text)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:16,fontWeight:800}}>{people}
{/* Requests */}
요청사항
{reqs.map(r=>{ const on = req.includes(r.id); return ( ); })}
{req.includes("etc") && (