// Auth system — signup, login, role-based access // getUsers, saveUsers, getAuth, setAuth, clearAuth are defined in firebase-init.jsx (Firestore) // ═══════════════════════════════════════════════════════════ // LOGIN SCREEN // ═══════════════════════════════════════════════════════════ function AuthLogin({ onLogin, onGoSignup }) { const [email, setEmail] = React.useState(''); const [pw, setPw] = React.useState(''); const [err, setErr] = React.useState(''); const [loading, setLoading] = React.useState(false); const [showReset, setShowReset] = React.useState(false); const [resetEmail, setResetEmail] = React.useState(''); const [resetMsg, setResetMsg] = React.useState(''); const submit = async () => { setErr(''); if (!email || !pw) { setErr('이메일과 비밀번호를 입력하세요'); return; } setLoading(true); try { // Firebase Auth 로그인 await firebaseLogin(email, pw); // Firestore 사용자 데이터 확인 const users = await getUsers(); const user = users.find(u => u.email === email); if (!user) { setErr('등록되지 않은 이메일입니다'); setLoading(false); return; } if (user.status === 'REJECTED') { setErr('가입이 반려되었습니다. 관리자에게 문의하세요.'); setLoading(false); return; } // 이메일 인증 확인 (관리자 제외) if (user.role !== 'admin' && !isEmailVerified()) { setErr('이메일 인증이 완료되지 않았습니다. 메일함을 확인해주세요.'); setLoading(false); return; } // 이메일 인증 완료 시 PENDING_VERIFY → PENDING (관리자 승인 대기) if (user.status === 'PENDING_VERIFY' && isEmailVerified()) { await updateUserByEmail(user.email, { status: 'PENDING' }); user.status = 'PENDING'; } if (user.status === 'PENDING') { setErr('이메일 인증 완료! 관리자 승인 대기 중입니다.'); setLoading(false); return; } setAuth(user); onLogin(user); } catch(e) { if (e.code === 'auth/user-not-found') setErr('등록되지 않은 이메일입니다'); else if (e.code === 'auth/wrong-password' || e.code === 'auth/invalid-credential') setErr('비밀번호가 일치하지 않습니다'); else if (e.code === 'auth/too-many-requests') setErr('로그인 시도가 너무 많습니다. 잠시 후 다시 시도하세요.'); else setErr('로그인 실패: ' + (e.message || '')); } setLoading(false); }; const handleReset = async () => { setResetMsg(''); if (!resetEmail) { setResetMsg('이메일을 입력하세요'); return; } try { await firebaseResetPassword(resetEmail); setResetMsg('비밀번호 재설정 메일을 발송했습니다. 메일함을 확인하세요.'); } catch(e) { if (e.code === 'auth/user-not-found') setResetMsg('등록되지 않은 이메일입니다'); else setResetMsg('발송 실패: ' + (e.message || '')); } }; return (
work up
FRANCHISE PLATFORM · LOGIN
{!showReset ? ( <>
EMAIL
setEmail(e.target.value)} placeholder="your@email.com" className="kr" style={{ width: '100%', padding: '12px 14px', background: 'var(--wu-ink)', border: '1px solid #2A2A26', color: 'var(--wu-paper)', fontSize: 14, outline: 0 }} onKeyDown={e => e.key === 'Enter' && submit()} />
PASSWORD
setPw(e.target.value)} type="password" placeholder="••••••••" className="kr" style={{ width: '100%', padding: '12px 14px', background: 'var(--wu-ink)', border: '1px solid #2A2A26', color: 'var(--wu-paper)', fontSize: 14, outline: 0 }} onKeyDown={e => e.key === 'Enter' && submit()} />
{err &&
⚠ {err}
} {/* 구분선 */}
OR
{/* Google 로그인 */} {/* 카카오 로그인 */}
계정이 없으신가요?
) : ( <>
비밀번호 재설정
가입한 이메일을 입력하면 비밀번호 재설정 링크를 보내드립니다.
EMAIL
setResetEmail(e.target.value)} placeholder="your@email.com" className="kr" style={{ width: '100%', padding: '12px 14px', background: 'var(--wu-ink)', border: '1px solid #2A2A26', color: 'var(--wu-paper)', fontSize: 14, outline: 0 }} onKeyDown={e => e.key === 'Enter' && handleReset()} />
{resetMsg &&
{resetMsg}
} )}
); } // ═══════════════════════════════════════════════════════════ // SIGNUP — CONSUMER (email only, instant) // ═══════════════════════════════════════════════════════════ function AuthSignupConsumer({ onBack, onSignup }) { const [form, setForm] = React.useState({ name: '', email: '', password: '', password2: '', nickname: '' }); const [agreed, setAgreed] = React.useState(false); const [showPrivacy, setShowPrivacy] = React.useState(false); const [err, setErr] = React.useState(''); const f = (k, v) => setForm(f => ({ ...f, [k]: v })); const [loading, setLoading] = React.useState(false); const [done, setDone] = React.useState(false); const submit = async () => { setErr(''); if (!form.name || !form.email || !form.password) { setErr('필수 항목을 모두 입력하세요'); return; } if (form.password.length < 6) { setErr('비밀번호는 6자 이상이어야 합니다'); return; } if (form.password !== form.password2) { setErr('비밀번호가 일치하지 않습니다'); return; } if (!agreed) { setErr('개인정보 수집·이용에 동의해주세요'); return; } setLoading(true); try { const users = await getUsers(); if (users.find(u => u.email === form.email)) { setErr('이미 등록된 이메일입니다'); setLoading(false); return; } // Firebase Auth 회원가입 + 이메일 인증 발송 await firebaseSignup(form.email, form.password); // Firestore에 사용자 정보 저장 (이메일 인증 전이라 PENDING 상태) const user = { email: form.email, password: form.password, name: form.name, nickname: form.nickname, role: 'consumer', status: 'PENDING_VERIFY', createdAt: new Date().toISOString().split('T')[0] }; await addUser(user); setDone(true); } catch(e) { if (e.code === 'auth/email-already-in-use') setErr('이미 등록된 이메일입니다'); else if (e.code === 'auth/weak-password') setErr('비밀번호가 너무 약합니다 (6자 이상)'); else if (e.code === 'auth/invalid-email') setErr('유효하지 않은 이메일 형식입니다'); else setErr('가입 실패: ' + (e.message || '')); } setLoading(false); }; if (done) { return (
✉
EMAIL VERIFICATION SENT
인증 메일 발송 완료
{form.email}으로 인증 메일을 발송했습니다.
메일의 인증 링크를 클릭한 후 관리자 승인을 받으면
로그인하실 수 있습니다.
); } return (
🛍
일반회원 가입
이메일 인증 후 관리자 승인 시 이용 가능
{[ ['이름 *', 'name', 'text', '홍길동'], ['이메일 *', 'email', 'email', 'hello@gmail.com'], ['비밀번호 * (6자+)', 'password', 'password', '••••••••'], ['비밀번호 확인 *', 'password2', 'password', '••••••••'], ['닉네임 (선택)', 'nickname', 'text', 'workup.lover'], ].map(([label, key, type, ph]) => (
{label.toUpperCase()}
f(key, e.target.value)} type={type} placeholder={ph} className="kr" style={{ width: '100%', padding: '10px 12px', border: '1px solid var(--wu-line)', background: 'var(--wu-bg)', fontSize: 14, fontWeight: 600, outline: 0 }} />
))} {/* 개인정보 수집·이용 동의 */}
{showPrivacy && (
1. 수집 항목
이름, 이메일 주소, 비밀번호, 닉네임(선택)

2. 수집 목적
회원 식별 및 가입 의사 확인, 서비스 이용에 따른 본인 확인, 고지사항 전달, 불만 처리 등 원활한 의사소통 경로 확보, 서비스 개선을 위한 통계 활용

3. 보유 및 이용 기간
회원 탈퇴 시까지 (단, 관계법령에 따라 보존이 필요한 경우 해당 기간까지 보관)

4. 동의 거부권 및 불이익
귀하는 개인정보 수집·이용에 대한 동의를 거부할 권리가 있습니다. 다만, 필수 항목에 대한 동의를 거부하실 경우 회원가입이 제한됩니다.

5. 개인정보 처리 위탁
회사는 서비스 운영을 위해 필요한 경우 개인정보 처리업무를 외부에 위탁할 수 있으며, 위탁 시 관련 법령에 따라 안전하게 관리합니다.
)}
{err &&
⚠ {err}
}
); } // ═══════════════════════════════════════════════════════════ // SIGNUP — STORE OWNER (requires admin approval) // ═══════════════════════════════════════════════════════════ function AuthSignupOwner({ onBack, onSignup }) { const [form, setForm] = React.useState({ name: '', email: '', password: '', password2: '', phone: '', storeName: '' }); const [agreed, setAgreed] = React.useState(false); const [err, setErr] = React.useState(''); const [done, setDone] = React.useState(false); const [storeList, setStoreList] = React.useState([]); const [takenStores, setTakenStores] = React.useState([]); const [storeQuery, setStoreQuery] = React.useState(''); const [showDropdown, setShowDropdown] = React.useState(false); const [storesLoaded, setStoresLoaded] = React.useState(false); const dropdownRef = React.useRef(null); // IndexedDB에서 매장 목록 로드 + 이미 등록된 점주의 매장명 파악 React.useEffect(() => { (async () => { try { if (typeof getAllStores === 'function' || (window.getAllStores)) { const fn = window.getAllStores || getAllStores; const stores = await fn(); setStoreList(stores.map(s => s.name).filter(Boolean)); } } catch(e) { console.error('Store load error:', e); } // 이미 등록된 점주의 매장명 const users = await getUsers(); const taken = users.filter(u => u.role === 'owner' && u.storeName).map(u => u.storeName); setTakenStores(taken); setStoresLoaded(true); })(); }, []); // 외부 클릭 시 드롭다운 닫기 React.useEffect(() => { const handleClick = (e) => { if (dropdownRef.current && !dropdownRef.current.contains(e.target)) setShowDropdown(false); }; document.addEventListener('mousedown', handleClick); return () => document.removeEventListener('mousedown', handleClick); }, []); const filteredStores = storeList.filter(name => { if (!storeQuery) return true; return name.toLowerCase().includes(storeQuery.toLowerCase()); }); const isTaken = (name) => takenStores.includes(name); const f = (k, v) => setForm(f => ({ ...f, [k]: v })); const [loading, setLoading] = React.useState(false); const submit = async () => { setErr(''); if (!form.name || !form.email || !form.password || !form.phone || !form.storeName) { setErr('필수 항목을 모두 입력하세요'); return; } if (form.password.length < 6) { setErr('비밀번호는 6자 이상'); return; } if (form.password !== form.password2) { setErr('비밀번호 불일치'); return; } if (!agreed) { setErr('약관 동의 필요'); return; } setLoading(true); try { const users = await getUsers(); if (users.find(u => u.email === form.email)) { setErr('이미 등록된 이메일'); setLoading(false); return; } // Firebase Auth 회원가입 + 이메일 인증 발송 await firebaseSignup(form.email, form.password); const user = { email: form.email, password: form.password, name: form.name, phone: form.phone, storeName: form.storeName, role: 'owner', status: 'PENDING', createdAt: new Date().toISOString().split('T')[0], }; await addUser(user); setDone(true); } catch(e) { if (e.code === 'auth/email-already-in-use') setErr('이미 등록된 이메일입니다'); else if (e.code === 'auth/weak-password') setErr('비밀번호가 너무 약합니다'); else setErr('가입 실패: ' + (e.message || '')); } setLoading(false); }; if (done) { return (
⏱
REQUEST SUBMITTED
승인 대기 중
점주 회원가입은 본사 관리자 승인 후 활성화됩니다.
승인이 완료되면 로그인하실 수 있습니다.
신청 정보
담당자: {form.name}
매장명: {form.storeName}
이메일: {form.email}
연락처: {form.phone}
); } return (
🏪
점주회원 가입
관리자 승인 후 이용 가능
✓ 승인 후 공급가 열람 · 발주 · 매장 관리 등 점주 전용 기능 이용 가능
{[ ['담당자 이름 *', 'name', 'text', '홍길동'], ['이메일 *', 'email', 'email', 'store@workup.co'], ['비밀번호 * (6자+)', 'password', 'password', '••••••••'], ['비밀번호 확인 *', 'password2', 'password', '••••••••'], ['연락처 *', 'phone', 'tel', '010-0000-0000'], ].map(([label, key, type, ph]) => (
{label.toUpperCase()}
f(key, e.target.value)} type={type} placeholder={ph} className="kr" style={{ width: '100%', padding: '10px 12px', border: '1px solid var(--wu-line)', background: 'var(--wu-bg)', fontSize: 14, fontWeight: 600, outline: 0 }} />
))} {/* 매장 선택 (자동완성) */}
대리점명 * (매장 관리 목록에서 선택)
{ setStoreQuery(e.target.value); setShowDropdown(true); f('storeName', ''); }} onFocus={() => setShowDropdown(true)} placeholder={storesLoaded && storeList.length === 0 ? '등록된 매장이 없습니다' : '매장명 검색 (예: 포천, 성남, 모다)'} className="kr" style={{ width: '100%', padding: '10px 12px', border: '1px solid ' + (form.storeName ? 'var(--wu-lime)' : 'var(--wu-line)'), background: form.storeName ? '#F0FFD0' : 'var(--wu-bg)', fontSize: 14, fontWeight: 600, outline: 0 }} /> {form.storeName && (
✓ 선택됨: {form.storeName}
)} {showDropdown && !form.storeName && storeList.length > 0 && (
{filteredStores.length === 0 ? (
일치하는 매장이 없습니다
) : filteredStores.map(name => { const taken = isTaken(name); return ( ); })}
)} {storesLoaded && storeList.length === 0 && (
⚠ 관리자가 매장 목록을 등록하면 선택 가능합니다
)}
{err &&
⚠ {err}
}
); } // ═══════════════════════════════════════════════════════════ // ADMIN USER MANAGEMENT (inside admin dashboard or HQ) // ═══════════════════════════════════════════════════════════ function AdminUserManager() { const [users, setUsers] = React.useState([]); const [filter, setFilter] = React.useState('ALL'); React.useEffect(() => { getUsers().then(u => setUsers(u)); }, []); const refresh = () => getUsers().then(u => setUsers(u)); const changeStatus = async (email, status) => { const all = await getUsers(); const idx = all.findIndex(u => u.email === email); if (idx >= 0) { all[idx].status = status; await saveUsers(all); refresh(); } }; const deleteUser = async (email) => { if (email === 'langpoon@gmail.com') return; if (!confirm('정말 이 회원을 삭제하시겠습니까?')) return; try { // Firestore에서 해당 유저 문서 직접 삭제 if (typeof wu_db !== 'undefined') { const snap = await wu_db.collection('users').where('email', '==', email).get(); const batch = wu_db.batch(); snap.docs.forEach(doc => batch.delete(doc.ref)); await batch.commit(); } // localStorage 백업도 정리 try { const raw = localStorage.getItem('wu-auth-users'); if (raw) { const arr = JSON.parse(raw).filter(u => u.email !== email); localStorage.setItem('wu-auth-users', JSON.stringify(arr)); } } catch(e) {} refresh(); } catch (err) { console.error('deleteUser error:', err); // fallback: saveUsers 방식 const all = (await getUsers()).filter(u => u.email !== email); await saveUsers(all); refresh(); } }; // 점주(owner)는 점주 승인 대시보드에서 관리 → 여기서는 제외 const nonOwnerUsers = users.filter(u => u.role !== 'owner'); const filtered = nonOwnerUsers.filter(u => { if (filter === 'ALL') return true; return u.role === filter; }); const counts = { all: nonOwnerUsers.length, consumer: nonOwnerUsers.filter(u => u.role === 'consumer').length, admin: nonOwnerUsers.filter(u => u.role === 'admin').length }; const Chrome = window.HQChrome || (({ children }) =>
{children}
); return (
{/* Stats */}
{[['전체', counts.all, 'ALL'], ['일반회원', counts.consumer, 'consumer'], ['관리자', counts.admin, 'admin']].map(([l, n, k]) => ( ))}
{/* Table */}
이메일
이름
역할
상태
가입일
액션
{filtered.map(u => (
{u.email}
{u.name}{u.storeName ? ` (${u.storeName})` : ''}
{u.role === 'admin' ? '관리자' : u.role === 'owner' ? '점주' : '일반'} {u.status === 'APPROVED' ? '승인' : u.status === 'PENDING' ? '승인대기' : u.status === 'PENDING_VERIFY' ? '메일인증대기' : '반려'}
{u.createdAt}
{(u.status === 'PENDING' || u.status === 'PENDING_VERIFY') && ( <> )} {u.email !== 'langpoon@gmail.com' && ( )}
))}
); } Object.assign(window, { AuthLogin, AuthSignupConsumer, AuthSignupOwner, AdminUserManager });