장바구니(cart) 기반 구매입고 흐름에서 버튼 동작, 검색 접근성,
필터 안내 메시지 기능을 수정하여 실제 운영 시나리오에서의
안정성을 확보한다.
[pop-button 장바구니 모드 판단 수정]
- isCartMode: v1 preset뿐 아니라 v2 tasks에 cart-save가 포함된
경우에도 장바구니 모드로 인식하도록 개선
- resolvedCartScreenId: v2 tasks의 cartScreenId도 참조
- 장바구니 모드 분기를 v2 tasks 처리보다 먼저 실행하여
cart-save 버튼이 정상 동작하도록 순서 변경
[pop-search 아이콘 카드 접근성]
- IconView의 div 카드에 role="button", tabIndex={0},
onKeyDown(Enter/Space) 추가
- 브라우저 자동화 및 키보드 사용자가 아이콘 카드를
인터랙티브 요소로 인식 가능
[필터 필수 안내 메시지 기능]
- pop-card-list(장바구니 목록): requireFilter, requireFilterMessage
설정 추가, 필터 미선택 시 커스텀 안내 문구 표시
- pop-card-list-v2(MES 공정흐름): hideUntilFilteredMessage
설정 추가, 기존 필터 전 숨김에 커스텀 문구 지원
- 양쪽 설정 패널에 안내 문구 입력 UI 추가
[원본 화면 선택 Combobox 전환]
- PopCardListConfig 장바구니 모드의 원본 화면 선택을
Select에서 검색 가능한 Combobox로 변경
- 로그인 계정의 companyCode로 화면 목록 필터링 적용
ksh-v2-work의 POP 화면 디자이너 기능을 main에 병합한다.
[병합 내용]
- pop-card-list-v2: 슬롯 기반 CSS Grid 카드 컴포넌트 (12종 셀 타입)
- pop-status-bar: 독립 상태 칩 컴포넌트 (카운트 순환 문제 해결)
- pop-scanner: 바코드/QR 스캐너 + 멀티필드 파싱
- pop-profile: 사용자 프로필/PC전환/로그아웃 컴포넌트
- pop-button: 설정 패널 UX 전면 개선 + 제어 실행 기능
- pop-search: 날짜 입력 타입 + 연결 탭 일관성 통합
- POP 모드 네비게이션: PC <-> POP 양방향 전환 + 로그인 POP 모드 토글
- 타임라인 범용화 + 상태 값 매핑 동적 배열 전환
- 다중 액션 체이닝 + 외부 테이블 선택 + 카드 클릭 모달
[충돌 해결 4건]
- authController.ts: 양쪽 통합 (스마트공장 로그 + POP 랜딩 경로)
- AppLayout.tsx: 양쪽 통합 (메뉴 드래그 + POP 모드 메뉴, 리디자인 UI + POP 모드 항목)
- ConnectionEditor.tsx: ksh-v2-work 선택 (하위 테이블 필터 구조) + CSS 변수 적용
- pop-button.tsx: ksh-v2-work 선택 (자연어 UX + 제어 실행) + CSS 변수 스타일 유지
POP 버튼 컴포넌트에서 백엔드 제어관리(node_flows)를 직접 실행할 수
있도록 "제어 실행" 작업 유형을 추가하고, 데이터 수정 시 연결된
컴포넌트 기반으로 필드를 선택하는 UX로 개선한다.
[제어 실행 (custom-event 확장)]
- ButtonTask에 flowId/flowName 필드 추가
- ControlFlowTaskForm: Combobox(Popover+Command)로 검색/선택 UI
- executePopAction: flowId 기반 POST /dataflow/node-flows/:flowId/execute
- 기존 eventName 발행 메커니즘은 폴백으로 유지
[연결 데이터 UX 개선]
- extractCardFields -> extractConnectedFields 리팩토링
(connections 기반 연결 컴포넌트에서만 필드 추출)
- pop-card-list/pop-field/pop-search 타입별 필드 추출 로직
- 시스템 필드(__cart_quantity 등)에 한글 라벨 부여
- UI 라벨: "화면 데이터" -> "연결된 데이터"
[pop-card-list 필터 UI]
- 필터 조건 레이아웃을 가로 -> 세로 스택으로 변경
- 조건 번호 표시 + 입력 필드 높이 확대
[버그 수정]
- apiClient baseURL 이중 /api 경로 수정
- 응답 필드명 camelCase 통일
화면 디자이너(비개발자)가 버튼 작업 설정을 직관적으로 할 수 있도록
설정 패널의 용어, 레이아웃, 구조를 전면 개선한다.
[디자인 통일]
- Input/Select 높이 h-8, 라벨 text-xs font-medium, 도움말 text-[11px]로 통일
- db-conditional UI를 가로 나열에서 세로 스택으로 전환 (좁은 패널 잘림 방지)
- 작업 항목 간 간격, 패딩, 둥근 모서리 일관성 확보
[자연어 라벨]
- "대상 테이블" → "어떤 테이블을 수정할까요?"
- "변경 컬럼" → "어떤 항목(컬럼)을 바꿀까요?"
- "연산" → "어떻게 바꿀까요?" + 각 연산별 설명 도움말
- "값 출처: 고정값" → "직접 입력", "연결 데이터" → "화면 데이터에서 가져오기"
- 비교 연산자에 한글 설명 추가 (">=" → ">= (이상이면)")
[구조 개선]
- "조회 키"를 "고급 설정" 토글로 숨김 (기본 접힘, 대부분 자동 매칭)
- "연결 필드명" 수동 입력 → 카드 컴포넌트 필드 목록에서 Select 선택
- 접힌 헤더에 요약 텍스트 표시 + 마우스 호버 시 전체 툴팁
- 펼친 상태 하단에 설정 요약 미리보기
[컬럼 코멘트 표시]
- 백엔드: getTableSchema SQL에 col_description() 추가
- 프론트: ColumnCombobox에서 코멘트 표시 + 한글명 검색 지원
- ColumnInfo 인터페이스에 comment 필드 추가
버튼 컴포넌트의 실행 경로를 프리셋별 파편화에서 단일 작업 목록(task-list)
패턴으로 통합하고, 부분입고 시나리오 지원을 위해 data-update 연산을 확장한다.
[BLOCK M: 버튼 v2 통합 아키텍처]
- ButtonTask 타입 체계 정의 (10종 작업 타입 + UpdateOperation)
- PopButtonConfigV2 + migrateButtonConfig 자동 마이그레이션
- 설정 UI: 빠른 시작 + 외형 + 작업 목록 에디터
- executeTaskList 범용 실행 함수 (데이터 작업 일괄 백엔드 전달)
- collect_data 프로토콜에 cartChanges 포함
- 백엔드 tasks 배열 기반 처리 (data-save/update/delete/cart-save)
- useCartSync.getChanges() 추출 + 카드리스트 응답 포함
[BLOCK N: data-update 연산 확장]
- UpdateOperationType에 multiply, divide, db-conditional 추가
- ButtonTask에 db-conditional 전용 필드 5개 추가
(compareColumn, compareOperator, compareWith, dbThenValue, dbElseValue)
- 설정 UI: 드롭다운 3개 옵션 + DB 컬럼 비교 설정 폼
- 백엔드 SQL: multiply, divide(0-division 방어),
db-conditional(CASE WHEN 배치 UPDATE)
- 기존 add/subtract에 ::numeric 캐스팅 일관 적용
입고 확정(inbound-confirm) 실행 시 채번 규칙이 설정되어 있어도
inbound_number가 null로 저장되던 문제를 해결한다.
[채번 실행 (FIX-1)]
- types.ts: SaveMapping에 autoGenMappings 필드 추가 (numberingRuleId,
targetColumn, showResultModal)
- PopFieldComponent: collect_data 응답에 autoGenMappings 포함하여
백엔드에 채번 규칙 정보 전달
- popActionRoutes: INSERT 전 numberingRuleService.allocateCode() 호출,
생성된 코드를 generatedCodes 배열로 응답에 포함
[결과 모달 UX]
- pop-button: showResultModal 토글에 따라 채번 결과 모달 표시 분기
- 모달이 열려 있는 동안 followUpActions(refresh/navigate) 지연하여
사용자가 확인 버튼을 눌러야 후속 액션 실행
[셀렉트 높이 일관성]
- SelectTrigger hasCustomHeight에 /\bh-\d/ 패턴 추가하여
className의 h-9 등이 기본 data-size="xs"(h-6)와 충돌하지 않도록 수정
[기타 수정]
- SelectFieldInput: Set 기반 dedup으로 React key 중복 방지
- PopFieldConfig: AutoNumberEditor 제거, 채번 규칙을 저장 탭에서 관리
- PopFieldConfig: 전체 채번 규칙 보기 토글 추가
- PopCardListComponent: 장바구니 목록 모드에서 수량 자동 초기화 방지
- PopCardListConfig: 수식 필드 매핑 노출 + 누락 필드 자동 추가
- PopViewerWithModals에 __pop_navigate__ 이벤트 구독 추가
- targetScreenId가 있으면 해당 POP 화면으로 이동
- "back"이면 router.back(), params는 쿼리스트링 전달
- 입고확정 버튼에 카드리스트 선택 상태 시각 피드백
- 미선택: 기본 아이콘/색상
- 선택됨: emerald-600 배경 + 선택 개수 뱃지
- selected_items connectionMeta category를 "event"로 변경하여 자동 매칭 대상 포함
- useConnectionResolver: _auto 모드에서 역방향(타겟→소스) 라우팅 추가
- pop-button: 입고 확정 성공 후 followUpActions 실행 (navigate/refresh/event)
- pop-button: execute-action API URL 경로 수정 (/api/pop/ → /pop/)
컴포넌트 연결 단순화
- ConnectionEditor: 이벤트 연결 시 "어디로" Select 1개로 단순화
- useConnectionResolver: 호환 이벤트 자동 라우팅 (_auto 모드)
- connectionMeta에 category(event/filter/data) 필드 추가
상태 변경 규칙 UI 개선
- StatusChangeRule 타입 통합, 모든 버튼 프리셋에서 사용 가능
- TableCombobox/ColumnCombobox 공용 컴포넌트 추출 (pop-shared/)
- 테이블/컬럼 드롭다운, 고정값/조건부 값 설정 UI
- 입고확정 API 신규 (popActionRoutes.ts, 동적 상태 변경 처리)
조회 키 자동/수동 설정
- 대상 테이블 기반 자동 판단 (cart_items -> id, 그 외 -> row_key -> PK)
- 수동 모드: 카드 항목 필드와 대상 PK 컬럼을 직접 지정 가능
- PK 컬럼명 동적 표시 (isPrimaryKey 정보 활용)
장바구니 담기 -> 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
- executePopAction / usePopAction 훅 신규 생성
- pop-button을 usePopAction 기반으로 리팩토링
- PopModalDefinition 타입 + MODAL_SIZE_PRESETS 정의
- PopDesignerContext 신규 생성 (모달 탭 상태 공유)
- PopDesigner에 모달 탭 UI 추가 (메인 캔버스 / 모달 캔버스 전환)
- PopCanvas에 접이식 ModalSizeSettingsPanel + ModalThumbnailPreview 구현
- PopViewerWithModals 신규 생성 (뷰어 모달 렌더링 + 스택 관리)
- FULL 모달 전체화면 지원 (h-dvh, w-screen, rounded-none)
- pop-string-list 카드 버튼 액션 연동
- pop-icon / SelectedItemsDetailInput lucide import 최적화
- tsconfig skipLibCheck 설정 추가
Co-authored-by: Cursor <cursoragent@cursor.com>
- PopButtonComponent: 5가지 액션 타입(save/delete/api/modal/event) + 후속 액션 체이닝
- PopButtonConfigPanel: 프리셋 기반 설정(save/delete/logout/menu/modal-open/custom)
- 확인 다이얼로그(ConfirmConfig) 선택 기능
- usePopEvent/useDataSource 훅 연동
- PopComponentType에 pop-button 추가, 팔레트 등록
Co-authored-by: Cursor <cursoragent@cursor.com>
SeongHyun Kim
kjs
DDD1542