sgcHTML 기능 매트릭스

컴포넌트	클래스	설명
NavBar	`TsgcHTMLComponent_NavBar`	브랜드와 접을 수 있는 메뉴 항목을 갖춘 반응형 상단 내비게이션 바.
Sidebar	`TsgcHTMLComponent_Sidebar`	아이콘, 헤더, 구분선 및 푸터를 갖춘 세로형 측면 내비게이션.
Breadcrumb	`TsgcHTMLComponent_Breadcrumb`	계층 구조에서 현재 위치를 보여주는 브레드크럼 경로.
Tabs	`TsgcHTMLComponent_Tabs`	전환 가능한 콘텐츠 창을 갖춘 탭, 알약형 또는 밑줄형 탭 세트.
Pagination	`TsgcHTMLComponent_Pagination`	항목 또는 페이지 수에서 파생된 페이지 내비게이션 컨트롤.
Toolbar	`TsgcHTMLComponent_Toolbar`	구분선과 툴팁으로 버튼을 그룹화하는 버튼 툴바.
TreeView	`TsgcHTMLComponent_TreeView`	데이터셋에서 로드할 수 있는 접이식 계층 트리.
Stepper	`TsgcHTMLComponent_Stepper`	가로 또는 세로형 마법사 / 단계 진행 표시기.
Dropdown	`TsgcHTMLComponent_Dropdown`	링크, 헤더 및 구분선 메뉴를 갖춘 드롭다운 버튼.
ButtonGroup	`TsgcHTMLComponent_ButtonGroup`	가로 또는 세로형으로 분할된 버튼 세트.
ListGroup	`TsgcHTMLComponent_ListGroup`	배지 및 추가 콘텐츠를 갖춘 링크 또는 항목의 리스트 그룹.
DashboardLayout	`TsgcHTMLDashboardLayout`	고정 사이드바와 콘텐츠 섹션을 갖춘 완전한 대시보드 셸.

데이터 및 표

데이터셋을 직접 렌더링하는 그리드, 캘린더 및 보드.

컴포넌트	클래스	설명
Grid	`TsgcHTMLComponent_Grid`	기능이 풍부한 표: 정렬, 필터, CSV/PDF 내보내기, 인라인 편집, 그룹화, 가상 스크롤 및 AI 쿼리.
DataTable	`TsgcHTMLComponent_DataTable`	툴바, 검색 및 행 수와 함께 Grid + Pagination을 감싸는 상위 수준 데이터 테이블.
Calendar	`TsgcHTMLComponent_Calendar`	이벤트 점과 이전/다음 내비게이션을 갖춘 월별 그리드 캘린더.
Scheduler	`TsgcHTMLComponent_Scheduler`	날짜별로 이벤트를 렌더링하는 캘린더 스케줄러(월 / 주 보기).
Timeline	`TsgcHTMLComponent_Timeline`	데이터셋에서 로드할 수 있는, 날짜가 지정된 이벤트의 세로형 타임라인.
KanbanBoard	`TsgcHTMLComponent_KanbanBoard`	열과 드래그 가능한 카드로 구성된 칸반 보드.
Gantt	`TsgcHTMLComponent_Gantt`	작업 진행률 막대를 갖춘 간트 프로젝트 타임라인 차트.

차트 및 시각화

사용자 자신의 수치로 만든 데이터 기반 시각 자료.

컴포넌트	클래스	설명
Chart	`TsgcHTMLComponent_Chart`	Chart.js 차트: 선형, 막대, 원형, 도넛, 레이더, 극좌표, 버블 및 산점도.
Gauge	`TsgcHTMLComponent_Gauge`	낮음 / 중간 / 높음 색상 임계값을 갖춘 반원형 SVG 게이지.
Diagram	`TsgcHTMLComponent_Diagram`	인라인 SVG로 렌더링되는 노드-화살표 흐름도.
Map	`TsgcHTMLComponent_Map`	마커가 있는 Leaflet.js 인터랙티브 지도(OpenStreetMap / CartoDB 타일).

