feat: 테이블 card 모드 옵션 + pivot 풍부한 필드 타입 추가 (T2 인프라)

5 viewMode 통합 (table/split/grouped/pivot/card) 의 첫 단계. types.ts 만.
다음 단계에서 본체 흡수 + ConfigPanel UI + dead code 정리.

card 모드 옵션 (TableConfig 신규)
- cardsPerRow, cardSpacing
- cardStyle: showTitle/Subtitle/Description/Image/imagePosition/Size/showActions
- cardColumnMapping: titleColumn/subtitleColumn/descriptionColumn/imageColumn/
  displayColumns/actionColumns

pivot 모드 풍부한 필드 (TableConfig 의 pivotFields, PivotFieldConfig 신규)
- area: row/column/data/filter
- summaryType (sum/count/avg/min/max/countDistinct)
- summaryDisplayMode 10종 (absoluteValue / percentOfColumnTotal / runningTotal 등)
- groupInterval (year/quarter/month/week/day)
- 기존 단순 pivotRows/pivotColumns/pivotValues 도 호환 유지

Codex 솔루션 정의 단계 GO + 단계별 commit 권고.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
DDD1542
2026-04-29 13:44:39 +09:00
parent 5f945363b2
commit 442f641305
@@ -47,6 +47,87 @@ export interface TablePagination {
pageSizeOptions?: number[];
}
// ─── card 모드 보조 타입 ─────────────────────────────────────────────
export interface TableCardStyleConfig {
showTitle?: boolean;
showSubtitle?: boolean;
showDescription?: boolean;
showImage?: boolean;
maxDescriptionLength?: number;
imagePosition?: "top" | "left" | "right";
imageSize?: "small" | "medium" | "large";
showActions?: boolean;
showViewButton?: boolean;
showEditButton?: boolean;
showDeleteButton?: boolean;
}
export interface TableCardColumnMapping {
titleColumn?: string;
subtitleColumn?: string;
descriptionColumn?: string;
imageColumn?: string;
/** 본문에 한 줄씩 더 노출할 컬럼들 */
displayColumns?: string[];
/** 액션 버튼 셀로 표시할 컬럼들 */
actionColumns?: string[];
}
// ─── pivot 모드 풍부한 필드 정의 ───────────────────────────────────
export type PivotAreaType = "row" | "column" | "data" | "filter";
export type PivotAggregationType =
| "sum"
| "count"
| "avg"
| "min"
| "max"
| "countDistinct";
export type PivotSummaryDisplayMode =
| "absoluteValue"
| "percentOfColumnTotal"
| "percentOfRowTotal"
| "percentOfGrandTotal"
| "percentOfColumnGrandTotal"
| "percentOfRowGrandTotal"
| "runningTotalByRow"
| "runningTotalByColumn"
| "differenceFromPrevious"
| "percentDifferenceFromPrevious";
export type PivotDateGroupInterval = "year" | "quarter" | "month" | "week" | "day";
export type PivotSortDirection = "asc" | "desc" | "none";
export type PivotFieldDataType = "string" | "number" | "date" | "boolean";
export interface PivotFieldFormat {
type: "number" | "currency" | "percent" | "date" | "text";
precision?: number;
thousandSeparator?: boolean;
prefix?: string;
suffix?: string;
dateFormat?: string;
}
export interface PivotFieldConfig {
field: string;
caption: string;
area: PivotAreaType;
areaIndex?: number;
dataType?: PivotFieldDataType;
summaryType?: PivotAggregationType;
summaryDisplayMode?: PivotSummaryDisplayMode;
showValuesAs?: PivotSummaryDisplayMode;
sortBy?: "value" | "caption";
sortOrder?: PivotSortDirection;
sortBySummary?: string;
groupInterval?: PivotDateGroupInterval;
groupName?: string;
visible?: boolean;
width?: number;
expanded?: boolean;
format?: PivotFieldFormat;
}
export interface TableConfig extends ComponentConfig {
/** 연결된 테이블명 (DB) */
selectedTable?: string;
@@ -90,6 +171,22 @@ export interface TableConfig extends ComponentConfig {
pivotColumns?: string[];
/** pivot 모드: 값 집계 */
pivotValues?: { column: string; aggregation: "sum" | "count" | "avg" | "min" | "max" }[];
/**
* pivot 모드: 풍부한 필드 정의 (PivotFieldConfig).
* row/column/data/filter 영역 + summaryDisplayMode (10종) + groupInterval 등.
* 단순 pivotRows/pivotColumns/pivotValues 보다 우선 사용 (있으면).
*/
pivotFields?: PivotFieldConfig[];
// ─── card 모드 전용 ───
/** card 모드: 한 줄에 표시할 카드 수 */
cardsPerRow?: number;
/** card 모드: 카드 간 간격 (px) */
cardSpacing?: number;
/** card 모드: 카드 시각 스타일 */
cardStyle?: TableCardStyleConfig;
/** card 모드: 데이터 컬럼 → 카드 영역 매핑 */
cardColumnMapping?: TableCardColumnMapping;
// ─── 빈 상태 / 로딩 ───
/** 빈 상태 메시지 */