// KASHA — 굿즈 장바구니 결제 (계좌이체 단일) // 상세 페이지에서 담은 장바구니(여러 상품)를 한 번에 결제해요. 완료 시 영수증 이메일 + 주문 저장. // 주문자 정보(이름·연락처·이메일)는 계정 값으로 고정(변경 불가). 배송지는 도로명 주소 API로 입력. // 다음(카카오) 우편번호 서비스 — 필요 시 스크립트를 한 번만 로드 function loadDaumPostcode() { if (window.daum && window.daum.Postcode) return Promise.resolve(true); if (window.__daumPostcodeLoading) return window.__daumPostcodeLoading; window.__daumPostcodeLoading = new Promise((resolve) => { const s = document.createElement("script"); s.src = "https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"; s.onload = () => resolve(true); s.onerror = () => resolve(false); document.head.appendChild(s); }); return window.__daumPostcodeLoading; } function GoodsPayScreen({ order, onNavigate }) { const { Button, Card, Input, Icon } = window.DS; const DB = window.KASHADB; window.KASHADB.useStore(); const user = DB.getCurrentUser(); const f = (DB.getGoodsForms() || []).filter((x) => x.id === (order && order.formId))[0]; const won = (n) => Number(n || 0).toLocaleString("ko-KR"); // 장바구니 항목 → 실제 상품과 매칭 (상세에서 넘어온 { productId, qty }) const cart = (order && order.cart) || []; const lines = f ? cart.map((c) => { const p = (f.products || []).filter((x) => x.id === c.productId)[0]; return p ? { p, qty: c.qty, subtotal: (parseInt(p.price, 10) || 0) * c.qty } : null; }).filter(Boolean) : []; // 배송 방식 — 상품이 2개 이상 방식을 제공하면 구매자가 받을 방식을 골라요(기본=첫 번째 제공 방식). const SHIP_LABEL = { digital: "디지털", ship: "실물 배송", handoff: "실물 전달" }; const shipOffered = (p) => (Array.isArray(p.shipTypes) && p.shipTypes.length ? p.shipTypes : [p.shipType || "ship"]); // 주문 단위 배송 방식: 전체 상품이 공통으로 제공하는 방식(교집합)에서 하나를 골라 모든 상품에 적용 const commonShip = lines.length ? lines.map((l) => shipOffered(l.p)).reduce((acc, arr) => acc.filter((v) => arr.indexOf(v) >= 0)) : []; const [orderShip, setOrderShip] = React.useState(""); const effOrderShip = commonShip.indexOf(orderShip) >= 0 ? orderShip : (commonShip[0] || ""); const chosenShip = (l) => (commonShip.length ? effOrderShip : shipOffered(l.p)[0]); // 공통 방식이 있으면 전체 동일, 없으면(드묾) 상품별 기본값 const needShip = lines.some((l) => chosenShip(l) === "ship"); const totalQty = lines.reduce((s, l) => s + l.qty, 0); const total = lines.reduce((s, l) => s + l.subtotal, 0); const cartMap = {}; lines.forEach((l) => { cartMap[l.p.id] = l.qty; }); // 배송지 — 도로명 주소 API(우편번호·도로명) + 상세주소. 계정에 저장된 기본 주소가 있으면 미리 채워요. const savedAddr = (user && user.address) || {}; const [zonecode, setZonecode] = React.useState(savedAddr.zonecode || ""); const [roadAddr, setRoadAddr] = React.useState(savedAddr.road || ""); const [addrDetail, setAddrDetail] = React.useState(savedAddr.detail || ""); const prefilledAddr = !!(savedAddr.road || "").trim(); // 저장 주소 자동 채움 여부(안내 표시용) // 환불 수령 계좌 — 저장된 값이 있으면 자동 채움 const savedRefund = (user && user.refundAccount) || { bank: "", number: "", holder: "" }; const [refund, setRefund] = React.useState({ bank: savedRefund.bank || "", number: savedRefund.number || "", holder: savedRefund.holder || "" }); const setRefundK = (k, v) => setRefund((s) => Object.assign({}, s, { [k]: v })); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(""); const [done, setDone] = React.useState(null); // {order, deposit} const [pcOpen, setPcOpen] = React.useState(false); // 주소 검색 임베드 모달 const pcRef = React.useRef(null); const { render: pcRender, active: pcActive } = window.useKashaModalAnim(pcOpen); // 전역 모달 모션(열림/닫힘 통일) // 주소 검색 모달이 열리면 다음(카카오) 우편번호 위젯을 인페이지로 임베드 // pcRender 도 의존성에 포함 — 애니메이션 마운트로 pcRef 가 붙은 다음 프레임에 재실행돼 임베드가 안정적으로 돼요. React.useEffect(() => { if (!pcOpen || !pcRef.current || !window.daum || !window.daum.Postcode) return; pcRef.current.innerHTML = ""; new window.daum.Postcode({ oncomplete: (data) => { setZonecode(data.zonecode || ""); setRoadAddr(data.roadAddress || data.jibunAddress || ""); setErr(""); setPcOpen(false); setTimeout(() => { const el = document.getElementById("kg-addr-detail"); if (el) el.focus(); }, 60); }, onclose: () => setPcOpen(false), width: "100%", height: "100%", }).embed(pcRef.current); }, [pcOpen, pcRender]); // 배경 스크롤 잠금 — 주소 검색 열려 있는 동안 뒷 페이지 스크롤 차단(공용 KASHALock) React.useEffect(() => { if (!pcOpen || !window.KASHALock) return; window.KASHALock.lock(); return () => window.KASHALock.unlock(); }, [pcOpen]); if (!user) { return (

