세 가지 새로운 sgcHTML 관리 컴포넌트: Presence, RolesPermissions, UserManagement

2026년 7월 21일 · 컴포넌트

sgcHTML의 새로운 컴포넌트 25종을 다루는 이 시리즈의 마지막 글입니다. 모든 관리자 패널에 결국 필요해지는 세 가지 컴포넌트로 마무리합니다. 지금 누가 접속해 있는지, 누가 무엇을 할 수 있는지, 그리고 실제로 계정을 관리하는 테이블입니다. 세 컴포넌트 모두 채팅이나 작업 진행률 화면에서 이미 사용 중인 것과 동일한 WebSocket 채널로 실시간 업데이트를 전송하므로, 이번 컴포넌트들도 앞선 글에서 소개한 컴포넌트들과 자연스럽게 어우러집니다.

Presence — 실시간 접속자 현황 목록

TsgcHTMLComponent_Presence는 겹쳐진 아바타 스택 또는 이름과 상태를 나열하는 목록 형태로 렌더링되며, MaxVisible로 개수를 제한하고 초과분은 "+N" 칩으로 표시합니다. AddUser는 접속자 항목을 추가하거나 갱신하고, SetUserStatus는 상태 점만 업데이트하며, GetUserFragmentHTML은 그 단일 변경 사항을 연결된 모든 클라이언트에 전송합니다.

uses
  sgcHTML_Component_Presence;

var
  oPresence: TsgcHTMLComponent_Presence;
begin
  oPresence := TsgcHTMLComponent_Presence.Create(nil);
  try
    oPresence.PresenceID := 'roster';
    oPresence.Layout := plAvatars;
    oPresence.MaxVisible := 5;
    oPresence.Title := 'Online';

    oPresence.AddUser('u1', 'Ana Torres', psOnline);
    oPresence.AddUser('u2', 'Marc Bell', psAway, '', 'Back at 3pm');
    oPresence.AddUser('u3', 'Kenji Ito', psBusy);

    WebModule.Response := oPresence.HTML;   // avatar stack + scoped CSS
  finally
    oPresence.Free;
  end;
end;

// Push a status change to every connected client, no full re-render:
oPresence.SetUserStatus('u2', psOnline);
TsgcHTMX_Engine_Server.BroadcastFragment(oPresence.GetUserFragmentHTML('u2'));

RolesPermissions — 체크박스로 가득한 폼이 아닌 권한 부여 매트릭스

TsgcHTMLComponent_RolesPermissions는 역할을 열로, 권한을 행으로(카테고리별로 그룹화하여) 배치하고, 각 교차점에 체크박스를 표시합니다. AddRole과 AddPermission이 두 축을 구성하고, SetGrant가 초기 셀 상태를 체크하며, 클라이언트 측에서 발생하는 모든 토글은 JSON 페이로드 형태로 서버에 도착하는데, 핸들러는 ProcessGrantChanged로 적용하기 전에 반드시 권한을 확인해야 합니다.

uses
  sgcHTML_Enums, sgcHTML_Component_RolesPermissions;

var
  oMatrix: TsgcHTMLComponent_RolesPermissions;
begin
  oMatrix := TsgcHTMLComponent_RolesPermissions.Create(nil);
  try
    oMatrix.MatrixID := 'acl';
    oMatrix.StickyHeader := True;

    oMatrix.AddRole('admin', 'Administrator').Color := hcDanger;
    oMatrix.AddRole('editor', 'Editor');
    oMatrix.AddRole('viewer', 'Viewer');

    oMatrix.AddPermission('users.edit', 'Edit users', 'Users');
    oMatrix.AddPermission('users.delete', 'Delete users', 'Users');
    oMatrix.AddPermission('billing.view', 'View invoices', 'Billing');

    oMatrix.SetGrant('admin', 'users.edit', True);
    oMatrix.SetGrant('admin', 'users.delete', True);
    oMatrix.SetGrant('editor', 'users.edit', True);

    WebModule.Response := oMatrix.HTML;   // matrix table + inline script
  finally
    oMatrix.Free;
  end;
end;

// Server-side handler for a checkbox toggle received over WebSockets.
// ALWAYS verify the acting user is authorized before applying the change:
oMatrix.ProcessGrantChanged('editor', 'users.delete', True);

UserManagement — 계정 테이블 그 자체

TsgcHTMLComponent_UserManagement는 그 역할들이 실제로 할당되는 테이블입니다. 아바타, 상태 배지, 역할 배지, 마지막 로그인, 검색창, 그리고 행별 작업 드롭다운(편집, 비활성화/활성화, 비밀번호 재설정, 그리고 선택적으로 사용자 대행과 삭제)을 제공합니다. AddUser는 행을 추가하고 채워 넣을 TsgcHTMLUser를 반환하며, ProcessUserAction은 행의 드롭다운에서 돌아오는 값을 처리하는데, 이 역시 자체 권한 확인을 거친 후에만 적용해야 합니다.

uses
  sgcHTML_Component_UserManagement;

var
  oUsers: TsgcHTMLComponent_UserManagement;
  oUser: TsgcHTMLUser;
begin
  oUsers := TsgcHTMLComponent_UserManagement.Create(nil);
  try
    oUsers.TableID := 'users';
    oUsers.AllowImpersonate := True;
    oUsers.AllowDelete := True;

    oUser := oUsers.AddUser('u1', 'ana.torres', 'ana@example.com');
    oUser.DisplayName := 'Ana Torres';
    oUser.Roles := 'admin,editor';
    oUser.Status := usActive;
    oUser.LastLogin := '2026-07-15 09:12';

    oUsers.AddUser('u2', 'marc.bell', 'marc@example.com').Status := usInvited;

    WebModule.Response := oUsers.HTML;   // toolbar + table + inline script
  finally
    oUsers.Free;
  end;
end;

// Server-side handler for an action received over WebSockets.
// ALWAYS verify the acting user is authorized before applying it:
oUsers.ProcessUserAction('userDisable', 'u2');

RolesPermissions와 UserManagement 모두에서 반복되는 패턴에 주목하세요. 컴포넌트는 오직 UI를 렌더링하고 이벤트를 발생시킬 뿐입니다. 여러분의 서버 측 코드가 해당 사용자에게 그 변경을 수행할 권한이 있다고 판단하여 ProcessGrantChanged 또는 ProcessUserAction을 명시적으로 호출하기 전까지는 아무 상태도 변경되지 않습니다. 이 컴포넌트는 설계상 그 무엇도 대신 승인하지 않습니다.

시리즈를 마치며

다섯 편의 글에 걸쳐 총 25개 컴포넌트를 소개했습니다: structured data (TreeGrid, PivotTable, ActivityFeed, Splitter), charts and codes (Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode, Barcode), form inputs (MultiSelect, ColorPicker, Slider, TimePicker, SignaturePad, Transfer), feedback and layout (Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress, LogViewer), 그리고 오늘 소개한 세 가지 관리 컴포넌트까지입니다. 전체 기능 매트릭스에는 이제 아홉 개 제품군에 걸쳐 83개 컴포넌트가 등재되어 있으며, 각 컴포넌트는 Delphi, C++Builder, .NET용 QuickStart와 함께 전용 페이지에 문서화되어 있습니다. Presence, RolesPermissions, UserManagement도 포함됩니다.

질문이나 피드백이 있으신가요? 마이그레이션 지원이 필요하신가요? 문의하기 — 실제로 코드를 작성한 사람들에게서 답변을 받으실 수 있습니다.