feature/screen-management #177

kjs · 2025-11-03T14:42:40+09:00

kjs commented

2025-11-03 14:42:40 +09:00

No description provided.

kjs added 50 commits 2025-11-03 14:42:40 +09:00

1d9634ac41 fix: 화면 저장 후 버튼 텍스트 색상 수정

🐛 버그 수정
- 화면 저장 성공 모달의 버튼 텍스트가 검은색으로 표시되던 문제 해결
- '화면 목록으로 이동' 버튼에 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

✅ 결과
- 모든 버튼 텍스트가 흰색으로 정상 표시됨

aef62454c2 fix: 자동 리다이렉트 타이머 정리 문제 해결

🐛 버그 수정
- 화면 목록으로 이동 버튼 클릭 후에도 3초 타이머가 계속 실행되던 문제 해결
- 빠르게 버튼 클릭 후 다른 화면 진입 시 다시 튕겨나는 현상 수정

�� 변경 내용
- useRef로 타이머 참조 저장 (autoRedirectTimerRef)
- 모달이 닫힐 때 타이머 정리 (clearTimeout)
- 컴포넌트 언마운트 시 타이머 정리
- '화면 목록으로 이동' 버튼 클릭 시 타이머 즉시 정리

📝 기술적 개선
- setTimeout 타이머를 useRef로 관리
- useEffect cleanup 함수에서 타이머 정리
- 버튼 onClick에서 타이머 수동 정리

✅ 결과
- 버튼 클릭 시 타이머가 즉시 정리됨
- 다른 화면으로 이동 후 3초 뒤 튕겨나지 않음
- 메모리 누수 방지

8e9daf5b22 feat: 수정 모달 자동 닫기 및 테이블 새로고침 기능 구현

- EditModal: 저장 완료 후 자동으로 닫히고 부모 테이블 새로고침
- buttonActions.ts: 저장 성공 후 closeEditModal 이벤트 발생
- InteractiveScreenViewerDynamic: onSave prop 추가하여 EditModal 연동
- InteractiveDataTable: EditModal 열 때 onSave 콜백으로 loadData 전달
- 두 가지 시나리오 모두 지원:
  1. InteractiveScreenViewerDynamic 버튼의 onSave 호출
  2. DynamicComponentRenderer 버튼의 buttonActions.ts 처리

2ddda380f2 fix: 제어관리 제목 입력 시 백스페이스로 노드가 삭제되는 문제 해결

- FlowToolbar의 플로우 이름 입력 필드에 onKeyDown 이벤트 핸들러 추가
- e.stopPropagation()으로 키 이벤트가 FlowEditor로 전파되지 않도록 차단
- FlowEditor의 Backspace/Delete 키 처리가 입력 필드에 영향을 주지 않도록 수정

c9eacb8f4a feat: 모든 숫자에 천 단위 콤마 자동 표시

- InteractiveDataTable: number/decimal 타입 셀에 천 단위 콤마 적용
- FlowWidget: 스텝 카운트, 데이터 셀, 페이지 정보에 천 단위 콤마 적용
- formatValue 함수로 숫자 자동 감지 및 포맷팅
- 문자열로 저장된 숫자도 자동으로 포맷팅 처리
- toLocaleString('ko-KR') 사용으로 한국식 숫자 표기

c9905a6dea debug: 숫자 컬럼 포맷팅 디버그 로그 추가

- 어떤 컬럼이 숫자 포맷팅을 시도하는지 확인
- widgetType과 실제 값의 타입을 콘솔에 출력
- 콤마가 안 찍히는 컬럼 원인 파악용

7b676a6aff fix: TableListComponent에서 숫자 타입 컬럼 천 단위 콤마 표시

- inputType이 number 또는 decimal인 컬럼에 천 단위 콤마 자동 적용
- 문자열로 저장된 숫자도 parseFloat 후 포맷팅 처리
- format 속성보다 inputType을 우선 체크하도록 수정

68aafb3732 debug: TableListComponent formatCellValue 디버그 로그 추가

- 각 컬럼의 inputType, format, value 확인용
- 숫자 포맷팅이 안 되는 원인 파악

