// ============================================================ // counseling.jsx v2 — 상담센터 플랫폼 (2단계: 실결제 연동) // 토스페이먼츠 SDK + DB 실시간 슬롯 + 마이예약 관리 // ============================================================ const SESSION_TYPES = { video: { label: '화상 상담', icon: '📹', desc: '온라인 화상 · 예약 후 링크 자동 발송' }, phone: { label: '전화 상담', icon: '📞', desc: '전화 통화로 진행' }, visit: { label: '방문 상담', icon: '🏢', desc: '센터 직접 방문' }, }; // ── API 클라이언트 ────────────────────────────────────────── const cApi = { _auth() { const t=localStorage.getItem('access_token'); return t?{'Authorization':'Bearer '+t}:{}; }, async centers() { return (await fetch('/api/counseling/centers')).json(); }, async counselors(centerId=null) { const url=centerId?`/api/counseling/counselors?centerId=${centerId}`:'/api/counseling/counselors'; return (await fetch(url)).json(); }, async slots(counselorId,date) { return (await fetch(`/api/counseling/counselors/${counselorId}/slots?date=${date}`)).json(); }, async prepare(body) { return (await fetch('/api/counseling/appointments/prepare',{method:'POST',headers:{'Content-Type':'application/json',...this._auth()},body:JSON.stringify(body)})).json(); }, async myAppointments() { return (await fetch('/api/counseling/appointments',{headers:this._auth()})).json(); }, async cancel(id) { return (await fetch(`/api/counseling/appointments/${id}/cancel`,{method:'PATCH',headers:this._auth()})).json(); }, }; const fmt = n => Number(n).toLocaleString('ko-KR')+'원'; const fmtDt = iso => { if(!iso)return''; const d=new Date(iso); return d.toLocaleString('ko-KR',{month:'long',day:'numeric',weekday:'short',hour:'2-digit',minute:'2-digit'}); }; const toDateStr = d => d.toISOString().slice(0,10); const parseArr = v => { if(Array.isArray(v))return v; try{return JSON.parse(v);}catch{return[];} }; function Stars({rating,size=13}){ const full=Math.floor(rating), arr=Array.from({length:5},(_,i)=>i CC[id]||{color:'#5A5A5A',bg:'#F5F5F0'}; // ============================================================ // BookingModal — 3단계 예약 플로우 (실 토스 SDK) // ============================================================ function BookingModal({counselor,onClose,onComplete,isLoggedIn,setView}){ const {useState:useS,useEffect:useE}=React; const [step,setStep]=useS(1); const [dates,setDates]=useS([]); const [selDate,setSelDate]=useS(null); const [slots,setSlots]=useS([]); const [slotsLoading,setSlotsLoading]=useS(false); const [selTime,setSelTime]=useS(null); const [selType,setSelType]=useS(null); const [memo,setMemo]=useS(''); const [preparing,setPreparing]=useS(false); const [done,setDone]=useS(false); const c=counselor; useE(()=>{ const ds=[]; for(let i=1;i<=21;i++){const d=new Date();d.setDate(d.getDate()+i);if(d.getDay()!==0)ds.push(d);} setDates(ds.slice(0,14)); },[]); useE(()=>{ if(!selDate)return; setSlotsLoading(true); setSlots([]); setSelTime(null); cApi.slots(c.id,toDateStr(selDate)) .then(res=>{ if(res.success)setSlots(res.data); else setSlots([]); }) .catch(()=>{ const fb=[]; for(let h=9;h<18;h++){for(let m=0;m<60;m+=(c.minutes>=60?60:50)){if(h*60+m+c.minutes>18*60)break;const t=`${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`;const busy=['09:00','11:00','14:00','16:00'].includes(t);fb.push({time:t,available:!busy});}} setSlots(fb); }) .finally(()=>setSlotsLoading(false)); },[selDate]); const handlePay=async()=>{ if(!isLoggedIn){onClose();setView('memberLogin');return;} setPreparing(true); try{ const scheduledAt=`${toDateStr(selDate)}T${selTime}:00`; const res=await cApi.prepare({counselorId:c.id,scheduledAt,sessionType:selType,userMemo:memo}); if(!res.success){alert(res.error||'예약 준비 실패');setPreparing(false);return;} const d=res.data; // 토스 SDK 로드 if(!window.TossPayments){ await new Promise((ok,ng)=>{const s=document.createElement('script');s.src='https://js.tosspayments.com/v1/payment';s.onload=ok;s.onerror=ng;document.head.appendChild(s);}); } const tp=window.TossPayments(d.tossClientKey); await tp.requestPayment('카드',{amount:d.amount,orderId:d.orderId,orderName:d.orderName,customerName:d.customerName,customerEmail:d.customerEmail,successUrl:d.successUrl,failUrl:d.failUrl}); }catch(err){ if(err?.code!=='USER_CANCEL'){console.error(err);alert('결제 중 오류가 발생했습니다.');} setPreparing(false); } }; // 데모 결제 (TOSS 미설정 환경용) const handleDemoPay=async()=>{ if(!isLoggedIn){onClose();setView('memberLogin');return;} setPreparing(true); await new Promise(r=>setTimeout(r,1400)); setPreparing(false); setDone(true); const roomId='maumful-'+Math.random().toString(36).slice(2,10); setTimeout(()=>onComplete({counselor:c,date:selDate,time:selTime,type:selType,roomId,videoRoomUrl:selType==='video'?`https://meet.jit.si/${roomId}`:null}),600); }; const stepsL=['날짜·시간','상담 유형','결제']; const ok1=selDate&&selTime, ok2=!!selType; if(done)return(
✅

예약이 완료되었습니다!

{c.name} 상담사 · {selDate&&selDate.toLocaleDateString('ko-KR',{month:'long',day:'numeric'})} {selTime}

결제 완료 · {fmt(c.fee)}
); return(
{/* 헤더 */}
{c.emoji} {c.name} 상담사 예약
{c.centerName}
{stepsL.map((l,i)=>(
i+1?'#2D6A4F':step===i+1?'#2D6A4F':'#E5E5E0',color:step>=i+1?'white':'#9A9A9A',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:700,flexShrink:0}}> {step>i+1?'✓':i+1}
{l}
{ii+1?'#2D6A4F':'#E5E5E0',margin:'0 5px'}}/>} ))}
{/* 콘텐츠 */}
{step===1&&(
날짜 선택
{dates.map(d=>{ const lbl=d.toLocaleDateString('ko-KR',{month:'short',day:'numeric',weekday:'short'}); const sel=selDate&&toDateStr(d)===toDateStr(selDate); return(); })}
{selDate&&( <>
시간 선택 {slotsLoading&&조회 중...}
{slots.length===0&&!slotsLoading&&
이 날짜는 예약 가능한 시간이 없습니다.
}
{slots.map(slot=>{ const sel=selTime===slot.time; return(); })}
)}
)} {step===2&&(
상담 유형 선택
{c.types.map(type=>{ const info=SESSION_TYPES[type],sel=selType===type; return(); })}
상담사에게 전달할 내용 (선택)