/* global React, Icon, Reveal */ const { useState: useStateB } = React; // 카카오톡 채널 채팅 URL (booking-config.js의 window.KAKAO_CHANNEL_URL) function kakaoChat() { const u = (typeof window !== "undefined" && window.KAKAO_CHANNEL_URL) || ""; return (u && u.indexOf("YOUR-") === -1) ? u : ""; } // 서브페이지(devices.html 등)에서 홈 전용 앵커(#booking 등)를 홈으로 연결하기 위한 접두사 const PAGE_BASE = /(?:^|\/)(index\.html)?$/.test(location.pathname) ? "" : "./"; // ---------- Color map per model ---------- const MODEL_COLORS = { "iPhone 17": ["라벤더", "세이지", "미스트 블루", "화이트", "블랙"], "iPhone 17 Pro": ["실버", "딥 블루", "코스믹 오렌지"], "iPhone 17 Pro Max": ["실버", "딥 블루", "코스믹 오렌지"], "iPhone Air": ["스카이 블루", "라이트 골드", "클라우드 화이트", "스페이스 블랙"], "iPhone 17e": ["화이트", "블랙", "핑크"], "Galaxy S26": ["코발트 바이올렛", "스카이 블루", "블랙", "화이트"], "Galaxy S26+": ["코발트 바이올렛", "스카이 블루", "블랙", "화이트"], "Galaxy S26 Ultra": ["코발트 바이올렛", "스카이 블루", "블랙", "화이트"], "Galaxy Z Fold8 Ultra": ["그라파이트", "크림", "바이올렛 쉐도우", "그린 쉐도우"], "Galaxy Z Fold8": ["그라파이트", "크림", "라벤더", "피스타치오"], "Galaxy Z Flip8": ["그라파이트", "크림", "핑크", "민트"], "삼성 스타일 폴더2": ["블랙"], "Galaxy A17": ["라이트 블루", "블랙", "라이트 그린"], "기타 / 추천 부탁": [], "아직 미정": [] }; // ---------- Booking ---------- function BookingSection() { const topics = ["기기변경", "번호이동", "신규가입", "인터넷/TV 결합", "요금제 상담", "부모님/가족폰"]; const [form, setForm] = useStateB({ name: "", phone: "", birth: "", carrier: "", topics: [], model: "", capacity: "", color: "", date: "", note: "", consent: false }); const [submitted, setSubmitted] = useStateB(false); const [sending, setSending] = useStateB(false); const [errors, setErrors] = useStateB({}); // 희망 방문 날짜 min 값 (오늘, 로컬 기준 YYYY-MM-DD) const pad2 = (n) => String(n).padStart(2, "0"); const _now = new Date(); const todayStr = _now.getFullYear() + "-" + pad2(_now.getMonth() + 1) + "-" + pad2(_now.getDate()); const toggleTopic = (t) => { setForm((f) => ({ ...f, topics: f.topics.includes(t) ? f.topics.filter((x) => x !== t) : [...f.topics, t] })); }; const onSubmit = async (e) => { e.preventDefault(); if (sending || submitted) return; // 연타 중복 제출 방지 const errs = {}; if (!form.name.trim()) errs.name = "이름을 입력해주세요."; if (!form.phone.trim()) errs.phone = "연락처를 입력해주세요."; if (!form.consent) errs.consent = "개인정보 수집·이용에 동의해주세요."; setErrors(errs); if (Object.keys(errs).length) { // 첫 번째 오류(aria-invalid) 필드로 스크롤 + 포커스 const firstId = errs.name ? "bk-name" : errs.phone ? "bk-phone" : "bk-consent"; const el = typeof document !== "undefined" ? document.getElementById(firstId) : null; if (el) { el.scrollIntoView({ behavior: "smooth", block: "center" }); el.focus({ preventScroll: true }); } return; } // 초대링크로 들어온 경우 저장해둔 추천코드 (app.jsx useReferralCapture) // 저장된 지 30일이 지난 코드는 만료 처리하고 사용하지 않는다 let refCode = ""; try { refCode = localStorage.getItem("referralCode") || ""; const refAt = localStorage.getItem("referralAt") || ""; if (refCode && refAt && Date.now() - new Date(refAt).getTime() > 30 * 24 * 60 * 60 * 1000) { localStorage.removeItem("referralCode"); localStorage.removeItem("referralAt"); refCode = ""; } } catch (e2) {} // 1) 구글 시트 저장 + 카카오 알림 (Google Apps Script 웹앱으로 전송) const timeEl = typeof document !== "undefined" ? document.getElementById("bk-time") : null; const payload = { ...form, time: timeEl ? timeEl.value : "", topics: form.topics, referralCode: refCode, submittedAt: new Date().toISOString() }; const url = (typeof window !== "undefined" && window.BOOKING_WEBHOOK_URL) || ""; setSending(true); // 성공 후에도 재활성화하지 않음 (중복 제출 방지) if (url && url.indexOf("YOUR-") === -1) { try { // Apps Script는 Content-Type 헤더를 명시하지 않은 단순 POST에만 CORS 응답을 주므로 headers를 넣지 않는다 const res = await fetch(url, { method: "POST", mode: "cors", body: JSON.stringify(payload) }); if (!res.ok) throw new Error("HTTP " + res.status); } catch (err) { // 실패 시 접수 완료로 처리하지 않고 재시도 안내 setSending(false); setErrors({ submit: "일시적인 오류로 접수하지 못했어요. 잠시 후 다시 시도하시거나 010-7932-9779로 전화 주세요." }); return; } } // 2) 초대링크 추천코드가 있으면 → Supabase에 추천 자동 등록 (관리자 페이지에 집계) if (refCode && typeof window !== "undefined" && window.supabase && window.SUPABASE_URL && window.SUPABASE_URL.indexOf("YOUR-") === -1) { try { const sb = window.__sbClient || (window.__sbClient = window.supabase.createClient(window.SUPABASE_URL, window.SUPABASE_ANON_KEY)); sb.rpc("submit_referral", { p_code: refCode, p_name: form.name, p_phone: form.phone, p_memo: "웹 신청" + (form.model ? " · " + form.model : "") + (form.note ? " · " + form.note : "") }).then(() => {}, () => {}); } catch (err) {/* 추천 등록 실패해도 예약 접수는 유지 */} } // 접수 성공 → 추천코드는 1회만 귀속되도록 삭제 if (refCode) { try { localStorage.removeItem("referralCode"); localStorage.removeItem("referralAt"); } catch (e3) {} } setSubmitted(true); }; const bullets = [ { n: "01", t: "지금 쓰시는 조건 점검", s: "현재 약정·통신사·월 요금을 먼저 파악합니다" }, { n: "02", t: "필요한 건지 확인", s: "사진·영상·게임·부모님용 — 용도별로 맞춰드립니다" }, { n: "03", t: "월 납부액 유지 시뮬레이션", s: "지금과 같은 돈으로 어떤 조합이 가능한지 계산드립니다" }, { n: "04", t: "필요 시만 개통", s: "설명만 듣고 가셔도 괜찮습니다. 강요·권유는 없습니다." }]; return (
BOOKING

속으로 결정하세요.
말은 저희가 정리해드릴게요.

“이 폰이 나한테 맞나?” · “매달 얼마씩 나가야 적정이지?” · “지금 바꿔도 손해는 안 볼까?” 고객님이 막연하게 고민하는 그 질문들을, 수치·조건으로 먼저 정리해드립니다.

setForm((f) => ({ ...f, name: e.target.value }))} aria-invalid={!!errors.name} />
setForm((f) => ({ ...f, phone: e.target.value }))} aria-invalid={!!errors.phone} />
setForm((f) => ({ ...f, birth: e.target.value }))} />
{topics.map((t) => )}
정확한 모델명·재고는 매장에서 확인 후 안내드립니다.
{ const v = e.target.value; // 일요일은 정기 휴무 → 선택 차단 if (v && new Date(v + "T00:00:00").getDay() === 0) { setForm((f) => ({ ...f, date: "" })); setErrors((er) => ({ ...er, date: "일요일은 정기 휴무입니다" })); return; } setForm((f) => ({ ...f, date: v })); setErrors((er) => ({ ...er, date: "" })); }} /> {errors.date &&
{errors.date}
}
영업시간: 월–토 오전 10:00 – 오후 8:00 · 일요일 휴무