// role-settings.jsx — 권한 설정 페이지 (RBAC v1.1, 회의록 v3.13) // ────────────────────────────────────────────────────────────────── // 권한: settings.role_edit 보유자만 접근 (가능하면 owner) // 디자인: 02_디자인/권한관리UI_v1.0.md + 권한관리_미리보기.html 기반 3-pane // ────────────────────────────────────────────────────────────────── const { useState, useEffect, useMemo } = React; const AUTH = window.AUTH || { role: "owner", can: () => true, permissions: [] }; // v3.19: 매장 운영 톤에 맞춰 정리 (mechanic/manager/part_time 이모지 제거) const EMOJI_PICK = ["👤","👑","🏪","🛠","📋","💼","🎯","⭐","🔐","🧾"]; const COLOR_PICK = ["#8B95A1","#191F28","#E31E26","#0064FF","#0E8F5F","#FFB800","#8B5CF6"]; // ── 헤더 / 네비 ───────────────────────────────────────────── function Header() { return (
스페셜라이즈드 세종점
Admin · 권한 설정
권한 설정
{window.HeaderUser ? React.createElement(window.HeaderUser) : 현재 {AUTH.user?.email || "owner"} 로그인}
); } function PageNav() { return ( ); } function Forbidden() { return (
🔒

접근 권한이 없습니다

권한 설정은 "권한 시스템 편집" 권한 보유자만 사용할 수 있습니다.

← 대시보드로
); } // ── 새 역할 모달 ───────────────────────────────────────────── function NewRoleModal({ open, onClose, onCreate, presets, totalRoles }) { const [name, setName] = useState(""); const [emoji, setEmoji] = useState("👤"); const [color, setColor] = useState("#8B95A1"); const [desc, setDesc] = useState(""); const [copyFrom, setCopyFrom] = useState(""); const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); if (!open) return null; const canSubmit = name.trim().length > 0 && name.trim().length <= 20 && !busy && totalRoles < 10; const submit = async () => { setErr(""); if (!canSubmit) return; setBusy(true); try { await onCreate({ name_ko: name.trim(), emoji, color, description: desc.trim(), copy_from: copyFrom || null }); onClose(); } catch (e) { setErr(e.message || "생성에 실패했습니다."); } finally { setBusy(false); } }; return (
e.stopPropagation()} style={{background:"#fff",borderRadius:16,maxWidth:520,width:"100%",padding:24,boxShadow:"0 20px 60px rgba(0,0,0,0.2)"}}>

➕ 새 역할 만들기

{totalRoles >= 10 && (
⚠️ 역할은 최대 10개까지 만들 수 있습니다. (현재 {totalRoles}개)
)} {err &&
{err}
} setName(e.target.value.slice(0,20))} placeholder="예: 운영팀장" style={{width:"100%",padding:"10px 12px",border:"1px solid var(--grey-300,#D1D6DB)",borderRadius:8,fontSize:14,marginBottom:12,boxSizing:"border-box"}} />
{EMOJI_PICK.map(e => ( ))}
{COLOR_PICK.map(c => (
setDesc(e.target.value)} placeholder="예: 매장 운영 전반" style={{width:"100%",padding:"10px 12px",border:"1px solid var(--grey-300,#D1D6DB)",borderRadius:8,fontSize:14,marginBottom:12,boxSizing:"border-box"}} />
{presets.map(p => ( ))}
); } // ── 민감 권한 경고 모달 ──────────────────────────────────── function SensitiveConfirmModal({ open, role, changes, onConfirm, onCancel }) { if (!open) return null; const adds = changes.filter(c => c.is_sensitive && c.action === "add"); return (

⚠️ 민감 권한 변경 확인

'{role?.name_ko}' 역할에 다음 민감 권한을 부여하려고 합니다:
    {adds.map(c =>
  • 🔴 {c.name_ko}
    • )}

