feat(pop-string-list): 리스트 목록 컴포넌트 MVP 구현
테이블 데이터를 리스트/카드 두 가지 모드로 표시하는 pop-string-list 컴포넌트 전체 구현
- 6단계 Stepper 설정 패널 (모드 선택, 헤더/오버플로우, 데이터+컬럼 선택, 조인 설정, 카드/리스트 레이아웃, 필터/정렬)
- 카드 모드: 시각적 그리드 편집기 (드래그 너비/높이 조절, 셀 병합, 셀별 컬럼/스타일 설정)
- 리스트 모드: 드래그앤드롭 컬럼 순서 변경, 너비 조절, 런타임 컬럼 전환 설정
- 조인 설정: Combobox 테이블 검색, 자동 연결 가능 컬럼 발견, 타입 기반 필터링, 가져올 컬럼 선택
- CardColumnJoin에 selectedTargetColumns 필드 추가
- 디자이너 팔레트/에디터/렌더러에 pop-string-list 등록
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-13 09:03:52 +09:00
|
|
|
"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: "" },
|
2026-02-23 15:08:52 +09:00
|
|
|
overflow: { visibleRows: 5, mode: "loadMore", showExpandButton: true, loadMoreCount: 5, maxExpandRows: 50, pageSize: 5, paginationStyle: "bottom" },
|
feat(pop-string-list): 리스트 목록 컴포넌트 MVP 구현
테이블 데이터를 리스트/카드 두 가지 모드로 표시하는 pop-string-list 컴포넌트 전체 구현
- 6단계 Stepper 설정 패널 (모드 선택, 헤더/오버플로우, 데이터+컬럼 선택, 조인 설정, 카드/리스트 레이아웃, 필터/정렬)
- 카드 모드: 시각적 그리드 편집기 (드래그 너비/높이 조절, 셀 병합, 셀별 컬럼/스타일 설정)
- 리스트 모드: 드래그앤드롭 컬럼 순서 변경, 너비 조절, 런타임 컬럼 전환 설정
- 조인 설정: Combobox 테이블 검색, 자동 연결 가능 컬럼 발견, 타입 기반 필터링, 가져올 컬럼 선택
- CardColumnJoin에 selectedTargetColumns 필드 추가
- 디자이너 팔레트/에디터/렌더러에 pop-string-list 등록
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-13 09:03:52 +09:00
|
|
|
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,
|
2026-02-23 18:45:21 +09:00
|
|
|
connectionMeta: {
|
|
|
|
|
sendable: [
|
2026-03-03 15:30:07 +09:00
|
|
|
{ key: "selected_row", label: "선택된 행", type: "selected_row", category: "data", description: "사용자가 선택한 행 데이터를 전달" },
|
2026-02-23 18:45:21 +09:00
|
|
|
],
|
|
|
|
|
receivable: [
|
2026-03-03 15:30:07 +09:00
|
|
|
{ key: "filter_condition", label: "필터 조건", type: "filter_value", category: "filter", description: "외부 컴포넌트에서 받은 필터 조건으로 목록 필터링" },
|
2026-02-23 18:45:21 +09:00
|
|
|
],
|
|
|
|
|
},
|
feat(pop-string-list): 리스트 목록 컴포넌트 MVP 구현
테이블 데이터를 리스트/카드 두 가지 모드로 표시하는 pop-string-list 컴포넌트 전체 구현
- 6단계 Stepper 설정 패널 (모드 선택, 헤더/오버플로우, 데이터+컬럼 선택, 조인 설정, 카드/리스트 레이아웃, 필터/정렬)
- 카드 모드: 시각적 그리드 편집기 (드래그 너비/높이 조절, 셀 병합, 셀별 컬럼/스타일 설정)
- 리스트 모드: 드래그앤드롭 컬럼 순서 변경, 너비 조절, 런타임 컬럼 전환 설정
- 조인 설정: Combobox 테이블 검색, 자동 연결 가능 컬럼 발견, 타입 기반 필터링, 가져올 컬럼 선택
- CardColumnJoin에 selectedTargetColumns 필드 추가
- 디자이너 팔레트/에디터/렌더러에 pop-string-list 등록
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-13 09:03:52 +09:00
|
|
|
touchOptimized: true,
|
|
|
|
|
supportedDevices: ["mobile", "tablet"],
|
|
|
|
|
});
|