1c571ee3c3 feat: 테이블 관리의 입력 타입 기반 자동 숫자 포맷팅

- TableListComponent: table_type_columns의 input_type 정보를 가져와서 숫자 포맷팅
- getColumnInputTypes API 추가로 컬럼별 입력 타입 조회
- columnMeta에 inputType 포함하여 formatCellValue에서 사용
- 테이블 관리에서 설정한 입력 타입(number/decimal)에 따라 자동으로 천 단위 콤마 표시
- 근본적인 해결: 컬럼명 기반이 아닌 실제 설정값 기반 포맷팅

8a77e6d33c fix: getColumnInputTypes가 column_labels 테이블 조회하도록 수정

- 기존: table_type_columns 테이블 조회 (잘못된 테이블)
- 수정: column_labels 테이블 조회 (올바른 테이블)
- 이제 테이블 관리에서 설정한 input_type이 정확하게 반영됨

dcf07fdd5e chore: TableListComponent 디버그 로그 제거

- 숫자 포맷팅 확인 완료
- column_labels 테이블 조회로 정확한 input_type 가져오기 검증 완료

b40e3d4b8b feat: InteractiveDataTable 컬럼 너비 드래그 조절 기능 추가

- 각 컬럼 헤더 오른쪽에 리사이즈 핸들 추가
- 드래그로 컬럼 너비를 자유롭게 조절 가능
- 최소 너비 80px 보장
- 마지막 컬럼 제외하고 모든 컬럼에 리사이즈 핸들 표시
- hover 시 파란색으로 강조되어 UX 개선

a3a4664bb0 fix: 컬럼 리사이즈 중 텍스트 선택 방지

- 컬럼 헤더에 select-none, userSelect: 'none' 추가
- 드래그 중 document.body.userSelect = 'none'으로 전역 텍스트 선택 차단
- 드래그 완료 후 userSelect 복원
- 드래그 중 cursor를 col-resize로 고정하여 UX 개선

56cd2a9407 fix: 컬럼 리사이즈 시 컴포넌트 드래그 이벤트 전파 방지

- e.stopPropagation() 추가로 리사이즈 핸들 드래그 시 상위 컴포넌트로 이벤트 전파 차단
- 화면 디자이너에서 컴포넌트가 의도치 않게 이동되는 문제 해결

107f722e7a fix: 실제 화면에서 컴포넌트 드래그 비활성화

- RealtimePreviewDynamic의 draggable을 isDesignMode 조건부로 변경
- 디자인 모드(화면 편집)에서만 드래그 가능
- 실제 화면(프리뷰/실행)에서는 드래그 불가능
- onDragStart, onDragEnd도 조건부로 적용

787bfd363f feat: TableListComponent 컬럼 너비 드래그 조절 기능 추가

- 실제 화면에서 사용되는 TableListComponent에도 리사이즈 기능 추가
- InteractiveDataTable과 동일한 리사이즈 핸들 구현
- columnWidths 상태로 각 컬럼 너비 관리
- 드래그 중 텍스트 선택 방지 및 이벤트 전파 차단
- 최소 너비 80px 보장

4a5c21a3ba fix: 리사이즈 핸들 클릭 영역 개선

- 핸들 너비를 1px에서 2px로 증가
- z-index: 20 추가로 다른 요소 위에 표시
- padding과 negative margin으로 클릭 영역 확대 (좌우 4px씩)
- onClick에 stopPropagation 추가하여 정렬 클릭 방지
- 더 쉽게 클릭하고 드래그할 수 있도록 개선

9f501aa839 debug: 리사이즈 핸들 이벤트 디버그 로그 추가

- 마우스다운, 드래그, 마우스업 이벤트 로그
- 시작 너비, 이동 거리, 새 너비 출력
- 이벤트가 제대로 발생하는지 확인용

48cacf0409 perf: requestAnimationFrame으로 리사이즈 성능 최적화

- 드래그 중 과도한 리렌더링 방지
- requestAnimationFrame으로 throttling 적용
- 초당 60프레임으로 제한하여 부드러운 리사이즈
- cancelAnimationFrame으로 중복 업데이트 방지

97ce6d3691 fix: useRef로 컬럼 리사이즈 성능 근본 해결

