컬럼별 저장 여부 설정 (saveToTarget: true/false)
저장 안 함 컬럼: 참조 ID로 소스 테이블 조회하여 표시만 함
수정 모드에서 참조 컬럼 값 자동 조회 (loadReferenceColumnValues)
Select 컴포넌트 빈 값 필터링으로 안정성 개선
조건 탭 변경 시 소스 데이터 즉시 로드
컬럼 필드 선택 안 함 옵션 추가 (표시 전용 컬럼)
- FormSectionConfig에 type("fields"|"table") 및 tableConfig 필드 추가
- TableSectionRenderer, TableSectionSettingsModal 신규 컴포넌트 생성
- ItemSelectionModal에 모달 필터 기능 추가 (소스 테이블 distinct 값 조회)
- 설정 패널에서 테이블 섹션 추가/설정 UI 구현
- @dnd-kit 라이브러리로 행 순서 드래그 앤 드롭 구현
- SortableRow 컴포넌트로 드래그 가능한 테이블 행 구현
- GripVertical 아이콘 드래그 핸들 추가
- 드래그 시 선택된 행 인덱스 자동 재계산
- "균등 분배" 버튼으로 컬럼 너비 컨테이너에 맞게 균등 분배
- 컬럼 헤더 더블클릭으로 데이터 기준 자동 확장/복구 토글
- Input 컴포넌트 min-w-0 w-full 적용으로 컬럼 너비 초과 방지
- RepeaterTable: 체크박스 컬럼 추가 (전체 선택/개별 선택 지원)
- RepeaterTable: 선택된 행 시각적 피드백 (bg-blue-50)
- RepeaterTable: 기존 개별 삭제 버튼 컬럼 제거
- ModalRepeaterTableComponent: selectedRows 상태 및 handleBulkDelete 함수 추가
- ModalRepeaterTableComponent: "선택 삭제" 버튼 UI 추가
- RepeatScreenModalConfigPanel: 행 번호 컬럼 선택에서 빈 값 필터링
문제:
- 외부 테이블 조인 시 ID 값이 문자열로 전달되어 백엔드에서 ILIKE 검색 수행
- 문자열 '189'로 검색하면 '189', '1890', '18900' 등 모두 매칭되는 문제
- 발주 등록 화면에서 품목 참조 데이터 조회 실패
해결:
- fetchReferenceValue 함수: 조인 조건 값 타입 변환 추가
- resolveDynamicValue 함수 (단순 테이블 조회): 조인 조건 값 타입 변환 추가
- resolveDynamicValue 함수 (복합 조인): 조인 조건 값 타입 변환 추가
변환 로직:
- targetField가 '_id'로 끝나거나 'id'인 경우 Number()로 변환
- NaN 체크로 변환 불가능한 값은 원본 유지
- 백엔드에서 숫자는 = 비교, 문자열은 ILIKE 검색 수행하므로 정확한 매칭 필요
영향 범위:
- modal-repeater-table 컴포넌트를 사용하는 모든 화면
- 발주 등록, 수주 등록 등 품목 참조 테이블 조회
- 컬럼 헤더 드래그로 너비 조정 기능 추가 (최소 60px)
- 헤더 더블클릭으로 기본 너비 복원 기능 추가
- 엑셀 스타일 테두리 및 색상 적용 (border-b border-r)
- 테이블 최대 높이 240px → 400px 확장
- 입력 필드 높이 및 포커스 스타일 개선
- screenManagementService: PostgreSQL regexp_replace로 정확한 최대 번호 조회
- CopyScreenModal: linkedScreens 의존성 추가로 모달 코드 생성 보장
- UniversalFormModal: beforeFormSave 이벤트 리스너로 ButtonPrimary 연동
- 설정된 필드만 병합하여 의도치 않은 덮어쓰기 방지
- ModalRepeaterTable: 컬럼 헤더 클릭으로 데이터 소스 동적 전환
- 단순 조인, 복합 조인(다중 테이블), 전용 API 호출 지원
- DynamicDataSourceConfig, MultiTableJoinStep 타입 추가
- 설정 패널에 동적 데이터 소스 설정 모달 추가
- UniversalFormModal: showSaveButton 옵션 추가
- sourceColumnLabels 타입 정의 (Record<string, string>)
- ConfigPanel에 소스 컬럼별 표시 라벨 입력 UI 추가
- columnLabels 생성 시 sourceColumnLabels 우선 적용
- 컬럼 삭제 시 해당 라벨도 함께 삭제
- 빈 상태 안내 메시지 추가
- RepeaterTable에서 DB 조회된 ISO 형식 날짜를 yyyy-mm-dd로 변환
- formatDateValue 함수 추가: ISO 문자열, Date 객체, 기존 형식 모두 처리
- 수주일(order_date), 납기일(item_due_date) 등 날짜 필드 정상 표시
- value 상수를 localValue useState로 변경하여 내부 상태 관리
- useEffect로 외부 값(formData, propValue) 변경 시 동기화
- handleChange에서 setLocalValue 호출하여 즉각적인 UI 업데이트
- RepeaterTable, ItemSelectionModal 등 모든 참조를 localValue로 변경
- OrderItemRepeaterTable에 order_date 컬럼 추가
- ModalRepeaterTableComponent에 수주일 일괄 적용 로직 구현
- 원본 newData 참조로 납기일 로직과 독립적으로 작동
- 모든 행이 비어있는 초기 상태에서 첫 선택 시 자동 적용
- isOrderDateApplied 플래그로 1회만 실행 보장
- 프론트엔드: EditModal 날짜 정규화 함수 추가 (YYYY-MM-DD)
- 백엔드: convertValueForPostgreSQL에서 DATE 타입 문자열 유지
- 백엔드: 날짜 변환 로직에서 YYYY-MM-DD 문자열 변환 제거
- 프론트엔드: ModalRepeaterTableConfigPanel prop 이름 통일 (onChange)
- OrderItemRepeaterTable 필드명 수정 (delivery_date → item_due_date)
closes #납기일-TIMESTAMP-저장-이슈 #설정패널-prop-오류
- ModalRepeaterTableComponent에 납기일 자동 일괄 적용 로직 구현
- 첫 납기일 선택 시 빈 행에 자동으로 동일 날짜 적용
- isDeliveryDateApplied 플래그로 중복 실행 방지
- ScreenModal 환경에서 onFormDataChange 경로 지원
- 품목 추가 시 공통 필드(거래처, 담당자, 메모) 자동 복사
- ModalRepeaterTable onChange 시 groupData 반영
- 백엔드 타입 캐스팅으로 PostgreSQL 에러 해결
- 타입 정규화로 불필요한 UPDATE 방지
- 수정 모달에서 거래처/수주번호 읽기 전용 처리
- 같은 수주번호(order_no)를 가진 품목 일괄 수정 기능 추가
- groupByColumns 개념 도입 및 EditModal 그룹 데이터 처리 로직 구현
- ConditionalSectionViewer에서 DynamicComponentRenderer 사용으로 groupedData 전달 경로 확보
- ModalRepeaterTable onChange 에러 수정 및 sourceColumns 필터링 추가
- 조인된 컬럼 제외 로직 추가로 DB 저장 오류 해결
- autocomplete-search-input: !bg-background 강제 적용
- section-paper: 배경색 진하게(bg-muted/40), 기본 테두리 활성화, overflow-visible
- modal-repeater-table: tbody 흰색 배경, 스크롤 높이 제한(240px), 헤더 고정
- autocomplete 드롭다운: z-index 100으로 상향
배경색 통일로 일관된 디자인, 스크롤로 공간 효율 개선
- 백엔드: 배열 객체 형식 Repeater 데이터 처리 로직 추가
- 백엔드: Repeater 저장 시 company_code 자동 주입
- 백엔드: 부모 테이블 데이터 자동 병합 (targetTable = tableName)
- 프론트엔드: beforeFormSave 이벤트로 formData 주입
- 프론트엔드: _targetTable 메타데이터 전달
- 프론트엔드: ComponentRendererProps 상속 및 Renderer 단순화
멀티테넌시 및 부모-자식 관계 자동 처리로
복잡한 배열 데이터 저장 안정성 확보
문제:
- reference 매핑 시 조인 조건의 소스 필드 값이 undefined
- API 호출 시 filters 파라미터를 백엔드가 인식 못함
해결:
- 컬럼 처리를 2단계로 분리 (source/manual → reference)
- API 파라미터 변경 (filters→search, limit/offset→size/page)
- 응답 경로 수정 (data.data → data.data.data)
결과:
- 외부 테이블 참조 매핑 정상 작동
- 품목 선택 시 customer_item_mapping에서 단가 자동 조회 성공
새로운 기능
- 컬럼별 독립적인 소스 테이블 선택 기능
- SourceColumnSelector, ReferenceColumnSelector 컴포넌트 추가
- 계산 규칙 자동 동기화 로직 (cleanupInitialConfig)
UI/UX 개선
- 컬럼 설정 UI를 세로 레이아웃으로 재구성 (h-10 통일)
- 매핑 타입별 색상 구분 (파란색/보라색/초록색)
- 계산 규칙 섹션 재디자인 (안내 박스, 번호 배지, 빈 상태)
- 현재 설정 시각화 (코드 스타일 표시)
버그 수정
- 계산 규칙 삭제 시 컬럼이 수정 불가능 상태로 남는 문제 해결
- 결과 필드 변경 시 이전 필드의 calculated 속성 제거
- 초기 로드 시 계산 규칙과 컬럼 속성 동기화
개선 사항
- 모든 입력 필드의 높이와 텍스트 크기 일관성 확보
- 섹션별 명확한 제목과 설명 추가
- 접근성 향상 (ARIA 레이블, 포커스 스타일)
문제:
- 조건부 컨테이너 내부의 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 값 표시
새로운 그룹화 레이아웃 컴포넌트 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)
- 데이터 구조 변경: 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개 항목 입력 가능
- 각 항목 클릭 → 수정 가능
- 저장 시 모든 입력 항목이 개별 레코드로 저장됨
- 품목 검색 모달에서 컬럼명 대신 라벨명 표시
* 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 (상세 설계 문서)
leeheejin
kjs
SeongHyun Kim