9ccd94d927
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>
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* pop-string-list 컴포넌트 레지스트리 등록 진입점
|
|
*
|
|
* 이 파일을 import하면 side-effect로 PopComponentRegistry에 자동 등록됨
|
|
*/
|
|
|
|
import { PopComponentRegistry } from "../../PopComponentRegistry";
|
|
import { PopStringListComponent } from "./PopStringListComponent";
|
|
import { PopStringListConfigPanel } from "./PopStringListConfig";
|
|
import { PopStringListPreviewComponent } from "./PopStringListPreview";
|
|
import type { PopStringListConfig } from "./types";
|
|
|
|
// 기본 설정값
|
|
const defaultConfig: PopStringListConfig = {
|
|
displayMode: "list",
|
|
header: { enabled: true, label: "" },
|
|
overflow: { visibleRows: 5, mode: "loadMore", showExpandButton: true, loadMoreCount: 5, maxExpandRows: 50, pageSize: 5, paginationStyle: "bottom" },
|
|
dataSource: { tableName: "" },
|
|
listColumns: [],
|
|
cardGrid: undefined,
|
|
};
|
|
|
|
// 레지스트리 등록
|
|
PopComponentRegistry.registerComponent({
|
|
id: "pop-string-list",
|
|
name: "리스트 목록",
|
|
description: "테이블 데이터를 리스트 또는 카드 형태로 표시",
|
|
category: "display",
|
|
icon: "List",
|
|
component: PopStringListComponent,
|
|
configPanel: PopStringListConfigPanel,
|
|
preview: PopStringListPreviewComponent,
|
|
defaultProps: defaultConfig,
|
|
connectionMeta: {
|
|
sendable: [
|
|
{ key: "selected_row", label: "선택된 행", type: "selected_row", description: "사용자가 선택한 행 데이터를 전달" },
|
|
],
|
|
receivable: [
|
|
{ key: "filter_condition", label: "필터 조건", type: "filter_value", description: "외부 컴포넌트에서 받은 필터 조건으로 목록 필터링" },
|
|
],
|
|
},
|
|
touchOptimized: true,
|
|
supportedDevices: ["mobile", "tablet"],
|
|
});
|