문제:
- 고정 높이 (h-[400px] sm:h-[500px])로 인해 데이터가 적어도 큰 공간 차지
- 하단에 빈 공간이 남는데도 스크롤이 생기는 비효율적인 UX
- overflow-y-scroll이 항상 스크롤바를 표시함
해결:
- 고정 높이 제거 → flex-1 (부모의 남은 공간 차지)
- overflow-y-scroll → overflow-y-auto (필요할 때만 스크롤)
- 데이터 양에 따라 자동으로 높이 조정
개선 사항:
✅ 데이터가 적을 때: 불필요한 공간 없이 컴팩트하게 표시
✅ 데이터가 많을 때: 자동으로 스크롤 생성
✅ 반응형 레이아웃에 자연스럽게 적응
✅ 스크롤바가 필요할 때만 표시되어 깔끔한 UI
문제:
- 그룹 헤더의 bg-muted/50 (반투명 배경)으로 인해 스크롤 시 뒤 내용이 비쳐 보임
- sticky 위치에서 가독성 저하
해결:
- bg-muted/50 → bg-muted (불투명 배경)
- hover 효과도 hover:bg-muted → hover:bg-muted/80으로 조정
- 스크롤 시 깔끔한 가림 효과 제공
개선 사항:
- sticky 그룹 헤더의 완전한 배경 덮기
- 스크롤 시 가독성 향상
- shadcn 가이드라인 준수 (단색 배경)
- 문제: 높이 입력 시 10 단위로만 입력 가능 (예: 1080 입력 불가)
- 원인: 격자 스냅 로직이 onChange마다 높이를 10/20 단위로 강제 반올림
- 해결:
1. 모든 number input 필드에 step="1" 추가
2. ScreenDesigner.tsx의 격자 스냅 로직 수정 (높이 스냅 제거)
3. UnifiedPropertiesPanel.tsx에 로컬 상태 추가하여 입력 중 스냅 방지
4. onBlur/Enter 시에만 실제 값 업데이트
수정 파일:
- frontend/components/screen/ScreenDesigner.tsx
- frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
- frontend/components/screen/panels/PropertiesPanel.tsx
- frontend/components/screen/panels/ResolutionPanel.tsx
- frontend/components/screen/panels/RowSettingsPanel.tsx
- frontend/components/screen/panels/webtype-configs/NumberTypeConfigPanel.tsx
- frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
; 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%
- 결과: 파란 테두리와 내부 콘텐츠가 동일한 크기로 정확히 표시
문제:
- optimizedConvertCode(value, meta.codeCategory) ❌
- 함수 정의: optimizedConvertCode(categoryCode, codeValue)
- 파라미터 순서가 반대로 전달되어 카테고리 값이 표시됨
해결:
- optimizedConvertCode(meta.codeCategory, value) ✅
- 올바른 순서: (카테고리, 코드값)
- 이제 코드명이 정상적으로 표시됨
변경:
- 파라미터 순서 수정
- 주석 추가로 재발 방지
요구사항:
- DB에 저장된 코드 값(예: '001') → 코드명(예: '활성')으로 표시
구현:
- inputType === 'code'이고 codeCategory가 있을 때 변환 수행
- optimizedConvertCode를 통해 코드 값 → 코드명 변환
- 변환 성공 시 코드명 반환
- 변환 실패 시 원본 코드 값 반환
- try-catch로 에러 핸들링 추가
- 디버깅을 위한 에러 로그 추가
변경:
- 코드 변환 로직 복원
- 에러 처리 강화
- 변환 실패 시 원본 값 표시로 안전장치
문제:
- inputType이 'code'인 컬럼에서 코드 변환이 실행되어
- 실제 저장된 값 대신 코드 카테고리 값이 표시됨
- 사용자가 원하는 것은 원본 값 그대로 표시
해결:
- 코드 변환 로직 완전 제거
- inputType에 관계없이 원본 값 그대로 표시
- 숫자/날짜 등 기본 포맷팅만 유지
변경:
- optimizedConvertCode 호출 제거
- inputType === 'code' 조건 제거
- 원본 데이터 표시로 단순화
문제:
- webType과 codeCategory가 있기만 하면 무조건 코드 변환 시도
- 코드 타입이 아닌 컬럼도 코드 카테고리 값으로 변환되는 오류
해결:
- webType === 'code'일 때만 코드 변환 수행
- 다른 webType(text, number 등)은 코드 변환 건너뛰기
변경:
- meta?.webType && meta?.codeCategory
→ meta?.webType === 'code' && meta?.codeCategory
- TableListComponent: showHeader 조건부 렌더링 제거
- 타이틀 표시 영역 삭제
- 공간 절약을 위해 헤더 완전 제거
- FlowWidget: 플로우 제목 및 설명 영역 제거
- flowData.name 표시 영역 삭제
- flowData.description 표시 영역 삭제
- 더 많은 데이터 표시 공간 확보
UI 개선:
- 불필요한 헤더 제거로 컨텐츠 영역 확대
- 더 많은 데이터를 한 화면에 표시 가능
- 다중 컬럼 선택으로 계층적 그룹화 지원
- 그룹 설정 다이얼로그 추가
- 그룹별 데이터 펼치기/접기 기능
- 그룹 헤더에 항목 개수 표시
- localStorage에 그룹 설정 저장/복원
- 그룹 해제 버튼 추가
- 그룹 표시 배지 UI
주요 기능:
- 사용자가 원하는 컬럼(들)을 선택하여 그룹화
- 그룹 키: '통화:KRW > 단위:EA' 형식으로 표시
- 그룹 헤더 클릭으로 펼치기/접기
- 그룹 없을 때는 기존 렌더링 방식 유지
🎨 UI 개선
- 필터 설정 다이얼로그 스타일을 플로우 위젯과 동일하게 변경
- hover:bg-gray-50으로 호버 효과 추가
- rounded-lg, p-3, space-x-3으로 간격 및 패딩 개선
- space-y-2, py-4로 리스트 아이템 간격 조정
🐛 버그 수정
- 필터 목록에 key prop 추가 (React 경고 해결)
- Label 컴포넌트 대신 label 태그 사용 (불필요한 import 제거)
📝 변경 사항
- 플로우 위젯과 동일한 체크박스 리스트 스타일 적용
- 더 명확하고 클릭하기 쉬운 UI로 개선
✅ 결과
- 필터 설정 다이얼로그가 플로우 위젯과 일관된 스타일로 표시됨
- 테이블 헤더와 데이터 셀 모두에 whitespace-nowrap 적용
- 모바일에서도 텍스트가 2줄로 깨지지 않음
- overflow-hidden + text-ellipsis로 긴 텍스트 처리
- TableListComponent와 InteractiveDataTable 모두 적용
이제 화면을 줄여도 텍스트가 항상 1줄로 유지됨
- 모든 테이블 헤더를 가운데 정렬 (text-center)
- 숫자 타입(number, decimal) 데이터를 우측 정렬
- TableListComponent: inputType 기반 숫자 판단
- InteractiveDataTable: widgetType 기반 숫자 판단
- 체크박스는 기존대로 가운데 정렬 유지
- 일반 텍스트는 좌측 정렬 유지
더 읽기 쉬운 테이블 레이아웃 완성
- 체크박스 컬럼(__checkbox__)을 48px 고정 너비로 설정
- width, minWidth, maxWidth 모두 48px 적용
- 체크박스 컬럼에서 리사이즈 핸들 제거
- 초기 너비 측정 시 체크박스 컬럼 제외
- 테이블 헤더와 본문 셀 모두 적용
- InteractiveDataTable과 일관된 체크박스 컬럼 스타일
- 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)
- CSS minWidth 제거 (table-layout: fixed와 충돌)
- JavaScript에서 Math.max(80, width)로 최소 너비 보장
- 드래그 중과 마우스 업 시 모두 80px 최소값 적용
- 모든 디버그 로그 제거
- 깔끔하고 부드러운 리사이즈 완성
- 핸들 너비를 1px에서 2px로 증가
- z-index: 20 추가로 다른 요소 위에 표시
- padding과 negative margin으로 클릭 영역 확대 (좌우 4px씩)
- onClick에 stopPropagation 추가하여 정렬 클릭 방지
- 더 쉽게 클릭하고 드래그할 수 있도록 개선
- 실제 화면에서 사용되는 TableListComponent에도 리사이즈 기능 추가
- InteractiveDataTable과 동일한 리사이즈 핸들 구현
- columnWidths 상태로 각 컬럼 너비 관리
- 드래그 중 텍스트 선택 방지 및 이벤트 전파 차단
- 최소 너비 80px 보장
kjs
leeheejin
hjlee