- columnRefs로 DOM 요소 직접 참조
- 드래그 중에는 DOM 스타일만 변경 (리렌더링 없음)
- 드래그 완료 시에만 state 업데이트
- 불필요한 컴포넌트 재초기화 완전 제거
- 부드러운 리사이즈 경험 제공

c8540b170e fix: table-layout fixed로 컬럼 리사이즈 활성화

- tableLayout: 'fixed' 추가로 컬럼 너비가 DOM 스타일로 제어 가능하도록 설정
- table-layout: auto(기본값)에서는 브라우저가 자동으로 너비를 재조정하여 무시됨
- fixed 모드에서는 설정한 너비가 정확하게 적용됨

3ada095e43 fix: 컬럼 리사이즈 최소 너비 80px 적용 및 디버그 로그 제거

- CSS minWidth 제거 (table-layout: fixed와 충돌)
- JavaScript에서 Math.max(80, width)로 최소 너비 보장
- 드래그 중과 마우스 업 시 모두 80px 최소값 적용
- 모든 디버그 로그 제거
- 깔끔하고 부드러운 리사이즈 완성

511884f323 fix: 컬럼 초기 너비 이하로 줄어들지 않는 문제 해결

✅ 해결 방법:
- 백분율 defaultWidth 제거, 초기값은 undefined로 설정
- ref callback에서 첫 렌더링 시 실제 offsetWidth 측정
- 측정한 실제 너비를 columnWidths state에 저장
- 이후 드래그로 80px까지 줄일 수 있음

✅ 적용 파일:
- TableListComponent.tsx (실제 화면)
- InteractiveDataTable.tsx (디자인 모드)

✅ 기술적 개선:
- table-layout: fixed + 동적 초기 너비 측정
- DOM 직접 조작으로 부드러운 리사이즈
- 최소 80px 보장 (Math.max)

3332c87293 fix: 컬럼 리사이즈 무한 리렌더링 및 원위치 복귀 문제 해결

- ref callback에서 state 업데이트 제거
- useEffect + setTimeout으로 초기 너비 측정 (한 번만)
- hasInitializedWidths useRef로 중복 측정 방지
- columnRefs useRef로 DOM 직접 참조
- 드래그 중 리렌더링 없이 DOM만 직접 조작
- 부드럽고 정확한 리사이즈 구현 완료

3a75549ffe fix: 체크박스 컬럼을 48px 고정 너비로 설정

- InteractiveDataTable의 체크박스 컬럼/셀을 48px 고정
- width, minWidth, maxWidth 모두 48px로 설정
- 플로우 위젯처럼 작고 깔끔한 체크박스 컬럼
- 리사이즈 대상에서 제외

6aa25fa852 fix: TableListComponent 체크박스 컬럼 48px 고정

- 체크박스 컬럼(__checkbox__)을 48px 고정 너비로 설정
- width, minWidth, maxWidth 모두 48px 적용
- 체크박스 컬럼에서 리사이즈 핸들 제거
- 초기 너비 측정 시 체크박스 컬럼 제외
- 테이블 헤더와 본문 셀 모두 적용
- InteractiveDataTable과 일관된 체크박스 컬럼 스타일

5376d7198d fix: 체크박스 컬럼 패딩 제거 및 중앙 정렬

- 체크박스 컬럼에서 px 패딩 제거 (px-0)
- 체크박스 컬럼 중앙 정렬 (textAlign: center)
- 일반 컬럼은 기존 패딩 유지
- 체크박스와 다른 컬럼의 시각적 구분 명확화
- 불필요한 공간 제거로 깔끔한 UI

516bcafb2c feat: 테이블 정렬 개선 - 헤더 가운데, 숫자 우측 정렬

- 모든 테이블 헤더를 가운데 정렬 (text-center)
- 숫자 타입(number, decimal) 데이터를 우측 정렬
- TableListComponent: inputType 기반 숫자 판단
- InteractiveDataTable: widgetType 기반 숫자 판단
- 체크박스는 기존대로 가운데 정렬 유지
- 일반 텍스트는 좌측 정렬 유지

더 읽기 쉬운 테이블 레이아웃 완성

