{col.header}
{empty}
{col.render ? col.render(row, i) : row[col.key]}

매출

전월 대비

{revenue.map((r, i) => (

{r.label}

{r.value}

{r.sub}

))}

유저 분포

{distribution.map((r, i) => (

{r.label} {r.val}

))}

{/* 최근 이벤트 */}

최근 이벤트

실시간 · audit_log

{recent.map((r, i) => (

{r.event}

{r.user}

{r.meta}

{r.time}

))}

업데이트: {fmtTime(NOW)}

); } // ============================================================ // 2. USERS // ============================================================ // [β-Phase C-3-4] hardcoded → props 인터페이스 변환. // 비주얼 JSX 0 변경 — 필터 바/Table/Pill/페이지네이션 시각 100% 보존. // hardcoded fallback default 유지 — mockup standalone 미리보기 시각 호환. // ⋯ 버튼에 onClick 추가 (시각 변경 X) — 클릭 시 onUserClick(row) 호출. // 페이지네이션 시각은 비활성 그대로 (서버 페이지네이션 별도 phase). function Users({ search: searchProp, onSearch, tier: tierProp, onTierChange, sort: sortProp, onSortChange, users: usersProp, total: totalProp, counts: countsProp, status: statusProp, onStatusChange, onUserClick, }) { const [innerSearch, setInnerSearch] = React.useState(''); const [innerTier, setInnerTier] = React.useState('all'); const [innerStatus, setInnerStatus] = React.useState('all'); const [innerSort, setInnerSort] = React.useState('newest'); const search = searchProp !== undefined ? searchProp : innerSearch; const setSearch = onSearch || setInnerSearch; const tier = tierProp !== undefined ? tierProp : innerTier; const setTier = onTierChange || setInnerTier; const status = statusProp !== undefined ? statusProp : innerStatus; const setStatus = onStatusChange || setInnerStatus; const sort = sortProp !== undefined ? sortProp : innerSort; const setSort = onSortChange || setInnerSort; const allUsers = usersProp || [ { email: '2261071@pcu.ac.kr', role: 'user', mbti: '—', tier: 'free', credits: 0, joined: '2026.5.4.', status: '활성' }, { email: 'byeongjun0021@naver.com', role: 'user', mbti: '—', tier: 'free', credits: 0, joined: '2026.5.4.', status: '활성' }, { email: 'mybj0610@gmail.com', role: 'user', mbti: '—', tier: 'free', credits: 0, joined: '2026.5.2.', status: '활성' }, { email: 'memnyan35@gmail.com', role: 'admin', mbti: 'vibe_trader', tier: 'free', credits: 22, joined: '2026.5.2.', status: '활성' }, ]; const total = totalProp !== undefined ? totalProp : allUsers.length; const counts = countsProp || { all: 4, free: 4, pro: 0, org: 0 }; /* props 모드면 서버 필터링 가정 (allUsers 그대로 표시). standalone 모드는 클라이언트 필터링 — mockup 미리보기 호환. */ const filtered = usersProp ? allUsers : ( allUsers .filter(u => !search || u.email.toLowerCase().includes(search.toLowerCase())) .filter(u => tier === 'all' || u.tier === tier) ); return ( <> {/* 필터 바 */}

setSearch(e.target.value)} placeholder="이메일 검색"/> }, { header: '이메일', key: 'email', mono: true, render: r => {r.email} }, { header: 'Role', render: r => {r.role} }, { header: 'MBTI', render: r => {r.mbti} }, { header: '구독', render: r => {r.tier} }, { header: '크레딧', mono: true, align: 'right', render: r => 0 ? C.text : C.faint }}>{r.credits} }, { header: '총 판단', mono: true, align: 'right', render: r => {r.judgmentCount != null ? r.judgmentCount : '—'} }, { header: '마지막 활동', mono: true, render: r => {r.lastActivity ? new Date(r.lastActivity).toLocaleDateString('ko-KR') : '—'} }, { header: '가입 경로', render: r => r.signupPath === 'beta' ? 베타 : r.signupPath === 'general' ? 일반 : — }, { header: '가입일', mono: true, render: r => {r.joined} }, { header: '상태', render: r => ● {r.status} }, { header: '', width: 60, align: 'right', render: r => }, ]} rows={filtered} empty="검색 결과 없음" /> {/* 페이지네이션 */}