폼 및 입력

유효성 검사와 데이터셋 바인딩을 갖춘, 데이터 수집에 필요한 모든 것.

컴포넌트	클래스	설명
Form	`TsgcHTMLComponent_Form`	유효성 검사, 레이아웃 및 AI 폼 생성을 갖춘 데이터 기반 폼 빌더.
Edit	`TsgcHTMLComponent_Edit`	레이블, 도움말 텍스트 및 데이터셋 바인딩을 갖춘 한 줄 텍스트 입력.
Memo	`TsgcHTMLComponent_Memo`	레이블과 도움말 텍스트를 갖춘 여러 줄 텍스트 영역 입력.
CheckBox	`TsgcHTMLComponent_CheckBox`	레이블과 체크 상태를 갖춘 체크박스 입력.
RadioGroup	`TsgcHTMLComponent_RadioGroup`	상호 배타적인 라디오 옵션 그룹.
Select	`TsgcHTMLComponent_Select`	옵션 그룹, 다중 선택 및 데이터셋 바인딩을 갖춘 선택 드롭다운.
InputGroup	`TsgcHTMLComponent_InputGroup`	앞/뒤 추가 텍스트 애드온을 갖춘 입력.
AutoComplete	`TsgcHTMLComponent_AutoComplete`	제안 목록의 HTML5 datalist로 뒷받침되는 텍스트 입력.
DatePicker	`TsgcHTMLComponent_DatePicker`	네이티브 날짜 / 시간 / 날짜시간 입력 필드.
FileUpload	`TsgcHTMLComponent_FileUpload`	멀티파트 폼 전송을 갖춘 드래그 앤 드롭 파일 업로드 영역.
RichEditor	`TsgcHTMLComponent_RichEditor`	숨김 폼 필드를 갖춘 Quill 기반 WYSIWYG 리치 텍스트 편집기.
Rating	`TsgcHTMLComponent_Rating`	별점(기호) 평가 표시 또는 입력.

콘텐츠 및 레이아웃

페이지를 구성하기 위한 카드, 미디어 및 KPI 타일.

컴포넌트	클래스	설명
Panel	`TsgcHTMLComponent_Panel`	헤더 / 본문 / 푸터를 갖춘, 접을 수 있고 스크롤 가능한 Bootstrap 카드 패널.
StatCard	`TsgcHTMLComponent_StatCard`	아이콘, 추세 화살표 및 선택적 그라데이션을 갖춘 대시보드 KPI / 통계 카드.
Accordion	`TsgcHTMLComponent_Accordion`	쌓인 확장형 패널로 구성된 세로로 접히는 아코디언.
Carousel	`TsgcHTMLComponent_Carousel`	표시기, 컨트롤 및 자동 재생을 갖춘 이미지 슬라이드쇼 / 캐러셀.
Image	`TsgcHTMLComponent_Image`	모양, 반응형 / 지연 로드, 라이트박스 링크 및 캡션을 갖춘 이미지.
Avatar	`TsgcHTMLComponent_Avatar`	크기, 모양 및 접속 상태 점을 갖춘 사용자 아바타(이미지 또는 이니셜).
Video	`TsgcHTMLComponent_Video`	HTML5 비디오 / 오디오 플레이어와 YouTube 임베드 헬퍼.

오버레이 및 피드백

대화 상자, 상태 표시 영역 및 로딩 상태.