f9bd7bbcb3 fix: 컬럼 리사이즈 시 정렬이 트리거되는 문제 해결

문제:
- 컬럼 너비를 조절할 때 자동으로 정렬이 실행됨
- 리사이즈 핸들 클릭이 헤더의 onClick 이벤트를 트리거

해결:
- isResizing useRef 플래그 추가
- 리사이즈 시작 시 플래그를 true로 설정
- 헤더 onClick에서 isResizing.current 체크
- 리사이즈 중이면 정렬 실행 안함
- mouseup 후 100ms 지연으로 플래그 해제

적용:
- TableListComponent
- InteractiveDataTable

이제 컬럼 리사이즈가 정렬을 방해하지 않음

40efb391ea feat: 리스트 헤더 스타일 개선 - 그라데이션 배경, 굵은 테두리, 호버 효과 추가

714511c3cf fix: 텍스트 줄바꿈 문제 방지 - 모든 셀에 whitespace-nowrap 적용

- 테이블 헤더와 데이터 셀 모두에 whitespace-nowrap 적용
- 모바일에서도 텍스트가 2줄로 깨지지 않음
- overflow-hidden + text-ellipsis로 긴 텍스트 처리
- TableListComponent와 InteractiveDataTable 모두 적용

이제 화면을 줄여도 텍스트가 항상 1줄로 유지됨

cbf8576897 feat: DataTableTemplate에 플로우 위젯 스타일 검색 필터 기능 추가

✨ 새로운 기능
- 플로우 위젯과 동일한 검색 필터 설정 기능 구현
- 사용자가 원하는 컬럼만 선택하여 검색 가능
- localStorage 기반 필터 설정 저장/복원

🎨 UI 추가
- '검색 필터 설정' 버튼 (FlowWidget 스타일)
- 선택된 컬럼의 동적 검색 입력 필드
- 필터 개수 뱃지 표시
- 체크박스 기반 필터 설정 다이얼로그

🔧 기술적 구현
- searchFilterColumns 상태로 선택된 컬럼 관리
- searchValues 상태로 각 컬럼별 검색값 관리
- useAuth 훅으로 사용자별 필터 설정 저장
- Grid 레이아웃으로 검색 필드 반응형 배치

📝 변경된 파일
- frontend/components/screen/templates/DataTableTemplate.tsx

✅ 테스트 완료
- 필터 설정 저장/복원
- 동적 검색 필드 생성
- 반응형 레이아웃
- 미리보기 모드에서 비활성화

e0e7bc387e fix: TableListComponent 필터 설정 다이얼로그 스타일 개선

🎨 UI 개선
- 필터 설정 다이얼로그 스타일을 플로우 위젯과 동일하게 변경
- hover:bg-gray-50으로 호버 효과 추가
- rounded-lg, p-3, space-x-3으로 간격 및 패딩 개선
- space-y-2, py-4로 리스트 아이템 간격 조정

🐛 버그 수정
- 필터 목록에 key prop 추가 (React 경고 해결)
- Label 컴포넌트 대신 label 태그 사용 (불필요한 import 제거)

📝 변경 사항
- 플로우 위젯과 동일한 체크박스 리스트 스타일 적용
- 더 명확하고 클릭하기 쉬운 UI로 개선

✅ 결과
- 필터 설정 다이얼로그가 플로우 위젯과 일관된 스타일로 표시됨

297870a24c feat: TableListComponent에 FlowWidget과 동일한 필터 설정 UI 구현

- 전체 선택/해제 기능 추가
- 선택된 컬럼 개수 표시 추가
- 필터 설정 localStorage 저장/로드 기능
- 체크된 항목만 실제 검색 필터로 표시
- 저장 시 Toast 알림 추가
- FlowWidget과 완전히 동일한 UI/UX 적용

c7db82a8a5 fix: TableListComponent filterSettingKey 중복 정의 제거

- 중복된 filterSettingKey 변수 정의 중 하나 제거
- 빌드 에러 해결

8248c8dc96 fix: TableListComponent에 toast import 추가

- sonner의 toast 함수 import 추가
- 필터 설정 저장 시 알림 기능 정상 작동

b607ef0aa0 feat: TableListComponent에 그룹핑 기능 구현