{filtered.length}명 / 총 {total}명

); } // ============================================================ // 3. STATS // ============================================================ function MiniLineChart({ data, color, height = 120 }) { const W = 800, H = height; const max = Math.max(...data, 1); const pts = data.map((v, i) => [i * (W / (data.length - 1)), H - (v / max) * (H - 20) - 10]); const path = pts.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(' '); const area = `M 0 ${H} L ${pts.map(p => `${p[0]} ${p[1]}`).join(' L ')} L ${W} ${H} Z`; return ( ); } function ChartCard({ title, value, change, data, color, xLabels }) { return (

{title}

{value} {change !== undefined && ( = 0 ? C.good : C.bad }}> {change >= 0 ? '▲' : '▼'} {Math.abs(change)}% )}

min {Math.min(...data)} · max {Math.max(...data)}

{xLabels.map((l, i) => {l})}

); } // [β-Phase C-3-2] hardcoded → props 인터페이스 변환. // JSX/시각 디테일 0 변경 — Tabs/ChartCard/보조통계 카드 100% 보존. // hardcoded fallback default 유지 — mockup standalone 미리보기 시각 호환. function Stats({ range: rangeProp, onRangeChange, signups: signupsProp, judges: judgesProp, xLabels: xLabelsProp, signupsValue, signupsChange, judgesValue, judgesChange, }) { const [innerRange, setInnerRange] = React.useState('30d'); const range = rangeProp !== undefined ? rangeProp : innerRange; const setRange = onRangeChange || setInnerRange; const signups = signupsProp || [3, 2.8, 2.6, 2.5, 2.4, 2.3, 2.2, 2.2, 2.2, 2.2, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1, 2.1]; const judges = judgesProp || [2, 1, 1.5, 0.5, 1, 2, 3, 4, 1, 0.5, 0.5, 1.5, 2, 1, 0.5, 1, 2, 3, 2.5, 2, 1.5, 1, 1.5, 2, 2.5, 3, 3.5, 3, 4.5, 4.5]; const xLabels30 = xLabelsProp || ['2026-04-04', '2026-04-11', '2026-04-18', '2026-04-25', '2026-05-04']; const sV = signupsValue !== undefined ? signupsValue : 62; const sC = signupsChange !== undefined ? signupsChange : 8; const jV = judgesValue !== undefined ? judgesValue : 58; const jC = judgesChange !== undefined ? judgesChange : 24; return ( <>

CSV 내려받기

{/* 보조 통계 */}

{[ { label: '평균 세션', value: '4분 22초', hint: 'judgments timestamp 추정' }, { label: '재방문율', value: '36%', hint: '7일 기준' }, { label: 'D7 리텐션', value: '14%', hint: 'cohort 분석' }, { label: 'API 응답', value: '184ms', hint: 'p50' }, ].map((s, i) => (

{s.label}

{s.value}

{s.hint}

))}

구독 시계열은 별도 RPC 메뷰로 변경 — 추후 통합 예정.

); } // ============================================================ // 4. BETA REQUESTS // ============================================================ // [β-Phase C-2-2] hardcoded all → props 인터페이스 변환. // 비주얼 JSX 0 변경 — Tabs/Btn/Table/Pill 디테일 100% 보존. // tab + selected는 자체 state 유지 (UI 책임). counts는 rows에서 자체 계산. function BetaRequests({ rows = [], onApprove, onReject, onBatchApprove, onBatchReject }) { const [tab, setTab] = React.useState('pending'); const [selected, setSelected] = React.useState(new Set()); const counts = { pending: rows.filter(r => r.status === 'pending').length, approved: rows.filter(r => r.status === 'approved').length, rejected: rows.filter(r => r.status === 'rejected').length, all: rows.length, }; const filtered = tab === 'all' ? rows : rows.filter(r => r.status === tab); const toggleSelect = (id) => { const next = new Set(selected); if (next.has(id)) next.delete(id); else next.add(id); setSelected(next); }; const handleBatchApprove = () => { if (selected.size === 0) return; if (onBatchApprove) onBatchApprove(Array.from(selected)); setSelected(new Set()); }; const handleBatchReject = () => { if (selected.size === 0) return; if (onBatchReject) onBatchReject(Array.from(selected)); setSelected(new Set()); }; const statusPill = (s) => { if (s === 'pending') return ● 대기; if (s === 'approved') return ● 승인; return ● 거부; }; return ( <>

