feat(pop-string-list): 리스트 목록 컴포넌트 MVP 구현

테이블 데이터를 리스트/카드 두 가지 모드로 표시하는 pop-string-list 컴포넌트 전체 구현

- 6단계 Stepper 설정 패널 (모드 선택, 헤더/오버플로우, 데이터+컬럼 선택, 조인 설정, 카드/리스트 레이아웃, 필터/정렬)
- 카드 모드: 시각적 그리드 편집기 (드래그 너비/높이 조절, 셀 병합, 셀별 컬럼/스타일 설정)
- 리스트 모드: 드래그앤드롭 컬럼 순서 변경, 너비 조절, 런타임 컬럼 전환 설정
- 조인 설정: Combobox 테이블 검색, 자동 연결 가능 컬럼 발견, 타입 기반 필터링, 가져올 컬럼 선택
- CardColumnJoin에 selectedTargetColumns 필드 추가
- 디자이너 팔레트/에디터/렌더러에 pop-string-list 등록

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/components/pop/designer/panels/ComponentEditorPanel.tsx

@@ -56,8 +56,10 @@ const COMPONENT_TYPE_LABELS: Record<string, string> = {
   "pop-text": "텍스트",
   "pop-icon": "아이콘",
   "pop-dashboard": "대시보드",
+  "pop-card-list": "카드 목록",
   "pop-field": "필드",
   "pop-button": "버튼",
+  "pop-string-list": "리스트 목록",
   "pop-list": "리스트",
   "pop-indicator": "인디케이터",
   "pop-scanner": "스캐너",

frontend/components/pop/designer/panels/ComponentPalette.tsx

@@ -3,7 +3,7 @@
 import { useDrag } from "react-dnd";
 import { cn } from "@/lib/utils";
 import { PopComponentType } from "../types/pop-layout";
-import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick } from "lucide-react";
+import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List } from "lucide-react";
 import { DND_ITEM_TYPES } from "../constants";
 
 // 컴포넌트 정의
@@ -51,6 +51,12 @@ const PALETTE_ITEMS: PaletteItem[] = [
     icon: MousePointerClick,
     description: "액션 버튼 (저장/삭제/API/모달)",
   },
+  {
+    type: "pop-string-list",
+    label: "리스트 목록",
+    icon: List,
+    description: "테이블 데이터를 리스트/카드로 표시",
+  },
 ];
 
 // 드래그 가능한 컴포넌트 아이템

frontend/components/pop/designer/renderers/PopRenderer.tsx

@@ -69,6 +69,9 @@ const COMPONENT_TYPE_LABELS: Record<PopComponentType, string> = {
   "pop-text": "텍스트",
   "pop-icon": "아이콘",
   "pop-dashboard": "대시보드",
+  "pop-card-list": "카드 목록",
+  "pop-button": "버튼",
+  "pop-string-list": "리스트 목록",
 };
 
 // ========================================

frontend/components/pop/designer/types/pop-layout.ts

@@ -9,7 +9,7 @@
 /**
  * POP 컴포넌트 타입
  */
-export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-button";
+export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-button" | "pop-string-list";
 
 /**
  * 데이터 흐름 정의
@@ -346,6 +346,7 @@ export const DEFAULT_COMPONENT_GRID_SIZE: Record<PopComponentType, { colSpan: nu
   "pop-dashboard": { colSpan: 6, rowSpan: 3 },
   "pop-card-list": { colSpan: 4, rowSpan: 3 },
   "pop-button": { colSpan: 2, rowSpan: 1 },
+  "pop-string-list": { colSpan: 4, rowSpan: 3 },
 };
 
 /**