로그인이 필요해요

굿즈 구매는 로그인 후 이용할 수 있어요.

); } if (!f || lines.length === 0) { return

장바구니가 비어 있어요

; } // 주문자 정보는 계정과 동기화(변경 불가) — 이름·연락처가 없으면 결제 전에 프로필 완성 유도 const profileIncomplete = !((user.name || "").trim()) || !((user.phone || "").trim()); if (profileIncomplete) { return (

프로필을 먼저 완성해 주세요

주문자 정보는 계정 정보와 동일하게 처리돼요. 마이페이지에서 이름과 연락처를 등록한 뒤 다시 결제해 주세요.

); } const openPostcode = async () => { const ok = await loadDaumPostcode(); if (!ok || !window.daum || !window.daum.Postcode) { setErr("주소 검색을 불러오지 못했어요. 잠시 후 다시 시도해 주세요."); return; } setErr(""); setPcOpen(true); }; const submit = () => { setErr(""); if (needShip && !roadAddr.trim()) { setErr("배송지를 검색해 주소를 입력해 주세요."); return; } const fullAddr = needShip ? (roadAddr + (addrDetail.trim() ? " " + addrDetail.trim() : "") + (zonecode ? " (" + zonecode + ")" : "")) : ""; setBusy(true); // 환불 계좌를 입력했으면 다음을 위해 프로필에도 저장(선택) if (refund.bank || refund.number || refund.holder) { try { DB.updateCurrentUser({ refundAccount: refund }); } catch (e) {} } DB.createGoodsOrder({ formId: f.id, items: lines.map((l) => ({ productId: l.p.id, qty: l.qty, shipType: chosenShip(l) })), address: fullAddr, buyerName: user.name, buyerPhone: user.phone, buyerEmail: user.email, refund: { bank: refund.bank.trim(), number: refund.number.trim(), holder: refund.holder.trim() }, }).then((r) => { setBusy(false); if (r && r.error) { setErr({ CLOSED: "판매가 마감되었어요.", NOT_OPEN: "아직 오픈 전이에요.", UNAVAILABLE: "지금은 구매할 수 없어요.", OUT_OF_STOCK: "재고가 부족한 상품이 있어요.", SOLD_OUT: "품절된 상품이 있어요.", ADDRESS_REQUIRED: "배송지를 입력해 주세요.", LIMIT_EXCEEDED: "1인당 구매 제한을 넘었어요.", EMPTY_CART: "장바구니가 비어 있어요.", NO_BACKEND: "로컬 개발에선 주문이 안 돼요(배포 후).", }[r.error] || ("주문 실패: " + r.error)); return; } setDone({ order: r.order, deposit: r.deposit }); window.KASHASuccess && window.KASHASuccess.show({ title: "주문이 접수됐어요", message: "안내된 계좌로 입금해 주세요." }); }); }; if (done) { const d = done.deposit || {}; return (

주문 접수 완료

주문번호 {done.order.id} · 아래 계좌로 {won(done.order.amount)}원을 입금해 주세요. 결제 영수증을 이메일로 보냈어요.

{(done.order.items || []).map((it, i) => )}
{done.order.perks && done.order.perks.length > 0 && (
함께 받는 특전
{done.order.perks.map((k) => k.name).join(", ")}
)}

입금자명을 주문자 이름과 동일하게 보내주시면 확인이 빨라요. 구매 내역은 마이페이지에서 확인할 수 있어요.

); } return (

굿즈 결제

{f.name} · {f.cosplayerName}
{/* 주문 상품: 번호 매긴 영수증 스타일 */} {lines.map((l, i) => (
{i + 1}
{(l.p.images || [])[0] ? : null}
{l.p.name}
{won(l.p.price)}원 × {l.qty}
{won(l.subtotal)}원
))}
상품 합계 {won(total)}원
{/* 받는 방식: 세그먼트 컨트롤(주문 전체 단위) */} {commonShip.length >= 2 && (