= {};
+ if (item.statConfig?.categories) {
+ for (const cat of item.statConfig.categories) {
+ categoryData[cat.label] = itemData.rows.length; // BUG: 모든 카테고리에 동일 값
+ }
+ }
+ return (
+
+```tsx
+case "stat-card": {
+ const categoryData: Record = {};
+ if (item.statConfig?.categories) {
+ for (const cat of item.statConfig.categories) {
+ if (cat.filter.column && cat.filter.value) {
+ // 카테고리 필터로 rows 필터링
+ const filtered = itemData.rows.filter((row) => {
+ const cellValue = String(row[cat.filter.column] ?? "");
+ const filterValue = String(cat.filter.value ?? "");
+ switch (cat.filter.operator) {
+ case "=":
+ return cellValue === filterValue;
+ case "!=":
+ return cellValue !== filterValue;
+ case "like":
+ return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+ default:
+ return cellValue === filterValue;
+ }
+ });
+ categoryData[cat.label] = filtered.length;
+ } else {
+ categoryData[cat.label] = itemData.rows.length;
+ }
+ }
+ }
+ return (
+
+POP 뷰어 스크롤 수정 (완료)
+
+- [x] 라인 185: overflow-hidden 제거
+- [x] 라인 266: overflow-auto 공통 적용
+- [x] 라인 275: 일반 모드 min-h-full 추가
+- [x] 린트 검사 통과
+
+
+
POP 뷰어 실제 컴포넌트 렌더링 (완료)
- [x] 뷰어 페이지에 레지스트리 초기화 import 추가
-- [x] `renderActualComponent()` 실제 컴포넌트 렌더링으로 교체
+- [x] renderActualComponent() 실제 컴포넌트 렌더링으로 교체
- [x] 린트 검사 통과
-- 브라우저 검증: 컴포넌트 표시 정상, 스크롤 문제 발견 -> 별도 수정
diff --git a/STATUS.md b/STATUS.md
new file mode 100644
index 00000000..3aa75278
--- /dev/null
+++ b/STATUS.md
@@ -0,0 +1,46 @@
+# 프로젝트 상태 추적
+
+> **최종 업데이트**: 2026-02-11
+
+---
+
+## 현재 진행 중
+
+### pop-dashboard 스타일 정리
+**상태**: 코딩 완료, 브라우저 확인 대기
+**계획서**: [popdocs/PLAN.md](./popdocs/PLAN.md)
+**내용**: 글자 크기 커스텀 제거 + 라벨 정렬만 유지 + stale closure 수정
+
+---
+
+## 다음 작업
+
+| 순서 | 작업 | 상태 |
+|------|------|------|
+| 1 | 브라우저 확인 (라벨 정렬 동작, 반응형 자동 크기, 미리보기 반영) | [ ] 대기 |
+| 2 | 게이지/통계카드 테스트 시나리오 동작 확인 | [ ] 대기 |
+| 3 | Phase 2 계획 수립 (pop-button, pop-icon) | [ ] 대기 |
+
+---
+
+## 완료된 작업 (최근)
+
+| 날짜 | 작업 | 비고 |
+|------|------|------|
+| 2026-02-11 | 대시보드 스타일 정리 | FONT_SIZE_PX/글자 크기 Select 삭제, ItemStyleConfig -> labelAlign만, stale closure 수정 |
+| 2026-02-10 | 디자이너 캔버스 UX 개선 | 헤더 제거, 실제 데이터 렌더링, 컴포넌트 목록 |
+| 2026-02-10 | 차트/게이지/네비게이션/정렬 디자인 개선 | CartesianGrid, abbreviateNumber, 오버레이 화살표/인디케이터 |
+| 2026-02-10 | 대시보드 4가지 아이템 모드 완성 | groupBy UI, xAxisColumn, 통계카드 카테고리, 필터 버그 수정 |
+| 2026-02-09 | POP 뷰어 스크롤 수정 | overflow-hidden 제거, overflow-auto 공통 적용 |
+| 2026-02-09 | POP 뷰어 실제 컴포넌트 렌더링 | 레지스트리 초기화 + renderActualComponent |
+| 2026-02-08 | V2/V2 컴포넌트 스키마 정비 | componentConfig.ts 통합 관리 |
+
+---
+
+## 알려진 이슈
+
+| # | 이슈 | 심각도 | 상태 |
+|---|------|--------|------|
+| 1 | KPI 증감율(trendValue) 미구현 | 낮음 | 향후 구현 |
+| 2 | 게이지 동적 목표값(targetDataSource) 미구현 | 낮음 | 향후 구현 |
+| 3 | 기존 저장 데이터의 `itemStyle.align`이 `labelAlign`으로 마이그레이션 안 됨 | 낮음 | 이전에 작동 안 했으므로 실질 영향 없음 |
diff --git a/backend-node/src/controllers/screenGroupController.ts b/backend-node/src/controllers/screenGroupController.ts
index 88230f48..b53454b9 100644
--- a/backend-node/src/controllers/screenGroupController.ts
+++ b/backend-node/src/controllers/screenGroupController.ts
@@ -2839,4 +2839,4 @@ export const ensurePopRootGroup = async (req: AuthenticatedRequest, res: Respons
logger.error("POP 루트 그룹 확보 실패:", error);
res.status(500).json({ success: false, message: "POP 루트 그룹 확보에 실패했습니다.", error: error.message });
}
-};
+};
\ No newline at end of file
diff --git a/frontend/components/pop/designer/PopCanvas.tsx b/frontend/components/pop/designer/PopCanvas.tsx
index 7753a992..6ac2cea9 100644
--- a/frontend/components/pop/designer/PopCanvas.tsx
+++ b/frontend/components/pop/designer/PopCanvas.tsx
@@ -112,6 +112,8 @@ interface PopCanvasProps {
onLockLayout?: () => void;
onResetOverride?: (mode: GridMode) => void;
onChangeGapPreset?: (preset: GapPreset) => void;
+ /** 대시보드 페이지 미리보기 인덱스 (-1이면 기본 모드) */
+ previewPageIndex?: number;
}
// ========================================
@@ -135,6 +137,7 @@ export default function PopCanvas({
onLockLayout,
onResetOverride,
onChangeGapPreset,
+ previewPageIndex,
}: PopCanvasProps) {
// 줌 상태
const [canvasScale, setCanvasScale] = useState(0.8);
@@ -690,6 +693,7 @@ export default function PopCanvas({
onComponentResizeEnd={onResizeEnd}
overrideGap={adjustedGap}
overridePadding={adjustedPadding}
+ previewPageIndex={previewPageIndex}
/>
)}
diff --git a/frontend/components/pop/designer/PopDesigner.tsx b/frontend/components/pop/designer/PopDesigner.tsx
index f4dfd3fa..16fa0da8 100644
--- a/frontend/components/pop/designer/PopDesigner.tsx
+++ b/frontend/components/pop/designer/PopDesigner.tsx
@@ -69,6 +69,9 @@ export default function PopDesigner({
// 선택 상태
const [selectedComponentId, setSelectedComponentId] = useState(null);
+ // 대시보드 페이지 미리보기 인덱스 (-1 = 기본 모드)
+ const [previewPageIndex, setPreviewPageIndex] = useState(-1);
+
// 그리드 모드 (4개 프리셋)
const [currentMode, setCurrentMode] = useState("tablet_landscape");
@@ -217,24 +220,28 @@ export default function PopDesigner({
const handleUpdateComponent = useCallback(
(componentId: string, updates: Partial) => {
- const existingComponent = layout.components[componentId];
- if (!existingComponent) return;
+ // 함수적 업데이트로 stale closure 방지
+ setLayout((prev) => {
+ const existingComponent = prev.components[componentId];
+ if (!existingComponent) return prev;
- const newLayout = {
- ...layout,
- components: {
- ...layout.components,
- [componentId]: {
- ...existingComponent,
- ...updates,
+ const newComponent = {
+ ...existingComponent,
+ ...updates,
+ };
+ const newLayout = {
+ ...prev,
+ components: {
+ ...prev.components,
+ [componentId]: newComponent,
},
- },
- };
- setLayout(newLayout);
- saveToHistory(newLayout);
+ };
+ saveToHistory(newLayout);
+ return newLayout;
+ });
setHasChanges(true);
},
- [layout, saveToHistory]
+ [saveToHistory]
);
const handleDeleteComponent = useCallback(
@@ -637,6 +644,7 @@ export default function PopDesigner({
onLockLayout={handleLockLayout}
onResetOverride={handleResetOverride}
onChangeGapPreset={handleChangeGapPreset}
+ previewPageIndex={previewPageIndex}
/>
@@ -655,6 +663,8 @@ export default function PopDesigner({
allComponents={Object.values(layout.components)}
onSelectComponent={setSelectedComponentId}
selectedComponentId={selectedComponentId}
+ previewPageIndex={previewPageIndex}
+ onPreviewPage={setPreviewPageIndex}
/>
diff --git a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
index 847d8aed..bc779848 100644
--- a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
+++ b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
@@ -42,6 +42,10 @@ interface ComponentEditorPanelProps {
onSelectComponent?: (componentId: string) => void;
/** 현재 선택된 컴포넌트 ID */
selectedComponentId?: string | null;
+ /** 대시보드 페이지 미리보기 인덱스 */
+ previewPageIndex?: number;
+ /** 페이지 미리보기 요청 콜백 */
+ onPreviewPage?: (pageIndex: number) => void;
}
// ========================================
@@ -50,6 +54,7 @@ interface ComponentEditorPanelProps {
const COMPONENT_TYPE_LABELS: Record = {
"pop-sample": "샘플",
"pop-text": "텍스트",
+ "pop-icon": "아이콘",
"pop-dashboard": "대시보드",
"pop-field": "필드",
"pop-button": "버튼",
@@ -73,6 +78,8 @@ export default function ComponentEditorPanel({
allComponents,
onSelectComponent,
selectedComponentId,
+ previewPageIndex,
+ onPreviewPage,
}: ComponentEditorPanelProps) {
const breakpoint = GRID_BREAKPOINTS[currentMode];
@@ -182,6 +189,8 @@ export default function ComponentEditorPanel({
) => void;
+ previewPageIndex?: number;
+ onPreviewPage?: (pageIndex: number) => void;
}
-function ComponentSettingsForm({ component, onUpdate }: ComponentSettingsFormProps) {
+function ComponentSettingsForm({ component, onUpdate, previewPageIndex, onPreviewPage }: ComponentSettingsFormProps) {
// PopComponentRegistry에서 configPanel 가져오기
const registeredComp = PopComponentRegistry.getComponent(component.type);
const ConfigPanel = registeredComp?.configPanel;
@@ -393,6 +404,8 @@ function ComponentSettingsForm({ component, onUpdate }: ComponentSettingsFormPro
diff --git a/frontend/components/pop/designer/panels/ComponentPalette.tsx b/frontend/components/pop/designer/panels/ComponentPalette.tsx
index a0d628aa..9c7af27a 100644
--- a/frontend/components/pop/designer/panels/ComponentPalette.tsx
+++ b/frontend/components/pop/designer/panels/ComponentPalette.tsx
@@ -3,7 +3,7 @@
import { useDrag } from "react-dnd";
import { cn } from "@/lib/utils";
import { PopComponentType } from "../types/pop-layout";
-import { Square, FileText, MousePointer } from "lucide-react";
+import { Square, FileText, MousePointer, BarChart3 } from "lucide-react";
import { DND_ITEM_TYPES } from "../constants";
// 컴포넌트 정의
@@ -33,6 +33,12 @@ const PALETTE_ITEMS: PaletteItem[] = [
icon: MousePointer,
description: "네비게이션 아이콘 (화면 이동, URL, 뒤로가기)",
},
+ {
+ type: "pop-dashboard",
+ label: "대시보드",
+ icon: BarChart3,
+ description: "KPI, 차트, 게이지, 통계 집계",
+ },
];
// 드래그 가능한 컴포넌트 아이템
diff --git a/frontend/components/pop/designer/renderers/PopRenderer.tsx b/frontend/components/pop/designer/renderers/PopRenderer.tsx
index 7f5a570b..f67a7d7c 100644
--- a/frontend/components/pop/designer/renderers/PopRenderer.tsx
+++ b/frontend/components/pop/designer/renderers/PopRenderer.tsx
@@ -56,6 +56,8 @@ interface PopRendererProps {
className?: string;
/** 현재 편집 중인 화면 ID (아이콘 네비게이션용) */
currentScreenId?: number;
+ /** 대시보드 페이지 미리보기 인덱스 */
+ previewPageIndex?: number;
}
// ========================================
@@ -64,6 +66,9 @@ interface PopRendererProps {
const COMPONENT_TYPE_LABELS: Record
= {
"pop-sample": "샘플",
+ "pop-text": "텍스트",
+ "pop-icon": "아이콘",
+ "pop-dashboard": "대시보드",
};
// ========================================
@@ -86,6 +91,7 @@ export default function PopRenderer({
overridePadding,
className,
currentScreenId,
+ previewPageIndex,
}: PopRendererProps) {
const { gridConfig, components, overrides } = layout;
@@ -251,6 +257,7 @@ export default function PopRenderer({
onComponentMove={onComponentMove}
onComponentResize={onComponentResize}
onComponentResizeEnd={onComponentResizeEnd}
+ previewPageIndex={previewPageIndex}
/>
);
}
@@ -294,6 +301,7 @@ interface DraggableComponentProps {
onComponentMove?: (componentId: string, newPosition: PopGridPosition) => void;
onComponentResize?: (componentId: string, newPosition: PopGridPosition) => void;
onComponentResizeEnd?: (componentId: string) => void;
+ previewPageIndex?: number;
}
function DraggableComponent({
@@ -311,6 +319,7 @@ function DraggableComponent({
onComponentMove,
onComponentResize,
onComponentResizeEnd,
+ previewPageIndex,
}: DraggableComponentProps) {
const [{ isDragging }, drag] = useDrag(
() => ({
@@ -349,6 +358,7 @@ function DraggableComponent({
effectivePosition={position}
isDesignMode={isDesignMode}
isSelected={isSelected}
+ previewPageIndex={previewPageIndex}
/>
{/* 리사이즈 핸들 (선택된 컴포넌트만) */}
@@ -499,9 +509,10 @@ interface ComponentContentProps {
effectivePosition: PopGridPosition;
isDesignMode: boolean;
isSelected: boolean;
+ previewPageIndex?: number;
}
-function ComponentContent({ component, effectivePosition, isDesignMode, isSelected }: ComponentContentProps) {
+function ComponentContent({ component, effectivePosition, isDesignMode, isSelected, previewPageIndex }: ComponentContentProps) {
const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
// PopComponentRegistry에서 등록된 컴포넌트 가져오기
@@ -526,6 +537,7 @@ function ComponentContent({ component, effectivePosition, isDesignMode, isSelect
config={component.config}
label={component.label}
isDesignMode={isDesignMode}
+ previewPageIndex={previewPageIndex}
/>
useDataSource로 교체 예정
+ * - filter_changed 이벤트 수신 -> usePopEvent로 교체 예정
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import type {
+ PopDashboardConfig,
+ DashboardItem,
+ DashboardPage,
+} from "../types";
+import { fetchAggregatedData } from "./utils/dataFetcher";
+import {
+ evaluateFormula,
+ formatFormulaResult,
+} from "./utils/formula";
+
+// 서브타입 아이템 컴포넌트
+import { KpiCardComponent } from "./items/KpiCard";
+import { ChartItemComponent } from "./items/ChartItem";
+import { GaugeItemComponent } from "./items/GaugeItem";
+import { StatCardComponent } from "./items/StatCard";
+
+// 표시 모드 컴포넌트
+import { ArrowsModeComponent } from "./modes/ArrowsMode";
+import { AutoSlideModeComponent } from "./modes/AutoSlideMode";
+import { GridModeComponent } from "./modes/GridMode";
+import { ScrollModeComponent } from "./modes/ScrollMode";
+
+// ===== 마이그레이션: 기존 config -> 페이지 기반 구조 변환 =====
+
+/**
+ * 기존 config를 페이지 기반 구조로 마이그레이션.
+ * 런타임에서만 사용 (저장된 config 원본은 변경하지 않음).
+ *
+ * 시나리오1: displayMode="grid" (가장 오래된 형태)
+ * 시나리오2: useGridLayout=true (직전 마이그레이션 결과)
+ * 시나리오3: pages 이미 있음 (새 형태) -> 변환 불필요
+ * 시나리오4: pages 없음 + grid 아님 -> 빈 pages (아이템 하나씩 슬라이드)
+ */
+export function migrateConfig(
+ raw: Record
+): PopDashboardConfig {
+ const config = { ...raw } as PopDashboardConfig & Record;
+
+ // pages가 이미 있으면 마이그레이션 불필요
+ if (
+ Array.isArray(config.pages) &&
+ config.pages.length > 0
+ ) {
+ return config;
+ }
+
+ // 시나리오1: displayMode="grid" / 시나리오2: useGridLayout=true
+ const wasGrid =
+ config.displayMode === ("grid" as string) ||
+ (config as Record).useGridLayout === true;
+
+ if (wasGrid) {
+ const cols =
+ ((config as Record).gridColumns as number) ?? 2;
+ const rows =
+ ((config as Record).gridRows as number) ?? 2;
+ const cells =
+ ((config as Record).gridCells as DashboardPage["gridCells"]) ?? [];
+
+ const page: DashboardPage = {
+ id: "migrated-page-1",
+ label: "페이지 1",
+ gridColumns: cols,
+ gridRows: rows,
+ gridCells: cells,
+ };
+
+ config.pages = [page];
+
+ // displayMode="grid" 보정
+ if (config.displayMode === ("grid" as string)) {
+ (config as Record).displayMode = "arrows";
+ }
+ }
+
+ return config as PopDashboardConfig;
+}
+
+// ===== 내부 타입 =====
+
+interface ItemData {
+ /** 단일 집계 값 */
+ value: number;
+ /** 데이터 행 (차트용) */
+ rows: Record[];
+ /** 수식 결과 표시 문자열 */
+ formulaDisplay: string | null;
+ /** 에러 메시지 */
+ error: string | null;
+}
+
+// ===== 데이터 로딩 함수 =====
+
+/** 단일 아이템의 데이터를 조회 */
+async function loadItemData(item: DashboardItem): Promise {
+ try {
+ // 수식 모드
+ if (item.formula?.enabled && item.formula.values.length > 0) {
+ // 각 값(A, B, ...)을 병렬 조회
+ const results = await Promise.allSettled(
+ item.formula.values.map((fv) => fetchAggregatedData(fv.dataSource))
+ );
+
+ const valueMap: Record = {};
+ for (let i = 0; i < item.formula.values.length; i++) {
+ const result = results[i];
+ const fv = item.formula.values[i];
+ valueMap[fv.id] =
+ result.status === "fulfilled" ? result.value.value : 0;
+ }
+
+ const calculatedValue = evaluateFormula(
+ item.formula.expression,
+ valueMap
+ );
+ const formulaDisplay = formatFormulaResult(item.formula, valueMap);
+
+ return {
+ value: calculatedValue,
+ rows: [],
+ formulaDisplay,
+ error: null,
+ };
+ }
+
+ // 단일 집계 모드
+ const result = await fetchAggregatedData(item.dataSource);
+ if (result.error) {
+ return { value: 0, rows: [], formulaDisplay: null, error: result.error };
+ }
+
+ return {
+ value: result.value,
+ rows: result.rows ?? [],
+ formulaDisplay: null,
+ error: null,
+ };
+ } catch (err: unknown) {
+ const message = err instanceof Error ? err.message : "데이터 로딩 실패";
+ return { value: 0, rows: [], formulaDisplay: null, error: message };
+ }
+}
+
+// ===== 메인 컴포넌트 =====
+
+export function PopDashboardComponent({
+ config,
+ previewPageIndex,
+}: {
+ config?: PopDashboardConfig;
+ /** 디자이너 페이지 미리보기: 이 인덱스의 페이지만 단독 렌더링 (-1이면 기본 모드) */
+ previewPageIndex?: number;
+}) {
+ const [dataMap, setDataMap] = useState>({});
+ const [loading, setLoading] = useState(true);
+ const refreshTimerRef = useRef | null>(null);
+ const containerRef = useRef(null);
+ const [containerWidth, setContainerWidth] = useState(300);
+
+ // 보이는 아이템만 필터링 (hooks 이전에 early return 불가하므로 빈 배열 허용)
+ const visibleItems = Array.isArray(config?.items)
+ ? config.items.filter((item) => item.visible)
+ : [];
+
+ // 컨테이너 크기 감지
+ useEffect(() => {
+ const el = containerRef.current;
+ if (!el) return;
+
+ const observer = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ setContainerWidth(entry.contentRect.width);
+ }
+ });
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, []);
+
+ // 아이템 ID 목록 문자열 키 (참조 안정성 보장 - 매 렌더마다 새 배열 참조 방지)
+ const visibleItemIds = JSON.stringify(visibleItems.map((i) => i.id));
+
+ // 데이터 로딩 함수
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const fetchAllData = useCallback(async () => {
+ if (!visibleItems.length) {
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+
+ // 모든 아이템 병렬 로딩 (하나 실패해도 나머지 표시)
+ // @INFRA-EXTRACT: useDataSource로 교체 예정
+ const results = await Promise.allSettled(
+ visibleItems.map((item) => loadItemData(item))
+ );
+
+ const newDataMap: Record = {};
+ for (let i = 0; i < visibleItems.length; i++) {
+ const result = results[i];
+ newDataMap[visibleItems[i].id] =
+ result.status === "fulfilled"
+ ? result.value
+ : { value: 0, rows: [], formulaDisplay: null, error: "로딩 실패" };
+ }
+
+ setDataMap(newDataMap);
+ setLoading(false);
+ }, [visibleItemIds]);
+
+ // 초기 로딩 + 주기적 새로고침
+ useEffect(() => {
+ fetchAllData();
+
+ // refreshInterval 적용 (첫 번째 아이템 기준, 최소 5초 강제)
+ const rawRefreshSec = visibleItems[0]?.dataSource.refreshInterval;
+ const refreshSec = rawRefreshSec && rawRefreshSec > 0
+ ? Math.max(5, rawRefreshSec)
+ : 0;
+ if (refreshSec > 0) {
+ refreshTimerRef.current = setInterval(fetchAllData, refreshSec * 1000);
+ }
+
+ return () => {
+ if (refreshTimerRef.current) {
+ clearInterval(refreshTimerRef.current);
+ refreshTimerRef.current = null;
+ }
+ };
+ // visibleItemIds로 아이템 변경 감지 (visibleItems 객체 참조 대신 문자열 키 사용)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [fetchAllData, visibleItemIds]);
+
+ // 빈 설정 (모든 hooks 이후에 early return)
+ if (!config || !config.items?.length) {
+ return (
+
+
+ 대시보드 아이템을 추가하세요
+
+
+ );
+ }
+
+ // 단일 아이템 렌더링
+ const renderSingleItem = (item: DashboardItem) => {
+ const itemData = dataMap[item.id];
+ if (!itemData) {
+ return (
+
+ 로딩 중...
+
+ );
+ }
+
+ if (itemData.error) {
+ return (
+
+ {itemData.error}
+
+ );
+ }
+
+ switch (item.subType) {
+ case "kpi-card":
+ return (
+ = {};
+ if (item.statConfig?.categories) {
+ for (const cat of item.statConfig.categories) {
+ if (cat.filter.column && cat.filter.value !== undefined && cat.filter.value !== "") {
+ // 카테고리 필터로 rows 필터링
+ const filtered = itemData.rows.filter((row) => {
+ const cellValue = String(row[cat.filter.column] ?? "");
+ const filterValue = String(cat.filter.value ?? "");
+ switch (cat.filter.operator) {
+ case "=":
+ return cellValue === filterValue;
+ case "!=":
+ return cellValue !== filterValue;
+ case "like":
+ return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+ default:
+ return cellValue === filterValue;
+ }
+ });
+ categoryData[cat.label] = filtered.length;
+ } else {
+ // 필터 미설정 시 전체 건수
+ categoryData[cat.label] = itemData.rows.length;
+ }
+ }
+ }
+ return (
+
+
+ 미지원 타입: {item.subType}
+
+
+ );
+ }
+ };
+
+ // 로딩 상태
+ if (loading && !Object.keys(dataMap).length) {
+ return (
+
+ );
+ }
+
+ // 마이그레이션: 기존 config를 페이지 기반으로 변환
+ const migrated = migrateConfig(config as unknown as Record);
+ const pages = migrated.pages ?? [];
+ const displayMode = migrated.displayMode;
+
+ // 페이지 하나를 GridModeComponent로 렌더링
+ const renderPageContent = (page: DashboardPage) => {
+ return (
+ {
+ const item = visibleItems.find((i) => i.id === itemId);
+ if (!item) return null;
+ return renderSingleItem(item);
+ }}
+ />
+ );
+ };
+
+ // 슬라이드 수: pages가 있으면 페이지 수, 없으면 아이템 수 (기존 동작)
+ const slideCount = pages.length > 0 ? pages.length : visibleItems.length;
+
+ // 슬라이드 렌더 콜백: pages가 있으면 페이지 렌더, 없으면 단일 아이템
+ const renderSlide = (index: number) => {
+ if (pages.length > 0 && pages[index]) {
+ return renderPageContent(pages[index]);
+ }
+ // fallback: 아이템 하나씩 (기존 동작 - pages 미설정 시)
+ if (visibleItems[index]) {
+ return renderSingleItem(visibleItems[index]);
+ }
+ return null;
+ };
+
+ // 페이지 미리보기 모드: 특정 페이지만 단독 렌더링 (디자이너에서 사용)
+ if (
+ typeof previewPageIndex === "number" &&
+ previewPageIndex >= 0 &&
+ pages[previewPageIndex]
+ ) {
+ return (
+
+ {renderPageContent(pages[previewPageIndex])}
+
+ );
+ }
+
+ // 표시 모드별 렌더링
+ return (
+
+ {displayMode === "arrows" && (
+
+ )}
+
+ {displayMode === "auto-slide" && (
+
+ )}
+
+ {displayMode === "scroll" && (
+
+ )}
+
= {
+ arrows: "좌우 버튼",
+ "auto-slide": "자동 슬라이드",
+ scroll: "스크롤",
+};
+
+const SUBTYPE_LABELS: Record = {
+ "kpi-card": "KPI 카드",
+ chart: "차트",
+ gauge: "게이지",
+ "stat-card": "통계 카드",
+};
+
+const JOIN_TYPE_LABELS: Record = {
+ inner: "INNER JOIN",
+ left: "LEFT JOIN",
+ right: "RIGHT JOIN",
+};
+
+const FILTER_OPERATOR_LABELS: Record = {
+ "=": "같음 (=)",
+ "!=": "다름 (!=)",
+ ">": "초과 (>)",
+ ">=": "이상 (>=)",
+ "<": "미만 (<)",
+ "<=": "이하 (<=)",
+ like: "포함 (LIKE)",
+ in: "목록 (IN)",
+ between: "범위 (BETWEEN)",
+};
+
+// ===== 데이터 소스 편집기 =====
+
+function DataSourceEditor({
+ dataSource,
+ onChange,
+}: {
+ dataSource: DataSourceConfig;
+ onChange: (ds: DataSourceConfig) => void;
+}) {
+ // 테이블 목록 (Combobox용)
+ const [tables, setTables] = useState([]);
+ const [loadingTables, setLoadingTables] = useState(false);
+ const [tableOpen, setTableOpen] = useState(false);
+
+ // 컬럼 목록 (집계 대상 컬럼용)
+ const [columns, setColumns] = useState([]);
+ const [loadingCols, setLoadingCols] = useState(false);
+ const [columnOpen, setColumnOpen] = useState(false);
+
+ // 그룹핑 컬럼 (차트 X축용)
+ const [groupByOpen, setGroupByOpen] = useState(false);
+
+ // 마운트 시 테이블 목록 로드
+ useEffect(() => {
+ setLoadingTables(true);
+ fetchTableList()
+ .then(setTables)
+ .finally(() => setLoadingTables(false));
+ }, []);
+
+ // 테이블 변경 시 컬럼 목록 조회
+ useEffect(() => {
+ if (!dataSource.tableName) {
+ setColumns([]);
+ return;
+ }
+ setLoadingCols(true);
+ fetchTableColumns(dataSource.tableName)
+ .then(setColumns)
+ .finally(() => setLoadingCols(false));
+ }, [dataSource.tableName]);
+
+ return (
+
+ {/* 테이블 선택 (검색 가능한 Combobox) */}
+
+
테이블
+
+
+
+ {dataSource.tableName
+ ? (tables.find((t) => t.tableName === dataSource.tableName)
+ ?.displayName ?? dataSource.tableName)
+ : loadingTables
+ ? "로딩..."
+ : "테이블 선택"}
+
+
+
+
+
+
+ 테이블을 찾을 수 없습니다
+
+
+ {tables.map((table) => (
+ {
+ const newVal =
+ table.tableName === dataSource.tableName
+ ? ""
+ : table.tableName;
+ onChange({ ...dataSource, tableName: newVal });
+ setTableOpen(false);
+ }}
+ className="text-xs"
+ >
+
+
+ {table.displayName || table.tableName}
+
+ {table.displayName &&
+ table.displayName !== table.tableName && (
+
+ {table.tableName}
+
+ )}
+
+
+ ))}
+
+
+
+
+
+
+
+ {/* 집계 함수 + 대상 컬럼 */}
+
+
+ 집계 함수
+
+ onChange({
+ ...dataSource,
+ aggregation: val
+ ? {
+ type: val as NonNullable<
+ DataSourceConfig["aggregation"]
+ >["type"],
+ column: dataSource.aggregation?.column ?? "",
+ }
+ : undefined,
+ })
+ }
+ >
+
+
+
+ 건수 (COUNT)
+ 합계 (SUM)
+ 평균 (AVG)
+ 최소 (MIN)
+ 최대 (MAX)
+
+
+
+
+ {dataSource.aggregation && (
+
+
대상 컬럼
+
+
+
+ {loadingCols
+ ? "로딩..."
+ : dataSource.aggregation.column
+ ? columns.find(
+ (c) => c.name === dataSource.aggregation!.column
+ )
+ ? `${dataSource.aggregation.column} (${columns.find((c) => c.name === dataSource.aggregation!.column)?.type})`
+ : dataSource.aggregation.column
+ : "선택"}
+
+
+
+
+
+
+ 컬럼을 찾을 수 없습니다.
+
+
+ {columns.map((col) => (
+ {
+ onChange({
+ ...dataSource,
+ aggregation: {
+ ...dataSource.aggregation!,
+ column: col.name,
+ },
+ });
+ setColumnOpen(false);
+ }}
+ className="text-xs"
+ >
+ {col.name}
+
+ ({col.type})
+
+
+ ))}
+
+
+
+
+
+
+ )}
+
+
+ {/* 그룹핑 (차트 X축 분류) */}
+ {dataSource.aggregation && (
+
+
그룹핑 (X축)
+
+
+
+ {dataSource.aggregation.groupBy?.length
+ ? dataSource.aggregation.groupBy.join(", ")
+ : "없음 (단일 값)"}
+
+
+
+
+
+
+ 컬럼을 찾을 수 없습니다.
+
+
+ {columns.map((col) => (
+ {
+ const current = dataSource.aggregation?.groupBy ?? [];
+ const isSelected = current.includes(col.name);
+ const newGroupBy = isSelected
+ ? current.filter((g) => g !== col.name)
+ : [...current, col.name];
+ onChange({
+ ...dataSource,
+ aggregation: {
+ ...dataSource.aggregation!,
+ groupBy: newGroupBy.length > 0 ? newGroupBy : undefined,
+ },
+ });
+ setGroupByOpen(false);
+ }}
+ className="text-xs"
+ >
+ {col.name}
+ ({col.type})
+
+ ))}
+
+
+
+
+
+
+ 차트에서 X축 카테고리로 사용됩니다
+
+
+ )}
+
+ {/* 자동 새로고침 (Switch + 주기 입력) */}
+
+
+ 자동 새로고침
+ 0}
+ onCheckedChange={(checked) =>
+ onChange({
+ ...dataSource,
+ refreshInterval: checked ? 30 : 0,
+ })
+ }
+ />
+
+ {(dataSource.refreshInterval ?? 0) > 0 && (
+
+
+ 주기 (초)
+
+
+ )}
+
+
+ {/* 조인 설정 */}
+
onChange({ ...dataSource, joins })}
+ />
+
+ {/* 필터 조건 */}
+ onChange({ ...dataSource, filters })}
+ />
+ ([]);
+
+ // 테이블 목록 로드
+ useEffect(() => {
+ fetchTableList().then(setTables);
+ }, []);
+
+ const addJoin = () => {
+ onChange([
+ ...joins,
+ {
+ targetTable: "",
+ joinType: "left",
+ on: { sourceColumn: "", targetColumn: "" },
+ },
+ ]);
+ };
+
+ const updateJoin = (index: number, partial: Partial) => {
+ const newJoins = [...joins];
+ newJoins[index] = { ...newJoins[index], ...partial };
+ onChange(newJoins);
+ };
+
+ const removeJoin = (index: number) => {
+ onChange(joins.filter((_, i) => i !== index));
+ };
+
+ return (
+
+
+
+ {!mainTable && joins.length === 0 && (
+
+ 먼저 메인 테이블을 선택하세요
+
+ )}
+
+ {joins.map((join, index) => (
+
updateJoin(index, partial)}
+ onRemove={() => removeJoin(index)}
+ />
+ ))}
+ ) => void;
+ onRemove: () => void;
+}) {
+ const [targetColumns, setTargetColumns] = useState([]);
+ const [sourceColumns, setSourceColumns] = useState([]);
+ const [targetTableOpen, setTargetTableOpen] = useState(false);
+
+ // 메인 테이블 컬럼 로드
+ useEffect(() => {
+ if (!mainTable) return;
+ fetchTableColumns(mainTable).then(setSourceColumns);
+ }, [mainTable]);
+
+ // 조인 대상 테이블 컬럼 로드
+ useEffect(() => {
+ if (!join.targetTable) return;
+ fetchTableColumns(join.targetTable).then(setTargetColumns);
+ }, [join.targetTable]);
+
+ return (
+
+
+ {/* 조인 타입 */}
+
onUpdate({ joinType: val as JoinType })}
+ >
+
+
+
+ {Object.entries(JOIN_TYPE_LABELS).map(([val, label]) => (
+
+ {label}
+
+ ))}
+
+
+
+ {/* 조인 대상 테이블 (Combobox) */}
+
+
+
+ {join.targetTable
+ ? (tables.find((t) => t.tableName === join.targetTable)
+ ?.displayName ?? join.targetTable)
+ : "테이블 선택"}
+
+
+
+
+
+
+ 없음
+
+
+ {tables
+ .filter((t) => t.tableName !== mainTable)
+ .map((t) => (
+ {
+ onUpdate({ targetTable: t.tableName });
+ setTargetTableOpen(false);
+ }}
+ className="text-xs"
+ >
+ {t.displayName || t.tableName}
+
+ ))}
+
+
+
+
+
+
+ {/* 삭제 */}
+
+
+
+
+ {/* 조인 조건 (ON 절) */}
+ {join.targetTable && (
+
+ ON
+
+ onUpdate({ on: { ...join.on, sourceColumn: val } })
+ }
+ >
+
+
+
+ {sourceColumns.map((c) => (
+
+ {c.name}
+
+ ))}
+
+
+ =
+
+ onUpdate({ on: { ...join.on, targetColumn: val } })
+ }
+ >
+
+
+
+ {targetColumns.map((c) => (
+
+ {c.name}
+
+ ))}
+
+
+
+ )}
+
([]);
+
+ useEffect(() => {
+ if (!tableName) return;
+ fetchTableColumns(tableName).then(setColumns);
+ }, [tableName]);
+
+ const addFilter = () => {
+ onChange([...filters, { column: "", operator: "=", value: "" }]);
+ };
+
+ const updateFilter = (
+ index: number,
+ partial: Partial
+ ) => {
+ const newFilters = [...filters];
+ newFilters[index] = { ...newFilters[index], ...partial };
+
+ // operator 변경 시 value 초기화
+ if (partial.operator) {
+ if (partial.operator === "between") {
+ newFilters[index].value = ["", ""];
+ } else if (partial.operator === "in") {
+ newFilters[index].value = [];
+ } else if (
+ typeof newFilters[index].value !== "string" &&
+ typeof newFilters[index].value !== "number"
+ ) {
+ newFilters[index].value = "";
+ }
+ }
+
+ onChange(newFilters);
+ };
+
+ const removeFilter = (index: number) => {
+ onChange(filters.filter((_, i) => i !== index));
+ };
+
+ return (
+
+
+
+ {filters.map((filter, index) => (
+
+ {/* 컬럼 선택 */}
+
updateFilter(index, { column: val })}
+ >
+
+
+
+ {columns.map((c) => (
+
+ {c.name}
+
+ ))}
+
+
+
+ {/* 연산자 */}
+
+ updateFilter(index, { operator: val as FilterOperator })
+ }
+ >
+
+
+
+ {Object.entries(FILTER_OPERATOR_LABELS).map(([op, label]) => (
+
+ {label}
+
+ ))}
+
+
+
+ {/* 값 입력 (연산자에 따라 다른 UI) */}
+
+
+ {/* 삭제 */}
+
removeFilter(index)}
+ >
+
+
+ ))}
+
+
계산식 설정
+
+ {/* 값 목록 */}
+ {formula.values.map((fv, index) => (
+
+
+
+ {fv.id}
+
+ {
+ const newValues = formula.values.filter(
+ (_, i) => i !== index
+ );
+ onChange({ ...formula, values: newValues });
+ }}
+ >
+
+ )}
+
+
{
+ const newValues = [...formula.values];
+ newValues[index] = { ...fv, dataSource: ds };
+ onChange({ ...formula, values: newValues });
+ }}
+ />
+
+ ))}
+
+ {/* 값 추가 */}
+
{
+ const nextId = String.fromCharCode(65 + formula.values.length);
+ onChange({
+ ...formula,
+ values: [
+ ...formula.values,
+ {
+ id: nextId,
+ label: "",
+ dataSource: { ...DEFAULT_DATASOURCE },
+ },
+ ],
+ });
+ }}
+ >
+
+
+ {/* 수식 입력 */}
+
+
수식
+
+ onChange({ ...formula, expression: e.target.value })
+ }
+ placeholder="예: A / B * 100"
+ className={`h-8 text-xs ${!isValid ? "border-destructive" : ""}`}
+ />
+ {!isValid && (
+
+ 수식에 정의되지 않은 변수가 있습니다
+
+ )}
+
+
+ {/* 표시 형태 */}
+
+ 표시 형태
+
+ onChange({
+ ...formula,
+ displayFormat: val as FormulaConfig["displayFormat"],
+ })
+ }
+ >
+
+
+
+ 계산 결과 숫자
+ 분수 (1,234 / 5,678)
+ 퍼센트 (21.7%)
+ 비율 (1,234 : 5,678)
+
+
+
+
+ {/* 헤더 */}
+
+
+ {SUBTYPE_LABELS[item.subType]}
+
+
+
+
+
+
+
+
+ onUpdate({ ...item, visible: checked })
+ }
+ className="scale-75"
+ />
+
+ setExpanded(!expanded)}
+ >
+ {expanded ? (
+
+
+
+
+
+
+ {/* 상세 설정 */}
+ {expanded && (
+
+
+ 타입
+
+ onUpdate({ ...item, subType: val as DashboardSubType })
+ }
+ >
+
+
+
+ KPI 카드
+ 차트
+ 게이지
+ 통계 카드
+
+
+
+
+
+ 데이터 모드
+ {
+ const mode = val as "single" | "formula";
+ setDataMode(mode);
+ if (mode === "formula" && !item.formula) {
+ onUpdate({
+ ...item,
+ formula: {
+ enabled: true,
+ values: [
+ {
+ id: "A",
+ label: "",
+ dataSource: { ...DEFAULT_DATASOURCE },
+ },
+ {
+ id: "B",
+ label: "",
+ dataSource: { ...DEFAULT_DATASOURCE },
+ },
+ ],
+ expression: "A / B",
+ displayFormat: "value",
+ },
+ });
+ } else if (mode === "single") {
+ onUpdate({ ...item, formula: undefined });
+ }
+ }}
+ >
+
+
+
+ 단일 집계
+ 계산식
+
+
+
+
+ {dataMode === "formula" && item.formula ? (
+
onUpdate({ ...item, formula: f })}
+ />
+ ) : (
+ onUpdate({ ...item, dataSource: ds })}
+ />
+ )}
+
+ {/* 요소별 보이기/숨기기 */}
+
+
표시 요소
+
+ {(
+ [
+ ["showLabel", "라벨"],
+ ["showValue", "값"],
+ ["showUnit", "단위"],
+ ["showTrend", "증감율"],
+ ["showSubLabel", "보조라벨"],
+ ["showTarget", "목표값"],
+ ] as const
+ ).map(([key, label]) => (
+
+
+ ))}
+
+
+ 단위
+
+ )}
+
+ {item.subType === "chart" && (
+
+
+ 차트 유형
+
+ onUpdate({
+ ...item,
+ chartConfig: {
+ ...item.chartConfig,
+ chartType: val as "bar" | "pie" | "line",
+ },
+ })
+ }
+ >
+
+
+
+ 막대 차트
+ 원형 차트
+ 라인 차트
+
+
+
+
+ {/* X축/Y축 자동 안내 */}
+
+ X축: 그룹핑(X축)에서 선택한 컬럼 자동 적용 / Y축: 집계 결과(value) 자동 적용
+
+
+
+ 최소
+
+
+ 최대
+
+
+ 목표
+
+
+
+
카테고리 설정
+
{
+ const currentCats = item.statConfig?.categories ?? [];
+ onUpdate({
+ ...item,
+ statConfig: {
+ ...item.statConfig,
+ categories: [
+ ...currentCats,
+ {
+ label: `카테고리 ${currentCats.length + 1}`,
+ filter: { column: "", operator: "=", value: "" },
+ },
+ ],
+ },
+ });
+ }}
+ >
+
+
+
+ {(item.statConfig?.categories ?? []).map((cat, catIdx) => (
+
+
+ {
+ const newCats = (item.statConfig?.categories ?? []).filter(
+ (_, i) => i !== catIdx
+ );
+ onUpdate({
+ ...item,
+ statConfig: { ...item.statConfig, categories: newCats },
+ });
+ }}
+ >
+
+
+ {/* 필터 조건: 컬럼 / 연산자 / 값 */}
+
+ {
+ const newCats = [...(item.statConfig?.categories ?? [])];
+ newCats[catIdx] = {
+ ...cat,
+ filter: { ...cat.filter, operator: val as FilterOperator },
+ };
+ onUpdate({
+ ...item,
+ statConfig: { ...item.statConfig, categories: newCats },
+ });
+ }}
+ >
+
+
+
+ = 같음
+ != 다름
+ LIKE
+
+
+
+
+ ))}
+
+ {(item.statConfig?.categories ?? []).length === 0 && (
+
+ 카테고리를 추가하면 각 조건에 맞는 건수가 표시됩니다
+
+ )}
+
+ )}
+
) => {
+ const updatedItem = {
+ ...item,
+ itemStyle: { ...item.itemStyle, ...partial },
+ };
+ onUpdate(updatedItem);
+ };
+
+ return (
+
+ {/* 헤더 - 클릭으로 접기/펼치기 */}
+
setExpanded(!expanded)}
+ >
+
+ {item.label || item.id}
+
+ {expanded ? (
+
+
+ {/* 내용 - 접기/펼치기 */}
+ {expanded && (
+
+ {/* 라벨 정렬 */}
+
+
+ 라벨 정렬
+
+
+ {(["left", "center", "right"] as const).map((align) => (
+ updateStyle({ labelAlign: align })}
+ >
+ {TEXT_ALIGN_LABELS[align]}
+
+ ))}
+
+
+
+ )}
+
+ {/* 행/열 조절 버튼 */}
+
+
+ 열
+ {
+ if (gridColumns > 1) {
+ const newCells = ensuredCells.filter((c) => {
+ const col = parseInt(c.gridColumn.split(" / ")[0]);
+ return col <= gridColumns - 1;
+ });
+ onChange(newCells, gridColumns - 1, gridRows);
+ }
+ }}
+ disabled={gridColumns <= 1}
+ >
+ -
+
+
+ {gridColumns}
+
+ {
+ if (gridColumns < 6) {
+ const newCells = [...ensuredCells];
+ for (let r = 0; r < gridRows; r++) {
+ newCells.push({
+ id: `cell-${r}-${gridColumns}`,
+ gridColumn: `${gridColumns + 1} / ${gridColumns + 2}`,
+ gridRow: `${r + 1} / ${r + 2}`,
+ itemId: null,
+ });
+ }
+ onChange(newCells, gridColumns + 1, gridRows);
+ }
+ }}
+ disabled={gridColumns >= 6}
+ >
+ +
+
+
+
+
+ 행
+ {
+ if (gridRows > 1) {
+ const newCells = ensuredCells.filter((c) => {
+ const row = parseInt(c.gridRow.split(" / ")[0]);
+ return row <= gridRows - 1;
+ });
+ onChange(newCells, gridColumns, gridRows - 1);
+ }
+ }}
+ disabled={gridRows <= 1}
+ >
+ -
+
+
+ {gridRows}
+
+ {
+ if (gridRows < 6) {
+ const newCells = [...ensuredCells];
+ for (let c = 0; c < gridColumns; c++) {
+ newCells.push({
+ id: `cell-${gridRows}-${c}`,
+ gridColumn: `${c + 1} / ${c + 2}`,
+ gridRow: `${gridRows + 1} / ${gridRows + 2}`,
+ itemId: null,
+ });
+ }
+ onChange(newCells, gridColumns, gridRows + 1);
+ }
+ }}
+ disabled={gridRows >= 6}
+ >
+ +
+
+
+
+
+ onChange(
+ generateDefaultCells(gridColumns, gridRows),
+ gridColumns,
+ gridRows
+ )
+ }
+ >
+ 초기화
+
+
+
+ {/* 시각적 그리드 프리뷰 + 아이템 배정 */}
+
+ {ensuredCells.map((cell) => (
+
+ {
+ const newCells = ensuredCells.map((c) =>
+ c.id === cell.id
+ ? { ...c, itemId: val === "empty" ? null : val }
+ : c
+ );
+ onChange(newCells, gridColumns, gridRows);
+ }}
+ >
+
+
+
+ 빈 셀
+ {items.map((item) => (
+
+ {item.label || item.id}
+
+ ))}
+
+
+
+ ))}
+
+
+
+ 각 셀을 클릭하여 아이템을 배정하세요. +/- 버튼으로 행/열을
+ 추가/삭제할 수 있습니다.
+
+
+ {/* 배정된 아이템별 스타일 설정 */}
+ {onUpdateItem && (() => {
+ const assignedItemIds = ensuredCells
+ .map((c) => c.itemId)
+ .filter((id): id is string => !!id);
+ const uniqueIds = [...new Set(assignedItemIds)];
+ const assignedItems = uniqueIds
+ .map((id) => items.find((i) => i.id === id))
+ .filter((i): i is DashboardItem => !!i);
+
+ if (assignedItems.length === 0) return null;
+
+ return (
+
+
+ 아이템 스타일
+
+ {assignedItems.map((item) => (
+
+ );
+ })()}
+
+ {/* 헤더 */}
+
+
+ {page.label || `페이지 ${pageIndex + 1}`}
+
+
+ {page.gridColumns}x{page.gridRows}
+
+ onPreview?.()}
+ title="이 페이지 미리보기"
+ >
+
+ setExpanded(!expanded)}
+ >
+ {expanded ? (
+
+
+
+
+
+ {/* 상세 */}
+ {expanded && (
+
+ {/* 라벨 */}
+
+ 라벨
+
+
+ {/* GridLayoutEditor 재사용 */}
+
+ onChange({
+ ...page,
+ gridCells: cells,
+ gridColumns: cols,
+ gridRows: rows,
+ })
+ }
+ onUpdateItem={onUpdateItem}
+ />
+
+ )}
+
+ ) as PopDashboardConfig;
+
+ const [activeTab, setActiveTab] = useState<"basic" | "items" | "pages">(
+ "basic"
+ );
+
+ // 설정 변경 헬퍼
+ const updateConfig = useCallback(
+ (partial: Partial) => {
+ onChange({ ...cfg, ...partial });
+ },
+ [cfg, onChange]
+ );
+
+ // 아이템 추가
+ const addItem = useCallback(
+ (subType: DashboardSubType) => {
+ const newItem: DashboardItem = {
+ id: `item-${Date.now()}`,
+ label: `${SUBTYPE_LABELS[subType]} ${cfg.items.length + 1}`,
+ visible: true,
+ subType,
+ dataSource: { ...DEFAULT_DATASOURCE },
+ visibility: { ...DEFAULT_VISIBILITY },
+ };
+ updateConfig({ items: [...cfg.items, newItem] });
+ },
+ [cfg.items, updateConfig]
+ );
+
+ // 아이템 업데이트
+ const updateItem = useCallback(
+ (index: number, item: DashboardItem) => {
+ const newItems = [...cfg.items];
+ newItems[index] = item;
+ updateConfig({ items: newItems });
+ },
+ [cfg.items, updateConfig]
+ );
+
+ // 아이템 삭제 (모든 페이지의 셀 배정도 해제)
+ const deleteItem = useCallback(
+ (index: number) => {
+ const deletedId = cfg.items[index].id;
+ const newItems = cfg.items.filter((_, i) => i !== index);
+
+ const newPages = cfg.pages?.map((page) => ({
+ ...page,
+ gridCells: page.gridCells.map((cell) =>
+ cell.itemId === deletedId ? { ...cell, itemId: null } : cell
+ ),
+ }));
+
+ updateConfig({ items: newItems, pages: newPages });
+ },
+ [cfg.items, cfg.pages, updateConfig]
+ );
+
+ // 아이템 순서 변경
+ const moveItem = useCallback(
+ (from: number, to: number) => {
+ if (to < 0 || to >= cfg.items.length) return;
+ const newItems = [...cfg.items];
+ const [moved] = newItems.splice(from, 1);
+ newItems.splice(to, 0, moved);
+ updateConfig({ items: newItems });
+ },
+ [cfg.items, updateConfig]
+ );
+
+ return (
+
+ {/* 탭 헤더 */}
+
+ {(
+ [
+ ["basic", "기본 설정"],
+ ["items", "아이템"],
+ ["pages", "페이지"],
+ ] as const
+ ).map(([key, label]) => (
+ setActiveTab(key)}
+ className={`rounded-t px-2 py-1 text-xs font-medium transition-colors ${
+ activeTab === key
+ ? "bg-primary text-primary-foreground"
+ : "text-muted-foreground hover:bg-muted"
+ }`}
+ >
+ {label}
+
+ ))}
+
+
+ {/* ===== 기본 설정 탭 ===== */}
+ {activeTab === "basic" && (
+
+ {/* 표시 모드 */}
+
+ 표시 모드
+
+ updateConfig({
+ displayMode: val as DashboardDisplayMode,
+ })
+ }
+ >
+
+
+
+ {Object.entries(DISPLAY_MODE_LABELS).map(([val, label]) => (
+
+ {label}
+
+ ))}
+
+
+
+
+ {/* 자동 슬라이드 설정 */}
+ {cfg.displayMode === "auto-slide" && (
+
+ )}
+
+ {/* 인디케이터 */}
+
+ 페이지 인디케이터
+
+ updateConfig({ showIndicator: checked })
+ }
+ />
+
+
+ {/* 간격 */}
+
+ 아이템 간격 (px)
+
+
+ {/* 배경색 */}
+
+ 배경색
+
+
+ )}
+
+ {/* ===== 아이템 관리 탭 ===== */}
+ {activeTab === "items" && (
+
+ {cfg.items.map((item, index) => (
+
updateItem(index, updated)}
+ onDelete={() => deleteItem(index)}
+ onMoveUp={() => moveItem(index, index - 1)}
+ onMoveDown={() => moveItem(index, index + 1)}
+ isFirst={index === 0}
+ isLast={index === cfg.items.length - 1}
+ />
+ ))}
+
+
+ {(Object.keys(SUBTYPE_LABELS) as DashboardSubType[]).map(
+ (subType) => (
+
addItem(subType)}
+ >
+
+ )
+ )}
+
+ )}
+
+ {/* ===== 페이지 탭 ===== */}
+ {activeTab === "pages" && (
+
+ {/* 페이지 목록 */}
+ {(cfg.pages ?? []).map((page, pageIdx) => (
+
{
+ const newPages = [...(cfg.pages ?? [])];
+ newPages[pageIdx] = updatedPage;
+ updateConfig({ pages: newPages });
+ }}
+ onDelete={() => {
+ const newPages = (cfg.pages ?? []).filter(
+ (_, i) => i !== pageIdx
+ );
+ updateConfig({ pages: newPages });
+ }}
+ onPreview={() => {
+ if (props.onPreviewPage) {
+ // 같은 페이지를 다시 누르면 미리보기 해제
+ props.onPreviewPage(props.previewPageIndex === pageIdx ? -1 : pageIdx);
+ }
+ }}
+ isPreviewing={props.previewPageIndex === pageIdx}
+ onUpdateItem={(updatedItem) => {
+ const newItems = cfg.items.map((i) =>
+ i.id === updatedItem.id ? updatedItem : i
+ );
+ updateConfig({ items: newItems });
+ // 스타일 변경 시 자동으로 해당 페이지 미리보기 활성화
+ if (props.onPreviewPage && props.previewPageIndex !== pageIdx) {
+ props.onPreviewPage(pageIdx);
+ }
+ }}
+ />
+ ))}
+
+ {/* 페이지 추가 버튼 */}
+ {
+ const newPage: DashboardPage = {
+ id: `page-${Date.now()}`,
+ label: `페이지 ${(cfg.pages?.length ?? 0) + 1}`,
+ gridColumns: 2,
+ gridRows: 2,
+ gridCells: generateDefaultCells(2, 2),
+ };
+ updateConfig({ pages: [...(cfg.pages ?? []), newPage] });
+ }}
+ >
+
+
+ {(cfg.pages?.length ?? 0) === 0 && (
+
+ 페이지를 추가하면 각 페이지에 독립적인 그리드 레이아웃을
+ 설정할 수 있습니다.
+
+ )}
+
+ )}
+
= {
+ "kpi-card": = {
+ "kpi-card": "KPI",
+ chart: "차트",
+ gauge: "게이지",
+ "stat-card": "통계",
+};
+
+// ===== 모드 라벨 =====
+
+const MODE_LABELS: Record = {
+ arrows: "좌우 버튼",
+ "auto-slide": "자동 슬라이드",
+ scroll: "스크롤",
+};
+
+// ===== 더미 아이템 프리뷰 =====
+
+function DummyItemPreview({
+ subType,
+ label,
+}: {
+ subType: DashboardSubType;
+ label: string;
+}) {
+ return (
+
+
+ {SUBTYPE_ICONS[subType]}
+
+
+ {label || SUBTYPE_LABELS[subType]}
+
+
+ );
+}
+
+// ===== 메인 미리보기 =====
+
+export function PopDashboardPreviewComponent({
+ config,
+}: {
+ config?: PopDashboardConfig;
+}) {
+ // config가 빈 객체 {} 또는 items가 없는 경우 방어
+ if (!config || !Array.isArray(config.items) || !config.items.length) {
+ return (
+
+ 대시보드
+
+ );
+ }
+
+ const visibleItems = config.items.filter((i) => i.visible);
+
+ // 마이그레이션 적용
+ const migrated = migrateConfig(config as unknown as Record);
+ const pages = migrated.pages ?? [];
+ const hasPages = pages.length > 0;
+
+ return (
+
+ {/* 모드 + 페이지 뱃지 */}
+
+
+ {MODE_LABELS[migrated.displayMode] ?? migrated.displayMode}
+
+ {hasPages && (
+
+ {pages.length}페이지
+
+ )}
+
+ {visibleItems.length}개
+
+
+
+ {/* 미리보기 */}
+
+ {hasPages ? (
+ // 첫 번째 페이지 그리드 미리보기
+
+ {pages[0].gridCells.length > 0
+ ? pages[0].gridCells.map((cell) => {
+ const item = visibleItems.find(
+ (i) => i.id === cell.itemId
+ );
+ return (
+
+ {item ? (
+
+ ) : (
+
+ )}
+
+ );
+ })
+ : visibleItems.slice(0, 4).map((item) => (
+
+ ))}
+
+ ) : (
+ // 페이지 미설정: 첫 번째 아이템만 크게 표시
+
+ {visibleItems[0] && (
+
+ )}
+ {visibleItems.length > 1 && (
+
+ +{visibleItems.length - 1}
+
+ )}
+
+ )}
+
+
[];
+ /** 컨테이너 너비 (px) - 최소 크기 판단용 */
+ containerWidth: number;
+}
+
+// ===== 기본 색상 팔레트 =====
+
+const DEFAULT_COLORS = [
+ "#6366f1", // indigo
+ "#8b5cf6", // violet
+ "#06b6d4", // cyan
+ "#10b981", // emerald
+ "#f59e0b", // amber
+ "#ef4444", // rose
+ "#ec4899", // pink
+ "#14b8a6", // teal
+];
+
+// ===== 최소 표시 크기 =====
+
+const MIN_CHART_WIDTH = 120;
+
+// ===== 메인 컴포넌트 =====
+
+export function ChartItemComponent({
+ item,
+ rows,
+ containerWidth,
+}: ChartItemProps) {
+ const { chartConfig, visibility, itemStyle } = item;
+ const chartType = chartConfig?.chartType ?? "bar";
+ const colors = chartConfig?.colors?.length
+ ? chartConfig.colors
+ : DEFAULT_COLORS;
+ const xKey = chartConfig?.xAxisColumn ?? "name";
+ const yKey = chartConfig?.yAxisColumn ?? "value";
+
+ // 라벨 정렬만 사용자 설정
+ const labelAlignClass = TEXT_ALIGN_CLASSES[itemStyle?.labelAlign ?? "center"];
+
+ // 컨테이너가 너무 작으면 메시지 표시
+ if (containerWidth < MIN_CHART_WIDTH) {
+ return (
+
+ 차트
+
+ );
+ }
+
+ // 데이터 없음
+ if (!rows.length) {
+ return (
+
+ 데이터 없음
+
+ );
+ }
+
+ // X축 라벨이 긴지 판정 (7자 이상이면 대각선)
+ const hasLongLabels = rows.some(
+ (r) => String(r[xKey] ?? "").length > 7
+ );
+ const xAxisTickProps = hasLongLabels
+ ? { fontSize: 10, angle: -45, textAnchor: "end" as const }
+ : { fontSize: 10 };
+ // 긴 라벨이 있으면 하단 여백 확보
+ const chartMargin = hasLongLabels
+ ? { top: 5, right: 10, bottom: 40, left: 10 }
+ : { top: 5, right: 10, bottom: 5, left: 10 };
+
+ return (
+
+ {/* 라벨 - 사용자 정렬 적용 */}
+ {visibility.showLabel && (
+
+ {item.label}
+
+ )}
+
+ {/* 차트 영역 */}
+
+
+ {chartType === "bar" ? (
+ []} margin={chartMargin}>
+ abbreviateNumber(v)}
+ />
+
+ ) : chartType === "line" ? (
+ []} margin={chartMargin}>
+ abbreviateNumber(v)}
+ />
+ 250}
+ />
+
+ ) : (
+ /* pie - 카테고리명 + 값 라벨 표시 */
+
+ []}
+ dataKey={yKey}
+ nameKey={xKey}
+ cx="50%"
+ cy="50%"
+ outerRadius={containerWidth > 400 ? "70%" : "80%"}
+ label={
+ containerWidth > 250
+ ? ({ name, value, percent }: { name: string; value: number; percent: number }) =>
+ `${name} ${abbreviateNumber(value)} (${(percent * 100).toFixed(0)}%)`
+ : false
+ }
+ labelLine={containerWidth > 250}
+ >
+ {rows.map((_, index) => (
+ |
+ ))}
+
+ [abbreviateNumber(value), name]}
+ />
+ {containerWidth > 300 && (
+
+ )}
+
+
+
= {
+ xs: 14,
+ sm: 18,
+ base: 24,
+ lg: 32,
+ xl: 48,
+};
+
+// ===== Props =====
+
+export interface GaugeItemProps {
+ item: DashboardItem;
+ data: number | null;
+ /** 동적 목표값 (targetDataSource로 조회된 값) */
+ targetValue?: number | null;
+}
+
+// ===== 게이지 색상 판정 =====
+
+function getGaugeColor(
+ percentage: number,
+ ranges?: { min: number; max: number; color: string }[]
+): string {
+ if (ranges?.length) {
+ const match = ranges.find((r) => percentage >= r.min && percentage <= r.max);
+ if (match) return match.color;
+ }
+ // 기본 색상 (달성률 기준)
+ if (percentage >= 80) return "#10b981"; // emerald
+ if (percentage >= 50) return "#f59e0b"; // amber
+ return "#ef4444"; // rose
+}
+
+// ===== 메인 컴포넌트 =====
+
+export function GaugeItemComponent({
+ item,
+ data,
+ targetValue,
+}: GaugeItemProps) {
+ const { visibility, gaugeConfig, itemStyle } = item;
+ const current = data ?? 0;
+ const min = gaugeConfig?.min ?? 0;
+ const max = gaugeConfig?.max ?? 100;
+ const target = targetValue ?? gaugeConfig?.target ?? max;
+
+ // 라벨 정렬만 사용자 설정
+ const labelAlignClass = TEXT_ALIGN_CLASSES[itemStyle?.labelAlign ?? "center"];
+
+ // SVG 내부 텍스트는 기본값 고정 (사용자 설정 연동 제거)
+ const svgValueFontSize = SVG_FONT_SIZE_MAP["base"]; // 24
+ const svgSubFontSize = SVG_FONT_SIZE_MAP["xs"]; // 14
+
+ // 달성률 계산 (0~100)
+ const range = max - min;
+ const percentage = range > 0 ? Math.min(100, Math.max(0, ((current - min) / range) * 100)) : 0;
+ const gaugeColor = getGaugeColor(percentage, gaugeConfig?.colorRanges);
+
+ // SVG 반원 게이지 수치
+ const cx = 100;
+ const cy = 90;
+ const radius = 70;
+ // 반원: 180도 -> percentage에 비례한 각도
+ const startAngle = Math.PI; // 180도 (왼쪽)
+ const endAngle = Math.PI - (percentage / 100) * Math.PI; // 0도 (오른쪽) 방향
+
+ const startX = cx + radius * Math.cos(startAngle);
+ const startY = cy - radius * Math.sin(startAngle);
+ const endX = cx + radius * Math.cos(endAngle);
+ const endY = cy - radius * Math.sin(endAngle);
+ const largeArcFlag = percentage > 50 ? 1 : 0;
+
+ return (
+
+ {/* 라벨 - 사용자 정렬 적용 */}
+ {visibility.showLabel && (
+
+ {item.label}
+
+ )}
+
+ {/* 게이지 SVG - 높이/너비 모두 반응형 */}
+
+
+ {/* 배경 반원 (회색) */}
+
+ {abbreviateNumber(current)}
+
+ )}
+
+ {/* 퍼센트 */}
+
+ {percentage.toFixed(1)}%
+
+
+
+
+ {/* 목표값 */}
+ {visibility.showTarget && (
+
+ 목표: {abbreviateNumber(target)}
+
+ )}
+
+ {arrow}
+ {Math.abs(value).toFixed(1)}%
+
+ );
+}
+
+// ===== 색상 구간 판정 =====
+
+function getColorForValue(
+ value: number,
+ ranges?: { min: number; max: number; color: string }[]
+): string | undefined {
+ if (!ranges?.length) return undefined;
+ const match = ranges.find((r) => value >= r.min && value <= r.max);
+ return match?.color;
+}
+
+// ===== 메인 컴포넌트 =====
+
+export function KpiCardComponent({
+ item,
+ data,
+ trendValue,
+ formulaDisplay,
+}: KpiCardProps) {
+ const { visibility, kpiConfig, itemStyle } = item;
+ const displayValue = data ?? 0;
+ const valueColor = getColorForValue(displayValue, kpiConfig?.colorRanges);
+
+ // 라벨 정렬만 사용자 설정, 나머지는 @container 반응형 자동
+ const labelAlignClass = TEXT_ALIGN_CLASSES[itemStyle?.labelAlign ?? "center"];
+
+ return (
+
+ {/* 라벨 - 사용자 정렬 적용 */}
+ {visibility.showLabel && (
+
+ {item.label}
+
+ )}
+
+ {/* 메인 값 - @container 반응형 */}
+ {visibility.showValue && (
+
+
+ {formulaDisplay ?? abbreviateNumber(displayValue)}
+
+
+ {/* 단위 */}
+ {visibility.showUnit && kpiConfig?.unit && (
+
+ {kpiConfig.unit}
+
+ )}
+
+ )}
+
+ {/* 증감율 */}
+ {visibility.showTrend && trendValue != null && (
+
+ )}
+
+ {/* 보조 라벨 (수식 표시 등) */}
+ {visibility.showSubLabel && formulaDisplay && (
+
+ {item.formula?.values.map((v) => v.label).join(" / ")}
+
+ )}
+
;
+}
+
+// ===== 기본 색상 팔레트 =====
+
+const DEFAULT_STAT_COLORS = [
+ "#6366f1", // indigo
+ "#f59e0b", // amber
+ "#10b981", // emerald
+ "#ef4444", // rose
+ "#8b5cf6", // violet
+];
+
+// ===== 메인 컴포넌트 =====
+
+export function StatCardComponent({ item, categoryData }: StatCardProps) {
+ const { visibility, statConfig, itemStyle } = item;
+ const categories = statConfig?.categories ?? [];
+ const total = Object.values(categoryData).reduce((sum, v) => sum + v, 0);
+
+ // 라벨 정렬만 사용자 설정
+ const labelAlignClass = TEXT_ALIGN_CLASSES[itemStyle?.labelAlign ?? "center"];
+
+ return (
+
+ {/* 라벨 - 사용자 정렬 적용 */}
+ {visibility.showLabel && (
+
+ {item.label}
+
+ )}
+
+ {/* 총합 - @container 반응형 */}
+ {visibility.showValue && (
+
+ {abbreviateNumber(total)}
+
+ )}
+
+ {/* 카테고리별 건수 */}
+
+ {categories.map((cat, index) => {
+ const count = categoryData[cat.label] ?? 0;
+ const color =
+ cat.color ?? DEFAULT_STAT_COLORS[index % DEFAULT_STAT_COLORS.length];
+
+ return (
+
+ {/* 색상 점 */}
+
+ {cat.label}
+
+
+ {abbreviateNumber(count)}
+
+
+ );
+ })}
+
+
+ {/* 보조 라벨 (단위 등) */}
+ {visibility.showSubLabel && (
+
+ {visibility.showUnit && item.kpiConfig?.unit
+ ? `단위: ${item.kpiConfig.unit}`
+ : ""}
+
+ )}
+
+ 아이템 없음
+
+ );
+ }
+
+ return (
+
+ {/* 아이템 (전체 영역 사용) */}
+
+ {renderItem(currentIndex)}
+
+
+ {/* 좌우 화살표 (콘텐츠 위에 겹침) */}
+ {itemCount > 1 && (
+ <>
+
+
+
+
+
+ )}
+
+ {/* 페이지 인디케이터 (콘텐츠 하단에 겹침) */}
+ {showIndicator && itemCount > 1 && (
+
+ {Array.from({ length: itemCount }).map((_, i) => (
+ setCurrentIndex(i)}
+ className={`h-1.5 rounded-full transition-all ${
+ i === currentIndex
+ ? "w-4 bg-primary"
+ : "w-1.5 bg-muted-foreground/30"
+ }`}
+ aria-label={`${i + 1}번째 아이템`}
+ />
+ ))}
+
+ )}
+
| null>(null);
+ const resumeTimerRef = useRef | null>(null);
+
+ // 타이머 정리 함수
+ const clearTimers = useCallback(() => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ intervalRef.current = null;
+ }
+ if (resumeTimerRef.current) {
+ clearTimeout(resumeTimerRef.current);
+ resumeTimerRef.current = null;
+ }
+ }, []);
+
+ // 자동 슬라이드 시작
+ const startAutoSlide = useCallback(() => {
+ clearTimers();
+ if (itemCount <= 1) return;
+
+ intervalRef.current = setInterval(() => {
+ setCurrentIndex((prev) => (prev + 1) % itemCount);
+ }, interval * 1000);
+ }, [itemCount, interval, clearTimers]);
+
+ // 터치/클릭으로 일시 정지
+ const handlePause = useCallback(() => {
+ setIsPaused(true);
+ clearTimers();
+
+ // resumeDelay 후 자동 재개
+ resumeTimerRef.current = setTimeout(() => {
+ setIsPaused(false);
+ startAutoSlide();
+ }, resumeDelay * 1000);
+ }, [resumeDelay, clearTimers, startAutoSlide]);
+
+ // 마운트 시 자동 슬라이드 시작, unmount 시 정리
+ useEffect(() => {
+ if (!isPaused) {
+ startAutoSlide();
+ }
+ return clearTimers;
+ }, [isPaused, startAutoSlide, clearTimers]);
+
+ if (itemCount === 0) {
+ return (
+
+ 아이템 없음
+
+ );
+ }
+
+ return (
+
+ {/* 콘텐츠 (슬라이드 애니메이션) */}
+
+
+ {Array.from({ length: itemCount }).map((_, i) => (
+
+ {renderItem(i)}
+
+ ))}
+
+
+
+ {/* 인디케이터 (콘텐츠 하단에 겹침) */}
+ {showIndicator && itemCount > 1 && (
+
+ {isPaused && (
+
+ 일시정지
+
+ )}
+ {Array.from({ length: itemCount }).map((_, i) => (
+
+ )}
+
+ 셀 없음
+
+ );
+ }
+
+ return (
+
+ {remappedCells.map((cell) => (
+
+ {cell.itemId ? (
+ renderItem(cell.itemId)
+ ) : (
+
+
+ 빈 셀
+
+
+ )}
+
+ ))}
+
(null);
+ const [activeIndex, setActiveIndex] = useState(0);
+
+ // 스크롤 위치로 현재 인덱스 계산
+ const handleScroll = useCallback(() => {
+ const el = scrollRef.current;
+ if (!el || !el.clientWidth) return;
+ const index = Math.round(el.scrollLeft / el.clientWidth);
+ setActiveIndex(Math.min(index, itemCount - 1));
+ }, [itemCount]);
+
+ useEffect(() => {
+ const el = scrollRef.current;
+ if (!el) return;
+ el.addEventListener("scroll", handleScroll, { passive: true });
+ return () => el.removeEventListener("scroll", handleScroll);
+ }, [handleScroll]);
+
+ if (itemCount === 0) {
+ return (
+
+ 아이템 없음
+
+ );
+ }
+
+ return (
+
+ {/* 스크롤 영역 */}
+
+ {Array.from({ length: itemCount }).map((_, i) => (
+
+ {renderItem(i)}
+
+ ))}
+
+
+ {/* 페이지 인디케이터 */}
+ {showIndicator && itemCount > 1 && (
+
+ {Array.from({ length: itemCount }).map((_, i) => (
+
+ )}
+
[];
+ error?: string;
+}
+
+export interface ColumnInfo {
+ name: string;
+ type: string;
+ udtName: string;
+}
+
+// ===== SQL 값 이스케이프 =====
+
+/** SQL 문자열 값 이스케이프 (SQL 인젝션 방지) */
+function escapeSQL(value: unknown): string {
+ if (value === null || value === undefined) return "NULL";
+ if (typeof value === "number") return String(value);
+ if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+ // 문자열: 작은따옴표 이스케이프
+ const str = String(value).replace(/'/g, "''");
+ return `'${str}'`;
+}
+
+// ===== 설정 완료 여부 검증 =====
+
+/**
+ * DataSourceConfig의 필수값이 모두 채워졌는지 검증
+ * 설정 중간 상태(테이블 미선택, 컬럼 미선택 등)에서는
+ * SQL을 생성하지 않도록 사전 차단
+ *
+ * @returns null이면 유효, 문자열이면 미완료 사유
+ */
+function validateDataSourceConfig(config: DataSourceConfig): string | null {
+ // 테이블명 필수
+ if (!config.tableName || !config.tableName.trim()) {
+ return "테이블이 선택되지 않았습니다";
+ }
+
+ // 집계 함수가 설정되었으면 대상 컬럼도 필수
+ // (단, COUNT는 컬럼 없이도 COUNT(*)로 처리 가능)
+ if (config.aggregation) {
+ const aggType = config.aggregation.type?.toLowerCase();
+ const aggCol = config.aggregation.column?.trim();
+ if (aggType !== "count" && !aggCol) {
+ return `${config.aggregation.type.toUpperCase()} 집계에 대상 컬럼이 필요합니다`;
+ }
+ }
+
+ // 조인이 있으면 조인 조건 필수
+ if (config.joins?.length) {
+ for (const join of config.joins) {
+ if (!join.targetTable?.trim()) {
+ return "조인 대상 테이블이 선택되지 않았습니다";
+ }
+ if (!join.on.sourceColumn?.trim() || !join.on.targetColumn?.trim()) {
+ return "조인 조건 컬럼이 설정되지 않았습니다";
+ }
+ }
+ }
+
+ return null;
+}
+
+// ===== 필터 조건 SQL 생성 =====
+
+/** DataSourceFilter 배열을 WHERE 절 조건문으로 변환 */
+function buildWhereClause(filters: DataSourceFilter[]): string {
+ // 컬럼명이 빈 필터는 무시 (설정 중간 상태 방어)
+ const validFilters = filters.filter((f) => f.column?.trim());
+ if (!validFilters.length) return "";
+
+ const conditions = validFilters.map((f) => {
+ const col = sanitizeIdentifier(f.column);
+
+ switch (f.operator) {
+ case "between": {
+ const arr = Array.isArray(f.value) ? f.value : [f.value, f.value];
+ return `${col} BETWEEN ${escapeSQL(arr[0])} AND ${escapeSQL(arr[1])}`;
+ }
+ case "in": {
+ const arr = Array.isArray(f.value) ? f.value : [f.value];
+ const vals = arr.map(escapeSQL).join(", ");
+ return `${col} IN (${vals})`;
+ }
+ case "like":
+ return `${col} LIKE ${escapeSQL(f.value)}`;
+ default:
+ return `${col} ${f.operator} ${escapeSQL(f.value)}`;
+ }
+ });
+
+ return `WHERE ${conditions.join(" AND ")}`;
+}
+
+// ===== 식별자 검증 (테이블명, 컬럼명) =====
+
+/** SQL 식별자(테이블명, 컬럼명)에서 위험한 문자 제거 */
+function sanitizeIdentifier(name: string): string {
+ // 알파벳, 숫자, 언더스코어, 점(스키마.테이블)만 허용
+ return name.replace(/[^a-zA-Z0-9_.]/g, "");
+}
+
+// ===== 집계 SQL 빌더 =====
+
+/**
+ * DataSourceConfig를 SELECT SQL로 변환
+ *
+ * @param config - 데이터 소스 설정
+ * @returns SQL 문자열
+ */
+export function buildAggregationSQL(config: DataSourceConfig): string {
+ const tableName = sanitizeIdentifier(config.tableName);
+
+ // SELECT 절
+ let selectClause: string;
+ if (config.aggregation) {
+ const aggType = config.aggregation.type.toUpperCase();
+ const aggCol = config.aggregation.column?.trim()
+ ? sanitizeIdentifier(config.aggregation.column)
+ : "";
+
+ // COUNT는 컬럼 없으면 COUNT(*), 나머지는 컬럼 필수
+ if (!aggCol) {
+ selectClause = aggType === "COUNT"
+ ? "COUNT(*) as value"
+ : `${aggType}(${tableName}.*) as value`;
+ } else {
+ selectClause = `${aggType}(${aggCol}) as value`;
+ }
+
+ // GROUP BY가 있으면 해당 컬럼도 SELECT에 포함
+ if (config.aggregation.groupBy?.length) {
+ const groupCols = config.aggregation.groupBy.map(sanitizeIdentifier).join(", ");
+ selectClause = `${groupCols}, ${selectClause}`;
+ }
+ } else {
+ selectClause = "*";
+ }
+
+ // FROM 절 (조인 포함 - 조건이 완전한 조인만 적용)
+ let fromClause = tableName;
+ if (config.joins?.length) {
+ for (const join of config.joins) {
+ // 조인 설정이 불완전하면 건너뜀 (설정 중간 상태 방어)
+ if (!join.targetTable?.trim() || !join.on.sourceColumn?.trim() || !join.on.targetColumn?.trim()) {
+ continue;
+ }
+ const joinTable = sanitizeIdentifier(join.targetTable);
+ const joinType = join.joinType.toUpperCase();
+ const srcCol = sanitizeIdentifier(join.on.sourceColumn);
+ const tgtCol = sanitizeIdentifier(join.on.targetColumn);
+ fromClause += ` ${joinType} JOIN ${joinTable} ON ${tableName}.${srcCol} = ${joinTable}.${tgtCol}`;
+ }
+ }
+
+ // WHERE 절
+ const whereClause = config.filters?.length
+ ? buildWhereClause(config.filters)
+ : "";
+
+ // GROUP BY 절
+ let groupByClause = "";
+ if (config.aggregation?.groupBy?.length) {
+ groupByClause = `GROUP BY ${config.aggregation.groupBy.map(sanitizeIdentifier).join(", ")}`;
+ }
+
+ // ORDER BY 절
+ let orderByClause = "";
+ if (config.sort?.length) {
+ const sortCols = config.sort
+ .map((s) => `${sanitizeIdentifier(s.column)} ${s.direction.toUpperCase()}`)
+ .join(", ");
+ orderByClause = `ORDER BY ${sortCols}`;
+ }
+
+ // LIMIT 절
+ const limitClause = config.limit ? `LIMIT ${Math.max(1, Math.floor(config.limit))}` : "";
+
+ return [
+ `SELECT ${selectClause}`,
+ `FROM ${fromClause}`,
+ whereClause,
+ groupByClause,
+ orderByClause,
+ limitClause,
+ ]
+ .filter(Boolean)
+ .join(" ");
+}
+
+// ===== 메인 데이터 페처 =====
+
+/**
+ * DataSourceConfig 기반으로 데이터를 조회하여 집계 결과 반환
+ *
+ * API 선택 전략:
+ * 1. 집계 있음 -> buildAggregationSQL -> dashboardApi.executeQuery()
+ * 2. 조인만 있음 (2개 테이블) -> dataApi.getJoinedData() (추후 지원)
+ * 3. 단순 조회 -> dataApi.getTableData()
+ *
+ * @INFRA-EXTRACT: useDataSource 완성 후 이 함수를 훅으로 교체
+ */
+export async function fetchAggregatedData(
+ config: DataSourceConfig
+): Promise {
+ try {
+ // 설정 완료 여부 검증 (미완료 시 SQL 전송 차단)
+ const validationError = validateDataSourceConfig(config);
+ if (validationError) {
+ return { value: 0, rows: [], error: validationError };
+ }
+
+ // 집계 또는 조인이 있으면 SQL 직접 실행
+ if (config.aggregation || (config.joins && config.joins.length > 0)) {
+ const sql = buildAggregationSQL(config);
+
+ // API 호출: apiClient(axios) 우선, dashboardApi(fetch) 폴백
+ let queryResult: { columns: string[]; rows: any[] };
+ try {
+ // 1차: apiClient (axios 기반, 인증/세션 안정적)
+ const response = await apiClient.post("/dashboards/execute-query", { query: sql });
+ if (response.data?.success && response.data?.data) {
+ queryResult = response.data.data;
+ } else {
+ throw new Error(response.data?.message || "쿼리 실행 실패");
+ }
+ } catch {
+ // 2차: dashboardApi (fetch 기반, 폴백)
+ queryResult = await dashboardApi.executeQuery(sql);
+ }
+
+ if (queryResult.rows.length === 0) {
+ return { value: 0, rows: [] };
+ }
+
+ // PostgreSQL bigint/numeric는 JS에서 문자열로 반환됨
+ // Recharts PieChart 등은 숫자 타입이 필수이므로 변환 처리
+ const processedRows = queryResult.rows.map((row: Record) => {
+ const converted: Record = { ...row };
+ for (const key of Object.keys(converted)) {
+ const val = converted[key];
+ if (typeof val === "string" && val !== "" && !isNaN(Number(val))) {
+ converted[key] = Number(val);
+ }
+ }
+ return converted;
+ });
+
+ // 첫 번째 행의 value 컬럼 추출
+ const firstRow = processedRows[0];
+ const numericValue = parseFloat(String(firstRow.value ?? firstRow[queryResult.columns[0]] ?? 0));
+
+ return {
+ value: Number.isFinite(numericValue) ? numericValue : 0,
+ rows: processedRows,
+ };
+ }
+
+ // 단순 조회
+ const tableResult = await dataApi.getTableData(config.tableName, {
+ page: 1,
+ size: config.limit ?? 100,
+ sortBy: config.sort?.[0]?.column,
+ sortOrder: config.sort?.[0]?.direction,
+ filters: config.filters?.reduce(
+ (acc, f) => {
+ acc[f.column] = f.value;
+ return acc;
+ },
+ {} as Record
+ ),
+ });
+
+ // 단순 조회 시에는 행 수를 value로 사용
+ return {
+ value: tableResult.total ?? tableResult.data.length,
+ rows: tableResult.data,
+ };
+ } catch (err: unknown) {
+ const message = err instanceof Error ? err.message : "데이터 조회 실패";
+ return { value: 0, error: message };
+ }
+}
+
+// ===== 설정 패널용 헬퍼 =====
+
+/**
+ * 테이블 목록 조회 (설정 패널 드롭다운용)
+ * dashboardApi.getTableSchema()로 특정 테이블의 스키마를 가져오되,
+ * 테이블 목록은 별도로 필요하므로 간단히 반환
+ */
+export async function fetchTableColumns(
+ tableName: string
+): Promise {
+ // 1차: tableManagementApi (apiClient/axios 기반, 인증 안정적)
+ try {
+ const response = await tableManagementApi.getTableSchema(tableName);
+ if (response.success && response.data) {
+ const cols = Array.isArray(response.data) ? response.data : [];
+ if (cols.length > 0) {
+ return cols.map((col: any) => ({
+ name: col.columnName || col.column_name || col.name,
+ type: col.dataType || col.data_type || col.type || "unknown",
+ udtName: col.dbType || col.udt_name || col.udtName || "unknown",
+ }));
+ }
+ }
+ } catch {
+ // tableManagementApi 실패 시 dashboardApi로 폴백
+ }
+
+ // 2차: dashboardApi (fetch 기반, 폴백)
+ try {
+ const schema = await dashboardApi.getTableSchema(tableName);
+ return schema.columns.map((col) => ({
+ name: col.name,
+ type: col.type,
+ udtName: col.udtName,
+ }));
+ } catch {
+ return [];
+ }
+}
+
+/**
+ * 테이블 목록 조회 (설정 패널 Combobox용)
+ * tableManagementApi.getTableList() 래핑
+ *
+ * @INFRA-EXTRACT: useDataSource 완성 후 교체 예정
+ */
+export async function fetchTableList(): Promise {
+ try {
+ const response = await tableManagementApi.getTableList();
+ if (response.success && response.data) {
+ return response.data;
+ }
+ return [];
+ } catch {
+ return [];
+ }
+}
diff --git a/frontend/lib/registry/pop-components/pop-dashboard/utils/formula.ts b/frontend/lib/registry/pop-components/pop-dashboard/utils/formula.ts
new file mode 100644
index 00000000..2ed27a98
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-dashboard/utils/formula.ts
@@ -0,0 +1,259 @@
+/**
+ * pop-dashboard 수식 파싱 및 평가 유틸리티
+ *
+ * 보안: eval()/new Function() 사용 금지. 직접 사칙연산 파서 구현.
+ */
+
+import type { FormulaConfig, FormulaDisplayFormat } from "../../types";
+
+// ===== 토큰 타입 =====
+
+type TokenType = "number" | "variable" | "operator" | "lparen" | "rparen";
+
+interface Token {
+ type: TokenType;
+ value: string;
+}
+
+// ===== 토크나이저 =====
+
+/** 수식 문자열을 토큰 배열로 분리 */
+function tokenize(expression: string): Token[] {
+ const tokens: Token[] = [];
+ let i = 0;
+ const expr = expression.replace(/\s+/g, "");
+
+ while (i < expr.length) {
+ const ch = expr[i];
+
+ // 숫자 (정수, 소수)
+ if (/\d/.test(ch) || (ch === "." && i + 1 < expr.length && /\d/.test(expr[i + 1]))) {
+ let num = "";
+ while (i < expr.length && (/\d/.test(expr[i]) || expr[i] === ".")) {
+ num += expr[i];
+ i++;
+ }
+ tokens.push({ type: "number", value: num });
+ continue;
+ }
+
+ // 변수 (A, B, C 등 알파벳)
+ if (/[A-Za-z]/.test(ch)) {
+ let varName = "";
+ while (i < expr.length && /[A-Za-z0-9_]/.test(expr[i])) {
+ varName += expr[i];
+ i++;
+ }
+ tokens.push({ type: "variable", value: varName });
+ continue;
+ }
+
+ // 연산자
+ if ("+-*/".includes(ch)) {
+ tokens.push({ type: "operator", value: ch });
+ i++;
+ continue;
+ }
+
+ // 괄호
+ if (ch === "(") {
+ tokens.push({ type: "lparen", value: "(" });
+ i++;
+ continue;
+ }
+ if (ch === ")") {
+ tokens.push({ type: "rparen", value: ")" });
+ i++;
+ continue;
+ }
+
+ // 알 수 없는 문자는 건너뜀
+ i++;
+ }
+
+ return tokens;
+}
+
+// ===== 재귀 하강 파서 =====
+
+/**
+ * 사칙연산 수식을 안전하게 평가 (재귀 하강 파서)
+ *
+ * 문법:
+ * expr = term (('+' | '-') term)*
+ * term = factor (('*' | '/') factor)*
+ * factor = NUMBER | VARIABLE | '(' expr ')'
+ *
+ * @param expression - 수식 문자열 (예: "A / B * 100")
+ * @param values - 변수값 맵 (예: { A: 1234, B: 5678 })
+ * @returns 계산 결과 (0으로 나누기 시 0 반환)
+ */
+export function evaluateFormula(
+ expression: string,
+ values: Record
+): number {
+ const tokens = tokenize(expression);
+ let pos = 0;
+
+ function peek(): Token | undefined {
+ return tokens[pos];
+ }
+
+ function consume(): Token {
+ return tokens[pos++];
+ }
+
+ // factor = NUMBER | VARIABLE | '(' expr ')'
+ function parseFactor(): number {
+ const token = peek();
+ if (!token) return 0;
+
+ if (token.type === "number") {
+ consume();
+ return parseFloat(token.value);
+ }
+
+ if (token.type === "variable") {
+ consume();
+ return values[token.value] ?? 0;
+ }
+
+ if (token.type === "lparen") {
+ consume(); // '(' 소비
+ const result = parseExpr();
+ if (peek()?.type === "rparen") {
+ consume(); // ')' 소비
+ }
+ return result;
+ }
+
+ // 예상치 못한 토큰
+ consume();
+ return 0;
+ }
+
+ // term = factor (('*' | '/') factor)*
+ function parseTerm(): number {
+ let result = parseFactor();
+ while (peek()?.type === "operator" && (peek()!.value === "*" || peek()!.value === "/")) {
+ const op = consume().value;
+ const right = parseFactor();
+ if (op === "*") {
+ result *= right;
+ } else {
+ // 0으로 나누기 방지
+ result = right === 0 ? 0 : result / right;
+ }
+ }
+ return result;
+ }
+
+ // expr = term (('+' | '-') term)*
+ function parseExpr(): number {
+ let result = parseTerm();
+ while (peek()?.type === "operator" && (peek()!.value === "+" || peek()!.value === "-")) {
+ const op = consume().value;
+ const right = parseTerm();
+ result = op === "+" ? result + right : result - right;
+ }
+ return result;
+ }
+
+ const result = parseExpr();
+ return Number.isFinite(result) ? result : 0;
+}
+
+/**
+ * 수식 결과를 displayFormat에 맞게 포맷팅
+ *
+ * @param config - 수식 설정
+ * @param values - 변수값 맵 (예: { A: 1234, B: 5678 })
+ * @returns 포맷된 문자열
+ */
+export function formatFormulaResult(
+ config: FormulaConfig,
+ values: Record
+): string {
+ const formatMap: Record string> = {
+ value: () => {
+ const result = evaluateFormula(config.expression, values);
+ return formatNumber(result);
+ },
+ fraction: () => {
+ // "1,234 / 5,678" 형태
+ const ids = config.values.map((v) => v.id);
+ if (ids.length >= 2) {
+ return `${formatNumber(values[ids[0]] ?? 0)} / ${formatNumber(values[ids[1]] ?? 0)}`;
+ }
+ return formatNumber(evaluateFormula(config.expression, values));
+ },
+ percent: () => {
+ const result = evaluateFormula(config.expression, values);
+ return `${(result * 100).toFixed(1)}%`;
+ },
+ ratio: () => {
+ // "1,234 : 5,678" 형태
+ const ids = config.values.map((v) => v.id);
+ if (ids.length >= 2) {
+ return `${formatNumber(values[ids[0]] ?? 0)} : ${formatNumber(values[ids[1]] ?? 0)}`;
+ }
+ return formatNumber(evaluateFormula(config.expression, values));
+ },
+ };
+
+ return formatMap[config.displayFormat]();
+}
+
+/**
+ * 수식에 사용된 변수 ID가 모두 존재하는지 검증
+ *
+ * @param expression - 수식 문자열
+ * @param availableIds - 사용 가능한 변수 ID 배열
+ * @returns 유효 여부
+ */
+export function validateExpression(
+ expression: string,
+ availableIds: string[]
+): boolean {
+ const tokens = tokenize(expression);
+ const usedVars = tokens
+ .filter((t) => t.type === "variable")
+ .map((t) => t.value);
+
+ return usedVars.every((v) => availableIds.includes(v));
+}
+
+/**
+ * 큰 숫자 축약 (Container Query 축소 시 사용)
+ *
+ * 1234 -> "1,234"
+ * 12345 -> "1.2만"
+ * 1234567 -> "123.5만"
+ * 123456789 -> "1.2억"
+ */
+export function abbreviateNumber(value: number): string {
+ const abs = Math.abs(value);
+ const sign = value < 0 ? "-" : "";
+
+ if (abs >= 100_000_000) {
+ return `${sign}${(abs / 100_000_000).toFixed(1)}억`;
+ }
+ if (abs >= 10_000) {
+ return `${sign}${(abs / 10_000).toFixed(1)}만`;
+ }
+ return `${sign}${formatNumber(abs)}`;
+}
+
+// ===== 내부 헬퍼 =====
+
+/** 숫자를 천 단위 콤마 포맷 */
+function formatNumber(value: number): string {
+ if (Number.isInteger(value)) {
+ return value.toLocaleString("ko-KR");
+ }
+ // 소수점 이하 최대 2자리
+ return value.toLocaleString("ko-KR", {
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 2,
+ });
+}
diff --git a/frontend/lib/registry/pop-components/pop-text.tsx b/frontend/lib/registry/pop-components/pop-text.tsx
index ac37cac5..969a8a13 100644
--- a/frontend/lib/registry/pop-components/pop-text.tsx
+++ b/frontend/lib/registry/pop-components/pop-text.tsx
@@ -269,10 +269,14 @@ function DateTimePreview({ config }: { config?: PopTextConfig }) {
function DateTimeDisplay({ config }: { config?: PopTextConfig }) {
const [now, setNow] = useState(new Date());
+ // isRealtime 기본값: true (설정 패널 UI와 일치)
+ const isRealtime = config?.isRealtime ?? true;
+
useEffect(() => {
+ if (!isRealtime) return;
const timer = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(timer);
- }, []);
+ }, [isRealtime]);
// 빌더 설정 또는 기존 dateFormat 사용 (하위 호환)
const dateFormat = config?.dateTimeConfig
diff --git a/frontend/lib/registry/pop-components/types.ts b/frontend/lib/registry/pop-components/types.ts
index f743d766..cee5fb06 100644
--- a/frontend/lib/registry/pop-components/types.ts
+++ b/frontend/lib/registry/pop-components/types.ts
@@ -51,6 +51,7 @@ export const FONT_SIZE_CLASSES: Record = {
xl: "text-[64px]",
};
+
export const FONT_WEIGHT_CLASSES: Record = {
normal: "font-normal",
medium: "font-medium",
@@ -86,3 +87,258 @@ export const JUSTIFY_CLASSES: Record = {
center: "justify-center",
right: "justify-end",
};
+
+// =============================================
+// Phase 0 공통 타입 (모든 POP 컴포넌트 공용)
+// =============================================
+
+// ----- 컬럼 바인딩: 컬럼별 읽기/쓰기 제어 -----
+
+export type ColumnMode = "read" | "write" | "readwrite" | "hidden";
+
+export interface ColumnBinding {
+ columnName: string;
+ sourceTable?: string;
+ mode: ColumnMode;
+ label?: string;
+ defaultValue?: unknown;
+}
+
+// ----- 조인 설정: 테이블 간 관계 정의 -----
+
+export type JoinType = "inner" | "left" | "right";
+
+export interface JoinConfig {
+ targetTable: string;
+ joinType: JoinType;
+ on: {
+ sourceColumn: string;
+ targetColumn: string;
+ };
+ columns?: string[];
+}
+
+// ----- 데이터 소스: 테이블 조회/집계 통합 설정 -----
+
+export type AggregationType = "count" | "sum" | "avg" | "min" | "max";
+export type FilterOperator =
+ | "="
+ | "!="
+ | ">"
+ | ">="
+ | "<"
+ | "<="
+ | "like"
+ | "in"
+ | "between";
+
+export interface DataSourceFilter {
+ column: string;
+ operator: FilterOperator;
+ value: unknown; // between이면 [from, to]
+}
+
+export interface SortConfig {
+ column: string;
+ direction: "asc" | "desc";
+}
+
+export interface DataSourceConfig {
+ tableName: string;
+ columns?: ColumnBinding[];
+ filters?: DataSourceFilter[];
+ sort?: SortConfig[];
+ aggregation?: {
+ type: AggregationType;
+ column: string;
+ groupBy?: string[];
+ };
+ joins?: JoinConfig[];
+ refreshInterval?: number; // 초 단위, 0이면 비활성
+ limit?: number;
+}
+
+// ----- 액션 설정: 버튼/링크 클릭 시 동작 정의 -----
+
+export interface PopActionConfig {
+ type:
+ | "navigate"
+ | "modal"
+ | "save"
+ | "delete"
+ | "api"
+ | "event"
+ | "refresh";
+ // navigate
+ targetScreenId?: string;
+ params?: Record;
+ // modal
+ modalScreenId?: string;
+ modalTitle?: string;
+ // save/delete
+ targetTable?: string;
+ confirmMessage?: string;
+ // api
+ apiEndpoint?: string;
+ apiMethod?: "GET" | "POST" | "PUT" | "DELETE";
+ // event
+ eventName?: string;
+ eventPayload?: Record;
+}
+
+// =============================================
+// pop-dashboard 전용 타입
+// =============================================
+
+// ----- 표시 모드 / 서브타입 -----
+
+export type DashboardDisplayMode =
+ | "arrows"
+ | "auto-slide"
+ | "scroll";
+export type DashboardSubType = "kpi-card" | "chart" | "gauge" | "stat-card";
+export type FormulaDisplayFormat = "value" | "fraction" | "percent" | "ratio";
+export type ChartType = "bar" | "pie" | "line";
+export type TrendPeriod = "daily" | "weekly" | "monthly";
+
+// ----- 색상 구간 -----
+
+export interface ColorRange {
+ min: number;
+ max: number;
+ color: string; // hex 또는 Tailwind 색상
+}
+
+// ----- 수식(계산식) 설정 -----
+
+export interface FormulaValue {
+ id: string; // "A", "B" 등
+ dataSource: DataSourceConfig;
+ label: string; // "생산량", "총재고량"
+}
+
+export interface FormulaConfig {
+ enabled: boolean;
+ values: FormulaValue[];
+ expression: string; // "A / B", "A + B", "A / B * 100"
+ displayFormat: FormulaDisplayFormat;
+}
+
+// ----- 아이템 내 요소별 보이기/숨기기 -----
+
+export interface ItemVisibility {
+ showLabel: boolean;
+ showValue: boolean;
+ showUnit: boolean;
+ showTrend: boolean;
+ showSubLabel: boolean;
+ showTarget: boolean;
+}
+
+// ----- 서브타입별 설정 -----
+
+export interface KpiCardConfig {
+ unit?: string; // "EA", "톤", "원"
+ colorRanges?: ColorRange[];
+ showTrend?: boolean;
+ trendPeriod?: TrendPeriod;
+}
+
+export interface ChartItemConfig {
+ chartType: ChartType;
+ xAxisColumn?: string;
+ yAxisColumn?: string;
+ colors?: string[];
+}
+
+export interface GaugeConfig {
+ min: number;
+ max: number;
+ target?: number; // 고정 목표값
+ targetDataSource?: DataSourceConfig; // 동적 목표값
+ colorRanges?: ColorRange[];
+}
+
+export interface StatCategory {
+ label: string; // "대기", "진행", "완료"
+ filter: DataSourceFilter;
+ color?: string;
+}
+
+export interface StatCardConfig {
+ categories: StatCategory[];
+ showLink?: boolean;
+ linkAction?: PopActionConfig;
+}
+
+// ----- 그리드 모드 셀 (엑셀형 분할/병합) -----
+
+export interface DashboardCell {
+ id: string;
+ gridColumn: string; // CSS Grid 값: "1 / 3"
+ gridRow: string; // CSS Grid 값: "1 / 2"
+ itemId: string | null; // null이면 빈 셀
+}
+
+// ----- 대시보드 페이지(슬라이드) -----
+
+/** 대시보드 한 페이지(슬라이드) - 독립적인 그리드 레이아웃 보유 */
+export interface DashboardPage {
+ id: string;
+ label?: string; // 디자이너에서 표시할 라벨 (예: "페이지 1")
+ gridColumns: number; // 이 페이지의 열 수
+ gridRows: number; // 이 페이지의 행 수
+ gridCells: DashboardCell[]; // 이 페이지의 셀 배치 (각 셀에 itemId 지정)
+}
+
+// ----- 대시보드 아이템 스타일 설정 -----
+
+export interface ItemStyleConfig {
+ /** 라벨 텍스트 정렬 (기본: center) */
+ labelAlign?: TextAlign;
+}
+
+// ----- 대시보드 아이템 -----
+
+export interface DashboardItem {
+ id: string;
+ label: string; // pop-system 보이기/숨기기용
+ visible: boolean;
+ subType: DashboardSubType;
+ dataSource: DataSourceConfig;
+
+ // 요소별 보이기/숨기기
+ visibility: ItemVisibility;
+
+ // 계산식 (선택사항)
+ formula?: FormulaConfig;
+
+ // 서브타입별 설정 (subType에 따라 하나만 사용)
+ kpiConfig?: KpiCardConfig;
+ chartConfig?: ChartItemConfig;
+ gaugeConfig?: GaugeConfig;
+ statConfig?: StatCardConfig;
+
+ /** 스타일 설정 (정렬, 글자 크기 3그룹) */
+ itemStyle?: ItemStyleConfig;
+}
+
+// ----- 대시보드 전체 설정 -----
+
+export interface PopDashboardConfig {
+ items: DashboardItem[];
+ pages?: DashboardPage[]; // 페이지 배열 (각 페이지가 독립 그리드 레이아웃)
+ displayMode: DashboardDisplayMode; // 페이지 간 전환 방식
+
+ // 모드별 설정
+ autoSlideInterval?: number; // 초 (기본 5)
+ autoSlideResumeDelay?: number; // 터치 후 재개 대기 초 (기본 3)
+
+ // 공통 스타일
+ showIndicator?: boolean; // 페이지 인디케이터
+ gap?: number; // 아이템 간 간격 px
+ backgroundColor?: string;
+
+ // 데이터 소스 (아이템 공통)
+ dataSource?: DataSourceConfig;
+}