선택 거부 선택 승인

r.status === 'pending' && toggleSelect(r.id)} style={{ accentColor: C.primary }}/> }, { header: '이메일', mono: true, render: r => {r.email} }, { header: '이름', render: r => {r.name} }, { header: '신청 이유', render: r => {r.reason} }, { header: '신청일', mono: true, render: r => {r.date} }, { header: '상태', render: r => statusPill(r.status) }, { header: '액션', align: 'right', render: r => r.status === 'pending' ? (

onReject && onReject(r.id)}>거부 onApprove && onApprove(r.id)}>승인

) : 처리됨 }, ]} rows={filtered} empty={tab === 'pending' ? '대기 중인 신청자가 없습니다' : '신청자 없음'} /> ); } // ============================================================ // 5. WHITELIST // ============================================================ // [β-Phase C-2-1] hardcoded rows → props 인터페이스 변환. // 비주얼 JSX 0 변경 — form/Table/Card/footer 디테일 100% 보존. // form 자체 state (email/domain/validity/memo)는 mockup 패턴 그대로 유지. function Whitelist({ rows = [], onAdd, onDelete, onCsvUpload }) { const [email, setEmail] = React.useState(''); const [domain, setDomain] = React.useState(''); const [validity, setValidity] = React.useState('forever'); const [memo, setMemo] = React.useState(''); const csvInputRef = React.useRef(null); const handleSubmit = (e) => { e.preventDefault(); if (!email && !domain) return; if (onAdd) onAdd({ email, domain, validity, memo }); setEmail(''); setDomain(''); setValidity('forever'); setMemo(''); }; const handleCsvBtn = () => { if (csvInputRef.current) csvInputRef.current.click(); }; const handleCsvFile = (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { try { const text = String(reader.result || ''); const lines = text.split(/\r?\n/).filter(l => l.trim()); if (lines.length === 0) { alert('CSV 비어 있음'); return; } const headers = lines[0].split(',').map(h => h.trim().toLowerCase()); const csvRows = lines.slice(1).map(line => { const cols = line.split(',').map(c => c.trim()); const obj = {}; headers.forEach((h, i) => { if (cols[i]) obj[h] = cols[i]; }); return obj; }); if (onCsvUpload) onCsvUpload(csvRows); } catch (err) { alert('CSV 파싱 실패: ' + err.message); } finally { e.target.value = ''; } }; reader.onerror = () => alert('파일 읽기 실패'); reader.readAsText(file); }; return ( <>

📄 CSV 일괄 업로드

{/* 추가 폼 */}

새 항목 추가

setEmail(e.target.value)} placeholder="email (단일 이메일)"/> setDomain(e.target.value)} placeholder="domain (예: keitta.com)"/> setMemo(e.target.value)} placeholder="메모 (선택)"/> + 추가

email 또는 domain 중 하나만 입력. domain을 등록하면 해당 도메인 모든 이메일이 자동 통과합니다.

r.email === '—' ? — : {r.email} }, { header: 'Domain', mono: true, render: r => r.domain === '—' ? — : {r.domain} }, { header: '출처', render: r => {r.source} }, { header: '추가일', mono: true, render: r => {r.addedAt} }, { header: '만료일', mono: true, render: r => {r.expires} }, { header: '메모', render: r => {r.memo} }, { header: '', width: 60, align: 'right', render: r => onDelete && onDelete(r.id)}>삭제 }, ]} rows={rows} />

전체 {rows.length}건 · 활성 {rows.filter(r => r.expires === '무기한' || r.expires > '2026.5.4.').length}건 테이블: whitelist · 인덱스 (email, domain)

); } window.AdminPages = { Dashboard, Users, Stats, BetaRequests, Whitelist };