; 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.
주요 변경사항:
- 격자 설정을 편집 탭에서 항상 표시 (해상도 설정 하단)
- 그리드 컬럼 수 동적 조정 가능 (1-24)
- 컴포넌트 생성 시 현재 그리드 컬럼 수 기반 자동 계산
- 컴포넌트 너비가 설정한 컬럼 수대로 정확히 표시되도록 수정
수정된 파일:
- ScreenDesigner: 컴포넌트 드롭 시 gridColumns와 style.width 동적 계산
- UnifiedPropertiesPanel: 격자 설정 UI 통합, 차지 컬럼 수 설정 시 width 자동 계산
- RealtimePreviewDynamic: getWidth 우선순위 수정, DOM 크기 디버깅 로그 추가
- 8개 컴포넌트: componentStyle.width를 항상 100%로 고정
* ButtonPrimaryComponent
* TextInputComponent
* NumberInputComponent
* TextareaBasicComponent
* DateInputComponent
* TableListComponent
* CardDisplayComponent
문제 해결:
- 컴포넌트 내부에서 component.style.width를 재사용하여 이중 축소 발생
- 해결: 부모 컨테이너(RealtimePreviewDynamic)가 width 제어, 컴포넌트는 항상 100%
- 결과: 파란 테두리와 내부 콘텐츠가 동일한 크기로 정확히 표시
변경사항:
- 검색 필터 입력 필드를 필터 설정/그룹 설정 버튼과 동일한 Y좌표에 배치
- 한 줄 레이아웃: [검색입력들...] [초기화] ... [필터설정] [그룹설정]
- ml-auto로 설정 버튼들 오른쪽 정렬
- 검색 필드는 왼쪽부터, 설정 버튼은 오른쪽에 배치
- 중복된 검색 필터 입력 영역 제거
UI 개선:
- 모든 컨트롤이 하나의 수평선상에 위치
- 공간 효율성 극대화
- 사용자가 요청한 레이아웃 정확히 구현
변경사항:
- 검색 필터 입력 필드를 버튼과 같은 Y좌표에 배치
- Label 제거 (placeholder로 충분)
- flex-wrap으로 여러 필터 자동 줄바꿈
- 고정 너비(w-40)로 일관된 입력 필드 크기
- 초기화 버튼 ml-auto로 오른쪽 정렬
- grid 레이아웃 제거하고 flex로 변경
UI 개선:
- TableListComponent와 동일한 스타일 적용
- 공간 절약 및 깔끔한 인터페이스
- 필터 설정, 그룹 설정, 검색 입력이 모두 같은 영역에 위치
- Fragment(<>)로 그룹 표시 배지와 검색 필터 영역 감싸기
- stepDataColumns.length > 0 조건 내부로 모든 관련 UI 통합
- 닫는 태그 구조 수정
빌드 오류 해결:
- Expected '</>', got '{' 에러 해결
- JSX 중첩 구조 정상화
변경사항:
- 스텝 이름 복원 (탭 영역에 표시되므로 필요)
- 데이터 테이블 위 헤더 영역 제거
- 스텝 이름 중복 표시 제거
- '총 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 추가하여 정렬 클릭 방지
- 더 쉽게 클릭하고 드래그할 수 있도록 개선
leeheejin
hjlee
kjs
dohyeons