컴포넌트	클래스	설명
Modal	`TsgcHTMLComponent_Modal`	제목 / 본문 / 푸터, 크기, 가운데 정렬 및 정적 배경을 갖춘 모달 대화 상자.
Offcanvas	`TsgcHTMLComponent_Offcanvas`	왼쪽, 오른쪽, 위 또는 아래에서 슬라이드되는 오프캔버스 패널.
Popover	`TsgcHTMLComponent_Popover`	트리거 요소에 표시되는 팝오버 말풍선(클릭 / 호버 / 포커스).
Toast	`TsgcHTMLComponent_Toast`	헤더, 본문, 타임스탬프 및 자동 숨김을 갖춘 토스트 알림.
Snackbar	`TsgcHTMLComponent_Snackbar`	선택적 작업을 갖춘 머티리얼 스타일의 일시적 스낵바.
Notification	`TsgcHTMLComponent_Notification`	읽지 않음 배지를 갖춘 종 아이콘 드롭다운 알림 센터.
Spinner	`TsgcHTMLComponent_Spinner`	크기와 색상이 지정된 로딩 스피너(테두리 / 확대).
Placeholder	`TsgcHTMLComponent_Placeholder`	애니메이션 반짝임을 갖춘 스켈레톤 / 플레이스홀더 로딩 카드.

채팅 및 AI

단순한 말풍선부터 스트리밍 AI 어시스턴트까지, 대화형 UI.

컴포넌트	클래스	설명
ChatBox	`TsgcHTMLComponent_ChatBox`	입력 바와 입력 중 표시기를 갖춘 카드 스타일의 채팅 말풍선 박스.
Chat	`TsgcHTMLComponent_Chat`	텍스트 / 이미지 / 파일 / 오디오 / 비디오 메시지, 읽음 확인 및 답장을 갖춘 WhatsApp 스타일 채팅.
AIChat	`TsgcHTMLComponent_AIChat`	제공자 / 모델 선택기, 토큰 스트리밍 및 RAG 출처 인용을 갖춘 AI 어시스턴트 채팅.

인증

비밀번호부터 패스키까지, 즉시 사용 가능한 로그인 흐름.

컴포넌트	클래스	설명
Login	`TsgcHTMLComponent_Login`	로그인 유지와 알림을 갖춘 즉시 사용 가능한 로그인 폼 / 페이지(카드, 가운데 정렬 또는 전체 페이지).
SocialLogin	`TsgcHTMLComponent_SocialLogin`	OAuth 소셜 로그인 버튼 패널(Google, Facebook, Apple, GitHub, Microsoft 등).
OAuthCallback	`TsgcHTMLComponent_OAuthCallback`	자동 리디렉션과 함께 성공, 오류 또는 로딩 상태의 OAuth 콜백 / 랜딩 페이지.
WebAuthnLogin	`TsgcHTMLComponent_WebAuthnLogin`	비밀번호 없는 패스키 / WebAuthn 로그인 및 등록 위젯.

인프라

엔진, 서버 및 테마

페이지를 제공하고 실시간으로 유지하는 비주얼이 아닌 구성 요소.

클래스	역할
`TsgcHTMLEngine_Server`	렌더링된 페이지와 내장 자산을 제공하는, `TsgcWebSocketHTTPServer`에 바인딩된 HTML 엔진.
`TsgcHTMX_Engine_Server`	동일한 서버에 연결된 htmx 엔진: HTTP를 통한 부분 페이지 교체 및 WebSocket을 통한 실시간 서버 푸시.
`TsgcHTMLPageBuilder`	등록된 컴포넌트를 완전한 반응형 페이지로 조립합니다(디자인 타임 비주얼 편집기 포함).
`TsgcHTMLTemplate_Bootstrap`	본문 콘텐츠를 테마, 언어 및 방향이 있는 완전한 Bootstrap 5 HTML 문서로 감쌉니다.
`TsgcHTMLThemeController` / `TsgcHTMLThemeBuilder`	라이트 / 다크 테마와 Bootstrap CSS 변수를 작성하는 런타임 CSS 생성기.
`TsgcHTMX_Fragment` / `TsgcHTMX_Router`	실시간 업데이트를 위한 대역 외(out-of-band) htmx 조각 및 요청 라우팅 헬퍼.

내비게이션 및 구조