SeongHyun Kim
c17dd86859
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에 하위 테이블 조건 분리 처리
62 lines
3.0 KiB
TypeScript
62 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* pop-card-list-v2 컴포넌트 레지스트리 등록 진입점
|
|
*
|
|
* import 시 side-effect로 PopComponentRegistry에 자동 등록
|
|
*/
|
|
|
|
import { PopComponentRegistry } from "../../PopComponentRegistry";
|
|
import { PopCardListV2Component } from "./PopCardListV2Component";
|
|
import { PopCardListV2ConfigPanel } from "./PopCardListV2Config";
|
|
import { PopCardListV2PreviewComponent } from "./PopCardListV2Preview";
|
|
import type { PopCardListV2Config } from "../types";
|
|
|
|
const defaultConfig: PopCardListV2Config = {
|
|
dataSource: { tableName: "" },
|
|
cardGrid: {
|
|
rows: 1,
|
|
cols: 1,
|
|
colWidths: ["1fr"],
|
|
rowHeights: ["32px"],
|
|
gap: 4,
|
|
showCellBorder: true,
|
|
cells: [],
|
|
},
|
|
gridColumns: 3,
|
|
cardGap: 8,
|
|
scrollDirection: "vertical",
|
|
overflow: { mode: "loadMore", visibleCount: 6, loadMoreCount: 6 },
|
|
cardClickAction: "none",
|
|
};
|
|
|
|
PopComponentRegistry.registerComponent({
|
|
id: "pop-card-list-v2",
|
|
name: "카드 목록 V2",
|
|
description: "슬롯 기반 카드 레이아웃 (CSS Grid + 셀 타입별 렌더링)",
|
|
category: "display",
|
|
icon: "LayoutGrid",
|
|
component: PopCardListV2Component,
|
|
configPanel: PopCardListV2ConfigPanel,
|
|
preview: PopCardListV2PreviewComponent,
|
|
defaultProps: defaultConfig,
|
|
connectionMeta: {
|
|
sendable: [
|
|
{ key: "selected_row", label: "선택된 행", type: "selected_row", category: "data", description: "사용자가 선택한 카드의 행 데이터를 전달" },
|
|
{ key: "all_rows", label: "전체 데이터", type: "all_rows", category: "data", description: "필터 적용 전 전체 데이터 배열 (상태 칩 건수 등)" },
|
|
{ key: "cart_updated", label: "장바구니 상태", type: "event", category: "event", description: "장바구니 변경 시 count/isDirty 전달" },
|
|
{ key: "cart_save_completed", label: "저장 완료", type: "event", category: "event", description: "장바구니 DB 저장 완료 후 결과 전달" },
|
|
{ key: "selected_items", label: "선택된 항목", type: "event", category: "event", description: "장바구니 모드에서 체크박스로 선택된 항목 배열" },
|
|
{ key: "collected_data", label: "수집 응답", type: "event", category: "event", description: "데이터 수집 요청에 대한 응답 (선택 항목 + 매핑)" },
|
|
],
|
|
receivable: [
|
|
{ key: "filter_condition", label: "필터 조건", type: "filter_value", category: "filter", description: "외부 컴포넌트에서 받은 필터 조건으로 카드 목록 필터링" },
|
|
{ key: "cart_save_trigger", label: "저장 요청", type: "event", category: "event", description: "장바구니 DB 일괄 저장 트리거 (버튼에서 수신)" },
|
|
{ key: "confirm_trigger", label: "확정 트리거", type: "event", category: "event", description: "입고 확정 시 수정된 수량 일괄 반영 + 선택 항목 전달" },
|
|
{ key: "collect_data", label: "수집 요청", type: "event", category: "event", description: "버튼에서 데이터+매핑 수집 요청 수신" },
|
|
],
|
|
},
|
|
touchOptimized: true,
|
|
supportedDevices: ["mobile", "tablet"],
|
|
});
|