// KASHA — 굿즈 상품 (코스어 굿즈 판매 대행 마켓)
// 굿즈 폼(프로젝트) 카드 목록 + 검색(코스어명/폼명) + 예약 폼 실시간 카운트다운.
function GoodsScreen({ onNavigate }) {
const { Icon, Button } = window.DS;
window.KASHADB.useStore();
const [q, setQ] = React.useState("");
// 서버 publicView 는 draft 제외 + status(effective)/openAt 제공
const all = (window.KASHADB.getGoodsForms() || []).filter((f) => f && (f.status ? f.status !== "draft" : f.active));
const query = q.trim().toLowerCase();
const forms = !query ? all : all.filter((f) =>
(f.name || "").toLowerCase().indexOf(query) >= 0 || (f.cosplayerName || "").toLowerCase().indexOf(query) >= 0);
// 더보기(append) — 검색어 바뀌면 처음으로 리셋
const PAGE = 12;
const [shown, setShown] = React.useState(PAGE);
React.useEffect(() => { setShown(PAGE); }, [query]);
const visible = forms.slice(0, shown);
return (
COSPLAYER GOODS
굿즈 상품
KASHA 대행 코스어들의 공식 굿즈를 만나보세요. 판매 마감 전에 주문해 주세요.
{/* 검색 경험 — 최근 검색·자동완성·키보드·결과 없음 복구(designmotionhq search-experience) */}
onNavigate("goodsDetail", { formId: id })} />
{all.length === 0 ? (
아직 등록된 굿즈가 없어요
코스어라면 굿즈 판매 대행으로 상품을 등록해 보세요.
) : forms.length === 0 ? (
setQ("")} />
) : (
{visible.map((f) => onNavigate("goodsDetail", { formId: f.id })} />)}
setShown(shown + PAGE)} label="굿즈 더보기" />
)}
);
}
function GoodsFormCard({ f, onOpen }) {
const status = window.KASHAGoods.effStatus(f); // draft/scheduled/open/closed (openAt 도달 시 로컬에서도 open 처리)
const cover = (f.images || [])[0] || "";
const products = f.products || [];
const prices = products.map((p) => parseInt(p.price, 10) || 0);
const minPrice = prices.length ? Math.min.apply(null, prices) : 0;
const priceLabel = prices.length ? ((window.won ? window.won(minPrice) : minPrice) + "원" + (prices.length > 1 ? "~" : "")) : "준비 중";
const badge = status === "scheduled" ? { t: "오픈 예정", bg: "rgba(49,130,246,0.86)" }
: status === "closed" ? { t: "판매 마감", bg: "rgba(220,38,38,0.85)" }
: { t: window.KASHAGoods.closeLabel(f), bg: "rgba(15,17,21,0.72)" };
const closed = status === "closed";
return (
{cover ?
{ if (el && el.complete) el.classList.add("loaded"); }} onLoad={(e) => e.currentTarget.classList.add("loaded")} /> :
이미지 준비 중
}
{/* 마감은 좌상단 배지 대신 커버 전체 스크림 + 중앙 라벨로 확실하게 표시 */}
{closed
?
판매 마감
:
{badge.t}}
{f.name}
{/* 예약 폼: 오픈까지 실시간 카운트다운 */}
{status === "scheduled" && f.openAt &&
}
{f.cosplayerAvatar ? 
: null}
{f.cosplayerName || "코스어"}
{closed ? "판매 마감" : priceLabel}
상품 {products.length}개
);
}
// 오픈까지 남은 시간 실시간 카운트다운 (초 단위). 0 도달 시 '지금 오픈'.
function OpenCountdown({ openAt }) {
const target = React.useMemo(() => Date.parse(openAt), [openAt]);
const [now, setNow] = React.useState(Date.now());
React.useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, []);
const diff = target - now;
if (isNaN(target)) return null;
if (diff <= 0) return 지금 오픈됐어요 · 새로고침하면 구매할 수 있어요
;
const s = Math.floor(diff / 1000);
const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
const pad = (n) => String(n).padStart(2, "0");
const clock = pad(h) + ":" + pad(m) + ":" + pad(sec);
return (
{d > 0 ? "D-" + d + " " : ""}{clock} 후 오픈
);
}
// 굿즈 폼 상태·마감 유틸 (window 공용 — 카드/상세 공유)
window.KASHAGoods = {
// 유효 상태 — 서버 status 우선, openAt 도달 시 로컬에서도 open 으로 승격, closeAt 경과 시 closed
effStatus: function (f) {
if (!f) return "draft";
var s = f.status || (f.active === false ? "draft" : "open");
if (s === "draft" || s === "closed") return s;
var now = Date.now();
if (f.closeAt) { var t = Date.parse(f.closeAt); if (!isNaN(t) && t < now) return "closed"; }
if (s === "scheduled") { if (f.openAt) { var o = Date.parse(f.openAt); if (!isNaN(o) && o <= now) return "open"; } return "scheduled"; }
return "open";
},
isClosed: function (f) { return this.effStatus(f) === "closed"; },
isOpen: function (f) { return this.effStatus(f) === "open"; },
closeLabel: function (f) {
if (!f || !f.closeAt) return "상시 판매";
var t; try { t = new Date(f.closeAt).getTime(); } catch (e) { return ""; }
if (isNaN(t)) return "";
if (t < Date.now()) return "판매 마감";
var d = Math.ceil((t - Date.now()) / 86400000);
return d <= 1 ? "오늘 마감" : "D-" + d + " 마감";
},
// 특전 실시간 평가 — 장바구니(cart:{productId:qty})와 총액으로 각 특전 달성 여부·남은 조건 계산
// 반환: [{ perk, met, remaining, remainLabel }] (tier 오름차순)
evalPerks: function (form, cart, amount) {
var perks = (form && form.perks) || [];
if (!perks.length) return [];
cart = cart || {}; amount = amount || 0;
return perks.slice().sort(function (a, z) { return (a.tier || 0) - (z.tier || 0); }).map(function (k) {
var th = k.threshold || 0;
var met, remaining, remainLabel;
if (k.condType === "productQty") {
var have = cart[k.productId] || 0;
met = th > 0 && have >= th;
remaining = Math.max(0, th - have);
remainLabel = met ? "달성" : (remaining + "개 더 담으면 받아요");
} else {
met = th > 0 && amount >= th;
remaining = Math.max(0, th - amount);
remainLabel = met ? "달성" : (Number(remaining).toLocaleString("ko-KR") + "원 더 담으면 받아요");
}
return { perk: k, met: met, remaining: remaining, remainLabel: remainLabel };
});
},
};
// 검색 경험 — 최근 검색(포커스 시 즉시)·자동완성(접두 우선·카테고리 배지·적고 날카롭게)·
// 키보드(↑↓·Enter·Esc, 포커스 링 유지). 순수 표현/클라이언트, 굿즈 데이터·라우팅 계약 불변.
function GoodsSearch({ q, onQuery, all, onOpenForm }) {
const { Icon } = window.DS;
const [focused, setFocused] = React.useState(false);
const [activeIdx, setActiveIdx] = React.useState(-1);
const [recent, setRecent] = React.useState(function () { try { return JSON.parse(localStorage.getItem("kasha_goods_recent") || "[]"); } catch (e) { return []; } });
const wrapRef = React.useRef(null);
const inputRef = React.useRef(null);
const query = (q || "").trim().toLowerCase();
// 검색 대상 풀 — 코스어(고유명) + 굿즈 폼(이름)
const pool = React.useMemo(function () {
const seen = {}, arr = [];
(all || []).forEach(function (f) {
if (f.cosplayerName && !seen["c:" + f.cosplayerName]) { seen["c:" + f.cosplayerName] = 1; arr.push({ type: "코스어", label: f.cosplayerName }); }
if (f.name) arr.push({ type: "굿즈", label: f.name, formId: f.id });
});
return arr;
}, [all]);
// 자동완성 — 접두 일치 우선 → 부분 일치, 최대 6 (세 개의 날카로운 결과가 열 개의 잡음보다 나아요)
const matches = React.useMemo(function () {
if (!query) return [];
const pre = [], inc = [];
pool.forEach(function (it) { const i = it.label.toLowerCase().indexOf(query); if (i === 0) pre.push(it); else if (i > 0) inc.push(it); });
return pre.concat(inc).slice(0, 6);
}, [pool, query]);
// 빈 검색어 + 포커스: 최근 검색 + 추천
const suggestions = React.useMemo(function () {
if (query) return matches;
const rec = recent.slice(0, 5).map(function (s) { return { type: "recent", label: s }; });
const recSet = {}; rec.forEach(function (r) { recSet[r.label] = 1; });
const reco = pool.filter(function (it) { return !recSet[it.label]; }).slice(0, 5);
return rec.concat(reco);
}, [query, matches, recent, pool]);
const firstReco = (!query) ? suggestions.findIndex(function (s) { return s.type !== "recent"; }) : -1;
const persist = function (arr) { setRecent(arr); try { localStorage.setItem("kasha_goods_recent", JSON.stringify(arr)); } catch (e) {} };
const saveRecent = function (str) { const s = String(str || "").trim(); if (!s) return; persist([s].concat(recent.filter(function (r) { return r !== s; })).slice(0, 6)); };
const removeRecent = function (str, e) { e.stopPropagation(); persist(recent.filter(function (r) { return r !== str; })); };
const close = function () { setFocused(false); setActiveIdx(-1); };
const choose = function (it) {
if (!it) return;
if (it.type === "굿즈" && it.formId) { saveRecent(it.label); close(); onOpenForm(it.formId); return; }
onQuery(it.label); saveRecent(it.label); close(); // 코스어·최근 → 검색어로 필터
};
const onKey = function (e) {
if (e.key === "ArrowDown") { e.preventDefault(); setFocused(true); setActiveIdx(function (i) { return Math.min(suggestions.length - 1, i + 1); }); }
else if (e.key === "ArrowUp") { e.preventDefault(); setActiveIdx(function (i) { return Math.max(-1, i - 1); }); }
else if (e.key === "Enter") { if (activeIdx >= 0 && suggestions[activeIdx]) { e.preventDefault(); choose(suggestions[activeIdx]); } else { saveRecent(q); close(); } }
else if (e.key === "Escape") { close(); if (inputRef.current) inputRef.current.blur(); }
};
React.useEffect(function () {
if (!focused) return;
const onDown = function (ev) { if (wrapRef.current && !wrapRef.current.contains(ev.target)) close(); };
document.addEventListener("mousedown", onDown);
return function () { document.removeEventListener("mousedown", onDown); };
}, [focused]);
const showDrop = focused && suggestions.length > 0;
return (
{ onQuery(e.target.value); setActiveIdx(-1); setFocused(true); }}
onFocus={() => setFocused(true)} onKeyDown={onKey}
placeholder="코스어 이름·굿즈 이름으로 검색"
role="combobox" aria-expanded={showDrop} aria-controls="kg-suggest-list" aria-autocomplete="list"
aria-activedescendant={activeIdx >= 0 ? ("kg-sug-" + activeIdx) : undefined} aria-label="굿즈 검색" />
{q &&
}
{suggestions.map(function (it, i) {
const isRecent = it.type === "recent";
return (
{(!query && i === 0 && isRecent) && 최근 검색
}
{(!query && i === firstReco && firstReco >= 0) && 추천 검색
}
);
})}
);
}
// 결과 없음 복구 — 막다른 화면 대신 추천 코스어·검색 지우기로 복귀 경로 제공
function GoodsNoResults({ q, all, onPick, onClear }) {
const { Icon, Button } = window.DS;
const cos = [];
(all || []).forEach(function (f) { if (f.cosplayerName && cos.indexOf(f.cosplayerName) < 0) cos.push(f.cosplayerName); });
const picks = cos.slice(0, 6);
return (
‘{q}’에 대한 결과가 없어요
이름의 일부만 입력하거나, 아래 코스어를 눌러보세요.
{picks.length > 0 && (
{picks.map((c) => )}
)}
);
}
window.GoodsScreen = GoodsScreen;
// ── 특전 보드 — 상세·결제 공용. 실시간 달성 여부를 색으로 강조 + 특전 정보 모달 ──
function GoodsPerkBoard({ form, cart, amount }) {
const { Icon, Dialog, Button } = window.DS;
const [open, setOpen] = React.useState(false);
const perks = (form && form.perks) || [];
if (!perks.length) return null;
const rows = window.KASHAGoods.evalPerks(form, cart || {}, amount || 0);
// 피크 모먼트(peak-end): 특전이 방금 달성됐을 때만 체크 아이콘을 스프링으로 pop.
// 최초 마운트에선 pop 안 함(이미 달성된 특전을 축하하지 않음). 표현만 — 특전 로직/데이터 무변경.
const prevMetRef = React.useRef(null);
const nowMetIds = rows.filter((r) => r.met).map((r) => r.perk.id);
const nowMetSet = new Set(nowMetIds);
const justMet = prevMetRef.current === null ? new Set() : new Set(nowMetIds.filter((id) => !prevMetRef.current.has(id)));
React.useEffect(() => { prevMetRef.current = nowMetSet; });
const wonf = (n) => (window.won ? window.won(n) : Number(n || 0).toLocaleString("ko-KR"));
const prodName = (pid) => { const p = (form.products || []).filter((x) => x.id === pid)[0]; return p ? p.name : "특정 상품"; };
const condLabel = (k) => k.condType === "productQty" ? (prodName(k.productId) + " " + (k.threshold || 0) + "개 이상") : ("총 " + wonf(k.threshold) + "원 이상");
const gotCount = rows.filter((r) => r.met).length;
return (
특전
조건(구매 금액·수량 등)을 달성하면 상품과 함께 무료로 받는 혜택이에요. 담는 즉시 달성 여부가 실시간으로 표시돼요.
{gotCount > 0 && {gotCount}개 달성}
{rows.map((r, i) => (
{r.met ? : {i + 1}}
{r.perk.name}
{condLabel(r.perk)}
{r.remainLabel}
))}
{/* 항상 마운트 + open 토글 → 닫힘 애니메이션 재생(다른 모달과 통일) */}
);
}
window.GoodsPerkBoard = GoodsPerkBoard;