pop-search에 내장되어 있던 status-chip 기능을 pop-status-bar라는
독립 컴포넌트로 분리하여 재사용성과 설정 유연성을 높인다.
상태 칩 클릭 시 카운트가 왜곡되던 순환 의존 문제를 해결한다.
[pop-status-bar 신규 컴포넌트]
- types.ts: StatusBarConfig, StatusChipOption, hiddenMessage 등 타입 정의
- PopStatusBarComponent: all_rows 구독 + 카운트 집계 + filter_value 발행
_source: "status-bar" 마커로 자신의 필터를 식별
hideUntilSubFilter: 하위 필터 선택 전 칩 숨김 + 설정 가능 안내 문구
- PopStatusBarConfig: 설정 패널 (DB 자동 채우기, 고유값 클릭 추가,
숨김 문구 설정, 하위 필터 가상 컬럼 안내)
- index.tsx: 레지스트리 등록, connectionMeta(filter_value/all_rows/set_value)
[카운트 순환 문제 수정]
- PopCardListV2Component: externalFilters에 _source 필드 저장
all_rows 발행 시 status-bar 소스 필터를 제외한 rowsForStatusCount 계산
상태 칩 클릭해도 전체 카운트가 유지됨
[pop-search에서 status-chip 제거]
- PopSearchComponent: StatusChipInput, allRows 구독, autoSubStatusColumn 제거
- PopSearchConfig: StatusChipDetailSettings 제거, 분리 안내 메시지로 대체
- index.tsx: receivable에서 all_rows 제거
- types.ts: StatusChipStyle, StatusChipConfig에 @deprecated 주석 추가
[설정 UX 개선]
- "전체 칩 자동 추가" → "전체 보기 칩 표시" + 설명 문구 추가
- hiddenMessage: 숨김 상태 안내 문구 설정 가능 (하드코딩 제거)
- useSubCount 활성 시 가상 컬럼 안내 경고 표시
공정 필터 선택 시 상태 뱃지/카운트/버튼이 공정 상태 기준으로 동작하도록
파생 상태 자동 계산, 하위 필터 __subStatus__ 주입, 접수 버튼 공정 행 특정
로직을 구현한다.
[파생 상태 자동 계산]
- types.ts: StatusValueMapping.isDerived 필드 추가
isDerived=true면 DB에 없는 상태로, 이전 공정 완료 시 자동 변환
- PopCardListV2Component: injectProcessFlow에 derivedRules 기반 변환 로직
같은 semantic의 원본 상태를 자동 추론 (waiting → acceptable)
- TimelineProcessStep에 processId, rawData 필드 추가
[하위 필터 __subStatus__ 주입]
- PopCardListV2Component: filteredRows를 2단계로 분리
1단계: 하위 테이블(work_order_process) 필터 → 매칭 공정의 상태를
VIRTUAL_SUB_STATUS/SEMANTIC/PROCESS/SEQ 가상 컬럼으로 주입
2단계: 메인 필터에서 status 컬럼을 __subStatus__로 자동 대체
- cell-renderers: StatusBadgeCell/ActionButtonsCell이 __subStatus__ 우선 참조
하드코딩된 접수가능 판별 로직(isAcceptable) 제거 → 설정 기반으로 전환
- all_rows 발행: { rows, subStatusColumn } envelope 구조로 메타 포함
[타임라인 강조(isCurrent) 개선]
- "기준" 상태(isDerived) 기반 강조 + 공정 필터 시 매칭 공정 강조
- 폴백: active → pending 순서로 자동 결정
[접수 버튼 공정 행 특정]
- cell-renderers: ActionButtonsCell에서 현재 공정의 processId를 __processId로 전달
- PopCardListV2Component: onActionButtonClick에서 __processId로 공정 행 UPDATE
[상태배지 타임라인 연동]
- PopCardListV2Config: StatusMappingEditor에 "타임라인 연동" 버튼 추가
같은 카드의 타임라인 statusMappings에서 값/라벨/색상/컬럼 자동 가져옴
[타임라인 설정 UI]
- PopCardListV2Config: StatusMappingsEditor에 "기준" 라디오 버튼 추가
하나만 선택 가능, 재클릭 시 해제
[연결 탭 하위 테이블 필터 설정]
- ConnectionEditor: isSubTable 체크박스 + targetColumn/filterMode 설정 UI
- pop-layout.ts: filterConfig.isSubTable 필드 추가
[status-chip 하위 필터 자동 전환]
- PopSearchComponent: 카드가 전달한 subStatusColumn 자동 감지
useSubCount 활성 시 집계/필터 컬럼 자동 전환
- PopSearchConfig: useSubCount 체크박스 설정 UI
- types.ts: StatusChipConfig.useSubCount 필드 추가
[디자이너 라벨]
- ComponentEditorPanel: comp.label || comp.id 패턴으로 통일
pop-search 컴포넌트에 status-chip 입력 타입을 추가하여 연결된 카드의
전체 데이터를 구독하고 상태별 건수를 집계/표시한다. 칩 클릭 시
filter_value를 발행하여 카드 목록을 필터링한다.
[status-chip 입력 타입]
- types.ts: StatusChipStyle, StatusChipConfig, STATUS_CHIP_STYLE_LABELS
- PopSearchComponent: StatusChipInput 컴포넌트 (allRows 구독 + 건수 집계)
- PopSearchConfig: StatusChipDetailSettings 설정 패널 (칩 옵션/스타일)
- index.tsx: receivable에 all_rows 이벤트 등록
[all_rows 이벤트]
- pop-card-list-v2: 데이터 로드 시 all_rows publish + sendable 등록
- pop-card-list: 데이터 로드 시 all_rows publish + sendable 등록
- useConnectionResolver: all_rows 타입 자동 매칭 로직 추가
[pop-card-list-v2 개선]
- 하위 테이블 필터 적용 시 __subStatus__ 가상 컬럼 주입
- externalFilters에 하위 테이블 조건 분리 처리
장바구니에서 여러 품목을 한꺼번에 입고 확정할 때 동일한 입고번호를
공유하도록 일괄 채번(shareAcrossItems) 기능을 추가하고, 입고 목록
화면에서 모달 검색 시 중복 항목을 제거하는 distinct 옵션과 선택된
필터를 해제하는 X 버튼을 구현한다.
[일괄 채번]
- pop-field 자동생성 설정에 shareAcrossItems 스위치 추가
- 백엔드 data-save / inbound-confirm: shareAcrossItems=true 매핑은
아이템 루프 전 1회만 allocateCode 호출하여 공유 코드 발급
- PopFieldComponent에서 shareAcrossItems 값을 백엔드로 전달
[모달 distinct]
- ModalSelectConfig에 distinct?: boolean 필드 추가
- 설정 패널 필터 탭 영역에 "중복 제거" 체크박스 배치
- ModalDialog fetchData에서 displayField 기준 Set 필터링
[선택 해제]
- ModalSearchInput: 값 선택 시 > 아이콘 -> X 버튼으로 전환
- X 클릭 시 modalDisplayText + 필터값 초기화 (stopPropagation)
- handleModalClear 콜백 + onModalClear prop 체인 연결
pop-search 컴포넌트의 date 입력 타입이 미구현 상태에서 네이티브 input으로
임시 처리되어 있던 것을 shadcn Calendar 기반 POP 전용 UI로 교체하고,
셀 크기에 입력 필드가 반응하지 않던 레이아웃 문제를 함께 해결한다.
[BLOCK P: 날짜 입력 타입]
- DateSingleInput: Calendar + Dialog/Popover 기반 단일 날짜 선택
- DateRangeInput: 프리셋(오늘/이번주/이번달) + Calendar 기간 선택
- CalendarDisplayMode(popover/modal) 설정으로 터치 환경 대응
- resolveFilterMode로 date->equals, range->range 자동 결정
- DateDetailSettings 설정 패널 추가 (모드 선택 + 캘린더 표시 방식)
- PopStringListComponent: range 필터 모드 구현 + 날짜 equals 비교 개선
[레이아웃 개선]
- 입력 필드가 셀 너비/높이에 반응하도록 h-full min-h-8 + w-full 적용
- labelPosition("top"/"left") 분기 제거 -> 항상 라벨 위 고정
- 설정 패널에서 "라벨 위치" Select UI 제거
- 기본 배치 크기 colSpan:4 rowSpan:2 -> colSpan:2 rowSpan:1
검색 컴포넌트의 연결 탭이 다른 컴포넌트(입력, 카드리스트)와 달리
필터 설정이 연결 폼에 포함되어 있던 비일관성을 해결한다.
- ConnectionEditor: FilterConnectionForm 제거, 모든 컴포넌트가
SimpleConnectionForm 사용하도록 통합
- PopSearchConfig: 상세설정 탭에 FilterConnectionSection 추가
(text/select/date-preset/modal 타입별 통합)
- FilterConnectionSection: 연결된 대상 컴포넌트의 테이블 컬럼을
API 조회하여 체크박스 기반 복수 선택 UI 제공
("카드에서 표시 중" / "기타 컬럼" 그룹 구분)
- types: SearchFilterMode, filterColumns 타입 추가
- PopSearchComponent: filterColumns 배열을 이벤트 payload에 포함
- useConnectionResolver: filterColumns를 targetColumns로 전달,
auto-match에서 filter_value 타입 매칭 + filterConfig 자동 추론
장바구니 담기 -> DB 저장 전체 플로우 구현 및 검증 완료.
- useCartSync 훅 신규: DB(cart_items) <-> 로컬 상태 동기화, dirty check, 일괄 저장
- pop-button cart 프리셋: 배지 표시, 저장 트리거, 확인 모달, 3색 데이터 흐름 시각화
- pop-card-list: 담기/취소 UI, cart_save_trigger 수신 시 saveToDb 실행
- 선택적 컬럼 저장: RowDataMode(all/selected) + 연결 기반 자동 컬럼 로딩
- ComponentEditorPanel: allComponents/connections/componentId를 ConfigPanel에 전달
- connectionMeta: cart_save_trigger/cart_updated/cart_save_completed 이벤트 정의
- ConnectionEditor: 이벤트 타입 연결 구분 (데이터 vs 이벤트)
- types.ts: CartItemWithId, CartSyncStatus, CartButtonConfig 등 타입 추가
- 접근성: NumberInputModal/PackageUnitModal에 DialogTitle 추가
Made-with: Cursor
모달 타입 통합 (modal-table/card/icon-grid -> modal 1종):
- normalizeInputType()으로 레거시 저장값 호환
- 캔버스 모달 모드 완전 제거 (ModalMode, modalCanvasId, returnEvent)
- SearchInputType 9종으로 정리
모달 뷰 실제 구현:
- TableView / IconView 분리 렌더링 (displayStyle 반영)
- 아이콘 뷰: 이름 첫 글자 컬러 카드 + 초성 그룹 헤더
- getIconColor() 결정적 해시 색상 (16색 팔레트)
가나다/ABC 필터 탭:
- ModalFilterTab 타입 + getGroupKey() 한글 초성 추출
- 쌍자음 합침 (ㄲ->ㄱ, ㄸ->ㄷ 등)
- 모달 상단 토글 버튼으로 초성/알파벳 섹션 그룹화
디자이너 설정 개선:
- 컬럼 헤더 라벨 커스터마이징 (columnLabels)
- 필터 탭 활성화 체크박스 (가나다/ABC)
- card 스타일 제거, 정렬 옵션 제거
- 검색 방식 (포함/시작/같음) 유지
시나리오 A 모달 선택 필터링:
- ConnectionEditor 필터 컬럼에 DB 전체 컬럼 표시
- pop-string-list 복수 필터 AND 지원
- useConnectionResolver 페이로드 구조 정규화
Co-authored-by: Cursor <cursoragent@cursor.com>
ConnectionEditor(연결 탭 UI) + useConnectionResolver(런타임 이벤트 라우터)를 추가하여
디자이너가 코드 없이 컴포넌트 간 데이터 흐름을 설정할 수 있도록 구현.
pop-search -> pop-string-list 실시간 필터링(시나리오 2) 검증 완료.
주요 변경:
- ConnectionEditor: 연결 추가/수정/삭제, 복수 컬럼 체크박스, 필터 모드 선택
- useConnectionResolver: connections 기반 __comp_output__/__comp_input__ 자동 라우팅
- connectionMeta 타입 + pop-search/pop-string-list에 sendable/receivable 등록
- PopDataConnection 확장 (sourceOutput, targetInput, filterConfig, targetColumns)
- pop-search 개선: 필드명 자동화, set_value receivable, number 타입, DRY
- pop-string-list: 복수 컬럼 OR 클라이언트 필터 수신
- "데이터" 탭 -> "연결" 탭, UI 용어 자연어화
Co-authored-by: Cursor <cursoragent@cursor.com>
- pop-search 컴포넌트 신규 추가 (Component, Config, types, index)
- 입력 타입: text, number, date, date-preset, select, multi-select, combo, modal-table, modal-card, modal-icon-grid, toggle
- 디자이너 팔레트, 레지스트리, 타입, 렌더러 라벨 등록
- 기본 그리드 크기 4x2, labelText/labelVisible 설정 지원
- filter_changed 이벤트 발행 (연결 시스템 미적용, 추후 dataFlow 기반으로 전환 예정)
Co-authored-by: Cursor <cursoragent@cursor.com>
SeongHyun Kim