);
}
function TierBar({ tierDist }) {
const order = getTierOrder();
const rows = order.map(tier => {
const row = (tierDist || []).find(x => x.tier === tier);
const pct = row != null ? Number(row.pct) : 0;
return { tier, pct, color: TIER_COLORS[tier] };
});
const sum = rows.reduce((s, t) => s + Math.max(t.pct, 0), 0);
const allZero = sum < 0.05;
return (
);
}
function Funnel({ steps }) {
const base = Math.max(1, steps[0]?.count || 0);
const derived = (steps || []).map(s => ({
...s,
pct: Math.min(100, Math.round(((s.count || 0) / base) * 100)),
}));
const colors = ['#161412', '#34302a', '#7a5a4a', '#c52a1f', '#ec4438'];
return (
);
}
// ═══════════════════════════════════════════════════════════
// 회원 목록
// ═══════════════════════════════════════════════════════════
function AdminList({ go, members, openDetail, startMatch, seenNewMemberIds = [], onMarkAllNewSeen }) {
const [gender, setGender] = React.useState('all');
const [tier, setTier] = React.useState('all');
const [q, setQ] = React.useState('');
const [sort, setSort] = React.useState('new');
const filtered = React.useMemo(() => {
let list = members.slice();
if (gender !== 'all') list = list.filter(m => m.gender === gender);
if (tier !== 'all') list = list.filter(m => m.tier === tier);
if (q) {
const ql = q.toLowerCase();
list = list.filter(m =>
m.name.toLowerCase().includes(ql) ||
m.job.toLowerCase().includes(ql) ||
m.region.toLowerCase().includes(ql) ||
(m.workplace || '').toLowerCase().includes(ql) ||
m.id.toLowerCase().includes(ql)
);
}
if (sort === 'new') list.sort((a, b) => a.daysAgo - b.daysAgo);
else if (sort === 'tier') list.sort((a, b) => TIER_RANK[b.tier] - TIER_RANK[a.tier]);
else if (sort === 'age') list.sort((a, b) => a.age - b.age);
return list;
}, [members, gender, tier, q, sort]);
return (
);
}
function MobileRow({ m, onClick, seenNewMemberIds = [], openDetail }) {
return (
);
}
// ── 회원 제출 사진 일괄 다운로드 (공통) ─────────────────────────────
/** 파일명에 쓸 문자열 정리 (경로·금지문자 제거, 공백은 한 칸으로) */
function sanitizePhotoFilenamePart(s) {
return String(s ?? '')
.trim()
.replace(/[\\/:*?"<>|]/g, '_')
.replace(/\s+/g, ' ');
}
/**
* 제출 사진 전부 저장. 파일명: `이름 - 나이 - 회원번호 - 1.jpg` …
* JSZip 있으면 zip 한 번, 없으면 순차 개별 다운로드.
*/
async function downloadMemberProfilePhotos(member, options = {}) {
const notify = options.notify || window.__adminNotify;
const photos = (member && member.photos ? member.photos : []).filter((p) => p && p.url);
if (!photos.length) {
notify?.('사진 없음', `${(member && member.name) || '회원'}님 제출 사진이 없습니다.`, 2400);
return { ok: false, count: 0 };
}
const name = sanitizePhotoFilenamePart(member.name) || '회원';
const age = member.age != null ? String(member.age) : '';
const code = sanitizePhotoFilenamePart(member.memberCode || member.id || '');
const base = [name, age, code].filter(Boolean).join(' - ');
const items = [];
for (let i = 0; i < photos.length; i++) {
const p = photos[i];
const res = await fetch(p.url, { cache: 'no-store' });
if (!res.ok) throw new Error(`사진 ${i + 1} 다운로드 실패 (${res.status})`);
const blob = await res.blob();
const ext = (p.mimeType || blob.type || 'image/jpeg').split('/')[1]?.split('+')[0] || 'jpg';
items.push({ name: `${base} - ${i + 1}.${ext}`, blob });
}
if (typeof window.JSZip === 'function') {
const zip = new window.JSZip();
for (const it of items) zip.file(it.name, it.blob);
const zipBlob = await zip.generateAsync({ type: 'blob' });
const url = URL.createObjectURL(zipBlob);
const a = document.createElement('a');
a.href = url;
a.download = `${base}.zip`;
document.body.appendChild(a);
a.click();
a.remove();
setTimeout(() => URL.revokeObjectURL(url), 500);
notify?.('저장 완료', `${items.length}장 · ${base}.zip`, 2400);
} else {
for (const it of items) {
const url = URL.createObjectURL(it.blob);
const a = document.createElement('a');
a.href = url;
a.download = it.name;
document.body.appendChild(a);
a.click();
a.remove();
await new Promise((r) => setTimeout(r, 280));
URL.revokeObjectURL(url);
}
notify?.('저장 완료', `${items.length}장 개별 다운로드`, 2400);
}
return { ok: true, count: items.length };
}
/** 사진 일괄 저장 + 프로필 모두 다운로드(동일 동작) — compact 는 트리/리스트용 작은 버튼 */
function MemberProfilePhotoDownloadButtons({ member, compact }) {
const [busy, setBusy] = React.useState(false);
const n = (member && member.photos) || [];
const cnt = n.filter((p) => p && p.url).length;
const run = async (e) => {
e?.stopPropagation();
e?.preventDefault();
if (busy || !cnt) return;
setBusy(true);
try {
await downloadMemberProfilePhotos(member, { notify: window.__adminNotify });
} catch (err) {
console.error(err);
window.__adminNotify?.('다운로드 실패', err?.message || '네트워크 또는 CORS를 확인해주세요.', 3200);
} finally {
setBusy(false);
}
};
const baseBtn = {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
gap: 4,
borderRadius: 999,
fontWeight: 700,
cursor: cnt && !busy ? 'pointer' : 'not-allowed',
border: 0,
opacity: cnt ? 1 : 0.45,
flexShrink: 0,
};
const sm = compact
? { fontSize: 10, padding: '4px 9px' }
: { fontSize: 11.5, padding: '6px 12px' };
return (
);
}
// ═══════════════════════════════════════════════════════════
// 회원 상세 · 기본 프로필 편집
// ═══════════════════════════════════════════════════════════
function mkBasicProfileDraft(member) {
const y = new Date().getFullYear();
return {
age: typeof member.age === 'number' ? member.age : (member.birthYear ? y - member.birthYear : ''),
gender: member.gender === 'F' ? 'F' : 'M',
name: member.name || '',
role: member.role || '',
company: member.company || '',
height: member.height ?? '',
weight: member.weight ?? '',
maritalStatus: member.maritalStatus === '돌싱' ? '돌싱' : '미혼',
contact: String(member.contact || '').replace(/\D/g, ''),
kakao: member.kakao || '',
insta: member.insta || '',
region: member.region || '',
workplace: member.workplace || '',
smoke: member.smoke || '비흡연자',
school: member.school || '지방 4년제',
salary: member.salary || '',
car: member.car === '없음' ? '없음' : '있음',
marry: member.marry || 'O',
mbti: String(member.mbti || '').toUpperCase(),
};
}
function MemberBasicProfileEditor({ member, onPersist }) {
const [draft, setDraft] = React.useState(() => mkBasicProfileDraft(member));
const [err, setErr] = React.useState(null);
const [saving, setSaving] = React.useState(false);
React.useEffect(() => {
setDraft(mkBasicProfileDraft(member));
setErr(null);
}, [member]);
const set = (patch) => { setDraft((d) => ({ ...d, ...patch })); };
const schoolOpts = React.useMemo(() => {
const s = draft.school;
const base = [...ADMIN_EDUCATION_OPTIONS];
if (s && !base.includes(s)) base.push(s);
return base;
}, [draft.school]);
const save = async () => {
setErr(null);
const yearNow = new Date().getFullYear();
const ageNum = parseInt(String(draft.age), 10);
if (!Number.isFinite(ageNum) || ageNum < 18 || ageNum > 85) {
setErr('나이는 만 18–85세 범위의 숫자로 입력해 주세요.');
return;
}
const birthYear = yearNow - ageNum;
if (birthYear < 1940 || birthYear > yearNow - 15) {
setErr('출생연도 결과가 허용 범위를 벗어났습니다.');
return;
}
const digits = String(draft.contact || '').replace(/\D/g, '');
if (!/^01\d{9}$/.test(digits)) {
setErr('연락처는 하이픈 없이 010으로 시작하는 11자리만 가능합니다.');
return;
}
const ht = typeof draft.height === 'number'
? draft.height
: parseInt(String(draft.height ?? '').trim(), 10);
const wt = typeof draft.weight === 'number'
? draft.weight
: parseInt(String(draft.weight ?? '').trim(), 10);
if (!Number.isFinite(ht) || ht < 120 || ht > 230) {
setErr('키는 120–230(cm) 숫자로 입력해 주세요.');
return;
}
if (!Number.isFinite(wt) || wt < 30 || wt > 200) {
setErr('몸무게는 30–200(kg) 숫자로 입력해 주세요.');
return;
}
if (!String(draft.name || '').trim()) {
setErr('이름을 입력해 주세요.');
return;
}
const payload = {
name: String(draft.name).trim(),
birthYear,
gender: draft.gender,
role: String(draft.role).trim(),
company: String(draft.company).trim(),
height: ht,
weight: wt,
maritalStatus: draft.maritalStatus,
contact: digits,
kakao: String(draft.kakao).trim(),
insta: String(draft.insta || '').trim(),
region: String(draft.region).trim(),
workplace: String(draft.workplace).trim(),
smoke: draft.smoke,
school: draft.school,
salary: String(draft.salary).trim(),
car: draft.car,
marry: draft.marry,
mbti: String(draft.mbti).trim().toUpperCase(),
};
setSaving(true);
try {
await onPersist(payload);
} catch (e) {
setErr(e.message || '저장에 실패했습니다.');
} finally {
setSaving(false);
}
};
const sel = (
label,
el,
key,
) => (
);
}
/**
* 회원 상세 화면 인라인 편집용 — 한마디 / 자기소개 / 이상형 카드.
* - 기본은 읽기 모드: 본문 + 우상단 「수정」 버튼
* - 「수정」 누르면 textarea + 저장/취소
* - onSave({ [field]: value }, label) 호출 시 부모가 서버 PUT
*/
function EditableTextCard({
title,
field,
value,
placeholder,
helper,
emptyText = '— (입력된 값이 없습니다)',
multiline = true,
maxLength,
onSave,
disabled = false,
quoteWrap = false,
}) {
const [editing, setEditing] = React.useState(false);
const [draft, setDraft] = React.useState(value || '');
const [saving, setSaving] = React.useState(false);
const [err, setErr] = React.useState(null);
React.useEffect(() => {
if (!editing) {
setDraft(value || '');
setErr(null);
}
}, [value, editing]);
const startEdit = () => {
setDraft(value || '');
setErr(null);
setEditing(true);
};
const cancel = () => {
setEditing(false);
setErr(null);
};
const save = async () => {
if (saving) return;
setSaving(true);
setErr(null);
try {
await onSave({ [field]: String(draft || '').trim() }, title);
setEditing(false);
} catch (e) {
setErr(e?.message || '저장 실패');
} finally {
setSaving(false);
}
};
const hasValue = !!String(value || '').trim();
const wrap = (txt) => (quoteWrap && txt ? `“${txt}”` : txt);
return (
{title}
{!editing ? (
) : (
)}
{!editing ? (
{hasValue ? wrap(value) : emptyText}
) : (
{multiline ? (