gbpark
1aa48cc0bb
## 디자인 개편 - IDE 톤 CSS 오버라이드 (builder-ide.css) - 컴팩트화 (폰트/간격/패딩 축소) - INVYONE STUDIO 로고 추가 (SlimToolbar) - 좌측 수평 탭 → 수직 아코디언 (details/summary) - 우측 속성 패널 신설 (V2PropertiesPanel 완전 이주) - 다크모드 지원 (7개 통합 컴포넌트 inline hex → CSS 변수) ## 기반 시스템 - ScreenDefinition.fields/connections 타입 확장 - ComponentDefinition.dataPorts 타입 확장 - FieldConfig adapters (fieldsToColumns/Search/Form) - DataPortBus + setupConnections runtime - FieldsPanel (화면 수준 필드 관리 패널) ## 컴포넌트 통합 (Phase A~C) - divider (3→1): 가로/세로 + 텍스트 구분선 - title (2→1): h1~h6/body/caption variant - button (3→1): 6 variant × 13 actionType - search (3→1): inline/stacked 검색 필터 - input (20+→1): FieldConfig.type 10종 내부 분기 - stats (6→1): card/chip/bigNumber 3종 스타일 - table (9→1): table/split/grouped/pivot/card 5종 displayMode - container (11→1): tabs/section/accordion/repeater/conditional 5종 ## 버그 수정 (기존 VEX 코드) - 드래그 드롭 불가 (defaultSize camelCase 불일치) - 설정 변경 미반영 (componentConfig vs component_config) - ConfigPanel 미인식 (config_panel vs configPanel) - v2- 자동 매핑 함정 (INVYONE_UNIFIED_IDS 화이트리스트) - LayerManagerPanel 무한 API 호출 (useEffect deps) - Button size 이름 충돌 (visual size 객체 vs config string) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { createComponentDefinition } from "../../utils/createComponentDefinition";
|
|
import { ComponentCategory } from "@/types/component";
|
|
import { TableWrapper } from "./TableComponent";
|
|
import { TableConfigPanel } from "./TableConfigPanel";
|
|
import type { TableConfig } from "./types";
|
|
|
|
/**
|
|
* Table — 통합 데이터 테이블 컴포넌트 (2026-04-11, Phase C-1)
|
|
*
|
|
* 흡수 대상 (9):
|
|
* - v2-table-list (base)
|
|
* - v2-table-grouped (displayMode='grouped')
|
|
* - v2-pivot-grid (displayMode='pivot')
|
|
* - v2-split-panel-layout (displayMode='split')
|
|
* - table-list, split-panel-layout, split-panel-layout2 (legacy)
|
|
* - modal-repeater-table, simple-repeater-table (legacy)
|
|
* - pivot-grid, tax-invoice-list (legacy)
|
|
*
|
|
* 관련 문서:
|
|
* notes/gbpark/2026-04-11-component-unification-plan.md §3.1
|
|
*/
|
|
|
|
const DEFAULT_CONFIG: Partial<TableConfig> = {
|
|
displayMode: "table",
|
|
selectionMode: "single",
|
|
showCheckbox: false,
|
|
showHeader: true,
|
|
showFooter: true,
|
|
showToolbar: true,
|
|
striped: true,
|
|
hoverable: true,
|
|
rowHeight: "normal",
|
|
pagination: {
|
|
enabled: true,
|
|
pageSize: 20,
|
|
},
|
|
};
|
|
|
|
export const TableDefinition = createComponentDefinition({
|
|
id: "table",
|
|
name: "테이블",
|
|
name_eng: "Table",
|
|
description:
|
|
"통합 데이터 테이블. 기본/분할/그룹/피벗/카드 5가지 모드 지원",
|
|
category: ComponentCategory.DISPLAY,
|
|
web_type: "text",
|
|
component: TableWrapper,
|
|
default_config: DEFAULT_CONFIG as Record<string, any>,
|
|
default_size: { width: 800, height: 400 },
|
|
config_panel: TableConfigPanel,
|
|
icon: "Table",
|
|
tags: ["테이블", "table", "grid", "list", "data", "split", "pivot"],
|
|
version: "2.0.0",
|
|
author: "INVYONE",
|
|
documentation:
|
|
"notes/gbpark/2026-04-11-component-unification-plan.md#31-table",
|
|
// ─── INVYONE DataPort 선언 ───
|
|
dataPorts: {
|
|
inputs: [
|
|
{ name: "searchParams", type: "params" },
|
|
{ name: "refreshTrigger", type: "value" },
|
|
],
|
|
outputs: [
|
|
{ name: "selectedRow", type: "row" },
|
|
{ name: "selectedRows", type: "rows" },
|
|
],
|
|
},
|
|
});
|
|
|
|
export type { TableConfig, TableColumn } from "./types";
|
|
export { TableComponent, TableWrapper } from "./TableComponent";
|
|
export { TableConfigPanel } from "./TableConfigPanel";
|