- InteractiveScreenViewer는 screenId가 아닌 component, allComponents를 받음
- screenApi.getLayout()과 getScreen()으로 화면 데이터 로드
- 로드된 컴포넌트들을 InteractiveScreenViewer로 렌더링
- 화면 로딩 상태 추가
- screenInfo 전달하여 테이블 컨텍스트 제공
- screenManagementApi → screenApi로 변경
- @/lib/api/screenManagement → @/lib/api/screen
- screenApi.getScreens() 사용하여 화면 목록 조회
- ScreenDefinition 타입에 맞게 필드명 수정 (id → screenId)
- ConditionalSection 타입 변경 (components[] → screenId, screenName)
* 각 조건마다 컴포넌트를 직접 배치하는 대신 기존 화면을 선택
* 복잡한 입력 폼도 화면 재사용으로 간단히 구성
- ConditionalSectionDropZone을 ConditionalSectionViewer로 교체
* 드롭존 대신 InteractiveScreenViewer 사용
* 선택된 화면을 조건별로 렌더링
* 디자인 모드에서 화면 미선택 시 안내 메시지 표시
- ConfigPanel에서 화면 선택 드롭다운 구현
* screenManagementApi.getScreenList()로 화면 목록 로드
* 각 섹션마다 화면 선택 Select 컴포넌트
* 선택된 화면의 ID와 이름 자동 저장 및 표시
* 로딩 상태 표시
- 기본 설정 업데이트
* defaultConfig에서 components 제거, screenId 추가
* 모든 섹션 기본값을 screenId: null로 설정
- README 문서 개선
* 화면 선택 방식으로 사용법 업데이트
* 사용 사례에 화면 ID 예시 추가
* 구조 다이어그램 수정 (드롭존 → 화면 표시)
* 디자인/실행 모드 설명 업데이트
장점:
- 기존 화면 재사용으로 생산성 향상
- 복잡한 입력 폼도 간단히 조건부 표시
- 화면 수정 시 자동 반영
- 유지보수 용이
- 품목 검색 모달에서 컬럼명 대신 라벨명 표시
* ItemSelectionModal에 columnLabels prop 추가
* ModalRepeaterTableComponent에서 columns 설정의 라벨 매핑 생성
* 테이블 헤더에 한글 라벨 표시 (품번, 품명, 규격, 재질 등)
- 이미 추가된 품목은 검색 결과에서 완전 제외
* filteredResults로 중복 항목 필터링
* 회색 표시 대신 목록에서 아예 제거
* 사용자 친화적인 안내 메시지 추가
- 수주등록 버튼 크기 및 렌더링 수정
* 기본 크기를 200x40에서 120x40으로 변경 (다른 버튼과 통일)
* h-full w-full 클래스 적용하여 컨테이너 크기에 맞게 렌더링
* style prop의 width/height 제거하여 Tailwind 클래스 우선순위 문제 해결
- 수주등록 모달에 판매 유형 및 무역 정보 추가
* 국내/해외 판매 선택 기능
* 해외 판매 시 무역 정보 섹션 표시 (인코텀즈, 결제조건, 통화 등)
* 거래처 정보 확장 (담당자, 납품처, 납품장소)
- 품목 반복 테이블 컬럼 조정
* 품목번호를 품번으로 변경
* 비고 컬럼 제거
* 규격, 재질 컬럼 추가
* 납품일을 납기일로 변경
- 범용 컴포넌트 3종 개발 및 레지스트리 등록:
* AutocompleteSearchInput: 자동완성 검색 입력 컴포넌트
* EntitySearchInput: 엔티티 검색 모달 컴포넌트
* ModalRepeaterTable: 모달 기반 반복 테이블 컴포넌트
- 수주등록 전용 컴포넌트:
* OrderCustomerSearch: 거래처 검색 (AutocompleteSearchInput 래퍼)
* OrderItemRepeaterTable: 품목 관리 (ModalRepeaterTable 래퍼)
* OrderRegistrationModal: 수주등록 메인 모달
- 백엔드 API:
* Entity 검색 API (멀티테넌시 지원)
* 수주 등록 API (자동 채번)
- 화면 편집기 통합:
* 컴포넌트 레지스트리에 등록
* ConfigPanel을 통한 설정 기능
* 드래그앤드롭으로 배치 가능
- 개발 문서:
* 수주등록_화면_개발_계획서.md (상세 설계 문서)
- 잘못된 API 경로 수정
- 이전: /api/table-type/category-values/{tableName}/{columnName}
- 수정: /api/table-categories/{tableName}/{columnName}/values
- 백엔드 라우트와 일치하도록 변경 (app.ts에서 /api/table-categories로 마운트됨)
- 좌측/우측 패널 카테고리 매핑 로드 API 호출 경로 수정
- 좌측/우측 패널 테이블의 카테고리 타입 컬럼 매핑 로드
- formatCellValue 함수 추가하여 카테고리 코드를 라벨+배지로 변환
- 좌측 패널 테이블 렌더링 부분(그룹화/일반)에 formatCellValue 적용
- 우측 패널 테이블 렌더링 부분에 formatCellValue 적용
- Badge 컴포넌트 import 및 카테고리별 색상 표시
변경 사항:
- 카테고리 매핑 상태 추가 (leftCategoryMappings, rightCategoryMappings)
- API 클라이언트 import 추가
- 카테고리 값 조회 API 호출 useEffect 2개 추가
- 셀 값 포맷팅 함수 formatCellValue 추가
- 모든 테이블 td 렌더링에서 String(value) → formatCellValue() 적용
- ScreenModal에 onRefresh 콜백 추가하여 refreshTable 이벤트 발송
- InteractiveScreenViewerDynamic에 onRefresh, onFlowRefresh prop 추가 및 하위 컴포넌트로 전달
- TableListComponent에 refreshTable 이벤트 리스너 추가
- SplitPanelLayoutComponent에 refreshTable 이벤트 리스너 추가하여 좌/우측 패널 모두 새로고침
- 모달에서 데이터 저장 시 부모 화면의 모든 테이블 컴포넌트가 자동으로 새로고침되도록 개선
변경된 파일:
- frontend/components/common/ScreenModal.tsx
- frontend/components/screen/InteractiveScreenViewerDynamic.tsx
- frontend/lib/registry/components/table-list/TableListComponent.tsx
- frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
- 카테고리 색상 설정 시 '배지 없음' 옵션 추가
- color='none'일 때 배지 대신 일반 텍스트로 표시
- CategoryValueEditDialog, CategoryValueAddDialog에 배지 없음 버튼 추가
- InteractiveDataTable, TableListComponent에서 배지 없음 처리
- CategoryValueManager에서 배지 없음 표시 추가
- 기본 색상을 배지 없음으로 변경
- table_column_category_values JOIN 시 회사 데이터만 사용하도록 수정
- 공통 데이터(company_code='*') 사용 금지
- is_active=true 필터 추가로 활성화된 카테고리만 조회
- entityJoinService.ts의 buildJoinQuery 및 buildCountQuery 수정
- 품목 정보 테이블 등에서 발생하던 2배 중복 문제 해결
- category_column_mapping 테이블 생성 (마이그레이션 054)
- 테이블 타입 관리에서 2레벨 메뉴 선택 기능 추가
- 카테고리 컬럼 조회 시 현재 메뉴 및 상위 메뉴 매핑 자동 조회
- 캐시 무효화 로직 개선
- 메뉴별 카테고리 설정 저장 및 불러오기 기능 구현
## 문제점
- menu_url을 빈 값으로 저장해도 screen_menu_assignments 테이블의
화면 할당(is_active='Y')이 남아있어 메뉴 클릭 시 여전히 화면이 열림
- AppLayout의 handleMenuClick이 우선적으로 screen_menu_assignments를
조회하므로 menu_url보다 화면 할당이 우선 적용됨
## 해결방법
### updateMenu (메뉴 수정)
- menu_url이 null/빈값일 때 screen_menu_assignments의 is_active를 'N'으로 업데이트
- 화면 할당과 menu_url을 동기화하여 완전한 할당 해제
### saveMenu (메뉴 생성)
- 기존과 동일하게 menu_url이 없으면 screen_code를 null로 설정
- INSERT 시 screen_code 컬럼을 명시적으로 포함
## 메뉴 클릭 동작 순서
1. screen_menu_assignments 조회 (우선순위)
2. is_active='N'이면 할당된 화면 없음으로 간주
3. menu_url이 있으면 해당 URL로 이동
4. 둘 다 없으면 "연결된 페이지가 없습니다" 경고
이제 메뉴에서 URL을 제거하면 화면 할당도 완전히 해제됩니다.
## 문제점
- URL 직접 입력 모드에서 빈 값으로 저장 시 menu_url은 비워지지만
- screen_code는 기존 값이 남아있어 화면 할당이 해제되지 않음
## 해결방법
### 백엔드 (adminController.ts)
- updateMenu: menu_url이 비어있으면 screen_code도 null로 자동 설정
- 로직: menuUrl ? screenCode : null
### 프론트엔드 (MenuFormModal.tsx, menu.ts)
- 화면 선택 시 screenCode도 함께 formData에 저장
- URL 타입 변경 시 screenCode 초기화
- MenuFormData 인터페이스에 screenCode 필드 추가
## 동작 방식
1. 화면 할당: menuUrl + screenCode 함께 저장
2. URL 직접 입력: menuUrl만 저장, screenCode는 undefined
3. 빈 값 저장: menuUrl = null, screenCode = null (자동)
이제 메뉴에서 화면 할당을 완전히 해제할 수 있습니다.
## 주요 변경사항
### 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
kjs
SeongHyun Kim
hyeonsu
dohyeons