- 노드 에디터 UI 구현 (React Flow 기반)
- TableSource, DataTransform, INSERT, UPDATE, DELETE, UPSERT 노드
- 드래그앤드롭 노드 추가 및 연결
- 속성 패널을 통한 노드 설정
- 실시간 필드 라벨 표시 (column_labels 테이블 연동)
- 데이터 변환 노드 (DataTransform) 기능
- EXPLODE: 구분자로 1개 행 → 여러 행 확장
- UPPERCASE, LOWERCASE, TRIM, CONCAT, SPLIT, REPLACE 등 12가지 변환 타입
- In-place 변환 지원 (타겟 필드 생략 시 소스 필드 덮어쓰기)
- 변환된 필드가 하위 액션 노드에 자동 전달
- 노드 플로우 실행 엔진
- 위상 정렬을 통한 노드 실행 순서 결정
- 레벨별 병렬 실행 (Promise.allSettled)
- 부분 실패 허용 (한 노드 실패 시 연결된 하위 노드만 스킵)
- 트랜잭션 기반 안전한 데이터 처리
- UPSERT 액션 로직 구현
- DB 제약 조건 없이 SELECT → UPDATE or INSERT 방식
- 복합 충돌 키 지원 (예: sales_no + product_name)
- 파라미터 인덱스 정확한 매핑
- 데이터 소스 자동 감지
- 테이블 선택 데이터 (selectedRowsData) 자동 주입
- 폼 입력 데이터 (formData) 자동 주입
- TableSource 노드가 외부 데이터 우선 사용
- 버튼 컴포넌트 통합
- 기존 관계 실행 + 새 노드 플로우 실행 하이브리드 지원
- 노드 플로우 선택 UI 추가
- API 클라이언트 통합 (Axios)
- 개발 문서 작성
- 노드 기반 제어 시스템 개선 계획
- 노드 연결 규칙 설계
- 노드 실행 엔진 설계
- 노드 구조 개선안
- 버튼 통합 분석
- menu, company, screenMng, i18n, tableMng 모듈 console 주석 처리
- 총 55개 파일 수정
- 빌드 에러 수정 완료
- 백엔드 서버 정상 작동 확인
관련 파일:
- frontend/components/admin/MenuManagement.tsx
- frontend/components/admin/MenuFormModal.tsx
- frontend/components/admin/ScreenAssignmentTab.tsx
- frontend/components/admin/CompanyTable.tsx
- frontend/components/admin/MultiLang.tsx
- frontend/app/(main)/admin/tableMng/page.tsx
- 기타 screen 관련 컴포넌트 49개 파일
변경 사항:
1. InteractiveScreenViewer - handleEditAction 수정 ✅
- config에서 editModalTitle, editModalDescription 읽기
- openEditModal 이벤트로 제목/설명 전달
2. ButtonTypeConfig 타입 추가 ✅
- editModalTitle 필드 추가
- editModalDescription 필드 추가
3. ButtonConfigPanel 수정 ✅
- webTypeConfig에도 제목/설명 저장
- 이중 저장 (action + webTypeConfig)
결과:
- ✅ 버튼의 수정 액션 실행 시 설정한 제목이 모달에 표시됨
- ✅ 버튼의 수정 액션 실행 시 설정한 설명이 모달에 표시됨
- ✅ EditModal이 openEditModal 이벤트에서 제목/설명 받음
- ✅ 전체 데이터 흐름 완성
추가된 기능:
1. ButtonConfigPanel - 수정 모달 제목/설명 입력 필드 추가 ✅
2. EditModal - 제목/설명 props 추가 및 조건부 헤더 렌더링 ✅
3. DataTableConfigPanel - 수정 모달 설정 섹션 추가 ✅
4. InteractiveDataTable - editModalConfig에서 제목/설명 읽기 ✅
5. screen/[screenId]/page - 제목/설명 전달 추가 ✅
6. 타입 정의 - editModalConfig 추가 ✅
변경된 파일:
- frontend/components/screen/config-panels/ButtonConfigPanel.tsx
- frontend/components/screen/EditModal.tsx
- frontend/components/screen/InteractiveDataTable.tsx
- frontend/components/screen/panels/DataTableConfigPanel.tsx
- frontend/app/(main)/screens/[screenId]/page.tsx
- frontend/types/screen-legacy-backup.ts
결과:
- ✅ 수정 버튼에서 모달 제목과 설명을 설정할 수 있음
- ✅ 데이터테이블에서도 수정 모달 설정 가능
- ✅ 제목과 설명이 모달 헤더에 표시됨
- ✅ 설정하지 않으면 기본 동작 유지
수정된 위치:
- line 271: fromColumns (소스 필드)
- line 289: toColumns (소스 필드)
- line 623: fromColumns (필드 매핑)
- line 638: toColumns (필드 매핑)
- line 737: getAvailableFieldsForMapping (대상 필드)
모든 .map() 앞에 .filter() 추가:
- 빈 columnName 제외
- 중복 키 방지
- React 경고 해결
문제:
- toColumns에 빈 문자열 columnName 중복
- 중복된 키 to_ 생성
- React 키 중복 경고
수정:
- fromColumns filter 추가
- toColumns filter 추가
- 빈 문자열 컬럼 제외
에러:
Encountered two children with the same key
문제:
- SelectItem에 빈 문자열 value 전달 시 에러
- col.columnName이 빈 문자열일 수 있음
수정:
- filter에 col.columnName 체크 추가
- 빈 문자열 컬럼 제외
에러 메시지:
A <Select.Item /> must have a value prop
that is not an empty string
## 백엔드
- DashboardController: 대시보드 CRUD 및 쿼리 실행 API
- DashboardService: 비즈니스 로직 처리
- PostgreSQL 연동 및 데이터 관리
## 프론트엔드
- DashboardDesigner: 캔버스 기반 대시보드 디자이너
- QueryEditor: SQL 쿼리 편집 및 미리보기
- ChartRenderer: 다양한 차트 타입 지원 (Bar, Line, Area, Donut, Stacked, Combo)
- DashboardViewer: 실시간 데이터 반영 뷰어
## 개선사항
- 콘솔 로그 프로덕션 준비 (주석 처리)
- 차트 컴포넌트 확장 (6가지 타입)
- 실시간 쿼리 실행 및 데이터 바인딩
- 테이블 헤더 스타일링 개선 (더 진한 배경색, 오렌지 호버 효과)
- 파일첨부 컴포넌트 개선 (뚝뚝 잘리는 문제 해결, 패딩/아이콘 크기 조정)
- 카드 디스플레이 스타일링 개선 (명확한 테두리, 오렌지 호버 효과)
- 라벨 표시 기능 수정 (드롭다운 라벨링 문제, 체크박스 풀리는 문제 해결)
- 패널 및 레이아웃 개선 (카드 간격 통일, 주황색 영역 추가)
- CSS 통일성 작업 (Select 컴포넌트 너비 w-48로 조정)
- 정렬 화살표 표시 조건 수정 (정렬된 컬럼에서만 화살표 표시)
- 테이블 스타일링 통일 (SingleTableWithSticky, TableListComponent, InteractiveDataTable)
✨ 새로운 기능:
- 드래그 앤 드롭 대시보드 설계 도구
- SQL 쿼리 에디터 및 실시간 실행
- Recharts 기반 차트 컴포넌트 (Bar, Pie, Line)
- 차트 데이터 매핑 및 설정 UI
- 요소 이동, 크기 조절, 삭제 기능
- 레이아웃 저장 기능
📦 추가된 컴포넌트:
- DashboardDesigner: 메인 설계 도구
- QueryEditor: SQL 쿼리 작성 및 실행
- ChartConfigPanel: 차트 설정 패널
- ChartRenderer: 실제 차트 렌더링
- CanvasElement: 드래그 가능한 캔버스 요소
🔧 기술 스택:
- Recharts 라이브러리 추가
- TypeScript 타입 정의 완비
- 독립적 컴포넌트 구조로 설계
🎯 접속 경로: /admin/dashboard
- 템플릿 파일첨부 컴포넌트와 FileComponentConfigPanel 실시간 동기화
- FileUpload 위젯에 전역 파일 상태 관리 기능 추가
- 파일 업로드/삭제 시 전역 상태 및 localStorage 동기화
- RealtimePreview에서 전역 상태 우선 읽기 및 파일 개수 표시
- 한컴오피스, Apple iWork 파일 형식 지원 추가
- 파일 뷰어 모달 및 미리보기 기능 구현
- 업로드된 파일 디렉토리 .gitignore 추가
✨ 주요 기능:
- 배치 설정 관리 (생성/수정/삭제/실행)
- 배치 실행 로그 관리 및 모니터링
- 배치 스케줄러 자동 실행 (cron 기반)
- 외부 DB 연결을 통한 데이터 동기화
- Oracle, MSSQL, MariaDB 커넥터 지원
🔧 백엔드 구현:
- BatchManagementController: 배치 설정 CRUD
- BatchExecutionLogController: 실행 로그 관리
- BatchSchedulerService: 자동 스케줄링
- BatchExternalDbService: 외부 DB 연동
- 배치 관련 테이블 스키마 추가
🎨 프론트엔드 구현:
- 배치 관리 대시보드 UI
- 배치 생성/수정 폼
- 실행 로그 모니터링 화면
- 수동 실행 및 상태 관리
🛡️ 안전성:
- 기존 시스템과 독립적 구현
- 트랜잭션 기반 안전한 데이터 처리
- 에러 핸들링 및 로깅 강화
- admin/screenMng, dataflow 페이지에 tableMng 레퍼런스 레이아웃 적용
- admin/standards 페이지 JSX 괄호 문제 수정
- 전체 관리자 페이지 UI 일관성 향상
- bg-gray-50 배경, container 구조, 통일된 제목 스타일 적용
- TableListComponent에서 엔티티 컬럼 라벨을 기준 테이블 라벨로 표시
- TableListConfigPanel에서 input_type 필드로 엔티티 컬럼 감지
- ScreenDesigner에서 컬럼 정보 로드 시 input_type 필드 포함
- UnifiedColumnInfo 타입에 input_type 필드 추가
- 엔티티 컬럼 감지 로직에 디버깅 로그 추가
이제 화면 편집기에서 엔티티 컬럼의 표시 컬럼 설정이 정상적으로 보여야 함
- 테이블 타입 관리에서 엔티티 타입의 표시 컬럼 설정 완전 제거
- 컬럼 설정 패널에서 엔티티 타입일 때 표시 컬럼 조합 선택 기능 추가
- 기본 테이블과 조인 테이블의 컬럼을 자유롭게 조합 가능
- 구분자 설정 및 실시간 미리보기 기능 포함
- 별도 모달 방식 제거하고 기존 컬럼 설정 패널에 통합
Frontend:
- EntityTypeConfig 인터페이스에 displayColumns 배열 추가
- EntityTypeConfigPanel에서 여러 표시 컬럼 선택 UI 구현
- 구분자 설정 기능 추가
- 하위 호환성을 위한 displayColumn 유지
Backend:
- EntityJoinConfig에 displayColumns 배열 지원
- 화면별 엔티티 설정을 전달받는 API 확장
- CONCAT을 사용한 다중 컬럼 표시 SQL 생성
- 기존 단일 컬럼과의 호환성 유지
이제 화면마다 다른 표시 컬럼 조합을 설정할 수 있음
예: 한 화면에서는 '이름'만, 다른 화면에서는 '이름 - 부서명' 표시
- ResponsiveScreenContainer에서 자동맞춤 모드들(fit, scale, fullwidth) 제거
- 기본값을 original 모드로 변경하여 설계한 크기 그대로 표시
- 화면 컨테이너가 전체 높이를 사용하도록 레이아웃 수정
- 스크롤 문제 해결을 위해 overflow 설정 최적화
dohyeons
leeheejin
kjs
hjjeong
hjlee
hyeonsu