Files
Aislo/ui_template/ui_template_elements_base.ts
T
eomsangdonandClaude Opus 5 41cfab22e9 refactor(ui_template): 공통 컴포넌트 700줄 초과 분리 — 차트·기본 스타일
917줄 한 파일을 넷으로 나눔 (동작 불변, 순수 이동).
- `ui_template_elements.ts` 363줄 — 버튼·입력·선택·카드·태그·토스트·확인창·셸
- `ui_template_elements_styles.ts` 369줄 — `injectBaseStyles()` 와 규칙 문자열
- `ui_template_elements_chart.ts` 185줄 — 공통 라인 차트
- `ui_template_elements_base.ts` 33줄 — 요소 생성 헬퍼 `el` (셋이 함께 써 순환 방지)

본체가 `export *` 로 다시 내보내 호출부의 import 경로는 불변.

검증: 분리 전 `export` 25개 전부 유지(+`el` 공개 1개 추가), `tsc --noEmit` 통과,
tmp/tests 378 passed

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-04 11:19:04 +09:00

34 lines
1.2 KiB
TypeScript

/* =============================================================================
* ui_template_elements_base.ts
* 공통 컴포넌트의 내부 유틸 — 요소 생성 헬퍼.
*
* `ui_template_elements.ts` 가 700줄을 넘어 떼어냈다(2026-09-04). 차트·스타일
* 조각과 본체가 함께 쓰므로 순환 임포트를 피하려고 맨 아래층에 둔다.
* ========================================================================== */
/** 요소 생성 + 속성/클래스/자식 일괄 설정 헬퍼 */
export function el<K extends keyof HTMLElementTagNameMap>(
tag: K,
options: {
className?: string;
text?: string;
attrs?: Record<string, string>;
children?: (HTMLElement | string)[];
} = {},
): HTMLElementTagNameMap[K] {
const node = document.createElement(tag);
if (options.className) node.className = options.className;
if (options.text !== undefined) node.textContent = options.text;
if (options.attrs) {
for (const [k, v] of Object.entries(options.attrs)) {
node.setAttribute(k, v);
}
}
if (options.children) {
for (const child of options.children) {
node.append(child);
}
}
return node;
}