이 권한을 가진 직원은 매장의 민감한 데이터를 다룰 수 있게 됩니다.
영향 받는 직원: {role?.user_count || 0}명

); } // ── 메인 App ───────────────────────────────────────────────── function App() { // 권한 가드 const canEdit = AUTH.can ? AUTH.can("settings.role_edit") : (AUTH.role === "owner"); const [roles, setRoles] = useState([]); const [perms, setPerms] = useState([]); const [selectedRoleId, setSelectedRoleId] = useState(null); const [rolePerms, setRolePerms] = useState([]); // 현재 선택된 역할의 권한 키 배열 (저장된 상태) const [draftPerms, setDraftPerms] = useState([]); // 사용자가 토글한 후 미저장 상태 const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [showNew, setShowNew] = useState(false); const [sensitiveModal, setSensitiveModal] = useState(null); const [toast, setToast] = useState(""); // ── 초기 로드 ─────────────────────────────────────────── useEffect(() => { if (!canEdit) { setLoading(false); return; } (async () => { try { const [r, p] = await Promise.all([window.DAL.listRoles(), window.DAL.listPermissions()]); setRoles(r); setPerms(p); if (r.length > 0) { // 첫 비시스템 역할 선택 (없으면 owner) const first = r.find(x => !x.is_system) || r[0]; setSelectedRoleId(first.id); } } catch (e) { console.error("[role-settings] load fail:", e); } finally { setLoading(false); } })(); }, []); // ── 역할 선택 시 권한 로드 ──────────────────────────── useEffect(() => { if (!selectedRoleId) return; (async () => { const keys = await window.DAL.getRolePermissions(selectedRoleId); setRolePerms(keys); setDraftPerms(keys); })(); }, [selectedRoleId]); // ── 변경 사항 계산 ─────────────────────────────────── const changes = useMemo(() => { const added = draftPerms.filter(k => !rolePerms.includes(k)); const removed = rolePerms.filter(k => !draftPerms.includes(k)); return { added, removed, total: added.length + removed.length }; }, [draftPerms, rolePerms]); const selectedRole = roles.find(r => r.id === selectedRoleId); // ── 권한 카테고리 그룹화 ───────────────────────────── const permsByCategory = useMemo(() => { const groups = {}; perms.forEach(p => { (groups[p.category] = groups[p.category] || []).push(p); }); return groups; }, [perms]); // ── 권한 토글 ──────────────────────────────────────── const togglePerm = (key) => { setDraftPerms(prev => prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]); }; // ── 변경 되돌리기 ──────────────────────────────────── const revert = () => setDraftPerms(rolePerms); // ── 저장 ──────────────────────────────────────────── const doSave = async () => { setSaving(true); try { await window.DAL.saveRolePermissions(selectedRoleId, draftPerms); // mock 저장 영속 if (!window.DAL.isOnline) { try { localStorage.setItem("sejong-mock-role-perms", JSON.stringify(window.__RBAC_MOCK_ROLE_PERMS)); } catch {} } setRolePerms(draftPerms); // 역할 목록의 perm_count 갱신 setRoles(r => r.map(x => x.id === selectedRoleId ? { ...x, perm_count: draftPerms.length } : x)); setToast("✓ '" + selectedRole?.name_ko + "' 권한이 저장되었습니다"); setTimeout(() => setToast(""), 3000); } catch (e) { alert("저장 실패: " + e.message); } finally { setSaving(false); } }; const handleSave = () => { // 민감 권한 추가가 있는지 체크 const sensitiveAdds = changes.added .map(k => perms.find(p => p.key === k)) .filter(p => p && p.is_sensitive); if (sensitiveAdds.length > 0) { setSensitiveModal({ role: selectedRole, changes: sensitiveAdds.map(p => ({ key: p.key, name_ko: p.name_ko, is_sensitive: true, action: "add" })), }); return; } doSave(); }; // ── 새 역할 생성 ───────────────────────────────────── const handleCreate = async (data) => { const id = await window.DAL.createRole(data); const r = await window.DAL.listRoles(); setRoles(r); setSelectedRoleId(id); setToast("✓ 새 역할이 생성되었습니다"); setTimeout(() => setToast(""), 3000); }; if (!canEdit) { return
; } if (loading) { return (
불러오는 중...
); } return (
{/* 페이지 헤더 */}

🔐 권한 설정

역할을 만들고 각 역할의 권한을 토글하세요. 변경은 직원이 다음 로그인 시 적용됩니다.

{/* 변경 사항 sticky bar — v3.19: 시그널 강화 (펄스 + 아이콘) */} {changes.total > 0 && (
🔔 저장되지 않은 변경 {changes.total}건 · {changes.added.length}개 추가 / {changes.removed.length}개 제거
)} {/* 3-pane 레이아웃 — v3.19: 모바일 반응형 */}
{/* ① 역할 리스트 */} {/* ② 권한 매트릭스 */}
{selectedRole?.is_system ? (
🔒 {selectedRole.name_ko}({selectedRole.key})는 시스템 역할이라 모든 권한이 자동 부여되며 편집할 수 없습니다.
※ 사장님 지시(IMM-OWNER-001)에 따라 ytwoss@gmail.com의 권한은 어떤 경로로도 회수되지 않습니다.
) : null} {Object.entries(permsByCategory).map(([cat, items]) => { const checked = items.filter(p => draftPerms.includes(p.key)).length; return (
{cat} {checked} / {items.length}
{items.map(p => { const on = draftPerms.includes(p.key); const disabled = selectedRole?.is_system; return (
{p.is_sensitive && ( 🔴 민감 )} {p.name_ko} {p.description &&
{p.description}
}
); })}
); })}
{/* ③ 미리보기 — v3.19: sticky top 120 + 라벨 통일 */}
{/* 토스트 */} {toast && (
{toast}
)}
setShowNew(false)} onCreate={handleCreate} presets={roles.filter(r => !r.is_system)} totalRoles={roles.length} /> { setSensitiveModal(null); doSave(); }} onCancel={()=>setSensitiveModal(null)} />
); } ReactDOM.createRoot(document.getElementById("root")).render();