메뉴
i-AUD BaseControl Add-in 컴포넌트 가이드. HTML과 CSS로 자유롭게 UI를 개발할 수 있는 사용자 정의 컨트롤입니다. "HTML 컨트롤", "BaseControl", "사용자 정의 UI", "커스텀 레이아웃", "HTML 패널", "UserComponent", "AddIn HTML" 등을 요청할 때 사용하세요.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/AUD-DEV-TEAM/i-AUD-Developer-Kit --skill iaud-base-control명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
i-AUD GridHtmlView Add-in 컴포넌트 가이드. DataGrid 데이터를 HTML/CSS 템플릿으로 렌더링하는 컴포넌트입니다. "카드 리스트", "HTML 뷰어", "입력 폼", "GridHtmlView 템플릿", "그리드 HTML", "카드형 레이아웃", "마스터 디테일" 등을 요청할 때 사용하세요.
i-AUD ScheduleGrid(Gantt Chart / 스케줄 그리드) 개발 가이드. AddIn 컴포넌트로 동작하는 간트 차트 컨트롤의 초기화, 데이터 바인딩, 시간축 설정(Major/Minor Unit), 행렬 방향(TransposeType), 셀 이벤트(OnDrawCell, OnEndDrag, OnContextMenuOpenning), 셀 조작(Split/Merge/Delete/Lock), DataGrid 양방향 동기화, 엑셀/PDF 내보내기 등을 안내합니다. "ScheduleGrid", "Gantt Chart", "간트 차트", "스케줄 그리드", "ScheduleCell", "TransposeType", "시간축", "Major Unit", "Minor Unit", "셀 분할", "셀 병합", "셀 잠금", "FocusCell", "OnDrawCell", "OnEndDrag", "ContextMenu", "SplitCell", "MergeCell" 등을 물어볼 때 사용하세요.
i-AUD DataGrid, GroupGrid, TreeGrid 개발 가이드. 그리드 컨트롤의 데이터 바인딩, CRUD, 이벤트, 필터/정렬, 멀티헤더, 셀 스타일, 행 추가/삭제, 서버 데이터 전송, 자동 쿼리 생성 등을 안내합니다. "DataGrid", "GroupGrid", "TreeGrid", "그리드", "행 추가", "셀 값", "CRUD", "필터", "정렬", "멀티헤더", "셀 서식", "행 삭제", "페이징", "트리", "그룹", "소계", "병합", "고정 컬럼", "그리드 이벤트", "OnCellClick", "OnEndEdit", "GetCRUDJSON" 등을 물어볼 때 사용하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | iaud-base-control |
| description | i-AUD BaseControl Add-in 컴포넌트 가이드. HTML과 CSS로 자유롭게 UI를 개발할 수 있는 사용자 정의 컨트롤입니다. "HTML 컨트롤", "BaseControl", "사용자 정의 UI", "커스텀 레이아웃", "HTML 패널", "UserComponent", "AddIn HTML" 등을 요청할 때 사용하세요. |
BaseControl은 i-AUD의 Add-in 컴포넌트로, 순수 HTML과 CSS를 사용하여 완전히 자유로운 UI를 구현할 수 있는 사용자 정의 컨트롤입니다.
addCSS(), addHTML(), clearHTML() 3개 핵심 메소드로 DOM을 관리합니다<head>에 <style> 태그로 삽입되며, 컴포넌트 Dispose 시 자동 제거됩니다| 구분 | BaseControl | GridHtmlView |
|---|---|---|
| 목적 | 범용 HTML/CSS UI 제작 | DataGrid 데이터 템플릿 렌더링 |
| 데이터 바인딩 | 없음 (수동 DOM 조작) | AUD 디렉티브 자동 바인딩 |
| CSS 격리 | 없음 (<head>에 삽입, 전역) | Shadow DOM (격리됨) |
| 자유도 | 최대 (모든 HTML/CSS/JS) | 템플릿 문법 범위 내 |
| 사용 사례 | 커스텀 레이아웃, 탭, 네비게이션 | 카드 리스트, 입력 폼, 마스터-디테일 |
선택 기준: DataGrid 데이터를 보여주는 UI →
GridHtmlView, 순수 HTML/CSS 커스텀 UI →BaseControl
BaseControl은 Add-in 타입 Element로 MTSD에 정의됩니다. ComponentElement는 빈 객체입니다.
{
"Type": "AddIn",
"Id": "AddInF562F24C24369E8F3A0F6A4CD728CDD2",
"Name": "MY_CONTROL",
"ComponentType": "BaseControl",
"ComponentElement": {},
"Position": { "Left": 0, "Top": 0, "Width": 800, "Height": 600 },
"Style": { "Type": 0, "BoxStyle": "" }
}
| 속성 | 설명 |
|---|---|
ComponentType | "BaseControl" (고정) |
ComponentElement | {} (빈 객체 — HTML/CSS는 스크립트에서 제어) |
const doc = new MtsdBuilder("커스텀 UI 보고서");
// BaseControl AddIn
doc.addAddIn("MY_CONTROL", {
dock: "fill",
componentType: "BaseControl",
componentElement: {}
});
return doc.build();
import { BaseControl } from "@AUD_CLIENT/ext/BaseControl";
let Matrix: Matrix;
// AddIn 컨트롤을 가져온 후 BaseControl 인스턴스 획득
let ctrl = Matrix.getObject("MY_CONTROL") as any;
let baseCtrl = ctrl.getScriptClass("BaseControl") as BaseControl;
getScriptClass("BaseControl"): AddIn 컨트롤에서 BaseControl 인스턴스를 가져오는 메소드입니다. 컴포넌트 클래스가 아직 로드되지 않았으면null을 반환할 수 있으므로,OnComponentClassLoaded이벤트를 사용하여 안전하게 접근합니다.
let ctrl = Matrix.getObject("MY_CONTROL") as any;
let baseCtrl = ctrl.getScriptClass("BaseControl") as BaseControl;
if (baseCtrl) {
// 이미 로드됨 — 바로 초기화
initUI(baseCtrl);
} else {
// 아직 로드 안됨 — 로드 완료 후 초기화
ctrl.OnComponentClassLoaded = function(sender, args) {
baseCtrl = ctrl.getScriptClass("BaseControl") as BaseControl;
initUI(baseCtrl);
};
}
function initUI(bc: BaseControl) {
bc.addCSS(CSS_TEXT);
bc.clearHTML();
bc.addHTML(HTML_TEXT);
// DOM 조작 시작...
}
<style> 태그를 생성하여 <head>에 삽입합니다. 컴포넌트 Dispose 시 자동 제거됩니다.
baseCtrl.addCSS(`
.my-panel { display: flex; gap: 10px; padding: 12px; }
.my-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; }
.my-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
`);
주의: CSS는 Shadow DOM이 아닌
<head>에 삽입되므로 전역 범위입니다. 클래스명 충돌을 방지하기 위해 고유한 접두사를 사용하세요. (예:myctrl-header,epa-tab등)
HTML 문자열을 DOMParser로 파싱하여 DOM에 삽입합니다.
// 루트 Element에 HTML 추가
baseCtrl.addHTML(`
<div class="my-panel">
<div class="my-card">카드 1</div>
<div class="my-card">카드 2</div>
</div>
`);
// 특정 노드에 HTML 추가
let container = baseCtrl.Element.querySelector(".my-panel") as HTMLElement;
baseCtrl.addHTML('<div class="my-card">카드 3</div>', container);
// 루트 Element의 모든 자식 제거
baseCtrl.clearHTML();
// 특정 노드의 자식만 제거
let list = baseCtrl.Element.querySelector(".list-container") as HTMLElement;
baseCtrl.clearHTML(list);
| 프로퍼티 | 타입 | 설명 |
|---|---|---|
Element | HTMLDivElement | 루트 HTML 엘리먼트. DOM 조작의 진입점 |
// Element를 통한 직접 DOM 접근
let btn = baseCtrl.Element.querySelector(".my-btn") as HTMLButtonElement;
btn.addEventListener("click", function() { /* ... */ });
// 크기 확인
let width = baseCtrl.Element.offsetWidth;
let height = baseCtrl.Element.offsetHeight;
| 이벤트 | 시그니처 | 설명 |
|---|---|---|
OnResize | (control, args: {Width, Height}) => void | 컨트롤 크기 변경 시 |
OnUpdate | (control, args: {Width, Height}) => void | 컨트롤 업데이트 시 |
OnBuildProperteis | (control, args: {Properties: any[]}) => void | 속성 목록 빌드 시 (디자이너용) |
OnContextMenuOpening | (control, args: {Id, Menu}) => void | 우클릭 컨텍스트 메뉴 열릴 때 |
// 리사이즈 이벤트
baseCtrl.OnResize = function(sender, args) {
console.log("새 크기:", args.Width, args.Height);
// 내부 레이아웃 재조정
};
// 컨텍스트 메뉴
baseCtrl.OnContextMenuOpening = function(sender, args) {
args.Menu.Clear();
args.Menu.AddMenu("새로고침", function() {
refreshContent();
});
args.Menu.AddMenu("초기화", function() {
resetLayout();
});
};
가장 기본적인 사용 패턴입니다. CSS를 먼저 추가하고, HTML을 주입한 뒤, DOM을 조작합니다.
// 1. CSS 추가
baseCtrl.addCSS(`
.greeting { font-size: 20px; font-weight: bold; color: #1e293b; padding: 20px; }
.greeting .highlight { color: #2563eb; }
`);
// 2. 기존 내용 제거 + HTML 추가
baseCtrl.clearHTML();
baseCtrl.addHTML(`
<div class="greeting">
안녕하세요, <span class="highlight">i-AUD</span>입니다.
</div>
`);
호출 순서:
addCSS()→clearHTML()→addHTML()순서를 권장합니다. CSS가 먼저 적용되어야 HTML 렌더링 시 깜빡임이 없습니다.
데이터에 따라 HTML을 동적으로 생성하고 갱신하는 패턴입니다.
function renderList(items: Array<{name: string, value: string}>) {
let listEl = baseCtrl.Element.querySelector(".item-list") as HTMLElement;
baseCtrl.clearHTML(listEl);
let html = "";
for (let i = 0; i < items.length; i++) {
html += '<div class="item">'
+ ' <span class="name">' + items[i].name + '</span>'
+ ' <span class="value">' + items[i].value + '</span>'
+ '</div>';
}
baseCtrl.addHTML(html, listEl);
}
HTML 삽입 후 DOM 요소에 이벤트를 연결합니다.
baseCtrl.clearHTML();
baseCtrl.addHTML(`
<div class="toolbar">
<button class="btn-refresh">새로고침</button>
<button class="btn-export">내보내기</button>
</div>
<div class="content"></div>
`);
// DOM 요소 참조 후 이벤트 바인딩
let btnRefresh = baseCtrl.Element.querySelector(".btn-refresh") as HTMLButtonElement;
let btnExport = baseCtrl.Element.querySelector(".btn-export") as HTMLButtonElement;
btnRefresh.addEventListener("click", function() {
Matrix.doRefresh("GRD_DATA");
});
btnExport.addEventListener("click", function() {
let grid = Matrix.getObject("GRD_DATA") as DataGrid;
grid.Export(0); // Excel 내보내기
});
복잡한 UI는 클래스로 캡슐화하는 것을 권장합니다.
class CustomTabBar {
private baseCtrl: BaseControl;
private tabContainer: HTMLElement;
private onTabChange: ((tabName: string) => void) | null = null;
constructor(ctrl: BaseControl) {
this.baseCtrl = ctrl;
this.init();
}
private init() {
this.baseCtrl.addCSS(`
.tab-bar { display:flex; border-bottom:2px solid #e2e8f0; }
.tab-item { padding:8px 16px; cursor:pointer; font-size:13px;
color:#64748b; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab-item:hover { color:#1e293b; }
.tab-item.active { color:#2563eb; border-bottom-color:#2563eb; font-weight:600; }
`);
this.baseCtrl.clearHTML();
this.baseCtrl.addHTML('<div class="tab-bar"></div>');
this.tabContainer = this.baseCtrl.Element.querySelector(".tab-bar") ;
}
() {
div = .();
div. = ;
div. = label;
div.(, name);
self = ;
div.(, () {
self.(name);
(self.) self.(name);
});
..(div);
}
() {
tabs = ..();
( i = ; i < tabs.; i++) {
tab = tabs[i] ;
(tab.() === name) {
tab..();
} {
tab..();
}
}
}
() {
. = fn;
}
}
baseCtrl = ctrl.() ;
tabBar = (baseCtrl);
tabBar.(, );
tabBar.(, );
tabBar.(, );
tabBar.();
tabBar.(() {
.(, tabName);
});
BaseControl과 DataGrid, MX-GRID 등 다른 i-AUD 컨트롤을 연동하는 패턴입니다.
// MX-GRID 시트 탭 연동 (EPA_SHEET_TAB 패턴)
let mxGrid = Matrix.getObject("MX_GRID") as any;
mxGrid.OnDataBindEnd = function(sender, args) {
drawSheetTabs(mxGrid.WorkBook);
};
function drawSheetTabs(wb: any) {
let tabRoot = baseCtrl.Element.querySelector(".tab-container") as HTMLElement;
baseCtrl.clearHTML(tabRoot);
for (let i = 0; i < wb.Tables.length; i++) {
let ws = wb.Tables[i];
if (ws.Visible) {
let div = document.createElement("div");
div.className = ws.Active ? "sheet-tab active" : "sheet-tab";
div.textContent = ws.Name;
div.addEventListener("click", function() {
mxGrid.Viewer().setActiveWorkSheet(ws.Name);
mxGrid.().();
mxGrid.().();
});
tabRoot.(div);
}
}
}
BaseControl의 addCSS()는 <head>에 <style> 태그를 삽입하므로 전역 범위입니다. CSS 클래스명이 다른 컨트롤이나 i-AUD 플랫폼의 스타일과 충돌하지 않도록 주의하세요.
권장 규칙:
/* 고유 접두사 사용 */
.myctrl-header { ... } /* O - 고유 접두사 */
.header { ... } /* X - 너무 일반적, 충돌 위험 */
/* 루트 컨테이너로 스코핑 */
.my-app .title { ... } /* O - .my-app 내부에서만 적용 */
.title { ... } /* X - 전역 적용, 충돌 위험 */
.split-h { display:flex; height:100%; }
.split-h .left { flex:0 0 300px; overflow-y:auto; border-right:1px solid #e2e8f0; }
.split-h .right { flex:1; overflow-y:auto; }
.split-v { display:flex; flex-direction:column; height:100%; }
.split-v .top { flex:0 0 auto; border-bottom:1px solid #e2e8f0; }
.split-v .bottom { flex:1; overflow-y:auto; }
.resizer {
flex:0 0 4px; background:#e2e8f0; cursor:col-resize;
transition:background .15s;
}
.resizer:hover, .resizer.active { background:#94a3b8; }
.tab-bar { display:flex; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.tab-item { padding:8px 16px; cursor:pointer; border-bottom:2px solid transparent;
font-size:13px; color:#64748b; user-select:none; }
.tab-item:hover { color:#1e293b; background:#f1f5f9; }
.tab-item.active { color:#2563eb; border-bottom-color:#2563eb; font-weight:600; }
.toolbar { display:flex; align-items:center; gap:8px;
padding:8px 12px; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.toolbar .btn { border:1px solid #e2e8f0; background:#fff; color:#334155;
padding:6px 12px; border-radius:4px; cursor:pointer; font-size:12px; }
.toolbar .btn:hover { background:#f1f5f9; }
.toolbar .btn.primary { background:#2563eb; color:#fff; border-color:#2563eb; }
.toolbar .btn.primary:hover { background:#1d4ed8; }
MX-GRID의 워크시트 탭을 BaseControl로 구현하는 실전 예시입니다.
let mxGrid = Matrix.getObject("MX_GRID") as any;
let ctrl = Matrix.getObject("SHEET_TAB") as any;
let bc = ctrl.getScriptClass("BaseControl") as BaseControl;
// CSS
bc.addCSS(`
.sheet-bar { display:flex; align-items:center;
border-top:1px solid #ccc; background:#f3f3f3; height:32px; }
.sheet-tabs { display:flex; flex:1; overflow-x:auto; scrollbar-width:none; }
.sheet-tabs::-webkit-scrollbar { display:none; }
.sheet-tab { padding:5px 14px; cursor:pointer; border-right:1px solid #fff;
background:#e6e6e6; font-size:13px; user-select:none; white-space:nowrap; }
.sheet-tab:hover { background:#efefef; }
.sheet-tab.active { background:#fff; border-top:2px solid #0078d4; font-weight:bold; }
.sheet-nav-btn { border:none; background:#ddd; padding:5px 10px;
cursor:pointer; user-select:none; width:40px; }
.sheet-nav-btn:hover { background:#bbb; }
`);
// HTML
bc.clearHTML();
bc.addHTML(`
<div class="sheet-bar">
<button class="sheet-nav-btn" data-dir="left">◀</button>
<div class="sheet-tabs"></div>
<button class="sheet-nav-btn" data-dir="right">▶</button>
<button class="sheet-nav-btn" data-action="add">＋</button>
</div>
`);
// DOM 참조
let tabRoot = bc.Element.querySelector(".sheet-tabs") as HTMLElement;
// 스크롤 버튼
bc.Element.querySelector('[data-dir="left"]').addEventListener(, () {
tabRoot.({ : -, : });
});
bc..().(, () {
tabRoot.({ : , : });
});
tabRoot.(, () {
tabRoot.({ : e. < ? - : , : });
});
() {
bc.(tabRoot);
wb = mxGrid.;
( i = ; i < wb..; i++) {
ws = wb.[i];
(ws.) {
div = .();
div. = ws. ? : ;
div. = ws.;
div.(, () {
mxGrid.().(ws.);
mxGrid.().();
mxGrid.().();
();
});
tabRoot.(div);
}
}
}
mxGrid. = () { (); };
let bc = ctrl.getScriptClass("BaseControl") as BaseControl;
bc.addCSS(`
.layout-root { display:flex; height:100%; }
.panel-left { flex:0 0 250px; overflow:auto; background:#fafafa; }
.resizer-v { flex:0 0 4px; background:#e2e8f0; cursor:col-resize; }
.resizer-v:hover, .resizer-v.dragging { background:#94a3b8; }
.panel-right { flex:1; overflow:auto; }
.panel-header { padding:12px 16px; font-weight:600; font-size:14px;
border-bottom:1px solid #e2e8f0; color:#1e293b; }
.panel-body { padding:12px 16px; }
`);
bc.clearHTML();
bc.addHTML(`
<div class="layout-root">
<div class="panel-left">
<div class="panel-header">메뉴</div>
<div class="panel-body" id="menu-area"></div>
</div>
<div class="resizer-v" id="resizer"></div>
<div class="panel-right">
<div class="panel-header">콘텐츠</div>
<div class="panel-body" id="content-area"></div>
</div>
</div>
`);
// 리사이저 드래그
let resizer = bc.Element.querySelector("#resizer") as HTMLElement;
let leftPanel = bc.Element.querySelector(".panel-left") as HTMLElement;
let isDragging = false;
resizer.addEventListener("mousedown", function(e) {
isDragging = true;
resizer.classList.add("dragging");
e.preventDefault();
});
document.addEventListener(, () {
(!isDragging) ;
rect = bc..();
newWidth = e. - rect.;
(newWidth >= && newWidth <= ) {
leftPanel.. = + newWidth + ;
}
});
.(, () {
isDragging = ;
resizer..();
});
let bc = ctrl.getScriptClass("BaseControl") as BaseControl;
bc.addCSS(`
.dash-root { padding:16px; }
.dash-cards { display:flex; gap:16px; margin-bottom:20px; }
.dash-stat { flex:1; padding:20px; border-radius:12px; background:#fff;
border:1px solid #e2e8f0; }
.dash-stat .label { font-size:12px; color:#64748b; margin-bottom:4px; }
.dash-stat .value { font-size:28px; font-weight:700; color:#1e293b; }
.dash-stat .change { font-size:12px; margin-top:4px; }
.dash-stat .change.up { color:#16a34a; }
.dash-stat .change.down { color:#dc2626; }
`);
function renderDashboard(stats: Array<{label: string, value: string, change: string, up: boolean}>) {
bc.clearHTML();
let html = '<div class="dash-root"><div class="dash-cards">';
for (let i = 0; i < stats.length; i++) {
let s = stats[i];
html += '<div class="dash-stat">'
+ ' <div class="label">' + s.label + '</div>'
+ ' <div class="value">' + s.value + '</div>'
+ ' <div class="change ' + (s.up ? 'up' : 'down') + '">' + s.change + '</div>'
+ '</div>';
}
html += '</div></div>';
bc.addHTML(html);
}
grid = .() ;
grid. = () {
row = grid.();
([
{ : , : row.(), : , : },
{ : , : row.(), : , : },
{ : , : row.(), : , : },
{ : , : row.(), : , : }
]);
};
addCSS()는 <head>에 삽입합니다. 클래스명 충돌 방지를 위해 고유 접두사를 사용하세요.addCSS()로 추가한 <style> 태그가 자동 제거됩니다 (createon 속성으로 식별).addHTML()은 DOMParser를 사용하므로 올바른 HTML이어야 합니다. <script> 태그는 실행되지 않습니다.OnComponentClassLoaded 이벤트를 사용하여 안전하게 접근하세요.document.addEventListener로 등록한 전역 이벤트는 별도로 제거해야 합니다. BaseControl은 자신의 Element에 등록한 이벤트만 자동 정리합니다.addHTML()에 직접 넣지 마세요. textContent를 사용하거나 이스케이프 처리하세요.GridHtmlView를 사용하세요. 순수 커스텀 UI가 목적이면 BaseControl을 사용하세요.addHTML()로 추가한 <input>, <textarea>에서 Backspace, Delete 등이 동작하지 않을 수 있습니다. i-AUD 프레임워크가 keydown을 전역으로 가로채기 때문입니다. 입력 요소에 e.stopPropagation()을 등록하세요: input.addEventListener('keydown', function(e) { e.stopPropagation(); });| 파일 | 설명 |
|---|---|
2.Sources/src/component/BaseControl/Model/BaseControl.ts | 컴포넌트 구현체 |
2.Sources/src/component/BaseControl/index.ts | 모듈 export |
2.Sources/src/component/Common/Interface/IComponentControl.ts | 컴포넌트 인터페이스 |
5.reportSources/types/aud/ext/BaseControl.ts | 클라이언트 스크립트 타입 정의 |
src/reports/ROOT/Projects/EPA_KERIS/EPA_SHEET_TAB/ | 시트 탭 바 예시 (MX-GRID 연동) |
src/reports/Work/aud_samples/UserComponent/Layout pannel #1/ | 리사이저블 레이아웃 예시 |
src/reports/Work/aud_samples/UserComponent/Layout pannel #2/ | 리사이저블 레이아웃 예시 |