- 다중 컬럼 선택으로 계층적 그룹화 지원
- 그룹 설정 다이얼로그 추가
- 그룹별 데이터 펼치기/접기 기능
- 그룹 헤더에 항목 개수 표시
- localStorage에 그룹 설정 저장/복원
- 그룹 해제 버튼 추가
- 그룹 표시 배지 UI

주요 기능:
- 사용자가 원하는 컬럼(들)을 선택하여 그룹화
- 그룹 키: '통화:KRW > 단위:EA' 형식으로 표시
- 그룹 헤더 클릭으로 펼치기/접기
- 그룹 없을 때는 기존 렌더링 방식 유지

eb9c85f786 feat: FlowWidget에 그룹핑 기능 구현

- TableListComponent와 동일한 그룹핑 기능 적용
- 다중 컬럼 선택으로 계층적 그룹화 지원
- 그룹 설정 다이얼로그 추가
- 그룹별 데이터 펼치기/접기 기능
- 그룹 헤더에 항목 개수 표시
- localStorage에 그룹 설정 저장/복원
- 그룹 해제 버튼 추가
- 그룹 표시 배지 UI

주요 기능:
- 플로우 스텝 데이터에 그룹화 적용
- filteredData와 stepData 모두 지원
- 그룹 없을 때는 기존 페이지네이션 유지
- 그룹 있을 때는 모든 그룹 데이터 표시

71f38a38e0 fix: FlowWidget groupSettingKey 변수명 오류 수정

- selectedStep -> selectedStepId로 수정
- groupSettingKey 선언 위치를 useEffect 이전으로 이동
- 중복 선언 제거

ac40f0227e refactor: TableListComponent와 FlowWidget 상단 헤더 제거

- TableListComponent: showHeader 조건부 렌더링 제거
  - 타이틀 표시 영역 삭제
  - 공간 절약을 위해 헤더 완전 제거

- FlowWidget: 플로우 제목 및 설명 영역 제거
  - flowData.name 표시 영역 삭제
  - flowData.description 표시 영역 삭제
  - 더 많은 데이터 표시 공간 확보

UI 개선:
- 불필요한 헤더 제거로 컨텐츠 영역 확대
- 더 많은 데이터를 한 화면에 표시 가능

4386a009a4 refactor: FlowWidget 스텝 카드에서 스텝 이름 제거

- 스텝 이름(stepName) 표시 영역 완전 제거
- 데이터 건수만 표시하도록 간소화
- 하단 선택 바와 건수만으로 스텝 구분
- 패딩 조정 (pb-5 -> pb-3, pb-6 -> pb-4)

UI 개선:
- 스텝 영역 높이 감소로 공간 절약
- 더 많은 데이터 표시 공간 확보
- 시각적으로 더 간결한 인터페이스

e6cc671808 refactor: FlowWidget 데이터 테이블 헤더 제거

변경사항:
- 스텝 이름 복원 (탭 영역에 표시되므로 필요)
- 데이터 테이블 위 헤더 영역 제거
  - 스텝 이름 중복 표시 제거
  - '총 N건의 데이터' 표시 제거
  - 필터링/선택 건수 표시 제거
- 필터 설정 및 그룹 설정 버튼은 유지
- justify-end로 버튼 오른쪽 정렬

UI 개선:
- 데이터 영역 확대로 더 많은 정보 표시
- 중복 정보 제거로 깔끔한 인터페이스
- 필요한 설정 버튼만 간결하게 배치

9f4884f761 fix: FlowWidget JSX 구조 오류 수정

- Fragment(<>)로 그룹 표시 배지와 검색 필터 영역 감싸기
- stepDataColumns.length > 0 조건 내부로 모든 관련 UI 통합
- 닫는 태그 구조 수정

빌드 오류 해결:
- Expected '</>', got '{' 에러 해결
- JSX 중첩 구조 정상화

57738fbfc2 refactor: FlowWidget 검색 필터 UI를 한 줄로 통합

