- TableOptionsContext 기반 테이블 자동 감지 시스템 구현
- 독립 위젯으로 드래그앤드롭 배치 가능
- 3가지 기능: 컬럼 가시성, 필터 설정, 그룹 설정
- FlowWidget, TableList, SplitPanel 등 모든 테이블 컴포넌트 지원
- 유틸리티 카테고리에 등록 (1920×80px)
- 위젯 크기 제어 가이드 룰 파일에 추가
- 백엔드: screenManagementService에 getMenuByScreen 함수 추가
- 백엔드: GET /api/screen-management/screens/:id/menu 엔드포인트 추가
- 프론트엔드: screenApi.getScreenMenu() 함수 추가
- ScreenDesigner: 화면 로드 시 menu_objid 자동 조회
- ScreenDesigner: menuObjid를 RealtimePreview와 UnifiedPropertiesPanel에 전달
- UnifiedPropertiesPanel: menuObjid를 DynamicComponentConfigPanel에 전달
이로써 화면 편집기에서 코드/카테고리/채번규칙이 해당 화면이 할당된 메뉴 기준으로 필터링됨
✅ 주요 변경사항:
- 백엔드: menuService.ts 추가 (형제 메뉴 조회 유틸리티)
- 백엔드: numberingRuleService.getAvailableRulesForMenu() 메뉴 스코프 적용
- 백엔드: tableCategoryValueService 메뉴 스코프 준비 (menuObjid 파라미터 추가)
- 프론트엔드: TextInputConfigPanel에 부모 메뉴 선택 UI 추가
- 프론트엔드: 메뉴별 채번규칙 필터링 (형제 메뉴 공유)
🔧 기술 세부사항:
- getSiblingMenuObjids(): 같은 부모를 가진 형제 메뉴 OBJID 조회
- 채번규칙 우선순위: menu (형제) > table > global
- 사용자 메뉴(menu_type='1') 레벨 2만 부모 메뉴로 선택 가능
📝 다음 단계:
- 카테고리 컴포넌트도 메뉴 스코프로 전환 예정
- 문제: 너비 입력 시 onChange에서 즉시 업데이트되어 30에서 3을 지우기 어려움
- 해결:
1. localWidth 상태 추가
2. onChange: 로컬 상태만 업데이트 (완전 자유 입력)
3. onBlur/Enter: 실제 업데이트 + 10px 단위 스냅
4. useEffect로 컴포넌트 변경 시 localWidth 동기화
- 영향:
- 30 입력 시 3, 0 모두 자유롭게 지우고 입력 가능
- 포커스 아웃 시에만 10px 단위로 정렬
- 문제: 너비/높이 입력 시 즉시 10px 단위로 스냅되어 자유 입력 불가
- 해결:
1. 너비: onChange에서는 입력값 그대로 반영, onBlur에서 10px 단위로 스냅
2. 높이: 로컬 상태로 자유 입력 허용, onBlur/Enter 시 10px 단위로 스냅
3. step을 10에서 1로 변경하여 자유 입력 가능
- 영향:
- 입력 중에는 원하는 값 입력 가능
- 입력 완료 시(포커스 아웃 또는 Enter) 자동으로 10px 단위로 정렬
주요 변경사항:
- 드래그앤드롭 컬럼의 라벨 숨김 및 placeholder로 라벨명 표시
- 기본 높이 30px로 변경
- 5개 시스템 컬럼(id, created_date, updated_date, writer, company_code) 숨김
- AI-개발자 협업 작업 수칙 문서 작성 및 .cursorrules에 통합
파일 변경:
- frontend/components/screen/ScreenDesigner.tsx
* getDefaultHeight(): 기본 높이를 30px로 변경
* handleDrop(): labelDisplay false, placeholder 추가
- frontend/components/screen/panels/TablesPanel.tsx
* hiddenColumns Set으로 시스템 컬럼 필터링
- .cursor/rules/ai-developer-collaboration-rules.mdc (신규)
* 확인 우선, 한 번에 하나, 철저한 마무리 원칙
* 데이터베이스 검증, 코드 수정, 테스트, 커뮤니케이션 규칙
- .cursorrules
* 필수 확인 규칙 섹션 추가
* 모든 작업 시작/완료 시 협업 규칙 확인 강제화
- 채번 규칙 scope_type을 table로 단순화
- 화면의 테이블명을 자동으로 감지하여 채번 규칙 필터링
- TextInputConfigPanel에 screenTableName prop 추가
- getAvailableNumberingRulesForScreen API로 테이블 기반 조회
- NumberingRuleDesigner에서 자동으로 테이블명 설정
- webTypeConfigConverter 유틸리티 추가 (기존 화면 호환성)
- AutoGenerationConfig 타입 개선 (enabled, options.numberingRuleId)
- 채번 규칙 선택 UI에서 ID 제거, 설명 추가
- 불필요한 console.log 제거
Backend:
- numberingRuleService: 테이블 기반 필터링 로직 구현
- numberingRuleController: available-for-screen 엔드포인트 수정
Frontend:
- TextInputConfigPanel: 테이블명 기반 채번 규칙 로드
- NumberingRuleDesigner: 적용 범위 UI 제거, 테이블명 자동 설정
- ScreenDesigner: webTypeConfig → autoGeneration 변환 로직 통합
- DetailSettingsPanel: autoGeneration 속성 매핑 개선
- 문제: 높이 입력 시 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
주요 변경사항:
- 격자 설정을 편집 탭에서 항상 표시 (해상도 설정 하단)
- 그리드 컬럼 수 동적 조정 가능 (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%
- 결과: 파란 테두리와 내부 콘텐츠가 동일한 크기로 정확히 표시
- 모든 테이블 컴포넌트의 외곽 테두리(border) 제거
- 테이블 컨테이너의 라운드(rounded-lg) 제거
- 테이블 행 구분선(border-b)은 유지하여 데이터 구분
- FlowWidget과 TableListComponent에 동일한 스타일 적용
- 검색 필터 영역의 회색 배경(bg-muted/30) 제거
- 검색 필터 제목 제거
- AdvancedSearchFilters 컴포넌트의 '검색 필터' 제목 제거
- 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. 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
결과:
- ✅ 수정 버튼에서 모달 제목과 설명을 설정할 수 있음
- ✅ 데이터테이블에서도 수정 모달 설정 가능
- ✅ 제목과 설명이 모달 헤더에 표시됨
- ✅ 설정하지 않으면 기본 동작 유지
- 템플릿 파일첨부 컴포넌트와 FileComponentConfigPanel 실시간 동기화
- FileUpload 위젯에 전역 파일 상태 관리 기능 추가
- 파일 업로드/삭제 시 전역 상태 및 localStorage 동기화
- RealtimePreview에서 전역 상태 우선 읽기 및 파일 개수 표시
- 한컴오피스, Apple iWork 파일 형식 지원 추가
- 파일 뷰어 모달 및 미리보기 기능 구현
- 업로드된 파일 디렉토리 .gitignore 추가
- admin/screenMng, dataflow 페이지에 tableMng 레퍼런스 레이아웃 적용
- admin/standards 페이지 JSX 괄호 문제 수정
- 전체 관리자 페이지 UI 일관성 향상
- bg-gray-50 배경, container 구조, 통일된 제목 스타일 적용
- 테이블 타입 관리에서 엔티티 타입의 표시 컬럼 설정 완전 제거
- 컬럼 설정 패널에서 엔티티 타입일 때 표시 컬럼 조합 선택 기능 추가
- 기본 테이블과 조인 테이블의 컬럼을 자유롭게 조합 가능
- 구분자 설정 및 실시간 미리보기 기능 포함
- 별도 모달 방식 제거하고 기존 컬럼 설정 패널에 통합
Frontend:
- EntityTypeConfig 인터페이스에 displayColumns 배열 추가
- EntityTypeConfigPanel에서 여러 표시 컬럼 선택 UI 구현
- 구분자 설정 기능 추가
- 하위 호환성을 위한 displayColumn 유지
Backend:
- EntityJoinConfig에 displayColumns 배열 지원
- 화면별 엔티티 설정을 전달받는 API 확장
- CONCAT을 사용한 다중 컬럼 표시 SQL 생성
- 기존 단일 컬럼과의 호환성 유지
이제 화면마다 다른 표시 컬럼 조합을 설정할 수 있음
예: 한 화면에서는 '이름'만, 다른 화면에서는 '이름 - 부서명' 표시
- BaseComponent에 inputType, autoValueType 속성 추가
- DetailSettingsPanel에 입력 타입 및 자동 값 타입 선택 UI 추가
- RealtimePreview에서 자동 값 타입별 값 생성 및 표시 로직 구현
- 텍스트, 숫자, 날짜 위젯에서 7가지 자동 값 타입 지원
- 현재 날짜시간, 현재 날짜, 현재 시간
- 현재 사용자, UUID, 시퀀스, 사용자 정의
- 자동입력 모드에서 읽기 전용 스타일 적용 (회색 배경)
- 백엔드 API에 input_type 처리 로직 추가
- TableTypeSelector에 입력 타입 설정 UI 추가
kjs
dohyeons
leeheejin