## 주요 변경사항
### 1. 화면 복사 기능 강화
- 최고 관리자가 다른 회사로 화면 복사 가능하도록 개선
- 메인 화면과 연결된 모달 화면 자동 감지 및 일괄 복사
- 복사 시 버튼의 targetScreenId 자동 업데이트
- 일괄 이름 변경 기능 추가 (복사본 텍스트 제거)
- 중복 화면명 체크 기능 추가
#### 백엔드 (screenManagementService.ts)
- generateMultipleScreenCodes: 여러 화면 코드 일괄 생성 (Advisory Lock 사용)
- detectLinkedModalScreens: edit 액션도 모달로 감지하도록 개선
- checkDuplicateScreenName: 중복 화면명 체크 API 추가
- copyScreenWithModals: 메인+모달 일괄 복사 및 버튼 업데이트
- updateButtonTargetScreenIds: 복사된 모달로 버튼 targetScreenId 업데이트
- updated_date 컬럼 제거 (screen_layouts 테이블에 존재하지 않음)
#### 프론트엔드 (CopyScreenModal.tsx)
- 회사 선택 UI 추가 (최고 관리자 전용)
- 연결된 모달 화면 자동 감지 및 표시
- 일괄 이름 변경 기능 (텍스트 제거/추가)
- 실시간 미리보기
- 중복 화면명 체크
### 2. 버튼 설정 모달 화면 선택 개선
- 편집 중인 화면의 company_code 기준으로 화면 목록 조회
- 최고 관리자가 다른 회사 화면 편집 시 해당 회사의 모달 화면만 표시
- targetScreenId 문자열/숫자 타입 불일치 수정
#### 백엔드 (screenManagementController.ts)
- getScreens API에 companyCode 쿼리 파라미터 추가
- 최고 관리자는 다른 회사의 화면 목록 조회 가능
#### 프론트엔드
- ButtonConfigPanel: currentScreenCompanyCode props 추가
- DetailSettingsPanel: currentScreenCompanyCode 전달
- UnifiedPropertiesPanel: currentScreenCompanyCode 전달
- ScreenDesigner: selectedScreen.companyCode 전달
- targetScreenId 비교 시 parseInt 처리 (문자열→숫자)
### 3. 카테고리 메뉴별 컬럼 분리 기능
- 메뉴별로 카테고리 컬럼을 독립적으로 관리
- 카테고리 컬럼 추가/삭제 시 메뉴 스코프 적용
## 수정된 파일
- backend-node/src/services/screenManagementService.ts
- backend-node/src/controllers/screenManagementController.ts
- backend-node/src/routes/screenManagementRoutes.ts
- frontend/components/screen/CopyScreenModal.tsx
- frontend/components/screen/config-panels/ButtonConfigPanel.tsx
- frontend/components/screen/panels/DetailSettingsPanel.tsx
- frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
- frontend/components/screen/ScreenDesigner.tsx
- frontend/lib/api/screen.ts
문제:
- 분할 패널에서 필터 입력 시 검색이 제대로 작동하지 않음
- 백엔드가 {value: '전자', operator: 'contains'} 형태를 처리하지 못함
원인:
- buildAdvancedSearchCondition이 필터 객체의 value 속성을 추출하지 않음
- 객체를 직접 문자열로 변환하여 '[object Object]'로 검색됨
해결:
1. tableManagementService.buildAdvancedSearchCondition 수정:
- {value, operator} 형태의 필터 객체 감지
- actualValue 추출 및 operator 처리
- 모든 웹타입 케이스에 actualValue 전달
2. 프론트엔드 디버깅 로그 제거:
- SplitPanelLayoutComponent의 console.log 제거
- 필터, 컬럼 가시성, API 호출 로그 정리
테스트 필요:
- 분할 패널에서 필터 입력 → 정상 검색 확인
- 텍스트, 날짜, 숫자, 코드 타입 필터 동작 확인
문제:
1. ColumnVisibilityPanel에서 순서 변경 후 onColumnOrderChange가 호출되지 않음
2. 필터 입력 시 데이터가 제대로 필터링되지 않음
3. useAuth 훅 import 경로 오류 (@/hooks/use-auth → @/hooks/useAuth)
해결:
1. ColumnVisibilityPanel.handleApply()에 onColumnOrderChange 호출 추가
2. 필터 변경 감지 및 데이터 로드 로직 디버깅 로그 추가
3. useAuth import 경로 수정
테스트:
- 거래처관리 화면에서 컬럼 순서 변경 → 실시간 반영 ✅
- 페이지 새로고침 → 순서 유지 (localStorage) ✅
- 필터 입력 → 필터 변경 감지 (추가 디버깅 필요)
문제:
- 분할 패널에서 검색 컴포넌트의 필터/그룹/컬럼 설정이 동작하지 않음
- 테이블 리스트 컴포넌트에 있던 로직이 분할 패널에는 없었음
해결:
1. 필터 처리:
- leftFilters를 searchValues 형식으로 변환
- API 호출 시 필터 조건 전달
- 필터 변경 시 데이터 자동 재로드
2. 컬럼 가시성:
- visibleLeftColumns useMemo 추가
- leftColumnVisibility를 적용하여 표시할 컬럼 필터링
- 렌더링 시 가시성 처리된 컬럼만 표시
3. 그룹화:
- groupedLeftData useMemo 추가
- leftGrouping 배열로 데이터를 그룹화
- 그룹별 헤더와 카운트 표시
4. 테이블 등록:
- columns 속성을 올바르게 참조 (displayColumns → columns)
- 객체/문자열 타입 모두 처리
- 화면 설정에 맞게 테이블 등록
테스트:
- 거래처 관리 화면에서 검색 컴포넌트 버튼 활성화
- 필터 설정 → 데이터 필터링 동작
- 그룹 설정 → 데이터 그룹화 동작
- 테이블 옵션 → 컬럼 가시성/순서 변경 동작
문제:
- displayColumns가 비어있을 때 전체 컬럼을 보여주는 오류
- 화면에 설정된 컬럼만 표시되어야 함
해결:
- displayColumns가 비어있으면 테이블을 등록하지 않음
- displayColumns에 설정된 컬럼만 검색 컴포넌트에 등록
- 화면 관리에서 설정한 컬럼 구성을 정확히 반영
테스트:
- 거래처 관리 화면에서 좌측 테이블의 displayColumns(14개) 정상 표시
- 테이블 옵션/필터 설정/그룹 설정 버튼 정상 작동
- 우측 테이블은 검색 컴포넌트에서 제외
변경 사유:
- 분할 패널은 마스터-디테일 구조로 좌측(마스터)만 독립적으로 검색 가능
- 우측(디테일)은 좌측 선택 항목에 종속되므로 별도 검색 불필요
변경 내용:
- 우측 테이블 registerTable 호출 제거 (주석 처리)
- TableSearchWidget에서 좌측 테이블만 선택 가능
- 우측 테이블 관련 상태(rightFilters, rightGrouping 등)는 내부 로직용으로 유지
효과:
- 분할 패널 사용 시 좌측 마스터 테이블만 검색 설정 가능
- 우측 디테일 테이블은 좌측 선택에 따라 자동 필터링
- 검색 컴포넌트 UI가 더 직관적으로 개선
문제:
- 분할 패널의 테이블 옵션/검색필터 설정/그룹 설정에서 모든 컬럼이 표시됨
- 우측 패널에서 rightTableColumns (전체 컬럼) 사용하여 등록
해결:
- componentConfig.rightPanel?.columns (화면 표시 컬럼)만 등록하도록 수정
- 좌측 패널과 동일한 방식으로 displayColumns 사용
- 의존성 배열도 rightTableColumns → rightPanel.columns로 수정
변경 사항:
- rightTableColumns 대신 displayColumns 사용
- 컬럼 매핑 로직 개선 (col.columnName || col.name || col)
- 화면에 실제 표시되는 컬럼만 설정 UI에 노출
- 테이블 상단 헤더 UI 전체 제거 (AdvancedSearchFilters 영역)
- 테이블 옵션, 필터 설정, 그룹 설정 버튼 제거
- 전체 개수 표시 제거
- 검색 필터 로직은 모두 유지 (상태, 함수, localStorage)
- 해당 기능은 TableSearchWidget 컴포넌트에서 제공 예정
변경 사유:
- 검색 필터 기능을 독립적인 TableSearchWidget으로 분리
- 테이블 컴포넌트와 검색 필터 UI의 관심사 분리
- 재사용 가능한 검색 필터 컴포넌트 구조로 개선
- TableListComponent: grouping 상태 변경 시 groupByColumns 자동 업데이트
- 그룹화 시 카테고리/엔티티/코드 타입 컬럼은 _name 필드 사용
- 그룹 키 생성 시 실제 이름 표시 (코드 대신)
예시:
- 이전: 상태:CATEGORY_159712 > 품번:SLI-2025-0001
- 이후: 상태:완제품 > 품번:SLI-2025-0001
- tableManagementService: getTableDataWithEntityJoins options에 companyCode 타입 추가
- tableManagementController: Promise<void> 함수의 return 문 수정
- commonCodeService: CodeInfo 인터페이스에 menu_objid 필드 추가
- numberingRuleService: siblingObjids 변수 스코프 수정 (catch 블록 접근 가능하도록)
- TableSearchWidgetHeightContext 추가: 위젯 높이 변화 관리
- TableSearchWidget: ResizeObserver로 높이 변화 감지 및 localStorage 저장
- 실제 화면(/screens/[screenId]/page.tsx)에서만 동작 (디자이너 제외)
- TableSearchWidget 아래 컴포넌트들의 Y 위치를 높이 차이만큼 자동 조정
- 화면 로딩 시 저장된 높이 복원 및 컴포넌트 위치 재조정
주요 변경사항:
1. 필터가 여러 줄로 wrap될 때 높이 자동 증가
2. 높이가 늘어난 만큼 아래 컴포넌트들이 자동으로 아래로 이동
3. 새로고침 후에도 설정 유지 (localStorage)
4. 화면 디자이너에서는 기존대로 동작 (영향 없음)
기술 구현:
- Context API로 위젯 높이 전역 관리
- ResizeObserver로 실시간 높이 감지
- localStorage로 사용자별 높이 설정 영구 저장
- 컴포넌트 렌더링 시 동적 Y 위치 계산
- FilterPanel: 필터별 너비(width) 설정 기능 추가 (50-500px)
- TableSearchWidget: 필터가 여러 줄로 자동 wrap되도록 flex-wrap 적용
- TableSearchWidget: 필터 너비 설정을 localStorage에 저장/복원
- InteractiveScreenViewerDynamic: TableSearchWidget의 높이를 auto로 설정하여 콘텐츠에 맞게 자동 조정
- globals.css: 입력 필드 포커스 시 검정 테두리 제거 (combobox, input)
주요 변경사항:
1. 필터 설정에서 각 필터의 표시 너비를 개별 설정 가능
2. 필터가 많을 때 자동으로 여러 줄로 배치 (overflow 방지)
3. 설정된 필터 너비가 새로고침 후에도 유지됨
4. TableSearchWidget 높이가 콘텐츠에 맞게 자동 조정
TODO: TableSearchWidget 높이 변화 시 아래 컴포넌트 자동 재배치 기능 구현 예정
- 모든 필터 입력창 높이 통일 (h-9, 36px)
- 실시간 검색: 입력 시 즉시 필터 적용 (검색 버튼 제거)
- 초기화 버튼 추가: 모든 필터값을 한번에 리셋
- filters → searchValues 자동 변환 로직 추가
- select 필터: 선택된 값의 라벨 저장하여 데이터 없을 때도 표시 유지
- select 옵션 초기 로드 후 계속 유지 (dataCount 변경 시에도 유지)
주요 개선사항:
1. Input, Select, Date 등 모든 필터의 높이가 동일하게 표시
2. 사용자가 값을 입력하면 바로 테이블이 필터링됨
3. 초기화 버튼으로 간편하게 모든 필터 제거 가능
4. 필터링 결과가 0건이어도 select 박스의 선택값이 유지됨
알려진 제한사항:
- 카테고리/엔티티 필터는 현재 테이블 데이터 기반으로만 옵션 표시
(전체 정의된 카테고리 값이 아닌, 실제 데이터에 있는 값만 표시)
- TableRegistration에 getColumnUniqueValues 콜백 함수 추가
- TableListComponent에서 현재 데이터의 고유 값 추출 함수 구현
- TableSearchWidget에서 select 타입 필터의 옵션을 자동으로 로드
- 테이블 데이터가 변경되면 필터 옵션도 자동 업데이트
- 데이터 건수 표시 기능도 함께 수정 (등록 순서 문제 해결)
- TableOptionsContext 기반 테이블 자동 감지 시스템 구현
- 독립 위젯으로 드래그앤드롭 배치 가능
- 3가지 기능: 컬럼 가시성, 필터 설정, 그룹 설정
- FlowWidget, TableList, SplitPanel 등 모든 테이블 컴포넌트 지원
- 유틸리티 카테고리에 등록 (1920×80px)
- 위젯 크기 제어 가이드 룰 파일에 추가
**문제:**
- 화면 편집기에서 버튼의 스타일(색상, 폰트 등)을 변경해도 실시간으로 반영되지 않음
- 저장 후 실제 화면에서는 정상적으로 보임
**원인:**
- ButtonPrimaryComponent에서 isInteractive 모드일 때만 component.style을 적용
- 디자인 모드(isDesignMode)에서는 사용자 정의 스타일이 무시됨
**해결:**
- buttonElementStyle에 component.style을 항상 적용하도록 수정
- width/height는 레이아웃 충돌 방지를 위해 제외 유지
- 디자인 모드와 인터랙티브 모드 모두에서 스타일 실시간 반영
**영향:**
- 화면 편집기에서 버튼 스타일 변경 시 즉시 미리보기 가능
- 저장하지 않아도 시각적 피드백 제공
**주요 변경사항:**
1. **메뉴 스코프 변경 (getSiblingMenuObjids)**
- 기존: 형제 메뉴 + 모든 형제의 자식 메뉴 포함
- 변경: 자신 + 자신의 자식 메뉴만 포함
- 결과: 각 2레벨 메뉴가 완전히 독립적으로 격리됨
2. **채번 규칙 메뉴 선택 상태 유지**
- useState 초기값 함수에서 저장된 selectedMenuObjid 복원
- 속성창 닫았다 열어도 선택한 메뉴와 채번 규칙 유지
- config.autoGeneration.selectedMenuObjid에 저장
3. **로그 정리**
- 프론트엔드: 디버깅 로그 제거
- 백엔드: info 레벨 로그를 debug 레벨로 변경
- 운영 환경에서 불필요한 로그 출력 최소화
**영향:**
- 영업관리 메뉴: 영업관리의 채번 규칙/코드만 조회
- 기준정보 메뉴: 기준정보의 채번 규칙/코드만 조회
- 각 메뉴 그룹이 독립적으로 데이터 관리 가능
- 백엔드: screenManagementService에 getMenuByScreen 함수 추가
- 백엔드: GET /api/screen-management/screens/:id/menu 엔드포인트 추가
- 프론트엔드: screenApi.getScreenMenu() 함수 추가
- ScreenDesigner: 화면 로드 시 menu_objid 자동 조회
- ScreenDesigner: menuObjid를 RealtimePreview와 UnifiedPropertiesPanel에 전달
- UnifiedPropertiesPanel: menuObjid를 DynamicComponentConfigPanel에 전달
이로써 화면 편집기에서 코드/카테고리/채번규칙이 해당 화면이 할당된 메뉴 기준으로 필터링됨
- useCodeOptions 훅에 menuObjid 파라미터 추가
- commonCodeApi.codes.getList에 menuObjid 전달
- SelectBasicComponent에서 menuObjid 받아서 useCodeOptions로 전달
- InteractiveScreenViewer에서 DynamicWebTypeRenderer로 menuObjid 전달
- 화면 페이지에서 RealtimePreview로 menuObjid 전달
이제 코드 위젯도 카테고리처럼 형제 메뉴별로 격리됩니다.
✅ 구현 내용:
1. 백엔드 API 추가
- GET /api/table-management/menu/:menuObjid/category-columns
- 형제 메뉴들의 테이블에서 카테고리 타입 컬럼 조회
- menuService.getSiblingMenuObjids() 재사용
2. 프론트엔드 CategoryWidget 수정
- menuObjid를 props로 받아 CategoryColumnList에 전달
- effectiveMenuObjid로 props.menuObjid도 처리
- 선택된 컬럼에 tableName 포함하여 상태 관리
3. CategoryColumnList 수정
- menuObjid 기반으로 형제 메뉴의 모든 카테고리 컬럼 조회
- 테이블명+컬럼명 함께 표시
- onColumnSelect에 tableName 전달
4. 메뉴 네비게이션 수정
- AppLayout.tsx: 화면 이동 시 menuObjid를 URL 쿼리 파라미터로 전달
- useMenu.ts: 동일하게 menuObjid 전달
- page.tsx: 자식 컴포넌트에도 menuObjid 전달
🎯 효과:
- 이제 형제 메뉴들이 서로 다른 테이블을 사용해도 카테고리 공유 가능
- 메뉴 클릭 → 화면 이동 시 자동으로 menuObjid 전달
- 카테고리 위젯이 형제 메뉴의 모든 카테고리 컬럼 표시
✅ 주요 변경사항:
- 백엔드: menuService.ts 추가 (형제 메뉴 조회 유틸리티)
- 백엔드: numberingRuleService.getAvailableRulesForMenu() 메뉴 스코프 적용
- 백엔드: tableCategoryValueService 메뉴 스코프 준비 (menuObjid 파라미터 추가)
- 프론트엔드: TextInputConfigPanel에 부모 메뉴 선택 UI 추가
- 프론트엔드: 메뉴별 채번규칙 필터링 (형제 메뉴 공유)
🔧 기술 세부사항:
- getSiblingMenuObjids(): 같은 부모를 가진 형제 메뉴 OBJID 조회
- 채번규칙 우선순위: menu (형제) > table > global
- 사용자 메뉴(menu_type='1') 레벨 2만 부모 메뉴로 선택 가능
📝 다음 단계:
- 카테고리 컴포넌트도 메뉴 스코프로 전환 예정
- 메뉴 클릭 시 localStorage에 메뉴 이름 저장 (useMenu, AppLayout)
- 엑셀 다운로드 시 localStorage의 메뉴 이름을 파일명으로 사용
- 백엔드 카테고리 컬럼 조회 쿼리 파라미터 버그 수정
- API 호출 시 불필요한 autoFilter 파라미터 제거
파일명 형식: {메뉴이름}_{날짜}.xlsx
예시: 품목등록테스트_2025-11-11.xlsx
kjs
hyeonsu
dohyeons