- 선택항목 상세입력 컴포넌트 확장
- 실시간 가격 계산 기능 추가 (할인율/할인금액, 반올림 방식)
- 카테고리 값 기반 연산 매핑 시스템
- 3단계 드릴다운 방식 설정 UI (메뉴 → 카테고리 → 값 매핑)
- 설정 가능한 계산 로직
- autoCalculation 설정으로 계산 필드명 동적 지정
- valueMapping으로 카테고리 코드와 연산 타입 매핑
- 할인 방식: none/rate/amount
- 반올림 방식: none/round/floor/ceil
- 반올림 단위: 1/10/100/1000
- UI 개선
- 입력 필드 가로 배치 (반응형 Grid)
- 카테고리 타입 필드 옵션 로딩 개선
- 계산 결과 필드 자동 표시 및 읽기 전용 처리
- 날짜 입력 필드 네이티브 피커 지원
- API 연동
- 2레벨 메뉴 목록 조회
- 메뉴별 카테고리 컬럼 조회
- 카테고리별 값 목록 조회
- 문서화
- 기간별 단가 설정 가이드 작성
- 필드 그룹을 Collapsible로 변경하여 펼침/접힘 가능
- 항목 표시 설정도 Collapsible로 분리하여 깔끔하게 정리
- 그룹 제목에 displayItems 개수 표시
- 기본적으로 그룹은 펼쳐진 상태, 표시 설정은 접힌 상태
- ChevronDown/ChevronRight 아이콘으로 펼침 상태 표시
- 복잡한 설정을 단계적으로 볼 수 있어 가독성 대폭 향상
- FieldGroup에 displayItems 추가 (그룹별 독립적인 표시 설정)
- SelectedItemsDetailInputConfig에서 전역 displayItems 제거
- renderDisplayItems에 groupId 파라미터 추가하여 그룹별 설정 사용
- 설정 패널에서 그룹별로 displayItems 관리
- 각 그룹마다 다른 표시 형식 가능 (예: 거래처 정보 vs 단가 정보)
- 그룹의 필드만 선택 가능하도록 필터링
- DisplayItem 타입 추가 (icon, field, text, badge)
- 필드별 표시 형식 지원 (text, currency, number, date, badge)
- 빈 값 처리 옵션 추가 (hide, default, blank)
- 기본값 설정 기능 추가
- 스타일 옵션 추가 (굵게, 밑줄, 기울임, 색상)
- renderDisplayItems 헬퍼 함수로 유연한 표시 렌더링
- SelectedItemsDetailInputConfigPanel에 항목 표시 설정 UI 추가
- displayItems가 없으면 기존 방식(모든 필드 나열)으로 폴백
- handleAddGroupEntry: + 추가 버튼 클릭 시 미리 빈 entry를 배열에 추가
- handleFieldChange: 기존 entry 업데이트만 수행 (새로운 entry 추가 로직 제거)
- 이제 첫 글자 입력 시에도 배열 길이가 변하지 않아 포커스가 유지됨
- 입력 중 onFormDataChange 호출 제거하여 불필요한 리렌더링 방지
- 저장 버튼 클릭 시에만 데이터 전달하도록 변경 (beforeFormSave 이벤트)
- handleSave에서 beforeFormSave 이벤트 발생 및 100ms 대기
- 원본 데이터 표시 버그 수정 (modalData 중첩 구조 처리)
- fieldGroups 구조 감지 로직 수정 (details → fieldGroups)
이제 사용자가 타이핑할 때 포커스가 유지됩니다.
- 데이터 구조 변경: ItemData.details → ItemData.fieldGroups (그룹별 관리)
- 각 필드 그룹마다 독립적으로 여러 항목 추가/수정/삭제 가능
- renderFieldsByGroup: 그룹별 입력 항목 목록 + 편집 + 추가 버튼 구현
- renderGridLayout/renderCardLayout: 품목별 그룹 카드 표시로 단순화
- handleFieldChange: groupId 파라미터 추가 (itemId, groupId, entryId, fieldName, value)
- handleAddGroupEntry, handleRemoveGroupEntry, handleEditGroupEntry 핸들러 추가
- buttonActions handleBatchSave: fieldGroups 구조 처리하도록 수정
- 원본 데이터 표시 버그 수정: modalData의 중첩 구조 처리
사용 예:
- 품목 1
- 그룹 1 (거래처 정보): 3개 항목 입력 가능
- 그룹 2 (단가 정보): 5개 항목 입력 가능
- 각 항목 클릭 → 수정 가능
- 저장 시 모든 입력 항목이 개별 레코드로 저장됨
- Select 컴포넌트에서 빈 문자열 value를 가진 SelectItem 제거
- category/code 타입 필드의 옵션 로딩 디버깅 로그 추가
- 빈 값 필터링으로 'SelectItem must not have empty value' 에러 해결
- codeCategory 자동 감지 로직 디버깅 강화
- 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배 중복 문제 해결
문제:
- 분할 패널에서 필터 입력 시 검색이 제대로 작동하지 않음
- 백엔드가 {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
- 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는 레이아웃 충돌 방지를 위해 제외 유지
- 디자인 모드와 인터랙티브 모드 모두에서 스타일 실시간 반영
**영향:**
- 화면 편집기에서 버튼 스타일 변경 시 즉시 미리보기 가능
- 저장하지 않아도 시각적 피드백 제공
kjs
SeongHyun Kim