변경사항:
- 검색 필터 입력 필드를 버튼과 같은 Y좌표에 배치
- Label 제거 (placeholder로 충분)
- flex-wrap으로 여러 필터 자동 줄바꿈
- 고정 너비(w-40)로 일관된 입력 필드 크기
- 초기화 버튼 ml-auto로 오른쪽 정렬
- grid 레이아웃 제거하고 flex로 변경

UI 개선:
- TableListComponent와 동일한 스타일 적용
- 공간 절약 및 깔끔한 인터페이스
- 필터 설정, 그룹 설정, 검색 입력이 모두 같은 영역에 위치

d9681bb64d refactor: FlowWidget 검색 필터를 설정 버튼과 같은 줄에 배치

변경사항:
- 검색 필터 입력 필드를 필터 설정/그룹 설정 버튼과 동일한 Y좌표에 배치
- 한 줄 레이아웃: [검색입력들...] [초기화] ... [필터설정] [그룹설정]
- ml-auto로 설정 버튼들 오른쪽 정렬
- 검색 필드는 왼쪽부터, 설정 버튼은 오른쪽에 배치
- 중복된 검색 필터 입력 영역 제거

UI 개선:
- 모든 컨트롤이 하나의 수평선상에 위치
- 공간 효율성 극대화
- 사용자가 요청한 레이아웃 정확히 구현

e732ed2891 fix: TableListComponent 코드 변환 조건 수정

문제:
- webType과 codeCategory가 있기만 하면 무조건 코드 변환 시도
- 코드 타입이 아닌 컬럼도 코드 카테고리 값으로 변환되는 오류

해결:
- webType === 'code'일 때만 코드 변환 수행
- 다른 webType(text, number 등)은 코드 변환 건너뛰기

변경:
- meta?.webType && meta?.codeCategory
  → meta?.webType === 'code' && meta?.codeCategory

6a329506a8 fix: TableListComponent 코드 변환 로직 완전 제거

문제:
- inputType이 'code'인 컬럼에서 코드 변환이 실행되어
- 실제 저장된 값 대신 코드 카테고리 값이 표시됨
- 사용자가 원하는 것은 원본 값 그대로 표시

해결:
- 코드 변환 로직 완전 제거
- inputType에 관계없이 원본 값 그대로 표시
- 숫자/날짜 등 기본 포맷팅만 유지

변경:
- optimizedConvertCode 호출 제거
- inputType === 'code' 조건 제거
- 원본 데이터 표시로 단순화

a3f945f5df fix: TableListComponent 코드 변환 로직 재추가 및 개선

요구사항:
- DB에 저장된 코드 값(예: '001') → 코드명(예: '활성')으로 표시

구현:
- inputType === 'code'이고 codeCategory가 있을 때 변환 수행
- optimizedConvertCode를 통해 코드 값 → 코드명 변환
- 변환 성공 시 코드명 반환
- 변환 실패 시 원본 코드 값 반환
- try-catch로 에러 핸들링 추가
- 디버깅을 위한 에러 로그 추가

변경:
- 코드 변환 로직 복원
- 에러 처리 강화
- 변환 실패 시 원본 값 표시로 안전장치

9a3d65d8d0 fix: TableListComponent 코드 변환 파라미터 순서 수정

문제:
- optimizedConvertCode(value, meta.codeCategory) ❌
- 함수 정의: optimizedConvertCode(categoryCode, codeValue)
- 파라미터 순서가 반대로 전달되어 카테고리 값이 표시됨

해결:
- optimizedConvertCode(meta.codeCategory, value) ✅
- 올바른 순서: (카테고리, 코드값)
- 이제 코드명이 정상적으로 표시됨

변경:
- 파라미터 순서 수정
- 주석 추가로 재발 방지

7aecae559b Merge branch 'feature/screen-management' of http://39.117.244.52:3000/kjs/ERP-node into feature/screen-management

kjs added 1 commit 2025-11-03 14:42:47 +09:00

e089b41395 Merge branch 'main' into feature/screen-management

kjs merged commit 4dba7c0a16 into main

2025-11-03 14:42:54 +09:00

kjs referenced this issue from a commit

2025-11-03 14:42:55 +09:00

Merge pull request 'feature/screen-management' (#177) from feature/screen-management into main

Sign in to join this conversation.

No reviewers

No Label

No Milestone