fix(pop-dashboard): 집계 함수 설정 유효성 검증 강화 - 문자열 컬럼에 SUM 적용 방지
팀원 pull 후 대시보드 500 에러 발생 원인 해결: - subType별 허용 집계 함수 제한 (stat-card는 COUNT만) - SUM/AVG 선택 시 숫자 타입 컬럼만 표시 - 비호환 집계 함수 선택 시 컬럼 자동 초기화 - subType 변경 시 비호환 aggregation 자동 전환 (STEP 7.5) - chart 모드 groupBy 미설정 경고 추가 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
SeongHyun Kim
parent
1d93b65060
commit
8c08e7f8e9
|
|
@ -60,6 +60,7 @@ import type {
|
|||
JoinConfig,
|
||||
JoinType,
|
||||
ItemStyleConfig,
|
||||
AggregationType,
|
||||
} from "../types";
|
||||
import {
|
||||
TEXT_ALIGN_LABELS,
|
||||
|
|
@ -132,6 +133,50 @@ const JOIN_TYPE_LABELS: Record<JoinType, string> = {
|
|||
right: "RIGHT JOIN",
|
||||
};
|
||||
|
||||
// ===== 집계 함수 유효성 검증 유틸 =====
|
||||
|
||||
// 아이템 타입별 사용 가능한 집계 함수
|
||||
const SUBTYPE_AGGREGATION_MAP: Record<DashboardSubType, AggregationType[]> = {
|
||||
"kpi-card": ["count", "sum", "avg", "min", "max"],
|
||||
chart: ["count", "sum", "avg", "min", "max"],
|
||||
gauge: ["count", "sum", "avg", "min", "max"],
|
||||
"stat-card": ["count"],
|
||||
};
|
||||
|
||||
// 집계 함수 라벨
|
||||
const AGGREGATION_LABELS: Record<AggregationType, string> = {
|
||||
count: "건수 (COUNT)",
|
||||
sum: "합계 (SUM)",
|
||||
avg: "평균 (AVG)",
|
||||
min: "최소 (MIN)",
|
||||
max: "최대 (MAX)",
|
||||
};
|
||||
|
||||
// 숫자 전용 집계 함수 (숫자 컬럼에만 사용 가능)
|
||||
const NUMERIC_ONLY_AGGREGATIONS: AggregationType[] = ["sum", "avg"];
|
||||
|
||||
// PostgreSQL 숫자 타입 판별용 패턴
|
||||
const NUMERIC_TYPE_PATTERNS = [
|
||||
"int", "integer", "bigint", "smallint",
|
||||
"numeric", "decimal", "real", "double",
|
||||
"float", "serial", "bigserial", "smallserial",
|
||||
"money", "number",
|
||||
];
|
||||
|
||||
/** 컬럼이 숫자 타입인지 판별 */
|
||||
function isNumericColumn(col: ColumnInfo): boolean {
|
||||
const t = (col.type || "").toLowerCase();
|
||||
const u = (col.udtName || "").toLowerCase();
|
||||
return NUMERIC_TYPE_PATTERNS.some(
|
||||
(pattern) => t.includes(pattern) || u.includes(pattern)
|
||||
);
|
||||
}
|
||||
|
||||
/** 현재 집계 함수가 숫자 전용(sum/avg)인지 판별 */
|
||||
function isNumericOnlyAggregation(aggType: string | undefined): boolean {
|
||||
return !!aggType && NUMERIC_ONLY_AGGREGATIONS.includes(aggType as AggregationType);
|
||||
}
|
||||
|
||||
const FILTER_OPERATOR_LABELS: Record<FilterOperator, string> = {
|
||||
"=": "같음 (=)",
|
||||
"!=": "다름 (!=)",
|
||||
|
|
@ -149,9 +194,11 @@ const FILTER_OPERATOR_LABELS: Record<FilterOperator, string> = {
|
|||
function DataSourceEditor({
|
||||
dataSource,
|
||||
onChange,
|
||||
subType,
|
||||
}: {
|
||||
dataSource: DataSourceConfig;
|
||||
onChange: (ds: DataSourceConfig) => void;
|
||||
subType?: DashboardSubType;
|
||||
}) {
|
||||
// 테이블 목록 (Combobox용)
|
||||
const [tables, setTables] = useState<TableInfo[]>([]);
|
||||
|
|
@ -268,7 +315,15 @@ function DataSourceEditor({
|
|||
<Label className="text-xs">집계 함수</Label>
|
||||
<Select
|
||||
value={dataSource.aggregation?.type ?? ""}
|
||||
onValueChange={(val) =>
|
||||
onValueChange={(val) => {
|
||||
// STEP 4: 숫자 전용 집계로 변경 시, 현재 컬럼이 숫자가 아니면 초기화
|
||||
let currentColumn = dataSource.aggregation?.column ?? "";
|
||||
if (val && isNumericOnlyAggregation(val) && currentColumn) {
|
||||
const selectedCol = columns.find((c) => c.name === currentColumn);
|
||||
if (selectedCol && !isNumericColumn(selectedCol)) {
|
||||
currentColumn = "";
|
||||
}
|
||||
}
|
||||
onChange({
|
||||
...dataSource,
|
||||
aggregation: val
|
||||
|
|
@ -276,21 +331,25 @@ function DataSourceEditor({
|
|||
type: val as NonNullable<
|
||||
DataSourceConfig["aggregation"]
|
||||
>["type"],
|
||||
column: dataSource.aggregation?.column ?? "",
|
||||
column: currentColumn,
|
||||
groupBy: dataSource.aggregation?.groupBy,
|
||||
}
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="없음" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="count">건수 (COUNT)</SelectItem>
|
||||
<SelectItem value="sum">합계 (SUM)</SelectItem>
|
||||
<SelectItem value="avg">평균 (AVG)</SelectItem>
|
||||
<SelectItem value="min">최소 (MIN)</SelectItem>
|
||||
<SelectItem value="max">최대 (MAX)</SelectItem>
|
||||
{(subType
|
||||
? SUBTYPE_AGGREGATION_MAP[subType]
|
||||
: (Object.keys(AGGREGATION_LABELS) as AggregationType[])
|
||||
).map((aggType) => (
|
||||
<SelectItem key={aggType} value={aggType}>
|
||||
{AGGREGATION_LABELS[aggType]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
@ -331,10 +390,15 @@ function DataSourceEditor({
|
|||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-center text-xs">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
{isNumericOnlyAggregation(dataSource.aggregation?.type)
|
||||
? "숫자 타입 컬럼이 없습니다."
|
||||
: "컬럼을 찾을 수 없습니다."}
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{columns.map((col) => (
|
||||
{(isNumericOnlyAggregation(dataSource.aggregation?.type)
|
||||
? columns.filter(isNumericColumn)
|
||||
: columns
|
||||
).map((col) => (
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.type}`}
|
||||
|
|
@ -445,6 +509,11 @@ function DataSourceEditor({
|
|||
<p className="mt-0.5 text-[10px] text-muted-foreground">
|
||||
차트에서 X축 카테고리로 사용됩니다
|
||||
</p>
|
||||
{subType === "chart" && !dataSource.aggregation?.groupBy?.length && (
|
||||
<p className="mt-0.5 text-[10px] text-destructive">
|
||||
차트 모드에서는 그룹핑(X축)을 설정해야 의미 있는 차트가 표시됩니다
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -1144,9 +1213,30 @@ function ItemEditor({
|
|||
<Label className="text-xs">타입</Label>
|
||||
<Select
|
||||
value={item.subType}
|
||||
onValueChange={(val) =>
|
||||
onUpdate({ ...item, subType: val as DashboardSubType })
|
||||
}
|
||||
onValueChange={(val) => {
|
||||
const newSubType = val as DashboardSubType;
|
||||
const allowedAggs = SUBTYPE_AGGREGATION_MAP[newSubType];
|
||||
const currentAggType = item.dataSource.aggregation?.type;
|
||||
|
||||
// STEP 7.5: subType 변경 시, 현재 집계 함수가 새 타입에서 허용되지 않으면 자동 전환
|
||||
let newDataSource = item.dataSource;
|
||||
if (currentAggType && !allowedAggs.includes(currentAggType)) {
|
||||
const fallbackAgg = allowedAggs[0]; // 허용되는 첫 번째 집계 함수로 전환
|
||||
newDataSource = {
|
||||
...item.dataSource,
|
||||
aggregation: item.dataSource.aggregation
|
||||
? {
|
||||
...item.dataSource.aggregation,
|
||||
type: fallbackAgg,
|
||||
// count로 전환되면 컬럼 의미 없으므로 초기화
|
||||
column: fallbackAgg === "count" ? "" : item.dataSource.aggregation.column,
|
||||
}
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
onUpdate({ ...item, subType: newSubType, dataSource: newDataSource });
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue />
|
||||
|
|
@ -1212,6 +1302,7 @@ function ItemEditor({
|
|||
<DataSourceEditor
|
||||
dataSource={item.dataSource}
|
||||
onChange={(ds) => onUpdate({ ...item, dataSource: ds })}
|
||||
subType={item.subType}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
630
popdocs/PLAN.md
630
popdocs/PLAN.md
|
|
@ -2,9 +2,9 @@
|
|||
|
||||
---
|
||||
|
||||
## 현재 상태 (2026-02-11)
|
||||
## 현재 상태 (2026-02-12)
|
||||
|
||||
**Phase 0 공통 인프라 (usePopEvent + useDataSource) 구현 완료, ksh-v2-work 병합 + 원격 push 완료. Phase 2 pop-button 설계 진행 중.**
|
||||
**대시보드 집계 함수 설정 유효성 검증 강화 (v2 구현 완료, 브라우저 확인 대기)**
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -143,347 +143,420 @@ v4 관련 파일은 모두 삭제되었습니다.
|
|||
> 새 세션에서 이 섹션만 읽으면 코딩을 시작할 수 있어야 합니다.
|
||||
> 완료되면 다음 기능의 계획으로 **교체**합니다.
|
||||
|
||||
### 대상: Phase 0 공통 인프라 (usePopEvent + useDataSource 훅)
|
||||
### 대상: 대시보드 집계 함수 설정 유효성 검증 강화 (v2 - 시뮬레이션 검증 완료)
|
||||
|
||||
#### 배경 (2026-02-11)
|
||||
#### 배경 (2026-02-12)
|
||||
|
||||
모든 데이터 연동 POP 컴포넌트(pop-button, pop-table, pop-search 등)가 공유하는 2개 핵심 훅을 구현한다.
|
||||
팀원이 브랜치를 pull 받은 뒤 대시보드에서 500 에러가 발생.
|
||||
원인: `batch_mappings` 테이블의 `to_table_name`(문자열) 컬럼에 `SUM` 집계를 설정한 대시보드 아이템이 존재.
|
||||
PostgreSQL이 `SELECT SUM(to_table_name)` 실행 시 `function sum(character varying) does not exist` 에러 반환.
|
||||
|
||||
- **usePopEvent**: 같은 화면(screenId) 안에서 컴포넌트 간 이벤트 통신 (publish/subscribe)
|
||||
- **useDataSource**: DB 테이블 CRUD 통합 (조회/생성/수정/삭제)
|
||||
**근본 원인**: 설정 UI(`PopDashboardConfig.tsx`)에서 아이템 타입(subType)에 관계없이 동일한 5개 집계 함수를 모두 보여주고, 컬럼 선택에서도 타입 구분 없이 모든 컬럼이 표시됨.
|
||||
|
||||
**핵심 원칙**: 새로 만드는 것이 아니라, 기존 코드를 공통화하는 작업이다.
|
||||
#### 시뮬레이션 결과 (2026-02-12)
|
||||
|
||||
- `useDataSource`는 대시보드의 `dataFetcher.ts` 조회 로직 + 기존 `dataApi` CRUD를 훅으로 래핑
|
||||
- `usePopEvent`는 신규 구현 (Map 기반 이벤트 버스)
|
||||
- 대시보드는 **이번에 교체하지 않는다** (훅 안정화 후 별도 교체)
|
||||
8개 시나리오로 가상 코딩 → 데이터 흐름 추적 수행. 원래 7단계 계획에서 **1건의 심각한 결함 발견**:
|
||||
|
||||
#### 결정사항 (2026-02-11)
|
||||
> **chart(sum) → stat-card로 subType 변경 시**, Select UI에서 "sum"이 목록에 없어도
|
||||
> 내부 value는 "sum"으로 유지되어 SQL 생성 시 그대로 적용됨.
|
||||
|
||||
| 항목 | 결정 | 이유 |
|
||||
|------|------|------|
|
||||
| usePopEvent 범위 | 같은 screenId 안에서만 통신 | 화면 간 의존성 방지 |
|
||||
| usePopEvent 모달 | 같은 screenId면 모달 안 컴포넌트도 통신 가능 | 모달은 별도 화면이 아님 |
|
||||
| useDataSource 조회 분기 | 집계/조인이면 SQL 빌더 + executeQuery, 단순이면 dataApi.getTableData | 대시보드 dataFetcher.ts와 동일 전략 |
|
||||
| useDataSource CRUD | dataApi.createRecord/updateRecord/deleteRecord 래핑 | 백엔드 API 이미 완성됨 |
|
||||
| 대시보드 교체 시점 | 이번에 하지 않음, 훅 안정화 후 별도 작업 | 안정성 우선 |
|
||||
| SQL 빌더 위치 | dataFetcher.ts에서 추출하여 별도 유틸로 분리 | 훅과 대시보드 모두 사용 |
|
||||
| 이벤트 버스 저장소 | 전역 Map (screenId -> EventEmitter) | React 외부에서도 접근 가능, GC 관리 용이 |
|
||||
이를 해결하기 위해 **STEP 7.5 추가**: ItemEditor의 subType 변경 핸들러에서 비호환 aggregation 자동 전환.
|
||||
|
||||
---
|
||||
|
||||
#### 구현 순서 (의존성 기반)
|
||||
#### 수정 대상
|
||||
|
||||
| 순서 | 파일 | 작업 | 의존성 | 상태 |
|
||||
|------|------|------|--------|------|
|
||||
| 1 | `hooks/pop/usePopEvent.ts` | 이벤트 버스 훅 (신규) | 없음 | **완료** |
|
||||
| 2 | `hooks/pop/popSqlBuilder.ts` | SQL 빌더 유틸 분리 (dataFetcher.ts에서 추출) | 없음 | **완료** |
|
||||
| 3 | `hooks/pop/useDataSource.ts` | 데이터 CRUD 훅 (신규) | 2 | **완료** |
|
||||
| 4 | `hooks/pop/index.ts` | 배럴 파일 (re-export) | 1, 3 | **완료** |
|
||||
| 파일 | 경로 | 변경 유형 |
|
||||
|------|------|-----------|
|
||||
| PopDashboardConfig.tsx | `frontend/lib/registry/pop-components/pop-dashboard/PopDashboardConfig.tsx` | 수정 (신규 파일 없음) |
|
||||
|
||||
---
|
||||
|
||||
#### STEP 1: `usePopEvent.ts` (신규 생성)
|
||||
#### 구현 순서 (의존성 기반, 8단계)
|
||||
|
||||
**파일**: `frontend/hooks/pop/usePopEvent.ts`
|
||||
| 순서 | 작업 | 수정 위치 (원본 라인) | 의존성 | 상태 |
|
||||
|------|------|---------------------|--------|------|
|
||||
| 1 | import에 `AggregationType` 추가 + 유틸 상수/함수 6개 추가 | 라인 48~63, 라인 133 뒤 | 없음 | 완료 |
|
||||
| 2 | `DataSourceEditor` props에 `subType` 추가 | 라인 149~155 | 없음 | 완료 |
|
||||
| 3 | 집계 함수 Select를 동적 생성으로 교체 | 라인 288~294 | 1, 2 | 완료 |
|
||||
| 4 | 집계 함수 변경 시 컬럼 자동 초기화 + groupBy 보존 | 라인 271~283 | 1 | 완료 |
|
||||
| 5 | 대상 컬럼 Combobox 숫자 필터링 + 안내 메시지 | 라인 333~366 | 1 | 완료 |
|
||||
| 6 | chart 모드 groupBy 미설정 경고 | 라인 445~447 | 2 | 완료 |
|
||||
| 7 | `DataSourceEditor` 호출부에 `subType` 전달 (라인 1212) | 라인 1212~1215 | 2 | 완료 |
|
||||
| **7.5** | **ItemEditor subType 변경 시 비호환 aggregation 자동 전환** | **라인 1147~1148** | **1** | **완료** |
|
||||
|
||||
**역할**: 같은 화면(screenId) 안에서 컴포넌트 간 이벤트 통신
|
||||
---
|
||||
|
||||
**핵심 구조**:
|
||||
#### STEP 1: import 추가 + 유틸 상수/함수
|
||||
|
||||
```
|
||||
전역 저장소 (React 외부)
|
||||
screenBuses: Map<string, Map<string, Set<callback>>>
|
||||
│
|
||||
└── screenId: "S001"
|
||||
├── "supplier-selected" → [콜백A, 콜백B]
|
||||
├── "data-saved" → [콜백C]
|
||||
└── sharedData: Map<string, unknown>
|
||||
**1-A. import 추가** (라인 48~63)
|
||||
|
||||
sharedDataStore: Map<string, Map<string, unknown>>
|
||||
│
|
||||
└── screenId: "S001"
|
||||
├── "selectedSupplier" → { id: "SUP-001", name: "삼성" }
|
||||
└── "inputQuantity" → 50
|
||||
```
|
||||
|
||||
**외부 API (훅이 반환하는 것)**:
|
||||
현재:
|
||||
|
||||
```typescript
|
||||
function usePopEvent(screenId: string) {
|
||||
return {
|
||||
publish, // (eventName, payload) => void
|
||||
subscribe, // (eventName, callback) => unsubscribe 함수
|
||||
getSharedData, // (key) => unknown
|
||||
setSharedData, // (key, value) => void
|
||||
};
|
||||
}
|
||||
import type {
|
||||
PopDashboardConfig,
|
||||
DashboardItem,
|
||||
DashboardSubType,
|
||||
DashboardDisplayMode,
|
||||
DataSourceConfig,
|
||||
DataSourceFilter,
|
||||
FilterOperator,
|
||||
FormulaConfig,
|
||||
ItemVisibility,
|
||||
DashboardCell,
|
||||
DashboardPage,
|
||||
JoinConfig,
|
||||
JoinType,
|
||||
ItemStyleConfig,
|
||||
} from "../types";
|
||||
```
|
||||
|
||||
**상세 구현 명세**:
|
||||
|
||||
1. **전역 Map 저장소** (모듈 스코프, React 외부)
|
||||
- `screenBuses: Map<string, Map<string, Set<Function>>>` - 이벤트 리스너
|
||||
- `sharedDataStore: Map<string, Map<string, unknown>>` - 공유 데이터
|
||||
|
||||
2. **`publish(eventName, payload)`**
|
||||
- 해당 screenId의 eventName에 등록된 모든 콜백을 순회하며 payload 전달
|
||||
- 등록된 리스너가 없으면 아무 일도 안 함 (에러 아님)
|
||||
|
||||
3. **`subscribe(eventName, callback)`**
|
||||
- 해당 screenId의 eventName에 콜백 등록
|
||||
- **반환값**: unsubscribe 함수
|
||||
- **useEffect 내부에서 호출되어야 함** (cleanup으로 unsubscribe)
|
||||
|
||||
4. **`getSharedData(key)`** / **`setSharedData(key, value)`**
|
||||
- screenId별 격리된 key-value 저장소
|
||||
- publish/subscribe는 "이벤트"(일회성), sharedData는 "상태"(지속)
|
||||
- 용도: 버튼이 저장할 때 다른 컴포넌트들의 현재 값을 수집
|
||||
|
||||
5. **`cleanupScreen(screenId)`** (내부 유틸)
|
||||
- 화면 언마운트 시 해당 screenId의 모든 리스너 + sharedData 정리
|
||||
- 메모리 누수 방지
|
||||
|
||||
**사용 예시**:
|
||||
변경: `ItemStyleConfig,` 뒤에 `AggregationType,` 추가:
|
||||
|
||||
```typescript
|
||||
// 거래처 선택 버튼
|
||||
const { publish, setSharedData } = usePopEvent("S001");
|
||||
import type {
|
||||
PopDashboardConfig,
|
||||
DashboardItem,
|
||||
DashboardSubType,
|
||||
DashboardDisplayMode,
|
||||
DataSourceConfig,
|
||||
DataSourceFilter,
|
||||
FilterOperator,
|
||||
FormulaConfig,
|
||||
ItemVisibility,
|
||||
DashboardCell,
|
||||
DashboardPage,
|
||||
JoinConfig,
|
||||
JoinType,
|
||||
ItemStyleConfig,
|
||||
AggregationType,
|
||||
} from "../types";
|
||||
```
|
||||
|
||||
const onSelect = (supplier) => {
|
||||
setSharedData("selectedSupplier", supplier); // 상태 저장
|
||||
publish("supplier-selected", { supplierId: supplier.id }); // 이벤트 발행
|
||||
**1-B. 유틸 상수/함수 추가** (라인 133 `};` 직후, 라인 135 `const FILTER_OPERATOR_LABELS` 직전)
|
||||
|
||||
```typescript
|
||||
// ===== 집계 함수 유효성 검증 유틸 =====
|
||||
|
||||
// 아이템 타입별 사용 가능한 집계 함수
|
||||
const SUBTYPE_AGGREGATION_MAP: Record<DashboardSubType, AggregationType[]> = {
|
||||
"kpi-card": ["count", "sum", "avg", "min", "max"],
|
||||
chart: ["count", "sum", "avg", "min", "max"],
|
||||
gauge: ["count", "sum", "avg", "min", "max"],
|
||||
"stat-card": ["count"],
|
||||
};
|
||||
|
||||
// 발주 테이블 (다른 컴포넌트)
|
||||
const { subscribe } = usePopEvent("S001");
|
||||
|
||||
useEffect(() => {
|
||||
const unsub = subscribe("supplier-selected", (payload) => {
|
||||
refetch({ filters: { supplier_id: payload.supplierId } });
|
||||
});
|
||||
return unsub; // cleanup
|
||||
}, []);
|
||||
|
||||
// 저장 버튼 (다른 컴포넌트)
|
||||
const { getSharedData } = usePopEvent("S001");
|
||||
|
||||
const handleSave = () => {
|
||||
const supplier = getSharedData("selectedSupplier"); // 다른 컴포넌트가 저장한 값 수집
|
||||
const quantity = getSharedData("inputQuantity");
|
||||
save({ supplier_id: supplier.id, quantity });
|
||||
// 집계 함수 라벨
|
||||
const AGGREGATION_LABELS: Record<AggregationType, string> = {
|
||||
count: "건수 (COUNT)",
|
||||
sum: "합계 (SUM)",
|
||||
avg: "평균 (AVG)",
|
||||
min: "최소 (MIN)",
|
||||
max: "최대 (MAX)",
|
||||
};
|
||||
|
||||
// 숫자 전용 집계 함수 (숫자 컬럼에만 사용 가능)
|
||||
const NUMERIC_ONLY_AGGREGATIONS: AggregationType[] = ["sum", "avg"];
|
||||
|
||||
// PostgreSQL 숫자 타입 판별용 패턴
|
||||
const NUMERIC_TYPE_PATTERNS = [
|
||||
"int", "integer", "bigint", "smallint",
|
||||
"numeric", "decimal", "real", "double",
|
||||
"float", "serial", "bigserial", "smallserial",
|
||||
"money", "number",
|
||||
];
|
||||
|
||||
/** 컬럼이 숫자 타입인지 판별 */
|
||||
function isNumericColumn(col: ColumnInfo): boolean {
|
||||
const t = (col.type || "").toLowerCase();
|
||||
const u = (col.udtName || "").toLowerCase();
|
||||
return NUMERIC_TYPE_PATTERNS.some(
|
||||
(pattern) => t.includes(pattern) || u.includes(pattern)
|
||||
);
|
||||
}
|
||||
|
||||
/** 현재 집계 함수가 숫자 전용(sum/avg)인지 판별 */
|
||||
function isNumericOnlyAggregation(aggType: string | undefined): boolean {
|
||||
return !!aggType && NUMERIC_ONLY_AGGREGATIONS.includes(aggType as AggregationType);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### STEP 2: `popSqlBuilder.ts` (신규 생성 - dataFetcher.ts에서 추출)
|
||||
#### STEP 2: `DataSourceEditor` props에 `subType` 추가
|
||||
|
||||
**파일**: `frontend/hooks/pop/popSqlBuilder.ts`
|
||||
라인 149~155 교체:
|
||||
|
||||
**역할**: DataSourceConfig를 SQL 문자열로 변환하는 순수 유틸리티
|
||||
```typescript
|
||||
// 현재
|
||||
function DataSourceEditor({
|
||||
dataSource,
|
||||
onChange,
|
||||
}: {
|
||||
dataSource: DataSourceConfig;
|
||||
onChange: (ds: DataSourceConfig) => void;
|
||||
}) {
|
||||
|
||||
**기존 dataFetcher.ts에서 그대로 추출할 함수 5개** (로직 변경 없음):
|
||||
// 변경
|
||||
function DataSourceEditor({
|
||||
dataSource,
|
||||
onChange,
|
||||
subType,
|
||||
}: {
|
||||
dataSource: DataSourceConfig;
|
||||
onChange: (ds: DataSourceConfig) => void;
|
||||
subType?: DashboardSubType;
|
||||
}) {
|
||||
```
|
||||
|
||||
| 함수 | 원본 위치 (dataFetcher.ts) | 역할 |
|
||||
|------|--------------------------|------|
|
||||
| `escapeSQL(value)` | 라인 41~48 | SQL 값 이스케이프 |
|
||||
| `sanitizeIdentifier(name)` | 라인 124~127 | 테이블/컬럼명 위험 문자 제거 |
|
||||
| `validateDataSourceConfig(config)` | 라인 59~88 | 설정 완료 여부 검증 |
|
||||
| `buildWhereClause(filters)` | 라인 93~118 | 필터 -> WHERE 절 변환 |
|
||||
| `buildAggregationSQL(config)` | 라인 137~215 | DataSourceConfig -> SELECT SQL 변환 |
|
||||
|
||||
**export 대상**: `validateDataSourceConfig`, `buildAggregationSQL` (나머지는 내부 함수)
|
||||
|
||||
**주의**: dataFetcher.ts는 **수정하지 않는다**. 대시보드가 계속 사용 중이므로, 복사만 한다. 대시보드 교체 시점에 dataFetcher.ts에서 이 파일을 import하도록 변경할 예정.
|
||||
`subType`은 optional. FormulaEditor 내부 호출(라인 969)에서는 미전달 → undefined → 5개 전부 표시.
|
||||
|
||||
---
|
||||
|
||||
#### STEP 3: `useDataSource.ts` (신규 생성)
|
||||
#### STEP 3: 집계 함수 Select 동적 생성
|
||||
|
||||
**파일**: `frontend/hooks/pop/useDataSource.ts`
|
||||
라인 288~294 교체:
|
||||
|
||||
**역할**: DataSourceConfig 기반 DB 테이블 CRUD 통합 훅
|
||||
```tsx
|
||||
// 현재
|
||||
<SelectContent>
|
||||
<SelectItem value="count">건수 (COUNT)</SelectItem>
|
||||
<SelectItem value="sum">합계 (SUM)</SelectItem>
|
||||
<SelectItem value="avg">평균 (AVG)</SelectItem>
|
||||
<SelectItem value="min">최소 (MIN)</SelectItem>
|
||||
<SelectItem value="max">최대 (MAX)</SelectItem>
|
||||
</SelectContent>
|
||||
|
||||
**내부 의존성**:
|
||||
- `popSqlBuilder.ts` - SQL 빌더 (STEP 2)
|
||||
- `@/lib/api/data` - dataApi (기존, 조회/생성/수정/삭제)
|
||||
- `@/lib/api/dashboard` - dashboardApi (기존, SQL 직접 실행)
|
||||
- `@/lib/api/client` - apiClient (기존, axios 기반)
|
||||
// 변경
|
||||
<SelectContent>
|
||||
{(subType
|
||||
? SUBTYPE_AGGREGATION_MAP[subType]
|
||||
: (Object.keys(AGGREGATION_LABELS) as AggregationType[])
|
||||
).map((aggType) => (
|
||||
<SelectItem key={aggType} value={aggType}>
|
||||
{AGGREGATION_LABELS[aggType]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
```
|
||||
|
||||
**외부 API (훅이 반환하는 것)**:
|
||||
---
|
||||
|
||||
#### STEP 4: 집계 함수 변경 시 컬럼 자동 초기화 + groupBy 보존
|
||||
|
||||
라인 271~283 교체 (onValueChange 핸들러 전체):
|
||||
|
||||
```typescript
|
||||
function useDataSource(config: DataSourceConfig) {
|
||||
return {
|
||||
// 상태
|
||||
data: { rows: [], value: 0, total: 0 },
|
||||
loading: boolean,
|
||||
error: string | null,
|
||||
|
||||
// 조회
|
||||
refetch: (overrideFilters?) => Promise<void>,
|
||||
|
||||
// 쓰기
|
||||
save: (record) => Promise<MutationResult>,
|
||||
update: (id, record) => Promise<MutationResult>,
|
||||
remove: (id) => Promise<MutationResult>,
|
||||
};
|
||||
// 현재
|
||||
onValueChange={(val) =>
|
||||
onChange({
|
||||
...dataSource,
|
||||
aggregation: val
|
||||
? {
|
||||
type: val as NonNullable<
|
||||
DataSourceConfig["aggregation"]
|
||||
>["type"],
|
||||
column: dataSource.aggregation?.column ?? "",
|
||||
}
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
**MutationResult 타입** (신규):
|
||||
|
||||
```typescript
|
||||
interface MutationResult {
|
||||
success: boolean;
|
||||
data?: any;
|
||||
error?: string;
|
||||
}
|
||||
```
|
||||
|
||||
**조회 분기 로직 (핵심)**:
|
||||
|
||||
```
|
||||
config에 aggregation 또는 joins가 있는가?
|
||||
├── YES → buildAggregationSQL(config) → apiClient.post("/dashboards/execute-query")
|
||||
│ (대시보드와 동일한 경로, SQL 직접 실행)
|
||||
│ 실패 시 → dashboardApi.executeQuery() 폴백
|
||||
│
|
||||
└── NO → dataApi.getTableData(tableName, { page, size, filters, sortBy, sortOrder })
|
||||
(단순 테이블 조회)
|
||||
```
|
||||
|
||||
**CRUD 메서드 구현**:
|
||||
|
||||
| 메서드 | 내부 호출 | 비고 |
|
||||
|--------|----------|------|
|
||||
| `save(record)` | `dataApi.createRecord(config.tableName, record)` | company_code 자동 추가는 백엔드가 처리 |
|
||||
| `update(id, record)` | `dataApi.updateRecord(config.tableName, id, record)` | |
|
||||
| `remove(id)` | `dataApi.deleteRecord(config.tableName, id)` | 복합키 객체도 지원 |
|
||||
|
||||
**자동 새로고침**:
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
if (config.tableName) refetch();
|
||||
|
||||
if (config.refreshInterval && config.refreshInterval > 0) {
|
||||
const sec = Math.max(5, config.refreshInterval); // 최소 5초
|
||||
const timer = setInterval(refetch, sec * 1000);
|
||||
return () => clearInterval(timer);
|
||||
// 변경
|
||||
onValueChange={(val) => {
|
||||
// 숫자 전용 집계로 변경 시, 기존 컬럼이 숫자가 아니면 초기화
|
||||
let currentColumn = dataSource.aggregation?.column ?? "";
|
||||
if (val && isNumericOnlyAggregation(val) && currentColumn) {
|
||||
const selectedCol = columns.find((c) => c.name === currentColumn);
|
||||
if (selectedCol && !isNumericColumn(selectedCol)) {
|
||||
currentColumn = "";
|
||||
}
|
||||
}
|
||||
}, [config.tableName, config.refreshInterval]);
|
||||
onChange({
|
||||
...dataSource,
|
||||
aggregation: val
|
||||
? {
|
||||
type: val as NonNullable<
|
||||
DataSourceConfig["aggregation"]
|
||||
>["type"],
|
||||
column: currentColumn,
|
||||
groupBy: dataSource.aggregation?.groupBy,
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
}}
|
||||
```
|
||||
|
||||
**refetch 오버라이드 필터**:
|
||||
기존 대비 변경점 2가지:
|
||||
1. 숫자 전용 집계 + 문자열 컬럼 → `currentColumn = ""`
|
||||
2. `groupBy` 보존 (기존 코드에서 누락되던 버그 수정)
|
||||
|
||||
```typescript
|
||||
// 기본 조회
|
||||
refetch();
|
||||
---
|
||||
|
||||
// 필터 추가하여 조회 (usePopEvent와 연동 시)
|
||||
refetch({ filters: { supplier_id: "SUP-001" } });
|
||||
#### STEP 5: 대상 컬럼 Combobox 필터링
|
||||
|
||||
**5-A. CommandEmpty 메시지 교체** (라인 333~335):
|
||||
|
||||
```tsx
|
||||
// 현재
|
||||
<CommandEmpty className="py-2 text-center text-xs">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
|
||||
// 변경
|
||||
<CommandEmpty className="py-2 text-center text-xs">
|
||||
{isNumericOnlyAggregation(dataSource.aggregation?.type)
|
||||
? "숫자 타입 컬럼이 없습니다."
|
||||
: "컬럼을 찾을 수 없습니다."}
|
||||
</CommandEmpty>
|
||||
```
|
||||
|
||||
내부적으로 `overrideFilters`가 있으면 `config.filters`에 병합하여 조회한다.
|
||||
**5-B. columns.map을 필터링 후 map으로 교체** (라인 337):
|
||||
|
||||
**사용 예시**:
|
||||
```tsx
|
||||
// 현재
|
||||
{columns.map((col) => (
|
||||
|
||||
```typescript
|
||||
// 대시보드 스타일 (집계)
|
||||
const { data, loading } = useDataSource({
|
||||
tableName: "sales_order",
|
||||
aggregation: { type: "sum", column: "amount", groupBy: ["category"] },
|
||||
refreshInterval: 30,
|
||||
});
|
||||
// data.rows → [{ category: "A", value: 1500 }, ...]
|
||||
// data.value → 첫 번째 행의 value
|
||||
// 변경
|
||||
{(isNumericOnlyAggregation(dataSource.aggregation?.type)
|
||||
? columns.filter(isNumericColumn)
|
||||
: columns
|
||||
).map((col) => (
|
||||
```
|
||||
|
||||
// 테이블 스타일 (목록)
|
||||
const { data, refetch } = useDataSource({
|
||||
tableName: "purchase_order",
|
||||
sort: [{ column: "created_at", direction: "desc" }],
|
||||
limit: 20,
|
||||
});
|
||||
// data.rows → [{ id: 1, item_name: "볼트", ... }, ...]
|
||||
// data.total → 전체 행 수
|
||||
나머지 CommandItem 내부는 변경 없음.
|
||||
|
||||
// 버튼 스타일 (저장만)
|
||||
const { save, remove, loading } = useDataSource({
|
||||
tableName: "inbound_record",
|
||||
});
|
||||
const result = await save({ supplier_id: "SUP-001", quantity: 50 });
|
||||
// result.success → true/false
|
||||
---
|
||||
|
||||
#### STEP 6: chart 모드 groupBy 경고
|
||||
|
||||
라인 445~447 뒤에 추가 (기존 `<p>` 태그는 유지):
|
||||
|
||||
```tsx
|
||||
// 기존 유지
|
||||
<p className="mt-0.5 text-[10px] text-muted-foreground">
|
||||
차트에서 X축 카테고리로 사용됩니다
|
||||
</p>
|
||||
|
||||
// 아래에 추가
|
||||
{subType === "chart" && !dataSource.aggregation?.groupBy?.length && (
|
||||
<p className="mt-0.5 text-[10px] text-destructive">
|
||||
차트 모드에서는 그룹핑(X축)을 설정해야 의미 있는 차트가 표시됩니다
|
||||
</p>
|
||||
)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### STEP 4: `index.ts` (신규 생성 - 배럴 파일)
|
||||
#### STEP 7: `DataSourceEditor` 호출부에 `subType` 전달
|
||||
|
||||
**파일**: `frontend/hooks/pop/index.ts`
|
||||
**라인 1212~1215** (ItemEditor 내부, 단일 집계 모드):
|
||||
|
||||
```typescript
|
||||
export { usePopEvent, cleanupScreen } from "./usePopEvent";
|
||||
export { useDataSource } from "./useDataSource";
|
||||
export type { MutationResult } from "./useDataSource";
|
||||
export { buildAggregationSQL, validateDataSourceConfig } from "./popSqlBuilder";
|
||||
```tsx
|
||||
// 현재
|
||||
<DataSourceEditor
|
||||
dataSource={item.dataSource}
|
||||
onChange={(ds) => onUpdate({ ...item, dataSource: ds })}
|
||||
/>
|
||||
|
||||
// 변경
|
||||
<DataSourceEditor
|
||||
dataSource={item.dataSource}
|
||||
onChange={(ds) => onUpdate({ ...item, dataSource: ds })}
|
||||
subType={item.subType}
|
||||
/>
|
||||
```
|
||||
|
||||
외부에서 사용할 때: `import { usePopEvent, useDataSource } from "@/hooks/pop";`
|
||||
**라인 969** (FormulaEditor 내부): **수정하지 않음** (subType=undefined → 모든 집계 표시).
|
||||
|
||||
---
|
||||
|
||||
#### 사전 충돌 검사 결과 (2026-02-11)
|
||||
#### STEP 7.5: ItemEditor subType 변경 시 비호환 aggregation 자동 전환
|
||||
|
||||
> **시뮬레이션에서 발견**: chart(aggregation=sum) → stat-card로 subType 변경 시,
|
||||
> Select 목록에 "sum"이 없지만 내부 value는 "sum" 유지 → SQL 생성 시 SUM 실행됨.
|
||||
> radix Select는 목록에 없는 value를 자동으로 초기화하지 않음.
|
||||
|
||||
**라인 1147~1148** (ItemEditor 내부, subType Select onValueChange):
|
||||
|
||||
```typescript
|
||||
// 현재
|
||||
onValueChange={(val) =>
|
||||
onUpdate({ ...item, subType: val as DashboardSubType })
|
||||
}
|
||||
|
||||
// 변경
|
||||
onValueChange={(val) => {
|
||||
const newSubType = val as DashboardSubType;
|
||||
const allowedAggs = SUBTYPE_AGGREGATION_MAP[newSubType];
|
||||
const currentAggType = item.dataSource.aggregation?.type;
|
||||
// 새 subType에서 현재 집계 함수가 허용 안 되면 첫 번째 허용 함수로 전환
|
||||
let newDataSource = item.dataSource;
|
||||
if (currentAggType && !allowedAggs.includes(currentAggType)) {
|
||||
newDataSource = {
|
||||
...item.dataSource,
|
||||
aggregation: item.dataSource.aggregation
|
||||
? {
|
||||
...item.dataSource.aggregation,
|
||||
type: allowedAggs[0],
|
||||
column: allowedAggs[0] === "count" ? "" : item.dataSource.aggregation.column,
|
||||
}
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
onUpdate({ ...item, subType: newSubType, dataSource: newDataSource });
|
||||
}}
|
||||
```
|
||||
|
||||
핵심: `allowedAggs[0]`이 "count"면 column도 빈 문자열로 (count는 column 불필요).
|
||||
|
||||
---
|
||||
|
||||
#### 사전 충돌 검사 결과 (2026-02-12)
|
||||
|
||||
| 이름 | 유형 | 검색 범위 | 검색 결과 | 판정 |
|
||||
|------|------|-----------|-----------|------|
|
||||
| `usePopEvent` | 훅 이름 | frontend 전체 | **주석 2건** (PopDashboardComponent.tsx 라인 10, `@INFRA-EXTRACT` 교체 예정 주석) | **충돌 없음** (실제 코드 아님) |
|
||||
| `useDataSource` | 훅 이름 | frontend 전체 | **주석 4건** (dataFetcher.ts 라인 4,227,355 + PopDashboardComponent.tsx 라인 9, 모두 `@INFRA-EXTRACT` 주석) | **충돌 없음** (실제 코드 아님) |
|
||||
| `PopEventBus` | 클래스명 | frontend 전체 | **1건** (PopDashboardComponent.tsx 라인 10, `@INFRA-EXTRACT` 주석 내) | **충돌 없음** (주석) |
|
||||
| `MutationResult` | 타입명 | frontend 전체 | **0건** | **충돌 없음** |
|
||||
| `popSqlBuilder` | 파일명 | frontend 전체 | **0건** | **충돌 없음** |
|
||||
| `cleanupScreen` | 함수명 | frontend 전체 | **0건** | **충돌 없음** |
|
||||
| `screenBuses` | 변수명 | frontend 전체 | **0건** | **충돌 없음** |
|
||||
| `sharedDataStore` | 변수명 | frontend 전체 | **0건** | **충돌 없음** |
|
||||
| `buildAggregationSQL` | 함수명 | frontend 전체 | **2건** (dataFetcher.ts 정의 + PopDashboardComponent에서 import) | **충돌 주의**: 동일 이름을 popSqlBuilder.ts에서 재정의. 대시보드는 여전히 dataFetcher.ts 것을 사용하므로 런타임 충돌 없음. 향후 대시보드 교체 시 import 경로만 변경. |
|
||||
| `validateDataSourceConfig` | 함수명 | frontend 전체 | **1건** (dataFetcher.ts 정의) | 위와 동일 |
|
||||
| `escapeSQL` | 함수명 | frontend 전체 | **1건** (dataFetcher.ts 내부 함수) | **충돌 없음** (export 안 됨) |
|
||||
| `sanitizeIdentifier` | 함수명 | frontend 전체 | **1건** (dataFetcher.ts 내부 함수) | **충돌 없음** (export 안 됨) |
|
||||
| `AggregatedResult` | 타입명 | frontend 전체 | **1건** (dataFetcher.ts 정의) | **충돌 주의**: useDataSource 내부에서 동일 타입 사용. types.ts 정의를 공유하므로 별도 재정의 불필요. |
|
||||
| `SUBTYPE_AGGREGATION_MAP` | 상수 | frontend 전체 | 0건 | **충돌 없음** |
|
||||
| `AGGREGATION_LABELS` | 상수 | frontend 전체 | 0건 | **충돌 없음** |
|
||||
| `NUMERIC_ONLY_AGGREGATIONS` | 상수 | frontend 전체 | 0건 | **충돌 없음** |
|
||||
| `NUMERIC_TYPE_PATTERNS` | 상수 | frontend 전체 | 0건 | **충돌 없음** |
|
||||
| `isNumericColumn` | 함수 | frontend 전체 | 0건 | **충돌 없음** |
|
||||
| `isNumericOnlyAggregation` | 함수 | frontend 전체 | 0건 | **충돌 없음** |
|
||||
| `AggregationType` | type import | PopDashboardConfig.tsx | 0건 (현재 미import) | **충돌 없음** (추가 필요) |
|
||||
|
||||
---
|
||||
|
||||
#### 정의-사용 매핑
|
||||
|
||||
| 정의 | 정의 위치 | 사용 위치 |
|
||||
|------|-----------|-----------|
|
||||
| `usePopEvent` | `hooks/pop/usePopEvent.ts` (신규) | pop-button (Phase 2), pop-table (Phase 3), pop-search (Phase 4) 등 |
|
||||
| `useDataSource` | `hooks/pop/useDataSource.ts` (신규) | pop-button (Phase 2), pop-table (Phase 3), pop-dashboard (향후 교체) 등 |
|
||||
| `MutationResult` | `hooks/pop/useDataSource.ts` (신규) | useDataSource 반환 타입으로 사용 |
|
||||
| `buildAggregationSQL` | `hooks/pop/popSqlBuilder.ts` (신규) | useDataSource 내부에서 호출 |
|
||||
| `validateDataSourceConfig` | `hooks/pop/popSqlBuilder.ts` (신규) | useDataSource 내부에서 호출 |
|
||||
| `cleanupScreen` | `hooks/pop/usePopEvent.ts` (신규) | 화면 언마운트 시 호출 (PopRenderer 또는 뷰어에서) |
|
||||
| `DataSourceConfig` | `lib/registry/pop-components/types.ts` (기존) | useDataSource 파라미터 타입 |
|
||||
| `DataSourceFilter` | `lib/registry/pop-components/types.ts` (기존) | popSqlBuilder 내부 |
|
||||
| `dataApi` | `lib/api/data.ts` (기존) | useDataSource 내부에서 CRUD 호출 |
|
||||
| `dashboardApi` | `lib/api/dashboard.ts` (기존) | useDataSource 내부에서 SQL 실행 폴백 |
|
||||
| `apiClient` | `lib/api/client.ts` (기존) | useDataSource 내부에서 SQL 실행 1차 |
|
||||
| `SUBTYPE_AGGREGATION_MAP` | STEP 1 (상수) | STEP 3, STEP 7.5 |
|
||||
| `AGGREGATION_LABELS` | STEP 1 (상수) | STEP 3 |
|
||||
| `NUMERIC_ONLY_AGGREGATIONS` | STEP 1 (상수) | `isNumericOnlyAggregation` 내부 |
|
||||
| `NUMERIC_TYPE_PATTERNS` | STEP 1 (상수) | `isNumericColumn` 내부 |
|
||||
| `isNumericColumn` | STEP 1 (함수) | STEP 4, STEP 5 |
|
||||
| `isNumericOnlyAggregation` | STEP 1 (함수) | STEP 4, STEP 5 |
|
||||
| `subType` (prop) | STEP 2 (DataSourceEditor) | STEP 3, STEP 6 |
|
||||
| `AggregationType` | `types.ts` L123 (기존) | STEP 1 import 추가 |
|
||||
| `ColumnInfo` | `dataFetcher.ts` (기존, L71에서 import) | STEP 1 `isNumericColumn` 파라미터 |
|
||||
| `DashboardSubType` | `types.ts` (기존, L48에서 이미 import) | STEP 2 prop 타입, STEP 7.5 |
|
||||
|
||||
**누락 검사**: 모든 신규 정의에 사용처 있음. 모든 사용처에 정의 존재.
|
||||
단, `cleanupScreen`의 호출 시점은 Phase 2 이후 뷰어 통합 시 결정 (이번에는 export만 해둠).
|
||||
**누락 검사**: 모든 신규 정의에 사용처 있음. 모든 사용처에 정의 존재. 누락 없음.
|
||||
|
||||
---
|
||||
|
||||
#### 함정 경고
|
||||
|
||||
| 번호 | 위험 | 설명 | 해결 방안 |
|
||||
|------|------|------|-----------|
|
||||
| W1 | **subscribe를 useEffect 밖에서 호출하면 메모리 누수** | subscribe는 콜백을 등록하므로, 컴포넌트 언마운트 시 해제해야 함 | subscribe의 반환값(unsubscribe)을 useEffect cleanup에서 호출. JSDoc에 사용 패턴 명시. |
|
||||
| W2 | **DataSourceConfig의 import 경로** | `DataSourceConfig`는 `lib/registry/pop-components/types.ts`에 정의됨. hooks 디렉토리에서 import 시 경로가 김 | `@/lib/registry/pop-components/types`로 import. 별도 re-export 하지 않음 (타입 중복 방지). |
|
||||
| W3 | **buildAggregationSQL 동일 이름 2곳** | dataFetcher.ts와 popSqlBuilder.ts에 같은 이름의 함수가 존재 | 의도적 복사. 대시보드는 dataFetcher.ts, 새 컴포넌트는 popSqlBuilder.ts 사용. 향후 대시보드 교체 시 dataFetcher.ts를 popSqlBuilder.ts import로 변경. |
|
||||
| W4 | **apiClient.post와 dashboardApi.executeQuery 이중 경로** | 대시보드 dataFetcher.ts에서 apiClient 우선 + dashboardApi 폴백 패턴을 그대로 복사함 | 동일 패턴 유지 (안정성 검증 완료). 향후 하나로 통합 가능. |
|
||||
| W5 | **refetch overrideFilters와 config.filters 병합 순서** | overrideFilters가 config.filters를 완전 대체하는지, 추가하는지 모호 | **추가(append) 방식**: config.filters + overrideFilters를 합침. overrideFilters에 같은 column이 있으면 덮어씀. 이 동작을 JSDoc에 명시. |
|
||||
| W6 | **SSR 환경에서 전역 Map** | Next.js SSR에서 전역 Map이 서버/클라이언트 간 공유될 수 있음 | `typeof window !== "undefined"` 가드. 이벤트 버스는 클라이언트 전용. |
|
||||
| W7 | **hooks/pop/ 디렉토리 신규** | `frontend/hooks/pop/` 디렉토리가 존재하지 않음 | STEP 1에서 파일 생성 시 디렉토리 자동 생성됨. 수동으로 mkdir 불필요. |
|
||||
| # | 심각도 | 위험 | 설명 | 해결 방안 |
|
||||
|---|--------|------|------|-----------|
|
||||
| W1 | **높음** | **import 누락** | `AggregationType`을 import에 추가 안 하면 컴파일 에러 | STEP 1-A에서 반드시 추가 |
|
||||
| W2 | **높음** | **subType 변경 시 비호환 aggregation 잔류** | chart(sum) → stat-card 시 Select 목록에 없는 값이 내부에 남음 | STEP 7.5에서 해결 (시뮬레이션 발견) |
|
||||
| W3 | **중간** | **groupBy 소실 (기존 버그)** | 기존 코드에서 집계 함수 변경 시 groupBy가 누락됨 | STEP 4에서 `groupBy` 명시적 보존 |
|
||||
| W4 | **낮음** | **FormulaEditor 호출 미수정** | FormulaEditor 내부 DataSourceEditor에는 subType 미전달 | 의도적 결정 (수식 모드는 모든 집계 허용). 절대 수정하지 말 것 (연쇄 변경 발생) |
|
||||
| W5 | **낮음** | **columns 비동기 로드** | 테이블 방금 선택 → columns=[] → STEP 4 초기화 안 됨 | 허용. 컬럼 로드 후 재변경 시 정상 동작 |
|
||||
| W6 | **정보** | **MIN/MAX 문자열 허용** | PostgreSQL MIN/MAX는 문자열에도 작동 (사전순) | 의도적. `NUMERIC_ONLY`에 포함 안 함 |
|
||||
| W7 | **정보** | **STEP 7.5에서 column 초기화 조건** | `allowedAggs[0] === "count"`이면 column="" (count는 * 사용) | stat-card → count 전환 시 올바른 동작 |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -491,33 +564,36 @@ export { buildAggregationSQL, validateDataSourceConfig } from "./popSqlBuilder";
|
|||
|
||||
##### 코드 레벨
|
||||
|
||||
- [ ] `usePopEvent` - publish/subscribe 기본 동작 (같은 screenId)
|
||||
- [ ] `usePopEvent` - 다른 screenId 간 격리 확인
|
||||
- [ ] `usePopEvent` - subscribe cleanup (메모리 누수 없음)
|
||||
- [ ] `usePopEvent` - sharedData set/get
|
||||
- [ ] `useDataSource` - 단순 조회 (aggregation 없음 → dataApi.getTableData)
|
||||
- [ ] `useDataSource` - 집계 조회 (aggregation 있음 → SQL 빌더 → executeQuery)
|
||||
- [ ] `useDataSource` - save/update/remove
|
||||
- [ ] `useDataSource` - loading/error 상태 관리
|
||||
- [ ] `useDataSource` - refreshInterval 자동 새로고침
|
||||
- [ ] `popSqlBuilder` - buildAggregationSQL이 dataFetcher.ts와 동일 결과 생성
|
||||
- [ ] TypeScript 컴파일 에러 0건
|
||||
- [ ] 린트 에러 0건
|
||||
- [ ] 기존 대시보드 동작에 영향 없음 (dataFetcher.ts 미수정)
|
||||
- [x] `AggregationType` import 추가 확인
|
||||
- [x] stat-card: 집계 함수 Select에 "건수 (COUNT)"만 표시
|
||||
- [x] kpi-card/chart/gauge: 5개 집계 함수 전부 표시
|
||||
- [x] SUM 선택 시 컬럼 목록에 숫자 타입만 표시
|
||||
- [x] COUNT 선택 시 컬럼 목록에 모든 타입 표시
|
||||
- [x] COUNT→SUM 변경 시 문자열 컬럼 자동 초기화
|
||||
- [x] SUM→COUNT 변경 시 숫자 컬럼 유지
|
||||
- [x] 집계 함수 변경 시 groupBy 보존
|
||||
- [x] chart→stat-card subType 변경 시 sum→count 자동 전환 (STEP 7.5)
|
||||
- [x] chart 모드에서 groupBy 미설정 시 빨간 경고 표시
|
||||
- [x] FormulaEditor 내부에서 5개 전부 표시 (subType 미전달 → 기본 전체 목록)
|
||||
- [x] TypeScript 컴파일 에러 0건
|
||||
- [x] 린트 에러 0건
|
||||
- [ ] 기존 저장된 대시보드 데이터 조회 동작에 영향 없음 (브라우저 확인 필요)
|
||||
|
||||
##### 구조 레벨
|
||||
|
||||
- [ ] `frontend/hooks/pop/` 디렉토리 생성됨
|
||||
- [ ] index.ts 배럴 파일에서 모든 public API export 됨
|
||||
- [ ] `@/hooks/pop`으로 import 가능
|
||||
- [x] 수정 파일 1개: `PopDashboardConfig.tsx`
|
||||
- [x] 신규 파일 0개
|
||||
- [x] 기존 파일 삭제 0개
|
||||
|
||||
---
|
||||
|
||||
#### 이전 완료된 계획 (보관)
|
||||
|
||||
**Phase 0 공통 인프라 (2026-02-11, 완료)**:
|
||||
usePopEvent + useDataSource + popSqlBuilder 구현.
|
||||
|
||||
**대시보드 스타일 정리 (2026-02-11, 완료)**:
|
||||
글자 크기 커스텀 제거, 라벨 정렬만 유지, stale closure 수정, .next 캐시 해결.
|
||||
상세: `popdocs/sessions/2026-02-11.md`
|
||||
|
||||
**브라우저 확인 체크리스트 (대기)**:
|
||||
- [ ] 라벨 정렬, 페이지 미리보기, 차트 디자인, 게이지/통계카드 동작 확인
|
||||
|
|
@ -548,4 +624,4 @@ export { buildAggregationSQL, validateDataSourceConfig } from "./popSqlBuilder";
|
|||
|
||||
---
|
||||
|
||||
*최종 업데이트: 2026-02-11 (Phase 0 공통 인프라 완료, Phase 2 pop-button 설계 시작)*
|
||||
*최종 업데이트: 2026-02-12 (대시보드 집계 함수 유효성 검증 v2 - 시뮬레이션 검증 완료, STEP 7.5 추가)*
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# 현재 상태
|
||||
|
||||
> **마지막 업데이트**: 2026-02-11
|
||||
> **마지막 업데이트**: 2026-02-12
|
||||
> **담당**: POP 화면 디자이너
|
||||
|
||||
---
|
||||
|
|
@ -72,23 +72,28 @@
|
|||
|
||||
## 다음 작업 (우선순위)
|
||||
|
||||
### 현재: Phase 2 pop-button 컴포넌트 구현
|
||||
### 현재: 대시보드 집계 함수 설정 유효성 검증 강화 (v2 시뮬레이션 검증 완료)
|
||||
|
||||
> Phase 0 공통 인프라 (usePopEvent + useDataSource) 완료
|
||||
> pop-button 컴포넌트 설계 및 구현 진행 중
|
||||
> 팀원 pull 후 대시보드 500 에러 (문자열 컬럼에 SUM 적용)
|
||||
> 8개 시나리오 시뮬레이션 완료, STEP 7.5 추가 (subType 변경 시 비호환 aggregation 자동 전환)
|
||||
|
||||
### 완료된 Phase 0 (2026-02-11)
|
||||
| 순서 | 작업 | 상태 |
|
||||
|------|------|------|
|
||||
| 1 | import + 유틸 상수/함수 6개 | 대기 |
|
||||
| 2 | DataSourceEditor props에 subType 추가 | 대기 |
|
||||
| 3 | 집계 함수 Select 동적 생성 (subType별) | 대기 |
|
||||
| 4 | 집계 함수 변경 시 컬럼 초기화 + groupBy 보존 | 대기 |
|
||||
| 5 | 대상 컬럼 Combobox 숫자 필터링 | 대기 |
|
||||
| 6 | chart 모드 groupBy 경고 | 대기 |
|
||||
| 7 | DataSourceEditor 호출부 subType 전달 | 대기 |
|
||||
| **7.5** | **subType 변경 시 비호환 aggregation 전환** | **대기** |
|
||||
|
||||
| 순서 | 파일 | 작업 | 상태 |
|
||||
|------|------|------|------|
|
||||
| 1 | `hooks/pop/usePopEvent.ts` | 이벤트 버스 훅 | **완료** |
|
||||
| 2 | `hooks/pop/popSqlBuilder.ts` | SQL 빌더 유틸 | **완료** |
|
||||
| 3 | `hooks/pop/useDataSource.ts` | 데이터 CRUD 훅 | **완료** |
|
||||
| 4 | `hooks/pop/index.ts` | 배럴 파일 | **완료** |
|
||||
수정 파일: `PopDashboardConfig.tsx` 1개만. 상세: `popdocs/PLAN.md` "현재 구현 계획"
|
||||
|
||||
### 대기
|
||||
|
||||
- 브라우저 확인: 라벨 정렬, 페이지 미리보기, 차트 디자인, 게이지/통계카드
|
||||
- Phase 2: pop-button 컴포넌트 구현
|
||||
- Phase 2: pop-icon 검토/개선
|
||||
|
||||
### 후속
|
||||
|
|
|
|||
Loading…
Reference in New Issue