변경사항:
- 스텝 이름 복원 (탭 영역에 표시되므로 필요)
- 데이터 테이블 위 헤더 영역 제거
- 스텝 이름 중복 표시 제거
- '총 N건의 데이터' 표시 제거
- 필터링/선택 건수 표시 제거
- 필터 설정 및 그룹 설정 버튼은 유지
- justify-end로 버튼 오른쪽 정렬
UI 개선:
- 데이터 영역 확대로 더 많은 정보 표시
- 중복 정보 제거로 깔끔한 인터페이스
- 필요한 설정 버튼만 간결하게 배치
- 스텝 이름(stepName) 표시 영역 완전 제거
- 데이터 건수만 표시하도록 간소화
- 하단 선택 바와 건수만으로 스텝 구분
- 패딩 조정 (pb-5 -> pb-3, pb-6 -> pb-4)
UI 개선:
- 스텝 영역 높이 감소로 공간 절약
- 더 많은 데이터 표시 공간 확보
- 시각적으로 더 간결한 인터페이스
- TableListComponent: showHeader 조건부 렌더링 제거
- 타이틀 표시 영역 삭제
- 공간 절약을 위해 헤더 완전 제거
- FlowWidget: 플로우 제목 및 설명 영역 제거
- flowData.name 표시 영역 삭제
- flowData.description 표시 영역 삭제
- 더 많은 데이터 표시 공간 확보
UI 개선:
- 불필요한 헤더 제거로 컨텐츠 영역 확대
- 더 많은 데이터를 한 화면에 표시 가능
- TableListComponent와 동일한 그룹핑 기능 적용
- 다중 컬럼 선택으로 계층적 그룹화 지원
- 그룹 설정 다이얼로그 추가
- 그룹별 데이터 펼치기/접기 기능
- 그룹 헤더에 항목 개수 표시
- localStorage에 그룹 설정 저장/복원
- 그룹 해제 버튼 추가
- 그룹 표시 배지 UI
주요 기능:
- 플로우 스텝 데이터에 그룹화 적용
- filteredData와 stepData 모두 지원
- 그룹 없을 때는 기존 페이지네이션 유지
- 그룹 있을 때는 모든 그룹 데이터 표시
✨ 새로운 기능
- 플로우 위젯과 동일한 검색 필터 설정 기능 구현
- 사용자가 원하는 컬럼만 선택하여 검색 가능
- localStorage 기반 필터 설정 저장/복원
🎨 UI 추가
- '검색 필터 설정' 버튼 (FlowWidget 스타일)
- 선택된 컬럼의 동적 검색 입력 필드
- 필터 개수 뱃지 표시
- 체크박스 기반 필터 설정 다이얼로그
🔧 기술적 구현
- searchFilterColumns 상태로 선택된 컬럼 관리
- searchValues 상태로 각 컬럼별 검색값 관리
- useAuth 훅으로 사용자별 필터 설정 저장
- Grid 레이아웃으로 검색 필드 반응형 배치
📝 변경된 파일
- frontend/components/screen/templates/DataTableTemplate.tsx
✅ 테스트 완료
- 필터 설정 저장/복원
- 동적 검색 필드 생성
- 반응형 레이아웃
- 미리보기 모드에서 비활성화
- 테이블 헤더와 데이터 셀 모두에 whitespace-nowrap 적용
- 모바일에서도 텍스트가 2줄로 깨지지 않음
- overflow-hidden + text-ellipsis로 긴 텍스트 처리
- TableListComponent와 InteractiveDataTable 모두 적용
이제 화면을 줄여도 텍스트가 항상 1줄로 유지됨
- 모든 테이블 헤더를 가운데 정렬 (text-center)
- 숫자 타입(number, decimal) 데이터를 우측 정렬
- TableListComponent: inputType 기반 숫자 판단
- InteractiveDataTable: widgetType 기반 숫자 판단
- 체크박스는 기존대로 가운데 정렬 유지
- 일반 텍스트는 좌측 정렬 유지
더 읽기 쉬운 테이블 레이아웃 완성
- ref callback에서 state 업데이트 제거
- useEffect + setTimeout으로 초기 너비 측정 (한 번만)
- hasInitializedWidths useRef로 중복 측정 방지
- columnRefs useRef로 DOM 직접 참조
- 드래그 중 리렌더링 없이 DOM만 직접 조작
- 부드럽고 정확한 리사이즈 구현 완료
✅ 해결 방법:
- 백분율 defaultWidth 제거, 초기값은 undefined로 설정
- ref callback에서 첫 렌더링 시 실제 offsetWidth 측정
- 측정한 실제 너비를 columnWidths state에 저장
- 이후 드래그로 80px까지 줄일 수 있음
✅ 적용 파일:
- TableListComponent.tsx (실제 화면)
- InteractiveDataTable.tsx (디자인 모드)
✅ 기술적 개선:
- table-layout: fixed + 동적 초기 너비 측정
- DOM 직접 조작으로 부드러운 리사이즈
- 최소 80px 보장 (Math.max)
- 핸들 너비를 1px에서 2px로 증가
- z-index: 20 추가로 다른 요소 위에 표시
- padding과 negative margin으로 클릭 영역 확대 (좌우 4px씩)
- onClick에 stopPropagation 추가하여 정렬 클릭 방지
- 더 쉽게 클릭하고 드래그할 수 있도록 개선
- 컬럼 헤더에 select-none, userSelect: 'none' 추가
- 드래그 중 document.body.userSelect = 'none'으로 전역 텍스트 선택 차단
- 드래그 완료 후 userSelect 복원
- 드래그 중 cursor를 col-resize로 고정하여 UX 개선
- TableListComponent: table_type_columns의 input_type 정보를 가져와서 숫자 포맷팅
- getColumnInputTypes API 추가로 컬럼별 입력 타입 조회
- columnMeta에 inputType 포함하여 formatCellValue에서 사용
- 테이블 관리에서 설정한 입력 타입(number/decimal)에 따라 자동으로 천 단위 콤마 표시
- 근본적인 해결: 컬럼명 기반이 아닌 실제 설정값 기반 포맷팅
- InteractiveDataTable: number/decimal 타입 셀에 천 단위 콤마 적용
- FlowWidget: 스텝 카운트, 데이터 셀, 페이지 정보에 천 단위 콤마 적용
- formatValue 함수로 숫자 자동 감지 및 포맷팅
- 문자열로 저장된 숫자도 자동으로 포맷팅 처리
- toLocaleString('ko-KR') 사용으로 한국식 숫자 표기
- EditModal: 저장 완료 후 자동으로 닫히고 부모 테이블 새로고침
- buttonActions.ts: 저장 성공 후 closeEditModal 이벤트 발생
- InteractiveScreenViewerDynamic: onSave prop 추가하여 EditModal 연동
- InteractiveDataTable: EditModal 열 때 onSave 콜백으로 loadData 전달
- 두 가지 시나리오 모두 지원:
1. InteractiveScreenViewerDynamic 버튼의 onSave 호출
2. DynamicComponentRenderer 버튼의 buttonActions.ts 처리
🐛 버그 수정
- 화면 목록으로 이동 버튼 클릭 후에도 3초 타이머가 계속 실행되던 문제 해결
- 빠르게 버튼 클릭 후 다른 화면 진입 시 다시 튕겨나는 현상 수정
�� 변경 내용
- useRef로 타이머 참조 저장 (autoRedirectTimerRef)
- 모달이 닫힐 때 타이머 정리 (clearTimeout)
- 컴포넌트 언마운트 시 타이머 정리
- '화면 목록으로 이동' 버튼 클릭 시 타이머 즉시 정리
📝 기술적 개선
- setTimeout 타이머를 useRef로 관리
- useEffect cleanup 함수에서 타이머 정리
- 버튼 onClick에서 타이머 수동 정리
✅ 결과
- 버튼 클릭 시 타이머가 즉시 정리됨
- 다른 화면으로 이동 후 3초 뒤 튕겨나지 않음
- 메모리 누수 방지
🐛 버그 수정
- 화면 저장 성공 모달의 버튼 텍스트가 검은색으로 표시되던 문제 해결
- '화면 목록으로 이동' 버튼에 text-white 추가
- '메뉴에 할당' 버튼에 text-white 추가
- '화면 교체' 버튼에 text-white 추가
🎨 변경 내용
- bg-green-600 → bg-green-600 text-white
- bg-blue-600 → bg-blue-600 text-white
- bg-orange-600 → bg-orange-600 text-white
📝 관련 파일
- frontend/components/screen/MenuAssignmentModal.tsx
✅ 결과
- 모든 버튼 텍스트가 흰색으로 정상 표시됨
- frontend: screen.ts에 saveScreenLayout 함수 추가 (ScreenDesigner_new.tsx가 호출하던 누락된 함수)
- frontend: ScreenDesigner_new.tsx 저장 시 디버깅 로그 추가
- backend: screenManagementService.ts에 dataflowConfig 저장 확인 로그 추가
문제 원인:
- ScreenDesigner_new.tsx가 호출하던 screenApi.saveScreenLayout 함수가 정의되지 않음
- 이로 인해 레이아웃 저장이 실패했을 가능성
해결:
- saveScreenLayout 함수를 추가하여 정상적인 레이아웃 저장 가능
- 디버깅 로그를 통해 실제로 selectedDiagramId가 저장되는지 확인 가능
프론트엔드:
- ImprovedButtonControlConfigPanel에서 selectedDiagramId 저장 추가
- 플로우 선택 시 flowConfig와 함께 selectedDiagramId도 저장
- selectedRelationshipId는 null로 설정 (노드 플로우는 관계 불필요)
백엔드:
- dynamicFormService에서 relationshipId 유무에 따라 실행 방식 분기
- relationshipId가 없으면 NodeFlowExecutionService.executeFlow() 실행
- relationshipId가 있으면 기존 dataflowControlService.executeDataflowControl() 실행
- 노드 플로우 실행 시 formData를 contextData로 전달
원인:
- 기존에는 flowConfig만 저장하고 selectedDiagramId를 저장하지 않음
- 백엔드에서 selectedDiagramId가 없어서 제어관리 실행 조건 불만족
- 관계 기반 제어와 노드 플로우를 구분하지 못함
- 화면 관리 페이지에서 position.x === 0인 컴포넌트가 100% 너비로 표시되도록 수정
- 대시보드 뷰어에서 부모 컨테이너의 maxWidth 제한 제거하여 화면 전체 너비 활용
- AppLayout의 main 영역에 16px 내부 패딩 적용
- RealtimePreview 및 RealtimePreviewDynamic 컴포넌트에서 좌측 정렬 컴포넌트 너비 자동 조정
- 모바일 환경에서 화면 스케일링 비활성화 (반응형만 작동)
- table-mobile-fixed CSS 클래스 추가로 모바일 테이블 레이아웃 개선
- useResponsive 훅 추가로 반응형 감지 기능 구현
- 플로우 위젯 단계 박스 미니멀 디자인 적용
- 테두리와 배경 제거, 하단 선만 표시
- STEP 배지 제거, 단계명과 건수 상하 배치
- 선택 인디케이터(ChevronUp) 제거
- 건수 폰트 굵기 조정 (font-medium)
- 검색 필터 기능 개선
- 그리드 컬럼 수 확장 (최대 6개까지)
- 상단 타이틀과 검색 필터 사이 여백 조정
- 검색 필터 설정 시 표시되는 컬럼만 선택 가능하도록 변경
- 필터 설정을 사용자별로 저장하도록 변경
- 이전 사용자의 필터 설정 자동 정리 로직 추가
- 기본 버튼 컴포넌트 스타일 변경
- 배경 흰색, 검정 테두리로 변경
- 테이블 삭제 방식을 체크박스 선택 기반 일괄 삭제로 변경
- 좌측 테이블 리스트 영역에 스크롤 적용
- 선택된 테이블에 검정 테두리 표시 (border-2 border-black)
- 우측 상단 타이틀 제거
- 각 테이블 카드에 라운딩 적용 (rounded-lg)
- 컬럼 간 간격 개선 (입력 타입-상세 설정 간격 증가)
- Entity 설정 박스 스타일 제거 (평면적 레이아웃으로 변경)
- 좌측 영역 우측 여백 조정 (pr-4)
- 모든 테이블 헤더의 회색 배경 제거 (bg-muted/50 → bg-background)
- 모든 테이블 행의 홀수 행 회색 배경 제거 (모든 행을 흰색 배경으로 통일)
- 호버 시에만 회색 배경이 나타나도록 통일
- TableListComponent, SingleTableWithSticky, 모든 관리자 테이블 컴포넌트에 적용
- 테이블 구조 표준화 문서 업데이트
- 모든 테이블 컴포넌트의 외곽 테두리(border) 제거
- 테이블 컨테이너의 라운드(rounded-lg) 제거
- 테이블 행 구분선(border-b)은 유지하여 데이터 구분
- FlowWidget과 TableListComponent에 동일한 스타일 적용
- 검색 필터 영역의 회색 배경(bg-muted/30) 제거
- 검색 필터 제목 제거
- AdvancedSearchFilters 컴포넌트의 '검색 필터' 제목 제거
; Please enter a commit message to explain why this merge is necessary,
; especially if it merges an updated upstream into a topic branch.
;
; Lines starting with ';' will be ignored, and an empty message aborts
; the commit.
- 노드 에디터 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
결과:
- ✅ 수정 버튼에서 모달 제목과 설명을 설정할 수 있음
- ✅ 데이터테이블에서도 수정 모달 설정 가능
- ✅ 제목과 설명이 모달 헤더에 표시됨
- ✅ 설정하지 않으면 기본 동작 유지
- 테이블 헤더 스타일링 개선 (더 진한 배경색, 오렌지 호버 효과)
- 파일첨부 컴포넌트 개선 (뚝뚝 잘리는 문제 해결, 패딩/아이콘 크기 조정)
- 카드 디스플레이 스타일링 개선 (명확한 테두리, 오렌지 호버 효과)
- 라벨 표시 기능 수정 (드롭다운 라벨링 문제, 체크박스 풀리는 문제 해결)
- 패널 및 레이아웃 개선 (카드 간격 통일, 주황색 영역 추가)
- CSS 통일성 작업 (Select 컴포넌트 너비 w-48로 조정)
- 정렬 화살표 표시 조건 수정 (정렬된 컬럼에서만 화살표 표시)
- 테이블 스타일링 통일 (SingleTableWithSticky, TableListComponent, InteractiveDataTable)
- 템플릿 파일첨부 컴포넌트와 FileComponentConfigPanel 실시간 동기화
- FileUpload 위젯에 전역 파일 상태 관리 기능 추가
- 파일 업로드/삭제 시 전역 상태 및 localStorage 동기화
- RealtimePreview에서 전역 상태 우선 읽기 및 파일 개수 표시
- 한컴오피스, Apple iWork 파일 형식 지원 추가
- 파일 뷰어 모달 및 미리보기 기능 구현
- 업로드된 파일 디렉토리 .gitignore 추가
- 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 설정 최적화
kjs
leeheejin
hjlee
dohyeons