새로운 기능
- 컬럼별 독립적인 소스 테이블 선택 기능
- SourceColumnSelector, ReferenceColumnSelector 컴포넌트 추가
- 계산 규칙 자동 동기화 로직 (cleanupInitialConfig)
UI/UX 개선
- 컬럼 설정 UI를 세로 레이아웃으로 재구성 (h-10 통일)
- 매핑 타입별 색상 구분 (파란색/보라색/초록색)
- 계산 규칙 섹션 재디자인 (안내 박스, 번호 배지, 빈 상태)
- 현재 설정 시각화 (코드 스타일 표시)
버그 수정
- 계산 규칙 삭제 시 컬럼이 수정 불가능 상태로 남는 문제 해결
- 결과 필드 변경 시 이전 필드의 calculated 속성 제거
- 초기 로드 시 계산 규칙과 컬럼 속성 동기화
개선 사항
- 모든 입력 필드의 높이와 텍스트 크기 일관성 확보
- 섹션별 명확한 제목과 설명 추가
- 접근성 향상 (ARIA 레이블, 포커스 스타일)
변경사항:
- handleBatchSave의 모든 console.log 제거
- 핵심 로직만 유지 (데이터 매핑, 조합 생성, 저장)
- 코드 가독성 향상
제거된 로그:
- modalDataStore 데이터 확인 로그
- parentDataMapping 설정 로그
- 품목/그룹 처리 로그
- 조합 생성/병합 로그
- 데이터 소스 상세 로그
- 저장 요청/결과 로그
유지된 기능:
- Zustand modalDataStore에서 부모 데이터 가져오기
- 무한 깊이 모달 지원
- 완전히 설정 기반 parentDataMapping
- 카티션 곱 조합 생성
- 하드코딩 없는 동적 매핑
문제:
- modalDataStore가 window 전역 변수가 아닌 Zustand store임
- window.__modalDataRegistry로 접근 시도했으나 빈 객체 반환
- 거래처 데이터를 찾을 수 없어 customer_code 매핑 실패
해결:
- useModalDataStore.getState().dataRegistry로 Zustand store 직접 접근
- ModalDataItem[] 배열에서 originalData 추출
- 각 테이블별 데이터를 modalDataStore 객체로 변환
- 거래처(customer_mng), 품목(item_info) 데이터 모두 접근 가능
기술적 변경:
- dynamic import로 Zustand store 로드
- ModalDataItem 구조 이해 및 originalData 추출
- 에러 핸들링 (store 로드 실패 시)
- 상세한 디버깅 로그 (테이블별 데이터 count)
문제:
- 메인 화면(거래처 선택) → 첫 번째 모달(품목 선택) → 두 번째 모달(상세 입력)
- selectedRowsData는 바로 이전 화면 데이터만 제공하여 2단계 이전 데이터 접근 불가
- customer_id가 NULL로 저장됨
해결:
- modalDataStore의 전역 레지스트리에서 모든 누적 데이터 접근
- sourceTable에 따라 적절한 데이터 소스 자동 선택
- 거래처 데이터(customer_mng)를 modalDataStore에서 직접 가져옴
기술적 변경:
- ButtonPrimaryComponent: allComponents에서 componentConfigs 수집 및 전달
- ButtonActionContext: componentConfigs 속성 추가
- handleBatchSave: modalDataStore에서 테이블별 데이터 조회
- parentDataMapping 로직: sourceTable 기반 데이터 소스 자동 감지
- 디버깅 로그 강화 (modalDataStore 키, 데이터 소스 추적)
- 여러 테이블(거래처, 품목 등)에서 데이터를 가져와 자동 매핑 가능
- 각 매핑마다 소스 테이블, 원본 필드, 저장 필드를 독립적으로 설정
- 검색 가능한 Combobox로 테이블 및 컬럼 선택 UX 개선
- 소스 테이블 선택 시 해당 테이블의 컬럼 자동 로드
- 라벨, 컬럼명, 데이터 타입으로 검색 가능
- 세로 레이아웃으로 가독성 향상
기술적 변경사항:
- ParentDataMapping 인터페이스 추가 (sourceTable, sourceField, targetField)
- buttonActions.ts의 handleBatchSave에서 소스 테이블 기반 데이터 소스 자동 판단
- tableManagementApi.getColumnList() 사용하여 테이블 컬럼 동적 로드
- Command + Popover 조합으로 검색 가능한 Select 구현
- 각 매핑별 독립적인 컬럼 상태 관리 (mappingSourceColumns)
문제:
- 조건부 컨테이너 내부의 modal-repeater-table 컴포넌트가 데이터 업데이트 불가
- ConditionalSectionViewer가 RealtimePreview에 formData/onFormDataChange 미전달
해결:
- ConditionalSectionViewer.tsx: RealtimePreview에 formData, onFormDataChange props 추가
- DynamicComponentRenderer.tsx: 디버깅 로그 정리
- ScreenModal.tsx: 디버깅 로그 정리
영향:
- 수주 등록 화면 품목 추가 기능 정상 작동
- 조건부 컨테이너 내부 모든 폼 컴포넌트 데이터 바인딩 정상화
Refs: #수주관리 #modal-repeater-table #ConditionalContainer
- ResizableDialog 콘텐츠 영역에 pointer-events 및 z-index 설정 추가
- TextInputComponent를 제어 컴포넌트에서 비제어 컴포넌트로 변경 (value → defaultValue)
- ItemSelectionModal 및 TextInputComponent 디버그 로그 제거
수정 파일:
- frontend/components/ui/resizable-dialog.tsx
- frontend/lib/registry/components/text-input/TextInputComponent.tsx
- frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
- uniqueField 값이 undefined일 때 객체 참조 비교로 폴백
- 멀티셀렉트 모드에서 선택/해제 로직 안정화
- 체크박스 클릭 이벤트 전파 개선
- 유효한 컬럼만 렌더링하도록 필터링 추가
- 디버깅을 위한 콘솔 로그 추가
- 선택된 항목의 uniqueField 값 표시
- 선택항목 상세입력 컴포넌트 확장
- 실시간 가격 계산 기능 추가 (할인율/할인금액, 반올림 방식)
- 카테고리 값 기반 연산 매핑 시스템
- 3단계 드릴다운 방식 설정 UI (메뉴 → 카테고리 → 값 매핑)
- 설정 가능한 계산 로직
- autoCalculation 설정으로 계산 필드명 동적 지정
- valueMapping으로 카테고리 코드와 연산 타입 매핑
- 할인 방식: none/rate/amount
- 반올림 방식: none/round/floor/ceil
- 반올림 단위: 1/10/100/1000
- UI 개선
- 입력 필드 가로 배치 (반응형 Grid)
- 카테고리 타입 필드 옵션 로딩 개선
- 계산 결과 필드 자동 표시 및 읽기 전용 처리
- 날짜 입력 필드 네이티브 피커 지원
- API 연동
- 2레벨 메뉴 목록 조회
- 메뉴별 카테고리 컬럼 조회
- 카테고리별 값 목록 조회
- 문서화
- 기간별 단가 설정 가이드 작성
목적:
- 콘솔창이 너무 많은 디버깅 정보로 지저분해지는 문제 해결
- 정상 작동 시 불필요한 로그 출력 최소화
변경사항:
- UnifiedPropertiesPanel: 4개 디버깅 로그 제거
• renderDetailTab 컴포넌트 타입 확인 로그
• DataTable/Component 타입 감지 로그
• DynamicComponentConfigPanel onChange 로그
- RealtimePreviewDynamic: baseStyle 크기 정보 로그 주석 처리
결과:
- Section Card/Paper 사용 시 깔끔한 콘솔
- 에러 발생 시에만 에러 메시지 표시 (기존 핸들링 유지)
- 필요시 주석 해제로 디버깅 로그 재활성화 가능
문제:
- 거래처별 품목 정보 등 모달 화면에서 TableSearchWidget 사용 시 에러 발생
- Error: useTableOptions must be used within TableOptionsProvider
원인:
- ScreenModal에서 화면을 렌더링할 때 필수 Context Provider 누락
- TableSearchWidget은 TableOptionsContext를 필수로 사용하는데 모달 환경에서 제공되지 않음
해결:
- ScreenModal에 TableOptionsProvider와 TableSearchWidgetHeightProvider 추가
- 모달 내부 화면 컴포넌트들이 정상적으로 Context를 사용할 수 있도록 수정
영향:
- 거래처별 품목 정보 화면의 '품목 추가' 버튼 정상 작동
- 모든 모달 화면에서 TableSearchWidget 사용 가능
- 기존 화면 페이지(/screens/[screenId])는 이미 Provider가 있어 영향 없음
새로운 그룹화 레이아웃 컴포넌트 2종 추가:
- Section Card: 제목+테두리 기반 명확한 섹션 구분
- Section Paper: 배경색 기반 미니멀한 섹션 구분
주요 변경사항:
- 새 컴포넌트 등록 (각 4개 파일: Component, ConfigPanel, Renderer, index)
- UnifiedPropertiesPanel에 인라인 설정 UI 추가 (280줄)
- DetailSettingsPanel ConfigPanel 인터페이스 통일화 (config → componentConfig)
- getComponentConfigPanel에 동적 import 매핑 추가
- 기존 컴포넌트 타입 정리 (autocomplete, entity-search, modal-repeater)
특징:
- shadcn/ui 기반 일관된 디자인 시스템 준수
- 중첩 박스 금지 원칙 적용
- 반응형 지원 (모바일 우선)
- collapsible 기능 지원 (Section Card)
- 필드 그룹을 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 자동 감지 로직 디버깅 강화
dohyeons
SeongHyun Kim
kjs